index.html 29 KB
Newer Older
Sylvain Coulange's avatar
Sylvain Coulange committed
1
2
3
4
<!DOCTYPE html>
<html>
    <head>
        <title>PhonoDrop</title>
Sylvain Coulange's avatar
Sylvain Coulange committed
5
        <link rel="shortcut icon" type="image/png" href="phonodrop.ico"/>
Sylvain Coulange's avatar
Sylvain Coulange committed
6
        <meta charset="utf-8">
Sylvain Coulange's avatar
Sylvain Coulange committed
7
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
Sylvain Coulange's avatar
Sylvain Coulange committed
8
        <link rel="stylesheet" href="styles/jquery-ui.min.css">
Sylvain Coulange's avatar
Sylvain Coulange committed
9
10
        
        <link rel="stylesheet" type="text/css" href="styles/phonochromie_alem_v3.css">
Sylvain Coulange's avatar
Sylvain Coulange committed
11
12
        <link rel="stylesheet" type="text/css" href="styles/styles.css">
        <link rel="stylesheet" type="text/css" href="styles/popup.css">
Sylvain Coulange's avatar
Sylvain Coulange committed
13
14
15
        <link rel="stylesheet" type="text/css" href="styles/clavier.css">
        <script src="scripts/jquery-3.6.0.min.js"></script>
        <script src="scripts/jquery-ui.min.js"></script>
16
        <script src="scripts/jquery.ui.touch-punch.min.js"></script>
Sylvain Coulange's avatar
Sylvain Coulange committed
17
        <script src="scripts/DragDropTouch.js"></script>
18
        <script src="scripts/multidraggable.js"></script>
Sylvain Coulange's avatar
Sylvain Coulange committed
19
20
    </head>
    <body>
21
        <div class="header">Cette application est un prototype en cours de conception. <a href="https://groups.google.com/d/forum/alem-app" target="_blank"><b>Accéder au forum</b></a> pour échanger avec la communauté et faire vos suggestions.</div>
Sylvain Coulange's avatar
Sylvain Coulange committed
22
23
24
25
26
27
28
29
30
31
32
33
34
35
        
        <div class="paramTop">
            <div class="parametres-left">
                <div class="param-v1">
                    <div onclick="changeSize(1.1)" title="Grossir les cartes">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
                            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/>
                        </svg>
                    </div>
                    <div onclick="changeSize(0.9)" title="Rapetisser les cartes">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-dash-circle-fill" viewBox="0 0 16 16">
                            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7z"/>
                        </svg>
                    </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
36
                </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
37
38
39
40
41
42
43
44
45
46
47
                <div class="logo" title="PhonoDrop">
                    <img src="im/logo_phonodrop.png">
                </div>
            </div>
            <div class="parametres-center">
                <div class="form-check form-switch fs-4 mx-2">
                    <input class="form-check-input" type="checkbox" id="switchv2" checked onclick="switchv2()">
                    <label class="form-check-label" for="switchv2">version 2</label>
                </div>

                <div class="param-v1">
Sylvain Coulange's avatar
Sylvain Coulange committed
48
49
50
51
                    <img src="im/icongrille.png" onclick="toggleGrille()" title="Afficher/masquer la grille"/>
                    <img src="im/interlignePlus.png" onclick="changeInterligne(5)" title="Augmenter l'interligne"/>
                    <img src="im/interligneMoins.png" onclick="changeInterligne(-5)" title="Réduire l'interligne"/>
                </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
52
53
54
55
                <div onclick="save2url()" title="Enregistrer cette page">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-cloud-upload-fill" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M8 0a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 4.095 0 5.555 0 7.318 0 9.366 1.708 11 3.781 11H7.5V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11h4.188C14.502 11 16 9.57 16 7.773c0-1.636-1.242-2.969-2.834-3.194C12.923 1.999 10.69 0 8 0zm-.5 14.5V11h1v3.5a.5.5 0 0 1-1 0z"/>
                    </svg>
Sylvain Coulange's avatar
Sylvain Coulange committed
56
                </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
57
58
59
60
61
62
63
64
65
66
67
68
            </div>
            <div class="ado">
                <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" title="Attribution-NonCommercial-ShareAlike 4.0 International"><img src="im/cc-by-nc-sa.png" title="Attribution-NonCommercial-ShareAlike 4.0 International" class="licence-element licence-img"/></a>
                <span>Inspiré des outils d'<a href="mailto:do.alexandre38@gmail.com">Alexandre Do</a></span>
            </div>
            <div class="parametres-right">
                <a id="hrefNewPage" href=""><div title="Ouvrir une nouvelle page">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
                        <path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/>
                        <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
                    </svg>
                </div></a>
