SIMON Master Console Rebuild

File viewer

guarded to /htdocs

/infinity/index.php

<?php
declare(strict_types=1);

/**
 * /infinity/index.php — FULLSCREEN DREAM HOMEPAGE (REV 5 — FULL FILE)
 * FIX: Idle no longer hides the Reel (INFINITY + looping words stay visible).
 * Idle only fades the top-left brandline + always closes the menu.
 */

require __DIR__ . '/_inc/app.php';

$REEL = [
  "Eternal",
  "Transcendent",
  "Boundless",
  "Infinite",
  "Everlasting",
  "Immortal",
  "Ascendant",
  "Luminous",
  "Timeless",
  "Cosmic",
  "Sovereign",
  "Sacred",
  "Beyond",
  "Unending",
  "Continuance",
  "Afterglow",
  "Unfading",
  "Perennial",
  "Infinite Presence",
  "Living Legacy",
  "Beyond the digital",
  "Life, unending",
  "Presence, eternal",
  "Memory, ascendant",
  "Continuance, sacred",
];
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
<title><?= h($INFINITY['brand']['name']) ?> — <?= h($INFINITY['brand']['tagline']) ?></title>
<meta name="theme-color" content="#070b16" />
<meta name="description" content="<?= h($INFINITY['brand']['desc']) ?>" />
<style>
  :root{
    --bg0:#050812; --bg1:#070b16;
    --text:#eaf2ff; --muted:#a9b6d9;
    --cyan:#6ae0ff; --indigo:#7b62ff; --pink:#ff4fd6;
    --radius: 22px;
    --shadow: 0 18px 60px rgba(0,0,0,.55);
  }

*{ box-sizing:border-box; }
  html,body{ height:100%; width:100%; }
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    color: var(--text);
    background: radial-gradient(1200px 800px at 50% 30%, rgba(123,98,255,.16), transparent 60%),
                radial-gradient(900px 600px at 70% 60%, rgba(106,224,255,.10), transparent 55%),
                linear-gradient(180deg, var(--bg0), var(--bg1));
    overflow:hidden;
  }

/* background video */
  .bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
  .bg video, .bg .poster{
    position:absolute; inset:-2%;
    width:104%; height:104%;
    object-fit:cover;
    filter: saturate(1.12) contrast(1.06) brightness(.84);
    transform: scale(1.02);
  }
  .bg .poster{ background:center/cover no-repeat; display:none; }
  .bg:before{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(1000px 700px at 50% 20%, rgba(255,184,107,.14), transparent 60%),
      radial-gradient(900px 700px at 35% 55%, rgba(106,224,255,.10), transparent 55%),
      radial-gradient(900px 700px at 75% 65%, rgba(255,79,214,.08), transparent 60%),
      linear-gradient(180deg, rgba(5,8,18,.45), rgba(7,11,22,.78));
  }
  .grain{
    position:absolute; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
    opacity:.08;
    mix-blend-mode: overlay;
  }

canvas#fx{ position:fixed; inset:0; z-index:1; pointer-events:none; }

.wrap{
    position:relative;
    z-index:2;
    height:100%;
    display:grid;
    place-items:center;
    padding: clamp(18px, 3vw, 38px);
  }
  .stage{
    width:min(980px, 92vw);
    min-height:min(560px, 78vh);
    position:relative;
  }

/* BIG “I” orb */
  .orb{
    position:absolute;
    top: 64px;
    right: 64px;
    width: 92px;
    height: 92px;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,.18);
    background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
    box-shadow: 0 22px 80px rgba(0,0,0,.45), 0 0 70px rgba(106,224,255,.10);
    cursor:pointer;
    display:grid;
    place-items:center;
    user-select:none;
    -webkit-tap-highlight-color: transparent;
    overflow:hidden;
    z-index: 60;
    animation: floaty 4.6s ease-in-out infinite;
  }
  .orb:before{
    content:"";
    position:absolute; inset:-48%;
    background:
      radial-gradient(circle at 30% 35%, rgba(106,224,255,.36), transparent 55%),
      radial-gradient(circle at 70% 65%, rgba(123,98,255,.28), transparent 60%),
      radial-gradient(circle at 50% 50%, rgba(255,255,255,.14), transparent 58%);
    transform: rotate(18deg);
    animation: pulse 2.25s ease-in-out infinite;
    mix-blend-mode: screen;
    opacity: 1;
  }
  .orb:after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.30) 30%, transparent 60%);
    transform: translateX(-140%);
    opacity:.32;
    animation: sheen 3.2s ease-in-out infinite;
  }
  .orb:hover{ border-color: rgba(106,224,255,.32); }
  .orb:active{ transform: scale(.985); }
  .orb svg{
    width: 44px; height: 44px; opacity:.98;
    filter: drop-shadow(0 0 18px rgba(106,224,255,.30)) drop-shadow(0 0 32px rgba(123,98,255,.18));
  }

