blob: f16c0dea699c4b82a0473be723199b02a238e943 (
plain)
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KISS Media Player</title>
<link rel="manifest" href="/manifest.json">
<link rel="stylesheet" href="/css/theme.css">
<link rel="stylesheet" href="/css/layout.css">
<link rel="stylesheet" href="/css/components.css">
<link rel="stylesheet" href="/css/player.css">
<script type="module" src="/js/app.js"></script>
</head>
<body>
<header class="site-header" role="banner">
<a href="/" class="logo">KISS Media</a>
<div class="search-bar" role="search">
<span aria-hidden="true">🔎</span>
<input id="search-input" type="search" placeholder="Search… (press /)" autocomplete="off" aria-label="Search media">
<button id="search-clear" class="icon-btn btn-sm" title="Clear">✕</button>
</div>
<div class="spacer"></div>
<button id="shuffle-toggle" class="icon-btn" title="Shuffle (r)">🔀</button>
<button id="admin-toggle" class="icon-btn hidden" title="Admin panel (a)">⚙</button>
<button id="theme-toggle" class="icon-btn" title="Toggle theme">☀</button>
<span id="user-name" class="text-secondary" style="font-size:0.85rem;"></span>
<button id="logout-btn" class="btn btn-ghost btn-sm">Log out</button>
<button id="menu-btn" class="icon-btn" title="Menu" aria-label="Open sets">☰</button>
</header>
<nav id="sidebar" class="sidebar" aria-label="Sets">
<h2>Sets</h2>
<div id="set-list"></div>
</nav>
<div class="page" role="main">
<div class="main-content">
<div class="toolbar" style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem;">
<select id="filter-type" aria-label="Filter by type">
<option value="">All</option>
<option value="video">Video</option>
<option value="audio">Audio</option>
</select>
<button id="filter-favorites" class="btn btn-ghost btn-sm">❤ Favorites</button>
<div class="spacer"></div>
<span id="result-count" class="text-muted" style="font-size:0.8rem;"></span>
</div>
<div id="media-grid" class="media-grid" tabindex="0" aria-label="Media grid"></div>
</div>
</div>
<aside id="player" class="player open" aria-label="Player">
<div class="stage">
<video id="media-video" playsinline controlslist="nodownload"></video>
<audio id="media-audio" style="display:none;"></audio>
<div id="big-play" class="big-play" role="button" aria-label="Play" tabindex="0">
<div class="play-icon">▶</div>
</div>
</div>
<div class="controls">
<button id="btn-play" class="icon-btn" aria-label="Play/Pause (Space/p)">▶</button>
<div class="time" id="time-elapsed">0:00</div>
<div id="progress-track" class="progress-track" tabindex="0" aria-label="Seek">
<div id="progress-fill" class="progress-fill"></div>
<div id="progress-thumb" class="progress-thumb" aria-hidden="true"></div>
</div>
<div class="time" id="time-total">0:00</div>
<button id="btn-prev" class="icon-btn" aria-label="Previous">⏮</button>
<button id="btn-next" class="icon-btn" aria-label="Next">⏭</button>
<div class="volume-control">
<button id="btn-mute" class="icon-btn" aria-label="Mute">🔊</button>
<input id="volume-slider" type="range" min="0" max="1" step="0.05" value="1" class="volume-slider" aria-label="Volume">
</div>
<button id="btn-fullscreen" class="icon-btn" aria-label="Fullscreen (f)">⛶</button>
</div>
</aside>
<footer class="toast" id="toast" role="status" aria-live="polite"></footer>
<!-- Notes Modal -->
<div id="notes-modal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="notes-title">
<div class="modal">
<div class="modal-header">
<h3 id="notes-title">Notes</h3>
<div class="spacer"></div>
<button id="notes-close" class="icon-btn" aria-label="Close">✕</button>
</div>
<textarea id="notes-textarea" rows="6" placeholder="Add your notes…"></textarea>
<div style="display:flex;justify-content:flex-end;gap:0.5rem;margin-top:0.5rem;">
<button id="notes-delete" class="btn btn-danger btn-sm">Delete</button>
<button id="notes-save" class="btn btn-primary btn-sm">Save</button>
</div>
</div>
</div>
<!-- Admin Modal -->
<div id="admin-modal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="admin-title">
<div class="modal" style="width:min(56rem,96vw);">
<div class="modal-header">
<h3 id="admin-title">Admin</h3>
<div class="spacer"></div>
<button id="admin-close" class="icon-btn" aria-label="Close">✕</button>
</div>
<div style="display:flex;gap:1rem;flex-wrap:wrap;">
<section style="flex:1 1 18rem;">
<h4 style="margin:0.25rem 0;font-size:0.9rem;">Users</h4>
<div id="admin-users"></div>
<form id="admin-user-form" style="margin-top:0.5rem;">
<input name="username" placeholder="Username" required autocomplete="off">
<input type="password" name="password" placeholder="Password" required autocomplete="new-password">
<label style="display:flex;align-items:center;gap:0.35rem;font-size:0.8rem;">
<input type="checkbox" name="is_admin"> Admin
</label>
<button type="submit" class="btn btn-primary btn-sm" style="margin-top:0.25rem;">Add user</button>
</form>
</section>
<section style="flex:1 1 18rem;">
<h4 style="margin:0.25rem 0;font-size:0.9rem;">Permissions</h4>
<div id="admin-permissions"></div>
</section>
</div>
<div style="display:flex;gap:0.5rem;margin-top:0.75rem;">
<button id="admin-rescan" class="btn btn-primary btn-sm">Trigger rescan</button>
<button id="admin-trash" class="btn btn-danger btn-sm">View trash</button>
</div>
</div>
</div>
</body>
</html>
|