69
                <div id="eraseAll" onclick="eraseAll()" title="Tout effacer">
Sylvain Coulange's avatar
Sylvain Coulange committed
70
71
72
                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
                        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
                    </svg>
Sylvain Coulange's avatar
Sylvain Coulange committed
73
                </div>
74
            </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
75
76
77
78
79
80
        </div>
        <div class="parametres-bottom">
            <div onclick="mvTiroir(20)" title="Agrandir le panier">
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-up-circle" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11.5z"/>
                </svg>
81
            </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
82
83
84
85
86
            <div onclick="mvTiroir(-20)" title="Réduire le panier">
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-down-circle" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V4.5z"/>
                </svg>
            </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
87
            <div id="eye0" onclick="toggleTirroir()" title="Masquer le panier">
Sylvain Coulange's avatar
Sylvain Coulange committed
88
89
90
91
92
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-eye-slash-fill" viewBox="0 0 16 16">
                    <path d="M10.79 12.912l-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7.027 7.027 0 0 0 2.79-.588zM5.21 3.088A7.028 7.028 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474L5.21 3.088z"/>
                    <path d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829l-2.83-2.829zm4.95.708l-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829zm3.171 6l-12-12 .708-.708 12 12-.708.707z"/>
                </svg>
            </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
93
            <div id="eye1" style="display:none" onclick="toggleTirroir()" title="Afficher le panier">
Sylvain Coulange's avatar
Sylvain Coulange committed
94
95
96
97
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
                    <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                    <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                </svg>
98
            </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
99
100
        </div>

Sylvain Coulange's avatar
Sylvain Coulange committed
101
102
        <!-- PhonoDrop V1 -->
        <div class="ecritoire" id="ecritoire">
Sylvain Coulange's avatar
Sylvain Coulange committed
103
            <div id="casesZone" class="rotate180"></div>
Sylvain Coulange's avatar
Sylvain Coulange committed
104
105
        </div>
        <!-- PhonoDrop V2 -->
Sylvain Coulange's avatar
Sylvain Coulange committed
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
        <div class="ecritoirev2">
            <div id="multidraggable" class="rotate180">
                <div id="tooldiv" class="tooldiv" style="display: none;" id="tooldiv" draggable="true">
                    <div class="tooldivZone top-left noMove" onclick="duplicate()" title="Dupliquer">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="noMove bi bi-files" viewBox="0 0 16 16">
                            <path d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zM3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z"/>
                        </svg>
                    </div>
                    <div class="tooldivZone top-right noMove">
                        <div class="btn-lecture">
                            <div onclick="playIpa();" style="cursor: pointer;" title="Prononcer !">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-play-circle" viewBox="0 0 16 16">
                                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                                    <path d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z"/>
                                </svg>
                            </div>
                            <input type="number" value="80" id="debitParole" title="Cliquez pour modifier la vitesse (0-150%)" min="0" max="150" step="10">
