From e29c6666b6b2d527e2749daa3f4635476cd51f30 Mon Sep 17 00:00:00 2001 From: Koala <6156589+Shik3i@users.noreply.github.com> Date: Mon, 1 Jun 2026 01:42:42 +0200 Subject: [PATCH] feat(website): redesign bento tiles in 'Why KoalaSync' section - Swap last two tiles: Invitation becomes 2nd-last (bento-large), Self-Hosting becomes last small tile - bento-large layout: icon centered above heading, 33/67 grid split - Fix icon consistency on small tiles (uniform 44x44 rounded squares) - Improve responsive breakpoints for all viewports - Delete legacy website/index.html (obsoleted by template + build.js) --- website/index.html | 1036 ---------------------------------- website/style.css | 118 +++- website/template.html | 24 +- website/www/de/index.html | 24 +- website/www/es/index.html | 24 +- website/www/fr/index.html | 24 +- website/www/index.html | 24 +- website/www/pt-BR/index.html | 24 +- website/www/ru/index.html | 24 +- website/www/style.css | 118 +++- 10 files changed, 304 insertions(+), 1136 deletions(-) delete mode 100644 website/index.html diff --git a/website/index.html b/website/index.html deleted file mode 100644 index 74ce221..0000000 --- a/website/index.html +++ /dev/null @@ -1,1036 +0,0 @@ - - - - - - KoalaSync | Sync Netflix, YouTube & Any Video with Friends - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
-
- - - -
-
-
-
v1.5.3 OUT NOWv1.5.3 JETZT VERFÜGBAR
-

- Watch Together.
Sync Perfectly.
- Gemeinsam schauen.
Perfekt synchron.
-

-

- Your remote movie night without lags. No registration, no data collection. Just share a link and watch together. - Dein Kino-Abend auf Distanz. Keine Lags, keine Anmeldung. Einfach Link teilen und zusammen schauen. -

-
- A cute koala standing and looking down at the download buttons - Ein niedlicher Koala steht da und schaut nach unten auf die Download-Buttons -
- -
- - -
-
-
-
KoalaSync LogoKoalaSync
- - - v1.9.3 - -
-
- - - - -
-
- -
-
-
- Active RoomAktiver Raum - brave-eagle-80 -
- Official ServerOffizieller Server -
-
-
Invite LinkEinladungs-Link
-
- - -
-
-
-
Peers in RoomTeilnehmer im Raum
-
-
-
- CoolUsername - YOUICH -
-
🎬 Stranger Things - S4E1
-
0:55 • PlayingWiedergabe
-
-
-
- KoalaPC - PeerPartner -
-
🎬 Stranger Things - S4E1
-
0:55 • PlayingWiedergabe
-
-
-
- -
- - -
-
- - -
- -
- - -
-
- - -
- -
- -
- - Jump to OthersZu anderen springen - - -
-
- - -
-
- PAUSE - CoolUsername @ 12:44:32 -
-
-
-
- 🐨 KoalaPC -
-
-
- - -
-
- - Episode Lobby -
-
- 🎬 Stranger Things - S4E2 -
-
- Waiting for 1 peer (KoalaPC)...Warten auf 1 Partner (KoalaPC)... -
- -
- - -
-
-
-
- CoolUsername - YOUICH -
-
🎬 Stranger Things - S4E1
-
0:55 • PlayingWiedergabe
-
-
-
- KoalaPC - PeerPartner -
-
🎬 Stranger Things - S4E1
-
0:55 • PlayingWiedergabe
-
-
-
-
- - -
-
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -

- Use this if you see "Duplicate Identity" errors. - Nutze dies bei "Duplicate Identity" Fehlern. -

