clavier.html 11 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/kinephones_style_v2.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
    {% include 'header.html' %}
21
    <div id="mainZone">
Sylvain Coulange's avatar
Sylvain Coulange committed
22
    	<img src="{% static 'im/logo_phonographe3.png' %}" width="40%">
23
        <h2>Clavier phonographémique <span class="phon_p">p</span><span class="phon_u">ou</span><span class="phon_r_maj">r</span><span> </span><span class="phon_e">é</span><span class="phon_k">c</span><span class="phon_r_maj">r</span><span class="phon_i">i</span><span class="phon_r_maj">re</span><span> </span><span class="phon_a_maj_nas">en</span><span> </span><span class="phon_k">c</span><span class="phon_u">ou</span><span class="phon_l">l</span><span class="phon_9">eu</span><span class="phon_r_maj">rs</span></h2>
Sylvain Coulange's avatar
Sylvain Coulange committed
24
        <!-- <button id="div2png">Exporter en png (expérimental)</button> -->
25
26
        <!-- <button id="div2pdf">Exporter en pdf (expérimental)</button> -->
        
Sylvain Coulange's avatar
Sylvain Coulange committed
27
        <div class="preprod" style="display: block;">PREPROD</div>
28
29
30
31
        
        <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>
32
                <a id="hrefNewPage" href="" target="_blank"><span class="glyphicon glyphicon-plus" area-hidden="true" title="Ouvrir une nouvelle page"></span></a>
33
            </div>
34
            
35
36
            <div id="textZone" contenteditable="false" spellcheck="true"></div>
            
37
            <div class="outputParam" id="outputParam">
Sylvain Coulange's avatar
Sylvain Coulange committed
38
                <span class="glyphicon glyphicon-duplicate" aria-hidden="true" title="Copier/Coller le contenu" onclick="getPopUp()"></span>
39
                <span onclick="bg2white()" class="glyphicon glyphicon-adjust" aria-hidden="true" title="Changer la couleur du fond"></span>
Sylvain Coulange's avatar
Sylvain Coulange committed
40
                <span id="div2png" class="glyphicon glyphicon-picture" aria-hidden="true" title="Exporter en png"></span>
41
                <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
42
            </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
43
        </div>
44
        
45
46
47
    </div>

    <div class="boutons">
48
49
50
51
52
53
54
55
56
57
        <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>
        <button onclick="writeGraph(' ','punct')" class="btn-car-space">Espace</button>
Sylvain Coulange's avatar
Sylvain Coulange committed
58
        <button onclick="writeEnter()" class="btn-car-enter" title="Aller à la ligne"></button>
59
        <button onclick="erasePreviousSpan()" class="btn-car">Effacer</button>
60
61
62
        <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>
63
        <button onclick="eraseAll()" class="btn-car btn-car-erall">Tout effacer</button>
64
65
66
    </div>
    
    <div class="clavier-graphiesZone">
67
        <div class="clavier" id="clavier">
68
            <embed id="svgFond" src="../static/svg/00.svg" class="superposeBack">
Sylvain Coulange's avatar
Sylvain Coulange committed
69
            <img id="pngPochoir" class="superpose">
Sylvain Coulange's avatar
Sylvain Coulange committed
70
71
            <img id="pngCalq" class="superpose">
            <embed id="svgClick" src="../static/svg/00-click.svg" class="superpose">
Sylvain Coulange's avatar
Sylvain Coulange committed
72
            <img src="" class="popUpProfile" id="popDiv"/>
73
74
75
76
            <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>
77
78
79
            <div class="control-clavier" 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>
80
81
82
        </div>

        <div class="graphies">
83
            <div class="btnCasse" onclick="toggleCasse()"><?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
84
            <div id="graphiesZone" class="graphiesZone"></div>
85
86
        </div>
    </div>
87

Sylvain Coulange's avatar
Sylvain Coulange committed
88
    <div class="fenetre btn-calq-div">
Sylvain Coulange's avatar
Sylvain Coulange committed
89
90
        <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" />
91
        <input type="image" class="btn-calq btnfocus" src="../static/png/btn_bch.png" title="Formes de bouche" id="btn-bch" />
Sylvain Coulange's avatar
Sylvain Coulange committed
92
        <input type="image" class="btn-calq" src="../static/png/btn_cpsg.png" title="Coupes sagitales" id="btn-cpsg" />
93
94
95
96
        <select id="selectFidel" onchange="selectFidel()">
            <option value="ps">Fidel PronSci</option>
            <option value="do">Fidel A. Do</option>
        </select>
Sylvain Coulange's avatar
Sylvain Coulange committed
97
98
    </div>

Sylvain Coulange's avatar
Sylvain Coulange committed
99
100
101
102
103
104
    <!-- 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>
105
            Copier/coller le résultat
Sylvain Coulange's avatar
Sylvain Coulange committed
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
        </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; font-weight: bold;"></div>
            <div class="copyButton">
                <button onclick="toClipBoard('pLienDiv','myTooltip')" onmouseout="outFunc()"><span class="copyButtonText" id="myTooltip">Copier</span>Copier</button>
            </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">
                <button onclick="toClipBoard('pLienDivWhite', 'myTooltipWhite')" onmouseout="outFuncWhite()"><span class="copyButtonText" id="myTooltipWhite">Copier</span>Copier</button>
            </div>
        </div>
        <div class="modal-footer">
            <h3>PhonoGraphe</h3>
        </div>
        </div>
    </div>

124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146

    <!-- 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>
            Page enregistrée !
        </div>
        <div class="modal-body">
            <p>Pour accéder au contenu ultérieurement, ou partager la page avec quelqu'un, utilisez le lien suivant :</p>
            <input type="text" id="pLienSave" style="width: 300px;">
            <div class="copyButton">
                <button onclick="myFunctionSave()" onmouseout="outFuncSave()"><span class="copyButtonText" id="myTooltipSave">Copier</span>Copier le lien</button>
                <button onclick="openInNewTab()">Ouvrir</button>
            </div>
        </div>
        <div class="modal-footer">
            <h3>PhonoGraphe</h3>
        </div>
        </div>
    </div>

147
    {% include 'footer.html' %}
148

149
    <script type="text/javascript" src="{% static 'js/clavier.js' %}"></script>
150
    
151
    
Sylvain Coulange's avatar
Sylvain Coulange committed
152
</html>