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

Add dismissible localized access banner

Browse Source
This commit is contained in:
Timo
2026-07-15 13:20:00 +02:00
parent 285c04e00d
commit 03121477a8
19 changed files with 62 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/app.js
+8
View File
@@ -1,6 +1,14 @@
// KoalaSync Landing Page Logic
document.addEventListener('DOMContentLoaded', () => {
const siteAccessBanner = document.querySelector('.site-access-banner');
const siteAccessBannerDismiss = document.querySelector('.site-access-banner-dismiss');
if (siteAccessBanner && siteAccessBannerDismiss) {
siteAccessBannerDismiss.addEventListener('click', () => {
siteAccessBanner.hidden = true;
});
}
// Mockup Video Title Randomization on Load
const SERIES_NAMES = [
'Stranger Things',
website/locales/de.json
+1
View File
@@ -16,6 +16,7 @@
"NAV_HOW_IT_WORKS": "So funktioniert's",
"SUPPORT_BANNER_TEXT": "KoalaSync kann nicht auf deine Videoseite zugreifen?",
"SUPPORT_BANNER_CTA": "Websitezugriff reparieren",
"SUPPORT_BANNER_DISMISS": "Hinweis schließen",
"HERO_TITLE": "Mach jedes Video zur <span class='hero-highlight'>Watch Party</span>.",
"HERO_SUBTITLE": "Dein Kino-Abend auf Distanz, ohne Lags. Kein Account, kein Tracking, keine Werbung. Einfach Link teilen und gemeinsam Play drücken.",
"HERO_MASCOT_ALT": "Ein niedlicher Koala steht da und schaut nach unten auf die Download-Buttons",
website/locales/en.json
+1
View File
@@ -16,6 +16,7 @@
"NAV_HOW_IT_WORKS": "How it works",
"SUPPORT_BANNER_TEXT": "KoalaSync cannot access your video site?",
"SUPPORT_BANNER_CTA": "Fix website access",
"SUPPORT_BANNER_DISMISS": "Dismiss notification",
"HERO_TITLE": "Turn any video into a <span class='hero-highlight'>watch party</span>.",
"HERO_SUBTITLE": "Your remote movie night without lags. No account, no tracking, no ads. Just share a link and press play together.",
"HERO_MASCOT_ALT": "A cute koala standing and looking down at the download buttons",
website/locales/es.json
+1
View File
@@ -16,6 +16,7 @@
"NAV_HOW_IT_WORKS": "Cómo funciona",
"SUPPORT_BANNER_TEXT": "¿KoalaSync no puede acceder al sitio del vídeo?",
"SUPPORT_BANNER_CTA": "Reparar acceso al sitio",
"SUPPORT_BANNER_DISMISS": "Cerrar aviso",
"HERO_TITLE": "Convierte cualquier vídeo en una <span class='hero-highlight'>watch party</span>.",
"HERO_SUBTITLE": "Tu noche de cine a distancia, sin retrasos. Sin cuenta, sin rastreo, sin anuncios. Comparte un enlace y dale al play juntos.",
"HERO_MASCOT_ALT": "Un lindo koala de pie mirando hacia abajo a los botones de descarga",
website/locales/fr.json
+1
View File
@@ -16,6 +16,7 @@
"NAV_HOW_IT_WORKS": "Comment ça marche",
"SUPPORT_BANNER_TEXT": "KoalaSync n’accède pas à votre site vidéo ?",
"SUPPORT_BANNER_CTA": "Réparer l’accès au site",
"SUPPORT_BANNER_DISMISS": "Fermer l’avertissement",
"HERO_TITLE": "Transformez n'importe quelle vidéo en <span class='hero-highlight'>watch party</span>.",
"HERO_SUBTITLE": "Votre soirée ciné à distance, sans décalage. Pas de compte, pas de tracking, pas de pub. Partagez un lien et lancez la lecture ensemble.",
"HERO_MASCOT_ALT": "Un koala mignon debout et regardant vers le bas les boutons de téléchargement",
website/locales/it.json
+1
View File
@@ -16,6 +16,7 @@
"NAV_HOW_IT_WORKS": "Come Funziona",
"SUPPORT_BANNER_TEXT": "KoalaSync non riesce ad accedere al sito video?",
"SUPPORT_BANNER_CTA": "Ripristina l’accesso al sito",
"SUPPORT_BANNER_DISMISS": "Chiudi avviso",
"HERO_TITLE": "Trasforma qualsiasi video in una <span class='hero-highlight'>watch party</span>.",
"HERO_SUBTITLE": "La tua serata film a distanza, senza lag. Niente account, niente tracciamento, niente pubblicità. Condividi un link e premete play insieme.",
"HERO_MASCOT_ALT": "Un simpatico koala che guarda i pulsanti di download",
website/locales/ja.json
+1
View File
@@ -16,6 +16,7 @@
"NAV_HOW_IT_WORKS": "仕組み",
"SUPPORT_BANNER_TEXT": "KoalaSync が動画サイトにアクセスできませんか？",
"SUPPORT_BANNER_CTA": "サイトアクセスを修復",
"SUPPORT_BANNER_DISMISS": "通知を閉じる",
"HERO_TITLE": "どんな動画も<span class='hero-highlight'>ウォッチパーティー</span>に。",
"HERO_SUBTITLE": "離れていても一緒に映画ナイト。アカウント不要、トラッキングなし、広告なし。リンクを共有して、一緒に再生するだけ。",
"HERO_MASCOT_ALT": "ダウンロードボタンを見下ろしているかわいいコアラ",
website/locales/ko.json
+1
View File
@@ -16,6 +16,7 @@
"NAV_HOW_IT_WORKS": "작동 방식",
"SUPPORT_BANNER_TEXT": "KoalaSync가 동영상 사이트에 액세스할 수 없나요?",
"SUPPORT_BANNER_CTA": "사이트 액세스 복구",
"SUPPORT_BANNER_DISMISS": "알림 닫기",
"HERO_TITLE": "어떤 영상이든 <span class='hero-highlight'>워치 파티</span>로.",
"HERO_SUBTITLE": "지연 없는 원격 영화의 밤. 계정 없음, 추적 없음, 광고 없음. 링크만 공유하고 함께 재생하세요.",
"HERO_MASCOT_ALT": "다운로드 버튼을 내려다보고 서 있는 귀여운 코알라",
website/locales/nl.json
+1
View File
@@ -16,6 +16,7 @@
"NAV_HOW_IT_WORKS": "Hoe het werkt",
"SUPPORT_BANNER_TEXT": "Heeft KoalaSync geen toegang tot je videosite?",
"SUPPORT_BANNER_CTA": "Websitetoegang herstellen",
"SUPPORT_BANNER_DISMISS": "Melding sluiten",
"HERO_TITLE": "Maak van elke video een <span class='hero-highlight'>watch party</span>.",
"HERO_SUBTITLE": "Jouw filmavond op afstand, zonder vertraging. Geen account, geen tracking, geen advertenties. Deel een link en druk samen op play.",
"HERO_MASCOT_ALT": "Een schattige koala die staat en naar beneden kijkt naar de downloadknoppen",
website/locales/pl.json
+1
View File
@@ -16,6 +16,7 @@
"NAV_HOW_IT_WORKS": "Jak to działa",
"SUPPORT_BANNER_TEXT": "KoalaSync nie ma dostępu do strony z filmem?",
"SUPPORT_BANNER_CTA": "Napraw dostęp do strony",
"SUPPORT_BANNER_DISMISS": "Zamknij powiadomienie",
"HERO_TITLE": "Zamień dowolne wideo w <span class='hero-highlight'>watch party</span>.",
"HERO_SUBTITLE": "Twój zdalny wieczór filmowy bez opóźnień. Bez konta, bez śledzenia, bez reklam. Udostępnij link i naciśnijcie play razem.",
"HERO_MASCOT_ALT": "Uroczy koala stojący i patrzący w dół na przyciski pobierania",
website/locales/pt-BR.json
+1
View File
@@ -16,6 +16,7 @@
"NAV_HOW_IT_WORKS": "Como Funciona",
"SUPPORT_BANNER_TEXT": "O KoalaSync não consegue acessar o site do vídeo?",
"SUPPORT_BANNER_CTA": "Corrigir acesso ao site",
"SUPPORT_BANNER_DISMISS": "Fechar aviso",
"HERO_TITLE": "Transforme qualquer vídeo em uma <span class='hero-highlight'>watch party</span>.",
"HERO_SUBTITLE": "Sua sessão de cinema à distância, sem atrasos. Sem conta, sem rastreamento, sem anúncios. Compartilhe um link e deem play juntos.",
"HERO_MASCOT_ALT": "Um coala fofo olhando para os botões de download",
website/locales/pt.json
+1
View File
@@ -16,6 +16,7 @@
"NAV_HOW_IT_WORKS": "Como Funciona",
"SUPPORT_BANNER_TEXT": "O KoalaSync não consegue aceder ao site do vídeo?",
"SUPPORT_BANNER_CTA": "Corrigir acesso ao site",
"SUPPORT_BANNER_DISMISS": "Fechar aviso",
"HERO_TITLE": "Transforma qualquer vídeo numa <span class='hero-highlight'>watch party</span>.",
"HERO_SUBTITLE": "A tua noite de cinema à distância, sem atrasos. Sem conta, sem rastreio, sem anúncios. Partilha um link e carreguem no play juntos.",
"HERO_MASCOT_ALT": "Um coala fofo a olhar para os botões de download",
website/locales/ru.json
+1
View File
@@ -16,6 +16,7 @@
"NAV_HOW_IT_WORKS": "Как это работает",
"SUPPORT_BANNER_TEXT": "KoalaSync не может получить доступ к сайту с видео?",
"SUPPORT_BANNER_CTA": "Исправить доступ к сайту",
"SUPPORT_BANNER_DISMISS": "Закрыть уведомление",
"HERO_TITLE": "Преврати любое видео в <span class='hero-highlight'>watch party</span>.",
"HERO_SUBTITLE": "Ваш киновечер на расстоянии, без задержек. Без аккаунта, без слежки, без рекламы. Просто поделитесь ссылкой и нажмите play вместе.",
"HERO_MASCOT_ALT": "Милый коала стоит и смотрит вниз на кнопки загрузки",
website/locales/tr.json
+1
View File
@@ -16,6 +16,7 @@
"NAV_HOW_IT_WORKS": "Nasıl Çalışır",
"SUPPORT_BANNER_TEXT": "KoalaSync video sitesine erişemiyor mu?",
"SUPPORT_BANNER_CTA": "Site erişimini düzelt",
"SUPPORT_BANNER_DISMISS": "Bildirimi kapat",
"HERO_TITLE": "Herhangi bir videoyu <span class='hero-highlight'>watch party</span>'ye dönüştür.",
"HERO_SUBTITLE": "Gecikmesiz uzaktan film gecen. Hesap yok, takip yok, reklam yok. Sadece bir bağlantı paylaş ve birlikte oynatın.",
"HERO_MASCOT_ALT": "İndirme düğmelerine bakan sevimli bir koala",
website/locales/uk.json
+1
View File
@@ -16,6 +16,7 @@
"NAV_HOW_IT_WORKS": "Як це працює",
"SUPPORT_BANNER_TEXT": "KoalaSync не має доступу до сайту з відео?",
"SUPPORT_BANNER_CTA": "Виправити доступ до сайту",
"SUPPORT_BANNER_DISMISS": "Закрити сповіщення",
"HERO_TITLE": "Перетвори будь-яке відео на <span class='hero-highlight'>watch party</span>.",
"HERO_SUBTITLE": "Ваш кіновечір на відстані, без затримок. Без акаунта, без стеження, без реклами. Просто поділіться посиланням і натисніть play разом.",
"HERO_MASCOT_ALT": "Мила коала стоїть і дивиться вниз на кнопки завантаження",
website/locales/zh.json
+1
View File
@@ -16,6 +16,7 @@
"NAV_HOW_IT_WORKS": "它是如何运作的",
"SUPPORT_BANNER_TEXT": "KoalaSync 无法访问视频网站？",
"SUPPORT_BANNER_CTA": "修复网站访问权限",
"SUPPORT_BANNER_DISMISS": "关闭提示",
"HERO_TITLE": "把任意视频变成<span class='hero-highlight'>一起看派对</span>。",
"HERO_SUBTITLE": "远程电影之夜，毫无延迟。无需账号、无跟踪、无广告。分享链接，一起播放。",
"HERO_MASCOT_ALT": "一只可爱的考拉站着，低头看着下载按钮",
website/site-access-help.html
+2 -1
View File
@@ -101,12 +101,13 @@
<li>If needed, open KoalaSync’s extension details and change site access to <strong>On this site</strong> or <strong>On all sites</strong>.</li>
<li>Reload the video tab and select it again in KoalaSync.</li>
</ol>
<p><a class="support-link" href="https://support.google.com/chrome/answer/2664769?hl=en" target="_blank" rel="noopener">Google’s official site-access instructions</a></p>
<p><a class="support-link" href="https://developer.chrome.com/blog/new-extensions-menu-testing" target="_blank" rel="noopener">Google’s official explanation of the new access menu</a></p>
</section>
<section class="support-card" aria-labelledby="firefox-title">
<span class="support-eyebrow">Firefox</span>
<h2 id="firefox-title">Check extension permissions</h2>
<p>Firefox does not use Chrome’s new access menu. Follow these steps only if Firefox reports that KoalaSync lacks website access.</p>
<ol>
<li>Open <strong>Add-ons and themes</strong>, then select <strong>Extensions</strong>.</li>
<li>Open KoalaSync and select <strong>Permissions</strong> or <strong>Permissions and data</strong>.</li>
website/styles/foundation.css
Vendored
+31 -1
View File
@@ -109,6 +109,7 @@ nav.nav-scrolled + .site-access-banner {
}
.site-access-banner-inner {
position: relative;
min-height: 50px;
display: flex;
align-items: center;
@@ -118,6 +119,8 @@ nav.nav-scrolled + .site-access-banner {
font-size: 0.9rem;
font-weight: 650;
text-align: center;
padding-right: 4rem;
padding-left: 4rem;
}
.site-access-banner-icon {
@@ -148,6 +151,29 @@ nav.nav-scrolled + .site-access-banner {
color: var(--text);
}
.site-access-banner-dismiss {
position: absolute;
right: 2rem;
top: 50%;
transform: translateY(-50%);
display: inline-grid;
place-items: center;
width: 2rem;
height: 2rem;
padding: 0;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--text-muted);
cursor: pointer;
}
.site-access-banner-dismiss:hover,
.site-access-banner-dismiss:focus-visible {
background: color-mix(in oklch, var(--accent) 18%, transparent);
color: var(--text);
}
@media (max-width: 768px) {
.site-access-banner {
top: 73px;
@@ -159,7 +185,7 @@ nav.nav-scrolled + .site-access-banner {
.site-access-banner-inner {
min-height: 64px;
padding-block: 0.65rem;
padding: 0.65rem 3rem 0.65rem 1rem;
gap: 0.5rem;
flex-wrap: wrap;
font-size: 0.8rem;
@@ -170,6 +196,10 @@ nav.nav-scrolled + .site-access-banner {
height: 1.3rem;
font-size: 0.75rem;
}
.site-access-banner-dismiss {
right: 0.75rem;
}
}
* {
website/template.html
+6
View File
@@ -367,6 +367,12 @@
<a href="/site-access-help.html" class="site-access-banner-link">
<span>{{SUPPORT_BANNER_CTA}}</span>
</a>
<button class="site-access-banner-dismiss" type="button" aria-label="{{SUPPORT_BANNER_DISMISS}}">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
<line x1="6" y1="6" x2="18" y2="18" />
<line x1="18" y1="6" x2="6" y2="18" />
</svg>
</button>
</div>
</aside>