-
-
- - -
- -
- - - ConnectedVerbunden - - -
- - -
-
readyState: HAVE_ENOUGH_DATA
-
seekDelta: 0.05s
-
buffered: 300.2s
-
engineState: SYNCED
-
- - -
-
- CoolUsername: PAUSE - 0:55 -
-
- KoalaPC: PLAY - 0:00 -
-
- -
- - -
-
-
[18:37:32] EVENT: PLAY -> ACK
-
[18:37:32] FORCE_SYNC -> 0.05s diff
-
[18:37:38] EVENT: PAUSE -> BROADCAST
-
[18:37:42] content_heartbeat: active
-
- -
- GitHub Repository -
v1.9.3
-
-
-
-
-
-
-
- -
-
- A cute koala juggling multiple browser tabs showing streaming platforms - Ein niedlicher Koala jongliert mit mehreren Browser-Tabs, auf denen verschiedene Streamingdienste laufen -

- Works on your favorite platforms - Funktioniert auf deinen Lieblingsplattformen -

-
- - - - - - - -
-
-
- -
-
-

- Perfect for Any Occasion - Perfekt für jeden Anlass -

-

- Whether near or far, KoalaSync brings people together around their favorite videos. - Ob nah oder fern, KoalaSync bringt Menschen bei ihren Lieblingsvideos zusammen. -

-
-
- Two cute koalas sitting together and sharing a bucket of popcorn - Zwei niedliche Koalas sitzen zusammen und teilen sich einen Eimer Popcorn -

- Movie Night with Friends - Filmabend mit Freunden -

-

Sync your movies in real time and talk via Discord, Zoom, or your favorite voice call application. It feels just like sitting in the same room.

-

Synchronisiere eure Filme in Echtzeit und quatscht nebenbei auf Discord, Zoom oder im Tool eurer Wahl. Es fühlt sich an, als säßet ihr im selben Raum.

-
-
- A koala professor presenting on a screen to two remote student koalas - Ein Koala-Professor hält einen Vortrag auf einem Bildschirm vor zwei remote zugeschalteten Schüler-Koalas -

- Remote Learning - Gemeinsam Lernen -

-

Analyze online tutorials, lectures, or developer training streams together with classmates or colleagues. Pause and discuss complex steps in perfect harmony.

-

Analysiert Online-Tutorials, Vorlesungen oder Streams gemeinsam mit Mitschülern oder Kollegen. Pausiert und besprecht komplizierte Schritte in perfektem Sync.

-
-
- A cute koala couple watching together remotely; one is sitting at a PC and the other is in bed with a laptop, with flying hearts between them - Ein niedliches Koala-Pärchen schaut remote zusammen; einer sitzt am PC und sie liegt mit dem Laptop im Bett, während Herzen zwischen ihnen fliegen -

- Long-Distance Relationships - Fernbeziehungen -

-

Bridge the distance and enjoy date nights. Experience every plot twist, laugh at the same jokes, and share emotional moments at the exact same millisecond.

-

Überbrückt die Distanz und genießt gemeinsame Date-Nächte. Erlebt jeden Plot-Twist, lacht über dieselben Witze und teilt emotionale Momente zur selben Millisekunde.

-
-
-
-
- -
-
- A cute koala with a question mark above its head wondering why to choose KoalaSync - Ein niedlicher Koala mit einem Fragezeichen über dem Kopf, der sich fragt, warum er KoalaSync wählen soll -

- Why KoalaSync?Warum KoalaSync? -

-

- Built for reliable sync, privacy-first design, and easy setup. - Entwickelt für zuverlässigen Sync, Datenschutz und einfache Einrichtung. -

- -
-
-

- - Full Control / Instant Sync - Volle Kontrolle, in Echtzeit -

-

One pauses, everyone pauses. One seeks, everyone follows. Our two-phase sync protocol coordinates playback in real time across all participants.

-

Einer pausiert, alle pausieren. Einer spult, alle folgen. Unser Zwei-Phasen-Synchronisationsprotokoll koordiniert die Wiedergabe aller Teilnehmer in Echtzeit.

-
-
-

- 🎬 - Endless Binge-Watching - Grenzenloses Bingen -

-

Autoplay in sync. KoalaSync automatically detects episode transitions and holds playback until all peers have successfully loaded the next video.

-

