clavitor/clavitor.ai/templates/glass.tmpl

{{define "glass"}}
<div class="hero container">
    <p class="label accent mb-4">Global network</p>
    <h1 class="mb-4">Never cached. Still instant.</h1>
    <p class="lead">Every request decrypts fresh from the vault — nothing ever sits in memory or on disk. {{len .Pops}} regions across 6 continents make sure you never notice.</p>
</div>

<div class="section container" style="padding-top:24px">
    <div class="text-sm" style="background:#fffbeb;border:1px solid #fde68a;border-radius:var(--radius-sm);padding:16px 20px;margin-bottom:24px;color:#854d0e">
        <strong class="text-xs" style="text-transform:uppercase;letter-spacing:0.06em">Dubai (me-central-1)</strong><br>
        The AWS UAE region remains offline following drone strikes on March 1, 2026. No customer data was affected. We are awaiting updates from AWS on restoration, expected in the coming weeks.
    </div>
    <div class="glass-grid">
        {{range .Pops}}
        <div class="glass-pop {{if eq .Status "live"}}glass-live{{else}}glass-planned{{end}}">
            <div class="glass-header">
                <div><div class="pop-city">{{.City}}</div><div class="pop-country">{{.CountryFull}}</div></div>
                <span class="glass-status {{if eq .Status "live"}}glass-status-live{{else if eq .Status "outage"}}glass-status-outage{{else}}glass-status-planned{{end}}">{{.Status}}</span>
            </div>
            {{if eq .Status "live"}}<div class="glass-latency-block">
                <div class="glass-latency-left"><span class="glass-latency-title">Response time</span><span class="glass-latency-hint">lower is better</span></div>
                <div class="glass-latency-hero glass-latency" data-dns="{{.DNS}}" data-status="{{.Status}}">—</div>
            </div>
            <div class="glass-details">
                {{if .IP}}<div class="glass-row">
                    <span class="glass-key">IPv4</span>
                    <span class="glass-val mono">{{.IP}}</span>
                </div>{{end}}
                {{if .DNS}}<div class="glass-row">
                    <span class="glass-key">DNS</span>
                    <span class="glass-val mono">{{.DNS}}</span>
                </div>{{end}}
            </div>{{end}}
        </div>
        {{end}}
    </div>
</div>
{{end}}

{{define "glass-script"}}
<script>
(function() {
    const grid = document.querySelector('.glass-grid');

    function classify(ms) {
        if (ms < 60) return 'glass-fast';
        if (ms < 120) return 'glass-ok';
        return 'glass-slow';
    }

    function applyResult(el, ms) {
        el.classList.remove('glass-fast', 'glass-ok', 'glass-slow');
        if (ms < 4900) {
            el.textContent = ms + ' ms';
            el.dataset.ms = ms;
            el.classList.add(classify(ms));
        } else {
            el.textContent = 'down';
            el.dataset.ms = 99999;
            el.classList.add('glass-slow');
        }
    }

    function sortGrid() {
        const arr = Array.from(grid.querySelectorAll('.glass-pop'));
        arr.sort((a, b) => {
            const aMs = parseInt(a.querySelector('.glass-latency')?.dataset.ms || 99998);
            const bMs = parseInt(b.querySelector('.glass-latency')?.dataset.ms || 99998);
            return aMs - bMs;
        });
        arr.forEach(el => grid.appendChild(el));
    }

    function ping(el) {
        const dns = el.dataset.dns;
        if (!dns) { el.textContent = '—'; return Promise.resolve(); }
        el.textContent = '...';
        return popPing(dns).then(ms => {
            applyResult(el, ms !== null ? ms : 5000);
            sortGrid();
        });
    }

    async function pingAll() {
        const els = Array.from(document.querySelectorAll('.glass-latency[data-status="live"][data-dns]'));
        if (window.innerWidth < 768) {
            for (const el of els) { await ping(el); sortGrid(); }
        } else {
            els.forEach(el => ping(el));
        }
    }

    // Silent warm-up: establish all connections without displaying results
    async function warmUp() {
        const els = Array.from(document.querySelectorAll('.glass-latency[data-status="live"][data-dns]'));
        els.forEach(el => { el.textContent = '...'; });
        await Promise.all(els.map(el => {
            const dns = el.dataset.dns;
            if (!dns) return Promise.resolve();
            return fetch('https://' + dns + ':1984/ping').then(()=>{}).catch(()=>{});
        }));
    }

    warmUp().then(() => {
        pingAll();
        setInterval(pingAll, 60000);
    });
})();
</script>
{{end}}