coloriseur.html 18.9 KB
Newer Older
Sylvain Coulange's avatar
Sylvain Coulange committed
1
2
3
4
{% load static %}
<!DOCTYPE html>
<html>
<head>
5
    <title>WikiColor</title>
Sylvain Coulange's avatar
Sylvain Coulange committed
6
    <meta charset="utf-8">
7
    <link rel="shortcut icon" type="image/png" href="{% static 'wikicolor.ico' %}"/>
8
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
9
10
    <link href="{% static 'styles/keyboard-dark.css'%}" rel="stylesheet">
    <link href="{% static 'styles/loading.css'%}" rel="stylesheet">
11
    <link rel="stylesheet" type="text/css" href="{% static 'styles/phonochromie_alem_v3.css'%}">
Sylvain Coulange's avatar
Sylvain Coulange committed
12
    <link rel="stylesheet" type="text/css" href="{% static 'styles/styles.css'%}">
13
    <link rel="stylesheet" type="text/css" href="{% static 'styles/popup.css'%}">
14
    
15
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
16
    <script src="{% static 'scripts/jquery.keyboard.js'%}"></script>
17
    
Sylvain Coulange's avatar
Sylvain Coulange committed
18
19
</head>
<body>
Sylvain Coulange's avatar
Sylvain Coulange committed
20
21
    <div class="header"><span id="sp_header" class="langspan"></span></div>

22
    <a href="https://alem.hypotheses.org/outils-alem-app/wikicolor" target="_blank"><img src="{% static 'im/logo_wikicolor6b.png'%}" width="40%" class="langtitle" id="ti_titre"></a>
23
24
    <h2 id="subtitle"><span id="sp_subtitle" class="langspan contours"></span></h2>
    <div id="zhsubtitle">
25
        <div class="zhtokenHead"><div><svg viewBox="0 0 100 100" width="50" height="50" class="sinosvgHead" ><rect x="0" y="0" height="50" width="100" stroke="black" stroke-width="0.5" class="phon_ts"></rect><rect x="0" y="50" height="50" width="100" stroke="black" stroke-width="0.5" class="phon_1"></rect><text x="0" y="85" font-family="KaiTi" font-size="100" class="sinosvgText"></text><rect x="0" y="0" height="12" width="12" fill="black"></rect><rect x="88" y="88" height="12" width="12" fill="black"></rect></svg></div><div><svg viewBox="0 0 100 100" width="50" height="50" class="sinosvgHead" ><rect x="0" y="0" height="33" width="100" stroke="black" stroke-width="0.5" class="phon_t"></rect><rect x="0" y="33" height="33" width="100" stroke="black" stroke-width="0.5" class="phon_o"></rect><rect x="0" y="66" height="33" width="100" stroke="black" stroke-width="0.5" class="phon_n_maj"></rect><text x="0" y="85" font-family="KaiTi" font-size="100" class="sinosvgText"></text><rect x="0" y="0" height="12" width="12" fill="black"></rect><rect x="88" y="88" height="12" width="12" fill="black"></rect></svg></div></div><div class="zhtokenHead"><div><svg viewBox="0 0 100 100" width="50" height="50" class="sinosvgHead" ><rect x="0" y="0" height="100" width="100" stroke="black" stroke-width="0.5" class="phon_y"></rect><text x="0" y="85" font-family="KaiTi" font-size="100" class="sinosvgText"></text><rect x="0" y="44" height="12" width="12"></rect><rect x="44" y="88" height="12" width="12" fill="black"></rect><rect x="88" y="0" height="12" width="12" fill="black"></rect></svg></div><div><svg viewBox="0 0 100 100" width="50" height="50" class="sinosvgHead" ><rect x="0" y="0" height="50" width="100" stroke="black" stroke-width="0.5" class="phon_i"></rect><rect x="0" y="50" height="50" width="100" stroke="black" stroke-width="0.5" class="phon_n"></rect><text x="0" y="85" font-family="KaiTi" font-size="100" class="sinosvgText"></text><rect x="0" y="0" height="12" width="12" fill="black"></rect><rect x="88" y="0" height="12" width="12" fill="black"></rect></svg></div></div><div class="zhtokenHead"><div><svg viewBox="0 0 100 100" width="50" height="50" class="sinosvgHead" ><rect x="0" y="0" height="33" width="100" stroke="black" stroke-width="0.5" class="phon_ts_retr"></rect><rect x="0" y="33" height="33" width="100" stroke="black" stroke-width="0.5" class="phon_a"></rect><rect x="0" y="66" height="33" width="100" stroke="black" stroke-width="0.5" class="phon_w"></rect><text x="0" y="85" font-family="KaiTi" font-size="100" class="sinosvgText"></text><rect x="0" y="0" height="12" width="12" fill="black"></rect><rect x="88" y="0" height="12" width="12" fill="black"></rect></svg></div></div><div class="zhtokenHead"><div><svg viewBox="0 0 100 100" width="50" height="50" class="sinosvgHead" ><rect x="0" y="0" height="50" width="100" stroke="black" stroke-width="0.5" class="phon_s"></rect><rect x="0" y="50" height="50" width="100" stroke="black" stroke-width="0.5" class="phon_7"></rect><text x="0" y="85" font-family="KaiTi" font-size="100" class="sinosvgText"></text><rect x="0" y="0" height="12" width="12" fill="black"></rect><rect x="88" y="88" height="12" width="12" fill="black"></rect></svg></div><div><svg viewBox="0 0 100 100" width="50" height="50" class="sinosvgHead" ><rect x="0" y="0" height="50" width="100" stroke="black" stroke-width="0.5" class="phon_t_hs_slash"></rect><rect x="0" y="50" height="50" width="100" stroke="black" stroke-width="0.5" class="phon_i"></rect><text x="0" y="85" font-family="KaiTi" font-size="100" class="sinosvgText"></text><rect x="0" y="0" height="12" width="12" fill="black"></rect><rect x="88" y="88" height="12" width="12" fill="black"></rect></svg></div></div></div>