Nächste Episode startet für jeden zeitgleich. KoalaSync erkennt den Episodenwechsel und pausiert, bis jeder Teilnehmer das neue Video fertig geladen hat.

-
-
-

- 🛡️ - Zero Accounts / Pure Privacy - Keine Accounts / Datenschutz -

-

No registration, no tracking, no bullshit. Just share a link and watch. The server runs entirely in RAM and purges your room when you leave.

-

Kein Login. Keine Daten. Einfach Link teilen und schauen. Der Server läuft flüchtig im RAM und löscht deinen Raum komplett nach dem Verlassen.

-
-
-

- 🌐 - Universal HTML5 Support - Universeller HTML5-Support -

-

Works on YouTube, Twitch, Netflix, Jellyfin, Emby, and almost any standard webpage containing a HTML5 video element. Also compatible with custom self-hosted setups.

-

Unterstützt YouTube, Twitch, Netflix, Jellyfin, Emby und fast jede beliebige Webseite mit einem HTML5-Video-Tag. Ideal auch für eigene Medienbibliotheken.

-
-
-

- 🐳 - Self-Hostable & Docker-Ready - Self-Hostable & Docker-Ready -

-

Our official servers are free and fast, but you can take full ownership if you want to. Launch your own private relay server in seconds via Docker.

-

Unsere Server sind kostenlos und schnell, aber du kannst auch die volle Kontrolle übernehmen, wenn du willst. Starte dein eigenes privates Relay in Sekunden via Docker.

-
-
-

- 🔗 - Instant Invites / 1-Click Join - Direkte Einladungen & 1-Klick Beitritt -

-

No IP addresses or passwords to exchange. Share a generated invite link with your friends to let them join your room automatically with a single click.

-

Keine lästigen IPs oder Passwörter austauschen. Teile einfach einen Einladungslink mit deinen Freunden, um sie mit einem Klick in den Raum zu holen.

-
-
- -
-
- -
-
- A cute koala weighing options in both hands to compare KoalaSync vs Teleparty - Ein niedlicher Koala, der Optionen in beiden Händen abwägt, um KoalaSync mit Teleparty zu vergleichen -

- KoalaSync vs. Teleparty - KoalaSync vs. Teleparty -

-

- See why open source, ad-free and privacy-first is the superior way to watch together. - Erfahre, warum Open Source, Werbefreiheit und echter Datenschutz die bessere Wahl für gemeinsames Schauen sind. -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureFunktionKoalaSyncTeleparty
- Cost / PaywallsKosten / Paywalls - Premium subscriptions, hidden fees or locked features.Premium-Abos, versteckte Kosten oder gesperrte Funktionen. - 100% Free100% Kostenlos - ✘ Paid Tiers / Premium LocksPremium-Abo / Paywalls - [1] -
- License / Code AuditableLizenz / Quellcode - Whether the source code is open and freely auditable.Ob der Quellcode quelloffen und frei einsehbar ist. - Open Source (MIT)Open Source (MIT) - ✘ ProprietaryProprietär - [2] -
- Self-HostingSelf-Hosting - Ability to deploy your own private relay server.Möglichkeit, einen eigenen privaten Relay-Server zu betreiben. - Yes (Docker-ready)Ja (Docker-bereit) - ✘ NoNein - [2] -
- Privacy & TrackingDatenschutz & Tracking - Registration requirements, tracking cookies and analytics.Registrierungszwang, Tracking-Cookies und Analysen. - Zero-Persistence (RAM-only)Keine Speicherung (RAM-only) - ✘ Google Analytics & CookiesGoogle Analytics & Cookies - [2] -
- Site CompatibilityKompatibilität - Supported websites and player compatibility.Unterstützte Webseiten und Player-Kompatibilität. - Almost any HTML5 VideoFast jedes HTML5-Video[3] - ✘ Supported sites onlyNur unterstützte Seiten - [1] -
-
-

- * Comparison state: May 2026. - * Stand des Vergleichs: Mai 2026. -

-

