coloriseur.html 15.4 KB
Newer Older
1
{% extends "base.html" %}
Sylvain Coulange's avatar
Sylvain Coulange committed
2
{% load static %}
Sylvain Coulange's avatar
Sylvain Coulange committed
3

4
{% block content %}
5

6
7
8
9
10
<div class="inputDiv">
    <div class="param">
        <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>
Sylvain Coulange's avatar
Sylvain Coulange committed
11
    </div>
12
13
    <h2><span id="sp_consigne" class="langspan"></span></h2>
    <textarea id="inText" class="inText"></textarea><br/>
Sylvain Coulange's avatar
Sylvain Coulange committed
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

    <div id="regionPriorityDiv" style="display: none;">
        <i>Give a priority to:</i>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" onclick="thisRegion=this.value" value="UK" checked>
            <label class="form-check-label" for="inlineRadio1"><img width='30px' class='me-1' style='border:1px solid black; border-radius:3px' src='/static/im/flag-uk.png' title="United Kingdom (mostly RP)"></img></label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" onclick="thisRegion=this.value" value="US">
            <label class="form-check-label" for="inlineRadio2"><img width='30px' class='me-1' style='border:1px solid black; border-radius:3px' src='/static/im/flag-us.png' title="United States of America (mostly GA)"></img></label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" onclick="thisRegion=this.value" value="CA">
            <label class="form-check-label" for="inlineRadio3"><img width='30px' class='me-1' style='border:1px solid black; border-radius:3px' src='/static/im/flag-ca.png' title="Canada (mostly Standard Canadian English)"></img></label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio4" onclick="thisRegion=this.value" value="AU">
            <label class="form-check-label" for="inlineRadio4"><img width='30px' class='me-1' style='border:1px solid black; border-radius:3px' src='/static/im/flag-au.png' title="Australia (Australian English)"></img></label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio5" onclick="thisRegion=this.value" value="NZ">
            <label class="form-check-label" for="inlineRadio5"><img width='30px' class='me-1' style='border:1px solid black; border-radius:3px' src='/static/im/flag-nz.png' title="New Zealand (New Zealand English)"></img></label>
        </div>
        <div style="max-width: 700px;font-size: .8em; margin:auto">
            <i>(Today, Wikicolor's English dictionary is mostly based on RP (Britfone) and GA (CMU) English, other spellings come from the Wiktionary. Please do contribute adding more spellings by searching/editing our dictionary!)</i>
        </div>
    </div>

42
43
44
45
46
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
    <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>
</div>

<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>

<div id="outputDiv" class="win-black outputMainDiv">
    <div class="outputParam">
        <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-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"/>
                </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="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" />
126
127
                    </svg>
                </div>
128
129
130
131
                <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>
132
                    </div>
133
134
135
                    <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>
136
137
                    </div>
                </div>
138
139
140
141
142
143
144
145
146
            </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>
147
    </div>
148
149
150
151
152
    <h2><span id="sp_output" class="langspan"></span></h2>
    <center><div id="loader" class="loader" style="display: none;"></div></center>
    <div id="output" class="output outputBold"></div>
    <div id="outputzh" class="outputzh"></div>
</div>
153

Sylvain Coulange's avatar
Sylvain Coulange committed
154

155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<div class="divInfoWiki">
    <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>
</div>

<div>
    <a href="/app/dico/"><button><span id="sp_btnEditDico" class="langspan"></span></button></a>
</div>

<!-- Modal PopUp qui apparaît pour copier coller le texte -->
<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">
            <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>
184
            </div>
185

186
187
188
189
            <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>
190
            </div>
191
192
            <div class="copyButton">
                <button onclick="document.getElementById('pLienDivWhiteCode').style.display = 'block';">Code Source</button>
193
194
            </div>
        </div>
195
196
197
198
        
        <div class="modal-footer">
            <h3>WikiColor</h3>
        </div>
199
    </div>
200
</div>
201

202
203
204
205
206
207
208
209
210
<!-- 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=""/>
Sylvain Coulange's avatar
Sylvain Coulange committed
211
212
            <p><i>(Vous pouvez saisir plusieurs transcriptions différentes en les séparant par une virgule)</i></p>
            <button onclick="dicoAddPopBtnAjouter()" id="popAddwValid" style="margin: 5px;">Ajouter</button>
213
214
        </div>
    </div>
215
216
217
218
</div>
<div id="actionBlock" style="display: none;"><div class="loader mainLoad"></div></div>
<div id="alignPopDivBack" class="alignPopDivBack" style="display: none;"></div>
{% endblock %}
219

220

221
222
223
224
225
226
{% block javascript %}
<script src="{% static 'scripts/loc2stand.js' %}"></script>
<script src="{% static 'scripts/bicol2colcol.js' %}"></script>
<script src="{% static 'scripts/zhoutput.js' %}"></script>
<script src="{% static 'scripts/main.js' %}"></script>
{% endblock %}
227