26
    </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
27

Sylvain Coulange's avatar
Sylvain Coulange committed
28
    <div class="choixLang">
29
30
31
        <select id="choixLang" onchange="selectLang(this.value)">
            <option value="fr">Français</option>
            <option value="en">English</option>
Sylvain Coulange's avatar
Sylvain Coulange committed
32
            <option value="zh">中文</option>
33
34
35
        </select>
    </div>

Sylvain Coulange's avatar
Sylvain Coulange committed
36
    <div class="inputDiv">
37
        <div class="param">
Sylvain Coulange's avatar
Sylvain Coulange committed
38
39
40
            <input id="monochrome" style="display: none;" type="radio" name="colorType" onclick="toMonochrome()" value="mono"> <label id="monochromeLabel" style="display: none;" for="monochrome"><span style="color:black;background: transparent;-webkit-background-clip: unset;background-clip: unset;-webkit-text-fill-color: black;text-decoration: unset;" class="phon_m monochrome">M</span><span style="color:black;background: transparent;-webkit-background-clip: unset;background-clip: unset;-webkit-text-fill-color: black;text-decoration: unset;" class="phon_q_maj stress1 monochrome">o</span><span style="color:black;background: transparent;-webkit-background-clip: unset;background-clip: unset;-webkit-text-fill-color: black;text-decoration: unset;" class="phon_n monochrome">n</span><span style="color:black;background: transparent;-webkit-background-clip: unset;background-clip: unset;-webkit-text-fill-color: black;text-decoration: unset;" class="phon_arobase schwa monochrome">o</span><span style="color:black;background: transparent;-webkit-background-clip: unset;background-clip: unset;-webkit-text-fill-color: black;text-decoration: unset;" class="phon_k monochrome">ch</span><span style="color:black;background: transparent;-webkit-background-clip: unset;background-clip: unset;-webkit-text-fill-color: black;text-decoration: unset;" class="phon_r_slash monochrome">r</span><span style="color:black;background: transparent;-webkit-background-clip: unset;background-clip: unset;-webkit-text-fill-color: black;text-decoration: unset;" class="phon_arobaseu_maj monochrome">o</span><span style="color:black;background: transparent;-webkit-background-clip: unset;background-clip: unset;-webkit-text-fill-color: black;text-decoration: unset;" class="phon_m monochrome">me</span></label><br/>
            <input id="swcolor" type="radio" name="colorType" onclick="toSilentWay()" value="sw" checked> <label id="silentWayLabel" for="swcolor"><span id="sp_silentWay" class="langspan"></span></label><br/>
            <input id="bicolor" type="radio" name="colorType" onclick="toBicolor()" value="bi"> <label id="bicolorLabel" for="bicolor"><span id="sp_bicolor" class="langspan"></span></label>