- [1] - Official Teleparty Premium pricing and supported networks details: - Details zu Preisen und unterstützten Netzwerken von Teleparty Premium: - teleparty.com/premium -

-

- [2] - Teleparty privacy policies and tracking data collection: - Datenschutzerklärung und Tracker-Erfassung von Teleparty: - teleparty.com/privacy -

-

- [3] - Works on websites that allow script injections into standard HTML5 video tags. Websites with highly strict Content Security Policies (CSP), DRM copy protection, or heavily obfuscated player wrappers (like complex shadow DOMs) might restrict automated control or injection. - Funktioniert auf allen Seiten, die Skript-Injektionen in Standard-HTML5-Videoplayer erlauben. Seiten mit extrem strengen Content Security Policies (CSP), DRM-Kopierschutz oder stark verschachtelten Player-Wrappern (z. B. komplexe Shadow-DOMs) können die automatische Steuerung blockieren. -

-
-
-
-
- -
-
-

- Getting StartedErste Schritte -

- -
-
-
-
01
-

Install ExtensionErweiterung installieren

-

Add KoalaSync to your browser from the Chrome Web Store, Firefox Add-ons, or download the latest developer ZIP from GitHub.

-

Füge KoalaSync aus dem Chrome Web Store, den Firefox Add-ons oder über die Entwickler-ZIP von GitHub zu deinem Browser hinzu.

-
- -
-
-
-
- - - -
-
- https://sync.koalastuff.net -
-
-
- KoalaSync Extension -
-
-
-
-
-
- -
-
KoalaSync
-
- Privacy-first video synchronizer - Privatsphäre-fokussierte Video-Synchronisation -
-
-
-
-
- Chrome Logo - Download for Chrome - Download für Chrome -
-
- Firefox Logo - Download for Firefox - Download für Firefox -
-
-
- - -
- - - -
-
-
-
-
-
-
-
02
-

Create a RoomRaum erstellen

-

Open the extension popup and click "+ Create New Room". KoalaSync automatically generates a secure Room ID and Password, joins it, and copies the invite link to your clipboard.

-

Öffne die Erweiterung und klicke auf „+ Neuer Raum“. KoalaSync generiert automatisch eine sichere Raum-ID samt Passwort, tritt dem Raum bei und kopiert den Einladungslink in deine Zwischenablage.

-
- -
-
-
-
- KoalaSync Logo - KoalaSync -
-
v1.9.3
-
-
-
- Room - Raum -
-
- Sync - Sync -
-
- Settings - Optionen -
-
-
-
- + Create New Room - + Neuer Raum -
-
- -
- - Manual Connect / Advanced - Manuell verbinden / Erweitert -
- -
- 📋 - Invite link copied! - Einladungslink kopiert! -
-
-
-
-
-
-
-
03
-

Share & SyncTeilen & Synchronisieren

-

Send the invite link to your friends. Once they join, select your video tab and enjoy synchronized playback.

-

Senden Sie den Einladungslink an Ihre Freunde. Sobald sie beitreten, wählen Sie Ihren Video-Tab aus und genießen Sie die synchronisierte Wiedergabe.

-
- -
-
- -
-
- 🐨 KoalaPC - PLAYING -
-
-
-
-
-
- -
-
-
-
- 42:15 -
-
- - -
-
-
-
-
- IN SYNC - SYNCHRON -
-
- - -
-
- 💻 LaptopKoala - PLAYING -
-
-
-
-
-
- -
-
-
-
- 42:15 -
-
-
-
-
-
-
-
- - -
-
-

- For Self-HostersFür Self-Hoster -

-

- Don't trust our server? Maintain full data sovereignty. Deploy your own private relay server in minutes. - Du traust dem Server nicht? Behalte die volle Datenhoheit. Richte deinen eigenen privaten Relay-Server in wenigen Minuten ein. -

