coloriseur.html 6.7 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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 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>
19
    {% include 'header.html' %}
20
    <img src="{% static 'im/logo_wikicolor6b.png'%}" width="40%" title="WikiColor">
21
22
23
24
    <h2>
            <span class="phon_k">C</span><span class="phon_o_maj">o</span><span class="phon_l">l</span><span class="phon_o_maj">o</span><span class="phon_r_maj">r</span><span class="phon_i">i</span><span class="phon_z">s</span><span class="phon_9">eu</span><span class="phon_r_maj">r</span>
            <span> </span><span class="phon_f">Ph</span><span class="phon_o_maj">o</span><span class="phon_n">n</span><span class="phon_o_maj">o</span><span class="phon_g">g</span><span class="phon_r_maj">r</span><span class="phon_a">a</span><span class="phon_f">ph</span><span class="phon_e">é</span><span class="phon_m">m</span><span class="phon_i">i</span><span class="phon_k">que</span>
    </h2>
Sylvain Coulange's avatar
Sylvain Coulange committed
25

Sylvain Coulange's avatar
Sylvain Coulange committed
26
    <div class="choixLang">
27
28
29
30
31
32
        <select id="choixLang" onchange="selectLang(this.value)">
            <option value="fr">Français</option>
            <option value="en">English</option>
        </select>
    </div>

Sylvain Coulange's avatar
Sylvain Coulange committed
33
    <div class="inputDiv">
34
        <div class="param">
35
36
            <input id="swcolor" type="radio" name="colorType" onclick="getColorisation()" value="sw" checked> <label for="swcolor"><span style="-webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;"><span class="text phon_s">S</span><span style="background:-webkit-linear-gradient(white 60%, #e7236d 75%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;">i</span><span class="text phon_l">l</span><span class="text phon_e_maj ">e</span><span class="text phon_n">n</span><span class="text phon_t">t</span><span class="text punct "> </span><span class="text phon_w">W</span><span class="text phon_ei_maj">ay</span></span></label><br/>
            <input id="bicolor" type="radio" name="colorType" onclick="toBicolor()" value="bi"> <label for="bicolor"><span style="color: #ff0000; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">B</span><span style="color: #40b9ff; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">i</span><span style="color: #ff0000; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">c</span><span style="color: #40b9ff; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">o</span><span style="color: #ff0000; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">l</span><span style="color: #40b9ff; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">o</span><span style="color: #ff0000; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">re</span></label>
37
38
        </div>
        <h2>Entrer du texte à coloriser :</h2>
39
        <textarea id="inText" class="inText"></textarea><br/>
40
41
        <button id="coloriser" onclick="getColorisation()">Coloriser</button>
        <button id="delInText" onclick="delInText()">Effacer</button>
Sylvain Coulange's avatar
Sylvain Coulange committed
42
43
    </div>

44
    <div id="outputDiv" class="win-black outputMainDiv">
45
46
47
        <div class="outputParam">
            <span class="glyphicon glyphicon-adjust" aria-hidden="true" title="Changer la couleur du fond" onclick="bg2white()"></span><br>
            <span class="glyphicon glyphicon-duplicate" aria-hidden="true" title="Copier/Coller le contenu" onclick="getPopUp()"></span>
48
        </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
49
        <h2>Résultat :</h2>
50
        <div id="output" class="output"></div>
51
52
    </div>

Sylvain Coulange's avatar
Sylvain Coulange committed
53
    <div>
54
        <a href="/app/dico/"><button>Consulter/éditer le dictionnaire</button></a>
Sylvain Coulange's avatar
Sylvain Coulange committed
55
56
    </div>

57
58
59
60
61
62
63
64
65
    <!-- 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">
66
            <p>Copier/coller le texte ci-dessous dans LibreOffice, Word ou dans un e-mail, par exemple.</p>
67
68
            <div id="pLienDiv" contenteditable="true" class="pLienDiv" style="background-color: #000000; font-weight: bold;"></div>
            <div class="copyButton">
Sylvain Coulange's avatar
Sylvain Coulange committed
69
                <button onclick="toClipBoard('pLienDiv','myTooltip')" onmouseout="outFunc()"><span class="copyButtonText" id="myTooltip">Copier</span>Copier</button>
70
71
72
            </div>
            <div id="pLienDivWhite" contenteditable="true" class="pLienDiv" style="font-weight: bold;-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;"></div>
            <div class="copyButton">
Sylvain Coulange's avatar
Sylvain Coulange committed
73
                <button onclick="toClipBoard('pLienDivWhite', 'myTooltipWhite')" onmouseout="outFuncWhite()"><span class="copyButtonText" id="myTooltipWhite">Copier</span>Copier</button>
74
75
76
77
78
79
80
81
            </div>
        </div>
        <div class="modal-footer">
            <h3>WikiColor</h3>
        </div>
        </div>
    </div>

82
83
84
85
86
87
88
89
90
91
92
93
94
95
    <!-- 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
96
    <div id="alignPopDivBack" class="alignPopDivBack" style="display: none;"></div>
97

98
    {% include 'footer.html' %}
99

Sylvain Coulange's avatar
Sylvain Coulange committed
100
    <script src="{% static 'scripts/loc2stand.js' %}"></script>
Sylvain Coulange's avatar
Sylvain Coulange committed
101
    <script src="{% static 'scripts/main.js' %}"></script>
102
    <script src="{% static 'scripts/keyboard.js' %}"></script>
103
104


Sylvain Coulange's avatar
Sylvain Coulange committed
105
106
</body>
</html>