Sylvain Coulange's avatar
Sylvain Coulange committed
123
                        </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
                    </div>
                    <div class="tooldivZone bottom-left noMove" onclick="alignGroup()" title="Aligner verticalement">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="noMove bi bi-trash" viewBox="0 0 16 16">
                            <path style="stroke-width:0.03104287" d="M 8.6249038,14.476437 C 8.5165361,14.419679 8.4115101,14.312398 8.3608237,14.206685 8.3371041,14.157215 8.3242251,13.383316 8.313985,11.392159 L 8.2998615,8.6458637 H 7.9750211 7.6501805 l -0.014123,1.3816753 c -0.013986,1.368233 -0.014746,1.382733 -0.078185,1.490148 -0.035233,0.05965 -0.1115,0.144093 -0.169482,0.187635 l -0.1054206,0.07916 -2.4522175,0.0093 c -1.7502693,0.0066 -2.4860695,-0.0017 -2.5704771,-0.02913 -0.1566319,-0.05085 -0.3118788,-0.248943 -0.3542055,-0.451959 -0.02147,-0.102986 -0.032401,-0.58172 -0.032401,-1.4191214 V 8.6298213 L 1.033321,8.6207813 0.19297281,8.6117413 V 8.0147276 7.417707 l 0.83884069,-0.00904 0.838841,-0.00904 0.00856,-1.3385269 c 0.0082,-1.2804889 0.011127,-1.3444441 0.067579,-1.474989 0.032455,-0.075054 0.1129948,-0.1825177 0.178977,-0.2388084 L 2.2457412,4.2449591 H 4.7643526 7.282964 l 0.1054206,0.079165 c 0.057981,0.04354 0.1342484,0.1279766 0.1694821,0.1876351 0.063437,0.1074145 0.064199,0.1219147 0.078185,1.4901465 l 0.014123,1.3816763 h 0.3248467 0.3248404 l 0.014123,-2.7462857 c 0.010707,-2.0813061 0.02252,-2.7639906 0.048796,-2.8193749 0.054725,-0.115346 0.1976819,-0.2452084 0.3122309,-0.2836311 0.1322165,-0.044349 4.8588363,-0.047496 5.0164163,-0.00334 0.06015,0.016857 0.151797,0.080306 0.203646,0.1409992 0.186203,0.2179697 0.181299,0.1348616 0.181299,3.073263 v 2.6544214 l 0.840349,0.00904 0.840348,0.00904 v 0.5970173 0.5970207 l -0.840348,0.00904 -0.840349,0.00904 v 2.6562101 c 0,2.929543 0.0052,2.839464 -0.176491,3.065852 -0.04914,0.06124 -0.134402,0.126454 -0.189467,0.144926 -0.06228,0.0209 -1.023519,0.03315 -2.543483,0.03246 -2.1187262,-9.93e-4 -2.4564741,-0.008 -2.542028,-0.05282 z M 13.045357,8.0147276 V 2.7438883 l -1.85724,-0.00877 -1.85724,-0.00877 v 5.2883804 5.2883883 l 1.85724,-0.0088 1.85724,-0.0088 z m -6.4261919,0 V 5.4560677 H 4.7887596 c -1.3859862,0 -1.8386356,0.00994 -1.864302,0.040939 -0.025738,0.031085 -0.033897,0.6339279 -0.033897,2.5046964 0,1.3550669 0.00771,2.4880419 0.017145,2.5177209 0.015393,0.04844 0.2059946,0.05396 1.8643019,0.05396 h 1.8471563 z" />
                        </svg>
                    </div>
                    <div class="tooldivZone bottom-middle noMove" onclick="reverseGroup()" title="Renverser">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="noMove bi bi-arrow-left-right" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M1 11.5a.5.5 0 0 0 .5.5h11.793l-3.147 3.146a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 11H1.5a.5.5 0 0 0-.5.5zm14-7a.5.5 0 0 1-.5.5H2.707l3.147 3.146a.5.5 0 1 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 4H14.5a.5.5 0 0 1 .5.5z"/>
                        </svg>
                    </div>
                    <div class="tooldivZone bottom-right noMove" onclick="removeGroup()" title="Supprimer">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="noMove bi bi-trash" viewBox="0 0 16 16">
                            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
                            <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
                        </svg>
Sylvain Coulange's avatar
Sylvain Coulange committed
140
                    </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
141
                </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
142
                <div id="anchor" style="display:none"></div>
Sylvain Coulange's avatar
Sylvain Coulange committed
143
            </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
144
        </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
145

146
147
148
        <footer>
            <div>S.Coulange | 
            <a href="https://gricad-gitlab.univ-grenoble-alpes.fr/pedagogies-multimodales/phonodrop">Code source</a>
Sylvain Coulange's avatar
Sylvain Coulange committed
149
            - <a href="https://gricad-gitlab.univ-grenoble-alpes.fr/pedagogies-multimodales/phonodrop/commits/master">Journal des modifications</a>
150
151
152
153
154
155
156
157
            </div>
            <div class="licence-div">
                <div>Code open source sous licence CC BY-NC-SA 4.0</div>
                <div><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" title="Attribution-NonCommercial-ShareAlike 4.0 International"><img height="30px" src="im/cc-by-nc-sa.png" title="Attribution-NonCommercial-ShareAlike 4.0 International" class="licence-element licence-img"/></a></div>
                <div>Inspiré des outils d'<a href="mailto:do.alexandre38@gmail.com">Alexandre Do</a></div>
            </div>
        </footer> 

Sylvain Coulange's avatar
Sylvain Coulange committed
158
        <div id="tiroir" class="scroll">
Sylvain Coulange's avatar
Sylvain Coulange committed
159
160
161
162
163
            <div id="hrDiv">
                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-three-dots" viewBox="0 0 16 16">
                    <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
                </svg>
            </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