- - -
- A cute koala sitting at a laptop deploying a Docker container for self-hosting - Ein niedlicher Koala sitzt am Laptop und deployt einen Docker-Container für das Self-Hosting -
- -
-
-
- - - -
-
- - -
-
-
- - -
-
services:
-  koala-sync:
-    image: ghcr.io/shik3i/koalasync:latest
-    container_name: KoalaSync
-    restart: always
-    # Access internally by proxying to container port 3000
-    environment:
-      - TZ=Europe/Berlin
-      - PORT=3000
-      - MIN_VERSION=1.0.0
-      - MAX_ROOMS=100
-      - MAX_PEERS_PER_ROOM=50
-    pids_limit: 2048
- -
- -
-
sync.koalastuff.net {
-    # Specify the web root inside the container
-    root * /var/www/html
-
-    # Enable static file server to deliver HTML, CSS, JS
-    file_server
-}
-
-syncserver.koalastuff.net {
-    reverse_proxy KoalaSync:3000
-}
-
-
-
-
-
- -
-
-

- Not convinced? See for yourself. - Noch nicht überzeugt? Überzeug dich selbst. -

-

- KoalaSync is 100% open source, ad-free and tracking-free. Audit our codebase on GitHub or install the browser extension directly. - KoalaSync ist zu 100 % Open Source, werbefrei und trackingsicher. Überprüfe unseren Code auf GitHub oder installiere direkt die Browser-Erweiterung. -

- - - - A cute koala holding a GitHub repository page next to the GitHub mascot Octocat - Ein niedlicher Koala hält eine GitHub-Projektseite zusammen mit dem GitHub Maskottchen Octocat - - - -
-
- - - - - - diff --git a/website/style.css b/website/style.css index d088fdc..41dd2ac 100644 --- a/website/style.css +++ b/website/style.css @@ -744,16 +744,16 @@ input:checked + .mock-slider:before { /* Feature Icon with Inline SVG Wrapper */ .feature-icon-svg { - display: inline-flex; + display: flex; + flex-shrink: 0; align-items: center; justify-content: center; - width: 42px; - height: 42px; + width: 44px; + height: 44px; background: rgba(99, 102, 241, 0.12); color: var(--accent); border-radius: 12px; - margin-right: 12px; - vertical-align: middle; + margin-right: 14px; transition: all 0.3s ease; } @@ -765,14 +765,15 @@ input:checked + .mock-slider:before { } .bento-icon { - width: 20px; - height: 20px; + width: 22px; + height: 22px; display: block; + flex-shrink: 0; } .feature-card h3 { margin-bottom: 1rem; - font-size: 1.35rem; + font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; @@ -788,6 +789,56 @@ input:checked + .mock-slider:before { .feature-card.bento-large { grid-column: span 2; background: linear-gradient(135deg, rgba(30, 41, 59, 0.45) 0%, rgba(99, 102, 241, 0.08) 100%); + padding: 3rem 3.5rem; + display: grid; + grid-template-columns: 1fr 2fr; + gap: 3rem; + align-items: center; +} + +.feature-card.bento-large h3 { + flex-direction: column; + align-items: center; + text-align: center; + gap: 1rem; + margin-bottom: 0; + font-size: 1.25rem; +} + +.feature-card.bento-large .feature-icon, +.feature-card.bento-large .feature-icon-svg { + width: 52px; + height: 52px; + border-radius: 14px; + margin-right: 0; + flex-shrink: 0; +} + +.feature-card.bento-large .bento-icon { + width: 24px; + height: 24px; +} + +.feature-card.bento-large p { + font-size: 1rem; + line-height: 1.7; + margin: 0; +} + +.feature-card.bento-large::after { + content: ''; + position: absolute; + top: 0; + left: 2.5rem; + right: 2.5rem; + height: 2px; + background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.4), transparent); + opacity: 0; + transition: opacity 0.3s ease; +} + +.feature-card.bento-large:hover::after { + opacity: 1; } @media (max-width: 900px) { @@ -797,6 +848,11 @@ input:checked + .mock-slider:before { } .feature-card.bento-large { grid-column: span 2; + padding: 2.5rem; + gap: 2rem; + } + .feature-card.bento-large h3 { + font-size: 1.15rem; } } @@ -807,6 +863,52 @@ input:checked + .mock-slider:before { } .feature-card.bento-large { grid-column: span 1; + display: flex; + flex-direction: column; + padding: 1.75rem; + gap: 1rem; + } + .feature-card.bento-large h3 { + flex-direction: row; + align-items: center; + text-align: left; + gap: 0.75rem; + margin-bottom: 0; + font-size: 1.15rem; + } + .feature-card.bento-large .feature-icon, + .feature-card.bento-large .feature-icon-svg { + width: 40px; + height: 40px; + border-radius: 10px; + margin-right: 0; + } + .feature-card.bento-large .bento-icon { + width: 18px; + height: 18px; + } + .feature-card.bento-large p { + font-size: 0.9rem; + line-height: 1.6; + } + .feature-card.bento-large::after { + display: none; + } + .feature-card { + padding: 1.75rem; + } + .feature-card h3 { + font-size: 1.1rem; + } + .feature-icon-svg { + width: 40px; + height: 40px; + border-radius: 10px; + margin-right: 12px; + } + .bento-icon { + width: 18px; + height: 18px; } } diff --git a/website/template.html b/website/template.html index 56e0860..0c641c8 100644 --- a/website/template.html +++ b/website/template.html @@ -580,19 +580,8 @@

