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

feat(website): technical SEO and UI/UX accessibility improvements

Browse Source 
- Add LCP image preload for hero mascot
- Add HowTo structured data schema (3-step install guide)
- Update SoftwareApplication schema with screenshot + image fields
- Add glassmorphic :focus-visible outlines for keyboard accessibility
- Add content-visibility: auto to heavy offscreen sections for INP
- Expand lang-init.js auto-redirect to all 6 supported languages
- Remove impressum/datenschutz from sitemap.xml (noindex conflict)
This commit is contained in:
Koala
2026-06-01 01:57:16 +02:00
parent e29c6666b6
commit 1bb2123da2
13 changed files with 337 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/lang-init.js
+31 -23
View File
@@ -1,22 +1,30 @@
(function() {
var html = document.documentElement;
var path = window.location.pathname;
// Mapping of browser language codes to KoalaSync locale directories
var langMap = {
'de': 'de',
'fr': 'fr',
'es': 'es',
'pt': 'pt-BR',
'ru': 'ru'
};
// Check if we are on the root index page (either "/" or "/index.html" at the root)
var isRootIndex = path === '/' || path === '/index.html' || path === '';
if (isRootIndex) {
var savedLang = localStorage.getItem('koala_lang');
var browserLang = navigator.language.startsWith('de') ? 'de' : 'en';
var preferredLang = savedLang || browserLang;
if (preferredLang === 'de') {
// Redirect to German version
window.location.replace('de/');
var browserLang = navigator.language.split('-')[0];
var preferredLang = savedLang || langMap[browserLang] || 'en';
if (preferredLang !== 'en') {
window.location.replace(preferredLang + '/');
return;
}
}
var htmlClasses = html.className.split(' ');
var activeLang = null;
var hasStaticLang = false;
@@ -28,38 +36,38 @@
break;
}
}
if (hasStaticLang) {
localStorage.setItem('koala_lang', activeLang);
} else {
var savedLang = localStorage.getItem('koala_lang');
var browserLang = navigator.language.startsWith('de') ? 'de' : 'en';
activeLang = savedLang || browserLang;
var browserLang = navigator.language.split('-')[0];
activeLang = savedLang || langMap[browserLang] || 'en';
// Dynamic utility pages currently only support English and German markup.
// Fallback to English for any other language preference (e.g. fr, es) to avoid bilingual text duplication.
// Fallback to English for any other language to avoid bilingual text duplication.
if (activeLang !== 'de') {
activeLang = 'en';
}
html.classList.add('lang-' + activeLang);
html.lang = activeLang;
}
// Update titles dynamically based on page
var isIndex = path === '/' || path.endsWith('index.html') || path.split('/').pop() === '';
var isJoin = path.includes('join');
if (isIndex) {
var titles = {
en: 'KoalaSync | Real-time Video Synchronization for Friends',
de: 'KoalaSync | Echtzeit-Video-Synchronisation für Freunde'
var titles = {
en: 'KoalaSync | Real-time Video Synchronization for Friends',
de: 'KoalaSync | Echtzeit-Video-Synchronisation für Freunde'
};
document.title = titles[activeLang] || titles.en;
} else if (isJoin) {
var titles = {
en: 'Join Room | KoalaSync',
de: 'Raum beitreten | KoalaSync'
var titles = {
en: 'Join Room | KoalaSync',
de: 'Raum beitreten | KoalaSync'
};
document.title = titles[activeLang] || titles.en;
}
website/sitemap.xml
-12
View File
@@ -36,16 +36,4 @@
<changefreq>weekly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://sync.koalastuff.net/impressum</loc>
<lastmod>2026-05-31</lastmod>
<changefreq>yearly</changefreq>
<priority>0.3</priority>
</url>
<url>
<loc>https://sync.koalastuff.net/datenschutz</loc>
<lastmod>2026-05-31</lastmod>
<changefreq>yearly</changefreq>
<priority>0.3</priority>
</url>
</urlset>
website/style.css
+15
View File
@@ -48,6 +48,12 @@
box-sizing: border-box;
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 6px;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
background-color: var(--bg);
@@ -102,6 +108,15 @@ section {
padding: 6rem 0;
}
/* Content-visibility for offscreen sections to improve INP */
.use-cases-section,
#features,
#self-hosting,
.comparison-section {
content-visibility: auto;
contain-intrinsic-size: 700px;
}
/* --- Navigation --- */
nav {
position: fixed;
website/template.html
+35 -1
View File
@@ -7,6 +7,7 @@
<meta name="description" content="{{META_DESCRIPTION}}">
<link rel="preload" href="{{ASSET_PATH}}style.css" as="style">
<link rel="preload" as="image" href="{{ASSET_PATH}}assets/LookDownKoala.webp" imagesrcset="{{ASSET_PATH}}assets/LookDownKoala-1x.webp 90w, {{ASSET_PATH}}assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
<link rel="stylesheet" href="{{ASSET_PATH}}style.css">
<link rel="icon" type="image/webp" href="{{ASSET_PATH}}assets/NewLogoIcon_64.webp">
<link rel="canonical" href="https://sync.koalastuff.net/{{CANONICAL_PATH}}">
@@ -58,7 +59,40 @@
"description": "Watch Netflix, YouTube, Twitch, Jellyfin, Emby and almost any HTML5 video in perfect sync with friends. Open source, privacy-first, free.",
"softwareVersion": "1.9.3",
"license": "https://opensource.org/licenses/MIT",
"sameAs": "https://github.com/Shik3i/KoalaSync"
"sameAs": "https://github.com/Shik3i/KoalaSync",
"image": "https://sync.koalastuff.net/assets/NewLogoIcon.webp",
"screenshot": "https://sync.koalastuff.net/assets/PlatformJuggler_New.webp"
}
</script>
<script type="application/ld+json" id="schema-howto">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to synchronize videos with friends using KoalaSync",
"description": "Watch any video in perfect sync with friends across YouTube, Netflix, Twitch and more. No sign-up, no tracking.",
"step": [
{
"@type": "HowToStep",
"position": 1,
"name": "Install the browser extension",
"text": "Add KoalaSync to your browser from Chrome Web Store or Firefox Add-ons. It works on any website with a video element.",
"url": "https://sync.koalastuff.net/#how-it-works"
},
{
"@type": "HowToStep",
"position": 2,
"name": "Create a room",
"text": "Open the extension popup and click Create New Room. The invite link is automatically copied to your clipboard.",
"url": "https://sync.koalastuff.net/#how-it-works"
},
{
"@type": "HowToStep",
"position": 3,
"name": "Share and sync",
"text": "Send the invite link to your friends. Pick a video tab and enjoy synchronized playback in real time.",
"url": "https://sync.koalastuff.net/#how-it-works"
}
]
}
</script>
<script type="application/ld+json" id="schema-comparison">
website/www/de/index.html
+35 -1
View File
@@ -7,6 +7,7 @@
<meta name="description" content="Schaue Netflix, YouTube, Twitch und jedes HTML5-Video perfekt synchronisiert mit Freunden. Kostenlose, quelloffene Browser-Erweiterung für Chrome und Firefox. Keine Anmeldung erforderlich.">
<link rel="preload" href="../style.css" as="style">
<link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
<link rel="stylesheet" href="../style.css">
<link rel="icon" type="image/webp" href="../assets/NewLogoIcon_64.webp">
<link rel="canonical" href="https://sync.koalastuff.net/de/">
@@ -58,7 +59,40 @@
"description": "Watch Netflix, YouTube, Twitch, Jellyfin, Emby and almost any HTML5 video in perfect sync with friends. Open source, privacy-first, free.",
"softwareVersion": "1.9.3",
"license": "https://opensource.org/licenses/MIT",
"sameAs": "https://github.com/Shik3i/KoalaSync"
"sameAs": "https://github.com/Shik3i/KoalaSync",
"image": "https://sync.koalastuff.net/assets/NewLogoIcon.webp",
"screenshot": "https://sync.koalastuff.net/assets/PlatformJuggler_New.webp"
}
</script>
<script type="application/ld+json" id="schema-howto">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to synchronize videos with friends using KoalaSync",
"description": "Watch any video in perfect sync with friends across YouTube, Netflix, Twitch and more. No sign-up, no tracking.",
"step": [
{
"@type": "HowToStep",
"position": 1,
"name": "Install the browser extension",
"text": "Add KoalaSync to your browser from Chrome Web Store or Firefox Add-ons. It works on any website with a video element.",
"url": "https://sync.koalastuff.net/#how-it-works"
},
{
"@type": "HowToStep",
"position": 2,
"name": "Create a room",
"text": "Open the extension popup and click Create New Room. The invite link is automatically copied to your clipboard.",
"url": "https://sync.koalastuff.net/#how-it-works"
},
{
"@type": "HowToStep",
"position": 3,
"name": "Share and sync",
"text": "Send the invite link to your friends. Pick a video tab and enjoy synchronized playback in real time.",
"url": "https://sync.koalastuff.net/#how-it-works"
}
]
}
</script>
<script type="application/ld+json" id="schema-comparison">
website/www/es/index.html
+35 -1
View File
@@ -7,6 +7,7 @@
<meta name="description" content="Mira Netflix, YouTube, Twitch y cualquier video HTML5 en perfecta sincronización con amigos. Extensión de navegador gratuita y de código abierto para Chrome y Firefox. No se requiere registro.">
<link rel="preload" href="../style.css" as="style">
<link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
<link rel="stylesheet" href="../style.css">
<link rel="icon" type="image/webp" href="../assets/NewLogoIcon_64.webp">
<link rel="canonical" href="https://sync.koalastuff.net/es/">
@@ -58,7 +59,40 @@
"description": "Watch Netflix, YouTube, Twitch, Jellyfin, Emby and almost any HTML5 video in perfect sync with friends. Open source, privacy-first, free.",
"softwareVersion": "1.9.3",
"license": "https://opensource.org/licenses/MIT",
"sameAs": "https://github.com/Shik3i/KoalaSync"
"sameAs": "https://github.com/Shik3i/KoalaSync",
"image": "https://sync.koalastuff.net/assets/NewLogoIcon.webp",
"screenshot": "https://sync.koalastuff.net/assets/PlatformJuggler_New.webp"
}
</script>
<script type="application/ld+json" id="schema-howto">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to synchronize videos with friends using KoalaSync",
"description": "Watch any video in perfect sync with friends across YouTube, Netflix, Twitch and more. No sign-up, no tracking.",
"step": [
{
"@type": "HowToStep",
"position": 1,
"name": "Install the browser extension",
"text": "Add KoalaSync to your browser from Chrome Web Store or Firefox Add-ons. It works on any website with a video element.",
"url": "https://sync.koalastuff.net/#how-it-works"
},
{
"@type": "HowToStep",
"position": 2,
"name": "Create a room",
"text": "Open the extension popup and click Create New Room. The invite link is automatically copied to your clipboard.",
"url": "https://sync.koalastuff.net/#how-it-works"
},
{
"@type": "HowToStep",
"position": 3,
"name": "Share and sync",
"text": "Send the invite link to your friends. Pick a video tab and enjoy synchronized playback in real time.",
"url": "https://sync.koalastuff.net/#how-it-works"
}
]
}
</script>
<script type="application/ld+json" id="schema-comparison">
website/www/fr/index.html
+35 -1
View File
@@ -7,6 +7,7 @@
<meta name="description" content="Regardez Netflix, YouTube, Twitch et n'importe quelle vidéo HTML5 en parfaite synchronisation avec vos amis. Extension de navigateur gratuite et open-source pour Chrome et Firefox. Aucune inscription requise.">
<link rel="preload" href="../style.css" as="style">
<link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
<link rel="stylesheet" href="../style.css">
<link rel="icon" type="image/webp" href="../assets/NewLogoIcon_64.webp">
<link rel="canonical" href="https://sync.koalastuff.net/fr/">
@@ -58,7 +59,40 @@
"description": "Watch Netflix, YouTube, Twitch, Jellyfin, Emby and almost any HTML5 video in perfect sync with friends. Open source, privacy-first, free.",
"softwareVersion": "1.9.3",
"license": "https://opensource.org/licenses/MIT",
"sameAs": "https://github.com/Shik3i/KoalaSync"
"sameAs": "https://github.com/Shik3i/KoalaSync",
"image": "https://sync.koalastuff.net/assets/NewLogoIcon.webp",
"screenshot": "https://sync.koalastuff.net/assets/PlatformJuggler_New.webp"
}
</script>
<script type="application/ld+json" id="schema-howto">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to synchronize videos with friends using KoalaSync",
"description": "Watch any video in perfect sync with friends across YouTube, Netflix, Twitch and more. No sign-up, no tracking.",
"step": [
{
"@type": "HowToStep",
"position": 1,
"name": "Install the browser extension",
"text": "Add KoalaSync to your browser from Chrome Web Store or Firefox Add-ons. It works on any website with a video element.",
"url": "https://sync.koalastuff.net/#how-it-works"
},
{
"@type": "HowToStep",
"position": 2,
"name": "Create a room",
"text": "Open the extension popup and click Create New Room. The invite link is automatically copied to your clipboard.",
"url": "https://sync.koalastuff.net/#how-it-works"
},
{
"@type": "HowToStep",
"position": 3,
"name": "Share and sync",
"text": "Send the invite link to your friends. Pick a video tab and enjoy synchronized playback in real time.",
"url": "https://sync.koalastuff.net/#how-it-works"
}
]
}
</script>
<script type="application/ld+json" id="schema-comparison">
website/www/index.html
+35 -1
View File
@@ -7,6 +7,7 @@
<meta name="description" content="Watch Netflix, YouTube, Twitch & any HTML5 video in perfect sync with friends. Free, open-source browser extension for Chrome and Firefox. No sign-up needed.">
<link rel="preload" href="style.css" as="style">
<link rel="preload" as="image" href="assets/LookDownKoala.webp" imagesrcset="assets/LookDownKoala-1x.webp 90w, assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/webp" href="assets/NewLogoIcon_64.webp">
<link rel="canonical" href="https://sync.koalastuff.net/">
@@ -58,7 +59,40 @@
"description": "Watch Netflix, YouTube, Twitch, Jellyfin, Emby and almost any HTML5 video in perfect sync with friends. Open source, privacy-first, free.",
"softwareVersion": "1.9.3",
"license": "https://opensource.org/licenses/MIT",
"sameAs": "https://github.com/Shik3i/KoalaSync"
"sameAs": "https://github.com/Shik3i/KoalaSync",
"image": "https://sync.koalastuff.net/assets/NewLogoIcon.webp",
"screenshot": "https://sync.koalastuff.net/assets/PlatformJuggler_New.webp"
}
</script>
<script type="application/ld+json" id="schema-howto">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to synchronize videos with friends using KoalaSync",
"description": "Watch any video in perfect sync with friends across YouTube, Netflix, Twitch and more. No sign-up, no tracking.",
"step": [
{
"@type": "HowToStep",
"position": 1,
"name": "Install the browser extension",
"text": "Add KoalaSync to your browser from Chrome Web Store or Firefox Add-ons. It works on any website with a video element.",
"url": "https://sync.koalastuff.net/#how-it-works"
},
{
"@type": "HowToStep",
"position": 2,
"name": "Create a room",
"text": "Open the extension popup and click Create New Room. The invite link is automatically copied to your clipboard.",
"url": "https://sync.koalastuff.net/#how-it-works"
},
{
"@type": "HowToStep",
"position": 3,
"name": "Share and sync",
"text": "Send the invite link to your friends. Pick a video tab and enjoy synchronized playback in real time.",
"url": "https://sync.koalastuff.net/#how-it-works"
}
]
}
</script>
<script type="application/ld+json" id="schema-comparison">
website/www/lang-init.js
+31 -23
View File
@@ -1,22 +1,30 @@
(function() {
var html = document.documentElement;
var path = window.location.pathname;
// Mapping of browser language codes to KoalaSync locale directories
var langMap = {
'de': 'de',
'fr': 'fr',
'es': 'es',
'pt': 'pt-BR',
'ru': 'ru'
};
// Check if we are on the root index page (either "/" or "/index.html" at the root)
var isRootIndex = path === '/' || path === '/index.html' || path === '';
if (isRootIndex) {
var savedLang = localStorage.getItem('koala_lang');
var browserLang = navigator.language.startsWith('de') ? 'de' : 'en';
var preferredLang = savedLang || browserLang;
if (preferredLang === 'de') {
// Redirect to German version
window.location.replace('de/');
var browserLang = navigator.language.split('-')[0];
var preferredLang = savedLang || langMap[browserLang] || 'en';
if (preferredLang !== 'en') {
window.location.replace(preferredLang + '/');
return;
}
}
var htmlClasses = html.className.split(' ');
var activeLang = null;
var hasStaticLang = false;
@@ -28,38 +36,38 @@
break;
}
}
if (hasStaticLang) {
localStorage.setItem('koala_lang', activeLang);
} else {
var savedLang = localStorage.getItem('koala_lang');
var browserLang = navigator.language.startsWith('de') ? 'de' : 'en';
activeLang = savedLang || browserLang;
var browserLang = navigator.language.split('-')[0];
activeLang = savedLang || langMap[browserLang] || 'en';
// Dynamic utility pages currently only support English and German markup.
// Fallback to English for any other language preference (e.g. fr, es) to avoid bilingual text duplication.
// Fallback to English for any other language to avoid bilingual text duplication.
if (activeLang !== 'de') {
activeLang = 'en';
}
html.classList.add('lang-' + activeLang);
html.lang = activeLang;
}
// Update titles dynamically based on page
var isIndex = path === '/' || path.endsWith('index.html') || path.split('/').pop() === '';
var isJoin = path.includes('join');
if (isIndex) {
var titles = {
en: 'KoalaSync | Real-time Video Synchronization for Friends',
de: 'KoalaSync | Echtzeit-Video-Synchronisation für Freunde'
var titles = {
en: 'KoalaSync | Real-time Video Synchronization for Friends',
de: 'KoalaSync | Echtzeit-Video-Synchronisation für Freunde'
};
document.title = titles[activeLang] || titles.en;
} else if (isJoin) {
var titles = {
en: 'Join Room | KoalaSync',
de: 'Raum beitreten | KoalaSync'
var titles = {
en: 'Join Room | KoalaSync',
de: 'Raum beitreten | KoalaSync'
};
document.title = titles[activeLang] || titles.en;
}
website/www/pt-BR/index.html
+35 -1
View File
@@ -7,6 +7,7 @@
<meta name="description" content="Assista à Netflix, YouTube, Twitch e qualquer vídeo HTML5 em perfeita sincronia com amigos. Extensão de navegador gratuita e de código aberto para Chrome e Firefox. Sem necessidade de registro.">
<link rel="preload" href="../style.css" as="style">
<link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
<link rel="stylesheet" href="../style.css">
<link rel="icon" type="image/webp" href="../assets/NewLogoIcon_64.webp">
<link rel="canonical" href="https://sync.koalastuff.net/pt-BR/">
@@ -58,7 +59,40 @@
"description": "Watch Netflix, YouTube, Twitch, Jellyfin, Emby and almost any HTML5 video in perfect sync with friends. Open source, privacy-first, free.",
"softwareVersion": "1.9.3",
"license": "https://opensource.org/licenses/MIT",
"sameAs": "https://github.com/Shik3i/KoalaSync"
"sameAs": "https://github.com/Shik3i/KoalaSync",
"image": "https://sync.koalastuff.net/assets/NewLogoIcon.webp",
"screenshot": "https://sync.koalastuff.net/assets/PlatformJuggler_New.webp"
}
</script>
<script type="application/ld+json" id="schema-howto">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to synchronize videos with friends using KoalaSync",
"description": "Watch any video in perfect sync with friends across YouTube, Netflix, Twitch and more. No sign-up, no tracking.",
"step": [
{
"@type": "HowToStep",
"position": 1,
"name": "Install the browser extension",
"text": "Add KoalaSync to your browser from Chrome Web Store or Firefox Add-ons. It works on any website with a video element.",
"url": "https://sync.koalastuff.net/#how-it-works"
},
{
"@type": "HowToStep",
"position": 2,
"name": "Create a room",
"text": "Open the extension popup and click Create New Room. The invite link is automatically copied to your clipboard.",
"url": "https://sync.koalastuff.net/#how-it-works"
},
{
"@type": "HowToStep",
"position": 3,
"name": "Share and sync",
"text": "Send the invite link to your friends. Pick a video tab and enjoy synchronized playback in real time.",
"url": "https://sync.koalastuff.net/#how-it-works"
}
]
}
</script>
<script type="application/ld+json" id="schema-comparison">
website/www/ru/index.html
+35 -1
View File
@@ -7,6 +7,7 @@
<meta name="description" content="Смотрите Netflix, YouTube, Twitch и любые HTML5-видео в идеальной синхронизации с друзьями. Бесплатное расширение с открытым исходным кодом для Chrome и Firefox. Регистрация не требуется.">
<link rel="preload" href="../style.css" as="style">
<link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
<link rel="stylesheet" href="../style.css">
<link rel="icon" type="image/webp" href="../assets/NewLogoIcon_64.webp">
<link rel="canonical" href="https://sync.koalastuff.net/ru/">
@@ -58,7 +59,40 @@
"description": "Watch Netflix, YouTube, Twitch, Jellyfin, Emby and almost any HTML5 video in perfect sync with friends. Open source, privacy-first, free.",
"softwareVersion": "1.9.3",
"license": "https://opensource.org/licenses/MIT",
"sameAs": "https://github.com/Shik3i/KoalaSync"
"sameAs": "https://github.com/Shik3i/KoalaSync",
"image": "https://sync.koalastuff.net/assets/NewLogoIcon.webp",
"screenshot": "https://sync.koalastuff.net/assets/PlatformJuggler_New.webp"
}
</script>
<script type="application/ld+json" id="schema-howto">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to synchronize videos with friends using KoalaSync",
"description": "Watch any video in perfect sync with friends across YouTube, Netflix, Twitch and more. No sign-up, no tracking.",
"step": [
{
"@type": "HowToStep",
"position": 1,
"name": "Install the browser extension",
"text": "Add KoalaSync to your browser from Chrome Web Store or Firefox Add-ons. It works on any website with a video element.",
"url": "https://sync.koalastuff.net/#how-it-works"
},
{
"@type": "HowToStep",
"position": 2,
"name": "Create a room",
"text": "Open the extension popup and click Create New Room. The invite link is automatically copied to your clipboard.",
"url": "https://sync.koalastuff.net/#how-it-works"
},
{
"@type": "HowToStep",
"position": 3,
"name": "Share and sync",
"text": "Send the invite link to your friends. Pick a video tab and enjoy synchronized playback in real time.",
"url": "https://sync.koalastuff.net/#how-it-works"
}
]
}
</script>
<script type="application/ld+json" id="schema-comparison">
website/www/sitemap.xml
-12
View File
@@ -36,16 +36,4 @@
<changefreq>weekly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://sync.koalastuff.net/impressum</loc>
<lastmod>2026-05-31</lastmod>
<changefreq>yearly</changefreq>
<priority>0.3</priority>
</url>
<url>
<loc>https://sync.koalastuff.net/datenschutz</loc>
<lastmod>2026-05-31</lastmod>
<changefreq>yearly</changefreq>
<priority>0.3</priority>
</url>
</urlset>
website/www/style.css
+15
View File
@@ -48,6 +48,12 @@
box-sizing: border-box;
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 6px;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
background-color: var(--bg);
@@ -102,6 +108,15 @@ section {
padding: 6rem 0;
}
/* Content-visibility for offscreen sections to improve INP */
.use-cases-section,
#features,
#self-hosting,
.comparison-section {
content-visibility: auto;
contain-intrinsic-size: 700px;
}
/* --- Navigation --- */
nav {
position: fixed;