index.html 5.56 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
7
8
9
10
11
12
13
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="styles/styles.css">
        <link rel="stylesheet" type="text/css" href="styles/popup.css">
        <script src="scripts/jquery-3.4.1.min.js"></script>
        <script src="scripts/DragDropTouch.js"></script>
    </head>
    <body>
14
15
        <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>
        <div style="position: relative;">
Sylvain Coulange's avatar
Sylvain Coulange committed
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
            <div class="paramTop">
                <div class="parametres-left">
                    <span onclick="changeSize(1.1)" class="glyphicon glyphicon-plus-sign" aria-hidden="true" title="Grossir les cartes"></span>
                    <span onclick="changeSize(0.9)" class="glyphicon glyphicon-minus-sign" aria-hidden="true" title="Rapetisser les cartes"></span>
                    <img src="im/logo_phonodrop.png" class="logo" title="PhonoDrop">
                </div>
                <div class="parametres-center">
                    <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"/>
                    <span onclick="save2url()" class="glyphicon glyphicon-floppy-disk" aria-hidden="true" title="Enregistrer cette page"></span>
                </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=""><img src="im/new-page.png" title="Ouvrir une nouvelle page"/></a>
                    <span onclick="eraseAll()" class="glyphicon glyphicon-remove-sign" aria-hidden="true" title="Tout effacer"></span>
                </div>
36
37
38
39
40
41
            </div>
            <div class="parametres-bottom">
                <span onclick="mvTiroir(20)" class="glyphicon glyphicon-upload" aria-hidden="true" title="Agrandir le panier"></span><br>
                <span onclick="mvTiroir(-20)" class="glyphicon glyphicon-download" aria-hidden="true" title="Réduire le panier"></span><br>
                <span id="eye" onclick="toggleTirroir()" class="glyphicon glyphicon-eye-close" aria-hidden="true" title="Masquer le panier"></span>
            </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
42

43
44
45
            <div class="ecritoire">
                <div id="casesZone"></div>
            </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
46
47
        </div>

48
49
50
51
52
53
54
55
56
57
58
59
        <footer>
            <div>S.Coulange | 
            <a href="https://gricad-gitlab.univ-grenoble-alpes.fr/pedagogies-multimodales/phonodrop">Code source</a>
             - <a href="https://gricad-gitlab.univ-grenoble-alpes.fr/pedagogies-multimodales/phonodrop/commits/master">Journal des modifications</a>
            </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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
        <div id="tiroir" class="scroll">
            <div id="hrDiv"><span class="glyphicon glyphicon-option-horizontal" aria-hidden="true"></span></div>
            <div class="targetZone panier" id="panier"></div>
        </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>
78
                    <button onclick="openInNewTab()">Ouvrir</button>
Sylvain Coulange's avatar
Sylvain Coulange committed
79
80
81
82
83
84
85
                </div>
            </div>
            <div class="modal-footer">
                <h3>PhonoDrop</h3>
            </div>
            </div>
        </div>
86

Sylvain Coulange's avatar
Sylvain Coulange committed
87
88
89
90
        <script type="text/javascript" src="scripts/cartes.js"></script>
        <script type="text/javascript" src="scripts/script.js"></script>
    </body>
</html>