-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
102 lines (96 loc) · 5.24 KB
/
index.html
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/style.min.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="
default-src 'self' blob:;
media-src 'self' blob: data: https://*.github.io https://raw.githubusercontent.com;
script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' https://*.github.io https://ammopy.goatcounter.com;
style-src 'self' 'unsafe-inline';
font-src 'self' data: https://*.github.io;
img-src 'self' data: https://*.github.io https://raw.githubusercontent.com;
connect-src 'self' https://*.github.io https://api.github.com https://ammopy.goatcounter.com;
">
<title>SUI</title>
<meta name="description" content="Accessible audio player with 3D controls, offline playback, gesture support, and audio conversion">
<meta name="keywords" content="accessible playlist, accessible user interface, accessible ui, accessible media player, accessible music player, accessible audio player, accessible pwa, offline playback, offline media player, offline music player, gesture support audio player, gesture support media player, audio conversion, music converter, media converter, mp3 converter, mp4 converter, ffmpeg, pwa, single-page application (SPA)">
<meta name="author" content="AmMoPy">
<meta property="og:title" content="SUI - Simple UI">
<meta property="og:description" content="Accessible audio player with 3D controls, offline playback, gesture support, and audio conversion">
<meta property="og:image" content="https://raw.githubusercontent.com/ammopy/sui/assets/icons/arrow.png">
<meta property="og:url" content="https://ammopy.github.io/sui/">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="SUI - Simple UI">
<meta name="twitter:description" content="Accessible audio player with 3D controls, offline playback, gesture support, and audio conversion">
<meta name="twitter:image" content="https://raw.githubusercontent.com/ammopy/sui/assets/icons/arrow.png">
<link rel="canonical" href="https://ammopy.github.io/sui/">
<link rel="manifest" href="manifest.json">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- <link rel="preload" href="js/ffmpeg/ffmpeg-core.wasm" as="fetch" type="application/wasm" crossorigin="anonymous"> -->
<script>
// Flash of Inaccurate Color Theme (FOICT) prevention
// When swithcing between dark/light mode
// Check local storage immediately and apply class to HTML element
// This runs before any DOM elements are rendered
(() => {
const colorMode = localStorage.getItem('colorMode') || '0'; // Default to 0 (dark)
const root = document.documentElement;
// Set initial classes before DOM renders
root.classList.toggle('light-mode', colorMode === '1');
root.classList.toggle('no-animation', colorMode === '2');
})();
</script>
</head>
<body>
<!-- Floating Playlist Toggle Button -->
<button id="togglePlaylistBtn" class="playlist-toggle" title="Show Playlist" aria-label="Show Playlist">
<span class="toggle-icon">☰</span>
</button>
<!-- Light Mode -->
<button id="light-mode-toggle" data-mode="moon">
<h1 class="brand-txt">SUI</h1>
<img src="assets/icons/dlm/sun.png" alt="Light Mode" class="light-mode-icon">
<img src="assets/icons/dlm/moon.png" alt="Dark Mode" class="dark-mode-icon">
</button>
<!-- Playlist Section -->
<section class="playlist-section" id="playlistSection">
<div class="playlist-header">
<h2>Playlist Controls</h2>
<div class="list-controls">
<button id="selectAllBtn" title="Select all" aria-label="Select all">Select All</button>
<button id="deleteSelectedBtn" title="Delete selected" aria-label="Delete selected">Delete Selected</button>
<button id="sortControlBtn" title="Sort playlist" aria-label="Sort playlist"></button>
</div>
</div>
<ul id="playList" class="scrollable-playlist"></ul>
</section>
<!-- Controls Section -->
<section class="controls-section">
<div class="circular-controls">
<!-- particles container -->
<div id="particles-js"></div>
<button id="prevBtn" class="control-btn" title="Previous" aria-label="Previous">⏮</button>
<button id="playPauseBtn" class="control-btn main-control" title="Play" aria-label="Play">▶</button>
<button id="nextBtn" class="control-btn" title="Next" aria-label="Next">⏭</button>
<button id="uploadBtn" class="control-btn upload-control" title="Add files" aria-label="Add files">
<span class="upload-text">Upload</span>
</button>
<input type="file" id="fileUpload" accept="audio/*" multiple hidden>
</div>
</section>
<!-- Gestures -->
<script src="js/hammer.min.js"></script>
<!-- Audio Compression and Conversion -->
<!-- TODO: Auto update version -->
<script src="js/ffmpeg/ffmpeg.min.js?v=0.12.15"></script>
<!-- Animations -->
<script src="js/particles/particles.min.js"></script>
<script src="js/particles/prtx.js"></script>
<!-- Main -->
<script type="module" src="js/app.min.js"></script>
<!-- GoatCounter Analytics -->
<script data-goatcounter="https://ammopy.goatcounter.com/count" async src="js/gc.min.js"></script>
</body>
</html>