mirror of
https://github.com/Shik3i/KoalaSync.git
synced 2026-07-26 12:08:15 +00:00
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)
This commit is contained in:
Koala
-1036
File diff suppressed because it is too large
Load Diff
+110
-8
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+12
-12
@@ -580,19 +580,8 @@
|
||||
<p>{{FEATURE_4_DESC}}</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 5: Self-Hostable & Docker-Ready (Bento Large) -->
|
||||
<!-- Card 5: Instant Invites / 1-Click Join (Bento Large) -->
|
||||
<div class="feature-card bento-large" data-reveal>
|
||||
<h3>
|
||||
<span class="feature-icon-svg">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
|
||||
</span>
|
||||
<span>{{FEATURE_5_TITLE}}</span>
|
||||
</h3>
|
||||
<p>{{FEATURE_5_DESC}}</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 6: Instant Invites / 1-Click Join (Bento Standard) -->
|
||||
<div class="feature-card" data-reveal>
|
||||
<h3>
|
||||
<span class="feature-icon-svg">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
|
||||
@@ -601,6 +590,17 @@
|
||||
</h3>
|
||||
<p>{{FEATURE_6_DESC}}</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 6: Self-Hostable & Docker-Ready (Bento Standard) -->
|
||||
<div class="feature-card" data-reveal>
|
||||
<h3>
|
||||
<span class="feature-icon-svg">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
|
||||
</span>
|
||||
<span>{{FEATURE_5_TITLE}}</span>
|
||||
</h3>
|
||||
<p>{{FEATURE_5_DESC}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
+12
-12
@@ -580,19 +580,8 @@
|
||||
<p>Unterstützt YouTube, Twitch, Netflix, Jellyfin, Emby und fast jede beliebige Webseite mit einem HTML5-Video-Tag. Ideal auch für eigene Medienbibliotheken.</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 5: Self-Hostable & Docker-Ready (Bento Large) -->
|
||||
<!-- Card 5: Instant Invites / 1-Click Join (Bento Large) -->
|
||||
<div class="feature-card bento-large" data-reveal>
|
||||
<h3>
|
||||
<span class="feature-icon-svg">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
|
||||
</span>
|
||||
<span>Self-Hostable & Docker-Ready</span>
|
||||
</h3>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 6: Instant Invites / 1-Click Join (Bento Standard) -->
|
||||
<div class="feature-card" data-reveal>
|
||||
<h3>
|
||||
<span class="feature-icon-svg">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
|
||||
@@ -601,6 +590,17 @@
|
||||
</h3>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 6: Self-Hostable & Docker-Ready (Bento Standard) -->
|
||||
<div class="feature-card" data-reveal>
|
||||
<h3>
|
||||
<span class="feature-icon-svg">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
|
||||
</span>
|
||||
<span>Self-Hostable & Docker-Ready</span>
|
||||
</h3>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
+12
-12
@@ -580,19 +580,8 @@
|
||||
<p>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.</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 5: Self-Hostable & Docker-Ready (Bento Large) -->
|
||||
<!-- Card 5: Instant Invites / 1-Click Join (Bento Large) -->
|
||||
<div class="feature-card bento-large" data-reveal>
|
||||
<h3>
|
||||
<span class="feature-icon-svg">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
|
||||
</span>
|
||||
<span>Auto-alojable y listo para Docker</span>
|
||||
</h3>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 6: Instant Invites / 1-Click Join (Bento Standard) -->
|
||||
<div class="feature-card" data-reveal>
|
||||
<h3>
|
||||
<span class="feature-icon-svg">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
|
||||
@@ -601,6 +590,17 @@
|
||||
</h3>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 6: Self-Hostable & Docker-Ready (Bento Standard) -->
|
||||
<div class="feature-card" data-reveal>
|
||||
<h3>
|
||||
<span class="feature-icon-svg">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
|
||||
</span>
|
||||
<span>Auto-alojable y listo para Docker</span>
|
||||
</h3>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
+12
-12
@@ -580,19 +580,8 @@
|
||||
<p>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.</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 5: Self-Hostable & Docker-Ready (Bento Large) -->
|
||||
<!-- Card 5: Instant Invites / 1-Click Join (Bento Large) -->
|
||||
<div class="feature-card bento-large" data-reveal>
|
||||
<h3>
|
||||
<span class="feature-icon-svg">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
|
||||
</span>
|
||||
<span>Hébergeable soi-même & prêt pour Docker</span>
|
||||
</h3>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 6: Instant Invites / 1-Click Join (Bento Standard) -->
|
||||
<div class="feature-card" data-reveal>
|
||||
<h3>
|
||||
<span class="feature-icon-svg">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
|
||||
@@ -601,6 +590,17 @@
|
||||
</h3>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 6: Self-Hostable & Docker-Ready (Bento Standard) -->
|
||||
<div class="feature-card" data-reveal>
|
||||
<h3>
|
||||
<span class="feature-icon-svg">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
|
||||
</span>
|
||||
<span>Hébergeable soi-même & prêt pour Docker</span>
|
||||
</h3>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
+12
-12
@@ -580,19 +580,8 @@
|
||||
<p>Works on YouTube, Twitch, Netflix, Jellyfin, Emby, and almost any standard webpage containing a HTML5 video element. Also compatible with custom self-hosted setups.</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 5: Self-Hostable & Docker-Ready (Bento Large) -->
|
||||
<!-- Card 5: Instant Invites / 1-Click Join (Bento Large) -->
|
||||
<div class="feature-card bento-large" data-reveal>
|
||||
<h3>
|
||||
<span class="feature-icon-svg">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
|
||||
</span>
|
||||
<span>Self-Hostable & Docker-Ready</span>
|
||||
</h3>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 6: Instant Invites / 1-Click Join (Bento Standard) -->
|
||||
<div class="feature-card" data-reveal>
|
||||
<h3>
|
||||
<span class="feature-icon-svg">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
|
||||
@@ -601,6 +590,17 @@
|
||||
</h3>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 6: Self-Hostable & Docker-Ready (Bento Standard) -->
|
||||
<div class="feature-card" data-reveal>
|
||||
<h3>
|
||||
<span class="feature-icon-svg">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
|
||||
</span>
|
||||
<span>Self-Hostable & Docker-Ready</span>
|
||||
</h3>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -580,19 +580,8 @@
|
||||
<p>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.</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 5: Self-Hostable & Docker-Ready (Bento Large) -->
|
||||
<!-- Card 5: Instant Invites / 1-Click Join (Bento Large) -->
|
||||
<div class="feature-card bento-large" data-reveal>
|
||||
<h3>
|
||||
<span class="feature-icon-svg">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
|
||||
</span>
|
||||
<span>Auto-hospedável e pronto para Docker</span>
|
||||
</h3>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 6: Instant Invites / 1-Click Join (Bento Standard) -->
|
||||
<div class="feature-card" data-reveal>
|
||||
<h3>
|
||||
<span class="feature-icon-svg">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
|
||||
@@ -601,6 +590,17 @@
|
||||
</h3>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 6: Self-Hostable & Docker-Ready (Bento Standard) -->
|
||||
<div class="feature-card" data-reveal>
|
||||
<h3>
|
||||
<span class="feature-icon-svg">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
|
||||
</span>
|
||||
<span>Auto-hospedável e pronto para Docker</span>
|
||||
</h3>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
+12
-12
@@ -580,19 +580,8 @@
|
||||
<p>Работает на YouTube, Twitch, Netflix, Jellyfin, Emby и почти на любой веб-странице со стандартным HTML5-видеотегом. Подходит для локальных медиатек.</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 5: Self-Hostable & Docker-Ready (Bento Large) -->
|
||||
<!-- Card 5: Instant Invites / 1-Click Join (Bento Large) -->
|
||||
<div class="feature-card bento-large" data-reveal>
|
||||
<h3>
|
||||
<span class="feature-icon-svg">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
|
||||
</span>
|
||||
<span>Self-Hosted и готов к Docker</span>
|
||||
</h3>
|
||||
<p>Наши официальные серверы бесплатны и быстры, но вы можете получить полный контроль. Запустите свой собственный приватный ретранслятор в Docker за секунды.</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 6: Instant Invites / 1-Click Join (Bento Standard) -->
|
||||
<div class="feature-card" data-reveal>
|
||||
<h3>
|
||||
<span class="feature-icon-svg">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
|
||||
@@ -601,6 +590,17 @@
|
||||
</h3>
|
||||
<p>Не нужно обмениваться IP-адресами или паролями. Отправьте сгенерированную ссылку друзьям, чтобы они автоматически вошли в комнату в один клик.</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 6: Self-Hostable & Docker-Ready (Bento Standard) -->
|
||||
<div class="feature-card" data-reveal>
|
||||
<h3>
|
||||
<span class="feature-icon-svg">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
|
||||
</span>
|
||||
<span>Self-Hosted и готов к Docker</span>
|
||||
</h3>
|
||||
<p>Наши официальные серверы бесплатны и быстры, но вы можете получить полный контроль. Запустите свой собственный приватный ретранслятор в Docker за секунды.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
+110
-8
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user