coloriseur.html 18.3 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
25
26
    <h2 id="subtitle"><span id="sp_subtitle" class="langspan contours"></span></h2>
    <div id="zhsubtitle">
        <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_u_maj"></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>
    </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
113
114
115
116
117
118
119
120
121
122
            <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()">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-textarea-t" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M1.5 2.5A1.5 1.5 0 0 1 3 1h10a1.5 1.5 0 0 1 1.5 1.5v3.563a2 2 0 0 1 0 3.874V13.5A1.5 1.5 0 0 1 13 15H3a1.5 1.5 0 0 1-1.5-1.5V9.937a2 2 0 0 1 0-3.874V2.5zm1 3.563a2 2 0 0 1 0 3.874V13.5a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5V9.937a2 2 0 0 1 0-3.874V2.5A.5.5 0 0 0 13 2H3a.5.5 0 0 0-.5.5v3.563zM2 7a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm12 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
                        <path d="M11.434 4H4.566L4.5 5.994h.386c.21-1.252.612-1.446 2.173-1.495l.343-.011v6.343c0 .537-.116.665-1.049.748V12h3.294v-.421c-.938-.083-1.054-.21-1.054-.748V4.488l.348.01c1.56.05 1.963.244 2.173 1.496h.386L11.434 4z"/>
                    </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
169
170
171
172
173
174
175
176
    <!-- Modal PopUp qui apparaît lors de l'enregistrement -->
    <div id="myModal" class="modal">
        <!-- Modal content -->
        <div class="modal-content">
        <div class="modal-header">
            <span class="close">&times;</span>
            <h2>Copier/coller le résultat</h2>
        </div>
        <div class="modal-body">
177
            <p>Copier/coller le texte ci-dessous dans LibreOffice, Word ou dans un e-mail, par exemple.</p>
178
            <div id="pLienDiv" contenteditable="true" class="pLienDiv" style="background-color: #000000;"></div>
179
            <div class="copyButton">
Sylvain Coulange's avatar
Sylvain Coulange committed
180
                <button onclick="toClipBoard('pLienDiv','myTooltip')" onmouseout="outFunc()"><span class="copyButtonText" id="myTooltip">Copier</span>Copier</button>
181
            </div>
182
            <div id="pLienDivWhite" contenteditable="true" class="pLienDiv" style="-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;"></div>
183
            <div class="copyButton">
Sylvain Coulange's avatar
Sylvain Coulange committed
184
                <button onclick="toClipBoard('pLienDivWhite', 'myTooltipWhite')" onmouseout="outFuncWhite()"><span class="copyButtonText" id="myTooltipWhite">Copier</span>Copier</button>
185
186
187
188
189
190
191
192
            </div>
        </div>
        <div class="modal-footer">
            <h3>WikiColor</h3>
        </div>
        </div>
    </div>

193
194
195
196
197
198
199
200
201
202
203
204
205
206
    <!-- 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
207
    <div id="alignPopDivBack" class="alignPopDivBack" style="display: none;"></div>
208

209
    {% include 'footer.html' %}
210

211
    <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
212
    <script type="text/javascript" src="{% static 'languages/languages.js' %}"></script>
Sylvain Coulange's avatar
Sylvain Coulange committed
213
    <script src="{% static 'scripts/loc2stand.js' %}"></script>
214
    <script src="{% static 'scripts/bicol2colcol.js' %}"></script>
Sylvain Coulange's avatar
Sylvain Coulange committed
215
    <script src="{% static 'scripts/zhoutput.js' %}"></script>
Sylvain Coulange's avatar
Sylvain Coulange committed
216
    <script src="{% static 'scripts/main.js' %}"></script>
217
    <script src="{% static 'scripts/keyboard.js' %}"></script>
218
219


Sylvain Coulange's avatar
Sylvain Coulange committed
220
221
</body>
</html>