@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
  @keyframes pulse{ 0%,100%{ transform:scale(1); opacity:.72;} 50%{ transform:scale(1.11); opacity:1;} }
  @keyframes sheen{ 0%{transform:translateX(-140%);} 45%{transform:translateX(140%);} 100%{transform:translateX(140%);} }

/* Brandline (top-left) */
  .brandline{
    position:absolute;
    left: 28px; top: 26px;
    display:flex; align-items:baseline; gap: 12px;
    z-index: 20;
    transition: opacity 420ms ease, filter 420ms ease;
  }
  .wordmark{
    display:flex; align-items:baseline; gap: 6px;
    letter-spacing:.18em;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 14px;
    color: rgba(234,242,255,.82);
  }
  .ghost{
    opacity:0;
    transform: translateX(-10px);
    transition: opacity 420ms ease, transform 420ms ease;
  }
  .wordmark.on .ghost{ opacity:1; transform: translateX(0); }
  .subtitle{
    font-size: 12px;
    color: rgba(169,182,217,.78);
    letter-spacing:.08em;
    text-transform: uppercase;
    transform: translateY(1px);
    max-width: min(60vw, 740px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

/* Reel (CENTER) — ALWAYS VISIBLE, even idle */
  .reel{
    position:absolute;
    inset: 0;
    display:grid;
    place-items:center;
    padding: 88px 28px 28px 28px;
    z-index: 5;
  }
  .reel .stack{ display:grid; gap: 14px; place-items:center; width: 100%; }

.big{
    text-align:center;
    font-weight: 900;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-size: clamp(54px, 8.6vw, 132px);
    line-height: 0.92;
    color: rgba(234,242,255,.96);
    text-shadow: 0 0 22px rgba(255,255,255,.12),
                 0 0 60px rgba(106,224,255,.26),
                 0 0 120px rgba(123,98,255,.20),
                 0 18px 90px rgba(0,0,0,.62);
    opacity: 0;
    transform: translateY(10px) scale(.985);
    filter: blur(1.5px);
    transition: opacity 1100ms ease, transform 1100ms ease, filter 1100ms ease;
  }
  .big.show{ opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }

.line{
    max-width: 900px;
    text-align:center;
    font-size: clamp(26px, 3.6vw, 54px);
    line-height: 1.06;
    letter-spacing: -.02em;
    font-weight: 760;
    color: rgba(234,242,255,.94);
    text-shadow: 0 0 18px rgba(255,255,255,.10),
                 0 0 38px rgba(106,224,255,.24),
                 0 0 90px rgba(123,98,255,.18),
                 0 16px 80px rgba(0,0,0,.64);
    opacity:0;
    transform: translateY(12px) scale(.992);
    filter: blur(1.35px);
    transition: opacity 1100ms ease, transform 1100ms ease, filter 1100ms ease;
  }
  .line.show{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); }

.hint{
    margin-top: 18px;
    font-size: 12px;
    letter-spacing:.14em;
    text-transform: uppercase;
    color: rgba(169,182,217,.72);
    opacity:.85;
    text-align:center;
    transition: opacity 420ms ease;
  }

/* Menu */
  .menu{
    position:absolute;
    top: 82px;
    left: 50%;
    transform: translateX(-50%) translateY(10px) scale(.985);
    width: min(980px, calc(100vw - 56px));
    max-width: calc(100vw - 56px);
    max-height: calc(100vh - 110px);
    border-radius: calc(var(--radius) + 6px);
    background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 18px;
    padding: 22px;
    opacity:0;
    pointer-events:none;
    filter: blur(6px);
    transition: opacity 260ms ease, transform 260ms ease, filter 260ms ease;
    z-index: 40;
    overflow:auto;
  }
  .menu.on{
    opacity:1;
    pointer-events:auto;
    transform: translateX(-50%) translateY(0) scale(1);
    filter: blur(0);
  }
  .panel{
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.06));
    padding: 18px;
    min-height: 220px;
  }
  .panel h2{
    margin:0 0 10px 0;
    font-size: 14px;
    letter-spacing:.14em;
    text-transform: uppercase;
    color: rgba(234,242,255,.86);
  }
  .panel p{
    margin:0;
    color: rgba(169,182,217,.88);
    font-size: 14px;
    line-height: 1.45;
  }
  .gridlinks{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    margin-top: 14px;
  }
  .a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding: 12px 12px;
    border-radius: 16px;
    text-decoration:none;
    color: rgba(234,242,255,.92);
    border:1px solid rgba(255,255,255,.12);
    background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
  }
  .a:hover{
    transform: translateY(-1px);
    border-color: rgba(106,224,255,.22);
    background: linear-gradient(135deg, rgba(106,224,255,.10), rgba(255,255,255,.02));
  }
  .meta{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 14px; }
  .tag{
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color: rgba(234,242,255,.88);
    padding: 8px 10px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing:.06em;
    text-transform: uppercase;
  }

