clavier.html 12.3 KB
Newer Older
1
2
{% load static %}
<!DOCTYPE html>
3
<html lang="fr">
4
<head>
Sylvain Coulange's avatar
Sylvain Coulange committed
5
    <title>PhonoGraphe</title>
Sylvain Coulange's avatar
Sylvain Coulange committed
6
    <link rel="shortcut icon" type="image/png" href="{% static 'phonographe.ico' %}"/>
7
    <meta charset="utf-8">
8
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
Sylvain Coulange's avatar
Sylvain Coulange committed
9
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
10
    <link rel="stylesheet" type="text/css" href="{% static 'styles/phonochromie_alem_v3.css'%}">
Sylvain Coulange's avatar
Sylvain Coulange committed
11
    <link rel="stylesheet" type="text/css" href="{% static 'styles/popup.css'%}">
Sylvain Coulange's avatar
Sylvain Coulange committed
12
    <link rel="stylesheet" type="text/css" href="{% static 'styles/clavier.css'%}">
13
14
15

    <!-- <script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script> -->
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
Sylvain Coulange's avatar
Sylvain Coulange committed
16
17
    <script defer src="{% static 'js/html2canvas.min.js' %}"></script>
    <script defer src="{% static 'js/download.js' %}"></script>
18
19
</head>
<body>
20
21
22
23
24
    <script type="text/javascript">
        var dicoFidels = JSON.parse("{{fidels|escapejs}}");
        var dataPage = JSON.parse("{{dataPage|escapejs}}");
    </script>

25
    <div class="header"><span id="sp_header" class="langspan"></span></div>
26
    <div id="mainZone">
Sylvain Coulange's avatar
Sylvain Coulange committed
27
    	<img src="{% static 'im/logo_phonographe3.png' %}" width="40%">
28
        <h2><span id="sp_soustitre" class="langspan"></span></h2>
29
        
30
        <div class="preprod" style="display: block;">PREPROD</div>
31

32
        <div class="choixLang">
33
34
35
36
37
            <select id="choixLang" onchange="selectLang(this.value)">
                <option value="fr">Français</option>
                <option value="en">English</option>
            </select>
        </div>
38
39
40
41
        
        <div class="fenetre textSide textZone" id="textZoneBack">
            <div class="paramGestionPage">
                <span class="glyphicon glyphicon-floppy-disk" onclick="savePage()" area-hidden="true" title="Enregistrer ce travail"></span>
42
                <a id="hrefNewPage" href="" target="_blank"><span class="glyphicon glyphicon-plus" area-hidden="true" title="Ouvrir une nouvelle page"></span></a>
43
                <div id="btnSwitchStress" onclick="toggleSwitchStress()" class="btnSwitchStress" title="Click on spellings to switch the accent">Switch stress</div>
44
            </div>
45
            
46
47
            <div id="textZone" contenteditable="false" spellcheck="true"></div>
            
48
            <div class="outputParam" id="outputParam">
Sylvain Coulange's avatar
Sylvain Coulange committed
49
                <span class="glyphicon glyphicon-duplicate" aria-hidden="true" title="Copier/Coller le contenu" onclick="getPopUp()"></span>
50
                <span onclick="bg2white()" class="glyphicon glyphicon-adjust" aria-hidden="true" title="Changer la couleur du fond"></span>
Sylvain Coulange's avatar
Sylvain Coulange committed
51
                <span id="div2png" class="glyphicon glyphicon-picture" aria-hidden="true" title="Exporter en png"></span>
52
                <span onclick="toggleContentEditable()" id="btnContentEditable" class="glyphicon glyphicon-edit" aria-hidden="true" title="(dé)vérrouiller la saisie"></span>
Sylvain Coulange's avatar
Sylvain Coulange committed
53
            </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
54
        </div>
55
        
56
57
58
    </div>

    <div class="boutons">
59
60
61
62
63
64
65
66
67
        <button onclick="writeGraph('. ','punct')" class="btn-car">.</button>
        <button onclick="writeGraph(', ','punct')" class="btn-car">,</button>
        <button onclick="writeGraph(' ? ','punct')" class="btn-car">?</button>
        <button onclick="writeGraph(' ! ','punct')" class="btn-car">!</button>
        <button onclick="writeGraph(' : ','punct')" class="btn-car">:</button>
        <button onclick="writeGraph(' ; ','punct')" class="btn-car">;</button>
        <button onclick="writeGraph('-','punct')" class="btn-car">-</button>
        <button onclick="writeGraph(' « ','punct')" class="btn-car">«</button>
        <button onclick="writeGraph(' » ','punct')" class="btn-car">»</button>
68
        <button onclick="writeGraph(' ','punct')" class="btn-car-space"><span id="sp_btnspace" class="langspan"></span></button>
Sylvain Coulange's avatar
Sylvain Coulange committed
69
        <button onclick="writeEnter()" class="btn-car-enter" title="Aller à la ligne"></button>
70
        <button onclick="erasePreviousSpan()" class="btn-car"><span id="sp_btnerase" class="langspan"></span></button>