41
        </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
42
        <h2><span id="sp_consigne" class="langspan"></span></h2>
43
        <textarea id="inText" class="inText"></textarea><br/>
44
45
        <button style="background-color: rgb(179, 247, 179);" id="coloriser" onclick="getColorisation()"><span id="sp_btnColoriser" class="langspan"></span></button>
        <button style="background-color: rgb(221, 221, 221);" id="delInText" onclick="delInText()"><span id="sp_btnErase" class="langspan"></span></button>
Sylvain Coulange's avatar
Sylvain Coulange committed
46
47
    </div>

Sylvain Coulange's avatar
Sylvain Coulange committed
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
    <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
        <defs>
            <linearGradient id="gradient_ts" x1="0" x2="1" y1="0" y2="0">
                <stop offset="50%" class="phon_t"/>
                <stop offset="51%" class="phon_s"/>
            </linearGradient>
            <linearGradient id="gradient_t_hs" x1="0" x2="1" y1="0" y2="0">
                <stop offset="50%" class="phon_t_h"/>
                <stop offset="51%" class="phon_s"/>
            </linearGradient>
            <linearGradient id="gradient_ts_slash" x1="0" x2="1" y1="0" y2="0">
                <stop offset="50%" class="phon_t"/>
                <stop offset="51%" class="phon_s_slash"/>
            </linearGradient>
            <linearGradient id="gradient_t_hs_slash" x1="0" x2="1" y1="0" y2="0">
                <stop offset="50%" class="phon_t_h"/>
                <stop offset="51%" class="phon_s_slash"/>
            </linearGradient>
            <linearGradient id="gradient_ts_retr" x1="0" x2="1" y1="0" y2="0">
                <stop offset="50%" class="phon_t"/>
                <stop offset="51%" class="phon_s_retr"/>
            </linearGradient>
            <linearGradient id="gradient_t_hs_retr" x1="0" x2="1" y1="0" y2="0">
                <stop offset="50%" class="phon_t_h"/>
                <stop offset="51%" class="phon_s_retr"/>
            </linearGradient>

            <pattern id="zai" patternUnits="userSpaceOnUse" width="100" height="100">
                <rect stroke="black" stroke-width="0.5" width="100px" height="33px" x="0" y="0" class="phon_t_hs" />
                <rect stroke="black" stroke-width="0.5" width="100px" height="33px" x="0" y="33" class="phon_a" />
                <rect stroke="black" stroke-width="0.5" width="100px" height="33px" x="0" y="66" class="phon_j" />
            </pattern>

        </defs>
        <style>
            .phon_t_hs_retr {
                fill:url(#gradient_t_hs_retr);
            }
            .phon_ts_retr {
                fill:url(#gradient_ts_retr);
            }
            .phon_t_hs {
                fill:url(#gradient_t_hs);
            }
            .phon_ts {
                fill:url(#gradient_ts);
            }
            .phon_t_hs_slash {
                fill:url(#gradient_t_hs_slash);
            }
            .phon_ts_slash {
                fill:url(#gradient_ts_slash);
            }
        </style>
    </svg>

104
    <div id="outputDiv" class="win-black outputMainDiv">
105
        <div class="outputParam">
106
107
108
109
110
111
112
            <center>
                <div class="btnzi langtitle" id="ti_btnCouleurFond" onclick="bg2white()">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-circle-half" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M8 15V1a7 7 0 1 1 0 14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
                    </svg>
                </div>
                <div class="langtitle" id="ti_btnCopierColler" onclick="getPopUp()">
113
114
115
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
                        <path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
116
117
118
119
120
121
122
                    </svg>
                </div>
                <div class="langtitle" id="ti_btnBold" onclick="toggleBold()">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-type-bold" viewBox="0 0 16 16">
                        <path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 0 0 1.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13H8.21zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z"/>
                    </svg>
                </div>
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
                <div id="btnLiaison" class="btn-group dropstart">
                    <div class="langtitle" data-bs-toggle="dropdown" aria-expanded="false" id="ti_btnLiaison">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-fonts" viewBox="0 0 16 16">
                            <path d="m 9.9868135,1.9491526 h -8.511 l -0.082,2.46 h 0.478 c 0.26,-1.544 0.76,-1.783 2.694,-1.845 l 0.424,-0.013 v 7.8270004 c 0,0.663 -0.144,0.82 -1.3,0.923 v 0.52 h 4.082 v -0.52 c -1.162,-0.103 -1.306,-0.26 -1.306,-0.923 V 2.5511526 l 0.43,0.013 c 1.935,0.062 2.434,0.301 2.694,1.846 h 0.4790005 z" id="path2" inkscape:connector-curvature="0" />
                            <path d="m 8.9519997,13.736064 q 1.3535153,0 2.6777343,-0.304688 1.330078,-0.304687 2.671875,-0.914062 v 0.738281 q -1.376953,0.691406 -2.707031,1.03711 -1.330078,0.345703 -2.6425783,0.345703 -1.3066407,0 -2.6308594,-0.345703 -1.3242188,-0.339844 -2.7070313,-1.03711 v -0.738281 q 1.3476563,0.615234 2.6660157,0.914062 1.3183593,0.304688 2.671875,0.304688 z" style="font-size:12px" id="path9" />
                        </svg>
                    </div>
                    <div class="dropdown-menu px-3 text-nowrap">
                        <div class="form-check">
                            <input checked class="form-check-input" type="checkbox" id="liaisonsObligatoires" onchange="toggleLiaisons()">
                            <label class="form-check-label" for="liaisonsObligatoires">Liaisons obligatoires</label>
                        </div>
                        <div class="form-check">
                            <input checked class="form-check-input" type="checkbox" id="liaisonsFacultatives" onchange="toggleLiaisons()">
                            <label class="form-check-label" for="liaisonsFacultatives">Liaisons facultatives</label>
                        </div>
                    </div>
                </div>
                
142
143
144
145
146
147
148
                <div id="ti_btnzi" onclick="togglezi()">
                    <img src="{% static 'im/btn-zi.png' %}" class="btnzi">
                </div>
                <div id="ti_btnwordspace" onclick="togglewordspace()">
                    <img id="imgzhtokenspace" src="{% static 'im/zhtokenspaceblack.png' %}" class="btnzi">
                </div>
            </center>
149
        </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
150
        <h2><span id="sp_output" class="langspan"></span></h2>
151
        <center><div id="loader" class="loader" style="display: none;"></div></center>
152
        <div id="output" class="output outputBold"></div>
Sylvain Coulange's avatar
Sylvain Coulange committed
153
        <div id="outputzh" class="outputzh"></div>
154
155
    </div>

156

157
    <div class="divInfoWiki">
158
159
160
161
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-info-circle-fill" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM8 5.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
        </svg>
        <span id="sp_infoWiki" class="langspan"></span>
162
163
    </div>

Sylvain Coulange's avatar
Sylvain Coulange committed
164
    <div>
Sylvain Coulange's avatar
Sylvain Coulange committed
165
        <a href="/app/dico/"><button><span id="sp_btnEditDico" class="langspan"></span></button></a>
Sylvain Coulange's avatar
Sylvain Coulange committed
166
167
    </div>

168
    <!-- Modal PopUp qui apparaît pour copier coller le texte -->
169
170
171
    <div id="myModal" class="modal">
        <!-- Modal content -->
        <div class="modal-content">
172
173
174
            <div class="modal-header">
                <span class="close">&times;</span>
                <h2>Copier/coller le résultat</h2>
175
            </div>
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
            
            <div class="modal-body">
                <p>Copier/coller le texte ci-dessous dans LibreOffice, Word ou dans un e-mail, par exemple.</p>
                <div id="pLienDiv" contenteditable="true" class="pLienDiv" style="background-color: #000000;"></div>
                <textarea id="pLienDivCode" style="display: none; font-family: 'Courier New', Courier, monospace; font-size: small; width:100%; height:100px"></textarea>
                <div class="copyButton">
                    <button onclick="toClipBoard('pLienDiv','myTooltip')" onmouseout="outFunc('myTooltip')"><span class="copyButtonText" id="myTooltip">Copier</span>Copier</button>
                </div>
                <div class="copyButton">
                    <button onclick="document.getElementById('pLienDivCode').style.display = 'block';">Code Source</button>
                </div>

                <div id="pLienDivWhite" contenteditable="true" class="pLienDiv" style="-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;"></div>
                <textarea id="pLienDivWhiteCode" style="display: none; font-family: 'Courier New', Courier, monospace; font-size: small; width:100%; height:100px"></textarea>
                <div class="copyButton">
                    <button onclick="toClipBoard('pLienDivWhite', 'myTooltipWhite')" onmouseout="outFunc('myTooltipWhite')"><span class="copyButtonText" id="myTooltipWhite">Copier</span>Copier</button>
                </div>
                <div class="copyButton">
                    <button onclick="document.getElementById('pLienDivWhiteCode').style.display = 'block';">Code Source</button>
                </div>
            </div>
            
            <div class="modal-footer">
                <h3>WikiColor</h3>
200
201
202
203
            </div>
        </div>
    </div>

204
205
206
207
208
209
210
211
212
213
214
215
216
217
    <!-- Modal qui apparaît pour ajouter un mot au dictionnaire -->
    <div id="popAddw" class="modal">
        <div class="popAddw-content">
            <div class="popAddw-header">
                Ajouter un mot au dictionnaire
            </div>
            <div class="popAddw-body">
                <b>Mot : </b><span id="popAddwMot"></span><br/>
                <b>Transcription (API) : </b><input id="popAddwTrans" class="popAddwTrans api-kb" type="text" value=""/>
                <button id="popAddwValid" style="margin: 5px;">Ajouter</button>
            </div>
        </div>
    </div>
    <div id="actionBlock" style="display: none;"><div class="loader mainLoad"></div></div>
Sylvain Coulange's avatar
Sylvain Coulange committed
218
    <div id="alignPopDivBack" class="alignPopDivBack" style="display: none;"></div>
219

220
    {% include 'footer.html' %}
221

222
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
Sylvain Coulange's avatar
Sylvain Coulange committed
223
    <script type="text/javascript" src="{% static 'languages/languages.js' %}"></script>
Sylvain Coulange's avatar
Sylvain Coulange committed
224
    <script src="{% static 'scripts/loc2stand.js' %}"></script>
225
    <script src="{% static 'scripts/bicol2colcol.js' %}"></script>
Sylvain Coulange's avatar
Sylvain Coulange committed
226
    <script src="{% static 'scripts/zhoutput.js' %}"></script>
Sylvain Coulange's avatar
Sylvain Coulange committed
227
    <script src="{% static 'scripts/main.js' %}"></script>
228
    <script src="{% static 'scripts/keyboard.js' %}"></script>
229
230


Sylvain Coulange's avatar
Sylvain Coulange committed
231
232
</body>
</html>