/* IDLE: keep Reel visible; just dim the top-left + hide hint */
  body.idle .menu{ opacity:0 !important; pointer-events:none !important; }
  body.idle .brandline{ opacity: .10; filter: blur(2px); pointer-events:none; }
  body.idle .hint{ opacity: 0; }
  body.idle .orb{ opacity: 1; pointer-events:auto; }

@media (max-width: 860px){
    .brandline{ top: 20px; left: 20px; }
    .orb{ top: 54px; right: 18px; width: 80px; height: 80px; border-radius: 24px; }
    .orb svg{ width: 38px; height: 38px; }
    .reel{ padding: 88px 16px 16px 16px; }
    .menu{
      top: 78px;
      width: calc(100vw - 32px);
      max-width: calc(100vw - 32px);
      max-height: calc(100vh - 96px);
      padding: 18px;
      grid-template-columns: 1fr;
    }
    .gridlinks{ grid-template-columns: 1fr; }
  }

@media (prefers-reduced-motion: reduce){
    .orb, .orb:before, .orb:after{ animation:none !important; }
    .line, .big{ transition:none !important; }
    .menu{ transition:none !important; }
  }
</style>
</head>

<div class="brandline" aria-label="Infinity brand">
        <div class="wordmark" id="wordmark"><span class="ghost" id="ghost">INFINITY</span></div>
        <div class="subtitle"><?= h($INFINITY['brand']['tagline']) ?></div>
      </div>

<div class="reel" id="reel">
        <div class="stack">
          <div class="big" id="bigInfinity">INFINITY</div>
          <div class="line" id="line"></div>
          <div class="hint" id="hint">Move to wake • Click the “i”</div>
        </div>
      </div>

<div class="menu" id="menu" aria-label="Infinity menu">
        <div class="panel">
          <h2>Infinity</h2>
          <p><?= h($INFINITY['brand']['desc']) ?></p>

<div class="meta" aria-label="Tags">
            <div class="tag">The Hall</div>
            <div class="tag">Sanctuary</div>
            <div class="tag">Living Journal</div>
            <div class="tag">Consent-first</div>
          </div>

<div class="panel">
          <h2>How it works</h2>
          <p>Nothing disappears now. Idle only dims the top-left. Reel loops forever.</p>

<?php if (!empty($INFINITY['social'])): ?>
            <div class="meta" style="margin-top:12px">
              <?php foreach ($INFINITY['social'] as $label => $url): ?>
                <a class="tag" style="text-decoration:none" href="<?= h($url) ?>" target="_blank" rel="noopener"><?= h($label) ?></a>
              <?php endforeach; ?>
            </div>
          <?php endif; ?>

<div style="margin-top:16px; border-top:1px solid rgba(255,255,255,.10); padding-top:14px; color:rgba(169,182,217,.85); font-size:13px; line-height:1.45;">
            <b>Behavior</b><br/>
            • Reel stays visible always.<br/>
            • Menu closes on idle.<br/>
            • Click the “i” for the menu.
          </div>
        </div>
      </div>

</div>
  </div>

if (bgvid) {
    const showPoster = () => { if (poster) poster.style.display = 'block'; };
    bgvid.addEventListener('error', showPoster);
    bgvid.addEventListener('stalled', showPoster);
    bgvid.addEventListener('abort', showPoster);
  }

const REEL = <?= json_encode($REEL, JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES) ?>;

// Idle only dims UI; reel keeps running.
  let idleTimer = null;
  function setActive(on){
    if (on) body.classList.remove('idle');
    else {
      body.classList.add('idle');
      menu.classList.remove('on');   // close menu on idle
      wordmark.classList.remove('on');
    }
  }
  function bump(){
    setActive(true);
    clearTimeout(idleTimer);
    idleTimer = setTimeout(() => setActive(false), 3200);
  }
  ['pointermove','pointerdown','wheel','keydown','touchstart'].forEach(ev=>{
    window.addEventListener(ev, bump, {passive:true});
  });
  bump();

// Wordmark spell (top-left)
  let spelling = false;
  function spell(){
    if (spelling) return;
    spelling = true;
    wordmark.classList.add('on');
    setTimeout(()=> spelling=false, 520);
  }