71
72
73
        <button class="btn-car" onclick="gotoPrecedent()" title="Aller à la graphie précédente"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></button>
        <button class="btn-car" onclick="gotoNext()" title="Aller à la graphie suivante"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></button>
        <button class="btn-car" onclick="putAnchorOnLast()" title="Aller à la dernière graphie"><span class="glyphicon glyphicon-step-forward" aria-hidden="true"></span></button>
74
        <button onclick="eraseAll()" class="btn-car btn-car-erall"><span id="sp_btneraseall" class="langspan"></span></button>
75
76
77
    </div>
    
    <div class="clavier-graphiesZone">
78
        <div class="clavier" id="clavier">
79
80

            <!-- FR Claviers A. DO  -->
81
            <embed id="svgFond" src="../static/svg/00.svg" class="superposeBack">
Sylvain Coulange's avatar
Sylvain Coulange committed
82
            <img id="pngPochoir" class="superpose">
Sylvain Coulange's avatar
Sylvain Coulange committed
83
84
            <img id="pngCalq" class="superpose">
            <embed id="svgClick" src="../static/svg/00-click.svg" class="superpose">
Sylvain Coulange's avatar
Sylvain Coulange committed
85
            <img src="" class="popUpProfile" id="popDiv"/>
86
87
88
89
90
91
92
93
            <div class="doAide" style="right:0px">
                <span id="aidbtn" onclick="toggleAides()" class="glyphicon glyphicon-question-sign" aria-hidden="true" title="Afficher/masquer les popups d'aide"></span>
            </div>

            <!-- EN Claviers PronSci UK -->
            <embed id="svgEnPronSciBr" style="display: none;" src="../static/svg/en_pronsci-br.svg" class="superpose">

            <!-- BOUTONS + - -->
94
95
96
97
            <div class="control-clavier">
                <img src="../static/png/moins.png" id="btn-min" title="réduire le clavier"/>
                <img src="../static/png/plus.png" id="btn-max" title="agrandir le clavier"/>
            </div>
98
99
100
        </div>

        <div class="graphies">
101
102
103
104
            <div class="btnPros">
                <div id="btnStress1" class="btnStress" onclick="toggleStress1()">Primary</div>
                <div id="btnStress2" class="btnStress" onclick="toggleStress2()">Secondary</div>
            </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
105
            <div class="btnCasse" onclick="toggleCasse()" title="Majuscules/minuscules"><?xml-stylesheet type="text/css" href="../styles/clavier.css"?><svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="width: 32px; height: 32px;" xml:space="preserve"><g><path class="st0" d="M502.65,394.055c-1.581-3.012-2.922-6.18-3.798-9.129c-0.884-2.942-1.293-5.646-1.289-7.849c0-10.191,0-62.152,0-98.828c0.015-12.047-2.52-23.551-7.372-33.632c-3.618-7.565-8.497-14.272-14.182-19.919c-8.544-8.484-18.813-14.547-29.7-18.479c-10.906-3.932-22.486-5.788-34.218-5.788c-2.319,0-4.643,0.079-6.963,0.22c-6.378,0.409-12.283,1.644-17.827,3.232c-8.304,2.406-15.848,5.638-22.643,8.886c-6.774,3.255-12.802,6.558-17.563,9.113l23.378,43.438c6.57-3.546,13.824-7.486,20.763-10.474c3.448-1.486,6.782-2.721,9.723-3.57c2.945-0.857,5.485-1.297,7.254-1.4c1.313-0.087,2.606-0.126,3.876-0.126c5.764,0,11.162,0.834,15.774,2.28c3.468,1.094,6.492,2.516,9.004,4.144c3.774,2.477,6.39,5.269,8.257,8.61c1.832,3.366,3.082,7.455,3.114,13.462c0,1.18,0,2.375,0,3.586c-9.354,0-20.079,0-28.128,0c-25.926,0-48.891,7.392-65.947,21.161c-8.508,6.865-15.475,15.341-20.256,24.998c-4.797,9.641-7.352,20.445-7.34,31.509c-0.012,10.734,2.21,21.028,6.381,30.173c6.24,13.761,16.777,24.73,29.362,31.957c12.602,7.258,27.243,10.946,42.498,10.954c10.746-0.008,21.22-2.147,30.991-5.889c7.856-3.02,15.267-7.093,22.029-12.071c1.726,3.483,3.523,6.739,5.32,9.664c4.234,6.872,8.37,12.157,11.402,15.703l37.45-32.09C509.916,405.497,505.776,400.087,502.65,394.055z M448.239,360.203c-0.539,2.242-1.376,4.474-2.56,6.732c-3.283,6.306-9.408,12.59-16.957,17.009c-7.522,4.458-16.274,6.943-23.914,6.912c-11.374,0-20.724-3.696-26.822-9.059c-3.074-2.698-5.406-5.803-7.05-9.405c-1.635-3.617-2.626-7.785-2.638-12.888c0.011-4.772,1.038-8.996,2.995-12.966c2.953-5.93,8.15-11.466,16.258-15.774c8.076-4.285,19.03-7.195,32.558-7.187c8.049,0,18.774,0,28.128,0C448.239,337.305,448.239,350.279,448.239,360.203z"></path>	<path class="st0" d="M183.798,72.006H145.29c-15.598,0-29.331,9.956-34.179,24.778L0,436.275h58.76l35.166-107.478H202.52l27.365,107.478h74.585L218.648,99.088C214.591,83.141,200.26,72.006,183.798,72.006z M108.127,285.421l40.497-123.763h11.356l31.505,123.763H108.127z"></path></g></svg></div>
