coloriseur.html 5.28 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
    <link rel="stylesheet" type="text/css" href="{% static 'styles/kinephones_style_v2.css'%}">
Sylvain Coulange's avatar
Sylvain Coulange committed
10
    <link rel="stylesheet" type="text/css" href="{% static 'styles/styles.css'%}">
11
    <link rel="stylesheet" type="text/css" href="{% static 'styles/popup.css'%}">
12
13
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    
Sylvain Coulange's avatar
Sylvain Coulange committed
14
15
</head>
<body>
16
    {% include 'header.html' %}
17
    <img src="{% static 'im/logo_wikicolor6b.png'%}" width="40%" title="WikiColor">
18
19
20
21
    <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
22

Sylvain Coulange's avatar
Sylvain Coulange committed
23
24
    <div class="inputDiv">
        <form action="/app/" method="post">{% csrf_token %}
Sylvain Coulange's avatar
Sylvain Coulange committed
25
            <div class="param">
Sylvain Coulange's avatar
Sylvain Coulange committed
26
                <input id="swcolor" type="radio" name="colorType" value="sw" {%if data.colorType == "sw" %}checked{% endif %}> <label for="swcolor">Silent Way</label><br/>
Sylvain Coulange's avatar
Sylvain Coulange committed
27
                <input id="bicolor" type="radio" name="colorType" value="bi" {%if data.colorType == "bi" %}checked{% endif %}> <label for="bicolor">Bicolore</label>
28
                <input type="hidden" id="defaultBg" name="defaultBg" value="{{ data.defaultBg }}"/>
Sylvain Coulange's avatar
Sylvain Coulange committed
29
            </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
30
31
32
            <h2>Entrer du texte à coloriser :</h2>
            <textarea name="inText">{{ data.text }}</textarea><br/>
            <input type="submit" value="Coloriser"/>
Sylvain Coulange's avatar
Sylvain Coulange committed
33
            <button formaction="/app/0">Effacer</button>
Sylvain Coulange's avatar
Sylvain Coulange committed
34
35
36
        </form>
    </div>

37
    <div id="outputDiv" class="win-black outputMainDiv">
38
39
40
        <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>
41
        </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
42
        <h2>Résultat :</h2>
43
        <div id="output" class="output">
44
45
            {% for token in data.pphh %}{% if token == "§" %}<br/>{% elif token in ",.)]}%>"|make_list %}<span class="phon_neutre">{{ token }}</span>{% else %}<span> </span><span class="tokens" id='tok{{ forloop.counter }}' onclick="changeAlign(this.id)"></span>{% endif %}{% endfor %}
        </div>
46
47
    </div>

Sylvain Coulange's avatar
Sylvain Coulange committed
48
    <div>
49
        <form method="POST">{% csrf_token %}
Sylvain Coulange's avatar
Sylvain Coulange committed
50
51
52
53
            <button formaction="/app/dico/">Éditer le dictionnaire</button>
        </form>
    </div>

54
55
56
57
58
59
60
61
62
    <!-- 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">
63
            <p>Copier/coller le texte ci-dessous dans LibreOffice, Word ou dans un e-mail, par exemple.</p>
64
65
            <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
66
                <button onclick="toClipBoard('pLienDiv','myTooltip')" onmouseout="outFunc()"><span class="copyButtonText" id="myTooltip">Copier</span>Copier</button>
67
68
69
            </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
70
                <button onclick="toClipBoard('pLienDivWhite', 'myTooltipWhite')" onmouseout="outFuncWhite()"><span class="copyButtonText" id="myTooltipWhite">Copier</span>Copier</button>
71
72
73
74
75
76
77
78
79
            </div>
        </div>
        <div class="modal-footer">
            <h3>WikiColor</h3>
        </div>
        </div>
    </div>


80
    {% include 'footer.html' %}
81

82
83
84
    <script type="text/javascript">
        var dicoTok = {
            {% for token in data.pphh %}
85
            {% if token != "§" %}
Sylvain Coulange's avatar
Sylvain Coulange committed
86
                'tok{{ forloop.counter }}' : [{% for trans in token %}'{% for entree in trans %}<span class="phon {{entree.phon}}">{{entree.graph}}</span>{% endfor %}',{% endfor %}],
87
            {% endif %}
88
89
90
91
92
            {% endfor %}
        };

        var dicoId = {
            {% for token in data.pphh %}
93
            {% if token != "§" %}
94
                'tok{{ forloop.counter }}' : 0, 
95
            {% endif %}
96
            {% endfor %}
97
        };
Sylvain Coulange's avatar
Sylvain Coulange committed
98
    
99
    </script>
Sylvain Coulange's avatar
Sylvain Coulange committed
100
    <script src="{% static 'scripts/main.js' %}"></script>
101
102


Sylvain Coulange's avatar
Sylvain Coulange committed
103
104
</body>
</html>