function toggleMenu(){
    bump();
    spell();
    menu.classList.toggle('on');

try{
      const src = breath?.querySelector('source')?.getAttribute('src') || '';
      if (src) {
        breath.volume = 0.12;
        breath.play().catch(()=>{});
      }
    } catch(e){}
  }

orb.addEventListener('click', (e) => {
    e.preventDefault();
    e.stopPropagation();
    toggleMenu();
  });

// ===== Reel loop ALWAYS =====
  let idx = 0;
  let linePulse = 0;
  let loopTimer = null;

const T_BIG_SHOW  = 2400;
  const T_GAP       = 380;
  const T_LINE_SHOW = 3200;

// ==========================
  // Canvas FX
  // ==========================
  const canvas = document.getElementById('fx');
  const ctx = canvas.getContext('2d', {alpha:true});
  const DPR = Math.min(2, window.devicePixelRatio || 1);

function resize(){
    canvas.width = Math.floor(innerWidth * DPR);
    canvas.height = Math.floor(innerHeight * DPR);
    canvas.style.width = innerWidth+'px';
    canvas.style.height = innerHeight+'px';
    ctx.setTransform(DPR,0,0,DPR,0,0);
  }
  addEventListener('resize', resize, {passive:true});
  resize();

const stars = [];
  const rnd = (a,b)=>a+Math.random()*(b-a);

let mx = innerWidth/2, my = innerHeight/2;
  addEventListener('pointermove', (e)=>{ mx=e.clientX; my=e.clientY; }, {passive:true});

function draw(){
    const w=innerWidth, h=innerHeight;
    ctx.clearRect(0,0,w,h);

linePulse *= 0.92;

const t = performance.now() * 0.001;
    const breathe = 0.5 + 0.5*Math.sin(t * 0.9);
    const flow = 0.035 + breathe * 0.045;

const gx = mx/w, gy = my/h;
    const baseBoost = flow + linePulse*0.18;

const grad = ctx.createRadialGradient(
      w*(0.25+gx*0.15), h*(0.25+gy*0.15), 40,
      w*(0.5+gx*0.10),  h*(0.45+gy*0.10), 520
    );
    grad.addColorStop(0, `rgba(106,224,255,${baseBoost})`);
    grad.addColorStop(0.45, `rgba(123,98,255,${0.03 + flow*0.55 + linePulse*0.12})`);
    grad.addColorStop(1, `rgba(255,79,214,0)`);
    ctx.fillStyle = grad;
    ctx.fillRect(0,0,w,h);

for (let k=0;k<3;k++){
      const phase = t*0.35 + k*1.7;
      const y = h*(0.25 + k*0.22) + Math.sin(phase)*18;
      const band = ctx.createLinearGradient(0,y, w,y);
      band.addColorStop(0, `rgba(106,224,255,0)`);
      band.addColorStop(0.35, `rgba(106,224,255,${0.012 + flow*0.12})`);
      band.addColorStop(0.55, `rgba(123,98,255,${0.010 + flow*0.10})`);
      band.addColorStop(1, `rgba(255,79,214,0)`);
      ctx.fillStyle = band;
      ctx.fillRect(0, y-140, w, 280);
    }

for (const s of stars){
      s.ph += s.tw;
      s.x += s.vx + (mx-w/2)*0.00002;
      s.y += s.vy + (my-h/2)*0.00002;

if (s.x < -10) s.x = w+10; if (s.x > w+10) s.x = -10;
      if (s.y < -10) s.y = h+10; if (s.y > h+10) s.y = -10;

const tw = (Math.sin(s.ph)*0.5+0.5);
      const a = s.a*(0.65 + 0.7*tw) + flow*0.08 + linePulse*0.08;

ctx.beginPath();
      ctx.arc(s.x, s.y, s.r*(0.85+tw*0.35), 0, Math.PI*2);
      ctx.fillStyle = `rgba(234,242,255,${a})`;
      ctx.fill();
    }

const ox = w - (64 + 46);
    const oy = 64 + 46;
    const g2 = ctx.createRadialGradient(ox,oy,16, ox,oy,190);
    g2.addColorStop(0, `rgba(106,224,255,${0.10 + flow*0.35})`);
    g2.addColorStop(0.35, `rgba(123,98,255,${0.06 + flow*0.25})`);
    g2.addColorStop(1, `rgba(0,0,0,0)`);
    ctx.fillStyle = g2;
    ctx.fillRect(ox-190, oy-190, 380, 380);

requestAnimationFrame(draw);
  }
  requestAnimationFrame(draw);
})();
</script>
</body>
</html>

Quick jump

open a path

True command center for SIMON + WEB360

File viewer

Quick jump