{{FEATURE_4_DESC}}

- +
-

- - - - {{FEATURE_5_TITLE}} -

-

{{FEATURE_5_DESC}}

-
- - -

@@ -601,6 +590,17 @@

{{FEATURE_6_DESC}}

+ + +
+

+ + + + {{FEATURE_5_TITLE}} +

+

{{FEATURE_5_DESC}}

+
diff --git a/website/www/de/index.html b/website/www/de/index.html index e02d6b4..6516236 100644 --- a/website/www/de/index.html +++ b/website/www/de/index.html @@ -580,19 +580,8 @@

Unterstützt YouTube, Twitch, Netflix, Jellyfin, Emby und fast jede beliebige Webseite mit einem HTML5-Video-Tag. Ideal auch für eigene Medienbibliotheken.

- +
-

- - - - Self-Hostable & Docker-Ready -

-

Unsere Server sind kostenlos und schnell, aber du kannst auch die volle Kontrolle übernehmen, wenn du willst. Starte dein eigenes privates Relay in Sekunden via Docker.

-
- - -

@@ -601,6 +590,17 @@

Keine lästigen IPs oder Passwörter austauschen. Teile einfach einen Einladungslink mit deinen Freunden, um sie mit einem Klick in den Raum zu holen.

+ + +
+

+ + + + Self-Hostable & Docker-Ready +

+

Unsere Server sind kostenlos und schnell, aber du kannst auch die volle Kontrolle übernehmen, wenn du willst. Starte dein eigenes privates Relay in Sekunden via Docker.

+
diff --git a/website/www/es/index.html b/website/www/es/index.html index 1fd56ab..3beb29f 100644 --- a/website/www/es/index.html +++ b/website/www/es/index.html @@ -580,19 +580,8 @@

Funciona en YouTube, Twitch, Netflix, Jellyfin, Emby y casi cualquier página web estándar que contenga un elemento de video HTML5. También es compatible con configuraciones personalizadas.

- +
-

- - - - Auto-alojable y listo para Docker -

-

Nuestros servidores oficiales son gratuitos y rápidos, pero puedes tomar el control total si lo deseas. Inicia tu propio servidor de retransmisión privado en segundos a través de Docker.

-
- - -

@@ -601,6 +590,17 @@

Sin direcciones IP o contraseñas que intercambiar. Comparte un enlace de invitación generado para permitir que tus amigos se unan automáticamente a tu sala con un solo clic.

+ + +
+

+ + + + Auto-alojable y listo para Docker +

+

Nuestros servidores oficiales son gratuitos y rápidos, pero puedes tomar el control total si lo deseas. Inicia tu propio servidor de retransmisión privado en segundos a través de Docker.