164
            <div class="targetZone panier" id="panier"></div>
Sylvain Coulange's avatar
Sylvain Coulange committed
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
            <div id="panierv2">
                <div class="clavier-graphiesZone">
                    <div class="clavier" id="clavier">

                        <!-- FR Claviers A. DO  -->
                        <embed id="svgFond" src="svg/00.svg" class="superposeBack">
                        <img id="pngPochoir" class="superpose">
                        <img id="pngCalq" class="superpose">
                        <embed id="svgClick" src="svg/00-click.svg" class="superpose">
                        <img src="" class="popUpProfile" id="popDiv"/>
                        <div class="doAide" style="right:0px">
                            <div id="aidbtn" onclick="toggleAides()" title="Afficher/masquer les popups d'aide">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-info-circle nobg" viewBox="0 0 16 16">
                                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                                    <path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
                                </svg>
                            </div>
                        </div>
            
                        <!-- FR Clavier Kinephones -->
                        <embed id="svgFrKinephones" style="display: none;" src="svg/kinephones_fr.svg" class="superposeBack">
            
                        <!-- FR Clavier Gattegno -->
                        <embed id="svgFrGattegno" style="display: none;" src="svg/Gattegno_fr.svg" class="superposeBack">
            
                        <!-- EN Clavier PronSci UK -->
                        <embed id="svgEnPronSciBr" style="display: none;" src="svg/en_pronsci-br.svg" class="superposeBack">
            
                        <!-- EN Clavier ALeM -->
                        <embed id="svgEnAlem" style="display: none;" src="svg/alem-en.svg" class="superposeBack">
                        <img id="pngPochoirEnAlem" style="display: none;" src="png/pochoir-en.png" class="superpose">
                        <img id="pngCalqEnAlemLignes" style="display: none;" src="png/pochoir-en-lignes.png" class="superpose">
                        <embed id="svgClickEnAlem" style="display: none;" src="svg/alem-en_click.svg" class="superpose">
            
                        <!-- BOUTONS + - -->
                        <div class="control-clavier">
                            <img src="png/moins.png" onclick="rapetisserPanneau()" class="langtitle" id="ti_minClav"/>
                            <img src="png/plus.png" onclick="agrandirPanneau()" class="langtitle" id="ti_maxClav"/>
                        </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220

                        <div class="choixPanneau">
                            <select id="selectPanneau" onchange="selectPanneau(this.value)" class="langtitle">
                                <option value="phonoFrDo">Panneaux Fr A. Do</option>
                                <option value="svgFrKinephones">Panneau Fr Kinéphones</option>
                                <option value="svgFrGattegno">Panneau Fr Gattegno</option>
                                <option value="phonoEnAlem">Panneau En ALEM British</option>
                                <option value="phonoEnPronSciBr">Panneau En PronSci British</option>
                            </select>
                            <div id="doCalques" class="doCalques mt-2">
                                <input type="image" class="btn-calq" src="png/btn_rien.png" title="Panneau vierge" id="btn-rien" />
                                <input type="image" class="btn-calq" src="png/btn_vsm.png" title="Voisements et position langue" id="btn-vsm" />
                                <input type="image" class="btn-calq btnfocus" src="png/btn_bch.png" title="Formes de bouche" id="btn-bch" />
                                <input type="image" class="btn-calq" src="png/btn_cpsg.png" title="Coupes sagitales" id="btn-cpsg" />
                            </div>
                        </div>

Sylvain Coulange's avatar
Sylvain Coulange committed
221
222
                    </div>
                    <div id="graphies" class="graphies">
