index.html 3.61 KB
Newer Older
Sylvain Coulange's avatar
Sylvain Coulange committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
    <head>
        <title>PhonoDrop</title>
        <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>
        <!-- file:///home/sylvain/peda_multi/dragdrop/index.html -->
        <!-- Librairie intéressante https://shopify.github.io/draggable/ -->
        <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>
        </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="parametres-right">
26
            <a id="hrefNewPage" href=""><img src="im/new-page.png" title="Ouvrir une nouvelle page"/></a>
Sylvain Coulange's avatar
Sylvain Coulange committed
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
            <span onclick="eraseAll()" class="glyphicon glyphicon-remove-sign" aria-hidden="true" title="Tout effacer"></span>
        </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>
        </div>

        <div class="ecritoire">
            <div id="casesZone"></div>
        </div>

        <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>
56
                    <button onclick="openInNewTab()">Ouvrir</button>
Sylvain Coulange's avatar
Sylvain Coulange committed
57
58
59
60
61
62
63
64
65
66
67
68
                </div>
            </div>
            <div class="modal-footer">
                <h3>PhonoDrop</h3>
            </div>
            </div>
        </div>
        
        <script type="text/javascript" src="scripts/cartes.js"></script>
        <script type="text/javascript" src="scripts/script.js"></script>
    </body>
</html>