Add countdown banner to the top of the page

marcprux · marcprux · commit 0b54978f0509 · 2026-02-09T18:02:39.000-05:00
diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
@@ -23,7 +23,7 @@
     cursor: pointer;
     padding: 0.5rem;
     position: absolute;
-    top: 1rem;
+    /* top: 1rem; */
     right: 1rem;
     z-index: 1000;
     transition: all 0.3s ease;
diff --git a/src/content/config.ts b/src/content/config.ts
@@ -13,6 +13,7 @@ const pagesCollection = defineCollection({
     site_disclaimer: z.string(),
     site_privacy: z.string(),
     site_copyright: z.string(),
+    lockdown_banner: z.string(),
   }),
 });
 
diff --git a/src/content/pages/cs/index.md b/src/content/pages/cs/index.md
@@ -11,6 +11,8 @@ site_report_issues: "Nahlásit problémy se stránkou"
 site_disclaimer: "**Vyloučení odpovědnosti:** Tato stránka je komunitním, nekomerčním projektem. Je provozována výlučně pro informační a vzdělávací účely."
 site_privacy: "**Soukromí:** Tato stránka nepoužívá žádné cookies a neprovozuje žádné sledování nebo logování uživatelů."
 site_copyright: "**Copyright:** Žádný. Toto dílo je označeno"