Sylvain Coulange's avatar
Sylvain Coulange committed
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
                        <nav class="navOptions">
                            <div class="d-flex nav nav-tabs" id="nav-tab" role="tablist">
                              <button class="nav-link" id="nav-ponctuation-tab" data-bs-toggle="tab" data-bs-target="#nav-ponctuation" type="button" role="tab" aria-controls="nav-ponctuation" aria-selected="true">Ponctuation</button>
                              <button class="nav-link" id="nav-grammaire-tab" data-bs-toggle="tab" data-bs-target="#nav-grammaire" type="button" role="tab" aria-controls="nav-grammaire" aria-selected="false">Grammaire</button>
                              <button class="nav-link" id="nav-parametres-tab" data-bs-toggle="tab" data-bs-target="#nav-parametres" type="button" role="tab" aria-controls="nav-parametres" aria-selected="false">Paramètres</button>
                              <button class="nav-link ms-auto active" id="nav-aide-tab" data-bs-toggle="tab" data-bs-target="#nav-aide" type="button" role="tab" aria-controls="nav-aide" aria-selected="false">Aide</button>
                            </div>
                          </nav>
                          <div class="tab-content" id="nav-tabContent">
                            <div class="tab-pane fade" id="nav-ponctuation" role="tabpanel" aria-labelledby="nav-ponctuation-tab">
                                <div>
                                    <button type="button" class="btn-espace" onclick="space()">Espace</button>
                                </div>
                                <hr>
                                <div id="ponctuation"></div>
                                <hr>
                                <div id="trait-point"></div>
                            </div>
                            <div class="tab-pane fade" id="nav-grammaire" role="tabpanel" aria-labelledby="nav-grammaire-tab">
                                Bientôt !
                            </div>
                            <div class="tab-pane fade" id="nav-parametres" role="tabpanel" aria-labelledby="nav-parametres-tab">
                                <!-- BORDURES -->
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="toggleBordures" onchange="toggleBordures(this)" checked>
                                    <label class="form-check-label" for="toggleBordures">
                                      Bordures
                                    </label>
                                </div>
                                <!-- MAGNETISME (NE FONCTIONNE PAS AVEC MULTIDRAGGABLE)-->
                                <!-- <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="toggleSnap" onchange="toggleSnap(this)" checked>
                                    <label class="form-check-label" for="toggleSnap">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-info-circle nobg" viewBox="0 0 16 16">
                                            <defs><inkscape:path-effect effect="simplify" id="path-effect34" is_visible="true" steps="1" threshold="0.005" smooth_angles="360" helper_size="0" simplify_individual_paths="false" simplify_just_coalesce="false" simplifyindividualpaths="false" simplifyJustCoalesce="false" /></defs>
                                            <path d="m 5.9055689,4.9287965 a 1.6343825,1.5762711 0 0 1 1.6343827,1.5762711 v 3.152542 A 1.6343825,1.5762711 0 0 1 5.9055689,11.233881 H 2.6368039 A 1.6343825,1.5762711 0 0 1 1.0024213,9.6576096 V 6.5050676 A 1.6343825,1.5762711 0 0 1 2.6368039,4.9287965 Z M 2.6368039,4.4033727 A 2.1791768,2.1016949 0 0 0 0.45762717,6.5050676 v 3.152542 A 2.1791768,2.1016949 0 0 0 2.6368039,11.759305 h 3.268765 A 2.1791768,2.1016949 0 0 0 8.0847457,9.6576096 V 6.5050676 A 2.1791768,2.1016949 0 0 0 5.9055689,4.4033727 Z" id="path2" inkscape:connector-curvature="0" style="stroke-width:0.53502131" />
                                            <path style="stroke-width:0.53502131" inkscape:connector-curvature="0" id="path12" d="m 13.363196,4.9287964 a 1.6343825,1.5762711 0 0 1 1.634383,1.5762711 v 3.152542 A 1.6343825,1.5762711 0 0 1 13.363196,11.233881 H 10.094431 A 1.6343825,1.5762711 0 0 1 8.4600484,9.6576095 V 6.5050675 A 1.6343825,1.5762711 0 0 1 10.094431,4.9287964 Z M 10.094431,4.4033725 a 2.1791768,2.1016949 0 0 0 -2.1791767,2.101695 v 3.152542 a 2.1791768,2.1016949 0 0 0 2.1791767,2.1016955 h 3.268765 a 2.1791768,2.1016949 0 0 0 2.179177,-2.1016955 v -3.152542 a 2.1791768,2.1016949 0 0 0 -2.179177,-2.101695 z" />
                                            <path style="fill:none;stroke:#000000;stroke-width:0.50000001px;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:0.5, 0.5;stroke-opacity:1" d="M 8,1.6271186 C 8,5.7062147 8,9.7853109 8,13.864407" id="path32" inkscape:connector-curvature="0" inkscape:path-effect="#path-effect34" inkscape:original-d="M 8,1.6271186 V 13.864407" transform="translate(0,0.3355761)" />
                                        </svg> Bords collants
                                    </label>
                                </div> -->
                                <!-- TAILLE ESPACE -->
                                <div>
                                    Taille des espaces : <input id="spaceWidth" type="number" value="30" step="5" style="width:60px">
                                </div>
                                <!-- BACKGROUND COLOR -->
                                <form class="d-flex align-items-center my-2">
                                    <label for="favcolor">Couleur du fond : </label>
                                    <div style="background-color: white;" class="colorSetting colorSettingSelected" onclick="setCouleurEcritoire(this, 'white')"></div>
                                    <div style="background-color: #c0c0c0;" class="colorSetting" onclick="setCouleurEcritoire(this, '#c0c0c0')"></div>
                                    <div style="background-color: black;" class="colorSetting" onclick="setCouleurEcritoire(this, 'black')"></div>
                                    <input type="color" id="favcolor" name="favcolor" onchange="setCouleurEcritoire(this, this.value)">
                                </form> 
                                
                            </div>
                            <div class="tab-pane fade show active" id="nav-aide" role="tabpanel" aria-labelledby="nav-aide-tab">
                                <strong>Bienvenue dans la nouvelle version du PhonoDrop !</strong>
