coloriseur.html 18.1 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
5
6
7
8
9
10
11
12
13
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
{% block content %}
<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>

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
<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>
    </div>
    <h2 class="inputDivH2"><span id="sp_consigne" class="langspan"></span></h2>
    <textarea id="inText" class="inText"></textarea><br/>

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

Sylvain Coulange's avatar
Sylvain Coulange committed
97
    <div class="accordion" id="accordionExample">
98
99
100
101
102
103
104
105
106
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingTwo">
            <button class="accordion-button collapsed myAccordion-btn langtitle" id="ti_btnCustom" style="border-radius: 50%;" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear-fill me-2" viewBox="0 0 16 16"><path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/></svg>
            </button>
            </h2>
            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    <p class="langspan" id="sp_customExplain"></p>
107
                    <span class="langspan" id="sp_customColBase"></span> <input type="color" id="colorPicker-Base" class="colorSetting" onchange="setCol('phon_base',this.value)">
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
                    
                    <!-- TABLES DES PHONEMES -->
                    <small><div id="phonTable"></div></small>
                    
                    <small><i>(*vous pourrez bientôt enregistrer et partager vos préférences de colorisation.)</i></small><br/>
                    <small><i>(*n'hésitez pas à nous faire remonter vos besoins et suggestions pour WikiColor! <a href="mailto:contact@alem-app.fr">nous contacter</a>)</i></small>
                </div> <!-- end accordion body -->
            </div>
        </div>
      </div>
      
    <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>

123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<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" />
147
148
                    </svg>
                </div>
149
150
151
152
                <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>
153
                    </div>
154
155
156
                    <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>
157
158
                    </div>
                </div>
159
160
161
162
163
164
165
166
167
            </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>
168
    </div>
169
170
171
172
173
    <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>
174

Sylvain Coulange's avatar
Sylvain Coulange committed
175

176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<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>
Sylvain Coulange's avatar
Sylvain Coulange committed
193
            <h2><span id="sp_copypasteH2" class="langspan"></span></h2>
194
195
196
        </div>
        
        <div class="modal-body">
Sylvain Coulange's avatar
Sylvain Coulange committed
197
            <p><span id="sp_copypasteP" class="langspan"></span></p>
198
199
200
            <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">
Sylvain Coulange's avatar
Sylvain Coulange committed
201
                <button onclick="toClipBoard('pLienDiv','myTooltip')" onmouseout="outFunc('myTooltip')"><span class="copyButtonText langspan" id="myTooltip"></span><span id="sp_copypasteCopier" class="langspan"></span></button>
202
203
            </div>
            <div class="copyButton">
Sylvain Coulange's avatar
Sylvain Coulange committed
204
                <button onclick="document.getElementById('pLienDivCode').style.display = 'block';"><span id="sp_copypasteCodeSource" class="langspan"></span></button>
205
            </div>
206

207
208
209
            <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">
Sylvain Coulange's avatar
Sylvain Coulange committed
210
                <button onclick="toClipBoard('pLienDivWhite', 'myTooltipWhite')" onmouseout="outFunc('myTooltipWhite')"><span class="copyButtonText langspan" id="myTooltipWhite"></span><span id="sp_copypasteCopierWhite" class="langspan"></span></button>
211
            </div>
212
            <div class="copyButton">
Sylvain Coulange's avatar
Sylvain Coulange committed
213
                <button onclick="document.getElementById('pLienDivWhiteCode').style.display = 'block';"><span id="sp_copypasteCodeSourceWhite" class="langspan"></span></button>
214
215
            </div>
        </div>
216
217
218
219
        
        <div class="modal-footer">
            <h3>WikiColor</h3>
        </div>
220
    </div>
221
</div>
222

223
224
225
226
<!-- Modal qui apparaît pour ajouter un mot au dictionnaire -->
<div id="popAddw" class="modal">
    <div class="popAddw-content">
        <div class="popAddw-header">
Sylvain Coulange's avatar
Sylvain Coulange committed
227
            <span id="sp_popAddwHead" class="langspan"></span>
228
229
        </div>
        <div class="popAddw-body">
Sylvain Coulange's avatar
Sylvain Coulange committed
230
231
232
233
            <b><span id="sp_popAddwWord" class="langspan"></span></b> <span id="popAddwMot"></span><br/>
            <b><span id="sp_popAddwTrans" class="langspan"></span></b> <span id="popAddwInputSpan"></span>
            <p><i><span id="sp_popAddwInfo" class="langspan"></span></i></p>
            <button onclick="dicoAddPopBtnAjouter()" id="popAddwValid" style="margin: 5px;"><span id="sp_popAddwAdd" class="langspan"></span></button>
234
235
        </div>
    </div>
236
237
238
239
</div>
<div id="actionBlock" style="display: none;"><div class="loader mainLoad"></div></div>
<div id="alignPopDivBack" class="alignPopDivBack" style="display: none;"></div>
{% endblock %}
240

241

242
243
244
{% block javascript %}
<script src="{% static 'scripts/loc2stand.js' %}"></script>
<script src="{% static 'scripts/bicol2colcol.js' %}"></script>
245
246
247
<script src="{% static 'scripts/api2class.js' %}"></script>
<script src="{% static 'scripts/phonTables.js' %}"></script>
<script src="{% static 'scripts/styleCustomizer.js' %}"></script>
248
249
250
<script src="{% static 'scripts/zhoutput.js' %}"></script>
<script src="{% static 'scripts/main.js' %}"></script>
{% endblock %}
251