clavier.html 7.63 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="fenetre textZone" id="textZoneBack">
28
29
30
            <div id="textZone" contenteditable="false" spellcheck="true">
                <span id="g0" class="startPoint" onclick="putAnchor(this.id)">&nbsp;</span><span id="gEnd" onclick="putAnchorOnLast()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            </div>
31
            <div class="outputParam" id="outputParam">
Sylvain Coulange's avatar
Sylvain Coulange committed
32
                <span class="glyphicon glyphicon-duplicate" aria-hidden="true" title="Copier/Coller le contenu" onclick="getPopUp()"></span>
33
                <span onclick="bg2white()" class="glyphicon glyphicon-adjust" aria-hidden="true" title="Changer la couleur du fond"></span><br/>
Sylvain Coulange's avatar
Sylvain Coulange committed
34
                <span id="div2png" class="glyphicon glyphicon-picture" aria-hidden="true" title="Exporter en png"></span>
35
                <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
36
            </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
37
        </div>
38
39
40
    </div>

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

        <div class="graphies">
Sylvain Coulange's avatar
Sylvain Coulange committed
76
            <div id="graphiesZone" class="graphiesZone"></div>
77
78
        </div>
    </div>
79

Sylvain Coulange's avatar
Sylvain Coulange committed
80
    <div class="fenetre btn-calq-div">
Sylvain Coulange's avatar
Sylvain Coulange committed
81
82
        <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" />
83
        <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
84
        <input type="image" class="btn-calq" src="../static/png/btn_cpsg.png" title="Coupes sagitales" id="btn-cpsg" />
85
86
87
88
        <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
89
90
    </div>

Sylvain Coulange's avatar
Sylvain Coulange committed
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
    <!-- 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>
            <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; 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>

116
    {% include 'footer.html' %}
117

118
    <script type="text/javascript" src="{% static 'js/clavier.js' %}"></script>
119
    
120
    
Sylvain Coulange's avatar
Sylvain Coulange committed
121
</html>