mirror of
https://github.com/Shik3i/KoalaSync.git
synced 2026-08-07 01:43:15 +00:00
Polish demo film, bamboo forest, popup a11y, and step-1 toast
- Demo mockup video: drifting clouds, shooting star, moon craters, bird flock, valley mist band, floating lantern instead of bouncing ball, stronger cinematic vignette - Player controls: play/pause glyph, duration, buffered range, volume, HD badge, fullscreen icon - Bamboo background: two faint centre trunks, segment rings on far stalks, wider near stalks with extra leaf, smaller blurred layers (240% -> 200%) and reduced blur radii for cheaper compositing - Step-1 illustration: invite toast floats fully below the popup card - Extension popup: label/for associations for all settings controls - Demo video select: drop invalid inline SVG inside <option> Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
KoalaDev
+13
-13
@@ -583,11 +583,11 @@
|
||||
</div>
|
||||
<!-- Room credentials — distinct group below the server picker. -->
|
||||
<div class="form-group">
|
||||
<label title="The unique identifier for your sync room" data-i18n="LABEL_ROOM_ID" data-i18n-title="LABEL_ROOM_ID_TOOLTIP">Room ID</label>
|
||||
<label for="roomId" title="The unique identifier for your sync room" data-i18n="LABEL_ROOM_ID" data-i18n-title="LABEL_ROOM_ID_TOOLTIP">Room ID</label>
|
||||
<input type="text" id="roomId" data-i18n-placeholder="PLACEHOLDER_ROOM_ID" data-i18n-title="PLACEHOLDER_ROOM_ID_TOOLTIP" placeholder="Enter Room ID" title="The unique ID of the room you want to join">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label title="Optional password to restrict room access" data-i18n="LABEL_PASSWORD" data-i18n-title="LABEL_PASSWORD_TOOLTIP">Password (Optional)</label>
|
||||
<label for="password" title="Optional password to restrict room access" data-i18n="LABEL_PASSWORD" data-i18n-title="LABEL_PASSWORD_TOOLTIP">Password (Optional)</label>
|
||||
<input type="password" id="password" data-i18n-placeholder="PLACEHOLDER_PASSWORD" data-i18n-title="PLACEHOLDER_PASSWORD_TOOLTIP" placeholder="Room Password (optional)" title="Password for the room (leave empty if none)">
|
||||
</div>
|
||||
<div id="roomError" style="display:none; color:var(--error); font-size:11px; margin-bottom:8px; text-align:center;"></div>
|
||||
@@ -628,7 +628,7 @@
|
||||
<span id="hostRoleBadge" style="font-size:10px; font-weight:700; text-transform:uppercase; padding:2px 8px; border-radius:8px; background:var(--accent); color:var(--text-on-green);"></span>
|
||||
</div>
|
||||
<div id="hostControlToggleRow" style="display:none; align-items:center; justify-content:space-between; gap:12px; margin-top:12px;">
|
||||
<span style="font-size:12px; color:var(--text); line-height:1.3;" data-i18n="LABEL_HOST_ONLY_TOGGLE">Only I can control playback</span>
|
||||
<label for="hostControlToggle" style="font-size:12px; color:var(--text); line-height:1.3; margin:0; text-transform:none; font-weight:400;" data-i18n="LABEL_HOST_ONLY_TOGGLE">Only I can control playback</label>
|
||||
<label class="toggle-switch" style="flex:none;">
|
||||
<input type="checkbox" id="hostControlToggle">
|
||||
<span class="slider"></span>
|
||||
@@ -654,7 +654,7 @@
|
||||
<!-- SYNC ACTIVE: Visible when in a room -->
|
||||
<div id="sync-active">
|
||||
<div class="form-group" style="position: relative;">
|
||||
<label title="Choose the browser tab containing the video to sync" data-i18n="LABEL_SELECT_VIDEO" data-i18n-title="LABEL_SELECT_VIDEO_TOOLTIP">Select Video</label>
|
||||
<label for="targetTab" title="Choose the browser tab containing the video to sync" data-i18n="LABEL_SELECT_VIDEO" data-i18n-title="LABEL_SELECT_VIDEO_TOOLTIP">Select Video</label>
|
||||
<select id="targetTab">
|
||||
<option value="" data-i18n="OPTION_SELECT_TAB">-- Select a Tab --</option>
|
||||
</select>
|
||||
@@ -714,7 +714,7 @@
|
||||
<!-- Settings Tab -->
|
||||
<div id="tab-settings" class="tab-content">
|
||||
<div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid var(--border-strong);">
|
||||
<label id="themeLabel" style="margin-bottom: 0;" title="Follow the system theme or choose a fixed appearance">Appearance</label>
|
||||
<label id="themeLabel" for="themeSelector" style="margin-bottom: 0;" title="Follow the system theme or choose a fixed appearance">Appearance</label>
|
||||
<select id="themeSelector" aria-label="Appearance" style="width: 165px; background: var(--bg); border: 1px solid var(--border-strong); color: var(--text); padding: 6px 10px; border-radius: 8px; font-size: 13px; cursor: pointer; outline: none; font-family: inherit;">
|
||||
<option id="themeOptionSystem" value="system">💻 System</option>
|
||||
<option id="themeOptionDark" value="dark">🌙 Dark</option>
|
||||
@@ -723,21 +723,21 @@
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid var(--border-strong);">
|
||||
<label style="margin-bottom: 0;" title="Username helps others identify you." data-i18n="LABEL_USERNAME" data-i18n-title="LABEL_USERNAME_TOOLTIP">Your Username</label>
|
||||
<label for="username" style="margin-bottom: 0;" title="Username helps others identify you." data-i18n="LABEL_USERNAME" data-i18n-title="LABEL_USERNAME_TOOLTIP">Your Username</label>
|
||||
<input type="text" id="username" data-i18n-placeholder="PLACEHOLDER_USERNAME" placeholder="Anonymous Koala" maxlength="20" style="width: 150px;">
|
||||
</div>
|
||||
|
||||
<details class="form-group" style="background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid var(--border-strong);">
|
||||
<summary style="cursor: pointer; font-size: 12px; font-weight: 700; color: var(--text);" title="Choose which titles are sent to the room." data-i18n="LABEL_PRIVACY_SETTINGS" data-i18n-title="LABEL_PRIVACY_SETTINGS_TOOLTIP">Privacy Settings</summary>
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px;">
|
||||
<label style="margin-bottom: 0; cursor: help;" title="Send the selected browser tab title to the room." data-i18n="LABEL_SEND_TAB_TITLE" data-i18n-title="LABEL_SEND_TAB_TITLE_TOOLTIP">Send tab title</label>
|
||||
<label for="sendTabTitle" style="margin-bottom: 0; cursor: help;" title="Send the selected browser tab title to the room." data-i18n="LABEL_SEND_TAB_TITLE" data-i18n-title="LABEL_SEND_TAB_TITLE_TOOLTIP">Send tab title</label>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="sendTabTitle" checked>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px;">
|
||||
<label style="margin-bottom: 0; cursor: help;" title="Choose how media titles are sent to the room." data-i18n="LABEL_MEDIA_TITLE_PRIVACY" data-i18n-title="LABEL_MEDIA_TITLE_PRIVACY_TOOLTIP">Media title</label>
|
||||
<label for="mediaTitlePrivacyMode" style="margin-bottom: 0; cursor: help;" title="Choose how media titles are sent to the room." data-i18n="LABEL_MEDIA_TITLE_PRIVACY" data-i18n-title="LABEL_MEDIA_TITLE_PRIVACY_TOOLTIP">Media title</label>
|
||||
<select id="mediaTitlePrivacyMode" style="width: 165px; background: var(--bg); border: 1px solid var(--border-strong); color: white; padding: 6px 10px; border-radius: 8px; font-size: 12px; cursor: pointer; outline: none; font-family: inherit;">
|
||||
<option value="full" data-i18n="OPTION_TITLE_PRIVACY_FULL">Send full title</option>
|
||||
<option value="episode" data-i18n="OPTION_TITLE_PRIVACY_EPISODE">Send episode ID</option>
|
||||
@@ -747,7 +747,7 @@
|
||||
</details>
|
||||
|
||||
<div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid var(--border-strong);">
|
||||
<label style="margin-bottom: 0; cursor: help;" title="Filters out non-video tabs and unrelated domains to keep the list clean" data-i18n="LABEL_HIDE_CLUTTER" data-i18n-title="LABEL_HIDE_CLUTTER_TOOLTIP">Hide Clutter Tabs</label>
|
||||
<label for="filterNoise" style="margin-bottom: 0; cursor: help;" title="Filters out non-video tabs and unrelated domains to keep the list clean" data-i18n="LABEL_HIDE_CLUTTER" data-i18n-title="LABEL_HIDE_CLUTTER_TOOLTIP">Hide Clutter Tabs</label>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="filterNoise" checked>
|
||||
<span class="slider"></span>
|
||||
@@ -755,7 +755,7 @@
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid var(--border-strong);">
|
||||
<label style="margin-bottom: 0; cursor: help;" title="Pauses automatically and waits for all peers when an episode changes, then sync-starts together." data-i18n="LABEL_AUTO_SYNC_NEXT" data-i18n-title="LABEL_AUTO_SYNC_NEXT_TOOLTIP">Auto-Sync Next Episode</label>
|
||||
<label for="autoSyncNextEpisode" style="margin-bottom: 0; cursor: help;" title="Pauses automatically and waits for all peers when an episode changes, then sync-starts together." data-i18n="LABEL_AUTO_SYNC_NEXT" data-i18n-title="LABEL_AUTO_SYNC_NEXT_TOOLTIP">Auto-Sync Next Episode</label>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="autoSyncNextEpisode">
|
||||
<span class="slider"></span>
|
||||
@@ -763,7 +763,7 @@
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid var(--border-strong);">
|
||||
<label style="margin-bottom: 0; cursor: help;" title="Automatically copies the invite link to your clipboard when creating a new room." data-i18n="LABEL_AUTO_COPY_INVITE" data-i18n-title="LABEL_AUTO_COPY_INVITE_TOOLTIP">Auto-Copy Invite Link</label>
|
||||
<label for="autoCopyInvite" style="margin-bottom: 0; cursor: help;" title="Automatically copies the invite link to your clipboard when creating a new room." data-i18n="LABEL_AUTO_COPY_INVITE" data-i18n-title="LABEL_AUTO_COPY_INVITE_TOOLTIP">Auto-Copy Invite Link</label>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="autoCopyInvite" checked>
|
||||
<span class="slider"></span>
|
||||
@@ -771,7 +771,7 @@
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid var(--border-strong);">
|
||||
<label style="margin-bottom: 0; cursor: help;" title="Shows native system notifications when someone joins/leaves or plays/pauses." data-i18n="LABEL_NOTIFICATIONS" data-i18n-title="LABEL_NOTIFICATIONS_TOOLTIP">Browser Notifications</label>
|
||||
<label for="browserNotifications" style="margin-bottom: 0; cursor: help;" title="Shows native system notifications when someone joins/leaves or plays/pauses." data-i18n="LABEL_NOTIFICATIONS" data-i18n-title="LABEL_NOTIFICATIONS_TOOLTIP">Browser Notifications</label>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="browserNotifications">
|
||||
<span class="slider"></span>
|
||||
@@ -786,7 +786,7 @@
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid var(--border-strong);">
|
||||
<label style="margin-bottom: 0;" data-i18n="LABEL_LANGUAGE" data-i18n-title="LABEL_LANGUAGE_TOOLTIP" title="Choose your preferred extension language">App Language</label>
|
||||
<label for="langSelector" style="margin-bottom: 0;" data-i18n="LABEL_LANGUAGE" data-i18n-title="LABEL_LANGUAGE_TOOLTIP" title="Choose your preferred extension language">App Language</label>
|
||||
<select id="langSelector" style="width: 165px; background: var(--bg); border: 1px solid var(--border-strong); color: white; padding: 6px 10px; border-radius: 8px; font-size: 13px; cursor: pointer; outline: none; font-family: inherit;">
|
||||
<option value="en">🇬🇧 English</option>
|
||||
<option value="de">🇩🇪 Deutsch</option>
|
||||
|
||||
+6
-6
@@ -820,16 +820,16 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const midOffset = (t * -24) % 160;
|
||||
const foreOffset = (t * -48) % 160;
|
||||
|
||||
// Bouncing ball logic (bounce Y is computed as parabolic arc)
|
||||
const bouncePeriod = 0.8;
|
||||
const bounceProgress = (t % bouncePeriod) / bouncePeriod;
|
||||
const bounceHeight = 16;
|
||||
const bounceY = 4 * bounceProgress * (1 - bounceProgress) * -bounceHeight;
|
||||
|
||||
// Floating lantern: slow vertical bob + softer horizontal sway on
|
||||
// detuned periods, so the drift never repeats exactly in sync
|
||||
const bounceY = Math.sin((t % 5.2) / 5.2 * Math.PI * 2) * 3.5;
|
||||
const lanternX = Math.cos((t % 8.6) / 8.6 * Math.PI * 2) * 4;
|
||||
|
||||
tab.root.style.setProperty('--scroll-back', backOffset.toFixed(2) + 'px');
|
||||
tab.root.style.setProperty('--scroll-mid', midOffset.toFixed(2) + 'px');
|
||||
tab.root.style.setProperty('--scroll-fore', foreOffset.toFixed(2) + 'px');
|
||||
tab.root.style.setProperty('--bounce-y', bounceY.toFixed(2) + 'px');
|
||||
tab.root.style.setProperty('--lantern-x', lanternX.toFixed(2) + 'px');
|
||||
};
|
||||
|
||||
const updateSyncUI = () => {
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
+189
-32
@@ -163,12 +163,18 @@ body {
|
||||
|
||||
#bamboo-far .bamboo-stalk {
|
||||
position: absolute;
|
||||
/* 200% covers the parallax drift (max 0.55vh down) with margin while
|
||||
keeping the blurred layer 17% smaller than the old 240% overscan. */
|
||||
top: -70%;
|
||||
height: 240%;
|
||||
height: 200%;
|
||||
border-radius: 999px;
|
||||
filter: blur(5.5px);
|
||||
filter: blur(4.5px);
|
||||
transition: filter 1.2s ease;
|
||||
background: linear-gradient(180deg, oklch(0.32 0.05 145 / 0.35), oklch(0.24 0.04 140 / 0.15));
|
||||
background:
|
||||
repeating-linear-gradient(180deg,
|
||||
transparent 0, transparent 108px,
|
||||
oklch(0.40 0.06 145 / 0.22) 108px, oklch(0.40 0.06 145 / 0.22) 112px),
|
||||
linear-gradient(180deg, oklch(0.34 0.05 145 / 0.4), oklch(0.24 0.04 140 / 0.16));
|
||||
}
|
||||
|
||||
#bamboo-far .far-1 { left: 2%; width: 26px; }
|
||||
@@ -176,6 +182,10 @@ body {
|
||||
#bamboo-far .far-3 { right: 4%; width: 30px; }
|
||||
#bamboo-far .far-4 { left: 13%; width: 20px; }
|
||||
#bamboo-far .far-5 { right: 10.5%; width: 16px; }
|
||||
/* Two whisper-quiet trunks soften the empty centre without touching the
|
||||
content: wide apart, thin, and at the lowest opacity in the scene. */
|
||||
#bamboo-far .far-6 { left: 39%; width: 12px; opacity: 0.55; }
|
||||
#bamboo-far .far-7 { right: 42%; width: 14px; opacity: 0.6; }
|
||||
|
||||
/* Two barely-there trunks break up the empty middle without competing with
|
||||
the content. They share the far layer's single parallax transform. */
|
||||
@@ -184,10 +194,10 @@ body {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -70%;
|
||||
height: 240%;
|
||||
height: 200%;
|
||||
border-radius: 999px;
|
||||
filter: blur(8px);
|
||||
opacity: 0.28;
|
||||
filter: blur(6.5px);
|
||||
opacity: 0.3;
|
||||
background: linear-gradient(180deg, oklch(0.34 0.05 145 / 0.3), oklch(0.23 0.04 140 / 0.1));
|
||||
}
|
||||
|
||||
@@ -196,8 +206,8 @@ body {
|
||||
|
||||
/* Depth of field: the far layer blurs further as you descend (stepped by
|
||||
JS on threshold crossings, never per frame) */
|
||||
.bg-nature.depth-mid #bamboo-far .bamboo-stalk { filter: blur(6.5px); }
|
||||
.bg-nature.depth-deep #bamboo-far .bamboo-stalk { filter: blur(8px); }
|
||||
.bg-nature.depth-mid #bamboo-far .bamboo-stalk { filter: blur(5.5px); }
|
||||
.bg-nature.depth-deep #bamboo-far .bamboo-stalk { filter: blur(6.5px); }
|
||||
|
||||
/* (a2) Mid bamboo layer: sits between far and near with its own parallax
|
||||
rate (app.js) and half the near layer's sway, so the three layers drift
|
||||
@@ -212,9 +222,9 @@ body {
|
||||
#bamboo-mid .bamboo-stalk {
|
||||
position: absolute;
|
||||
top: -70%;
|
||||
height: 240%;
|
||||
height: 200%;
|
||||
border-radius: 999px;
|
||||
filter: blur(2.5px);
|
||||
filter: blur(2px);
|
||||
transition: filter 1.2s ease;
|
||||
/* Segment rings + a soft left-of-centre sheen give the stalks culm
|
||||
structure without any extra elements; the blur keeps both faint. */
|
||||
@@ -256,8 +266,8 @@ body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bg-nature.depth-mid #bamboo-mid .bamboo-stalk { filter: blur(3.5px); }
|
||||
.bg-nature.depth-deep #bamboo-mid .bamboo-stalk { filter: blur(4.5px); }
|
||||
.bg-nature.depth-mid #bamboo-mid .bamboo-stalk { filter: blur(3px); }
|
||||
.bg-nature.depth-deep #bamboo-mid .bamboo-stalk { filter: blur(4px); }
|
||||
|
||||
@keyframes bambooSwayHalf {
|
||||
0%, 100% { transform: rotate(0); }
|
||||
@@ -274,20 +284,20 @@ body {
|
||||
#bamboo-near .bamboo-stalk {
|
||||
position: absolute;
|
||||
top: -70%;
|
||||
height: 240%;
|
||||
height: 200%;
|
||||
border-radius: 999px;
|
||||
/* Vertical sheen over the culm gradient: reads as light from the
|
||||
canopy catching the rounded stalk instead of a flat strip. */
|
||||
background:
|
||||
linear-gradient(90deg, transparent 12%, oklch(0.62 0.08 145 / 0.18) 36%, transparent 64%),
|
||||
linear-gradient(180deg, oklch(0.4 0.07 145 / 0.55), oklch(0.26 0.05 140 / 0.25));
|
||||
linear-gradient(90deg, transparent 12%, oklch(0.64 0.08 145 / 0.22) 36%, transparent 64%),
|
||||
linear-gradient(180deg, oklch(0.42 0.075 145 / 0.6), oklch(0.27 0.05 140 / 0.3));
|
||||
transform-origin: bottom center;
|
||||
animation: bambooSway 10s ease-in-out infinite;
|
||||
}
|
||||
|
||||
#bamboo-near .near-1 { left: 4.5%; width: 13px; animation-duration: 9.2s; }
|
||||
#bamboo-near .near-2 { right: 7%; width: 11px; animation-duration: 11s; animation-delay: -3.5s; }
|
||||
#bamboo-near .near-3 { left: 10%; width: 9px; animation-duration: 12.5s; animation-delay: -6s; opacity: 0.75; }
|
||||
#bamboo-near .near-1 { left: 4.5%; width: 15px; animation-duration: 9.2s; }
|
||||
#bamboo-near .near-2 { right: 7%; width: 13px; animation-duration: 11s; animation-delay: -3.5s; }
|
||||
#bamboo-near .near-3 { left: 10%; width: 10px; animation-duration: 12.5s; animation-delay: -6s; opacity: 0.75; }
|
||||
|
||||
#bamboo-near .bamboo-node {
|
||||
position: absolute;
|
||||
@@ -295,7 +305,7 @@ body {
|
||||
right: -1px;
|
||||
height: 3px;
|
||||
border-radius: 2px;
|
||||
background: oklch(0.5 0.08 145 / 0.5);
|
||||
background: oklch(0.52 0.085 145 / 0.6);
|
||||
}
|
||||
|
||||
#bamboo-near .node-1 { top: 28%; }
|
||||
@@ -310,10 +320,11 @@ body {
|
||||
background: oklch(0.55 0.11 145 / 0.4);
|
||||
}
|
||||
|
||||
#bamboo-near .near-1 .leaf-1 { top: 27.5%; left: 10px; transform: rotate(18deg); }
|
||||
#bamboo-near .near-1 .leaf-1 { top: 27.5%; left: 12px; transform: rotate(18deg); }
|
||||
#bamboo-near .near-1 .leaf-2 { top: 47.5%; left: -28px; transform: rotate(-160deg); width: 22px; height: 10px; }
|
||||
#bamboo-near .near-2 .leaf-1 { top: 44%; left: -26px; transform: rotate(-155deg); }
|
||||
#bamboo-near .near-3 .leaf-1 { top: 33%; left: 7px; transform: rotate(24deg); width: 18px; height: 9px; }
|
||||
#bamboo-near .near-2 .leaf-2 { top: 61%; left: 11px; transform: rotate(21deg); width: 20px; height: 9px; }
|
||||
#bamboo-near .near-3 .leaf-1 { top: 33%; left: 8px; transform: rotate(24deg); width: 18px; height: 9px; }
|
||||
|
||||
@keyframes bambooSway {
|
||||
0%, 100% { transform: rotate(0); }
|
||||
@@ -724,6 +735,8 @@ html.theme-light .bg-nature::after {
|
||||
#bamboo-mid,
|
||||
#bamboo-far .far-4,
|
||||
#bamboo-far .far-5,
|
||||
#bamboo-far .far-6,
|
||||
#bamboo-far .far-7,
|
||||
#bamboo-near .near-3 {
|
||||
display: none;
|
||||
}
|
||||
@@ -1016,6 +1029,12 @@ html.theme-light .bg-grass {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
/* The centre trunks stay whisper-quiet by daylight too */
|
||||
html.theme-light #bamboo-far .far-6,
|
||||
html.theme-light #bamboo-far .far-7 {
|
||||
opacity: 0.26;
|
||||
}
|
||||
|
||||
html.theme-light .bg-mist {
|
||||
display: none;
|
||||
}
|
||||
@@ -2804,17 +2823,18 @@ input:checked + .mock-slider:before {
|
||||
/* Floating Success Badge */
|
||||
.illus-floating-success {
|
||||
position: absolute;
|
||||
bottom: -0.9rem;
|
||||
/* Fully below the card so the toast never straddles its border */
|
||||
bottom: -2.4rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: oklch(0.12 0.015 135 / 0.9);
|
||||
border: 1px solid oklch(0.68 0.13 150 / 0.3);
|
||||
background: oklch(0.12 0.015 135 / 0.92);
|
||||
border: 1px solid oklch(0.68 0.13 150 / 0.35);
|
||||
border-radius: 20px;
|
||||
padding: 2px 9px;
|
||||
padding: 3px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.4);
|
||||
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45), 0 0 12px oklch(0.68 0.13 150 / 0.18);
|
||||
animation: floating-success-fade 5s infinite;
|
||||
white-space: nowrap;
|
||||
z-index: 10;
|
||||
@@ -4932,9 +4952,11 @@ header[id] {
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
/* Cinematic vignette: soft edge falloff + heavier floor for the controls */
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0.05),
|
||||
inset 0 -24px 36px oklch(0.04 0.015 145 / 0.2);
|
||||
inset 0 0 34px oklch(0.04 0.015 145 / 0.32),
|
||||
inset 0 -26px 40px oklch(0.04 0.015 145 / 0.26);
|
||||
}
|
||||
|
||||
html.theme-light .hero-demo-scene .demo-video::after {
|
||||
@@ -5067,7 +5089,8 @@ html.theme-light .hero-demo-scene .demo-video::after {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.demo-time {
|
||||
.demo-time,
|
||||
.demo-duration {
|
||||
flex-shrink: 0;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-weight: 700;
|
||||
@@ -5075,6 +5098,35 @@ html.theme-light .hero-demo-scene .demo-video::after {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.demo-duration {
|
||||
font-weight: 600;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Decorative player chrome: play state glyph, volume, HD, fullscreen */
|
||||
.demo-ctrl-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.demo-ctrl-play .icon-pause { display: none; }
|
||||
.demo-tab-card.playing .demo-ctrl-play .icon-play { display: none; }
|
||||
.demo-tab-card.playing .demo-ctrl-play .icon-pause { display: block; }
|
||||
|
||||
.demo-ctrl-badge {
|
||||
flex-shrink: 0;
|
||||
font-size: 7px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.06em;
|
||||
line-height: 1;
|
||||
padding: 2px 3px;
|
||||
border: 1px solid currentColor;
|
||||
border-radius: 3px;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.demo-progress {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
@@ -5091,6 +5143,18 @@ html.theme-light .hero-demo-scene .demo-video::after {
|
||||
inset: -8px 0;
|
||||
}
|
||||
|
||||
/* Buffered range behind the playhead, like a real player */
|
||||
.demo-progress-buffer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 56%;
|
||||
border-radius: 99px;
|
||||
background: oklch(0.92 0.02 95 / 0.14);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.demo-progress-fill {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
@@ -5269,6 +5333,9 @@ html.theme-light .hero-demo-scene .demo-video::after {
|
||||
}
|
||||
|
||||
.hero-demo-scene .film-stars { fill: var(--demo-stars) !important; }
|
||||
.hero-demo-scene .film-clouds { fill: var(--demo-stars) !important; }
|
||||
.hero-demo-scene .film-mist-scroll { fill: var(--demo-stars) !important; }
|
||||
.hero-demo-scene .film-shooting-star { stroke: var(--demo-stars) !important; }
|
||||
.hero-demo-scene .film-moon {
|
||||
fill: var(--demo-moon) !important;
|
||||
filter: drop-shadow(0 0 6px var(--demo-moon));
|
||||
@@ -5277,6 +5344,9 @@ html.theme-light .hero-demo-scene .demo-video::after {
|
||||
.hero-demo-scene .film-mid-scroll > * { fill: var(--demo-midground) !important; }
|
||||
.hero-demo-scene .film-fore-scroll > * { fill: var(--demo-foreground) !important; }
|
||||
|
||||
/* By day the flock reads as silhouettes, not chalk marks */
|
||||
html.theme-light .hero-demo-scene .film-birds { stroke: oklch(0.32 0.06 145 / 0.65); }
|
||||
|
||||
/* Stars: staggered twinkle so the sky feels alive */
|
||||
.film-star {
|
||||
transform-box: fill-box;
|
||||
@@ -5295,7 +5365,30 @@ html.theme-light .hero-demo-scene .demo-video::after {
|
||||
50% { opacity: 1; transform: scale(1.15); }
|
||||
}
|
||||
|
||||
/* Moon: gentle glow pulse + slow arc drift */
|
||||
/* Moon: gentle glow pulse + slow arc drift. The drift lives on the wrapper
|
||||
group so the craters travel with the disc; the glow stays on the circle.
|
||||
(Step-3 uses a bare .film-moon without wrapper — filmMoon still covers it.) */
|
||||
.film-moon-g {
|
||||
transform-box: fill-box;
|
||||
transform-origin: center;
|
||||
animation: filmMoonDrift 6s ease-in-out infinite alternate;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.film-moon-g .film-moon {
|
||||
animation-name: filmMoonGlow;
|
||||
}
|
||||
|
||||
@keyframes filmMoonDrift {
|
||||
from { transform: translate(0, 0); }
|
||||
to { transform: translate(-6px, 3px); }
|
||||
}
|
||||
|
||||
@keyframes filmMoonGlow {
|
||||
from { filter: drop-shadow(0 0 4px oklch(0.95 0.01 100 / 0.5)); }
|
||||
to { filter: drop-shadow(0 0 10px oklch(0.95 0.01 100 / 0.95)); }
|
||||
}
|
||||
|
||||
.film-moon {
|
||||
transform-box: fill-box;
|
||||
transform-origin: center;
|
||||
@@ -5317,12 +5410,29 @@ html.theme-light .hero-demo-scene .demo-video::after {
|
||||
.film-fore-scroll {
|
||||
transform: translateX(var(--scroll-fore, 0px));
|
||||
}
|
||||
/* Floating lantern: the group rides the JS-driven drift vars so halo and
|
||||
light travel together; the glow stays cheap via a single drop-shadow. */
|
||||
.film-lantern-g {
|
||||
transform: translate(var(--lantern-x, 0px), var(--bounce-y, 0px));
|
||||
}
|
||||
|
||||
.film-bounce-ball {
|
||||
transform-origin: bottom center;
|
||||
transform: translateY(var(--bounce-y, 0px));
|
||||
filter: drop-shadow(0 0 4px oklch(0.72 0.13 50));
|
||||
}
|
||||
|
||||
.film-lantern-halo {
|
||||
transform-box: fill-box;
|
||||
transform-origin: center;
|
||||
animation: filmHaloPulse 2.6s ease-in-out infinite alternate;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
@keyframes filmHaloPulse {
|
||||
from { transform: scale(0.85); opacity: 0.12; }
|
||||
to { transform: scale(1.18); opacity: 0.22; }
|
||||
}
|
||||
|
||||
/* Twinkle & Glow play state bindings */
|
||||
.film-star {
|
||||
transform-box: fill-box;
|
||||
@@ -5330,11 +5440,58 @@ html.theme-light .hero-demo-scene .demo-video::after {
|
||||
animation: filmTwinkle 2.8s ease-in-out infinite;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.demo-tab-card.playing .film-star,
|
||||
.demo-tab-card.playing .film-moon {
|
||||
.demo-tab-card.playing :is(.film-star, .film-moon, .film-moon-g, .film-cloud, .film-shooting-star, .film-birds, .film-lantern-halo) {
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
/* Drifting clouds: gentle back-and-forth so there is no wrap pop */
|
||||
.film-cloud {
|
||||
transform-box: fill-box;
|
||||
animation: filmCloudDrift 26s ease-in-out infinite alternate;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.film-cloud-2 {
|
||||
animation-duration: 34s;
|
||||
animation-delay: -12s;
|
||||
}
|
||||
|
||||
@keyframes filmCloudDrift {
|
||||
from { transform: translateX(-6px); }
|
||||
to { transform: translateX(10px); }
|
||||
}
|
||||
|
||||
/* A shooting star streaks across the sky every few loops */
|
||||
.film-shooting-star {
|
||||
opacity: 0;
|
||||
animation: filmShoot 11s linear infinite;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
@keyframes filmShoot {
|
||||
0%, 87% { opacity: 0; transform: translate(0, 0); }
|
||||
89% { opacity: 0.9; }
|
||||
95%, 100% { opacity: 0; transform: translate(-46px, 20px); }
|
||||
}
|
||||
|
||||
/* A distant flock crosses the valley, fading out mid-flight */
|
||||
.film-birds {
|
||||
animation: filmBirds 16s linear infinite;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
@keyframes filmBirds {
|
||||
0% { transform: translate(0, 0); opacity: 0; }
|
||||
4% { opacity: 0.75; }
|
||||
42% { opacity: 0.75; }
|
||||
48%, 100% { transform: translate(185px, -12px); opacity: 0; }
|
||||
}
|
||||
|
||||
/* Valley mist rides the slow background parallax between tree layers */
|
||||
.film-mist-scroll {
|
||||
transform: translateX(var(--scroll-back, 0px));
|
||||
}
|
||||
|
||||
/* Play button pulsing indicator at the end of the walkthrough */
|
||||
.hero-demo-scene.demo-complete #demo-tab-a:not(.playing) .demo-icon-wrap {
|
||||
animation: playButtonPulse 1.6s ease-in-out infinite;
|
||||
|
||||
+90
-7
@@ -234,6 +234,8 @@
|
||||
<span class="bamboo-stalk far-3"></span>
|
||||
<span class="bamboo-stalk far-4"></span>
|
||||
<span class="bamboo-stalk far-5"></span>
|
||||
<span class="bamboo-stalk far-6"></span>
|
||||
<span class="bamboo-stalk far-7"></span>
|
||||
</div>
|
||||
<div id="bamboo-mid">
|
||||
<span class="bamboo-stalk mid-1"></span>
|
||||
@@ -254,6 +256,7 @@
|
||||
<i class="bamboo-node node-2"></i>
|
||||
<i class="bamboo-node node-3"></i>
|
||||
<i class="bamboo-leaf leaf-1"></i>
|
||||
<i class="bamboo-leaf leaf-2"></i>
|
||||
</div>
|
||||
<div class="bamboo-stalk near-3">
|
||||
<i class="bamboo-node node-1"></i>
|
||||
@@ -420,6 +423,16 @@
|
||||
<div class="demo-video-art" aria-hidden="true"></div>
|
||||
<div class="demo-seek-sweep" aria-hidden="true"></div>
|
||||
<svg class="demo-film" viewBox="0 0 160 90" preserveAspectRatio="xMidYMid slice" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<g class="film-clouds" fill="#f0efe7">
|
||||
<g class="film-cloud film-cloud-1" opacity="0.09">
|
||||
<ellipse cx="34" cy="15" rx="17" ry="3"/>
|
||||
<ellipse cx="42" cy="12" rx="9" ry="2.1"/>
|
||||
</g>
|
||||
<g class="film-cloud film-cloud-2" opacity="0.07">
|
||||
<ellipse cx="100" cy="21" rx="13" ry="2.4"/>
|
||||
<ellipse cx="107" cy="19" rx="7" ry="1.7"/>
|
||||
</g>
|
||||
</g>
|
||||
<g class="film-stars" fill="#dbd7cd">
|
||||
<circle class="film-star" cx="18" cy="14" r="0.8"/>
|
||||
<circle class="film-star" cx="42" cy="24" r="0.6"/>
|
||||
@@ -429,8 +442,27 @@
|
||||
<circle class="film-star" cx="134" cy="22" r="0.8"/>
|
||||
<circle class="film-star" cx="150" cy="12" r="0.5"/>
|
||||
</g>
|
||||
<circle class="film-moon" cx="122" cy="26" r="7.5" fill="#f0efe7" opacity="0.92"/>
|
||||
<line class="film-shooting-star" x1="151" y1="6" x2="143" y2="9.5" stroke="#f0efe7" stroke-width="0.6" stroke-linecap="round"/>
|
||||
<g class="film-moon-g">
|
||||
<circle class="film-moon" cx="122" cy="26" r="7.5" fill="#f0efe7" opacity="0.92"/>
|
||||
<g class="film-moon-detail" fill="#10190e" opacity="0.1">
|
||||
<circle cx="119.6" cy="24.2" r="1.7"/>
|
||||
<circle cx="124.6" cy="28.4" r="1.15"/>
|
||||
<circle cx="123" cy="22.4" r="0.8"/>
|
||||
</g>
|
||||
</g>
|
||||
<g class="film-birds" stroke="#dbd7cd" stroke-width="0.55" fill="none" stroke-linecap="round">
|
||||
<path d="M-4,32 q1.5,-1.5 3,0 q1.5,-1.5 3,0"/>
|
||||
<path d="M-11,28 q1.2,-1.2 2.4,0 q1.2,-1.2 2.4,0"/>
|
||||
<path d="M-8,36 q1,-1 2,0 q1,-1 2,0"/>
|
||||
</g>
|
||||
<path class="film-mtn-scroll" d="M0,60 L30,45 L70,55 L110,40 L160,60 L190,45 L230,55 L270,40 L320,60 L320,92 L0,92 Z" fill="rgba(14, 31, 15, 0.7)"/>
|
||||
<g class="film-mist-scroll" fill="#dbd7cd">
|
||||
<ellipse cx="40" cy="63" rx="46" ry="4" opacity="0.055"/>
|
||||
<ellipse cx="120" cy="65" rx="52" ry="4.5" opacity="0.045"/>
|
||||
<ellipse cx="200" cy="63" rx="46" ry="4" opacity="0.055"/>
|
||||
<ellipse cx="280" cy="65" rx="52" ry="4.5" opacity="0.045"/>
|
||||
</g>
|
||||
<g class="film-mid-scroll">
|
||||
<polygon points="20,76 26,60 32,76" fill="rgba(26, 47, 23, 0.55)"/>
|
||||
<polygon points="55,78 63,52 71,78" fill="rgba(26, 47, 23, 0.55)"/>
|
||||
@@ -449,7 +481,10 @@
|
||||
<polygon points="275,84 288,42 301,84" fill="#040903"/>
|
||||
<path d="M0,84 Q80,82 160,84 T320,84 L320,92 L0,92 Z" fill="#040903"/>
|
||||
</g>
|
||||
<circle class="film-bounce-ball" cx="80" cy="46" r="3.5" fill="#de7949"/>
|
||||
<g class="film-lantern-g">
|
||||
<circle class="film-lantern-halo" cx="80" cy="38" r="6.5" fill="#de7949" opacity="0.16"/>
|
||||
<circle class="film-bounce-ball" cx="80" cy="38" r="2.4" fill="#de7949"/>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="demo-play-overlay" aria-hidden="true">
|
||||
<span class="demo-icon-wrap">
|
||||
@@ -458,8 +493,16 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="demo-video-controls">
|
||||
<span class="demo-ctrl-icon demo-ctrl-play" aria-hidden="true">
|
||||
<svg class="icon-play" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="11" height="11"><path d="M8 5v14l11-7z"/></svg>
|
||||
<svg class="icon-pause" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="11" height="11"><path d="M6 5h4v14H6zM14 5h4v14h-4z"/></svg>
|
||||
</span>
|
||||
<span class="demo-time">12:34</span>
|
||||
<div class="demo-progress" title="Seek: KoalaSync jumps the other tab to the same spot"><div class="demo-progress-fill"></div></div>
|
||||
<div class="demo-progress" title="Seek: KoalaSync jumps the other tab to the same spot"><div class="demo-progress-buffer"></div><div class="demo-progress-fill"></div></div>
|
||||
<span class="demo-duration" aria-hidden="true">42:17</span>
|
||||
<span class="demo-ctrl-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="11" height="11"><path d="M11 5 6 9H2v6h4l5 4V5z"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/></svg></span>
|
||||
<span class="demo-ctrl-badge" aria-hidden="true">HD</span>
|
||||
<span class="demo-ctrl-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="11" height="11"><path d="M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3"/></svg></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -477,6 +520,16 @@
|
||||
<div class="demo-video-art" aria-hidden="true"></div>
|
||||
<div class="demo-seek-sweep" aria-hidden="true"></div>
|
||||
<svg class="demo-film" viewBox="0 0 160 90" preserveAspectRatio="xMidYMid slice" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<g class="film-clouds" fill="#f0efe7">
|
||||
<g class="film-cloud film-cloud-1" opacity="0.09">
|
||||
<ellipse cx="34" cy="15" rx="17" ry="3"/>
|
||||
<ellipse cx="42" cy="12" rx="9" ry="2.1"/>
|
||||
</g>
|
||||
<g class="film-cloud film-cloud-2" opacity="0.07">
|
||||
<ellipse cx="100" cy="21" rx="13" ry="2.4"/>
|
||||
<ellipse cx="107" cy="19" rx="7" ry="1.7"/>
|
||||
</g>
|
||||
</g>
|
||||
<g class="film-stars" fill="#dbd7cd">
|
||||
<circle class="film-star" cx="18" cy="14" r="0.8"/>
|
||||
<circle class="film-star" cx="42" cy="24" r="0.6"/>
|
||||
@@ -486,8 +539,27 @@
|
||||
<circle class="film-star" cx="134" cy="22" r="0.8"/>
|
||||
<circle class="film-star" cx="150" cy="12" r="0.5"/>
|
||||
</g>
|
||||
<circle class="film-moon" cx="122" cy="26" r="7.5" fill="#f0efe7" opacity="0.92"/>
|
||||
<line class="film-shooting-star" x1="151" y1="6" x2="143" y2="9.5" stroke="#f0efe7" stroke-width="0.6" stroke-linecap="round"/>
|
||||
<g class="film-moon-g">
|
||||
<circle class="film-moon" cx="122" cy="26" r="7.5" fill="#f0efe7" opacity="0.92"/>
|
||||
<g class="film-moon-detail" fill="#10190e" opacity="0.1">
|
||||
<circle cx="119.6" cy="24.2" r="1.7"/>
|
||||
<circle cx="124.6" cy="28.4" r="1.15"/>
|
||||
<circle cx="123" cy="22.4" r="0.8"/>
|
||||
</g>
|
||||
</g>
|
||||
<g class="film-birds" stroke="#dbd7cd" stroke-width="0.55" fill="none" stroke-linecap="round">
|
||||
<path d="M-4,32 q1.5,-1.5 3,0 q1.5,-1.5 3,0"/>
|
||||
<path d="M-11,28 q1.2,-1.2 2.4,0 q1.2,-1.2 2.4,0"/>
|
||||
<path d="M-8,36 q1,-1 2,0 q1,-1 2,0"/>
|
||||
</g>
|
||||
<path class="film-mtn-scroll" d="M0,60 L30,45 L70,55 L110,40 L160,60 L190,45 L230,55 L270,40 L320,60 L320,92 L0,92 Z" fill="rgba(14, 31, 15, 0.7)"/>
|
||||
<g class="film-mist-scroll" fill="#dbd7cd">
|
||||
<ellipse cx="40" cy="63" rx="46" ry="4" opacity="0.055"/>
|
||||
<ellipse cx="120" cy="65" rx="52" ry="4.5" opacity="0.045"/>
|
||||
<ellipse cx="200" cy="63" rx="46" ry="4" opacity="0.055"/>
|
||||
<ellipse cx="280" cy="65" rx="52" ry="4.5" opacity="0.045"/>
|
||||
</g>
|
||||
<g class="film-mid-scroll">
|
||||
<polygon points="20,76 26,60 32,76" fill="rgba(26, 47, 23, 0.55)"/>
|
||||
<polygon points="55,78 63,52 71,78" fill="rgba(26, 47, 23, 0.55)"/>
|
||||
@@ -506,7 +578,10 @@
|
||||
<polygon points="275,84 288,42 301,84" fill="#040903"/>
|
||||
<path d="M0,84 Q80,82 160,84 T320,84 L320,92 L0,92 Z" fill="#040903"/>
|
||||
</g>
|
||||
<circle class="film-bounce-ball" cx="80" cy="46" r="3.5" fill="#de7949"/>
|
||||
<g class="film-lantern-g">
|
||||
<circle class="film-lantern-halo" cx="80" cy="38" r="6.5" fill="#de7949" opacity="0.16"/>
|
||||
<circle class="film-bounce-ball" cx="80" cy="38" r="2.4" fill="#de7949"/>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="demo-play-overlay" aria-hidden="true">
|
||||
<span class="demo-icon-wrap">
|
||||
@@ -515,8 +590,16 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="demo-video-controls">
|
||||
<span class="demo-ctrl-icon demo-ctrl-play" aria-hidden="true">
|
||||
<svg class="icon-play" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="11" height="11"><path d="M8 5v14l11-7z"/></svg>
|
||||
<svg class="icon-pause" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="11" height="11"><path d="M6 5h4v14H6zM14 5h4v14h-4z"/></svg>
|
||||
</span>
|
||||
<span class="demo-time">12:34</span>
|
||||
<div class="demo-progress" title="Seek: KoalaSync jumps the other tab to the same spot"><div class="demo-progress-fill"></div></div>
|
||||
<div class="demo-progress" title="Seek: KoalaSync jumps the other tab to the same spot"><div class="demo-progress-buffer"></div><div class="demo-progress-fill"></div></div>
|
||||
<span class="demo-duration" aria-hidden="true">42:17</span>
|
||||
<span class="demo-ctrl-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="11" height="11"><path d="M11 5 6 9H2v6h4l5 4V5z"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/></svg></span>
|
||||
<span class="demo-ctrl-badge" aria-hidden="true">HD</span>
|
||||
<span class="demo-ctrl-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="11" height="11"><path d="M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3"/></svg></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-tab-toast" id="demo-toast-b" data-joined="{{DEMO_JOINED}}" data-selected="{{DEMO_TAB_SELECTED}}" aria-hidden="true"></div>
|
||||
@@ -598,7 +681,7 @@
|
||||
</label>
|
||||
<select class="mock-input" id="demo-video-select" style="width: 100%; box-sizing: border-box; background: var(--card); border: 1px solid #2f3625; color: white; padding: 8px; border-radius: 8px; font-family: inherit; font-size: 0.75rem; outline: none; cursor: default;">
|
||||
<option value="" class="demo-select-placeholder" selected hidden>{{DEMO_SELECT_PLACEHOLDER}}</option>
|
||||
<option><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> <span class="demo-title-text-ep1">Stranger Things - S4E1</span></option>
|
||||
<option class="demo-title-text-ep1">Stranger Things - S4E1</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user