coloriseur.html 16.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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" 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
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
15
    <script src="{% static 'scripts/jquery.keyboard.js'%}"></script>
16
    
Sylvain Coulange's avatar
Sylvain Coulange committed
17
18
</head>
<body>
Sylvain Coulange's avatar
Sylvain Coulange committed
19
20
    <div class="header"><span id="sp_header" class="langspan"></span></div>

21
    <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>
22
23
24
25
    <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
26

Sylvain Coulange's avatar
Sylvain Coulange committed
27
    <div class="choixLang">
28
29
30
        <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
31
            <option value="zh">中文</option>
32
33
34
        </select>
    </div>

Sylvain Coulange's avatar
Sylvain Coulange committed
35
    <div class="inputDiv">
36
        <div class="param">
Sylvain Coulange's avatar
Sylvain Coulange committed
37
38
39
            <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>
40
        </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
41
        <h2><span id="sp_consigne" class="langspan"></span></h2>
42
        <textarea id="inText" class="inText"></textarea><br/>
43
44
        <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
45
46
    </div>

Sylvain Coulange's avatar
Sylvain Coulange committed
47
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
    <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>

103
    <div id="outputDiv" class="win-black outputMainDiv">
104
        <div class="outputParam">
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
            <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>
                <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>
129
        </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
130
        <h2><span id="sp_output" class="langspan"></span></h2>
131
        <center><div id="loader" class="loader" style="display: none;"></div></center>
132
        <div id="output" class="output outputBold"></div>
Sylvain Coulange's avatar
Sylvain Coulange committed
133
        <div id="outputzh" class="outputzh"></div>
134
135
    </div>

136

137
    <div class="divInfoWiki">
138
139
140
141
        <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>
142
143
    </div>

Sylvain Coulange's avatar
Sylvain Coulange committed
144
    <div>
Sylvain Coulange's avatar
Sylvain Coulange committed
145
        <a href="/app/dico/"><button><span id="sp_btnEditDico" class="langspan"></span></button></a>
Sylvain Coulange's avatar
Sylvain Coulange committed
146
147
    </div>

148
149
150
151
152
153
154
155
156
    <!-- 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">
157
            <p>Copier/coller le texte ci-dessous dans LibreOffice, Word ou dans un e-mail, par exemple.</p>
158
            <div id="pLienDiv" contenteditable="true" class="pLienDiv" style="background-color: #000000;"></div>
159
            <div class="copyButton">
Sylvain Coulange's avatar
Sylvain Coulange committed
160
                <button onclick="toClipBoard('pLienDiv','myTooltip')" onmouseout="outFunc()"><span class="copyButtonText" id="myTooltip">Copier</span>Copier</button>
161
            </div>
162
            <div id="pLienDivWhite" contenteditable="true" class="pLienDiv" style="-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;"></div>
163
            <div class="copyButton">
Sylvain Coulange's avatar
Sylvain Coulange committed
164
                <button onclick="toClipBoard('pLienDivWhite', 'myTooltipWhite')" onmouseout="outFuncWhite()"><span class="copyButtonText" id="myTooltipWhite">Copier</span>Copier</button>
165
166
167
168
169
170
171
172
            </div>
        </div>
        <div class="modal-footer">
            <h3>WikiColor</h3>
        </div>
        </div>
    </div>

173
174
175
176
177
178
179
180
181
182
183
184
185
186
    <!-- 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
187
    <div id="alignPopDivBack" class="alignPopDivBack" style="display: none;"></div>
188

189
    {% include 'footer.html' %}
190

191
    <!-- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> -->
Sylvain Coulange's avatar
Sylvain Coulange committed
192
    <script type="text/javascript" src="{% static 'languages/languages.js' %}"></script>
Sylvain Coulange's avatar
Sylvain Coulange committed
193
    <script src="{% static 'scripts/loc2stand.js' %}"></script>
194
    <script src="{% static 'scripts/bicol2colcol.js' %}"></script>
Sylvain Coulange's avatar
Sylvain Coulange committed
195
    <script src="{% static 'scripts/zhoutput.js' %}"></script>
Sylvain Coulange's avatar
Sylvain Coulange committed
196
    <script src="{% static 'scripts/main.js' %}"></script>
197
    <script src="{% static 'scripts/keyboard.js' %}"></script>
198
199


Sylvain Coulange's avatar
Sylvain Coulange committed
200
201
</body>
</html>