SIMON Master Console Rebuild

File viewer

guarded to /htdocs

/gaylord/gaylord/index.php

<!doctype html>
<html lang="en" data-app="gaylord-spatial" data-system="simon">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="theme-color" content="#05070b">
<meta name="description" content="GayLord Spatial Network — KN, GayCentral, SIMON, trackers, spatial discovery, chat, and creative systems.">
<title>GayLord Spatial Network</title>
<link rel="preconnect" href="https://unpkg.com">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<style>
:root{
  color-scheme:dark;
  --bg:#04060a;
  --bg2:#08101a;
  --panel:rgba(10,15,24,.86);
  --panel2:rgba(16,24,36,.82);
  --line:rgba(255,255,255,.11);
  --line2:rgba(85,215,255,.28);
  --text:#f5f8ff;
  --muted:#97a4b7;
  --gold:#f4c95d;
  --cyan:#55d7ff;
  --pink:#ff4fb8;
  --purple:#8c6cff;
  --green:#54e27a;
  --red:#ff5b72;
  --sidebar-collapsed:84px;
  --sidebar-expanded:286px;
  --sidebar-current:var(--sidebar-collapsed);
  --topbar:72px;
  --radius:22px;
  --shadow:0 28px 80px rgba(0,0,0,.42);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,textarea,select{font:inherit}
button,a{color:inherit}
a{text-decoration:none}
body.nav-open{--sidebar-current:var(--sidebar-expanded)}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

.background{
  position:fixed;inset:0;z-index:-10;overflow:hidden;
  background:
    radial-gradient(circle at 14% 14%,rgba(85,215,255,.14),transparent 28%),
    radial-gradient(circle at 82% 16%,rgba(140,108,255,.18),transparent 31%),
    radial-gradient(circle at 48% 90%,rgba(255,79,184,.14),transparent 35%),
    linear-gradient(145deg,#030407,#07101a 52%,#05050b);
}
.background::before{
  content:"";position:absolute;inset:-20%;
  background:
    conic-gradient(from 20deg at 50% 50%,transparent,rgba(85,215,255,.07),transparent,rgba(255,79,184,.06),transparent);
  animation:nebulaSpin 32s linear infinite;
}
.background::after{
  content:"";position:absolute;inset:0;opacity:.34;
  background-image:
    radial-gradient(2px 2px at 10% 20%,#fff,transparent 70%),
    radial-gradient(1.5px 1.5px at 30% 80%,var(--cyan),transparent 70%),
    radial-gradient(1.5px 1.5px at 70% 25%,var(--gold),transparent 70%),
    radial-gradient(2px 2px at 85% 70%,var(--pink),transparent 70%);
  background-size:220px 220px,280px 280px,340px 340px,420px 420px;
  animation:starDrift 26s linear infinite;
}
.grid-floor{
  position:absolute;left:-20%;right:-20%;bottom:-34%;height:72%;
  background-image:linear-gradient(rgba(85,215,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(85,215,255,.07) 1px,transparent 1px);
  background-size:54px 54px;
  transform:perspective(700px) rotateX(66deg);
  mask-image:linear-gradient(to top,#000,transparent 84%);
}
.orb{
  position:absolute;border-radius:50%;filter:blur(1px);opacity:.7;animation:orbFloat 12s ease-in-out infinite alternate;
}
.orb.a{width:310px;height:310px;left:8%;top:16%;background:radial-gradient(circle at 34% 26%,#fff,var(--cyan) 7%,var(--purple) 38%,transparent 70%);filter:blur(8px);opacity:.12}
.orb.b{width:240px;height:240px;right:10%;bottom:12%;background:radial-gradient(circle at 34% 26%,#fff,var(--gold) 8%,var(--pink) 42%,transparent 72%);filter:blur(9px);opacity:.12;animation-delay:-5s}
@keyframes nebulaSpin{to{transform:rotate(360deg)}}
@keyframes starDrift{to{transform:translate3d(0,40px,0)}}
@keyframes orbFloat{to{transform:translate3d(35px,-24px,0) scale(1.08)}}

.app{
  display:grid;
  grid-template-columns:var(--sidebar-current) minmax(0,1fr);
  grid-template-rows:var(--topbar) minmax(0,1fr);
  width:100%;height:100%;
  transition:grid-template-columns .34s cubic-bezier(.2,.75,.2,1);
}

.sidebar{
  grid-column:1;grid-row:1/3;position:relative;z-index:80;
  display:flex;flex-direction:column;gap:12px;
  padding:14px 10px;
  background:linear-gradient(180deg,rgba(5,8,13,.98),rgba(7,12,19,.96));
  border-right:1px solid var(--line);
  box-shadow:18px 0 60px rgba(0,0,0,.3);
  overflow:hidden auto;
}
.sidebar::after{
  content:"";position:absolute;right:-1px;top:0;bottom:0;width:1px;
  background:linear-gradient(transparent,var(--cyan),var(--pink),transparent);
  opacity:.55;animation:railPulse 4s ease-in-out infinite;
}
@keyframes railPulse{50%{opacity:1;filter:brightness(1.5)}}

.side-brand{
  display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:11px;
  min-height:66px;padding:5px 4px 16px;border-bottom:1px solid var(--line);overflow:hidden;
}
.side-mark{
  width:52px;height:52px;border-radius:17px;display:grid;place-items:center;flex:0 0 auto;
  color:#090909;font-weight:1000;font-size:18px;
  background:linear-gradient(145deg,var(--gold),var(--pink),var(--cyan));
  box-shadow:0 0 28px rgba(85,215,255,.18),0 0 44px rgba(255,79,184,.13);
  animation:markTurn 6s ease-in-out infinite;
}
@keyframes markTurn{50%{transform:rotateY(180deg) translateZ(12px);filter:hue-rotate(140deg) brightness(1.18)}}
.side-brand-copy{min-width:180px;opacity:0;transform:translateX(-8px);transition:.2s ease}
.nav-open .side-brand-copy{opacity:1;transform:none}
.side-brand-copy strong{display:block;font-size:20px}
.side-brand-copy small{color:var(--muted);font-size:10px;letter-spacing:.12em}

.nav{display:grid;gap:5px}
.nav-button{
  position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;
  min-height:50px;border:1px solid transparent;border-radius:15px;background:transparent;
  color:#9eabba;cursor:pointer;text-align:left;overflow:hidden;padding:0;
}
.nav-button:hover{background:rgba(255,255,255,.05);color:#fff;transform:translateX(2px)}
.nav-button.active{
  color:#fff;border-color:rgba(244,201,93,.2);
  background:linear-gradient(90deg,rgba(244,201,93,.17),rgba(85,215,255,.07));
  box-shadow:inset 3px 0 0 var(--gold);
}
.nav-icon{width:38px;height:38px;margin-left:7px;border-radius:12px;display:grid;place-items:center;background:#111a25;color:var(--gold);font-weight:900}
.nav-label{white-space:nowrap;opacity:0;transform:translateX(-6px);transition:.2s ease}
.nav-open .nav-label{opacity:1;transform:none}
.nav-spacer{flex:1}
.system-mini{padding:10px 8px;border-top:1px solid var(--line);overflow:hidden}
.system-row{display:grid;grid-template-columns:12px minmax(0,1fr);gap:10px;align-items:center;color:var(--muted);font-size:12px;white-space:nowrap}
.system-dot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 16px var(--green);animation:dotPulse 1.8s infinite}
@keyframes dotPulse{70%{box-shadow:0 0 0 10px rgba(84,226,122,0)}}
.system-text{opacity:0;transition:.2s ease}
.nav-open .system-text{opacity:1}

.topbar{
  grid-column:2;grid-row:1;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 22px;background:rgba(4,7,12,.82);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);
}
.brand{
  display:flex;align-items:center;gap:0;font-size:clamp(24px,2.2vw,36px);font-weight:1000;letter-spacing:-1.6px;perspective:700px;
}
.brand span{
  display:inline-block;background:linear-gradient(180deg,#fff 0 14%,var(--gold) 28%,var(--pink) 50%,var(--purple) 72%,var(--cyan) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:letterWave 3.2s ease-in-out infinite;
}
.brand span:nth-child(2n){animation-delay:-.4s}
.brand span:nth-child(3n){animation-delay:-.8s}
@keyframes letterWave{50%{transform:translateY(-3px) translateZ(22px) rotateX(12deg);filter:hue-rotate(100deg) brightness(1.25)}}
.top-actions{display:flex;align-items:center;gap:9px}
.status-chip,.btn{
  border:1px solid var(--line);background:rgba(17,25,36,.88);color:#fff;border-radius:14px;
  padding:10px 13px;font-weight:800;cursor:pointer;
}
.status-chip{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}
.btn:hover{border-color:var(--line2);transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,var(--gold),#e9a93e);color:#101010;border-color:transparent}
.btn.cyan{background:linear-gradient(135deg,#16435a,#15304f);border-color:rgba(85,215,255,.3);color:#dff8ff}
.btn.pink{background:linear-gradient(135deg,#4a1738,#32162e);border-color:rgba(255,79,184,.28);color:#ffd9f1}

.workspace{
  grid-column:2;grid-row:2;position:relative;min-width:0;min-height:0;overflow:auto;
  padding:clamp(14px,2vw,28px);
}
.view{display:none;min-height:100%;animation:viewIn .45s ease both}
.view.active{display:block}
@keyframes viewIn{from{opacity:0;transform:translateY(12px) scale(.995)}to{opacity:1;transform:none}}

.hero{
  position:relative;overflow:hidden;min-height:300px;padding:clamp(24px,4vw,54px);border:1px solid var(--line);
  border-radius:30px;background:linear-gradient(145deg,rgba(11,17,27,.92),rgba(19,11,31,.84));box-shadow:var(--shadow);
}
.hero::before{
  content:"";position:absolute;inset:-40%;background:conic-gradient(transparent,rgba(85,215,255,.12),transparent,rgba(255,79,184,.12),transparent);
  animation:heroSpin 18s linear infinite;
}
.hero::after{
  content:"KN";position:absolute;right:2%;bottom:-18%;font-size:min(29vw,430px);font-weight:1000;line-height:.8;color:rgba(255,255,255,.025);letter-spacing:-.12em;
}
@keyframes heroSpin{to{transform:rotate(360deg)}}
.hero-copy{position:relative;z-index:2;max-width:850px}
.kicker{color:var(--cyan);font-weight:900;letter-spacing:.14em;text-transform:uppercase;font-size:12px}
.hero h1{font-size:clamp(42px,8vw,110px);line-height:.9;letter-spacing:-.065em;margin:12px 0}
.gradient-text{
  background:linear-gradient(90deg,#fff,var(--gold),var(--pink),var(--purple),var(--cyan),#fff);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:textFlow 7s linear infinite;
}
@keyframes textFlow{to{background-position:250% 0}}
.hero p{color:#b4bfd0;font-size:clamp(16px,1.5vw,21px);max-width:760px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

.grid{display:grid;gap:16px}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:24px 0 14px}
.section-head h2{margin:0;font-size:clamp(24px,2.5vw,38px)}
.section-head p{margin:5px 0 0;color:var(--muted)}
.card{
  position:relative;overflow:hidden;padding:20px;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(16,24,36,.88),rgba(7,11,18,.88));box-shadow:0 20px 60px rgba(0,0,0,.26);
}
.card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at var(--mx,80%) var(--my,10%),rgba(85,215,255,.12),transparent 32%);
}
.card:hover{border-color:rgba(85,215,255,.24);transform:translateY(-3px)}
.metric{font-size:clamp(28px,4vw,54px);font-weight:1000;letter-spacing:-.05em}
.label{color:var(--muted);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:900}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;border:1px solid var(--line);font-size:11px;font-weight:800}
.badge.online{color:#dfffea;border-color:rgba(84,226,122,.3);background:rgba(84,226,122,.08)}
.badge.live{color:#dff8ff;border-color:rgba(85,215,255,.3);background:rgba(85,215,255,.08)}
.badge.warn{color:#fff0c7;border-color:rgba(244,201,93,.3);background:rgba(244,201,93,.08)}
.orbit-card{min-height:220px;display:grid;place-items:center;text-align:center}
.module-orb{
  width:118px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-size:32px;font-weight:1000;
  background:radial-gradient(circle at 34% 28%,#fff,var(--cyan) 8%,var(--purple) 32%,#170727 66%,#03050a);
  box-shadow:0 0 34px rgba(85,215,255,.28),0 0 80px rgba(140,108,255,.2);
  animation:moduleFloat 4.5s ease-in-out infinite;
}
@keyframes moduleFloat{50%{transform:translateY(-8px) rotateY(18deg) scale(1.04);filter:hue-rotate(110deg)}}

.console{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:18px;
}
.panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.panel-title h3{margin:0}
.log{
  height:420px;overflow:auto;padding:14px;border-radius:18px;background:#05080d;border:1px solid rgba(255,255,255,.08);
  font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;color:#bfefff;
}
.log-line{padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.log-time{color:#65758a}
.log-type{color:var(--gold);font-weight:900}
.command-row{display:flex;gap:10px;margin-top:12px}
.command-row input{flex:1;border:1px solid var(--line);background:#070b11;color:#fff;border-radius:14px;padding:12px 14px}

.tracker-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tracker-card{min-height:150px}
.spark{height:54px;margin-top:14px;display:flex;align-items:end;gap:5px}
.spark i{flex:1;min-width:5px;border-radius:6px 6px 2px 2px;background:linear-gradient(var(--cyan),var(--purple));height:var(--h);animation:sparkRise 1.2s ease both}
@keyframes sparkRise{from{height:0}}
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th,.table td{text-align:left;padding:12px 10px;border-bottom:1px solid rgba(255,255,255,.07)}
.table th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}

.gaycentral-stage{
  position:relative;min-height:520px;border:1px solid var(--line);border-radius:30px;overflow:hidden;
  background:
    radial-gradient(circle at 22% 50%,rgba(255,79,184,.22),transparent 30%),
    radial-gradient(circle at 75% 50%,rgba(85,215,255,.17),transparent 35%),
    linear-gradient(145deg,rgba(12,10,26,.96),rgba(29,6,34,.88));
}
.gc-rings{position:absolute;inset:0;display:grid;place-items:center}
.gc-core{
  width:min(40vw,420px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 25%,#fff,var(--gold) 7%,var(--pink) 26%,var(--purple) 52%,#03050a 100%);
  box-shadow:0 0 50px rgba(255,79,184,.38),0 0 140px rgba(140,108,255,.3);font-size:clamp(58px,8vw,110px);font-weight:1000;
  animation:gcBang 3.2s ease-in-out infinite;
}
.gc-ring{position:absolute;width:min(48vw,520px);aspect-ratio:1;border:2px solid rgba(255,255,255,.18);border-radius:50%;animation:ringSpin 9s linear infinite}
.gc-ring.r2{transform:rotateX(68deg);animation-duration:13s}
.gc-ring.r3{transform:rotateY(68deg);animation-duration:17s;animation-direction:reverse}
@keyframes gcBang{50%{transform:scale(1.08) translateZ(40px);filter:hue-rotate(160deg) brightness(1.22)}}
@keyframes ringSpin{to{transform:rotate(360deg) rotateX(66deg)}}
.gc-copy{position:absolute;left:clamp(20px,4vw,58px);top:50%;transform:translateY(-50%);z-index:2;max-width:500px}
.gc-copy h2{font-size:clamp(48px,8vw,120px);line-height:.86;margin:0 0 18px;letter-spacing:-.07em}
.gc-copy p{color:#d1cddd;max-width:470px}

.map-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:16px}
.map-card{padding:0;height:620px}
#map{height:100%;background:#09121c}
.map-overlay{
  position:absolute;z-index:500;left:14px;top:14px;right:14px;display:flex;justify-content:space-between;gap:10px;pointer-events:none
}
.map-overlay>*{pointer-events:auto}
.nearby{height:620px;overflow:auto;display:grid;align-content:start;gap:10px}
.person{display:grid;grid-template-columns:48px 1fr auto;gap:11px;align-items:center;padding:11px;border:1px solid var(--line);border-radius:16px;background:#101722}
.avatar{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,var(--pink),var(--purple));font-weight:1000}
.distance{color:var(--muted);font-size:12px}
.me-pulse{width:22px;height:22px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(244,201,93,.55);animation:dotPulse 1.8s infinite}
.person-marker{width:56px!important;height:56px!important;border-radius:50%;overflow:hidden;border:3px solid #fff;background:#182231;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.person-marker span{display:grid;place-items:center;width:100%;height:100%;font-weight:1000}

.auth-overlay{
  position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:20px;
  background:rgba(2,4,8,.78);backdrop-filter:blur(24px);
}
.auth-overlay.hidden{display:none}
.auth-shell{
  width:min(980px,100%);display:grid;grid-template-columns:1.15fr .85fr;overflow:hidden;border:1px solid var(--line);
  border-radius:30px;background:linear-gradient(145deg,rgba(12,18,29,.98),rgba(20,10,30,.96));box-shadow:0 40px 140px rgba(0,0,0,.7);
}
.auth-visual{padding:clamp(28px,5vw,64px);position:relative;overflow:hidden}
.auth-visual::after{content:"GL";position:absolute;right:-4%;bottom:-12%;font-size:250px;font-weight:1000;color:rgba(255,255,255,.025)}
.auth-visual h1{font-size:clamp(42px,6vw,82px);line-height:.9;letter-spacing:-.06em;margin:18px 0}
.auth-panel{padding:32px;border-left:1px solid var(--line);background:rgba(5,8,13,.5)}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px}
.auth-tabs button{padding:11px;border:1px solid var(--line);border-radius:13px;background:#111824;color:var(--muted);cursor:pointer}
.auth-tabs button.active{background:linear-gradient(135deg,var(--gold),#e5a83c);color:#111;border-color:transparent}
.field{display:grid;gap:7px;margin:13px 0}
.field label{font-weight:800;font-size:13px}
.field input{width:100%;border:1px solid var(--line);background:#070b11;color:#fff;border-radius:14px;padding:12px 13px}
.auth-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.check{display:flex;gap:9px;align-items:flex-start;color:var(--muted);font-size:13px;margin:14px 0}

.toast{
  position:fixed;right:18px;bottom:18px;z-index:3000;max-width:360px;padding:14px 16px;border:1px solid var(--line2);
  border-radius:16px;background:rgba(8,14,22,.96);box-shadow:var(--shadow);transform:translateY(120%);opacity:0;transition:.3s ease;
}
.toast.show{transform:none;opacity:1}

@media(max-width:1100px){
  .grid.cols-4,.tracker-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .console,.map-layout{grid-template-columns:1fr}
  .nearby{height:auto;max-height:360px}
}
@media(max-width:900px){
  :root{--topbar:60px;--sidebar-current:0px}
  .app{grid-template-columns:1fr;grid-template-rows:var(--topbar) minmax(0,1fr) 76px}
  .topbar{grid-column:1;grid-row:1;padding:0 12px}
  .workspace{grid-column:1;grid-row:2;padding:12px 10px 20px}
  .sidebar{
    grid-column:1;grid-row:3;position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;
    width:100%;height:76px;padding:6px;border-right:0;border-top:1px solid var(--line);overflow-x:auto;overflow-y:hidden;
  }
  .side-brand,.nav-spacer,.system-mini{display:none}
  .nav{display:flex;gap:4px}
  .nav-button{flex:0 0 74px;display:grid;grid-template-columns:1fr;grid-template-rows:38px auto;place-items:center;min-height:64px;padding:3px;font-size:9px}
  .nav-icon{margin:0;width:34px;height:34px}
  .nav-label{opacity:1;transform:none}
  .nav-button.active{box-shadow:inset 0 3px 0 var(--gold)}
  .top-actions .status-chip{display:none}
  .auth-shell{grid-template-columns:1fr}
  .auth-visual{display:none}
  .auth-panel{border-left:0}
  .gaycentral-stage{min-height:600px}
  .gc-copy{top:auto;bottom:24px;transform:none}
  .gc-rings{align-items:start;padding-top:40px}
  .gc-core{width:min(70vw,330px)}
  .gc-ring{width:min(78vw,390px)}
}
@media(max-width:650px){
  .grid.cols-4,.grid.cols-3,.grid.cols-2,.tracker-grid{grid-template-columns:1fr}
  .hero{padding:24px 18px;min-height:360px}
  .auth-two{grid-template-columns:1fr}
  .brand{font-size:24px}
  .top-actions .btn.cyan{display:none}
  .map-card{height:500px}
  .gc-copy h2{font-size:56px}
}

.community-layout{
  display:grid;
  grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr);
  gap:18px;
  align-items:start
}
.board-stack{display:grid;gap:14px}
.board-composer textarea,.board-composer input,.community-search{
  width:100%;
  border:1px solid var(--line);
  background:#070b11;
  color:#fff;
  border-radius:14px;
  padding:12px 13px;
}
.board-composer textarea{min-height:110px;resize:vertical}
.board-tools{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.board-tools select{
  border:1px solid var(--line);
  background:#0b111a;
  color:#fff;
  border-radius:13px;
  padding:10px 12px
}
.board-feed{display:grid;gap:12px}
.board-post{
  position:relative;
  padding:16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(17,25,37,.92),rgba(8,12,19,.9))
}
.board-post h4{margin:0 0 6px}
.post-meta{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:11px;margin-bottom:10px}
.post-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.post-actions button{
  border:1px solid var(--line);
  background:#101823;
  color:#c7d1df;
  border-radius:11px;
  padding:7px 9px;
  cursor:pointer
}
.community-directory{display:grid;gap:14px}
.community-toolbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px
}
.community-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px
}
.community-link{
  position:relative;
  min-height:150px;
  padding:16px;
  border-radius:18px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 88% 12%,rgba(85,215,255,.12),transparent 34%),
    linear-gradient(145deg,rgba(16,24,36,.94),rgba(8,11,18,.92));
  cursor:pointer
}
.community-link:hover{
  transform:translateY(-3px);
  border-color:rgba(244,201,93,.35)
}
.community-link h4{margin:12px 0 6px}
.community-link p{margin:0;color:var(--muted);font-size:13px}
.community-icon{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--gold),var(--pink),var(--cyan));
  color:#080808;font-weight:1000
}
.viewer{
  margin-top:18px;
  overflow:hidden;
  min-height:560px;
  padding:0
}
.viewer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--line)
}
.viewer-head h3{margin:0}
.viewer-frame{
  width:100%;
  height:520px;
  border:0;
  background:#05070b
}
.viewer-empty{
  min-height:520px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:30px;
  color:var(--muted);
  background:
    radial-gradient(circle at center,rgba(140,108,255,.12),transparent 30%),
    #05070b
}
.big-bang-marker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:999px;
  color:#fff3c8;
  background:rgba(244,201,93,.09);
  border:1px solid rgba(244,201,93,.26);
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em
}
@media(max-width:1000px){
  .community-layout{grid-template-columns:1fr}
}
@media(max-width:650px){
  .community-grid{grid-template-columns:1fr}
  .community-toolbar{grid-template-columns:1fr}
  .viewer-frame,.viewer-empty{height:440px;min-height:440px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* GayLord Chat embedded workspace */
.chat-shell{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px}
.chat-shell-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:18px;background:rgba(8,13,21,.88);backdrop-filter:blur(18px)}
.chat-shell-title{min-width:0}.chat-shell-title strong{display:block;font-size:18px}.chat-shell-title small{display:block;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-frame-wrap{position:relative;min-width:0;min-height:0;overflow:hidden;border:1px solid var(--line);border-radius:24px;background:#05070b;box-shadow:var(--shadow)}
.chat-frame{display:block;width:100%;height:100%;min-height:640px;border:0;background:#05070b}
.chat-loading{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at center,rgba(140,108,255,.16),transparent 35%),#05070b;color:var(--muted);z-index:2;transition:opacity .3s ease,visibility .3s ease}.chat-loading.hidden{opacity:0;visibility:hidden}
.chat-quick{display:flex;gap:8px;flex-wrap:wrap}.chat-quick button{padding:8px 10px;border-radius:12px}
#view-chat{height:100%;min-height:0}
@media(max-width:900px){.chat-shell-head{align-items:flex-start;flex-direction:column}.chat-quick{width:100%;overflow-x:auto;flex-wrap:nowrap}.chat-frame{min-height:560px}.chat-frame-wrap{min-height:0}}

</style>
</head>
<body>
<div class="background" aria-hidden="true">
  <div class="grid-floor"></div>
  <div class="orb a"></div>
  <div class="orb b"></div>
</div>

<div class="app" id="app">
  <aside class="sidebar" id="sidebar" aria-label="GayLord Spatial navigation">
    <div class="side-brand">
      <div class="side-mark">GL</div>
      <div class="side-brand-copy">
        <strong>GayLord</strong>
        <small>KOSMOS NETWORK</small>
      </div>
    </div>

<nav class="nav">
      <button class="nav-button active" data-view="kn"><span class="nav-icon">KN</span><span class="nav-label">Kosmos Network</span></button>
      <button class="nav-button" data-view="chat" data-chat-route="spatial"><span class="nav-icon">GL</span><span class="nav-label">GayLord Chat</span></button>
      <button class="nav-button" data-view="chat" data-chat-route="discover"><span class="nav-icon">D</span><span class="nav-label">Discover</span></button>
      <button class="nav-button" data-view="chat" data-chat-route="inbox"><span class="nav-icon">✉</span><span class="nav-label">Messages</span></button>
      <button class="nav-button" data-view="chat" data-chat-route="groups"><span class="nav-icon">G</span><span class="nav-label">Groups</span></button>
      <button class="nav-button" data-view="chat" data-chat-route="market"><span class="nav-icon">M</span><span class="nav-label">Marketplace</span></button>
      <button class="nav-button" data-view="chat" data-chat-route="albums"><span class="nav-icon">A</span><span class="nav-label">Albums</span></button>
      <button class="nav-button" data-view="chat" data-chat-route="porn"><span class="nav-icon">18+</span><span class="nav-label">Adult Reels</span></button>
      <button class="nav-button" data-view="chat" data-chat-route="profile"><span class="nav-icon">P</span><span class="nav-label">Profile</span></button>
      <button class="nav-button" data-view="chat" data-chat-route="network"><span class="nav-icon">DEV</span><span class="nav-label">Developer / Network</span></button>
      <button class="nav-button" data-view="gaycentral"><span class="nav-icon">GC</span><span class="nav-label">GayCentral</span></button>
      <button class="nav-button" data-view="community"><span class="nav-icon">MB</span><span class="nav-label">Community Board</span></button>
      <button class="nav-button" data-view="simon"><span class="nav-icon">S</span><span class="nav-label">SIMON</span></button>
      <button class="nav-button" data-view="trackers"><span class="nav-icon">T</span><span class="nav-label">Trackers</span></button>
      <button class="nav-button" data-view="spatial"><span class="nav-icon">◎</span><span class="nav-label">Spatial Map</span></button>
      <button class="nav-button" data-view="network"><span class="nav-icon">N</span><span class="nav-label">Network Status</span></button>
    </nav>

<div class="nav-spacer"></div>
    <div class="system-mini">
      <div class="system-row">
        <span class="system-dot"></span>
        <span class="system-text">SIMON ONLINE · KN ACTIVE</span>
      </div>
    </div>
  </aside>

<header class="topbar">
    <a class="brand" href="#" data-view-link="kn" aria-label="GayLord">
      <span>G</span><span>a</span><span>y</span><span>L</span><span>o</span><span>r</span><span>d</span>
    </a>
    <div class="top-actions">
      <div class="status-chip"><span class="system-dot"></span><span id="clock">LIVE</span></div>
      <button class="btn cyan" id="openNav">Menu</button>
      <button class="btn primary" id="enterBtn">Enter Network</button>
    </div>
  </header>

<main class="workspace">
    <section class="view" id="view-chat">
      <div class="chat-shell">
        <div class="chat-shell-head">
          <div class="chat-shell-title">
            <strong id="chatViewTitle">GayLord Chat</strong>
            <small>Full application running inside the Kosmos frame — one login, one database, one responsive shell.</small>
          </div>
          <div class="chat-quick" aria-label="GayLord Chat shortcuts">
            <button class="btn cyan" data-chat-open="spatial">Map</button>
            <button class="btn" data-chat-open="discover">Discover</button>
            <button class="btn" data-chat-open="inbox">Messages</button>
            <button class="btn" data-chat-open="groups">Groups</button>
            <button class="btn" data-chat-open="profile">Profile</button>
            <a class="btn" id="chatFullPage" href="gaylord.php?view=spatial" target="_blank" rel="noopener">Open full page</a>
          </div>
        </div>
        <div class="chat-frame-wrap">
          <div class="chat-loading" id="chatLoading">Opening GayLord Chat…</div>
          <iframe class="chat-frame" id="gaylordChatFrame" title="GayLord Chat" src="gaylord.php?embed=1&v=3&view=spatial" loading="eager" allow="geolocation; camera; microphone; clipboard-write"></iframe>
        </div>
      </div>
    </section>
    <section class="view active" id="view-kn">
      <div class="hero">
        <div class="hero-copy">
          <div class="kicker">KN · KOSMOS NETWORK</div>
          <h1><span class="gradient-text">World Headquarters of Wonder</span></h1>
          <p>One operational layer for GayCentral, SIMON intelligence, spatial discovery, live systems, creative worlds, and trusted measurement.</p>
          <div class="hero-actions">
            <button class="btn primary" data-go="gaycentral">Open GayCentral</button>
            <button class="btn cyan" data-go="simon">Launch SIMON</button>
            <button class="btn pink" data-go="trackers">View Trackers</button>
          </div>
        </div>
      </div>

<div class="section-head">
        <div><h2>Network Modules</h2><p>Live interfaces inside the KN operating field.</p></div>
        <span class="badge online">ALL CORE MODULES READY</span>
      </div>

<div class="grid cols-4">
        <article class="card orbit-card" data-go="gaycentral"><div><div class="module-orb">GC</div><h3>GayCentral</h3><p class="muted">Culture, broadcast, creators, and future heritage.</p></div></article>
        <article class="card orbit-card" data-go="simon"><div><div class="module-orb">S</div><h3>SIMON</h3><p class="muted">Signals, commands, recommendations, and system memory.</p></div></article>
        <article class="card orbit-card" data-go="trackers"><div><div class="module-orb">T</div><h3>Trackers</h3><p class="muted">Transparent browser, session, route, and activity metrics.</p></div></article>
        <article class="card orbit-card" data-go="spatial"><div><div class="module-orb">◎</div><h3>Spatial</h3><p class="muted">Location-aware discovery with permission-controlled mapping.</p></div></article>
      </div>
    </section>

<section class="view" id="view-gaycentral">
      <div class="gaycentral-stage">
        <div class="gc-rings" aria-hidden="true">
          <div class="gc-ring"></div><div class="gc-ring r2"></div><div class="gc-ring r3"></div>
          <div class="gc-core">GC</div>
        </div>
        <div class="gc-copy">
          <div class="kicker">GAYCENTRAL BROADCASTING</div>
          <h2 class="gradient-text">THE BIG BANG</h2>
          <p>Gay heritage, future culture, live creators, stories, art, books, characters, and network transmissions inside KN.</p>
          <div class="hero-actions">
            <button class="btn primary" id="broadcastBtn">Start Broadcast</button>
            <button class="btn pink" data-go="spatial">Enter Spatial Field</button>
          </div>
        </div>
      </div>

<div class="section-head"><div><h2>GayCentral Signals</h2><p>Programming blocks connected to the KN network.</p></div></div>
      <div class="grid cols-3">
        <article class="card"><span class="badge live">LIVE</span><h3>Creator Transmission</h3><p class="muted">Rotating artist, writer, comic, and performance channels.</p></article>
        <article class="card"><span class="badge online">ARCHIVE</span><h3>Gay Heritage Vault</h3><p class="muted">Preserved stories, media, identity, and cultural memory.</p></article>
        <article class="card"><span class="badge warn">NEXT</span><h3>Future Worlds</h3><p class="muted">Wicked Game, Kosmos, machines, SIMON, and interactive universes.</p></article>
      </div>
    </section>

<section class="view" id="view-community">
      <div class="section-head">
        <div>
          <div class="kicker">GAYCENTRAL COMMUNITY</div>
          <h2>Where the Big Bang Begins</h2>
          <p>Post messages, discover community destinations, and open GayCentral-connected pages inside the built-in viewer.</p>
        </div>
        <span class="big-bang-marker">LIVE COMMUNITY LAYER</span>
      </div>

<div class="community-layout">
        <div class="board-stack">
          <article class="card board-composer">
            <div class="panel-title">
              <h3>Create a Community Post</h3>
              <span class="badge live">LOCAL DEMO</span>
            </div>
            <div class="field">
              <label>Post title</label>
              <input id="boardTitle" maxlength="100" placeholder="What begins here?">
            </div>
            <div class="field">
              <label>Message</label>
              <textarea id="boardMessage" maxlength="1200" placeholder="Share an update, idea, event, project, question, or GayCentral signal."></textarea>
            </div>
            <div class="board-tools">
              <select id="boardCategory" aria-label="Post category">
                <option value="Community">Community</option>
                <option value="Events">Events</option>
                <option value="Creators">Creators</option>
                <option value="Books">Books</option>
                <option value="Art">Art</option>
                <option value="Arcade">Arcade</option>
                <option value="SIMON">SIMON</option>
                <option value="KN">KN</option>
              </select>
              <button class="btn primary" id="publishPost">Publish Post</button>
              <button class="btn" id="clearBoard">Clear Local Posts</button>
            </div>
          </article>

<article class="card">
            <div class="panel-title">
              <h3>Message Board</h3>
              <span class="badge online" id="postCount">0 POSTS</span>
            </div>
            <div class="board-feed" id="boardFeed"></div>
          </article>
        </div>

<div class="community-directory">
          <article class="card">
            <div class="panel-title">
              <h3>Community Links</h3>
              <span class="badge live">VIEWER READY</span>
            </div>
            <div class="community-toolbar">
              <input class="community-search" id="communitySearch" placeholder="Search GayCentral, KN, books, art, games, SIMON...">
              <button class="btn cyan" id="openViewerHome">Open GayCentral</button>
            </div>

<div class="community-grid" id="communityGrid" style="margin-top:14px">
              <button class="community-link" data-community-name="GayCentral" data-community-url="/gaycentral/" data-community-search="gaycentral community culture big bang">
                <span class="community-icon">GC</span>
                <h4>GayCentral</h4>
                <p>Culture, creators, heritage, broadcasts, and the Big Bang origin point.</p>
              </button>
              <button class="community-link" data-community-name="Kosmos Network" data-community-url="/kosmos/" data-community-search="kosmos network kn worlds">
                <span class="community-icon">KN</span>
                <h4>Kosmos Network</h4>
                <p>Connected dimensions, worlds, systems, and KN network experiences.</p>
              </button>
              <button class="community-link" data-community-name="SIMON AI" data-community-url="/simon_ai/" data-community-search="simon ai intelligence voice">
                <span class="community-icon">S</span>
                <h4>SIMON AI</h4>
                <p>Voice-first intelligence, assistance, signal processing, and guidance.</p>
              </button>
              <button class="community-link" data-community-name="Books" data-community-url="/books/" data-community-search="books publishing stories novels">
                <span class="community-icon">B</span>
                <h4>Books</h4>
                <p>Gaylord Sinclair books, stories, worlds, and publication links.</p>
              </button>
              <button class="community-link" data-community-name="Art" data-community-url="/art/" data-community-search="art gallery tilo creators">
                <span class="community-icon">A</span>
                <h4>Art Gallery</h4>
                <p>Visual art, featured creators, collections, and gallery experiences.</p>
              </button>
              <button class="community-link" data-community-name="Arcade" data-community-url="/arcade/" data-community-search="arcade games interactive">
                <span class="community-icon">AR</span>
                <h4>SIMON Arcade</h4>
                <p>Interactive games, experiments, spatial entertainment, and neon systems.</p>
              </button>
              <button class="community-link" data-community-name="Comics" data-community-url="/comics/" data-community-search="comics characters archive">
                <span class="community-icon">C</span>
                <h4>Comics</h4>
                <p>Comics, characters, collections, and visual storytelling.</p>
              </button>
              <button class="community-link" data-community-name="Pressbox" data-community-url="/pressbox/" data-community-search="pressbox social media news">
                <span class="community-icon">P</span>
                <h4>Pressbox</h4>
                <p>Social channels, public updates, media, and network announcements.</p>
              </button>
            </div>
          </article>

<article class="card viewer">
            <div class="viewer-head">
              <div>
                <div class="label">GAYCENTRAL VIEWER</div>
                <h3 id="viewerTitle">Where the Big Bang Begins</h3>
              </div>
              <div class="hero-actions" style="margin:0">
                <a class="btn" id="viewerExternal" href="/gaycentral/" target="_blank" rel="noopener">Open Full Page</a>
                <button class="btn" id="closeViewer">Close Viewer</button>
              </div>
            </div>
            <div class="viewer-empty" id="viewerEmpty">
              <div>
                <div class="module-orb" style="margin:auto">GC</div>
                <h3>Choose a community destination</h3>
                <p>The selected GayCentral or KN destination will open here when framing is permitted by that page.</p>
              </div>
            </div>
            <iframe class="viewer-frame" id="communityViewer" title="GayCentral community viewer" loading="lazy" hidden></iframe>
          </article>
        </div>
      </div>
    </section>

<section class="view" id="view-simon">
      <div class="section-head">
        <div><div class="kicker">SIMON INTELLIGENCE</div><h2>Command and Signal Console</h2><p>Local demonstration console for route intelligence, events, and recommendations.</p></div>
        <span class="badge online">SIMON ONLINE</span>
      </div>

<div class="grid cols-4">
        <article class="card"><div class="label">Confidence</div><div class="metric" id="confidenceMetric">96%</div><span class="badge online">STABLE</span></article>
        <article class="card"><div class="label">Signals</div><div class="metric" id="signalMetric">28</div><span class="badge live">ACTIVE</span></article>
        <article class="card"><div class="label">Risk</div><div class="metric">LOW</div><span class="badge online">CONTROLLED</span></article>
        <article class="card"><div class="label">Mode</div><div class="metric">KN</div><span class="badge warn">ADVISORY</span></article>
      </div>

<div class="console" style="margin-top:18px">
        <article class="card">
          <div class="panel-title"><h3>SIMON Event Stream</h3><button class="btn" id="clearLog">Clear</button></div>
          <div class="log" id="simonLog"></div>
          <div class="command-row">
            <input id="simonCommand" placeholder="Type: status, scan, optimize, gaycentral, trackers">
            <button class="btn primary" id="runCommand">Run</button>
          </div>
        </article>
        <aside class="card">
          <div class="panel-title"><h3>Recommended Next Moves</h3><span class="badge live">LIVE</span></div>
          <div class="grid">
            <div class="card"><strong>1. Consolidate routes</strong><p class="muted">Keep KN, GayCentral, SIMON, and trackers under one common navigation shell.</p></div>
            <div class="card"><strong>2. Use real telemetry</strong><p class="muted">Send tracked events to a protected API instead of exposing secrets in the browser.</p></div>
            <div class="card"><strong>3. Permission first</strong><p class="muted">Request location and camera access only after clear user action.</p></div>
          </div>
        </aside>
      </div>
    </section>

<section class="view" id="view-trackers">
      <div class="section-head">
        <div><div class="kicker">TRACKERS</div><h2>Transparent Session Intelligence</h2><p>These values are generated locally in this browser. No secret server data is fabricated.</p></div>
        <button class="btn cyan" id="resetTrackers">Reset Session Metrics</button>
      </div>

<div class="tracker-grid">
        <article class="card tracker-card"><div class="label">Session Duration</div><div class="metric" id="sessionTime">00:00</div><div class="spark" id="sparkSession"></div></article>
        <article class="card tracker-card"><div class="label">Views Opened</div><div class="metric" id="viewsOpened">1</div><div class="spark" id="sparkViews"></div></article>
        <article class="card tracker-card"><div class="label">Interactions</div><div class="metric" id="interactionCount">0</div><div class="spark" id="sparkActions"></div></article>
        <article class="card tracker-card"><div class="label">Device</div><div class="metric" id="deviceType">Desktop</div><span class="badge live" id="connectionType">ONLINE</span></article>
      </div>

<div class="grid cols-2" style="margin-top:18px">
        <article class="card">
          <div class="panel-title"><h3>Route Activity</h3><span class="badge live">LOCAL</span></div>
          <table class="table">
            <thead><tr><th>Module</th><th>Opens</th><th>Last Opened</th></tr></thead>
            <tbody id="routeTable"></tbody>
          </table>
        </article>
        <article class="card">
          <div class="panel-title"><h3>Environment</h3><span class="badge online">READY</span></div>
          <table class="table">
            <tbody>
              <tr><th>Viewport</th><td id="viewportInfo"></td></tr>
              <tr><th>Language</th><td id="languageInfo"></td></tr>
              <tr><th>Storage</th><td id="storageInfo"></td></tr>
              <tr><th>Location permission</th><td id="locationPermission">Unknown</td></tr>
              <tr><th>Camera support</th><td id="cameraSupport"></td></tr>
            </tbody>
          </table>
        </article>
      </div>
    </section>

<section class="view" id="view-spatial">
      <div class="section-head">
        <div><div class="kicker">SPATIAL FIELD</div><h2>Permission-Controlled Discovery</h2><p>Your exact location is not displayed. This demo uses an approximate map center after permission.</p></div>
        <button class="btn primary" id="locateBtn">Use My Location</button>
      </div>

<div class="map-layout">
        <article class="card map-card">
          <div class="map-overlay"><div class="status-chip" id="mapStatus">Location inactive</div><button class="btn cyan" id="demoMapBtn">Load Demo Field</button></div>
          <div id="map"></div>
        </article>
        <aside class="card nearby" id="nearbyList">
          <div class="muted">Activate location or load the demo field to display nearby network nodes.</div>
        </aside>
      </div>
    </section>

<section class="view" id="view-network">
      <div class="section-head">
        <div><div class="kicker">KN STATUS</div><h2>Network Readiness</h2><p>Client-side capability checks for this page.</p></div>
        <button class="btn cyan" id="refreshStatus">Refresh Checks</button>
      </div>
      <div class="grid cols-3" id="statusGrid"></div>
    </section>
  </main>
</div>

<div class="auth-overlay" id="authOverlay">
  <div class="auth-shell">
    <section class="auth-visual">
      <div class="kicker">GAYLORD SPATIAL NETWORK · 18+</div>
      <h1><span class="gradient-text">Enter the Kosmos.</span></h1>
      <p class="muted">KN, GayCentral, SIMON, transparent trackers, and spatial discovery in one non-overlapping interface.</p>
      <div class="module-orb" style="margin-top:30px">GL</div>
    </section>
    <section class="auth-panel">
      <div class="auth-tabs">
        <button class="active" data-auth-tab="login">Sign In</button>
        <button data-auth-tab="register">Create Account</button>
      </div>

<form data-auth-panel="login">
        <h2>Welcome back</h2>
        <div class="field"><label>Email or username</label><input autocomplete="username" required></div>
        <div class="field"><label>Password</label><input type="password" autocomplete="current-password" required></div>
        <button class="btn primary" style="width:100%">Enter GayLord</button>
      </form>

<form data-auth-panel="register" hidden>
        <h2>Create your profile</h2>
        <div class="auth-two">
          <div class="field"><label>Display name</label><input maxlength="80" required></div>
          <div class="field"><label>Username</label><input pattern="[A-Za-z0-9_]{3,32}" required></div>
        </div>
        <div class="field"><label>Email</label><input type="email" required></div>
        <div class="auth-two">
          <div class="field"><label>Birthdate</label><input type="date" required></div>
          <div class="field"><label>Password</label><input type="password" minlength="10" required></div>
        </div>
        <label class="check"><input type="checkbox" required> I am 18+ and accept the consent and conduct rules.</label>
        <button class="btn primary" style="width:100%">Create Account</button>
      </form>
    </section>
  </div>
</div>

const body = document.body;
  const sidebar = document.getElementById('sidebar');
  const views = [...document.querySelectorAll('.view')];
  const navButtons = [...document.querySelectorAll('.nav-button')];
  const toast = document.getElementById('toast');
  const authOverlay = document.getElementById('authOverlay');

let sessionStarted = Number(sessionStorage.getItem('gl_session_started') || Date.now());
  sessionStorage.setItem('gl_session_started', String(sessionStarted));

let interactions = Number(sessionStorage.getItem('gl_interactions') || 0);
  let routes = JSON.parse(sessionStorage.getItem('gl_routes') || '{}');

function showToast(message) {
    toast.textContent = message;
    toast.classList.add('show');
    clearTimeout(showToast.timer);
    showToast.timer = setTimeout(() => toast.classList.remove('show'), 2600);
  }

function countInteraction() {
    interactions++;
    sessionStorage.setItem('gl_interactions', String(interactions));
    document.getElementById('interactionCount').textContent = interactions;
  }

const chatFrame = document.getElementById('gaylordChatFrame');
  const chatLoading = document.getElementById('chatLoading');
  const chatTitle = document.getElementById('chatViewTitle');
  const chatFullPage = document.getElementById('chatFullPage');
  let currentChatRoute = 'spatial';
  const chatLabels = {spatial:'Nearby Map',discover:'Discover',inbox:'Messages',groups:'Groups',market:'Marketplace',albums:'Albums',porn:'Adult Reels',profile:'Profile',network:'Developer / Network'};

function openChatRoute(route) {
    currentChatRoute = chatLabels[route] ? route : 'spatial';
    const url = 'gaylord.php?embed=1&v=3&view=' + encodeURIComponent(currentChatRoute);
    if (chatFrame && chatFrame.getAttribute('src') !== url) {
      chatLoading?.classList.remove('hidden');
      chatFrame.setAttribute('src', url);
    }
    if (chatTitle) chatTitle.textContent = 'GayLord Chat · ' + chatLabels[currentChatRoute];
    if (chatFullPage) chatFullPage.href = 'gaylord.php?view=' + encodeURIComponent(currentChatRoute);
    openView('chat');
  }

chatFrame?.addEventListener('load', () => {
    window.setTimeout(() => {
      try {
        const doc = chatFrame.contentDocument;
        const bodyText = (doc?.body?.innerText || '').trim();
        const bodyHtml = (doc?.body?.innerHTML || '').trim();
        if (!bodyText && bodyHtml.length < 80) {
          if (chatLoading) {
            chatLoading.innerHTML = '<div style="max-width:620px;padding:28px;text-align:left;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:linear-gradient(145deg,#101824,#160c20);box-shadow:0 30px 90px rgba(0,0,0,.55)"><strong style="display:block;font-size:24px;color:#fff;margin-bottom:10px">GayLord loaded a blank response</strong><p style="line-height:1.6;margin:0 0 18px">The Kosmos frame is working. gaylord.php is failing before it can render, usually because its database driver, database connection, or private storage folder is unavailable.</p><div style="display:flex;gap:10px;flex-wrap:wrap"><a class="btn primary" href="gaylord.php?debug=1&amp;embed=1" target="_blank" rel="noopener">Show exact server error</a><a class="btn" href="gaylord.php?health=1" target="_blank" rel="noopener">Open health check</a></div></div>';
            chatLoading.classList.remove('hidden');
          }
          return;
        }
      } catch (error) {
        console.warn('Unable to inspect GayLord frame:', error);
      }
      chatLoading?.classList.add('hidden');
    }, 250);
  });
  document.querySelectorAll('[data-chat-open]').forEach(button => button.addEventListener('click', () => openChatRoute(button.dataset.chatOpen)));

function openView(name, count = true) {
    const target = document.getElementById('view-' + name);
    if (!target) return;

views.forEach(view => view.classList.toggle('active', view === target));
    navButtons.forEach(button => button.classList.toggle('active', button.dataset.view === name && (!button.dataset.chatRoute || button.dataset.chatRoute === currentChatRoute)));

if (count) {
      const now = new Date();
      routes[name] = routes[name] || { count: 0, last: '' };
      routes[name].count++;
      routes[name].last = now.toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'});
      sessionStorage.setItem('gl_routes', JSON.stringify(routes));
      countInteraction();
      updateTrackers();
    }

if (name === 'trackers') updateTrackers();
    if (name === 'network') runStatusChecks();

history.replaceState(null, '', '#'+name);
  }

navButtons.forEach(button => button.addEventListener('click', () => button.dataset.chatRoute ? openChatRoute(button.dataset.chatRoute) : openView(button.dataset.view)));
  document.querySelectorAll('[data-go]').forEach(button => button.addEventListener('click', () => openView(button.dataset.go)));
  document.querySelectorAll('[data-view-link]').forEach(link => link.addEventListener('click', event => {
    event.preventDefault();
    openView(link.dataset.viewLink);
  }));

document.querySelectorAll('.card').forEach(card => {
    card.addEventListener('pointermove', event => {
      const r = card.getBoundingClientRect();
      card.style.setProperty('--mx', ((event.clientX-r.left)/r.width*100)+'%');
      card.style.setProperty('--my', ((event.clientY-r.top)/r.height*100)+'%');
    });
  });

document.querySelectorAll('[data-auth-tab]').forEach(tab => {
    tab.addEventListener('click', () => {
      const name = tab.dataset.authTab;
      document.querySelectorAll('[data-auth-tab]').forEach(button => button.classList.toggle('active', button === tab));
      document.querySelectorAll('[data-auth-panel]').forEach(panel => panel.hidden = panel.dataset.authPanel !== name);
    });
  });

document.querySelectorAll('[data-auth-panel]').forEach(form => {
    form.addEventListener('submit', event => {
      event.preventDefault();
      authOverlay.classList.add('hidden');
      sessionStorage.setItem('gl_entered','1');
      showToast('GayLord Spatial Network opened.');
      openView('kn', false);
    });
  });

document.getElementById('enterBtn').addEventListener('click', () => authOverlay.classList.remove('hidden'));
  if (sessionStorage.getItem('gl_entered') === '1') authOverlay.classList.add('hidden');

function addLog(type, text) {
    const log = document.getElementById('simonLog');
    const line = document.createElement('div');
    line.className = 'log-line';
    line.innerHTML = '<span class="log-time">[' + new Date().toLocaleTimeString() + ']</span> <span class="log-type">' + type + '</span> ' + text;
    log.appendChild(line);
    log.scrollTop = log.scrollHeight;
  }

[
    ['BOOT','SIMON command layer initialized.'],
    ['KN','Kosmos Network route map loaded.'],
    ['TRACKER','Transparent local session tracker ready.'],
    ['SECURITY','No API keys or private secrets exposed in this page.']
  ].forEach(item => addLog(item[0],item[1]));

function runSimonCommand() {
    const input = document.getElementById('simonCommand');
    const command = input.value.trim().toLowerCase();
    if (!command) return;

addLog('USER', command);
    countInteraction();

const responses = {
      status:'All client modules are operational. Server health requires a protected backend endpoint.',
      scan:'Scanning current browser capabilities, routes, and session metrics.',
      optimize:'Recommendation: keep navigation fixed, use CSS grid, and isolate each module as a view.',
      gaycentral:'Opening GayCentral broadcasting surface.',
      trackers:'Opening transparent local trackers.',
      community:'Opening the GayCentral community board and viewer.'
    };
    addLog('SIMON', responses[command] || 'Command recorded. Available commands: status, scan, optimize, gaycentral, community, trackers.');

if (command === 'gaycentral') openView('gaycentral');
    if (command === 'trackers') openView('trackers');
    if (command === 'community') openView('community');
    if (command === 'scan') runStatusChecks();

input.value = '';
    document.getElementById('signalMetric').textContent = String(28 + interactions);
  }

document.getElementById('runCommand').addEventListener('click', runSimonCommand);
  document.getElementById('simonCommand').addEventListener('keydown', event => {
    if (event.key === 'Enter') runSimonCommand();
  });
  document.getElementById('clearLog').addEventListener('click', () => {
    document.getElementById('simonLog').innerHTML = '';
    addLog('SIMON','Event stream cleared.');
  });

document.getElementById('broadcastBtn').addEventListener('click', () => {
    countInteraction();
    showToast('GayCentral broadcast sequence activated.');
  });

function spark(id, seed) {
    const el = document.getElementById(id);
    el.innerHTML = '';
    for (let i=0;i<14;i++) {
      const bar = document.createElement('i');
      bar.style.setProperty('--h', (18 + ((seed*7+i*13)%42)) + 'px');
      el.appendChild(bar);
    }
  }

function updateTrackers() {
    document.getElementById('interactionCount').textContent = interactions;
    const opened = Object.values(routes).reduce((sum, item) => sum + item.count, 0) || 1;
    document.getElementById('viewsOpened').textContent = opened;
    document.getElementById('deviceType').textContent = innerWidth < 700 ? 'Mobile' : innerWidth < 1100 ? 'Tablet' : 'Desktop';
    document.getElementById('connectionType').textContent = navigator.onLine ? 'ONLINE' : 'OFFLINE';
    document.getElementById('viewportInfo').textContent = innerWidth + ' × ' + innerHeight;
    document.getElementById('languageInfo').textContent = navigator.language || 'Unknown';
    document.getElementById('cameraSupport').textContent = navigator.mediaDevices?.getUserMedia ? 'Supported' : 'Unavailable';

let storage = 'Blocked';
    try {
      localStorage.setItem('gl_test','1'); localStorage.removeItem('gl_test'); storage = 'Available';
    } catch(e) {}
    document.getElementById('storageInfo').textContent = storage;

const tbody = document.getElementById('routeTable');
    tbody.innerHTML = '';
    ['kn','chat','gaycentral','community','simon','trackers','spatial','network'].forEach(name => {
      const item = routes[name] || {count:0,last:'—'};
      const row = document.createElement('tr');
      row.innerHTML = '<td>'+name.toUpperCase()+'</td><td>'+item.count+'</td><td>'+item.last+'</td>';
      tbody.appendChild(row);
    });

spark('sparkSession', Math.floor((Date.now()-sessionStarted)/1000));
    spark('sparkViews', opened);
    spark('sparkActions', interactions);
  }

setInterval(() => {
    const seconds = Math.floor((Date.now()-sessionStarted)/1000);
    const min = String(Math.floor(seconds/60)).padStart(2,'0');
    const sec = String(seconds%60).padStart(2,'0');
    document.getElementById('sessionTime').textContent = min+':'+sec;
    document.getElementById('clock').textContent = new Date().toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'});
  },1000);

if (navigator.permissions?.query) {
    navigator.permissions.query({name:'geolocation'}).then(result => {
      document.getElementById('locationPermission').textContent = result.state;
      result.onchange = () => document.getElementById('locationPermission').textContent = result.state;
    }).catch(()=>{});
  }

const demoPeople = [
    {name:'Atlas',lat:32.789,lng:-96.804,distance:'1.2 mi',vibe:'KN creator'},
    {name:'Nova',lat:32.768,lng:-96.781,distance:'2.4 mi',vibe:'GayCentral live'},
    {name:'Orion',lat:32.801,lng:-96.821,distance:'3.1 mi',vibe:'SIMON systems'},
    {name:'Wally',lat:32.752,lng:-96.814,distance:'4.0 mi',vibe:'Future worlds'}
  ];

document.getElementById('demoMapBtn').addEventListener('click', () => {
    loadPeople(32.7767,-96.7970,'Dallas demo');
    countInteraction();
  });

const communityLinks = [...document.querySelectorAll('.community-link')];
  const communityViewer = document.getElementById('communityViewer');
  const viewerEmpty = document.getElementById('viewerEmpty');
  const viewerTitle = document.getElementById('viewerTitle');
  const viewerExternal = document.getElementById('viewerExternal');

function openCommunityViewer(name, url) {
    viewerTitle.textContent = name;
    viewerExternal.href = url;
    communityViewer.src = url;
    communityViewer.hidden = false;
    viewerEmpty.hidden = true;
    countInteraction();
    showToast(name + ' opened in the GayCentral viewer.');
  }

communityLinks.forEach(link => {
    link.addEventListener('click', () => {
      openCommunityViewer(link.dataset.communityName, link.dataset.communityUrl);
    });
  });

document.getElementById('openViewerHome').addEventListener('click', () => {
    openCommunityViewer('GayCentral — Where the Big Bang Begins', '/gaycentral/');
  });

document.getElementById('closeViewer').addEventListener('click', () => {
    communityViewer.src = 'about:blank';
    communityViewer.hidden = true;
    viewerEmpty.hidden = false;
    viewerTitle.textContent = 'Where the Big Bang Begins';
  });

document.getElementById('communitySearch').addEventListener('input', event => {
    const query = event.target.value.trim().toLowerCase();
    communityLinks.forEach(link => {
      link.hidden = query !== '' && !link.dataset.communitySearch.includes(query) && !link.dataset.communityName.toLowerCase().includes(query);
    });
  });

const defaultPosts = [
    {
      id: 'welcome',
      title: 'Welcome to GayCentral',
      message: 'This is where the Big Bang begins: community, creativity, connection, culture, and the future of the KN network.',
      category: 'Community',
      author: 'GayCentral',
      created: 'Pinned'
    },
    {
      id: 'simon',
      title: 'SIMON is listening for signals',
      message: 'Use the SIMON console to inspect local routes, capabilities, trackers, and recommended next moves.',
      category: 'SIMON',
      author: 'SIMON',
      created: 'System'
    }
  ];

function renderBoard() {
    const posts = getBoardPosts();
    const feed = document.getElementById('boardFeed');
    feed.innerHTML = '';
    posts.slice().reverse().forEach(post => {
      const article = document.createElement('article');
      article.className = 'board-post';
      article.innerHTML =
        '<div class="post-meta"><span class="badge live">' + escapeBoard(post.category) + '</span><span>' +
        escapeBoard(post.author) + '</span><span>' + escapeBoard(post.created) + '</span></div>' +
        '<h4>' + escapeBoard(post.title) + '</h4>' +
        '<p>' + escapeBoard(post.message).replace(/\n/g,'<br>') + '</p>' +
        '<div class="post-actions"><button data-react-post="' + escapeBoard(post.id) + '">Signal +1</button>' +
        '<button data-open-community>Open Community Viewer</button></div>';
      feed.appendChild(article);
    });
    document.getElementById('postCount').textContent = posts.length + ' POSTS';
  }

function escapeBoard(value) {
    return String(value).replace(/[&<>'"]/g, character => ({
      '&':'&amp;','<':'&lt;','>':'&gt;',"'":'&#39;','"':'&quot;'
    }[character]));
  }

document.getElementById('publishPost').addEventListener('click', () => {
    const title = document.getElementById('boardTitle').value.trim();
    const message = document.getElementById('boardMessage').value.trim();
    const category = document.getElementById('boardCategory').value;

if (!title || !message) {
      showToast('Add both a title and a message.');
      return;
    }

const saved = JSON.parse(localStorage.getItem('gaycentral_board_posts') || '[]');
    saved.push({
      id: crypto.randomUUID ? crypto.randomUUID() : String(Date.now()),
      title,
      message,
      category,
      author: 'Community Member',
      created: new Date().toLocaleString()
    });
    localStorage.setItem('gaycentral_board_posts', JSON.stringify(saved));
    document.getElementById('boardTitle').value = '';
    document.getElementById('boardMessage').value = '';
    renderBoard();
    countInteraction();
    showToast('Community post published locally.');
  });

document.getElementById('clearBoard').addEventListener('click', () => {
    localStorage.removeItem('gaycentral_board_posts');
    renderBoard();
    showToast('Local community posts cleared.');
  });

renderBoard();

window.addEventListener('resize',updateTrackers);
  window.addEventListener('online',updateTrackers);
  window.addEventListener('offline',updateTrackers);

const initial = location.hash.replace('#','');
  if (initial === 'chat') { openChatRoute(currentChatRoute); }
  else if (['kn','gaycentral','community','simon','trackers','spatial','network'].includes(initial)) openView(initial,false);
  updateTrackers();
  runStatusChecks();

if (matchMedia('(min-width:901px)').matches) {
    body.classList.add('nav-open');
    setTimeout(()=>body.classList.remove('nav-open'),1500);
  }
})();
</script>
</body>
</html>

Quick jump

open a path

True command center for SIMON + WEB360

File viewer

Quick jump