+
diff --git a/website/www/fr/index.html b/website/www/fr/index.html index 6c9e0f5..e4bf99d 100644 --- a/website/www/fr/index.html +++ b/website/www/fr/index.html @@ -580,19 +580,8 @@

Fonctionne sur YouTube, Twitch, Netflix, Jellyfin, Emby et presque n'importe quelle page web standard contenant un élément vidéo HTML5. Également compatible avec les installations personnalisées.

- +
-

- - - - Hébergeable soi-même & prêt pour Docker -

-

Nos serveurs officiels sont gratuits et rapides, mais vous pouvez prendre le contrôle total si vous le souhaitez. Lancez votre propre serveur relais privé en quelques secondes via Docker.

-
- - -

@@ -601,6 +590,17 @@

Pas d'adresses IP ou de mots de passe à échanger. Partagez un lien d'invitation généré pour permettre à vos amis de rejoindre automatiquement votre salon en un seul clic.

+ + +
+

+ + + + Hébergeable soi-même & prêt pour Docker +

+

Nos serveurs officiels sont gratuits et rapides, mais vous pouvez prendre le contrôle total si vous le souhaitez. Lancez votre propre serveur relais privé en quelques secondes via Docker.

+
diff --git a/website/www/index.html b/website/www/index.html index 1b12217..e2c5c75 100644 --- a/website/www/index.html +++ b/website/www/index.html @@ -580,19 +580,8 @@

Works on YouTube, Twitch, Netflix, Jellyfin, Emby, and almost any standard webpage containing a HTML5 video element. Also compatible with custom self-hosted setups.

- +
-

- - - - Self-Hostable & Docker-Ready -

-

Our official servers are free and fast, but you can take full ownership if you want to. Launch your own private relay server in seconds via Docker.

-
- - -

@@ -601,6 +590,17 @@

No IP addresses or passwords to exchange. Share a generated invite link with your friends to let them join your room automatically with a single click.

+ + +
+

+ + + + Self-Hostable & Docker-Ready +

+

Our official servers are free and fast, but you can take full ownership if you want to. Launch your own private relay server in seconds via Docker.

+
diff --git a/website/www/pt-BR/index.html b/website/www/pt-BR/index.html index d9e3f30..984fdd3 100644 --- a/website/www/pt-BR/index.html +++ b/website/www/pt-BR/index.html @@ -580,19 +580,8 @@

Funciona no YouTube, Twitch, Netflix, Jellyfin, Emby e em quase qualquer página web padrão com um elemento de vídeo HTML5. Também é compatível com servidores próprios.

- +
-

- - - - Auto-hospedável e pronto para Docker -

-

Nossos servidores oficiais são rápidos e gratuitos, mas você pode ter controle total se desejar. Inicie seu próprio servidor de retransmissão privado em segundos via Docker.

-
- - -

@@ -601,6 +590,17 @@

Sem troca de endereços IP ou senhas. Compartilhe um link de convite gerado para que seus amigos entrem automaticamente na sua sala com um único clique.

+ + +
+

+ + + + Auto-hospedável e pronto para Docker +

+

Nossos servidores oficiais são rápidos e gratuitos, mas você pode ter controle total se desejar. Inicie seu próprio servidor de retransmissão privado em segundos via Docker.

+
diff --git a/website/www/ru/index.html b/website/www/ru/index.html index d47f1b3..e1e19d1 100644 --- a/website/www/ru/index.html +++ b/website/www/ru/index.html @@ -580,19 +580,8 @@

Работает на YouTube, Twitch, Netflix, Jellyfin, Emby и почти на любой веб-странице со стандартным HTML5-видеотегом. Подходит для локальных медиатек.

- +
-

- - - - Self-Hosted и готов к Docker -

-

Наши официальные серверы бесплатны и быстры, но вы можете получить полный контроль. Запустите свой собственный приватный ретранслятор в Docker за секунды.

-
- - -

@@ -601,6 +590,17 @@

Не нужно обмениваться IP-адресами или паролями. Отправьте сгенерированную ссылку друзьям, чтобы они автоматически вошли в комнату в один клик.

