Mercurial

comparison mrjunejune/test/snapshots/tools_hls_player.snapshot @ 256:30c2196d03d4

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[site] Integrate Zenbu themes and components Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Tue, 04 Aug 2026 16:49:01 -0700
parents 543df0fe7168
children 60a876c4587a
comparison
equal deleted inserted replaced
255:5ec271d612ae 256:30c2196d03d4
1 <!doctype html> 1 <!doctype html>
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
4 <meta charset="UTF-8"> 4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta name="theme-color" content="#544e43"> 6 <meta name="theme-color" content="#f7f3e8">
7 <link rel="icon" type="image/svg+xml" href="/public/epi_all_colors.svg"> 7 <link rel="icon" type="image/svg+xml" href="/public/epi_all_colors.svg">
8 <link rel="manifest" href="/public/manifest.json"> 8 <link rel="manifest" href="/public/manifest.json">
9 <link rel="apple-touch-icon" href="/public/epi_all_colors.svg"> 9 <link rel="apple-touch-icon" href="/public/epi_all_colors.svg">
10 10
11 <link rel="preload" href="/public/fonts/Roboto-Regular.ttf" as="font" crossorigin> 11 <link rel="preload" href="/public/fonts/Roboto-Regular.ttf" as="font" crossorigin>
17 <!-- <link rel="preload" href="/public/fonts/more-sugar.extras.otf" as="font" type="font/otf" crossorigin> --> 17 <!-- <link rel="preload" href="/public/fonts/more-sugar.extras.otf" as="font" type="font/otf" crossorigin> -->
18 <link rel="preload" href="/public/fonts/more-sugar.regular.otf" as="font" type="font/otf" crossorigin> 18 <link rel="preload" href="/public/fonts/more-sugar.regular.otf" as="font" type="font/otf" crossorigin>
19 <link rel="preload" href="/public/fonts/more-sugar.thin.otf" as="font" type="font/otf" crossorigin> 19 <link rel="preload" href="/public/fonts/more-sugar.thin.otf" as="font" type="font/otf" crossorigin>
20 <link rel="preload" href="/public/epi_all_colors.svg" as="image"> 20 <link rel="preload" href="/public/epi_all_colors.svg" as="image">
21 21
22 <link rel="stylesheet" href="/public/design-system/styles/tokens.css" />
23 <link rel="stylesheet" href="/public/design-system/styles/themes.css" />
22 <link rel="preload" href="/base.css" as="style" /> 24 <link rel="preload" href="/base.css" as="style" />
23 <link rel="stylesheet" href="/base.css" /> 25 <link rel="stylesheet" href="/base.css" />
26 <link rel="stylesheet" href="/public/design-system/styles/components.css" />
27 <script
28 type="module"
29 src="/public/design-system/components/index.js"
30 ></script>
24 31
25 <script src="/public/pwa-register.js" defer></script> 32 <script src="/public/pwa-register.js" defer></script>
26
27 33
28 <title>HLS Player - MrJuneJune</title> 34 <title>HLS Player - MrJuneJune</title>
29 <link rel="stylesheet" href="/tools/hls_player/index.css" /> 35 <link rel="stylesheet" href="/tools/hls_player/index.css" />
30 <script src="/public/hls.min.js" defer></script> 36 <script src="/public/hls.min.js" defer></script>
31 <script src="/tools/hls_player/hls-player.js" defer></script> 37 <script src="/tools/hls_player/hls-player.js" defer></script>
32 </head> 38 </head>
33 <body> 39 <body>
34 <style> 40 <style>
35 :root { 41 :root {
36 --header-background: var(--white); 42 --header-background: var(--white);
37 --header-color: rgb(var(--black)); 43 --header-color: var(--black);
38 --link-hover-accent: var(--awesome); 44 --link-hover-accent: var(--awesome);
39 } 45 }
40 46
41 /* Fixed icon in top left corner */ 47 #themeControl {
42 #themeToggle {
43 position: fixed; 48 position: fixed;
44 top: 20px; 49 top: 20px;
45 left: 20px; 50 left: 20px;
46 background: var(--header-background);
47 display: flex;
48 align-items: center;
49 border-radius: 50%;
50 cursor: pointer;
51 z-index: 1000; 51 z-index: 1000;
52 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
53 transition: transform 0.2s ease; 52 transition: transform 0.2s ease;
54 } 53 }
55 54
56 #themeToggle:hover { 55 #themeControl:hover {
57 transform: scale(1.05); 56 transform: scale(1.05);
57 }
58
59 #themeToggle {
60 flex-direction: column;
61 min-width: 4.5rem;
62 padding: 0.35rem;
63 border-radius: 1.5rem;
64 }
65
66 #themeName {
67 font-family: "More", sans-serif;
68 font-size: 0.65rem;
69 line-height: 1;
58 } 70 }
59 71
60 /* Professional header */ 72 /* Professional header */
61 header { 73 header {
62 margin: auto; 74 margin: auto;
63 padding: 1.5em 1em; 75 padding: 1.5em 1em;
64 font-family: "More", sans-serif; 76 font-family: "More", sans-serif;
65 box-shadow: 0 2px 8px rgba(var(--black), 5%); 77 box-shadow: var(--zen-shadow-sm);
66 width: 720px; 78 width: 720px;
67 max-width: calc(100% - 2em); 79 max-width: calc(100% - 2em);
68 text-align: center; 80 text-align: center;
69 } 81 }
70 82
84 display: none; 96 display: none;
85 } 97 }
86 98
87 /* Mobile responsiveness */ 99 /* Mobile responsiveness */
88 @media (max-width: 720px) { 100 @media (max-width: 720px) {
89 #themeToggle { 101 #themeControl {
90 top: 15px; 102 top: 15px;
91 left: 15px; 103 left: 15px;
92 } 104 }
93 105
94 header { 106 header {
99 font-size: 1.5em; 111 font-size: 1.5em;
100 } 112 }
101 } 113 }
102 114
103 @media (max-width: 480px) { 115 @media (max-width: 480px) {
104 #themeToggle { 116 #themeControl {
105 top: 10px; 117 top: 10px;
106 left: 10px; 118 left: 10px;
107 } 119 }
108 120
109 #themeToggle img { 121 #themeToggle img {
125 --logo-invert: invert(0); 137 --logo-invert: invert(0);
126 --epi-grayscale: grayscale(0) brightness(1); 138 --epi-grayscale: grayscale(0) brightness(1);
127 } 139 }
128 140
129 /* 2. MANUAL DARK OVERRIDE */ 141 /* 2. MANUAL DARK OVERRIDE */
130 html.dark { 142 html[data-zen-theme="ink"] {
131 --logo-invert: invert(1); 143 --logo-invert: invert(1);
132 --epi-grayscale: grayscale(1); 144 --epi-grayscale: grayscale(1);
133 } 145 }
134 146
135 /* 3. MANUAL LIGHT OVERRIDE */ 147 /* 3. MANUAL LIGHT OVERRIDE */
136 html.light-mode { 148 html[data-zen-theme="paper"] {
137 --logo-invert: invert(0); 149 --logo-invert: invert(0);
138 --epi-grayscale: brightness(2.9) grayscale(1); 150 --epi-grayscale: brightness(2.9) grayscale(1);
139 } 151 }
152
153 html[data-zen-theme="playful"] {
154 --logo-invert: invert(0);
155 --epi-grayscale: saturate(1.25);
156 }
140 157
141 /* 4. SYSTEM PREFERENCE */ 158 /* 4. SYSTEM PREFERENCE */
142 @media (prefers-color-scheme: dark) { 159 @media (prefers-color-scheme: dark) {
143 :root:not(.light-mode) { 160 :root:not([data-zen-theme]) {
144 --logo-invert: invert(1); 161 --logo-invert: invert(1);
145 } 162 }
146 } 163 }
147 164
148 /* 5. APPLY TO ELEMENTS */ 165 /* 5. APPLY TO ELEMENTS */
157 filter: var(--epi-grayscale); 174 filter: var(--epi-grayscale);
158 transition: filter 0.3s ease; 175 transition: filter 0.3s ease;
159 } 176 }
160 </style> 177 </style>
161 178
162 <div id="themeToggle"> 179 <zen-button id="themeControl" variant="quiet">
163 <img id="epiChan" class="epi-logo" aria-label="Toggle dark mode" src="/public/epi_all_colors.svg" height="50" width="50"> 180 <button
164 </div> 181 id="themeToggle"
182 type="button"
183 aria-label="Change site theme"
184 >
185 <img
186 id="epiChan"
187 class="epi-logo"
188 alt=""
189 src="/public/epi_all_colors.svg"
190 height="50"
191 width="50"
192 >
193 <span id="themeName" aria-live="polite">Auto</span>
194 </button>
195 </zen-button>
165 196
166 <header> 197 <header>
167 <h1><a href="/">MrJuneJune</a></h1> 198 <h1><a href="/">MrJuneJune</a></h1>
168 </header> 199 </header>
169 <script src="/index.js"></script> 200 <script src="/index.js"></script>
170
171 201
172 <main> 202 <main>
173 <h1>Online HLS Player</h1> 203 <h1>Online HLS Player</h1>
174 <p>Load an HLS playlist from a URL, or try the sample stream bundled with this site.</p> 204 <p>Load an HLS playlist from a URL, or try the sample stream bundled with this site.</p>
175 205