Countdown.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Kickoff Countdown | 236 Technoticks</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap">
<style>
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{font-family:'Roboto',system-ui,sans-serif;margin:0;min-height:100vh;display:flex;flex-direction:column;transition:background .8s ease,color .6s ease}

/* COOL LOOK (default) */
body.theme-coolLook{
  --hdr:rgba(20,20,60,.85);--panel:rgba(15,15,30,.75);--card:rgba(255,255,255,.07);--cardb:rgba(255,255,255,.22);
  --ink:#fff;--sub:#c9d3ff;--foot:rgba(20,20,40,.85);--accent:#8ca7fa;
  background:#0a0a1a;
  background-image:radial-gradient(circle at 20% 30%,rgba(128,0,255,.38),transparent 50%),radial-gradient(circle at 80% 20%,rgba(0,0,255,.32),transparent 50%),radial-gradient(circle at 70% 80%,rgba(255,0,255,.22),transparent 50%),radial-gradient(circle at 30% 70%,rgba(0,0,128,.28),transparent 50%);
  background-blend-mode:screen;background-attachment:fixed;color:var(--ink);
  animation:fadeInBg 2s ease forwards,moveBlobs 60s ease-in-out infinite alternate}
/* EASY READ */
body.theme-easyRead{
  --hdr:linear-gradient(135deg,#8ca7fa,#5a7df5);--panel:#fff;--card:#eef3ff;--cardb:#8ca7fa;
  --ink:#111;--sub:#35508f;--foot:#1f2937;--accent:#5a7df5;
  background:linear-gradient(180deg,#8ca7fa 0%,#e6eef9 50%,#f0f4f8 100%);color:#222}
@keyframes fadeInBg{from{opacity:0}to{opacity:1}}
@keyframes moveBlobs{0%{background-position:20% 30%,80% 20%,70% 80%,30% 70%}50%{background-position:22% 32%,78% 22%,68% 78%,32% 68%}100%{background-position:20% 30%,80% 20%,70% 80%,30% 70%}}

header{background:linear-gradient(135deg,#8ca7fa,#5a7df5);color:#fff;padding:1.5rem 1rem;text-align:center}
body.theme-coolLook header{background:var(--hdr);backdrop-filter:blur(6px)}
.brand{font-size:clamp(2rem,7vw,3.5rem);font-weight:900;letter-spacing:.02em;margin:0}
.header-banner{max-height:180px;max-width:100%;object-fit:contain;border-radius:24px;box-shadow:0 4px 6px rgba(0,0,0,.1);transition:all .3s ease;cursor:pointer}
.deepsite-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .9rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);border-radius:12px;font-size:.9rem;color:#fff;text-decoration:none;position:relative;overflow:hidden;transition:background .3s ease,transform .2s ease;margin-top:1rem;animation:badgePulse 2.5s infinite}
.deepsite-badge:hover{background:rgba(255,255,255,.15);transform:scale(1.03)}
.deepsite-logo{width:20px;height:20px}
@keyframes badgePulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.3)}70%{box-shadow:0 0 0 8px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.pill{display:inline-block;background:#fff;color:#1d4ed8;padding:.25rem .85rem;border-radius:999px;font-weight:500;font-size:.9rem;margin-top:.75rem}

nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;max-width:72rem;margin:2rem auto 0;padding:1rem}
body.theme-coolLook nav{background:rgba(10,10,20,.55);border-radius:12px;backdrop-filter:blur(6px)}
nav a{background:#1e40af;color:#fff;text-decoration:none;font-weight:500;padding:.7rem 1.4rem;border-radius:.5rem;transition:background .2s,transform .2s}
nav a i{margin-right:.5rem}
nav a:hover{background:#1d4ed8;transform:translateY(-2px)}

main{flex:1;width:100%;max-width:72rem;margin:2.5rem auto;padding:0 1rem}
.panel{background:var(--panel);border-radius:.75rem;padding:2rem 1rem;text-align:center;overflow:hidden}
body.theme-coolLook .panel{backdrop-filter:blur(4px)}
.eyebrow{text-transform:uppercase;letter-spacing:.25em;font-size:.85rem;color:var(--sub);font-weight:500;margin:0}
h1{font-size:clamp(1.8rem,5vw,3rem);margin:.4rem 0 .3rem;font-weight:900}
.when{color:var(--sub);margin:0 0 2rem;font-weight:300;font-size:1.05rem}

.clock{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.5rem,2vw,1.25rem);max-width:56rem;margin:0 auto}
.unit{background:var(--card);border:1px solid var(--cardb);border-radius:16px;padding:clamp(.8rem,3vw,1.8rem) .25rem;position:relative;overflow:hidden}
body.theme-coolLook .unit{animation:pulse 3s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(140,167,250,.35)}70%{box-shadow:0 0 0 12px rgba(140,167,250,0)}100%{box-shadow:0 0 0 0 rgba(140,167,250,0)}}
.num{display:block;font-size:clamp(2rem,10vw,5.5rem);font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.lbl{display:block;margin-top:.6rem;font-size:clamp(.65rem,2.2vw,.95rem);text-transform:uppercase;letter-spacing:.15em;color:var(--sub);font-weight:500}

.bar{max-width:56rem;height:10px;border-radius:999px;background:var(--card);border:1px solid var(--cardb);margin:2rem auto .5rem;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#5a7df5,#c084fc);transition:width 1s linear}
.barlbl{font-size:.85rem;color:var(--sub);margin:0}

.live{display:none;font-size:clamp(2rem,8vw,4.5rem);font-weight:900;margin:1rem 0}
.done .clock,.done .bar,.done .barlbl{display:none}
.done .live{display:block}

footer{background:var(--foot);color:#fff;text-align:center;padding:2rem 1rem}
body.theme-coolLook footer{backdrop-filter:blur(8px)}
footer .soc{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-bottom:1rem}
footer .soc{gap:1rem}
footer .soc a{color:#fff;text-decoration:none;width:3rem;height:3rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.25rem;transition:background .2s,transform .2s}
footer .soc a:hover{transform:translateY(-3px)}
.fb{background:#2563eb}.fb:hover{background:#1d4ed8!important}
.tw{background:#60a5fa}.tw:hover{background:#3b82f6!important}
.yt{background:#dc2626}.yt:hover{background:#b91c1c!important}
.ig{background:#db2777}.ig:hover{background:#be185d!important}
.pn{background:#ef4444}.pn:hover{background:#dc2626!important}
footer p{margin:.25rem 0;font-size:.85rem}
footer a.gh{color:#93c5fd;text-decoration:none;font-size:.85rem}

.theme-toggle{position:fixed;top:calc(1rem + env(safe-area-inset-top,0px));right:1rem;padding:.5rem .9rem;border:none;border-radius:8px;cursor:pointer;background:rgba(0,0,0,.6);color:#fff;z-index:999;font:700 .9rem 'Roboto',sans-serif;backdrop-filter:blur(4px)}
@media (max-width:480px){.theme-toggle{right:.6rem;padding:.45rem .7rem}nav a{padding:.6rem 1rem}}
</style>
</head>
<body>
<button class="theme-toggle" id="tt"></button>

<header>
  <a href="https://team236.github.io/" target="_blank"><img src="brighter banner.jpg" alt="236 Technoticks Banner" class="header-banner"></a><br>
  <span class="pill">Season countdown</span>
</header>

<nav>
  <a href="https://team236.github.io/"><i class="fas fa-home"></i>Home</a>
  <a href="https://team236.github.io/about_us.html"><i class="fas fa-users"></i>About Us</a>
  <a href="https://team236.github.io/New_members.html"><i class="fas fa-user-plus"></i>New Members</a>
  <a href="https://team236.github.io/Contact_Us.html"><i class="fas fa-envelope"></i>Contact Us</a>
  <a href="https://team236.github.io/Robot_archive.html"><i class="fas fa-robot"></i>Robot Archive</a>
  <a href="https://team236.github.io/Links.html"><i class="fas fa-link"></i>Links</a>
  <a href="https://team236.github.io/bash.html"><i class="fas fa-beach"></i>𓆉 Bash@theBeach</a>
</nav>

<main>
  <section class="panel" id="panel">
    <p class="eyebrow">FIRST Robotics Competition 2027</p>
    <h1>Kickoff: BIOCORE reveal</h1>
    <p class="when">Saturday, January 9, 2027 · 12:00 PM ET</p>

    <div class="clock" role="timer" aria-live="off">
      <div class="unit"><span class="num" id="d">--</span><span class="lbl">Days</span></div>
      <div class="unit"><span class="num" id="h">--</span><span class="lbl">Hours</span></div>
      <div class="unit"><span class="num" id="m">--</span><span class="lbl">Minutes</span></div>
      <div class="unit"><span class="num" id="s">--</span><span class="lbl">Seconds</span></div>
    </div>

    <div class="bar"><i id="fill"></i></div>
    <p class="barlbl" id="pct"></p>

    <div class="live">🚀 KICKOFF IS LIVE!</div>
  </section>
</main>

<footer>
  <div class="soc">
    <a href="https://www.facebook.com/FIRSTTeam236/" class="fb" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
    <a href="https://x.com/technoticks236" class="tw" aria-label="X / Twitter"><i class="fab fa-twitter"></i></a>
    <a href="https://www.youtube.com/@thetechnoticks" class="yt" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
    <a href="https://www.instagram.com/236technoticks/" class="ig" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
    <a href="https://www.pinterest.com/team236/6" class="pn" aria-label="Pinterest"><i class="fab fa-pinterest"></i></a>
  </div>
  <p>Copyright &copy; 2024-2026 Team 236 - TechnoTicks</p>
  <a class="gh" href="https://github.com/Team236/team236.github.io" target="_blank" rel="noopener">GitHub Repository</a><br>
  <a href="#" class="deepsite-badge"><img src="https://huggingface.co/spaces/enzostvs/deepsite/resolve/main/public/logo.svg" alt="DeepSite Logo" class="deepsite-logo"><span>Made partially with DeepSite</span></a>
</footer>

<script>
(function(){
  // Kickoff: Jan 9, 2027, 12:00 PM ET (EST = UTC-5)
  var KICKOFF = new Date('2027-01-09T17:00:00Z').getTime();
  // Progress bar starts at Day 100 (exactly 100 days before kickoff)
  var START = KICKOFF - 100 * 86400000;
  var body = document.body, btn = document.getElementById('tt');
  var el = {d:d_(),h:h_(),m:m_(),s:s_()};
  function d_(){return document.getElementById('d')}
  function h_(){return document.getElementById('h')}
  function m_(){return document.getElementById('m')}
  function s_(){return document.getElementById('s')}
  var fill = document.getElementById('fill'), pct = document.getElementById('pct'), panel = document.getElementById('panel');
  function pad(n){return n < 10 ? '0' + n : '' + n}

  function tick(){
    var now = Date.now(), diff = KICKOFF - now;
    if (diff <= 0){ panel.classList.add('done'); return; }
    panel.classList.remove('done');
    var t = Math.floor(diff / 1000);
    el.d.textContent = Math.floor(t / 86400);
    el.h.textContent = pad(Math.floor(t % 86400 / 3600));
    el.m.textContent = pad(Math.floor(t % 3600 / 60));
    el.s.textContent = pad(t % 60);
    var p = Math.max(0, Math.min(100, (now - START) / (KICKOFF - START) * 100));
    fill.style.width = p.toFixed(2) + '%';
    pct.textContent = 'Day 100 \u2192 Kickoff: ' + p.toFixed(1) + '% of the way there';
  }
  tick(); setInterval(tick, 1000);

  // Banner click animation (from the team site)
  document.querySelector('.header-banner').addEventListener('click', function(){
    var b = this;
    b.style.transform = 'scale(0.98)';
    setTimeout(function(){ b.style.transform = 'scale(1.02)'; }, 100);
    setTimeout(function(){ b.style.transform = 'scale(1)'; }, 200);
  });

  // DeepSite ripple (from the team site)
  document.querySelector('.deepsite-badge').addEventListener('click', function(e){
    e.preventDefault();
    var r = document.createElement('span'), box = this.getBoundingClientRect();
    r.style.cssText = 'position:absolute;background:#fff;opacity:.3;border-radius:50%;width:10px;height:10px;transform:scale(0);transition:transform .6s ease,opacity .6s ease;left:' + (e.clientX - box.left - 5) + 'px;top:' + (e.clientY - box.top - 5) + 'px';
    this.appendChild(r);
    setTimeout(function(){ r.style.transform = 'scale(40)'; r.style.opacity = '0'; }, 10);
    setTimeout(function(){ r.remove(); }, 600);
  });

  // Theme toggle (defaults to coolLook, like the team site)
  var saved = null;
  try { saved = localStorage.getItem('k236-theme'); } catch(e){}
  body.classList.add(saved === 'easyRead' ? 'theme-easyRead' : 'theme-coolLook');
  function label(){
    var cool = body.classList.contains('theme-coolLook');
    btn.textContent = cool ? 'Switch to EasyRead' : 'Switch to CoolLook';
    btn.setAttribute('aria-pressed', cool ? 'true' : 'false');
  }
  btn.addEventListener('click', function(){
    body.classList.toggle('theme-coolLook');
    body.classList.toggle('theme-easyRead');
    try { localStorage.setItem('k236-theme', body.classList.contains('theme-easyRead') ? 'easyRead' : 'coolLook'); } catch(e){}
    label();
  });
  label();
})();
</script>
</body>
</html>