+ + +
+

+ + + + Self-Hosted и готов к Docker +

+

Наши официальные серверы бесплатны и быстры, но вы можете получить полный контроль. Запустите свой собственный приватный ретранслятор в Docker за секунды.

+
diff --git a/website/www/style.css b/website/www/style.css index d088fdc..41dd2ac 100644 --- a/website/www/style.css +++ b/website/www/style.css @@ -744,16 +744,16 @@ input:checked + .mock-slider:before { /* Feature Icon with Inline SVG Wrapper */ .feature-icon-svg { - display: inline-flex; + display: flex; + flex-shrink: 0; align-items: center; justify-content: center; - width: 42px; - height: 42px; + width: 44px; + height: 44px; background: rgba(99, 102, 241, 0.12); color: var(--accent); border-radius: 12px; - margin-right: 12px; - vertical-align: middle; + margin-right: 14px; transition: all 0.3s ease; } @@ -765,14 +765,15 @@ input:checked + .mock-slider:before { } .bento-icon { - width: 20px; - height: 20px; + width: 22px; + height: 22px; display: block; + flex-shrink: 0; } .feature-card h3 { margin-bottom: 1rem; - font-size: 1.35rem; + font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; @@ -788,6 +789,56 @@ input:checked + .mock-slider:before { .feature-card.bento-large { grid-column: span 2; background: linear-gradient(135deg, rgba(30, 41, 59, 0.45) 0%, rgba(99, 102, 241, 0.08) 100%); + padding: 3rem 3.5rem; + display: grid; + grid-template-columns: 1fr 2fr; + gap: 3rem; + align-items: center; +} + +.feature-card.bento-large h3 { + flex-direction: column; + align-items: center; + text-align: center; + gap: 1rem; + margin-bottom: 0; + font-size: 1.25rem; +} + +.feature-card.bento-large .feature-icon, +.feature-card.bento-large .feature-icon-svg { + width: 52px; + height: 52px; + border-radius: 14px; + margin-right: 0; + flex-shrink: 0; +} + +.feature-card.bento-large .bento-icon { + width: 24px; + height: 24px; +} + +.feature-card.bento-large p { + font-size: 1rem; + line-height: 1.7; + margin: 0; +} + +.feature-card.bento-large::after { + content: ''; + position: absolute; + top: 0; + left: 2.5rem; + right: 2.5rem; + height: 2px; + background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.4), transparent); + opacity: 0; + transition: opacity 0.3s ease; +} + +.feature-card.bento-large:hover::after { + opacity: 1; } @media (max-width: 900px) { @@ -797,6 +848,11 @@ input:checked + .mock-slider:before { } .feature-card.bento-large { grid-column: span 2; + padding: 2.5rem; + gap: 2rem; + } + .feature-card.bento-large h3 { + font-size: 1.15rem; } } @@ -807,6 +863,52 @@ input:checked + .mock-slider:before { } .feature-card.bento-large { grid-column: span 1; + display: flex; + flex-direction: column; + padding: 1.75rem; + gap: 1rem; + } + .feature-card.bento-large h3 { + flex-direction: row; + align-items: center; + text-align: left; + gap: 0.75rem; + margin-bottom: 0; + font-size: 1.15rem; + } + .feature-card.bento-large .feature-icon, + .feature-card.bento-large .feature-icon-svg { + width: 40px; + height: 40px; + border-radius: 10px; + margin-right: 0; + } + .feature-card.bento-large .bento-icon { + width: 18px; + height: 18px; + } + .feature-card.bento-large p { + font-size: 0.9rem; + line-height: 1.6; + } + .feature-card.bento-large::after { + display: none; + } + .feature-card { + padding: 1.75rem; + } + .feature-card h3 { + font-size: 1.1rem; + } + .feature-icon-svg { + width: 40px; + height: 40px; + border-radius: 10px; + margin-right: 12px; + } + .bento-icon { + width: 18px; + height: 18px; } }