youzik/index.html at main · vil1driver/youzik · GitHub

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
26
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!doctype html>
<html lang="fr">
    <head>
        <title>Youtube Music</title>
        <meta charset="utf-8">
        <link rel="manifest" href="manifest.json">
        <link rel="shortcut icon" href="images/youzic.ico">
        <link rel="apple-touch-icon" href="images/youzic-512.png">
        <link rel="stylesheet" href="css/base.css" type="text/css">
        <link rel="stylesheet" href="css/editor.css" type="text/css">
        <link rel="stylesheet" href="css/swiper-bundle.min.css" type="text/css">
        <script src="js/sweetalert2.all.min.js"></script>
        <script src="js/sw-main.js"></script>
        <script src="https://www.youtube.com/iframe_api"></script>
        <script src="js/players.js"></script>
        <script src="js/swiper-bundle.min.js"></script>
        <script src="js/indexedDB.js"></script>
        <script src="js/editor.js"></script>
        <script src="js/user.js"></script>
        <script src="js/wakeLock.js"></script>
    </head>
    <body>
        <div class="video-container" id="videoPlayer">
            <!-- Le lecteur vidéo ou audio sera chargé ici -->
        </div>
        <!-- partie slidable -->
        <div class="swiper">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide">
                    <!-- Page 1 -->
                    <div class="liste1">
                        <!-- Boutons pour lire les vidéos seront placés ici-->
                        <span id="loader" class="loader">
                            <span class="loader-inner"></span>  <!-- Animation de chargement-->
                        </span>
                    </div>
                    <!-- fin page 1 -->
                </div>
                <div class="swiper-slide">
                    <!-- Page 2 -->
                    <div class="liste2">
                        <!-- Boutons pour lire les web radios seront placés ici-->
                    </div>
                    <!-- fin page 2-->
                </div>
                <div class="swiper-slide">
                    <!-- Page 3 -->
                    <div class="liste3">
                        <!-- Boutons pour lire les playlist youtube seront placés ici-->
                    </div>
                    <!-- fin page 3-->
                </div>
            </div>
        </div>
        <!-- Overlay mode édition -->
        <div id="editModeOverlay" class="edit-mode-overlay"></div>
        <!-- Menu Unifié -->
        <button id="unifiedMenuBtn" class="unified-menu-btn">☰</button>
        <div id="unifiedMenu" class="unified-menu">
            <div class="unified-menu-content">
                <button id="editModeMenuBtn" class="menu-item">
                    <span class="menu-icon">✏️</span>
                    <span class="menu-label">Mode édition</span>
                </button>
                <button id="addItemMenuBtn" class="menu-item">
                    <span class="menu-icon">➕</span>
                    <span class="menu-label">Ajouter média</span>
                </button>
                <button id="exportMenuBtn" class="menu-item">
                    <span class="menu-icon">💾</span>
                    <span class="menu-label">Exporter</span>
                </button>
                <button id="importMenuBtn" class="menu-item">
                    <span class="menu-icon">🗂️</span>
                    <span class="menu-label">Importer</span>
                </button>
            </div>
        </div>
        <input type="file" id="importFile" accept=".json" style="display: none;">
        <script src="js/swiper-conf.js"></script>
        <script src="js/menu.js"></script>
    </body>
</html>