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

Polish extension and landing page UI

Browse Source
This commit is contained in:
KoalaDev
2026-07-11 11:21:47 +02:00
parent fbef3d180c
commit 7fea11de0a
6 changed files with 394 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/template.html
+24 -15
View File
@@ -294,14 +294,14 @@
<nav>
<div class="container nav-content">
<div class="logo-area">
<a class="logo-area" href="{{ASSET_PATH}}" aria-label="KoalaSync home">
<img class="nav-logo-img" src="{{ASSET_PATH}}assets/NewLogoIcon_128.webp" srcset="{{ASSET_PATH}}assets/NewLogoIcon_64.webp 64w, {{ASSET_PATH}}assets/NewLogoIcon_128.webp 128w, {{ASSET_PATH}}assets/NewLogoIcon.webp 256w" sizes="64px" alt="KoalaSync Logo" width="64" height="64">
<span>KoalaSync</span>
<div id="nav-extension-status" class="nav-ext-status" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" width="12" height="12"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span>Installed</span>
</div>
</div>
</a>
<div class="nav-links" id="primary-nav" role="navigation" aria-label="Primary">
<a href="#features"><span>{{NAV_FEATURES}}</span></a>
<a href="#how-it-works"><span>{{NAV_HOW_IT_WORKS}}</span></a>
@@ -359,7 +359,8 @@
</div>
</nav>
<header class="hero" id="main-content">
<main id="main-content">
<header class="hero">
<div class="container hero-grid">
<div class="hero-text">
<h1>{{HERO_TITLE}}</h1>
@@ -481,9 +482,10 @@
<polygon points="275,84 288,42 301,84" fill="#040903"/>
<path d="M0,84 Q80,82 160,84 T320,84 L320,92 L0,92 Z" fill="#040903"/>
</g>
<g class="film-lantern-g">
<circle class="film-lantern-halo" cx="80" cy="38" r="6.5" fill="#de7949" opacity="0.16"/>
<circle class="film-bounce-ball" cx="80" cy="38" r="2.4" fill="#de7949"/>
<g class="film-hero-bird-drift">
<g class="film-hero-bird" stroke="#dbd7cd" stroke-width="1.1" fill="none" stroke-linecap="round">
<path d="M64,33 q4.5,-4.5 9,0 q4.5,-4.5 9,0"/>
</g>
</g>
</svg>
<div class="demo-play-overlay" aria-hidden="true">
@@ -578,9 +580,10 @@
<polygon points="275,84 288,42 301,84" fill="#040903"/>
<path d="M0,84 Q80,82 160,84 T320,84 L320,92 L0,92 Z" fill="#040903"/>
</g>
<g class="film-lantern-g">
<circle class="film-lantern-halo" cx="80" cy="38" r="6.5" fill="#de7949" opacity="0.16"/>
<circle class="film-bounce-ball" cx="80" cy="38" r="2.4" fill="#de7949"/>
<g class="film-hero-bird-drift">
<g class="film-hero-bird" stroke="#dbd7cd" stroke-width="1.1" fill="none" stroke-linecap="round">
<path d="M64,33 q4.5,-4.5 9,0 q4.5,-4.5 9,0"/>
</g>
</g>
</svg>
<div class="demo-play-overlay" aria-hidden="true">
@@ -679,7 +682,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 #2f3625; 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: var(--text); 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 class="demo-title-text-ep1">Stranger Things - S4E1</option>
</select>
@@ -703,7 +706,7 @@
<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 #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">
<div class="mock-input" style="flex: 1; background: var(--card); border: 1px solid #2f3625; color: var(--text); 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>
@@ -821,7 +824,7 @@
</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: #56ae6c; box-shadow: 0 0 8px #56ae6c;"></span>
<span style="flex:1; font-size: 0.75rem; font-weight: 600; color: white;">
<span style="flex:1; font-size: 0.75rem; font-weight: 600; color: var(--text);">
{{MOCK_27}}
</span>
<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">
@@ -1276,7 +1279,9 @@
<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="#de7949"/>
<g class="film-hero-bird" stroke="#dbd7cd" stroke-width="1.2" fill="none" stroke-linecap="round">
<path d="M62,30 q5,-5 10,0 q5,-5 10,0"/>
</g>
</svg>
</div>
<div class="player-controls">
@@ -1329,7 +1334,9 @@
<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="#de7949"/>
<g class="film-hero-bird" stroke="#dbd7cd" stroke-width="1.2" fill="none" stroke-linecap="round">
<path d="M62,30 q5,-5 10,0 q5,-5 10,0"/>
</g>
</svg>
</div>
<div class="player-controls">
@@ -1561,11 +1568,13 @@
</div>
</section>
</main>
<footer>
<div class="container">
<p>&copy; 2026 KoalaSync. {{FOOTER_MIT}}</p>
<p style="font-size: 0.8rem; margin-top: 0.5rem;">{{FOOTER_RAM}}</p>
<p style="font-size: 0.72rem; margin-top: 1.2rem; color: var(--text-muted); opacity: 0.65; max-width: 650px; margin-left: auto; margin-right: auto; line-height: 1.5;">{{FOOTER_DISCLAIMER}}</p>
<p class="footer-disclaimer" style="font-size: 0.72rem; margin-top: 1.2rem; max-width: 650px; margin-left: auto; margin-right: auto; line-height: 1.5;">{{FOOTER_DISCLAIMER}}</p>
<div style="margin-top: 1.5rem; font-size: 0.8rem; display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
<a href="{{ASSET_PATH}}{{FOOTER_LEGAL_LINK}}" style="color: var(--text-muted); text-decoration: none;"><span>{{FOOTER_LEGAL}}</span></a>
<a href="{{ASSET_PATH}}{{FOOTER_PRIVACY_LINK}}" style="color: var(--text-muted); text-decoration: none;"><span>{{FOOTER_PRIVACY}}</span></a>