countdown/index.html at main · vitormrmonteiro/countdown · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Countdown Card</title>
<style>
  :root{
    --bg:#f3f4f6;
    --card:#ffffff;
    --ink:#0f172a;
    --muted:#6b7280;
    --muted2:#9ca3af;
    --pill:#0b0f19;
    --ring:rgba(0,0,0,.06);
  }
  *{box-sizing:border-box}
  body{margin:0; font:16px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial; background:var(--bg); color:var(--ink);}
  .wrap{min-height:100svh; display:grid; place-items:center; padding:24px;}
  .card{
    width:100%; max-width:460px; background:var(--card);
    border-radius:16px; padding:24px; box-shadow:0 10px 30px -10px rgba(0,0,0,.2);
    outline:1px solid var(--ring);
  }
  .title{font-weight:600; font-size:18px; margin:0 0 14px;}
  .pill{
    background:var(--pill); color:#fff; border-radius:16px; padding:16px 18px;
    box-shadow:0 12px 24px -12px rgba(0,0,0,.6); margin-bottom:20px;
  }
  .timegrid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:0;
    text-align:center; align-items:center;
  }
  .box{padding:6px 0;}
  .val{font-variant-numeric:tabular-nums; font-size:28px; font-weight:600}
  .lab{margin-top:2px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.7)}
  /* separators between boxes on wider screens */
  @media (min-width:480px){
    .box:not(:last-child){position:relative}
    .box:not(:last-child)::after{
      content:""; position:absolute; right:0; top:50%; translate:0 -50%;
      width:1px; height:28px; background:rgba(255,255,255,.15);
    }
  }
  .p{margin:0 0 8px; color:var(--muted); text-align:center; font-size:14px}
  .p.small{color:var(--muted2)}
  .cta{
    display:inline-flex; gap:8px; align-items:center; justify-content:center;
    padding:12px 16px; border-radius:12px; background:#f1f5f9; color:#111827;
    font-weight:500; font-size:14px; text-decoration:none; outline:1px solid var(--ring);
  }
  .cta:focus,.cta:hover{background:#e5e7eb}
  .center{display:flex; justify-content:center; margin-top:12px}
  .hidden{display:none !important}
  .icon{width:16px; height:16px; display:inline-block}
</style>
</head>
<body>
  <main class="wrap">
    <section class="card" aria-label="Countdown">
      <h2 class="title">Countdown</h2>

      <div class="pill" id="pill" data-target="2025-11-24T05:00:00Z" role="timer" aria-live="polite">
        <div class="timegrid">
          <div class="box"><div class="val" id="d">00</div><div class="lab">Days</div></div>
          <div class="box"><div class="val" id="h">00</div><div class="lab">Hours</div></div>
          <div class="box"><div class="val" id="m">00</div><div class="lab">Minutes</div></div>
          <div class="box"><div class="val" id="s">00</div><div class="lab">Seconds</div></div>
        </div>
      </div>

      <p class="p">Get ready for the trip of our lives!</p>
      <p class="p small">For kisses, hugs and cuddling, please meet your husband.</p>
    </section>
  </main>

<script>
  (function(){
    const pad = n => String(n).padStart(2,'0');
    const el = id => document.getElementById(id);

    const pill = document.getElementById('pill');
    const targetAttr = pill.getAttribute('data-target');
    const targetTime = new Date(targetAttr).getTime();

    if (Number.isNaN(targetTime)) {
      console.warn('Invalid target date:', targetAttr);
      pill.insertAdjacentHTML('afterend', '<p class="p small" role="alert">Invalid target date.</p>');
      document.querySelector('.timegrid').classList.add('hidden');
      return;
    }

    function tick(){
      const now = Date.now();
      const diff = Math.max(0, Math.floor((targetTime - now) / 1000)); // seconds
      const days = Math.floor(diff / 86400);
      const hours = Math.floor((diff % 86400) / 3600);
      const minutes = Math.floor((diff % 3600) / 60);
      const seconds = diff % 60;

      el('d').textContent = pad(days);
      el('h').textContent = pad(hours);
      el('m').textContent = pad(minutes);
      el('s').textContent = pad(seconds);

      // announce when done
      if (diff <= 0) {
        clearInterval(timer);
        pill.setAttribute('aria-label','Countdown complete');
      }
    }

    tick(); // initial paint
    const timer = setInterval(tick, 1000);
    // optional: clear on page hide to save battery
    document.addEventListener('visibilitychange', () => {
      if (document.hidden) clearInterval(timer);
    }, { once:true });
  })();
</script>
</body>
</html>