46c9177265
WO-TF-024. Re-skin from frozen Wave-0 builtins into blueprint/HUD/mono chrome (AI/robotics product persona), preserving every content field, provider field, custom tag, and JS block; button/card legacy field reads reconciled per §4. - 49 mandatory template_overrides + 7 page templates (default, full-width, landing, article, blog-index, contact, auth) with MID-tier motion (JS scroll-reveal + ticking counters + CSS line-draw; reduced-motion + no-JS static fallback). - 4 persona blocks: tech_spec, benchmark_table, telemetry_grid, changelog_console. Deleted 5 builtin-duplicating theme blocks (now overrides). - 4 dual-mode presets (19 tokens, light + dark tuned). - Bundled OFL fonts (Space Grotesk / Inter / JetBrains Mono) + LICENSES. - Email-safe wrapper retuned; master pages + seed demo site (Halcyon Robotics: home, about, blog x3, contact with data-table + row_inserted email workflow, login). - required_icon_packs (lucide, simple-icons) + RECOMMENDED docs. make build exit 0 (codeless .bnp); check-safety exit 0. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
45 lines
4.8 KiB
Plaintext
45 lines
4.8 KiB
Plaintext
{# countdown override — oversized mono unit boxes; host countdown JS binds via data-* attrs. #}
|
|
<section class="sc-section {{ class }}"><div class="sc-content-well" style="text-align: center;">
|
|
{% if heading %}<h2 class="sc-heading" style="font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0 0 0.75rem 0;">{{ heading }}</h2>{% endif %}
|
|
{% if intro %}<p class="sc-lede" style="max-width: 60ch; margin: 0 auto; color: hsl(var(--muted-foreground));">{{ intro }}</p>{% endif %}
|
|
<div data-countdown style="margin-top: 2.5rem;">
|
|
<div data-countdown-timer data-target="{{ target }}" role="timer" aria-label="Time remaining" style="display: flex; align-items: flex-start; justify-content: center; gap: 1rem; flex-wrap: wrap;">
|
|
<div class="sc-count-unit {% if variant == "boxes" %}sc-count-box{% endif %}" style="display: flex; flex-direction: column; align-items: center; {% if variant == "boxes" %}min-width: 5rem; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); padding: 1rem 0.75rem;{% endif %}"><span class="sc-count-figure numeric-tabular" style="font-family: var(--font-mono, ui-monospace, monospace); font-size: clamp(2rem, 5vw, 3rem); font-weight: 500; line-height: 1; color: hsl(var(--foreground));" data-unit="days">--</span><span class="sc-stat-label" style="margin-top: 0.5rem;">{{ labelDays|default:"Days" }}</span></div>
|
|
<div class="sc-count-unit {% if variant == "boxes" %}sc-count-box{% endif %}" style="display: flex; flex-direction: column; align-items: center; {% if variant == "boxes" %}min-width: 5rem; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); padding: 1rem 0.75rem;{% endif %}"><span class="sc-count-figure numeric-tabular" style="font-family: var(--font-mono, ui-monospace, monospace); font-size: clamp(2rem, 5vw, 3rem); font-weight: 500; line-height: 1; color: hsl(var(--foreground));" data-unit="hours">--</span><span class="sc-stat-label" style="margin-top: 0.5rem;">{{ labelHours|default:"Hours" }}</span></div>
|
|
<div class="sc-count-unit {% if variant == "boxes" %}sc-count-box{% endif %}" style="display: flex; flex-direction: column; align-items: center; {% if variant == "boxes" %}min-width: 5rem; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); padding: 1rem 0.75rem;{% endif %}"><span class="sc-count-figure numeric-tabular" style="font-family: var(--font-mono, ui-monospace, monospace); font-size: clamp(2rem, 5vw, 3rem); font-weight: 500; line-height: 1; color: hsl(var(--foreground));" data-unit="minutes">--</span><span class="sc-stat-label" style="margin-top: 0.5rem;">{{ labelMinutes|default:"Minutes" }}</span></div>
|
|
<div class="sc-count-unit {% if variant == "boxes" %}sc-count-box{% endif %}" style="display: flex; flex-direction: column; align-items: center; {% if variant == "boxes" %}min-width: 5rem; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); padding: 1rem 0.75rem;{% endif %}"><span class="sc-count-figure numeric-tabular" style="font-family: var(--font-mono, ui-monospace, monospace); font-size: clamp(2rem, 5vw, 3rem); font-weight: 500; line-height: 1; color: hsl(var(--foreground));" data-unit="seconds">--</span><span class="sc-stat-label" style="margin-top: 0.5rem;">{{ labelSeconds|default:"Seconds" }}</span></div>
|
|
</div>
|
|
<div data-countdown-expired style="display: none; margin-top: 2rem;"><p class="sc-heading" style="font-size: 1.25rem;">{{ expiredMessage|default:"This has started." }}</p>{% if expiredUrl and expiredLabel %}<a class="sc-btn-primary" href="{{ expiredUrl }}" style="margin-top: 1rem;">{{ expiredLabel }}</a>{% endif %}</div>
|
|
</div>
|
|
<noscript><p class="sc-text" style="margin-top: 1.5rem; color: hsl(var(--muted-foreground));">Counting down to <time datetime="{{ target }}">{{ target }}</time>.</p></noscript>
|
|
</div></section>
|
|
<script>
|
|
(function(){
|
|
var timers = document.querySelectorAll('[data-countdown-timer]');
|
|
timers.forEach(function(el){
|
|
var target = new Date(el.getAttribute('data-target')).getTime();
|
|
if (isNaN(target)) return;
|
|
var wrap = el.closest('[data-countdown]');
|
|
var expired = wrap ? wrap.querySelector('[data-countdown-expired]') : null;
|
|
function pad(n){ return (n < 10 ? '0' : '') + n; }
|
|
function set(unit, value){ var node = el.querySelector('[data-unit="' + unit + '"]'); if (node) node.textContent = value; }
|
|
var interval;
|
|
function tick(){
|
|
var diff = target - Date.now();
|
|
if (diff <= 0){
|
|
el.style.display = 'none';
|
|
if (expired) expired.style.display = 'block';
|
|
if (interval) clearInterval(interval);
|
|
return;
|
|
}
|
|
set('days', Math.floor(diff / 86400000));
|
|
set('hours', pad(Math.floor(diff % 86400000 / 3600000)));
|
|
set('minutes', pad(Math.floor(diff % 3600000 / 60000)));
|
|
set('seconds', pad(Math.floor(diff % 60000 / 1000)));
|
|
}
|
|
tick();
|
|
interval = setInterval(tick, 1000);
|
|
});
|
|
})();
|
|
</script>
|