TIIO/index.html at main · nicholasxdavis/TIIO · 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
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TIIO - The Internet Is Out | Offline Media Player</title>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
          onerror="this.onerror=null;console.warn('Font Awesome CDN unavailable');">

    <!-- Local Libraries - Must load before main app -->
    <script src="ui/js/background/lodash.js"></script>
    <script src="ui/js/background/jquery.js"></script>
    <script src="ui/js/background/howler.min.js"></script>
    <script src="ui/js/background/dexie.js"></script>
    <script src="ui/js/covers/cover.js"></script>

    <!-- Styles -->
    <link rel="stylesheet" href="/src/styles/index.css">
</head>
<body class="min-h-screen">
    <!-- Custom Title Bar -->
    <div class="title-bar">
        <div class="title-bar-drag-region">
            <div class="title-bar-title">TIIO</div>
            </div>
        <div class="title-bar-controls">
            <button class="title-bar-button" onclick="window.electron.minimizeWindow()" title="Minimize">
                <i class="fas fa-window-minimize"></i>
                </button>
            <button class="title-bar-button" onclick="window.electron.maximizeWindow()" title="Maximize">
                <i class="far fa-window-maximize"></i>
                </button>
            <button class="title-bar-button title-bar-close" onclick="window.electron.closeWindow()" title="Close">
                <i class="fas fa-times"></i>
                    </button>
                </div>
                </div>

    <!-- Cookies Banner -->
    <div id="cookiesBanner" class="cookies-banner" style="display: none;">
        <p>We use cookies to enhance your experience. By using this app, you agree to our use of cookies.</p>
        <button onclick="acceptCookies()">Accept</button>
                </div>

    <div class="app-container" id="appContainer"></div>

    <!-- Queue Sidebar -->
    <div id="playingQueueContainer" class="fixed right-0 w-80 bg-black border-l border-gray-800 z-50 transform translate-x-full transition-transform duration-300" style="top: 32px; height: calc(100vh - 32px);">
        <div class="p-6 h-full flex flex-col">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-lg font-bold text-white">Queue</h3>
                <button onclick="document.getElementById('playingQueueContainer').classList.add('translate-x-full')" class="text-gray-400 hover:text-white transition-colors" title="Close">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div id="playingQueueList" class="flex-1 overflow-y-auto space-y-1"></div>
        </div>
    </div>

    <!-- Bottom Player Bar -->
    <div id="bottomPlayerBar"></div>

    <!-- Modals Container -->
    <div id="modalsContainer"></div>

    <!-- Toast Container -->
    <div id="toastContainer" class="fixed bottom-32 right-4 z-50 space-y-2 w-72 sm:w-80"></div>

    <!-- Context Menu -->
    <div id="contextMenuModal" class="fixed hidden z-50 shadow-xl">
        <div class="glass-card animate__animated animate__fadeInUp animate__faster"></div>
                    </div>

    <!-- Use the full backup version with title bar -->
    <script>
        // Redirect to full version
        window.location.href = 'index-full.html';
    </script>
</body>
</html>