Sylvain Coulange's avatar
Sylvain Coulange committed
280

Sylvain Coulange's avatar
Sylvain Coulange committed
281
282
                                <ul class="ul_aide">
                                    <li>Pour déposer des cartes sur la table, cliquez simplement sur les formes dans le tableau de sons, ou sur les cartes des onglets "ponctuation" ou "grammaire".</li>
Sylvain Coulange's avatar
Sylvain Coulange committed
283
                                    <li>Une fois sur la table, vous pouvez sélectionner les cartes en cliquant dessus ou en sélectionnant une zone avec la souris.</li>
Sylvain Coulange's avatar
Sylvain Coulange committed
284
285
                                    <li>Double-cliquez où vous le souhaitez sur la page pour positionner le curseur, ou cliquez sur une carte pour écrire à la suite.</li>
                                    <li>Pour ajouter un espace, cliquez sur "espace" dans l'onglet ponctuation, ou dans le fond noir du tableau de sons.</li>
Sylvain Coulange's avatar
Sylvain Coulange committed
286
                                    <li>En sélectionnant une ou plusieurs cartes, vous avez accès à plusieurs fonctionnalités : dupliquer, prononcer, supprimer, renverser ou aligner verticalement.</li>
Sylvain Coulange's avatar
Sylvain Coulange committed
287
288
289
                                </ul>
                            </div>
                        </div>                              
Sylvain Coulange's avatar
Sylvain Coulange committed
290
291
292
                    </div>
                </div>
            </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
        </div>

        <!-- 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>Page enregistrée !</h2>
            </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="pLien" style="width: 300px;">
                <div class="copyButton">
                    <button onclick="myFunction()" onmouseout="outFunc()"><span class="copyButtonText" id="myTooltip">Copier</span>Copier le lien</button>
308
                    <button onclick="openInNewTab()">Ouvrir</button>
Sylvain Coulange's avatar
Sylvain Coulange committed
309
310
311
312
313
314
315
                </div>
            </div>
            <div class="modal-footer">
                <h3>PhonoDrop</h3>
            </div>
            </div>
        </div>
316

Sylvain Coulange's avatar
Sylvain Coulange committed
317
318
319
320
321
        <div id="audio" style="display: none;"></div>

        <script>
            // avant tout autre script js
            var initToolDiv = document.getElementById('tooldiv').innerHTML // on met de côté le tooldiv pour pouvoir le réinjecter plus tart (suppression lors de l'enregistrement)
322
            var initAnchor = document.getElementById('anchor').innerHTML // Ancre/curseur à ajouter à tooldiv si réinitialisation page (eraseAll())
Sylvain Coulange's avatar
Sylvain Coulange committed
323
324
325
        </script>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
Sylvain Coulange's avatar
Sylvain Coulange committed
326
        <script type="text/javascript" src="scripts/cartes.js"></script>
Sylvain Coulange's avatar
Sylvain Coulange committed
327
        <script type="text/javascript" src="scripts/phon2api.js"></script>
Sylvain Coulange's avatar
Sylvain Coulange committed
328
329
        <script type="text/javascript" src="scripts/popupAide.js"></script>
        <script type="text/javascript" src="scripts/selectPanneau.js"></script>
Sylvain Coulange's avatar
Sylvain Coulange committed
330
        <script type="text/javascript" src="scripts/script.js"></script>
Sylvain Coulange's avatar
Sylvain Coulange committed
331
        <script type="text/javascript" src="scripts/phonodrop_v2.js"></script>
Sylvain Coulange's avatar
Sylvain Coulange committed
332
        <script type="text/javascript" src="scripts/syntheseVocale.js"></script>
Sylvain Coulange's avatar
Sylvain Coulange committed
333
334
    </body>
</html>