+
+lockdown_banner: "Android will become a locked-down platform in"
 ---
 
 V srpnu 2025, Google [oznámil](https://developer.android.com/developer-verification), že od následujícího roku
diff --git a/src/content/pages/de/index.md b/src/content/pages/de/index.md
@@ -11,6 +11,8 @@ site_report_issues: "Melden Sie ein Problem auf der Website"
 site_disclaimer: "**Haftungsausschluss**: Diese Website ist eine gemeinschaftliche, nicht-kommerzielle Initiative. Sie dient ausschließlich Informations- und Bildungszwecken."
 site_privacy: "**Datenschutz**: Diese Website verwendet keine Cookies und führt weder Tracking noch Nutzerprotokollierung durch."
 site_copyright: "**Urheberrechte**: Keine. Dieses Werk steht unter der Lizenz"
+
+lockdown_banner: "Android wird eine geschlossene Plattform werden."
 ---
 
 Im August 2025 hat Google [angekündigt](https://developer.android.com/developer-verification), dass es ab dem folgenden Jahr nicht mehr möglich sein wird, Anwendungen für die Android-Plattform zu entwickeln, ohne sich zuvor bei Google registriert zu haben.
diff --git a/src/content/pages/en/index.md b/src/content/pages/en/index.md
@@ -11,6 +11,8 @@ site_report_issues: "Report Site Issues"
 site_disclaimer: "**Disclaimer:** This website is a community-driven noncommercial undertaking. It is operated solely for informational and educational purposes."
 site_privacy: "**Privacy:** This site uses no cookies and performs no user tracking or logging."
 site_copyright: "**Copyright:** None. This work is marked"
+
+lockdown_banner: "Android will become a locked-down platform"
 ---
 
 In August 2025, Google [announced](https://developer.android.com/developer-verification) that starting next year,
diff --git a/src/content/pages/es/index.md b/src/content/pages/es/index.md
@@ -11,6 +11,8 @@ site_report_issues: «Informar de un problema en el sitio web»
 site_disclaimer: «**Aviso:** Este sitio web es una iniciativa comunitaria sin ánimo de lucro. Se utiliza únicamente con fines informativos y educativos».
 site_privacy: «**Privacidad:** Este sitio web no utiliza cookies ni realiza ningún tipo de seguimiento o registro de los usuarios».
 site_copyright: «**Derechos de autor:** Ninguno. Esta obra está bajo la licencia».
+
+lockdown_banner: "Android se convertirá en una plataforma cerrada"
 ---
 
 En agosto de 2025, Google [anunció](https://developer.android.com/developer-verification) que, a partir del año siguiente,
diff --git a/src/content/pages/fr/index.md b/src/content/pages/fr/index.md
@@ -11,6 +11,8 @@ site_report_issues: "Signaler un problème sur le site"
 site_disclaimer: "**Avertissement :** Ce site web est une initiative communautaire à but non lucratif. Il est exploité uniquement à des fins d’information et d’éducation."
 site_privacy: "**Confidentialité :** Ce site n’utilise aucun cookie et n’effectue aucun suivi ni enregistrement des utilisateurs."
 site_copyright: "**Droits d'auteur :** Aucun. Cette œuvre est sous licence"
+
+lockdown_banner: "Android deviendra une plateforme verrouillée."
 ---
 
 En août 2025, Google a [annoncé](https://developer.android.com/developer-verification) que, dès l'année suivante,
diff --git a/src/content/pages/it/index.md b/src/content/pages/it/index.md
@@ -11,6 +11,8 @@ site_report_issues: "Segnala problemi del sito web"
 site_disclaimer: "**Dichiarazione di non responsabilità:** Questo sito web è un'iniziativa non commerciale gestita dalla comunità. È gestito esclusivamente a scopo informativo e didattico."
 site_privacy: "**Privacy:** Questo sito web non utilizza cookie e non effettua alcun tracciamento o registrazione degli utenti."
 site_copyright: "**Diritti d'autore:** Nessuno. Quest'opera è soggetta alla licenza."
+
+lockdown_banner: "Android diventerà una piattaforma bloccata"
 ---
 
 Nell'agosto 2025 Google [ha annunciato](https://developer.android.com/developer-verification) che a partire dal prossimo anno
diff --git a/src/content/pages/ko/index.md b/src/content/pages/ko/index.md
@@ -11,6 +11,8 @@ site_report_issues: "사이트 문제 제보"
 site_disclaimer: "**면책 조항:** 본 사이트는 커뮤니티 주도의 비영리 프로젝트로, 정보 제공 및 교육 목적으로만 운영됩니다."
 site_privacy: "**개인정보:** 본 사이트는 쿠키 등의 정보 수집 장치, 추적 및 기록 등을 하지 않습니다."
 site_copyright: "**저작권:** 없음. 사이트는 다음 저작권으로 배포됩니다:"
+
+lockdown_banner: "안드로이드는 잠긴 플랫폼이 될 것입니다"
 ---
 
 2025년 8월, Google은 다음 해부터 Google에 등록하지 않은 개발자는 Android 플랫폼의 애플리케이션을 개발할 수 없다는
diff --git a/src/content/pages/pt-BR/index.md b/src/content/pages/pt-BR/index.md
@@ -11,6 +11,8 @@ site_report_issues: "Reportar Problemas no Site"
 site_disclaimer: "**Atenção:** Este website é uma empreitada comunitária não comercial. Ele está sendo operado com propostas puramente informativas e educacionais."
 site_privacy: "**Privacidade:** Este site não utiliza cookies nem faz rastreamento dos usuários ou salva logs de uso."
 site_copyright: "**Copyright:** Nenhum. Esse trabalho é marcado como"
+
+lockdown_banner: "O Android se tornará uma plataforma fechada"
 ---
 
 Em Agosto de 2025 o Google [anunciou](https://developer.android.com/developer-verification) que, a partir do ano que vem,
diff --git a/src/content/pages/sk/index.md b/src/content/pages/sk/index.md
@@ -11,6 +11,8 @@ site_report_issues: "Nahlásiť nezrovnalosti na stránke"
 site_disclaimer: "**Upozornenie:** Táto webová stránka je komunitným nekomerčným projektom. Je prevádzkovaná výlučne na informačné a vzdelávacie účely."
 site_privacy: "**Súkromie:** Táto stránka nepoužíva žiadne súbory cookie a nevykonáva žiadne sledovanie ani zaznamenávanie používateľov."
 site_copyright: "**Autorské práva:** Žiadne. Toto dielo je označené"
+
+lockdown_banner: "Android sa stane uzamknutou platformou"
 ---
 
 V auguste 2025 spoločnosť Google [oznámila](https://developer.android.com/developer-verification), že od budúceho roka
diff --git a/src/content/pages/tr/index.md b/src/content/pages/tr/index.md
@@ -11,6 +11,8 @@ site_report_issues: "Site Sorunlarını Raporlayın"
 site_disclaimer: "**Disclaimer**: Bu site kâr amacı gütmez ve topluluk tarafından yönetilen bir girişimdir. Sadece bigilendirme ve eğitim amaçları bulunur."
 site_privacy: "**Mahremiyet Beyanı**: Bu site hiçbir çerez kullanmaz ve kullanıcıları takip etmez veya kaydetmez."
 site_copyright: "**Telif Hakkı**: Yok. Bu çalışma kamu malıdır:"
+
+lockdown_banner: "Android kısıtlı bir platform haline gelecek."
 ---
 
 Ağustos 2025 tarihinde Google, gelecek seneden itibaren önceden
diff --git a/src/content/pages/uk/index.md b/src/content/pages/uk/index.md
@@ -11,6 +11,8 @@ site_report_issues: "Повідомити про проблеми з сайто
 site_disclaimer: "**Відмова від відповідальності:** Цей вебсайт є некомерційним проєктом, керованим спільнотою. Він функціонує виключно в інформаційних та освітніх цілях."
 site_privacy: "**Конфіденційність:** Цей сайт не використовує файли cookie та не відстежує і не реєструє дії користувачів."
 site_copyright: "**Авторське право:** Відсутнє. Ця робота позначена"
+
+lockdown_banner: "Android стане закритою платформою"
 ---
 
 У серпні 2025 року Google [оголосив](https://developer.android.com/developer-verification), що з наступного року
diff --git a/src/content/pages/zh-CN/index.md b/src/content/pages/zh-CN/index.md
@@ -11,6 +11,8 @@ site_report_issues: "报告网站问题"
 site_disclaimer: "**免责声明:**本站是一个由社区推动的非商业性项目。仅用于提供信息与教育目的。"
 site_privacy: "**隐私:**本站不使用cookies，以及用户跟踪或记录"
 site_copyright: "**版权:** 无。本著作已标记为"
+
+lockdown_banner: "安卓将成为一个封闭平台"
 ---
 
 2025年八月，Google [宣布](https://developer.android.com/developer-verification)从明年开始，
diff --git a/src/content/pages/zh-TW/index.md b/src/content/pages/zh-TW/index.md
@@ -11,6 +11,8 @@ site_report_issues: "報告網站問題"
 site_disclaimer: "**免責聲明：**本網站乃一個由社群驅動的非商業企劃。其運作純粹以供資訊與教育用途。"
 site_privacy: "**隱私：**本網站並不使用 Cookie，也不作使用者追蹤或記錄。"
 site_copyright: "**版權：**無。此著作乃標記為"
+
+lockdown_banner: "Android 將會變成一個受限制的平台"
 --- 
 
 2025 年八月，Google [宣佈](https://developer.android.com/developer-verification)由明年開始，將不再可能開發應用程式以供 Android 平臺上使用，除非先與 Google 集中註冊。此註冊將涉及：
diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro
@@ -13,6 +13,7 @@ interface Props {
   site_disclaimer: string;
   site_privacy: string;
   site_copyright: string;
+  lockdown_banner: string;
 }
 
 const {
@@ -26,6 +27,7 @@ const {
   site_disclaimer,
   site_privacy,
   site_copyright,
+  lockdown_banner,
 } = Astro.props;
 
 const languageEntries = Object.entries(languages);
@@ -186,12 +188,54 @@ const languageEntries = Object.entries(languages);
       display: inline-block; 
       margin-right: 0.5em;
     }
+
+    .alarming-banner {
+      /* Layout and Background */
+      font-variant-numeric: tabular-nums;
+
+      /* display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 1rem 2rem; */
+      background: linear-gradient(180deg, #d32f2f 0%, #b71c1c 100%);
+      border-bottom: 4px solid #801313;
+      
+      /* Text Styling */
+      color: #ffffff;
+      font-family: 'Arial Black', sans-serif;
+      font-weight: 900;
+      text-transform: uppercase;
+      letter-spacing: 2px;
+      font-size: 1.0rem;
+      text-align: center;
+    
+      /* The 3D Depth & Shadow Effect */
+      /* Format: x-offset y-offset blur color */
+      text-shadow: 
+        0px 1px 0px #9e1a1a,
+        0px 2px 0px #8a1515,
+        0px 3px 0px #751111,
+        0px 4px 0px #5e0d0d,
+        0px 6px 10px rgba(0, 0, 0, 0.5);
+    
+      /* Animation to draw attention */
+      animation: pulse-alert 2s infinite;
+    
+    @keyframes pulse-alert {
+      0% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.7); }
+      70% { box-shadow: 0 0 0 15px rgba(211, 47, 47, 0); }
+      100% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0); }
+    }
+    
+    }
   </style>
 </head>
 <body>
+  <div class="alarming-banner">
+    {lockdown_banner ?? "LOCKDOWN"} <span id="countdown"></span>
+  </div>
   <header>
-    <ThemeToggle />
-    <h1>{title}</h1>
+    <h1>{title}<ThemeToggle /></h1>    
     <div class="lang-menu">
       {languageEntries.map(([_code, { label, path }], i) => (
         <>
@@ -200,14 +244,6 @@ const languageEntries = Object.entries(languages);
         </>
       ))}
     </div>
-    <!-- 
-    <nav style="text-align: center; margin-bottom: 1em;">
-      <a href="#developers-resist-and-refuse" style="margin: 0 0.5em;">Developers: Resist and refuse</a> |
-      <a href="#everyone-make-your-voice-heard" style="margin: 0 0.5em;">Everyone: Make your voice heard</a> |
-      <a href="#editorials-and-blogs" style="margin: 0 0.5em;">Editorials and Blogs</a> |
-      <a href="#press-reactions" style="margin: 0 0.5em;">Press Reactions</a>
-    </nav>
-     -->
   </header>
   <main>
     <slot />
@@ -239,5 +275,87 @@ const languageEntries = Object.entries(languages);
       </div>
     </div>
   </footer>
+  <script>
+    /**
+    * Localizes a duration based on the browser's language settings.
+    * @param {number} value - The numerical value (e.g., 5)
+    * @param {string} unit - The unit ('day', 'hour', 'minute', 'second')
+    * @param {string} locale - The BCP 47 language tag
+    */
+    function getLocalizedUnit(value, unit, locale, trimConjunction) {
+      // Use Intl.RelativeTimeFormat for localized abbreviations
+      // 'narrow' style gives us 'd', 'h', 'm', 's' in most locales
+      
+      const formatter = new Intl.RelativeTimeFormat(locale, { style: 'narrow' });
+      
+      function findCommonObject(arrays) {
+        if (!arrays.length) return null;
+      
+        return arrays.reduce((common, currentArray) => {
+          return common.filter(objA => 
+            // Check if the current array contains an object that matches objA
+            currentArray.some(objB => JSON.stringify(objA) === JSON.stringify(objB))
+          );
+        });
+      }
+      
+      const p1 = formatter.formatToParts(1, 'day');
+      const p2 = formatter.formatToParts(2, 'hour');
+      const p3 = formatter.formatToParts(3, 'minute');
+      const p4 = formatter.formatToParts(4, 'second');
+      var prefixParts = findCommonObject([p1, p2, p3, p4]);
+      var prefix = prefixParts.length == 0 ? "" : prefixParts[0].value;
+
+      // FormatToParts lets us extract just the unit identifier
+      const parts = formatter.formatToParts(value, unit);
+      
+      const segments = parts
+        .filter(p => p.type === "integer" || p.type === "literal" || p.type === "unit")
+        .filter(p => p.value !== prefix)
+        .map(p => p.value)
+        .join("");
+      
+      return `${trimConjunction ? "" : prefix}${segments}`;
+    }
+    
+    // Set the date we're counting down to
+    var countDownDate = new Date("Sep 1, 2026 00:00:00").getTime();
+
+    function updateBanner() {
+      // Get today's date and time
+      var now = new Date().getTime();
+    
+      // Find the distance between now and the count down date
+      var distance = countDownDate - now;
+    
+      // Time calculations for days, hours, minutes and seconds
+      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
+      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+      var seconds = Math.floor((distance % (1000 * 60)) / 1000);
+    
+      const locale = document.documentElement.lang; // navigator.language; // Detects browser language (e.g., 'en-US');
+    
+      var remaining = [
+        days > 0 ? getLocalizedUnit(days, 'day', locale, false) : '',
+        hours > 0 ? getLocalizedUnit(hours, 'hour', locale, true) : '',
+        minutes > 0 ? getLocalizedUnit(minutes, 'minute', locale, true) : '',
+        getLocalizedUnit(seconds, 'second', locale, true)
+      ].filter(Boolean).join(' ');
+    
+      // Display the result in the element with id="countdown"
+      document.getElementById("countdown").innerHTML = remaining;
+    
+      // // If the count down is finished, write some text
+      // if (distance < 0) {
+      //   clearInterval(x);
+      //   document.getElementById("countdown").innerHTML = "EXPIRED";
+      // }
+    }
+    
+    // Update the count down every 1 second
+    setInterval(updateBanner, 1000);
+    updateBanner();
+  </script>
 </body>
 </html>
