gsadmin/KoalaSync
1
0
Fork 0
mirror of https://github.com/Shik3i/KoalaSync.git synced 2026-07-26 12:08:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Redesign website and extension with koala nature theme

Browse Source 
v3.0.0 "The Greens Update" palette: forest-green oklch color system
(accent green + terracotta secondary) replaces the indigo/slate scheme
across the landing page and the extension popup/options. The blob
background becomes an animated bamboo forest overlay (parallax stalks,
falling leaves, canopy, ground mist, fireflies, light sweep, grain)
with prefers-reduced-motion support. Layout, structure and copy are
unchanged.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
KoalaDev
2026-07-10 19:18:40 +02:00
parent 05246ac485
commit aa52d319e1
21 changed files with 1611 additions and 715 deletions
Download Patch File Download Diff File Expand all files Collapse all files
extension/audio-options.css
+29 -14
View File
@@ -1,12 +1,27 @@
:root {
--bg: #0f172a;
--card: #1e293b;
--panel: #172033;
--accent: #6366f1;
--accent-hover: #818cf8;
--text: #f8fafc;
--text-muted: #94a3b8;
--border: #334155;
/* v3.0.0 "The Greens Update" nature palette (shared with the website) */
--bg-base: oklch(0.20 0.025 140);
--surface: oklch(0.27 0.035 130);
--surface-deep: oklch(0.16 0.025 135);
--surface-alt: oklch(0.23 0.03 130);
--border-soft: rgba(255, 255, 255, 0.06);
--border-strong: oklch(0.32 0.03 125);
--text-primary: oklch(0.96 0.01 90);
--text-secondary: oklch(0.78 0.02 90);
--accent-green: oklch(0.68 0.13 150);
--accent-green-hover: oklch(0.75 0.13 150);
--accent-terracotta: oklch(0.62 0.14 45);
--danger: oklch(0.55 0.15 25);
--text-on-green: oklch(0.14 0.02 90);
--bg: var(--bg-base);
--card: var(--surface);
--panel: var(--surface-alt);
--accent: var(--accent-green);
--accent-hover: var(--accent-green-hover);
--text: var(--text-primary);
--text-muted: var(--text-secondary);
--border: var(--border-strong);
--radius: 8px;
}
@@ -125,12 +140,12 @@ h2 {
transition: border-color 0.2s, box-shadow 0.2s;
}
.preset-card:hover {
border-color: rgba(99, 102, 241, 0.4);
border-color: rgba(86, 174, 108, 0.4);
}
.preset-card:has(input:checked) {
border-color: var(--accent);
box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.35);
box-shadow: 0 0 0 1px rgba(86, 174, 108, 0.35);
}
.preset-card input {
@@ -141,8 +156,8 @@ h2 {
display: grid;
gap: 12px;
padding: 16px;
background: rgba(15, 23, 42, 0.58);
border: 1px solid rgba(148, 163, 184, 0.16);
background: rgba(16, 25, 14, 0.58);
border: 1px solid rgba(163, 162, 148, 0.16);
border-radius: var(--radius);
transition: opacity 0.3s;
}
@@ -204,7 +219,7 @@ input[type="number"]:focus {
position: absolute;
cursor: pointer;
inset: 0;
background-color: #334155;
background-color: var(--border-strong);
transition: .3s;
border-radius: 22px;
}
@@ -216,7 +231,7 @@ input[type="number"]:focus {
width: 16px;
left: 3px;
bottom: 3px;
background-color: #94a3b8;
background-color: var(--text-secondary);
transition: .3s;
border-radius: 50%;
}
extension/content.js
+1 -1
View File
@@ -430,7 +430,7 @@
if (Date.now() - hcmLastUserGestureAt > HCM_USER_GESTURE_MS) return 'involuntary';
return 'deliberate';
return 'deliberate';
}
extension/popup.html
+62 -47
View File
@@ -12,14 +12,29 @@
}
:root {
--bg: #0f172a;
--card: #1e293b;
--accent: #6366f1;
--accent-hover: #818cf8;
--text: #f8fafc;
--text-muted: #94a3b8;
--success: #22c55e;
--error: #ef4444;
/* v3.0.0 "The Greens Update" nature palette (shared with the website) */
--bg-base: oklch(0.20 0.025 140);
--surface: oklch(0.27 0.035 130);
--surface-deep: oklch(0.16 0.025 135);
--surface-alt: oklch(0.23 0.03 130);
--border-soft: rgba(255, 255, 255, 0.06);
--border-strong: oklch(0.32 0.03 125);
--text-primary: oklch(0.96 0.01 90);
--text-secondary: oklch(0.78 0.02 90);
--accent-green: oklch(0.68 0.13 150);
--accent-green-hover: oklch(0.75 0.13 150);
--accent-terracotta: oklch(0.62 0.14 45);
--danger: oklch(0.55 0.15 25);
--text-on-green: oklch(0.14 0.02 90);
--bg: var(--surface-deep);
--card: var(--surface);
--accent: var(--accent-green);
--accent-hover: var(--accent-green-hover);
--text: var(--text-primary);
--text-muted: var(--text-secondary);
--success: var(--accent-green);
--error: var(--danger);
--radius: 12px;
--star: #fbbf24;
}
@@ -103,7 +118,7 @@
.tab-btn.active {
background: var(--accent);
color: white;
color: var(--text-on-green);
}
.tab-content {
@@ -138,7 +153,7 @@
width: 100%;
box-sizing: border-box;
background: var(--card);
border: 1px solid #334155;
border: 1px solid var(--border-strong);
color: white;
padding: 10px;
border-radius: 8px;
@@ -153,7 +168,7 @@
}
#langSelector::picker(select) {
background-color: var(--bg);
border: 1px solid #334155;
border: 1px solid var(--border-strong);
border-radius: 8px;
padding: 4px;
font-family: 'Twemoji Country Flags', inherit;
@@ -162,7 +177,7 @@
input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
box-shadow: 0 0 0 2px rgba(86, 174, 108, 0.2);
}
button.primary {
@@ -170,7 +185,7 @@
padding: 12px;
background: var(--accent);
border: none;
color: white;
color: var(--text-on-green);
font-weight: 700;
border-radius: 8px;
cursor: pointer;
@@ -186,7 +201,7 @@
button.secondary {
width: 100%;
padding: 10px;
background: #334155;
background: var(--border-strong);
border: none;
color: white;
font-weight: 600;
@@ -201,12 +216,12 @@
padding: 12px;
border-radius: 8px;
margin-bottom: 12px;
border: 1px solid #334155;
border: 1px solid var(--border-strong);
}
.peer-item {
padding: 8px 0;
border-bottom: 1px solid #334155;
border-bottom: 1px solid var(--border-strong);
}
.peer-item:last-child { border: 0; }
@@ -271,9 +286,9 @@
animation: toastSlideIn 0.3s ease-out, toastFadeOut 0.3s ease-in 2.7s forwards;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.toast-success { background: var(--success); color: white; }
.toast-success { background: var(--success); color: var(--text-on-green); }
.toast-error { background: var(--error); color: white; }
.toast-info { background: var(--accent); color: white; }
.toast-info { background: var(--accent); color: var(--text-on-green); }
.toast-warning { background: #f59e0b; color: white; }
@keyframes toastSlideIn {
@@ -309,7 +324,7 @@
position: absolute;
cursor: pointer;
top: 0; left: 0; right: 0; bottom: 0;
background-color: #334155;
background-color: var(--border-strong);
transition: .3s;
border-radius: 20px;
}
@@ -320,7 +335,7 @@
width: 14px;
left: 3px;
bottom: 3px;
background-color: #94a3b8;
background-color: #a3a294;
transition: .3s;
border-radius: 50%;
}
@@ -365,8 +380,8 @@
50% { opacity: 1; transform: scale(1.3); }
}
@keyframes spotlightPulse {
0%, 100% { box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.65), 0 0 0 0px var(--accent); }
50% { box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.65), 0 0 0 6px var(--accent); }
0%, 100% { box-shadow: 0 0 0 9999px rgba(16, 25, 14, 0.65), 0 0 0 0px var(--accent); }
50% { box-shadow: 0 0 0 9999px rgba(16, 25, 14, 0.65), 0 0 0 6px var(--accent); }
}
@keyframes floatHint {
0%, 100% { transform: translateY(0); }
@@ -399,12 +414,12 @@
<!-- JOIN SECTION: Visible when not in a room -->
<div id="section-join">
<button id="createRoomBtn" class="primary" style="margin-bottom: 16px; padding: 14px; font-size: 15px; background: linear-gradient(135deg, #6366f1, #a855f7); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);" data-i18n="BTN_CREATE_ROOM">+ Create New Room</button>
<details style="margin-bottom: 12px; background: var(--card); border: 1px solid #334155; border-radius: 8px; padding: 8px;">
<button id="createRoomBtn" class="primary" style="margin-bottom: 16px; padding: 14px; font-size: 15px; background: linear-gradient(135deg, var(--accent-green), var(--accent-terracotta)); color: var(--text-on-green); box-shadow: 0 4px 12px rgba(86, 174, 108, 0.4);" data-i18n="BTN_CREATE_ROOM">+ Create New Room</button>
<details style="margin-bottom: 12px; background: var(--card); border: 1px solid var(--border-strong); border-radius: 8px; padding: 8px;">
<summary style="font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; cursor: pointer; outline: none;" data-i18n="MANUAL_CONNECT_HEADER">Manual Connect / Advanced</summary>
<div style="margin-top: 12px;">
<!-- Server selection — its own concern, kept visually separate from the room fields. -->
<div style="background: var(--bg); border: 1px solid #334155; border-radius: 8px; padding: 10px; margin-bottom: 14px;">
<div style="background: var(--bg); border: 1px solid var(--border-strong); border-radius: 8px; padding: 10px; margin-bottom: 14px;">
<div class="form-group" style="margin-bottom:0;">
<label title="Select which KoalaSync server to use" data-i18n="LABEL_SERVER">Server</label>
<div style="display:flex; gap:4px; margin-bottom:0;">
@@ -458,7 +473,7 @@
<div id="hostControlCard" class="info-card" style="margin-bottom: 20px; display:none;">
<div style="display:flex; justify-content:space-between; align-items:center;">
<label style="margin:0;" title="Restrict who can control playback in this room" data-i18n="LABEL_HOST_CONTROL" data-i18n-title="LABEL_HOST_CONTROL_TOOLTIP">Host Control</label>
<span id="hostRoleBadge" style="font-size:10px; font-weight:700; text-transform:uppercase; padding:2px 8px; border-radius:8px; background:var(--accent); color:#fff;"></span>
<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>
@@ -467,7 +482,7 @@
<span class="slider"></span>
</label>
</div>
<div id="hostControlCohostHint" style="display:none; margin-top:10px; padding-top:10px; border-top:1px solid #334155; font-size:11px; color:var(--text-muted); line-height:1.4;" data-i18n="NOTICE_COHOST_HINT">Tip: grant control to individual viewers in the participant list below.</div>
<div id="hostControlCohostHint" style="display:none; margin-top:10px; padding-top:10px; border-top:1px solid var(--border-strong); font-size:11px; color:var(--text-muted); line-height:1.4;" data-i18n="NOTICE_COHOST_HINT">Tip: grant control to individual viewers in the participant list below.</div>
<div id="hostControlGuestNote" style="display:none; margin-top:10px; font-size:12px; color:var(--text-muted);" data-i18n="NOTICE_HOST_CONTROLS">The host controls playback for everyone.</div>
</div>
@@ -492,7 +507,7 @@
<option value="" data-i18n="OPTION_SELECT_TAB">-- Select a Tab --</option>
</select>
<!-- Hint Tooltip -->
<div id="targetTabHint" style="display: none; position: absolute; top: -25px; right: 0; background: var(--accent); color: white; padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: bold; pointer-events: none; animation: floatHint 2s ease-in-out infinite; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); z-index: 10;" data-i18n="HINT_SELECT_VIDEO">
<div id="targetTabHint" style="display: none; position: absolute; top: -25px; right: 0; background: var(--accent); color: var(--text-on-green); padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: bold; pointer-events: none; animation: floatHint 2s ease-in-out infinite; box-shadow: 0 4px 12px rgba(86, 174, 108, 0.4); z-index: 10;" data-i18n="HINT_SELECT_VIDEO">
Select your video here!
<div style="position: absolute; bottom: -4px; right: 20px; width: 8px; height: 8px; background: var(--accent); transform: rotate(45deg);"></div>
</div>
@@ -500,16 +515,16 @@
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
<label style="margin: 0;" data-i18n="LABEL_REMOTE_CONTROL">Remote Control</label>
<button id="syncTabCopyInvite" title="Copy Invite Link" style="background:transparent; border: 1px solid #334155; border-radius: 6px; padding: 4px 8px; font-size: 11px; cursor:pointer; opacity:0.8; transition: opacity 0.2s; color: var(--text-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap;" data-i18n="BTN_COPY_INVITE" data-i18n-title="BTN_COPY_INVITE_TOOLTIP">📋 Invite Link</button>
<button id="syncTabCopyInvite" title="Copy Invite Link" style="background:transparent; border: 1px solid var(--border-strong); border-radius: 6px; padding: 4px 8px; font-size: 11px; cursor:pointer; opacity:0.8; transition: opacity 0.2s; color: var(--text-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap;" data-i18n="BTN_COPY_INVITE" data-i18n-title="BTN_COPY_INVITE_TOOLTIP">📋 Invite Link</button>
</div>
<div style="display: flex; gap: 8px; margin-bottom: 12px;">
<button id="playBtn" class="primary" style="flex:1; background: var(--success);" title="Send a Play command to everyone" data-i18n="BTN_PLAY" data-i18n-title="BTN_PLAY_TOOLTIP">▶ Play</button>
<button id="pauseBtn" class="primary" style="flex:1; background: var(--error);" title="Send a Pause command to everyone" data-i18n="BTN_PAUSE" data-i18n-title="BTN_PAUSE_TOOLTIP">⏸ Pause</button>
<button id="pauseBtn" class="primary" style="flex:1; background: var(--error); color: #fff;" title="Send a Pause command to everyone" data-i18n="BTN_PAUSE" data-i18n-title="BTN_PAUSE_TOOLTIP">⏸ Pause</button>
</div>
<div style="display: flex; gap: 8px; margin-bottom: 15px; align-items: stretch;">
<button id="forceSyncBtn" class="primary" style="background: linear-gradient(135deg, #6366f1, #a855f7); flex: 1;" title="Force all users to sync up" data-i18n="BTN_SYNC" data-i18n-title="BTN_SYNC_TOOLTIP">⚡ SYNC</button>
<select id="forceSyncMode" style="flex: 1; background: var(--card); border: 1px solid #334155; color: white; padding: 10px 8px; border-radius: 8px; font-size: 11px; font-family: inherit; cursor: pointer; align-self: stretch;" title="Choose sync target" data-i18n-title="OPTION_JUMP_MODE_TOOLTIP">
<button id="forceSyncBtn" class="primary" style="background: linear-gradient(135deg, var(--accent-green), var(--accent-terracotta)); color: var(--text-on-green); flex: 1;" title="Force all users to sync up" data-i18n="BTN_SYNC" data-i18n-title="BTN_SYNC_TOOLTIP">⚡ SYNC</button>
<select id="forceSyncMode" style="flex: 1; background: var(--card); border: 1px solid var(--border-strong); color: white; padding: 10px 8px; border-radius: 8px; font-size: 11px; font-family: inherit; cursor: pointer; align-self: stretch;" title="Choose sync target" data-i18n-title="OPTION_JUMP_MODE_TOOLTIP">
<option value="jump-to-others" data-i18n="OPTION_JUMP_TO_OTHERS">Jump to Others</option>
<option value="jump-to-me" data-i18n="OPTION_JUMP_TO_ME">Jump to Me</option>
</select>
@@ -540,18 +555,18 @@
<div style="font-size: 32px; margin-bottom: 12px;">🔒</div>
<h3 style="margin: 0 0 8px 0; color: var(--accent); font-size: 15px;" data-i18n="LOBBY_CONNECT_FIRST">Connect to a room first</h3>
<p style="color: var(--text-muted); font-size: 12px; margin-bottom: 20px;" data-i18n="LOBBY_CONNECT_FIRST_DESC">You need to join a room via an invite link or create a new one to sync videos.</p>
<button id="syncTabCreateRoomBtn" class="primary" style="padding: 12px; font-size: 14px; background: linear-gradient(135deg, #6366f1, #a855f7); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);" title="Create a new random room and join it" data-i18n="BTN_CREATE_ROOM_ALT" data-i18n-title="BTN_CREATE_ROOM_ALT_TOOLTIP">Create New Room</button>
<button id="syncTabCreateRoomBtn" class="primary" style="padding: 12px; font-size: 14px; background: linear-gradient(135deg, var(--accent-green), var(--accent-terracotta)); color: var(--text-on-green); box-shadow: 0 4px 12px rgba(86, 174, 108, 0.4);" title="Create a new random room and join it" data-i18n="BTN_CREATE_ROOM_ALT" data-i18n-title="BTN_CREATE_ROOM_ALT_TOOLTIP">Create New Room</button>
</div>
</div>
<!-- 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 #334155;">
<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>
<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 #334155;">
<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>
@@ -562,7 +577,7 @@
</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>
<select id="mediaTitlePrivacyMode" style="width: 165px; background: var(--bg); border: 1px solid #334155; color: white; padding: 6px 10px; border-radius: 8px; font-size: 12px; cursor: pointer; outline: none; font-family: inherit;">
<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>
<option value="hidden" data-i18n="OPTION_TITLE_PRIVACY_HIDDEN">Do not send</option>
@@ -570,7 +585,7 @@
</div>
</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 #334155;">
<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 class="toggle-switch">
<input type="checkbox" id="filterNoise" checked>
@@ -578,7 +593,7 @@
</label>
</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 #334155;">
<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 class="toggle-switch">
<input type="checkbox" id="autoSyncNextEpisode">
@@ -586,7 +601,7 @@
</label>
</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 #334155;">
<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 class="toggle-switch">
<input type="checkbox" id="autoCopyInvite" checked>
@@ -594,7 +609,7 @@
</label>
</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 #334155;">
<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 class="toggle-switch">
<input type="checkbox" id="browserNotifications">
@@ -602,16 +617,16 @@
</label>
</div>
<div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px 12px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;">
<div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px 12px; border-radius: 8px; margin-bottom: 12px; border: 1px solid var(--border-strong);">
<div style="display: flex; align-items: center; gap: 8px;">
<label id="audioProcessingLabel" style="margin-bottom: 0; cursor: help; white-space: nowrap; font-size: 13px;" data-i18n="LABEL_AUDIO_PROCESSING" data-i18n-title="LABEL_AUDIO_PROCESSING_TOOLTIP">Audio Processing</label>
</div>
<a id="audioSettingsLink" href="#" style="font-size: 11px; color: var(--accent); text-decoration: none; white-space: nowrap; background: rgba(99,102,241,0.12); padding: 5px 12px; border-radius: 6px; font-weight: 600; transition: background 0.2s;" data-i18n="AUDIO_OPEN_SETTINGS">Open</a>
<a id="audioSettingsLink" href="#" style="font-size: 11px; color: var(--accent); text-decoration: none; white-space: nowrap; background: rgba(86, 174, 108, 0.12); padding: 5px 12px; border-radius: 6px; font-weight: 600; transition: background 0.2s;" data-i18n="AUDIO_OPEN_SETTINGS">Open</a>
</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 #334155;">
<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>
<select id="langSelector" style="width: 165px; background: var(--bg); border: 1px solid #334155; color: white; padding: 6px 10px; border-radius: 8px; font-size: 13px; cursor: pointer; outline: none; font-family: inherit;">
<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>
<option value="fr">🇫🇷 Français</option>
@@ -710,10 +725,10 @@
<!-- Onboarding Overlay -->
<div id="onboarding-overlay" style="display:none; position:fixed; inset:0; background:transparent; z-index:1000; pointer-events:auto;">
<!-- Spotlight element -->
<div id="onboarding-spotlight" style="position:fixed; pointer-events:none; border:2px solid var(--accent); box-shadow:0 0 0 9999px rgba(15, 23, 42, 0.65); border-radius:8px; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display:none; opacity:0; z-index:1001; animation: spotlightPulse 2s infinite ease-in-out;"></div>
<div id="onboarding-spotlight" style="position:fixed; pointer-events:none; border:2px solid var(--accent); box-shadow:0 0 0 9999px rgba(16, 25, 14, 0.65); border-radius:8px; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display:none; opacity:0; z-index:1001; animation: spotlightPulse 2s infinite ease-in-out;"></div>
<!-- Onboarding Card -->
<div id="onboarding-card" style="position:fixed; background:var(--card); padding:16px 20px; border-radius:12px; width:280px; box-shadow:0 8px 32px rgba(0,0,0,0.5); z-index:1002; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-sizing:border-box; border:1px solid #334155; opacity:0; transform: scale(0.9); display:none;">
<div id="onboarding-card" style="position:fixed; background:var(--card); padding:16px 20px; border-radius:12px; width:280px; box-shadow:0 8px 32px rgba(0,0,0,0.5); z-index:1002; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-sizing:border-box; border:1px solid var(--border-strong); opacity:0; transform: scale(0.9); display:none;">
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;">
<span id="onboarding-icon" style="font-size:24px;">👋</span>
<span id="onboarding-step-indicator" style="font-size:10px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:0.5px;">Step 1 of 5</span>
@@ -722,7 +737,7 @@
<p id="onboarding-text" style="color:var(--text-muted); font-size:12px; margin:0 0 16px; line-height:1.4; text-align:left;">Let's get you started.</p>
<!-- Progress Bar -->
<div id="onboarding-progress-container" style="height:4px; background:#334155; border-radius:2px; margin-bottom:16px; overflow:hidden;">
<div id="onboarding-progress-container" style="height:4px; background: var(--border-strong); border-radius:2px; margin-bottom:16px; overflow:hidden;">
<div id="onboarding-progress-bar" style="height:100%; width:20%; background:var(--accent); transition:width 0.3s ease;"></div>
</div>
extension/popup.js
+13 -13
View File
@@ -529,7 +529,7 @@ function updateLastActionUI(state, peers) {
if (pId === localPeerId) return;
const pName = (typeof peer === 'object' && peer.username) ? peer.username : pId.substring(0, 4);
const isAcked = safeAcks.includes(pId) || pId === state.senderId;
const color = isAcked ? 'var(--success)' : '#475569';
const color = isAcked ? 'var(--success)' : '#4c5142';
const icon = isAcked ? '✓' : '...';
const avatar = getAvatarForName(pName);
@@ -1024,7 +1024,7 @@ function applyConnectionStatus(status) {
elements.connDot.style.background = '#9ca3af';
elements.connDot.style.boxShadow = 'none';
} else if (!connected) {
elements.connDot.style.background = '#ef4444';
elements.connDot.style.background = '#b94642';
elements.connDot.style.boxShadow = 'none';
} else {
elements.connDot.style.background = '';
@@ -1071,11 +1071,11 @@ function updatePingDisplay(pingMs) {
}
elements.connPing.textContent = `${Math.round(pingMs)}ms`;
if (pingMs < 50) {
elements.connPing.style.color = '#22c55e';
elements.connPing.style.color = '#56ae6c';
} else if (pingMs < 150) {
elements.connPing.style.color = '#f59e0b';
} else {
elements.connPing.style.color = '#ef4444';
elements.connPing.style.color = '#b94642';
}
}
@@ -1096,7 +1096,7 @@ function updateHistory(history) {
entry.style.cssText = 'margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 2px;';
const timeSpan = document.createElement('span');
timeSpan.style.color = '#64748b';
timeSpan.style.color = '#6b705e';
timeSpan.textContent = `[${time}] `;
const actionBold = document.createElement('b');
@@ -2259,7 +2259,7 @@ function refreshDebugInfo() {
const addSection = (title) => {
const div = document.createElement('div');
div.style.cssText = 'margin: 8px 0 4px 0; border-bottom: 1px solid #334155; padding-bottom: 2px; color: var(--accent); font-weight: bold; font-size: 10px; text-transform: uppercase;';
div.style.cssText = 'margin: 8px 0 4px 0; border-bottom: 1px solid #2f3625; padding-bottom: 2px; color: var(--accent); font-weight: bold; font-size: 10px; text-transform: uppercase;';
div.textContent = title;
elements.videoDebug.appendChild(div);
};
@@ -2268,7 +2268,7 @@ function refreshDebugInfo() {
// No video found — show diagnostic info
addSection('Video Detection');
const notFound = document.createElement('div');
notFound.style.cssText = 'color: #ef4444; font-weight: 700; margin-bottom: 8px;';
notFound.style.cssText = 'color: #b94642; font-weight: 700; margin-bottom: 8px;';
notFound.textContent = 'NO VIDEO ELEMENT FOUND';
elements.videoDebug.appendChild(notFound);
@@ -2294,12 +2294,12 @@ function refreshDebugInfo() {
// Video found — full debug
addSection('Playback');
addField('State', state.paused ? 'PAUSED' : 'PLAYING', state.paused ? 'var(--text-muted)' : '#22c55e');
addField('State', state.paused ? 'PAUSED' : 'PLAYING', state.paused ? 'var(--text-muted)' : '#56ae6c');
addField('Time', `${state.currentTime.toFixed(2)}s / ${(state.duration || 0).toFixed(2)}s`);
addField('ReadyState', `${state.readyState} (${state.readyStateLabel || '?'})`,
state.readyState >= 3 ? '#22c55e' : '#fbbf24');
state.readyState >= 3 ? '#56ae6c' : '#fbbf24');
addField('Network', `${state.networkState} (${state.networkStateLabel || '?'})`,
state.networkState === 1 ? '#22c55e' : state.networkState === 3 ? '#ef4444' : 'var(--text-muted)');
state.networkState === 1 ? '#56ae6c' : state.networkState === 3 ? '#b94642' : 'var(--text-muted)');
addField('Buffered', state.buffered || '?');
if (state.nativeCurrentTime != null || state.nativeDuration != null) {
addField('Native Time', `${state.nativeCurrentTime ?? '?'}s / ${state.nativeDuration ?? '?'}s`);
@@ -2323,7 +2323,7 @@ function refreshDebugInfo() {
addSection('Dimensions');
const dimsOk = state.videoWidth > 0 && state.videoHeight > 0;
addField('Resolution', `${state.videoWidth}x${state.videoHeight}`, dimsOk ? '#22c55e' : '#ef4444');
addField('Resolution', `${state.videoWidth}x${state.videoHeight}`, dimsOk ? '#56ae6c' : '#b94642');
if (!dimsOk) {
const dimHint = document.createElement('div');
dimHint.style.cssText = 'color: #fbbf24; font-size: 9px; margin: 2px 0 6px 12px;';
@@ -2333,8 +2333,8 @@ function refreshDebugInfo() {
if (state.error) {
addSection('Media Error');
addField('Code', String(state.error.code), '#ef4444');
addField('Message', state.error.message || '?', '#ef4444');
addField('Code', String(state.error.code), '#b94642');
addField('Message', state.error.message || '?', '#b94642');
}
addSection('Detection');
website/alternatives/index.html
+50 -5
View File
@@ -98,17 +98,62 @@
</script>
<!-- Mobile Browser Theme Styling -->
<meta name="theme-color" content="#0f172a">
<meta name="theme-color" content="#10190e">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<script src="{{ASSET_PATH}}lang-init.min.js"></script>
</head>
<body>
<div class="bg-blobs">
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<div class="blob blob-3"></div>
<div class="bg-nature" aria-hidden="true">
<div class="bg-canopy"></div>
<span class="canopy-arc canopy-arc-1"></span>
<span class="canopy-arc canopy-arc-2"></span>
<span class="canopy-arc canopy-arc-3"></span>
<span class="canopy-arc canopy-arc-4"></span>
<div id="bamboo-far">
<span class="bamboo-stalk far-1"></span>
<span class="bamboo-stalk far-2"></span>
<span class="bamboo-stalk far-3"></span>
</div>
<div id="bamboo-near">
<div class="bamboo-stalk near-1">
<i class="bamboo-node node-1"></i>
<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-2">
<i class="bamboo-node node-1"></i>
<i class="bamboo-node node-2"></i>
<i class="bamboo-node node-3"></i>
<i class="bamboo-leaf leaf-1"></i>
</div>
</div>
<span class="fall-leaf fall-leaf-1"><i></i></span>
<span class="fall-leaf fall-leaf-2"><i></i></span>
<span class="fall-leaf fall-leaf-3"><i></i></span>
<span class="fall-leaf fall-leaf-4"><i></i></span>
<span class="fall-leaf fall-leaf-5"><i></i></span>
<span class="fall-leaf fall-leaf-6"><i></i></span>
<span class="fall-leaf fall-leaf-7"><i></i></span>
<span class="fall-leaf fall-leaf-8"><i></i></span>
<span class="bg-grass bg-grass-1"></span>
<span class="bg-grass bg-grass-2"></span>
<span class="bg-grass bg-grass-3"></span>
<span class="bg-grass bg-grass-4"></span>
<div class="bg-mist bg-mist-1"></div>
<div class="bg-mist bg-mist-2"></div>
<div class="bg-horizon"></div>
<span class="firefly firefly-1"></span>
<span class="firefly firefly-2"></span>
<span class="firefly firefly-3"></span>
<span class="firefly firefly-4"></span>
<span class="firefly firefly-5"></span>
<span class="firefly firefly-6"></span>
<div class="bg-light-sweep"></div>
<div class="bg-grain"></div>
</div>
<nav>
website/alternatives/kosmi.html
+50 -5
View File
@@ -104,17 +104,62 @@
</script>
<!-- Mobile Browser Theme Styling -->
<meta name="theme-color" content="#0f172a">
<meta name="theme-color" content="#10190e">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<script src="{{ASSET_PATH}}lang-init.min.js"></script>
</head>
<body>
<div class="bg-blobs">
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<div class="blob blob-3"></div>
<div class="bg-nature" aria-hidden="true">
<div class="bg-canopy"></div>
<span class="canopy-arc canopy-arc-1"></span>
<span class="canopy-arc canopy-arc-2"></span>
<span class="canopy-arc canopy-arc-3"></span>
<span class="canopy-arc canopy-arc-4"></span>
<div id="bamboo-far">
<span class="bamboo-stalk far-1"></span>
<span class="bamboo-stalk far-2"></span>
<span class="bamboo-stalk far-3"></span>
</div>
<div id="bamboo-near">
<div class="bamboo-stalk near-1">
<i class="bamboo-node node-1"></i>
<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-2">
<i class="bamboo-node node-1"></i>
<i class="bamboo-node node-2"></i>
<i class="bamboo-node node-3"></i>
<i class="bamboo-leaf leaf-1"></i>
</div>
</div>
<span class="fall-leaf fall-leaf-1"><i></i></span>
<span class="fall-leaf fall-leaf-2"><i></i></span>
<span class="fall-leaf fall-leaf-3"><i></i></span>
<span class="fall-leaf fall-leaf-4"><i></i></span>
<span class="fall-leaf fall-leaf-5"><i></i></span>
<span class="fall-leaf fall-leaf-6"><i></i></span>
<span class="fall-leaf fall-leaf-7"><i></i></span>
<span class="fall-leaf fall-leaf-8"><i></i></span>
<span class="bg-grass bg-grass-1"></span>
<span class="bg-grass bg-grass-2"></span>
<span class="bg-grass bg-grass-3"></span>
<span class="bg-grass bg-grass-4"></span>
<div class="bg-mist bg-mist-1"></div>
<div class="bg-mist bg-mist-2"></div>
<div class="bg-horizon"></div>
<span class="firefly firefly-1"></span>
<span class="firefly firefly-2"></span>
<span class="firefly firefly-3"></span>
<span class="firefly firefly-4"></span>
<span class="firefly firefly-5"></span>
<span class="firefly firefly-6"></span>
<div class="bg-light-sweep"></div>
<div class="bg-grain"></div>
</div>
<nav>
website/alternatives/scener.html
+50 -5
View File
@@ -104,17 +104,62 @@
</script>
<!-- Mobile Browser Theme Styling -->
<meta name="theme-color" content="#0f172a">
<meta name="theme-color" content="#10190e">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<script src="{{ASSET_PATH}}lang-init.min.js"></script>
</head>
<body>
<div class="bg-blobs">
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<div class="blob blob-3"></div>
<div class="bg-nature" aria-hidden="true">
<div class="bg-canopy"></div>
<span class="canopy-arc canopy-arc-1"></span>
<span class="canopy-arc canopy-arc-2"></span>
<span class="canopy-arc canopy-arc-3"></span>
<span class="canopy-arc canopy-arc-4"></span>
<div id="bamboo-far">
<span class="bamboo-stalk far-1"></span>
<span class="bamboo-stalk far-2"></span>
<span class="bamboo-stalk far-3"></span>
</div>
<div id="bamboo-near">
<div class="bamboo-stalk near-1">
<i class="bamboo-node node-1"></i>
<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-2">
<i class="bamboo-node node-1"></i>
<i class="bamboo-node node-2"></i>
<i class="bamboo-node node-3"></i>
<i class="bamboo-leaf leaf-1"></i>
</div>
</div>
<span class="fall-leaf fall-leaf-1"><i></i></span>
<span class="fall-leaf fall-leaf-2"><i></i></span>
<span class="fall-leaf fall-leaf-3"><i></i></span>
<span class="fall-leaf fall-leaf-4"><i></i></span>
<span class="fall-leaf fall-leaf-5"><i></i></span>
<span class="fall-leaf fall-leaf-6"><i></i></span>
<span class="fall-leaf fall-leaf-7"><i></i></span>
<span class="fall-leaf fall-leaf-8"><i></i></span>
<span class="bg-grass bg-grass-1"></span>
<span class="bg-grass bg-grass-2"></span>
<span class="bg-grass bg-grass-3"></span>
<span class="bg-grass bg-grass-4"></span>
<div class="bg-mist bg-mist-1"></div>
<div class="bg-mist bg-mist-2"></div>
<div class="bg-horizon"></div>
<span class="firefly firefly-1"></span>
<span class="firefly firefly-2"></span>
<span class="firefly firefly-3"></span>
<span class="firefly firefly-4"></span>
<span class="firefly firefly-5"></span>
<span class="firefly firefly-6"></span>
<div class="bg-light-sweep"></div>
<div class="bg-grain"></div>
</div>
<nav>
website/alternatives/screen-sharing.html
+50 -5
View File
@@ -104,17 +104,62 @@
</script>
<!-- Mobile Browser Theme Styling -->
<meta name="theme-color" content="#0f172a">
<meta name="theme-color" content="#10190e">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<script src="{{ASSET_PATH}}lang-init.min.js"></script>
</head>
<body>
<div class="bg-blobs">
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<div class="blob blob-3"></div>
<div class="bg-nature" aria-hidden="true">
<div class="bg-canopy"></div>
<span class="canopy-arc canopy-arc-1"></span>
<span class="canopy-arc canopy-arc-2"></span>
<span class="canopy-arc canopy-arc-3"></span>
<span class="canopy-arc canopy-arc-4"></span>
<div id="bamboo-far">
<span class="bamboo-stalk far-1"></span>
<span class="bamboo-stalk far-2"></span>
<span class="bamboo-stalk far-3"></span>
</div>
<div id="bamboo-near">
<div class="bamboo-stalk near-1">
<i class="bamboo-node node-1"></i>
<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-2">
<i class="bamboo-node node-1"></i>
<i class="bamboo-node node-2"></i>
<i class="bamboo-node node-3"></i>
<i class="bamboo-leaf leaf-1"></i>
</div>
</div>
<span class="fall-leaf fall-leaf-1"><i></i></span>
<span class="fall-leaf fall-leaf-2"><i></i></span>
<span class="fall-leaf fall-leaf-3"><i></i></span>
<span class="fall-leaf fall-leaf-4"><i></i></span>
<span class="fall-leaf fall-leaf-5"><i></i></span>
<span class="fall-leaf fall-leaf-6"><i></i></span>
<span class="fall-leaf fall-leaf-7"><i></i></span>
<span class="fall-leaf fall-leaf-8"><i></i></span>
<span class="bg-grass bg-grass-1"></span>
<span class="bg-grass bg-grass-2"></span>
<span class="bg-grass bg-grass-3"></span>
<span class="bg-grass bg-grass-4"></span>
<div class="bg-mist bg-mist-1"></div>
<div class="bg-mist bg-mist-2"></div>
<div class="bg-horizon"></div>
<span class="firefly firefly-1"></span>
<span class="firefly firefly-2"></span>
<span class="firefly firefly-3"></span>
<span class="firefly firefly-4"></span>
<span class="firefly firefly-5"></span>
<span class="firefly firefly-6"></span>
<div class="bg-light-sweep"></div>
<div class="bg-grain"></div>
</div>
<nav>
website/alternatives/teleparty.html
+50 -5
View File
@@ -104,17 +104,62 @@
</script>
<!-- Mobile Browser Theme Styling -->
<meta name="theme-color" content="#0f172a">
<meta name="theme-color" content="#10190e">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<script src="{{ASSET_PATH}}lang-init.min.js"></script>
</head>
<body>
<div class="bg-blobs">
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<div class="blob blob-3"></div>
<div class="bg-nature" aria-hidden="true">
<div class="bg-canopy"></div>
<span class="canopy-arc canopy-arc-1"></span>
<span class="canopy-arc canopy-arc-2"></span>
<span class="canopy-arc canopy-arc-3"></span>
<span class="canopy-arc canopy-arc-4"></span>
<div id="bamboo-far">
<span class="bamboo-stalk far-1"></span>
<span class="bamboo-stalk far-2"></span>
<span class="bamboo-stalk far-3"></span>
</div>
<div id="bamboo-near">
<div class="bamboo-stalk near-1">
<i class="bamboo-node node-1"></i>
<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-2">
<i class="bamboo-node node-1"></i>
<i class="bamboo-node node-2"></i>
<i class="bamboo-node node-3"></i>
<i class="bamboo-leaf leaf-1"></i>
</div>
</div>
<span class="fall-leaf fall-leaf-1"><i></i></span>
<span class="fall-leaf fall-leaf-2"><i></i></span>
<span class="fall-leaf fall-leaf-3"><i></i></span>
<span class="fall-leaf fall-leaf-4"><i></i></span>
<span class="fall-leaf fall-leaf-5"><i></i></span>
<span class="fall-leaf fall-leaf-6"><i></i></span>
<span class="fall-leaf fall-leaf-7"><i></i></span>
<span class="fall-leaf fall-leaf-8"><i></i></span>
<span class="bg-grass bg-grass-1"></span>
<span class="bg-grass bg-grass-2"></span>
<span class="bg-grass bg-grass-3"></span>
<span class="bg-grass bg-grass-4"></span>
<div class="bg-mist bg-mist-1"></div>
<div class="bg-mist bg-mist-2"></div>
<div class="bg-horizon"></div>
<span class="firefly firefly-1"></span>
<span class="firefly firefly-2"></span>
<span class="firefly firefly-3"></span>
<span class="firefly firefly-4"></span>
<span class="firefly firefly-5"></span>
<span class="firefly firefly-6"></span>
<div class="bg-light-sweep"></div>
<div class="bg-grain"></div>
</div>
<nav>
website/alternatives/twoseven.html
+50 -5
View File
@@ -104,17 +104,62 @@
</script>
<!-- Mobile Browser Theme Styling -->
<meta name="theme-color" content="#0f172a">
<meta name="theme-color" content="#10190e">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<script src="{{ASSET_PATH}}lang-init.min.js"></script>
</head>
<body>
<div class="bg-blobs">
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<div class="blob blob-3"></div>
<div class="bg-nature" aria-hidden="true">
<div class="bg-canopy"></div>
<span class="canopy-arc canopy-arc-1"></span>
<span class="canopy-arc canopy-arc-2"></span>
<span class="canopy-arc canopy-arc-3"></span>
<span class="canopy-arc canopy-arc-4"></span>
<div id="bamboo-far">
<span class="bamboo-stalk far-1"></span>
<span class="bamboo-stalk far-2"></span>
<span class="bamboo-stalk far-3"></span>
</div>
<div id="bamboo-near">
<div class="bamboo-stalk near-1">
<i class="bamboo-node node-1"></i>
<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-2">
<i class="bamboo-node node-1"></i>
<i class="bamboo-node node-2"></i>
<i class="bamboo-node node-3"></i>
<i class="bamboo-leaf leaf-1"></i>
</div>
</div>
<span class="fall-leaf fall-leaf-1"><i></i></span>
<span class="fall-leaf fall-leaf-2"><i></i></span>
<span class="fall-leaf fall-leaf-3"><i></i></span>
<span class="fall-leaf fall-leaf-4"><i></i></span>
<span class="fall-leaf fall-leaf-5"><i></i></span>
<span class="fall-leaf fall-leaf-6"><i></i></span>
<span class="fall-leaf fall-leaf-7"><i></i></span>
<span class="fall-leaf fall-leaf-8"><i></i></span>
<span class="bg-grass bg-grass-1"></span>
<span class="bg-grass bg-grass-2"></span>
<span class="bg-grass bg-grass-3"></span>
<span class="bg-grass bg-grass-4"></span>
<div class="bg-mist bg-mist-1"></div>
<div class="bg-mist bg-mist-2"></div>
<div class="bg-horizon"></div>
<span class="firefly firefly-1"></span>
<span class="firefly firefly-2"></span>
<span class="firefly firefly-3"></span>
<span class="firefly firefly-4"></span>
<span class="firefly firefly-5"></span>
<span class="firefly firefly-6"></span>
<div class="bg-light-sweep"></div>
<div class="bg-grain"></div>
</div>
<nav>
website/alternatives/watch2gether.html
+50 -5
View File
@@ -104,17 +104,62 @@
</script>
<!-- Mobile Browser Theme Styling -->
<meta name="theme-color" content="#0f172a">
<meta name="theme-color" content="#10190e">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<script src="{{ASSET_PATH}}lang-init.min.js"></script>
</head>
<body>
<div class="bg-blobs">
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<div class="blob blob-3"></div>
<div class="bg-nature" aria-hidden="true">
<div class="bg-canopy"></div>
<span class="canopy-arc canopy-arc-1"></span>
<span class="canopy-arc canopy-arc-2"></span>
<span class="canopy-arc canopy-arc-3"></span>
<span class="canopy-arc canopy-arc-4"></span>
<div id="bamboo-far">
<span class="bamboo-stalk far-1"></span>
<span class="bamboo-stalk far-2"></span>
<span class="bamboo-stalk far-3"></span>
</div>
<div id="bamboo-near">
<div class="bamboo-stalk near-1">
<i class="bamboo-node node-1"></i>
<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-2">
<i class="bamboo-node node-1"></i>
<i class="bamboo-node node-2"></i>
<i class="bamboo-node node-3"></i>
<i class="bamboo-leaf leaf-1"></i>
</div>
</div>
<span class="fall-leaf fall-leaf-1"><i></i></span>
<span class="fall-leaf fall-leaf-2"><i></i></span>
<span class="fall-leaf fall-leaf-3"><i></i></span>
<span class="fall-leaf fall-leaf-4"><i></i></span>
<span class="fall-leaf fall-leaf-5"><i></i></span>
<span class="fall-leaf fall-leaf-6"><i></i></span>
<span class="fall-leaf fall-leaf-7"><i></i></span>
<span class="fall-leaf fall-leaf-8"><i></i></span>
<span class="bg-grass bg-grass-1"></span>
<span class="bg-grass bg-grass-2"></span>
<span class="bg-grass bg-grass-3"></span>
<span class="bg-grass bg-grass-4"></span>
<div class="bg-mist bg-mist-1"></div>
<div class="bg-mist bg-mist-2"></div>
<div class="bg-horizon"></div>
<span class="firefly firefly-1"></span>
<span class="firefly firefly-2"></span>
<span class="firefly firefly-3"></span>
<span class="firefly firefly-4"></span>
<span class="firefly firefly-5"></span>
<span class="firefly firefly-6"></span>
<div class="bg-light-sweep"></div>
<div class="bg-grain"></div>
</div>
<nav>
website/app.js
+13 -2
View File
@@ -86,7 +86,7 @@ document.addEventListener('DOMContentLoaded', () => {
const syncThemeMeta = () => {
if (themeMeta) {
themeMeta.setAttribute('content', document.documentElement.classList.contains('theme-light') ? '#f1f5f9' : '#0f172a');
themeMeta.setAttribute('content', document.documentElement.classList.contains('theme-light') ? '#f0efe7' : '#10190e');
}
};
syncThemeMeta();
@@ -212,6 +212,17 @@ document.addEventListener('DOMContentLoaded', () => {
nav.classList.toggle('nav-scrolled', window.scrollY > 50);
}, { passive: true });
// Bamboo forest scroll parallax (background layers only)
const bambooFar = document.getElementById('bamboo-far');
const bambooNear = document.getElementById('bamboo-near');
if (bambooFar && bambooNear && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
window.addEventListener('scroll', () => {
const scrollY = window.scrollY;
bambooFar.style.transform = `translateY(${scrollY * 0.04}px)`;
bambooNear.style.transform = `translateY(${-scrollY * 0.06}px)`;
}, { passive: true });
}
// Invite Detection & Bridge
const checkInvite = () => {
const isJoinPage = window.location.pathname.includes('join');
@@ -1499,7 +1510,7 @@ document.addEventListener('DOMContentLoaded', () => {
if (heroBtns && heroBtns.length > 0) {
heroBtns.forEach(btn => {
const isFF = btn.classList.contains('btn-firefox');
const glowColor = isFF ? 'rgba(249, 115, 22, ' : 'rgba(99, 102, 241, ';
const glowColor = isFF ? 'rgba(201, 103, 54, ' : 'rgba(86, 174, 108, ';
btn.animate([
{ transform: 'scale(1)', boxShadow: `0 0 15px ${glowColor}0.2)` },
{ transform: 'scale(1.05)', boxShadow: `0 0 25px ${glowColor}0.5)` },
website/datenschutz-de.html
+50 -5
View File
@@ -42,17 +42,62 @@
</script>
<!-- Mobile Browser Theme Styling -->
<meta name="theme-color" content="#0f172a">
<meta name="theme-color" content="#10190e">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<script src="../lang-init.min.js"></script>
</head>
<body>
<div class="bg-blobs">
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<div class="blob blob-3"></div>
<div class="bg-nature" aria-hidden="true">
<div class="bg-canopy"></div>
<span class="canopy-arc canopy-arc-1"></span>
<span class="canopy-arc canopy-arc-2"></span>
<span class="canopy-arc canopy-arc-3"></span>
<span class="canopy-arc canopy-arc-4"></span>
<div id="bamboo-far">
<span class="bamboo-stalk far-1"></span>
<span class="bamboo-stalk far-2"></span>
<span class="bamboo-stalk far-3"></span>
</div>
<div id="bamboo-near">
<div class="bamboo-stalk near-1">
<i class="bamboo-node node-1"></i>
<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-2">
<i class="bamboo-node node-1"></i>
<i class="bamboo-node node-2"></i>
<i class="bamboo-node node-3"></i>
<i class="bamboo-leaf leaf-1"></i>
</div>
</div>
<span class="fall-leaf fall-leaf-1"><i></i></span>
<span class="fall-leaf fall-leaf-2"><i></i></span>
<span class="fall-leaf fall-leaf-3"><i></i></span>
<span class="fall-leaf fall-leaf-4"><i></i></span>
<span class="fall-leaf fall-leaf-5"><i></i></span>
<span class="fall-leaf fall-leaf-6"><i></i></span>
<span class="fall-leaf fall-leaf-7"><i></i></span>
<span class="fall-leaf fall-leaf-8"><i></i></span>
<span class="bg-grass bg-grass-1"></span>
<span class="bg-grass bg-grass-2"></span>
<span class="bg-grass bg-grass-3"></span>
<span class="bg-grass bg-grass-4"></span>
<div class="bg-mist bg-mist-1"></div>
<div class="bg-mist bg-mist-2"></div>
<div class="bg-horizon"></div>
<span class="firefly firefly-1"></span>
<span class="firefly firefly-2"></span>
<span class="firefly firefly-3"></span>
<span class="firefly firefly-4"></span>
<span class="firefly firefly-5"></span>
<span class="firefly firefly-6"></span>
<div class="bg-light-sweep"></div>
<div class="bg-grain"></div>
</div>
<nav>
website/impressum-de.html
+50 -5
View File
@@ -42,17 +42,62 @@
</script>
<!-- Mobile Browser Theme Styling -->
<meta name="theme-color" content="#0f172a">
<meta name="theme-color" content="#10190e">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<script src="../lang-init.min.js"></script>
</head>
<body>
<div class="bg-blobs">
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<div class="blob blob-3"></div>
<div class="bg-nature" aria-hidden="true">
<div class="bg-canopy"></div>
<span class="canopy-arc canopy-arc-1"></span>
<span class="canopy-arc canopy-arc-2"></span>
<span class="canopy-arc canopy-arc-3"></span>
<span class="canopy-arc canopy-arc-4"></span>
<div id="bamboo-far">
<span class="bamboo-stalk far-1"></span>
<span class="bamboo-stalk far-2"></span>
<span class="bamboo-stalk far-3"></span>
</div>
<div id="bamboo-near">
<div class="bamboo-stalk near-1">
<i class="bamboo-node node-1"></i>
<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-2">
<i class="bamboo-node node-1"></i>
<i class="bamboo-node node-2"></i>
<i class="bamboo-node node-3"></i>
<i class="bamboo-leaf leaf-1"></i>
</div>
</div>
<span class="fall-leaf fall-leaf-1"><i></i></span>
<span class="fall-leaf fall-leaf-2"><i></i></span>
<span class="fall-leaf fall-leaf-3"><i></i></span>
<span class="fall-leaf fall-leaf-4"><i></i></span>
<span class="fall-leaf fall-leaf-5"><i></i></span>
<span class="fall-leaf fall-leaf-6"><i></i></span>
<span class="fall-leaf fall-leaf-7"><i></i></span>
<span class="fall-leaf fall-leaf-8"><i></i></span>
<span class="bg-grass bg-grass-1"></span>
<span class="bg-grass bg-grass-2"></span>
<span class="bg-grass bg-grass-3"></span>
<span class="bg-grass bg-grass-4"></span>
<div class="bg-mist bg-mist-1"></div>
<div class="bg-mist bg-mist-2"></div>
<div class="bg-horizon"></div>
<span class="firefly firefly-1"></span>
<span class="firefly firefly-2"></span>
<span class="firefly firefly-3"></span>
<span class="firefly firefly-4"></span>
<span class="firefly firefly-5"></span>
<span class="firefly firefly-6"></span>
<div class="bg-light-sweep"></div>
<div class="bg-grain"></div>
</div>
<nav>
website/imprint.html
+50 -5
View File
@@ -42,17 +42,62 @@
</script>
<!-- Mobile Browser Theme Styling -->
<meta name="theme-color" content="#0f172a">
<meta name="theme-color" content="#10190e">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<script src="lang-init.min.js"></script>
</head>
<body>
<div class="bg-blobs">
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<div class="blob blob-3"></div>
<div class="bg-nature" aria-hidden="true">
<div class="bg-canopy"></div>
<span class="canopy-arc canopy-arc-1"></span>
<span class="canopy-arc canopy-arc-2"></span>
<span class="canopy-arc canopy-arc-3"></span>
<span class="canopy-arc canopy-arc-4"></span>
<div id="bamboo-far">
<span class="bamboo-stalk far-1"></span>
<span class="bamboo-stalk far-2"></span>
<span class="bamboo-stalk far-3"></span>
</div>
<div id="bamboo-near">
<div class="bamboo-stalk near-1">
<i class="bamboo-node node-1"></i>
<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-2">
<i class="bamboo-node node-1"></i>
<i class="bamboo-node node-2"></i>
<i class="bamboo-node node-3"></i>
<i class="bamboo-leaf leaf-1"></i>
</div>
</div>
<span class="fall-leaf fall-leaf-1"><i></i></span>
<span class="fall-leaf fall-leaf-2"><i></i></span>
<span class="fall-leaf fall-leaf-3"><i></i></span>
<span class="fall-leaf fall-leaf-4"><i></i></span>
<span class="fall-leaf fall-leaf-5"><i></i></span>
<span class="fall-leaf fall-leaf-6"><i></i></span>
<span class="fall-leaf fall-leaf-7"><i></i></span>
<span class="fall-leaf fall-leaf-8"><i></i></span>
<span class="bg-grass bg-grass-1"></span>
<span class="bg-grass bg-grass-2"></span>
<span class="bg-grass bg-grass-3"></span>
<span class="bg-grass bg-grass-4"></span>
<div class="bg-mist bg-mist-1"></div>
<div class="bg-mist bg-mist-2"></div>
<div class="bg-horizon"></div>
<span class="firefly firefly-1"></span>
<span class="firefly firefly-2"></span>
<span class="firefly firefly-3"></span>
<span class="firefly firefly-4"></span>
<span class="firefly firefly-5"></span>
<span class="firefly firefly-6"></span>
<div class="bg-light-sweep"></div>
<div class="bg-grain"></div>
</div>
<nav>
website/join.html
+50 -5
View File
@@ -27,17 +27,62 @@
<meta name="twitter:image" content="https://sync.koalastuff.net/assets/og-image.png">
<!-- Mobile Browser Theme Styling -->
<meta name="theme-color" content="#0f172a">
<meta name="theme-color" content="#10190e">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<script src="lang-init.min.js"></script>
</head>
<body>
<div class="bg-blobs">
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<div class="blob blob-3"></div>
<div class="bg-nature" aria-hidden="true">
<div class="bg-canopy"></div>
<span class="canopy-arc canopy-arc-1"></span>
<span class="canopy-arc canopy-arc-2"></span>
<span class="canopy-arc canopy-arc-3"></span>
<span class="canopy-arc canopy-arc-4"></span>
<div id="bamboo-far">
<span class="bamboo-stalk far-1"></span>
<span class="bamboo-stalk far-2"></span>
<span class="bamboo-stalk far-3"></span>
</div>
<div id="bamboo-near">
<div class="bamboo-stalk near-1">
<i class="bamboo-node node-1"></i>
<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-2">
<i class="bamboo-node node-1"></i>
<i class="bamboo-node node-2"></i>
<i class="bamboo-node node-3"></i>
<i class="bamboo-leaf leaf-1"></i>
</div>
</div>
<span class="fall-leaf fall-leaf-1"><i></i></span>
<span class="fall-leaf fall-leaf-2"><i></i></span>
<span class="fall-leaf fall-leaf-3"><i></i></span>
<span class="fall-leaf fall-leaf-4"><i></i></span>
<span class="fall-leaf fall-leaf-5"><i></i></span>
<span class="fall-leaf fall-leaf-6"><i></i></span>
<span class="fall-leaf fall-leaf-7"><i></i></span>
<span class="fall-leaf fall-leaf-8"><i></i></span>
<span class="bg-grass bg-grass-1"></span>
<span class="bg-grass bg-grass-2"></span>
<span class="bg-grass bg-grass-3"></span>
<span class="bg-grass bg-grass-4"></span>
<div class="bg-mist bg-mist-1"></div>
<div class="bg-mist bg-mist-2"></div>
<div class="bg-horizon"></div>
<span class="firefly firefly-1"></span>
<span class="firefly firefly-2"></span>
<span class="firefly firefly-3"></span>
<span class="firefly firefly-4"></span>
<span class="firefly firefly-5"></span>
<span class="firefly firefly-6"></span>
<div class="bg-light-sweep"></div>
<div class="bg-grain"></div>
</div>
<nav>
website/privacy.html
+50 -5
View File
@@ -42,17 +42,62 @@
</script>
<!-- Mobile Browser Theme Styling -->
<meta name="theme-color" content="#0f172a">
<meta name="theme-color" content="#10190e">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<script src="lang-init.min.js"></script>
</head>
<body>
<div class="bg-blobs">
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<div class="blob blob-3"></div>
<div class="bg-nature" aria-hidden="true">
<div class="bg-canopy"></div>
<span class="canopy-arc canopy-arc-1"></span>
<span class="canopy-arc canopy-arc-2"></span>
<span class="canopy-arc canopy-arc-3"></span>
<span class="canopy-arc canopy-arc-4"></span>
<div id="bamboo-far">
<span class="bamboo-stalk far-1"></span>
<span class="bamboo-stalk far-2"></span>
<span class="bamboo-stalk far-3"></span>
</div>
<div id="bamboo-near">
<div class="bamboo-stalk near-1">
<i class="bamboo-node node-1"></i>
<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-2">
<i class="bamboo-node node-1"></i>
<i class="bamboo-node node-2"></i>
<i class="bamboo-node node-3"></i>
<i class="bamboo-leaf leaf-1"></i>
</div>
</div>
<span class="fall-leaf fall-leaf-1"><i></i></span>
<span class="fall-leaf fall-leaf-2"><i></i></span>
<span class="fall-leaf fall-leaf-3"><i></i></span>
<span class="fall-leaf fall-leaf-4"><i></i></span>
<span class="fall-leaf fall-leaf-5"><i></i></span>
<span class="fall-leaf fall-leaf-6"><i></i></span>
<span class="fall-leaf fall-leaf-7"><i></i></span>
<span class="fall-leaf fall-leaf-8"><i></i></span>
<span class="bg-grass bg-grass-1"></span>
<span class="bg-grass bg-grass-2"></span>
<span class="bg-grass bg-grass-3"></span>
<span class="bg-grass bg-grass-4"></span>
<div class="bg-mist bg-mist-1"></div>
<div class="bg-mist bg-mist-2"></div>
<div class="bg-horizon"></div>
<span class="firefly firefly-1"></span>
<span class="firefly firefly-2"></span>
<span class="firefly firefly-3"></span>
<span class="firefly firefly-4"></span>
<span class="firefly firefly-5"></span>
<span class="firefly firefly-6"></span>
<div class="bg-light-sweep"></div>
<div class="bg-grain"></div>
</div>
<nav>
website/site.webmanifest
+2 -2
View File
@@ -4,8 +4,8 @@
"description": "Real-time video synchronization for friends. Privacy-first, open source.",
"start_url": "/",
"display": "standalone",
"background_color": "#0f172a",
"theme_color": "#0f172a",
"background_color": "#10190e",
"theme_color": "#10190e",
"icons": [
{
"src": "/assets/NewLogoIcon_64.webp",
website/sitemap.xml
+124 -124
View File
@@ -3,31 +3,31 @@
xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>https://sync.koalastuff.net/imprint</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>monthly</changefreq>
<priority>0.3</priority>
</url>
<url>
<loc>https://sync.koalastuff.net/privacy</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>monthly</changefreq>
<priority>0.3</priority>
</url>
<url>
<loc>https://sync.koalastuff.net/de/impressum</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>monthly</changefreq>
<priority>0.3</priority>
</url>
<url>
<loc>https://sync.koalastuff.net/de/datenschutz</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>monthly</changefreq>
<priority>0.3</priority>
</url>
<url>
<loc>https://sync.koalastuff.net/</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/"/>
@@ -49,7 +49,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/de/</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/"/>
@@ -71,7 +71,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/fr/</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/"/>
@@ -93,7 +93,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/es/</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/"/>
@@ -115,7 +115,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/pt-BR/</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/"/>
@@ -137,7 +137,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/ru/</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/"/>
@@ -159,7 +159,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/it/</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/"/>
@@ -181,7 +181,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/pl/</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/"/>
@@ -203,7 +203,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/tr/</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/"/>
@@ -225,7 +225,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/nl/</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/"/>
@@ -247,7 +247,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/ja/</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/"/>
@@ -269,7 +269,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/ko/</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/"/>
@@ -291,7 +291,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/zh/</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/"/>
@@ -313,7 +313,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/uk/</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/"/>
@@ -335,7 +335,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/pt/</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/"/>
@@ -357,7 +357,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/alternatives</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives"/>
@@ -379,7 +379,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/de/alternatives</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives"/>
@@ -401,7 +401,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/fr/alternatives</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives"/>
@@ -423,7 +423,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/es/alternatives</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives"/>
@@ -445,7 +445,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/pt-BR/alternatives</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives"/>
@@ -467,7 +467,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/ru/alternatives</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives"/>
@@ -489,7 +489,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/it/alternatives</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives"/>
@@ -511,7 +511,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/pl/alternatives</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives"/>
@@ -533,7 +533,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/tr/alternatives</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives"/>
@@ -555,7 +555,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/nl/alternatives</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives"/>
@@ -577,7 +577,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/ja/alternatives</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives"/>
@@ -599,7 +599,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/ko/alternatives</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives"/>
@@ -621,7 +621,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/zh/alternatives</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives"/>
@@ -643,7 +643,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/uk/alternatives</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives"/>
@@ -665,7 +665,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/pt/alternatives</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives"/>
@@ -687,7 +687,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/alternatives/teleparty</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/teleparty"/>
@@ -709,7 +709,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/de/alternatives/teleparty</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/teleparty"/>
@@ -731,7 +731,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/fr/alternatives/teleparty</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/teleparty"/>
@@ -753,7 +753,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/es/alternatives/teleparty</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/teleparty"/>
@@ -775,7 +775,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/pt-BR/alternatives/teleparty</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/teleparty"/>
@@ -797,7 +797,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/ru/alternatives/teleparty</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/teleparty"/>
@@ -819,7 +819,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/it/alternatives/teleparty</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/teleparty"/>
@@ -841,7 +841,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/pl/alternatives/teleparty</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/teleparty"/>
@@ -863,7 +863,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/tr/alternatives/teleparty</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/teleparty"/>
@@ -885,7 +885,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/nl/alternatives/teleparty</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/teleparty"/>
@@ -907,7 +907,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/ja/alternatives/teleparty</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/teleparty"/>
@@ -929,7 +929,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/ko/alternatives/teleparty</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/teleparty"/>
@@ -951,7 +951,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/zh/alternatives/teleparty</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/teleparty"/>
@@ -973,7 +973,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/uk/alternatives/teleparty</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/teleparty"/>
@@ -995,7 +995,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/pt/alternatives/teleparty</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/teleparty"/>
@@ -1017,7 +1017,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/alternatives/screen-sharing</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/screen-sharing"/>
@@ -1039,7 +1039,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/de/alternatives/screen-sharing</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/screen-sharing"/>
@@ -1061,7 +1061,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/fr/alternatives/screen-sharing</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/screen-sharing"/>
@@ -1083,7 +1083,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/es/alternatives/screen-sharing</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/screen-sharing"/>
@@ -1105,7 +1105,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/pt-BR/alternatives/screen-sharing</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/screen-sharing"/>
@@ -1127,7 +1127,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/ru/alternatives/screen-sharing</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/screen-sharing"/>
@@ -1149,7 +1149,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/it/alternatives/screen-sharing</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/screen-sharing"/>
@@ -1171,7 +1171,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/pl/alternatives/screen-sharing</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/screen-sharing"/>
@@ -1193,7 +1193,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/tr/alternatives/screen-sharing</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/screen-sharing"/>
@@ -1215,7 +1215,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/nl/alternatives/screen-sharing</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/screen-sharing"/>
@@ -1237,7 +1237,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/ja/alternatives/screen-sharing</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/screen-sharing"/>
@@ -1259,7 +1259,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/ko/alternatives/screen-sharing</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/screen-sharing"/>
@@ -1281,7 +1281,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/zh/alternatives/screen-sharing</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/screen-sharing"/>
@@ -1303,7 +1303,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/uk/alternatives/screen-sharing</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/screen-sharing"/>
@@ -1325,7 +1325,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/pt/alternatives/screen-sharing</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/screen-sharing"/>
@@ -1347,7 +1347,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/alternatives/watch2gether</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/watch2gether"/>
@@ -1369,7 +1369,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/de/alternatives/watch2gether</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/watch2gether"/>
@@ -1391,7 +1391,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/fr/alternatives/watch2gether</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/watch2gether"/>
@@ -1413,7 +1413,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/es/alternatives/watch2gether</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/watch2gether"/>
@@ -1435,7 +1435,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/pt-BR/alternatives/watch2gether</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/watch2gether"/>
@@ -1457,7 +1457,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/ru/alternatives/watch2gether</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/watch2gether"/>
@@ -1479,7 +1479,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/it/alternatives/watch2gether</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/watch2gether"/>
@@ -1501,7 +1501,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/pl/alternatives/watch2gether</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/watch2gether"/>
@@ -1523,7 +1523,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/tr/alternatives/watch2gether</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/watch2gether"/>
@@ -1545,7 +1545,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/nl/alternatives/watch2gether</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/watch2gether"/>
@@ -1567,7 +1567,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/ja/alternatives/watch2gether</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/watch2gether"/>
@@ -1589,7 +1589,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/ko/alternatives/watch2gether</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/watch2gether"/>
@@ -1611,7 +1611,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/zh/alternatives/watch2gether</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/watch2gether"/>
@@ -1633,7 +1633,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/uk/alternatives/watch2gether</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/watch2gether"/>
@@ -1655,7 +1655,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/pt/alternatives/watch2gether</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/watch2gether"/>
@@ -1677,7 +1677,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/alternatives/scener</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/scener"/>
@@ -1699,7 +1699,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/de/alternatives/scener</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/scener"/>
@@ -1721,7 +1721,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/fr/alternatives/scener</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/scener"/>
@@ -1743,7 +1743,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/es/alternatives/scener</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/scener"/>
@@ -1765,7 +1765,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/pt-BR/alternatives/scener</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/scener"/>
@@ -1787,7 +1787,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/ru/alternatives/scener</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/scener"/>
@@ -1809,7 +1809,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/it/alternatives/scener</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/scener"/>
@@ -1831,7 +1831,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/pl/alternatives/scener</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/scener"/>
@@ -1853,7 +1853,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/tr/alternatives/scener</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/scener"/>
@@ -1875,7 +1875,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/nl/alternatives/scener</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/scener"/>
@@ -1897,7 +1897,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/ja/alternatives/scener</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/scener"/>
@@ -1919,7 +1919,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/ko/alternatives/scener</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/scener"/>
@@ -1941,7 +1941,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/zh/alternatives/scener</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/scener"/>
@@ -1963,7 +1963,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/uk/alternatives/scener</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/scener"/>
@@ -1985,7 +1985,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/pt/alternatives/scener</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/scener"/>
@@ -2007,7 +2007,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/alternatives/kosmi</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/kosmi"/>
@@ -2029,7 +2029,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/de/alternatives/kosmi</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/kosmi"/>
@@ -2051,7 +2051,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/fr/alternatives/kosmi</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/kosmi"/>
@@ -2073,7 +2073,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/es/alternatives/kosmi</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/kosmi"/>
@@ -2095,7 +2095,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/pt-BR/alternatives/kosmi</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/kosmi"/>
@@ -2117,7 +2117,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/ru/alternatives/kosmi</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/kosmi"/>
@@ -2139,7 +2139,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/it/alternatives/kosmi</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/kosmi"/>
@@ -2161,7 +2161,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/pl/alternatives/kosmi</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/kosmi"/>
@@ -2183,7 +2183,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/tr/alternatives/kosmi</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/kosmi"/>
@@ -2205,7 +2205,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/nl/alternatives/kosmi</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/kosmi"/>
@@ -2227,7 +2227,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/ja/alternatives/kosmi</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/kosmi"/>
@@ -2249,7 +2249,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/ko/alternatives/kosmi</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/kosmi"/>
@@ -2271,7 +2271,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/zh/alternatives/kosmi</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/kosmi"/>
@@ -2293,7 +2293,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/uk/alternatives/kosmi</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/kosmi"/>
@@ -2315,7 +2315,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/pt/alternatives/kosmi</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/kosmi"/>
@@ -2337,7 +2337,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/alternatives/twoseven</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/twoseven"/>
@@ -2359,7 +2359,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/de/alternatives/twoseven</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/twoseven"/>
@@ -2381,7 +2381,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/fr/alternatives/twoseven</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/twoseven"/>
@@ -2403,7 +2403,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/es/alternatives/twoseven</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/twoseven"/>
@@ -2425,7 +2425,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/pt-BR/alternatives/twoseven</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/twoseven"/>
@@ -2447,7 +2447,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/ru/alternatives/twoseven</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/twoseven"/>
@@ -2469,7 +2469,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/it/alternatives/twoseven</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/twoseven"/>
@@ -2491,7 +2491,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/pl/alternatives/twoseven</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/twoseven"/>
@@ -2513,7 +2513,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/tr/alternatives/twoseven</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/twoseven"/>
@@ -2535,7 +2535,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/nl/alternatives/twoseven</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/twoseven"/>
@@ -2557,7 +2557,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/ja/alternatives/twoseven</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/twoseven"/>
@@ -2579,7 +2579,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/ko/alternatives/twoseven</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/twoseven"/>
@@ -2601,7 +2601,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/zh/alternatives/twoseven</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/twoseven"/>
@@ -2623,7 +2623,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/uk/alternatives/twoseven</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/twoseven"/>
@@ -2645,7 +2645,7 @@
</url>
<url>
<loc>https://sync.koalastuff.net/pt/alternatives/twoseven</loc>
<lastmod>2026-07-09</lastmod>
<lastmod>2026-07-10</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/twoseven"/>
website/style.css
+635 -365
View File
File diff suppressed because it is too large Load Diff
website/template.html
+132 -87
View File
@@ -69,7 +69,7 @@
<meta name="twitter:image" content="https://sync.koalastuff.net/assets/og-image.png">
<!-- Mobile Browser Theme Styling -->
<meta name="theme-color" content="#0f172a">
<meta name="theme-color" content="#10190e">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="manifest" href="{{ASSET_PATH}}site.webmanifest">
@@ -214,10 +214,55 @@
<a class="skip-link" href="#main-content">Skip to main content</a>
<div class="bg-blobs">
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<div class="blob blob-3"></div>
<div class="bg-nature" aria-hidden="true">
<div class="bg-canopy"></div>
<span class="canopy-arc canopy-arc-1"></span>
<span class="canopy-arc canopy-arc-2"></span>
<span class="canopy-arc canopy-arc-3"></span>
<span class="canopy-arc canopy-arc-4"></span>
<div id="bamboo-far">
<span class="bamboo-stalk far-1"></span>
<span class="bamboo-stalk far-2"></span>
<span class="bamboo-stalk far-3"></span>
</div>
<div id="bamboo-near">
<div class="bamboo-stalk near-1">
<i class="bamboo-node node-1"></i>
<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-2">
<i class="bamboo-node node-1"></i>
<i class="bamboo-node node-2"></i>
<i class="bamboo-node node-3"></i>
<i class="bamboo-leaf leaf-1"></i>
</div>
</div>
<span class="fall-leaf fall-leaf-1"><i></i></span>
<span class="fall-leaf fall-leaf-2"><i></i></span>
<span class="fall-leaf fall-leaf-3"><i></i></span>
<span class="fall-leaf fall-leaf-4"><i></i></span>
<span class="fall-leaf fall-leaf-5"><i></i></span>
<span class="fall-leaf fall-leaf-6"><i></i></span>
<span class="fall-leaf fall-leaf-7"><i></i></span>
<span class="fall-leaf fall-leaf-8"><i></i></span>
<span class="bg-grass bg-grass-1"></span>
<span class="bg-grass bg-grass-2"></span>
<span class="bg-grass bg-grass-3"></span>
<span class="bg-grass bg-grass-4"></span>
<div class="bg-mist bg-mist-1"></div>
<div class="bg-mist bg-mist-2"></div>
<div class="bg-horizon"></div>
<span class="firefly firefly-1"></span>
<span class="firefly firefly-2"></span>
<span class="firefly firefly-3"></span>
<span class="firefly firefly-4"></span>
<span class="firefly firefly-5"></span>
<span class="firefly firefly-6"></span>
<div class="bg-light-sweep"></div>
<div class="bg-grain"></div>
</div>
<nav>
@@ -351,7 +396,7 @@
<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-stars" fill="#e2e8f0">
<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"/>
<circle class="film-star" cx="64" cy="10" r="0.9"/>
@@ -360,25 +405,25 @@
<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="#f1f5f9" opacity="0.92"/>
<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(30,27,75,0.7)"/>
<circle class="film-moon" cx="122" cy="26" r="7.5" fill="#f0efe7" opacity="0.92"/>
<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-mid-scroll">
<polygon points="20,76 26,60 32,76" fill="rgba(49,46,129,0.55)"/>
<polygon points="55,78 63,52 71,78" fill="rgba(49,46,129,0.55)"/>
<polygon points="95,76 101,62 107,76" fill="rgba(49,46,129,0.55)"/>
<polygon points="135,77 144,55 153,77" fill="rgba(49,46,129,0.55)"/>
<polygon points="180,76 186,60 192,76" fill="rgba(49,46,129,0.55)"/>
<polygon points="215,78 223,52 231,78" fill="rgba(49,46,129,0.55)"/>
<polygon points="255,76 261,62 267,76" fill="rgba(49,46,129,0.55)"/>
<polygon points="295,77 304,55 313,77" fill="rgba(49,46,129,0.55)"/>
<path d="M0,76 Q40,73 80,76 T160,76 Q200,73 240,76 T320,76 L320,92 L0,92 Z" fill="rgba(49,46,129,0.55)"/>
<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)"/>
<polygon points="95,76 101,62 107,76" fill="rgba(26, 47, 23, 0.55)"/>
<polygon points="135,77 144,55 153,77" fill="rgba(26, 47, 23, 0.55)"/>
<polygon points="180,76 186,60 192,76" fill="rgba(26, 47, 23, 0.55)"/>
<polygon points="215,78 223,52 231,78" fill="rgba(26, 47, 23, 0.55)"/>
<polygon points="255,76 261,62 267,76" fill="rgba(26, 47, 23, 0.55)"/>
<polygon points="295,77 304,55 313,77" fill="rgba(26, 47, 23, 0.55)"/>
<path d="M0,76 Q40,73 80,76 T160,76 Q200,73 240,76 T320,76 L320,92 L0,92 Z" fill="rgba(26, 47, 23, 0.55)"/>
</g>
<g class="film-fore-scroll">
<polygon points="40,84 52,48 64,84" fill="#090d16"/>
<polygon points="115,84 128,42 141,84" fill="#090d16"/>
<polygon points="200,84 212,48 224,84" fill="#090d16"/>
<polygon points="275,84 288,42 301,84" fill="#090d16"/>
<path d="M0,84 Q80,82 160,84 T320,84 L320,92 L0,92 Z" fill="#090d16"/>
<polygon points="40,84 52,48 64,84" fill="#040903"/>
<polygon points="115,84 128,42 141,84" fill="#040903"/>
<polygon points="200,84 212,48 224,84" fill="#040903"/>
<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="#fde047"/>
</svg>
@@ -408,7 +453,7 @@
<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-stars" fill="#e2e8f0">
<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"/>
<circle class="film-star" cx="64" cy="10" r="0.9"/>
@@ -417,25 +462,25 @@
<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="#f1f5f9" opacity="0.92"/>
<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(30,27,75,0.7)"/>
<circle class="film-moon" cx="122" cy="26" r="7.5" fill="#f0efe7" opacity="0.92"/>
<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-mid-scroll">
<polygon points="20,76 26,60 32,76" fill="rgba(49,46,129,0.55)"/>
<polygon points="55,78 63,52 71,78" fill="rgba(49,46,129,0.55)"/>
<polygon points="95,76 101,62 107,76" fill="rgba(49,46,129,0.55)"/>
<polygon points="135,77 144,55 153,77" fill="rgba(49,46,129,0.55)"/>
<polygon points="180,76 186,60 192,76" fill="rgba(49,46,129,0.55)"/>
<polygon points="215,78 223,52 231,78" fill="rgba(49,46,129,0.55)"/>
<polygon points="255,76 261,62 267,76" fill="rgba(49,46,129,0.55)"/>
<polygon points="295,77 304,55 313,77" fill="rgba(49,46,129,0.55)"/>
<path d="M0,76 Q40,73 80,76 T160,76 Q200,73 240,76 T320,76 L320,92 L0,92 Z" fill="rgba(49,46,129,0.55)"/>
<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)"/>
<polygon points="95,76 101,62 107,76" fill="rgba(26, 47, 23, 0.55)"/>
<polygon points="135,77 144,55 153,77" fill="rgba(26, 47, 23, 0.55)"/>
<polygon points="180,76 186,60 192,76" fill="rgba(26, 47, 23, 0.55)"/>
<polygon points="215,78 223,52 231,78" fill="rgba(26, 47, 23, 0.55)"/>
<polygon points="255,76 261,62 267,76" fill="rgba(26, 47, 23, 0.55)"/>
<polygon points="295,77 304,55 313,77" fill="rgba(26, 47, 23, 0.55)"/>
<path d="M0,76 Q40,73 80,76 T160,76 Q200,73 240,76 T320,76 L320,92 L0,92 Z" fill="rgba(26, 47, 23, 0.55)"/>
</g>
<g class="film-fore-scroll">
<polygon points="40,84 52,48 64,84" fill="#090d16"/>
<polygon points="115,84 128,42 141,84" fill="#090d16"/>
<polygon points="200,84 212,48 224,84" fill="#090d16"/>
<polygon points="275,84 288,42 301,84" fill="#090d16"/>
<path d="M0,84 Q80,82 160,84 T320,84 L320,92 L0,92 Z" fill="#090d16"/>
<polygon points="40,84 52,48 64,84" fill="#040903"/>
<polygon points="115,84 128,42 141,84" fill="#040903"/>
<polygon points="200,84 212,48 224,84" fill="#040903"/>
<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="#fde047"/>
</svg>
@@ -493,7 +538,7 @@
<div class="mock-label" title="Share this link with friends so they can join">{{MOCK_03}}</div>
<div class="mock-invite-box">
<input type="text" class="mock-input" value="https://sync.koalastuff.net/join#join:brave-eagle-80:pass" readonly style="flex: 1;" aria-label="Invite link">
<button class="mock-btn" id="demo-invite-copy" style="width: 40px; padding: 0.45rem 0; flex-shrink: 0; background: #334155;" title="Copy Invite Link"><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="14" height="14" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
<button class="mock-btn" id="demo-invite-copy" style="width: 40px; padding: 0.45rem 0; flex-shrink: 0; background: #2f3625; color: #f4f2ea;" title="Copy Invite Link"><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="14" height="14" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
</div>
</div>
<div class="mock-card" style="margin-bottom: 12px;">
@@ -505,7 +550,7 @@
<span class="mock-peer-meta">{{MOCK_05}}</span>
</div>
<div class="mock-peer-tab"><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></div>
<div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • {{MOCK_06}}</div>
<div class="mock-peer-status"><span style="color:#56ae6c;">●</span> 0:55 • {{MOCK_06}}</div>
</div>
<div class="mock-peer-item demo-peer-b">
<div class="mock-peer-header">
@@ -513,11 +558,11 @@
<span class="mock-peer-meta">{{MOCK_07}}</span>
</div>
<div class="mock-peer-tab"><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></div>
<div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • {{MOCK_06}}</div>
<div class="mock-peer-status"><span style="color:#56ae6c;">●</span> 0:55 • {{MOCK_06}}</div>
</div>
</div>
</div>
<button class="mock-btn" style="background:#ef4444; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 700; cursor: pointer; border: 1px solid #ef4444;">{{MOCK_08}}</button>
<button class="mock-btn" style="background:#b94642; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 700; cursor: pointer; border: 1px solid #b94642;">{{MOCK_08}}</button>
</div>
</div>
@@ -527,7 +572,7 @@
<label class="mock-section-label" for="demo-video-select" title="Choose the browser tab containing the video to sync">
{{MOCK_09}}
</label>
<select class="mock-input" id="demo-video-select" style="width: 100%; box-sizing: border-box; background: var(--card); border: 1px solid #334155; color: white; padding: 8px; border-radius: 8px; font-family: inherit; font-size: 0.75rem; outline: none; cursor: default;">
<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>
</select>
@@ -537,21 +582,21 @@
<label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;">
{{MOCK_10}}
</label>
<button class="mock-btn" style="background:transparent; border: 1px solid #334155; border-radius: 6px; padding: 2px 6px; font-size: 0.65rem; cursor:default; opacity:0.8; color: var(--text-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap;" title="Copy Invite Link">
<button class="mock-btn" style="background:transparent; border: 1px solid #2f3625; border-radius: 6px; padding: 2px 6px; font-size: 0.65rem; cursor:default; opacity:0.8; color: var(--text-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap;" title="Copy Invite Link">
<span><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="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></span>
{{MOCK_03}}
</button>
</div>
<div style="display: flex; gap: 8px; margin-bottom: 12px;">
<button class="mock-btn mock-btn-play" id="demo-play-btn" style="flex: 1; background: #22c55e; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Play command to everyone">{{MOCK_11}}</button>
<button class="mock-btn mock-btn-pause" id="demo-pause-btn" style="flex: 1; background: #ef4444; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Pause command to everyone">{{MOCK_12}}</button>
<button class="mock-btn mock-btn-play" id="demo-play-btn" style="flex: 1; background: #56ae6c; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Play command to everyone">{{MOCK_11}}</button>
<button class="mock-btn mock-btn-pause" id="demo-pause-btn" style="flex: 1; background: #b94642; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Pause command to everyone">{{MOCK_12}}</button>
</div>
<div style="display: flex; gap: 8px; margin-bottom: 15px; align-items: stretch;">
<button class="mock-btn" id="demo-force-sync" style="background: linear-gradient(135deg, #6366f1, #a855f7); flex: 1; color: white; border: none; font-weight: 700; border-radius: 8px; padding: 8px; cursor: pointer;" title="Force all users to sync up">
<button class="mock-btn" id="demo-force-sync" style="background: linear-gradient(135deg, #56ae6c, #c96736); flex: 1; color: white; border: none; font-weight: 700; border-radius: 8px; padding: 8px; cursor: pointer;" title="Force all users to sync up">
{{MOCK_13}}
</button>
<div class="mock-input" style="flex: 1; background: var(--card); border: 1px solid #334155; color: white; padding: 6px; border-radius: 8px; font-size: 0.75rem; display: flex; align-items: center; justify-content: space-between;" title="Choose sync target">
<div class="mock-input" style="flex: 1; background: var(--card); border: 1px solid #2f3625; color: white; padding: 6px; border-radius: 8px; font-size: 0.75rem; display: flex; align-items: center; justify-content: space-between;" title="Choose sync target">
<span>
{{MOCK_14}}
</span>
@@ -564,7 +609,7 @@
</label>
<div class="mock-card" style="margin-bottom: 15px; display: flex; flex-direction: column; gap: 6px;">
<div style="display: flex; justify-content: space-between; align-items: baseline;">
<span style="font-weight: 700; color: #ef4444; font-size: 11px;">PAUSE</span>
<span style="font-weight: 700; color: #b94642; font-size: 11px;">PAUSE</span>
<span style="font-size: 9px; color: var(--text-muted);">🐱 ChillCat @ 12:44:32</span>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 5px; margin-top: 4px;">
@@ -586,7 +631,7 @@
<span class="mock-peer-meta">{{MOCK_05}}</span>
</div>
<div class="mock-peer-tab"><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></div>
<div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • {{MOCK_06}}</div>
<div class="mock-peer-status"><span style="color:#56ae6c;">●</span> 0:55 • {{MOCK_06}}</div>
</div>
<div class="mock-peer-item demo-peer-b">
<div class="mock-peer-header">
@@ -594,7 +639,7 @@
<span class="mock-peer-meta">{{MOCK_07}}</span>
</div>
<div class="mock-peer-tab"><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></div>
<div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • {{MOCK_06}}</div>
<div class="mock-peer-status"><span style="color:#56ae6c;">●</span> 0:55 • {{MOCK_06}}</div>
</div>
</div>
</div>
@@ -602,14 +647,14 @@
<!-- SETTINGS TAB -->
<div id="mock-settings" class="mock-screen">
<div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 10px; border: 1px solid #334155;">
<div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 10px; border: 1px solid #2f3625;">
<label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;" title="Username helps others identify you.">
{{MOCK_18}}
</label>
<input type="text" class="mock-input" value="🐱 ChillCat" readonly style="width: 110px; padding: 4px; text-align: right; background: transparent; border: none; color: var(--accent); font-weight: 700;">
</div>
<div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
<div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #2f3625;">
<label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Filters out non-video tabs and unrelated domains to keep the list clean">
{{MOCK_19}}
</label>
@@ -619,7 +664,7 @@
</label>
</div>
<div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
<div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #2f3625;">
<label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Pauses automatically and waits for all peers when an episode changes, then sync-starts together.">
{{MOCK_20}}
</label>
@@ -629,7 +674,7 @@
</label>
</div>
<div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
<div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #2f3625;">
<label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Automatically copies the invite link to your clipboard when creating a new room.">
{{MOCK_21}}
</label>
@@ -639,7 +684,7 @@
</label>
</div>
<div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;">
<div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #2f3625;">
<label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Shows native system notifications when someone joins/leaves or plays/pauses.">
{{MOCK_22}}
</label>
@@ -649,11 +694,11 @@
</label>
</div>
<div style="margin-top: 15px; padding-top: 8px; border-top: 1px solid #334155;">
<div style="margin-top: 15px; padding-top: 8px; border-top: 1px solid #2f3625;">
<label class="mock-section-label" title="Tools for fixing connection issues">
{{MOCK_23}}
</label>
<button class="mock-btn" style="background:#334155; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 600; cursor: pointer; font-size: 11px;" title="Regenerate your internal ID and reconnect">
<button class="mock-btn" style="background:#2f3625; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 600; cursor: pointer; font-size: 11px;" title="Regenerate your internal ID and reconnect">
{{MOCK_24}}
</button>
<p style="font-size: 9px; color: var(--text-muted); margin-top: 5px; text-align: center; margin-bottom: 0;">
@@ -668,11 +713,11 @@
{{MOCK_26}}
</label>
<div class="mock-card" style="display:flex; align-items:center; gap: 10px; margin-bottom: 12px;">
<span class="status-dot status-online" style="width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #22c55e; box-shadow: 0 0 8px #22c55e;"></span>
<span class="status-dot status-online" style="width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #56ae6c; box-shadow: 0 0 8px #56ae6c;"></span>
<span style="flex:1; font-size: 0.75rem; font-weight: 600; color: white;">
{{MOCK_27}}
</span>
<button class="mock-btn" style="width: auto; padding: 4px 8px; font-size: 0.65rem; border: none; background: #334155; color: white; border-radius: 6px; cursor: pointer;" title="Copy logs to clipboard for sharing">
<button class="mock-btn" style="width: auto; padding: 4px 8px; font-size: 0.65rem; border: none; background: #2f3625; color: white; border-radius: 6px; cursor: pointer;" title="Copy logs to clipboard for sharing">
{{MOCK_28}}
</button>
</div>
@@ -684,14 +729,14 @@
<div>readyState: HAVE_ENOUGH_DATA</div>
<div>seekDelta: 0.05s</div>
<div>buffered: 300.2s</div>
<div>engineState: <span style="color:#22c55e; font-weight:700;">SYNCED</span></div>
<div>engineState: <span style="color:#56ae6c; font-weight:700;">SYNCED</span></div>
</div>
<label class="mock-section-label" title="Chronological log of all sync commands in the room">
{{MOCK_30}}
</label>
<div class="mock-card" style="font-size: 0.65rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 12px; max-height: 100px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;">
<div style="display: flex; justify-content: space-between; border-bottom: 1px solid #334155; padding-bottom: 4px;">
<div style="display: flex; justify-content: space-between; border-bottom: 1px solid #2f3625; padding-bottom: 4px;">
<span>🐱 ChillCat: PAUSE</span>
<span style="opacity: 0.5;">0:55</span>
</div>
@@ -710,7 +755,7 @@
</button>
</div>
<div style="max-height: 120px; overflow-y: auto; font-size: 0.65rem; font-family: monospace; background: #000; padding: 8px 10px; border-radius: 8px; color: #ccc; line-height: 1.4;">
<div style="color:#22c55e;">[18:37:32] EVENT: PLAY -&gt; ACK</div>
<div style="color:#56ae6c;">[18:37:32] EVENT: PLAY -&gt; ACK</div>
<div>[18:37:32] FORCE_SYNC -&gt; 0.05s diff</div>
<div>[18:37:38] EVENT: PAUSE -&gt; BROADCAST</div>
<div style="color:var(--text-muted);">[18:37:42] content_heartbeat: active</div>
@@ -729,7 +774,7 @@
sync.koalastuff.net/join…
</div>
<div class="demo-cursor" id="demo-cursor" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 2l13 11.5-6 .7 3.4 6.3-2.6 1.4-3.4-6.4L5 19.5z" fill="#f8fafc" stroke="#0f172a" stroke-width="1.4" stroke-linejoin="round"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 2l13 11.5-6 .7 3.4 6.3-2.6 1.4-3.4-6.4L5 19.5z" fill="#f4f2ea" stroke="#10190e" stroke-width="1.4" stroke-linejoin="round"/></svg>
</div>
</div>
</div>
@@ -1103,26 +1148,26 @@
<div class="player-video-canvas">
<div class="player-video-overlay"></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-stars" fill="#e2e8f0">
<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"/>
<circle class="film-star" cx="64" cy="10" r="0.9"/>
<circle class="film-star" cx="90" cy="28" r="0.6"/>
<circle class="film-star" cx="134" cy="22" r="0.8"/>
</g>
<circle class="film-moon" cx="122" cy="26" r="7.5" fill="#f1f5f9" opacity="0.92"/>
<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(30,27,75,0.7)"/>
<circle class="film-moon" cx="122" cy="26" r="7.5" fill="#f0efe7" opacity="0.92"/>
<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-mid-scroll">
<polygon points="20,76 26,60 32,76" fill="rgba(49,46,129,0.55)"/>
<polygon points="55,78 63,52 71,78" fill="rgba(49,46,129,0.55)"/>
<polygon points="95,76 101,62 107,76" fill="rgba(49,46,129,0.55)"/>
<polygon points="135,77 144,55 153,77" fill="rgba(49,46,129,0.55)"/>
<path d="M0,76 Q40,73 80,76 T160,76 Q200,73 240,76 T320,76 L320,92 L0,92 Z" fill="rgba(49,46,129,0.55)"/>
<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)"/>
<polygon points="95,76 101,62 107,76" fill="rgba(26, 47, 23, 0.55)"/>
<polygon points="135,77 144,55 153,77" fill="rgba(26, 47, 23, 0.55)"/>
<path d="M0,76 Q40,73 80,76 T160,76 Q200,73 240,76 T320,76 L320,92 L0,92 Z" fill="rgba(26, 47, 23, 0.55)"/>
</g>
<g class="film-fore-scroll">
<polygon points="40,84 52,48 64,84" fill="#090d16"/>
<polygon points="115,84 128,42 141,84" fill="#090d16"/>
<path d="M0,84 Q40,82 80,84 T160,84 L160,92 L0,92 Z" fill="#090d16"/>
<polygon points="40,84 52,48 64,84" fill="#040903"/>
<polygon points="115,84 128,42 141,84" fill="#040903"/>
<path d="M0,84 Q40,82 80,84 T160,84 L160,92 L0,92 Z" fill="#040903"/>
</g>
<circle class="film-bounce-ball" cx="80" cy="80" r="4.5" fill="#fde047"/>
</svg>
@@ -1156,26 +1201,26 @@
<div class="player-video-canvas">
<div class="player-video-overlay"></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-stars" fill="#e2e8f0">
<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"/>
<circle class="film-star" cx="64" cy="10" r="0.9"/>
<circle class="film-star" cx="90" cy="28" r="0.6"/>
<circle class="film-star" cx="134" cy="22" r="0.8"/>
</g>
<circle class="film-moon" cx="122" cy="26" r="7.5" fill="#f1f5f9" opacity="0.92"/>
<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(30,27,75,0.7)"/>
<circle class="film-moon" cx="122" cy="26" r="7.5" fill="#f0efe7" opacity="0.92"/>
<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-mid-scroll">
<polygon points="20,76 26,60 32,76" fill="rgba(49,46,129,0.55)"/>
<polygon points="55,78 63,52 71,78" fill="rgba(49,46,129,0.55)"/>
<polygon points="95,76 101,62 107,76" fill="rgba(49,46,129,0.55)"/>
<polygon points="135,77 144,55 153,77" fill="rgba(49,46,129,0.55)"/>
<path d="M0,76 Q40,73 80,76 T160,76 Q200,73 240,76 T320,76 L320,92 L0,92 Z" fill="rgba(49,46,129,0.55)"/>
<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)"/>
<polygon points="95,76 101,62 107,76" fill="rgba(26, 47, 23, 0.55)"/>
<polygon points="135,77 144,55 153,77" fill="rgba(26, 47, 23, 0.55)"/>
<path d="M0,76 Q40,73 80,76 T160,76 Q200,73 240,76 T320,76 L320,92 L0,92 Z" fill="rgba(26, 47, 23, 0.55)"/>
</g>
<g class="film-fore-scroll">
<polygon points="40,84 52,48 64,84" fill="#090d16"/>
<polygon points="115,84 128,42 141,84" fill="#090d16"/>
<path d="M0,84 Q40,82 80,84 T160,84 L160,92 L0,92 Z" fill="#090d16"/>
<polygon points="40,84 52,48 64,84" fill="#040903"/>
<polygon points="115,84 128,42 141,84" fill="#040903"/>
<path d="M0,84 Q40,82 80,84 T160,84 L160,92 L0,92 Z" fill="#040903"/>
</g>
<circle class="film-bounce-ball" cx="80" cy="80" r="4.5" fill="#fde047"/>
</svg>