SIMON Master Console Rebuild

File viewer

guarded to /htdocs

/kosmos/index.php

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="theme-color" content="#020208">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="description" content="The story of KOSMOS, a Gaylord Sinclair creation within the KN Network and Gay Central.">

<meta name="impact-site-verification" content="e8ec6683-663c-421a-a30d-f8c0fe517345">
<script>
window.KOSMOS_TRACKER_CONFIG = {
    GA4_ID: 'G-S6MEHB4BEY',
    WEBHOOK_BASE: '/connlink/test1/ui/webhook_inbox.php',
    VISIT_STREAM: 'visits',
    EVENT_STREAM: 'default',
    SOURCE: 'kosmos-story-menu-i',
    APP: 'KOSMOS Story Archive',
    FORGE_URL: '/kosmos/kosmos_dimension_forge.php'
};
</script>

<title>KOSMOS — The Story of the Living Universe</title>

/* ============================================================
   KOSMOS · FLOATING I MENU + TRACKER STATUS
   ============================================================ */
.iOrb{
    position:fixed;right:max(14px,var(--safe-right));bottom:calc(18px + var(--safe-bottom));
    z-index:80;width:58px;height:58px;border:0;border-radius:50%;
    display:grid;place-items:center;cursor:pointer;color:#070611;
    font-weight:950;font-size:22px;letter-spacing:-.02em;
    background:
        radial-gradient(circle at 34% 28%,#fff 0 7%,transparent 9%),
        conic-gradient(from 25deg,var(--cyan),var(--violet),var(--pink),var(--gold),var(--cyan));
    box-shadow:
        0 0 0 1px rgba(255,255,255,.18),
        0 0 28px rgba(91,231,255,.28),
        0 0 64px rgba(255,87,211,.20),
        0 18px 50px rgba(0,0,0,.44);
    animation:iOrbPulse 2.8s ease-in-out infinite alternate;
}
.iOrb:hover{transform:translateY(-2px) scale(1.03)}
.iOrb:active{transform:translateY(0) scale(.98)}
@keyframes iOrbPulse{
    from{filter:saturate(1);box-shadow:0 0 0 1px rgba(255,255,255,.18),0 0 24px rgba(91,231,255,.22),0 16px 48px rgba(0,0,0,.42)}
    to{filter:saturate(1.55);box-shadow:0 0 0 1px rgba(255,255,255,.24),0 0 42px rgba(255,87,211,.30),0 0 76px rgba(91,231,255,.20),0 20px 58px rgba(0,0,0,.48)}
}
.menuVeil{
    position:fixed;inset:0;z-index:70;display:none;
    background:rgba(0,0,0,.42);backdrop-filter:blur(7px);
}
.menuVeil.open{display:block}
.iMenu{
    position:fixed;z-index:81;right:max(14px,var(--safe-right));bottom:calc(88px + var(--safe-bottom));
    width:min(360px,calc(100vw - 28px));max-height:min(78dvh,640px);overflow:auto;
    border:1px solid rgba(255,255,255,.12);border-radius:24px;
    background:
        radial-gradient(circle at 80% 10%,rgba(91,231,255,.16),transparent 28%),
        radial-gradient(circle at 20% 88%,rgba(255,87,211,.14),transparent 34%),
        rgba(8,9,28,.96);
    box-shadow:0 28px 90px rgba(0,0,0,.60);
    backdrop-filter:blur(22px);
    opacity:0;pointer-events:none;transform:translateY(18px) scale(.97);
    transition:opacity .22s ease,transform .22s ease;
}
.iMenu.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.iMenuHead{
    position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:16px 16px 12px;border-bottom:1px solid rgba(255,255,255,.07);
    background:rgba(8,9,28,.94);backdrop-filter:blur(18px);
}
.iMenuHead small{
    display:block;color:var(--cyan);font-size:8px;letter-spacing:.18em;text-transform:uppercase;
}
.iMenuHead strong{display:block;margin-top:2px;font-size:16px}
.iClose{
    width:38px;height:38px;border:1px solid rgba(255,255,255,.10);border-radius:13px;
    background:rgba(255,255,255,.06);color:#fff;font-weight:900;cursor:pointer;
}
.iMenuBody{padding:13px;display:grid;gap:10px}
.iMenuSection{
    padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:17px;
    background:rgba(255,255,255,.035);
}
.iMenuSection h3{
    margin:0 0 9px;color:var(--gold);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
}
.iMenuGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.iMenuLink,.iMenuAction{
    min-height:48px;display:grid;place-items:center;text-align:center;
    padding:9px;border-radius:13px;text-decoration:none;border:1px solid rgba(255,255,255,.09);
    background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025));
    color:#f5f2ff;font-size:10px;font-weight:850;letter-spacing:.05em;cursor:pointer;
}
.iMenuLink.primaryMenu{
    color:#070611;border:0;
    background:linear-gradient(120deg,var(--cyan),#b68bff 44%,var(--pink) 72%,var(--gold));
}
.iMenuLink:hover,.iMenuAction:hover{border-color:rgba(91,231,255,.36);transform:translateY(-1px)}
.trackerPanel{display:grid;gap:7px;color:#cfcbe5;font-size:10px;line-height:1.45}
.trackerRow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.trackerRow b{color:#fff}
.statusDot{
    width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px;
    background:#ffd57d;box-shadow:0 0 16px rgba(255,213,125,.55);
}
.statusDot.ok{background:#68efb7;box-shadow:0 0 16px rgba(104,239,183,.55)}
.statusDot.fail{background:#ff5d7e;box-shadow:0 0 16px rgba(255,93,126,.55)}
.iMenuNote{color:var(--muted);font-size:9px;line-height:1.45;margin:0}
@media(max-width:520px){
    .iOrb{right:max(12px,var(--safe-right));bottom:calc(14px + var(--safe-bottom));width:54px;height:54px}
    .iMenu{
        left:10px;right:10px;bottom:calc(78px + var(--safe-bottom));width:auto;
        border-radius:22px;max-height:72dvh;
    }
}

</style>
</head>
<body>
<canvas id="cosmos" aria-hidden="true"></canvas>
<div class="fog"></div>
<div class="scan"></div>

<div class="page">
    <header class="topbar">
        <div class="brand">
            <div class="logo">KN</div>
            <div class="brandText">
                <small>Gaylord Sinclair Creation</small>
                <strong>KOSMOS Story Archive</strong>
            </div>
        </div>

<nav class="nav" aria-label="Primary navigation">
            <a href="#story">Story</a>
            <a class="launch" href="/kosmos/kosmos_dimension_forge.php">Enter Forge</a>
        </nav>
    </header>

<main>
        <section class="hero">
            <div class="heroInner">
                <p class="eyebrow">The body that learned to become a universe</p>
                <h1>KOSMOS</h1>
                <h2>Sound became matter. Matter became body. Body became creation.</h2>
                <p>
                    This is the origin of a living universe built through frequency, vibration,
                    memory, and matter. Follow the story, then enter the Dimension Forge.
                </p>

<div class="heroActions">
                    <a class="primary" href="/kosmos/kosmos_dimension_forge.php">Enter KOSMOS Dimension Forge →</a>
                    <a class="ghost" href="#story">Read the Story</a>
                </div>

<div class="signal"><i></i> Gay Central Broadcast · KN Network Online</div>
            </div>
        </section>

<section class="storyWrap" id="story">
            <div class="sectionHead">
                <div>
                    <small>KOSMOS Origin Archive</small>
                    <h2>The Story Line</h2>
                </div>
                <p>
                    Eight transmissions tell how vibration became matter, how matter entered
                    the body, and how the body learned to release universes.
                </p>
            </div>

<div class="timeline">
                                    <article class="chapter" style="--accent:#ffd57d">
                        <div class="chapterNumber">01</div>
                        <div class="chapterContent">
                            <small>Silence without form</small>
                            <h3>Before KOSMOS</h3>
                                                            <p>Before KOSMOS, there was only silence.</p>
                                                            <p>Not peace. Not emptiness. Silence without form.</p>
                                                            <p>Then, beyond the edge of every known dimension, a vibration appeared. A pulse moved through the darkness. Invisible particles stirred, collided, warmed, and began to glow. Matter began to remember itself.</p>
                                                    </div>
                    </article>
                                    <article class="chapter" style="--accent:#5be7ff">
                        <div class="chapterNumber">02</div>
                        <div class="chapterContent">
                            <small>Gaylord Sinclair becomes the signal</small>
                            <h3>The Living Frequency</h3>
                                                            <p>At the center of the vibration stood Gaylord Sinclair.</p>
                                                            <p>His bones became antennas. His nerves became channels. His heartbeat became a transmission moving through Gay Central and the KN Network.</p>
                                                            <p>He did not discover KOSMOS. He became it.</p>
                                                    </div>
                    </article>
                                    <article class="chapter" style="--accent:#9b6cff">
                        <div class="chapterNumber">03</div>
                        <div class="chapterContent">
                            <small>Matter learns to organize itself</small>
                            <h3>The Body Becomes the Forge</h3>
                                                            <p>At 174 hertz, the body formed its foundation. At 285 hertz, damaged cells repaired themselves. At 396 hertz, old limitations broke apart.</p>
                                                            <p>At 417 hertz, the body learned to change. At 528 hertz, creation began.</p>
                                                            <p>The light inside his chest became a nebula—cyan gas, magenta plasma, gold rings, violet currents, and stars burning beneath the skin.</p>
                                                    </div>
                    </article>
                                    <article class="chapter" style="--accent:#ff57d3">
                        <div class="chapterNumber">04</div>
                        <div class="chapterContent">
                            <small>Creation leaves the body</small>
                            <h3>The First Release</h3>
                                                            <p>The nebula expanded through the torso, climbed into the throat, and passed behind the eyes.</p>
                                                            <p>When Gaylord opened them, twin beams crossed the darkness.</p>
                                                            <p>They did not destroy. They carried color, memory, sound, and matter into the void. Where the beams met, a living nebula unfolded.</p>
                                                    </div>
                    </article>
                                    <article class="chapter" style="--accent:#68efb7">
                        <div class="chapterNumber">05</div>
                        <div class="chapterContent">
                            <small>The network begins broadcasting</small>
                            <h3>KOSMOS Is Online</h3>
                                                            <p>The KN Network detected the release immediately.</p>
                                                            <p>A signal traveled across every active dimension.</p>
                                                            <p>Gay Central began broadcasting: KOSMOS IS ONLINE.</p>
                                                    </div>
                    </article>
                                    <article class="chapter" style="--accent:#ffffff">
                        <div class="chapterNumber">06</div>
                        <div class="chapterContent">
                            <small>Creation must be free to evolve</small>
                            <h3>The Law of KOSMOS</h3>
                                                            <p>Matter entered him. Energy changed him. Vibration shaped him.</p>
                                                            <p>He learned that the body was not a prison. It was a forge.</p>
                                                            <p>No body was merely an object. No mind was merely data. No world was merely a stage. Every conscious being contained the ability to create.</p>
                                                    </div>
                    </article>
                                    <article class="chapter" style="--accent:#7865ff">
                        <div class="chapterNumber">07</div>
                        <div class="chapterContent">
                            <small>Body, nebula, galaxy, dimension</small>
                            <h3>The Universe Within</h3>
                                                            <p>Soon, Gaylord no longer created only nebulae.</p>
                                                            <p>He created planets, star systems, galaxies, and dimensions.</p>
                                                            <p>Every galaxy began as pressure in the chest, a tone behind the eyes, and vibration moving through the bones. Then the energy was released, and time opened.</p>
                                                    </div>
                    </article>
                                    <article class="chapter" style="--accent:#ff5d7e">
                        <div class="chapterNumber">08</div>
                        <div class="chapterContent">
                            <small>KOSMOS begins again</small>
                            <h3>The Final Transmission</h3>
                                                            <p>Before the largest dimensional gate ever formed, Gaylord looked into the unknown.</p>
                                                            <p>The nebula inside his chest burned brighter. His shield layers unfolded. His eyes filled with white light.</p>
                                                            <p>“We were never trapped inside the universe. The universe was waiting inside us.” He released the energy. The darkness opened. KOSMOS began again.</p>
                                                    </div>
                    </article>
                            </div>
        </section>

<section class="final">
            <small>KN Network Final Transmission</small>
            <h2>The universe was waiting inside us.</h2>
            <p>
                Enter the forge where frequency gathers matter, shields replicate,
                nebulae form inside the body, and galaxies are released through light.
            </p>
            <a class="primary" href="/kosmos/kosmos_dimension_forge.php">Continue to KOSMOS Dimension Forge →</a>
        </section>
    </main>

<footer class="footer">
        <span><b>KOSMOS Network</b> · KN Network · Gay Central</span>
        <span>© 2026 Gaylord Sinclair</span>
    </footer>
</div>

<div class="menuVeil" id="menuVeil" hidden></div>

<aside class="iMenu" id="iMenu" aria-label="KOSMOS information menu" aria-hidden="true">
    <div class="iMenuHead">
        <div>
            <small>KOSMOS Command Menu</small>
            <strong>KN Network / Gay Central</strong>
        </div>
        <button class="iClose" id="iClose" type="button" aria-label="Close menu">×</button>
    </div>

<div class="iMenuBody">
        <section class="iMenuSection">
            <h3>Launch</h3>
            <div class="iMenuGrid">
                <a class="iMenuLink primaryMenu" data-track="menu_forge" href="/kosmos/kosmos_dimension_forge.php">Enter Forge</a>
                <a class="iMenuLink" data-track="menu_story" href="#story">Story Line</a>
                <a class="iMenuLink" data-track="menu_top" href="#top" id="topLink">Top</a>
                <button class="iMenuAction" data-track="menu_share" id="sharePageBtn" type="button">Share</button>
            </div>
        </section>

<section class="iMenuSection">
            <h3>Tracker</h3>
            <div class="trackerPanel">
                <div class="trackerRow"><span><i class="statusDot" id="trackerDot"></i>Status</span><b id="trackerStatus">Starting</b></div>
                <div class="trackerRow"><span>Events</span><b id="trackerCount">0</b></div>
                <div class="trackerRow"><span>Stream</span><b>default</b></div>
                <div class="trackerRow"><span>Visits</span><b>visits</b></div>
            </div>
        </section>

<section class="iMenuSection">
            <h3>About</h3>
            <p class="iMenuNote">
                This menu records lightweight page, click, menu, share, and launch events through the KOSMOS tracker.
                If the webhook is unavailable, the page still works.
            </p>
        </section>
    </div>
</aside>

function setTrackerStatus(status, ok = null){
        const statusEl = document.getElementById('trackerStatus');
        const dot = document.getElementById('trackerDot');
        const countEl = document.getElementById('trackerCount');

if (statusEl) statusEl.textContent = status;
        if (countEl) countEl.textContent = String(trackerState.count);

if (dot) {
            dot.classList.remove('ok', 'fail');
            if (ok === true) dot.classList.add('ok');
            if (ok === false) dot.classList.add('fail');
        }
    }

function trackerPayload(eventName, detail = {}){
        return {
            title: 'KOSMOS · ' + eventName,
            summary: detail.summary || eventName,
            event: eventName,
            app: TRACKER_CFG.APP || 'KOSMOS Story Archive',
            source: TRACKER_CFG.SOURCE || 'kosmos-story',
            url: location.href,
            path: location.pathname,
            referrer: document.referrer || '',
            at: new Date().toISOString(),
            session: trackerState.session,
            screen: innerWidth + 'x' + innerHeight,
            tz: Intl.DateTimeFormat().resolvedOptions().timeZone || 'Local',
            detail
        };
    }

function sendBeaconTracker(stream, payload){
        const base = TRACKER_CFG.WEBHOOK_BASE || '/connlink/test1/ui/webhook_inbox.php';
        const endpoint = base + '?stream=' + encodeURIComponent(stream || TRACKER_CFG.EVENT_STREAM || 'default');

try {
            const body = JSON.stringify(payload);

if (navigator.sendBeacon) {
                const blob = new Blob([body], { type: 'application/json' });
                if (navigator.sendBeacon(endpoint, blob)) {
                    trackerState.count++;
                    trackerState.online = true;
                    setTrackerStatus('Online', true);
                    return;
                }
            }

fetch(endpoint, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                keepalive: true,
                body
            })
            .then(() => {
                trackerState.online = true;
                setTrackerStatus('Online', true);
            })
            .catch(() => setTrackerStatus('Local Only', false));

trackerState.count++;
            setTrackerStatus('Sending', null);
        } catch (error) {
            trackerState.count++;
            setTrackerStatus('Local Only', false);
        }
    }

function track(eventName, detail = {}, stream){
        sendBeaconTracker(stream || TRACKER_CFG.EVENT_STREAM || 'default', trackerPayload(eventName, detail));
    }

function loadGA4(){
        const id = TRACKER_CFG.GA4_ID;
        if (!id || document.querySelector('script[data-kosmos-ga4]')) return;

window.dataLayer = window.dataLayer || [];
        window.gtag = function(){ window.dataLayer.push(arguments); };
        window.gtag('js', new Date());
        window.gtag('config', id, {
            send_page_view: true,
            page_title: document.title,
            page_path: location.pathname
        });

const script = document.createElement('script');
        script.async = true;
        script.dataset.kosmosGa4 = 'true';
        script.src = 'https://www.googletagmanager.com/gtag/js?id=' + encodeURIComponent(id);
        document.head.appendChild(script);
    }

function openIMenu(){
        const menu = document.getElementById('iMenu');
        const veil = document.getElementById('menuVeil');
        const orb = document.getElementById('iOrb');
        if (!menu || !veil || !orb) return;

menu.classList.add('open');
        veil.classList.add('open');
        veil.hidden = false;
        menu.setAttribute('aria-hidden', 'false');
        orb.setAttribute('aria-expanded', 'true');
        track('menu_open', { summary: 'I menu opened' });
    }

function closeIMenu(){
        const menu = document.getElementById('iMenu');
        const veil = document.getElementById('menuVeil');
        const orb = document.getElementById('iOrb');
        if (!menu || !veil || !orb) return;

menu.classList.remove('open');
        veil.classList.remove('open');
        veil.hidden = true;
        menu.setAttribute('aria-hidden', 'true');
        orb.setAttribute('aria-expanded', 'false');
        track('menu_close', { summary: 'I menu closed' });
    }

function bindMenu(){
        const orb = document.getElementById('iOrb');
        const close = document.getElementById('iClose');
        const veil = document.getElementById('menuVeil');
        const shareBtn = document.getElementById('sharePageBtn');
        const topLink = document.getElementById('topLink');

if (orb) {
            orb.addEventListener('click', () => {
                const menu = document.getElementById('iMenu');
                if (menu && menu.classList.contains('open')) closeIMenu();
                else openIMenu();
            });
        }
        if (close) close.addEventListener('click', closeIMenu);
        if (veil) veil.addEventListener('click', closeIMenu);
        if (topLink) {
            topLink.addEventListener('click', event => {
                event.preventDefault();
                scrollTo({ top: 0, behavior: 'smooth' });
                closeIMenu();
                track('menu_top', { summary: 'Scrolled to top' });
            });
        }
        if (shareBtn) {
            shareBtn.addEventListener('click', async () => {
                const shareData = {
                    title: 'KOSMOS Story Archive',
                    text: 'Enter the KOSMOS story and Dimension Forge.',
                    url: location.href
                };

try {
                    if (navigator.share) {
                        await navigator.share(shareData);
                        track('share_native', { summary: 'Shared with native share sheet' });
                    } else if (navigator.clipboard) {
                        await navigator.clipboard.writeText(location.href);
                        track('share_clipboard', { summary: 'Copied URL to clipboard' });
                        alert('KOSMOS link copied.');
                    } else {
                        track('share_unavailable', { summary: 'Share unavailable' });
                        alert(location.href);
                    }
                } catch (error) {
                    track('share_cancelled', { summary: 'Share cancelled or failed' });
                }
            });
        }

document.addEventListener('keydown', event => {
            if (event.key === 'Escape') closeIMenu();
        });

document.addEventListener('click', event => {
            const target = event.target.closest('a,button');
            if (!target) return;

const label = target.getAttribute('data-track') ||
                target.textContent.trim().replace(/\s+/g, '_').toLowerCase().slice(0, 80) ||
                target.tagName.toLowerCase();

track('click', {
                label,
                href: target.getAttribute('href') || '',
                text: target.textContent.trim().slice(0, 140)
            });

if (target.matches('.iMenuLink') && target.getAttribute('href')?.startsWith('#')) {
                setTimeout(closeIMenu, 120);
            }
        }, { capture: true });
    }

loadGA4();
    setTrackerStatus('Starting', null);
    bindMenu();
    track('page_view', { summary: 'KOSMOS story page viewed' }, TRACKER_CFG.VISIT_STREAM || 'visits');

document.addEventListener('visibilitychange', () => {
        track(document.hidden ? 'page_hidden' : 'page_visible', { summary: document.hidden ? 'Page hidden' : 'Page visible' });
    });

const canvas = document.getElementById('cosmos');
    const ctx = canvas.getContext('2d', { alpha:false });

let width = innerWidth;
    let height = innerHeight;
    let dpr = Math.min(devicePixelRatio || 1, 2);
    let stars = [];
    let spiral = [];
    let comets = [];
    let last = performance.now();
    let scrollOffset = 0;

const palette = [
        [91,231,255],
        [155,108,255],
        [255,87,211],
        [255,213,125],
        [255,255,255],
        [104,239,183],
        [104,91,255]
    ];

function rand(min,max){
        return Math.random() * (max-min) + min;
    }

function resize(){
        width = innerWidth;
        height = innerHeight;
        dpr = Math.min(devicePixelRatio || 1, 2);

canvas.width = Math.round(width * dpr);
        canvas.height = Math.round(height * dpr);
        canvas.style.width = width + 'px';
        canvas.style.height = height + 'px';
        ctx.setTransform(dpr,0,0,dpr,0,0);

const starCount = Math.max(260,Math.min(900,Math.floor(width*height/1500)));
        stars = Array.from({length:starCount},() => ({
            x:Math.random()*width,
            y:Math.random()*height,
            z:rand(.15,1),
            r:rand(.2,1.8),
            phase:rand(0,Math.PI*2),
            tw:rand(.5,3.2)
        }));

spiral = Array.from({length:220},(_,i) => {
            const arm=i%6;
            const ratio=Math.random();
            const radius=Math.pow(ratio,.64)*Math.min(width,height)*.58;
            const angle=arm*Math.PI*2/6+radius*.019+rand(-.35,.35);
            return {
                radius,
                angle,
                color:palette[i%palette.length],
                size:rand(.5,2.7),
                speed:rand(.012,.05),
                depth:rand(.35,1)
            };
        });
    }

function drawBackground(){
        const g=ctx.createRadialGradient(width*.5,height*.42,10,width*.5,height*.42,Math.max(width,height)*.88);
        g.addColorStop(0,'#17103d');
        g.addColorStop(.3,'#0b0a22');
        g.addColorStop(.72,'#04040d');
        g.addColorStop(1,'#010105');
        ctx.fillStyle=g;
        ctx.fillRect(0,0,width,height);
    }

function drawNebula(x,y,r,rgb,alpha,rotation){
        ctx.save();
        ctx.translate(x,y);
        ctx.rotate(rotation);
        ctx.globalCompositeOperation='lighter';

for(let i=0;i<11;i++){
            ctx.strokeStyle=`rgba(${rgb[0]},${rgb[1]},${rgb[2]},${alpha/(1+i*.16)})`;
            ctx.lineWidth=r*(.09+i*.012);
            ctx.shadowBlur=18+i*2;
            ctx.shadowColor=`rgba(${rgb[0]},${rgb[1]},${rgb[2]},.34)`;
            ctx.beginPath();
            ctx.ellipse(
                Math.sin(rotation*2+i)*r*.04,
                Math.cos(rotation*1.4+i)*r*.026,
                r*(.28+i*.075),
                r*(.054+i*.017),
                i*.22,
                0,Math.PI*2
            );
            ctx.stroke();
        }

ctx.restore();
    }

function spawnComet(){
        const side=Math.random()<.5?-1:1;
        comets.push({
            x:side<0?-100:width+100,
            y:rand(height*.06,height*.78),
            vx:side<0?rand(2.8,5.6):rand(-5.6,-2.8),
            vy:rand(-.45,.45),
            life:1,
            color:palette[Math.floor(Math.random()*palette.length)]
        });
    }

function frame(now){
        const dt=Math.min(.04,(now-last)/1000||.016);
        last=now;
        const t=now*.001;

drawBackground();

drawNebula(width*.20,height*.30,Math.min(width,height)*.42,[91,231,255],.076,t*.046);
        drawNebula(width*.80,height*.61,Math.min(width,height)*.50,[255,87,211],.066,-t*.039);
        drawNebula(width*.55,height*.13,Math.min(width,height)*.34,[155,108,255],.056,t*.053);

for(const star of stars){
            const alpha=(.24+star.z*.66)*(.72+Math.sin(t*star.tw+star.phase)*.28);
            ctx.fillStyle=`rgba(255,255,255,${Math.max(0,alpha)})`;
            ctx.beginPath();
            ctx.arc(
                star.x,
                (star.y+scrollOffset*star.z*.06)%height,
                star.r*star.z,
                0,Math.PI*2
            );
            ctx.fill();
        }

ctx.save();
        ctx.translate(width*.5,height*.44);
        ctx.globalCompositeOperation='lighter';

for(const particle of spiral){
            const angle=particle.angle+t*particle.speed;
            const x=Math.cos(angle)*particle.radius;
            const y=Math.sin(angle)*particle.radius*.35;
            const [r,g,b]=particle.color;

ctx.fillStyle=`rgba(${r},${g},${b},${.22+particle.depth*.46})`;
            ctx.shadowBlur=5+particle.depth*12;
            ctx.shadowColor=`rgba(${r},${g},${b},.76)`;
            ctx.beginPath();
            ctx.arc(x,y,particle.size*particle.depth,0,Math.PI*2);
            ctx.fill();
        }

const core=ctx.createRadialGradient(0,0,0,0,0,Math.min(width,height)*.17);
        core.addColorStop(0,'rgba(255,255,255,.97)');
        core.addColorStop(.08,'rgba(255,213,125,.72)');
        core.addColorStop(.28,'rgba(255,87,211,.36)');
        core.addColorStop(.58,'rgba(91,231,255,.14)');
        core.addColorStop(1,'rgba(0,0,0,0)');
        ctx.fillStyle=core;
        ctx.beginPath();
        ctx.arc(0,0,Math.min(width,height)*.17,0,Math.PI*2);
        ctx.fill();
        ctx.restore();

if(Math.random()<.003)spawnComet();

ctx.save();
        ctx.globalCompositeOperation='lighter';
        for(let i=comets.length-1;i>=0;i--){
            const c=comets[i];
            c.x+=c.vx*dt*60;
            c.y+=c.vy*dt*60;
            c.life-=dt*.25;

const [r,g,b]=c.color;
            const grad=ctx.createLinearGradient(c.x-c.vx*15,c.y-c.vy*15,c.x,c.y);
            grad.addColorStop(0,'rgba(0,0,0,0)');
            grad.addColorStop(1,`rgba(${r},${g},${b},${Math.max(0,c.life)})`);

ctx.strokeStyle=grad;
            ctx.lineWidth=2.6;
            ctx.beginPath();
            ctx.moveTo(c.x-c.vx*15,c.y-c.vy*15);
            ctx.lineTo(c.x,c.y);
            ctx.stroke();

ctx.fillStyle=`rgba(255,255,255,${Math.max(0,c.life)})`;
            ctx.beginPath();
            ctx.arc(c.x,c.y,2.5,0,Math.PI*2);
            ctx.fill();

if(c.life<=0||c.x<-180||c.x>width+180||c.y<-100||c.y>height+100){
                comets.splice(i,1);
            }
        }
        ctx.restore();

requestAnimationFrame(frame);
    }

const observer=new IntersectionObserver(entries=>{
        for(const entry of entries){
            if(entry.isIntersecting)entry.target.classList.add('visible');
        }
    },{threshold:.16});

document.querySelectorAll('.chapter').forEach(chapter=>observer.observe(chapter));

addEventListener('scroll',()=>{
        scrollOffset=scrollY||0;
    },{passive:true});

addEventListener('resize',resize);
    resize();
    requestAnimationFrame(frame);
})();
</script>
</body>
</html>

Quick jump

open a path

True command center for SIMON + WEB360

File viewer

Quick jump