coloriseur.html 12.7 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
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
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
    <h2><span id="sp_consigne" class="langspan"></span></h2>
    <textarea id="inText" class="inText"></textarea><br/>
    <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" />
98
99
                    </svg>
                </div>
100
101
102
103
                <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>
104
                    </div>
105
106
107
                    <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>
108
109
                    </div>
                </div>
110
111
112
113
114
115
116
117
118
            </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>
119
    </div>
120
121
122
123
124
    <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>
125

Sylvain Coulange's avatar
Sylvain Coulange committed
126

127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<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>
156
            </div>
157

158
159
160
161
            <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>
162
            </div>
163
164
            <div class="copyButton">
                <button onclick="document.getElementById('pLienDivWhiteCode').style.display = 'block';">Code Source</button>
165
166
            </div>
        </div>
167
168
169
170
        
        <div class="modal-footer">
            <h3>WikiColor</h3>
        </div>
171
    </div>
172
</div>
173

174
175
176
177
178
179
180
181
182
183
<!-- 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>
184
185
        </div>
    </div>
186
187
188
189
</div>
<div id="actionBlock" style="display: none;"><div class="loader mainLoad"></div></div>
<div id="alignPopDivBack" class="alignPopDivBack" style="display: none;"></div>
{% endblock %}
190

191

192
193
194
195
196
197
{% 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 %}
198