File size: 4,480 Bytes
e96f49a fdf3925 e96f49a fdf3925 e96f49a fdf3925 e96f49a fdf3925 e96f49a | 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 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 | <script lang="ts">
import { onMount } from 'svelte';
import { EVENT } from '$lib/data/content';
import Icon from './Icon.svelte';
// Final submission deadline — read as UTC from the content model.
const DEADLINE = new Date(EVENT.deadlineISO).getTime();
const pad = (n: number) => String(n).padStart(2, '0');
type Parts = { days: string; hrs: string; min: string; sec: string };
let parts = $state<Parts | null>(null);
let done = $state(false);
function tick(): boolean {
const ms = DEADLINE - Date.now();
if (ms <= 0) {
done = true;
parts = { days: '00', hrs: '00', min: '00', sec: '00' };
return false;
}
const s = Math.floor(ms / 1000);
parts = {
days: pad(Math.floor(s / 86400)),
hrs: pad(Math.floor((s % 86400) / 3600)),
min: pad(Math.floor((s % 3600) / 60)),
sec: pad(s % 60)
};
return true;
}
// Only run on the client — the page is prerendered, so SSR renders the
// placeholder grid below and the real values pop in on hydration (no mismatch).
onMount(() => {
if (!tick()) return;
const id = setInterval(() => {
if (!tick()) clearInterval(id);
}, 1000);
return () => clearInterval(id);
});
const units = $derived([
{ k: 'days', v: parts?.days ?? '––' },
{ k: 'hrs', v: parts?.hrs ?? '––' },
{ k: 'min', v: parts?.min ?? '––' },
{ k: 'sec', v: parts?.sec ?? '––' }
]);
</script>
<div class="countdown" class:countdown--done={done}>
<div class="countdown__head">
<span class="eyebrow">{done ? 'Deadline passed' : 'Counting down to'}</span>
<span class="countdown__when">Jun 15 · 23:59 UTC</span>
</div>
{#if done}
<p class="countdown__closed">Submissions closed</p>
{:else}
<div
class="countdown__grid"
role="timer"
aria-label="Time remaining until the submission deadline"
>
{#each units as u (u.k)}
<div class="countdown__cell" class:is-live={u.k === 'sec'}>
<b class="countdown__num">{u.v}</b>
<span class="countdown__lbl">{u.k}</span>
</div>
{/each}
</div>
<div class="countdown__foot">
<span class="countdown__note"
>Built something? Make sure your README's tagged before the clock runs out.</span
>
<a class="btn btn--accent countdown__cta" href="/submit">
Validate your README <Icon name="arrow" size={18} stroke="#fff" />
</a>
</div>
{/if}
</div>
<style>
.countdown {
width: 100%;
background: var(--kraft);
border: 2px solid var(--ink);
border-radius: 0;
box-shadow: 8px 8px 0 var(--ink);
}
.countdown__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
padding: 14px 20px;
border-bottom: 2px solid var(--ink);
}
.countdown__when {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-2);
white-space: nowrap;
}
.countdown__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.countdown__cell {
padding: 22px 8px 18px;
text-align: center;
border-right: 2px solid var(--ink);
}
.countdown__cell:last-child {
border-right: none;
}
.countdown__num {
display: block;
font-family: var(--font-display);
font-weight: 800;
font-stretch: 115%;
font-variant-numeric: tabular-nums;
font-size: clamp(46px, 8vw, 96px);
line-height: 0.92;
letter-spacing: -0.02em;
color: var(--ink);
}
.countdown__cell.is-live .countdown__num {
color: var(--clay);
}
.countdown__lbl {
display: block;
margin-top: 10px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-soft);
}
/* action bar — guides users straight to the README validator */
.countdown__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px 24px;
flex-wrap: wrap;
padding: 16px 20px;
border-top: 2px solid var(--ink);
background: color-mix(in srgb, var(--amber) 12%, var(--kraft));
}
.countdown__note {
font-family: var(--font-mono);
font-size: 13px;
letter-spacing: 0.01em;
color: var(--ink-2);
max-width: 42ch;
}
.countdown__cta {
white-space: nowrap;
}
.countdown__closed {
margin: 0;
padding: 34px 20px;
text-align: center;
font-family: var(--font-display);
font-weight: 800;
font-stretch: 110%;
font-size: clamp(24px, 3.2vw, 34px);
color: var(--ink);
}
@media (max-width: 560px) {
.countdown__cta {
width: 100%;
justify-content: center;
}
}
</style>
|