Sylvain Coulange's avatar
Sylvain Coulange committed
106
            <div id="graphiesZone" class="graphiesZone"></div>
107
108
        </div>
    </div>
109

110
111
112
    <div class="zoneParam">
        <div class="left">
            <div class="fenetre param">
113
                <select id="selectPanneau" onchange="selectPanneau(this.value)"></select>
114
115
116
117
118
119
120
121
122
123
            </div>
            <div id="doCalques" class="doCalques">
                <input type="image" class="btn-calq" src="../static/png/btn_rien.png" title="Panneau vierge" id="btn-rien" />
                <input type="image" class="btn-calq" src="../static/png/btn_vsm.png" title="Voisements et position langue" id="btn-vsm" />
                <input type="image" class="btn-calq btnfocus" src="../static/png/btn_bch.png" title="Formes de bouche" id="btn-bch" />
                <input type="image" class="btn-calq" src="../static/png/btn_cpsg.png" title="Coupes sagitales" id="btn-cpsg" />
            </div>
        </div>
        <div class="right">
            <div class="fenetre param">
124
                <select id="selectFidel" onchange="selectFidel(this.value)"></select>
125
126
            </div>
        </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
127
128
    </div>

129

Sylvain Coulange's avatar
Sylvain Coulange committed
130
131
132
133
134
135
    <!-- Modal PopUp qui apparaît pour le copier coller -->
    <div id="myModal" class="modal">
        <!-- Modal content -->
        <div class="modal-content">
        <div class="modal-header">
            <span class="close">&times;</span>
136
            <span id="sp_poptitle" class="langspan"></span>
Sylvain Coulange's avatar
Sylvain Coulange committed
137
138
        </div>
        <div class="modal-body">
139
            <p><span id="sp_popmain" class="langspan"></span></p>
Sylvain Coulange's avatar
Sylvain Coulange committed
140
141
            <div id="pLienDiv" contenteditable="true" class="pLienDiv" style="background-color: #000000; font-weight: bold;"></div>
            <div class="copyButton">
142
                <button onclick="toClipBoard('pLienDiv','myTooltip')" onmouseout="outFunc()"><span class="copyButtonText" id="myTooltip"><span id="sp_popcopy1" class="langspan"></span></span><span id="sp_popcopy2" class="langspan"></span></button>
Sylvain Coulange's avatar
Sylvain Coulange committed
143
144
145
            </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">
146
                <button onclick="toClipBoard('pLienDivWhite', 'myTooltipWhite')" onmouseout="outFuncWhite()"><span class="copyButtonText" id="myTooltipWhite"><span id="sp_popcopy3" class="langspan"></span></span><span id="sp_popcopy4" class="langspan"></span></button>
Sylvain Coulange's avatar
Sylvain Coulange committed
147
148
149
150
151
152
153
154
            </div>
        </div>
        <div class="modal-footer">
            <h3>PhonoGraphe</h3>
        </div>
        </div>
    </div>

155
156
157
158
159
160
161

    <!-- Modal PopUp qui apparaît lors de l'enregistrement -->
    <div id="myModalSave" class="modal">
        <!-- Modal content -->
        <div class="modal-content">
        <div class="modal-header">
            <span class="close">&times;</span>
162
            <span id="sp_popsavetitle" class="langspan"></span>
163
164
        </div>
        <div class="modal-body">
165
            <p><span id="sp_popsavemain" class="langspan"></span></p>
166
167
            <input type="text" id="pLienSave" style="width: 300px;">
            <div class="copyButton">
168
169
                <button onclick="myFunctionSave()" onmouseout="outFuncSave()"><span class="copyButtonText" id="myTooltipSave"><span id="sp_popsavecopy" class="langspan"></span></span><span id="sp_popsavecopylink" class="langspan"></span></button>
                <button onclick="openInNewTab()"><span id="sp_popsaveopen" class="langspan"></span></button>
170
171
172
173
174
175
176
177
            </div>
        </div>
        <div class="modal-footer">
            <h3>PhonoGraphe</h3>
        </div>
        </div>
    </div>

178
    {% include 'footer.html' %}
179

180
    <script type="text/javascript" src="{% static 'languages/languages.js' %}"></script>
181
    <script type="text/javascript" src="{% static 'js/id2class.js' %}"></script>
182
    <script type="text/javascript" src="{% static 'js/clavier.js' %}"></script>
183
    
184
    
Sylvain Coulange's avatar
Sylvain Coulange committed
185
</html>