SIMON Master Console Rebuild

File viewer

guarded to /htdocs

/infinity/login.php

<?php
declare(strict_types=1);

/**
 * /infinity/login.php — Surreal Space/Heaven Login (FIXED: no star boxes)
 * - One global starfield (fullscreen canvas) + global halo glow (not boxed)
 * - NO “two square images”
 * - Back button to /infinity/
 * - Login + Create account + Apple/Google buttons (UI only)
 */

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

$brand = $INFINITY['brand']['name'] ?? 'Infinity';
$tag   = $INFINITY['brand']['tagline'] ?? 'The Marketplace • The Sanctuary • The Living Archive';

$csrf = bin2hex(random_bytes(16)); // demo only; replace with real CSRF in auth
?>
<!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($brand) ?> — Log in</title>
<meta name="theme-color" content="#070b16" />
<meta name="description" content="Log in to Infinity — a surreal sanctuary for memory, legacy, and light." />
<style>
  :root{
    --bg0:#050812; --bg1:#070b16;
    --text:#eaf2ff; --muted:#a9b6d9;
    --edge: rgba(255,255,255,.16);
    --glass: rgba(255,255,255,.075);
    --glass2: rgba(255,255,255,.035);
    --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,.18), transparent 60%),
      radial-gradient(1000px 700px at 70% 60%, rgba(106,224,255,.12), transparent 58%),
      linear-gradient(180deg, var(--bg0), var(--bg1));
    overflow:hidden;
  }

/* ==== GLOBAL ATMOSPHERE (no boxes) ==== */
  .atmo{
    position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  }
  /* slow “heaven fog” */
  .atmo::before{
    content:"";
    position:absolute; inset:-10%;
    background:
      radial-gradient(900px 650px at 50% 22%, rgba(255,255,255,.06), transparent 60%),
      radial-gradient(980px 720px at 35% 55%, rgba(106,224,255,.10), transparent 58%),
      radial-gradient(980px 720px at 75% 65%, rgba(255,79,214,.08), transparent 62%),
      radial-gradient(900px 700px at 55% 70%, rgba(123,98,255,.08), transparent 60%),
      linear-gradient(180deg, rgba(5,8,18,.42), rgba(7,11,22,.82));
    filter: blur(0px);
    animation: drift 18s ease-in-out infinite;
    opacity: 1;
  }
  /* GLOBAL HALO (not a card, not clipped) */
  .atmo::after{
    content:"";
    position:absolute; inset:-20%;
    background:
      radial-gradient(closest-side at 50% 44%,
        rgba(255,255,255,.08),
        rgba(106,224,255,.10) 24%,
        rgba(123,98,255,.08) 46%,
        rgba(255,79,214,.04) 66%,
        transparent 78%);
    mix-blend-mode: screen;
    animation: halo 6.5s ease-in-out infinite;
    opacity: .95;
  }

@keyframes drift{
    0%,100%{ transform: translate3d(0,0,0) scale(1.02); }
    50%{ transform: translate3d(-1.4%,1.2%,0) scale(1.03); }
  }
  @keyframes halo{
    0%,100%{ transform: translate3d(0,0,0) scale(1); opacity:.75; filter: blur(0px); }
    50%{ transform: translate3d(0,-0.8%,0) scale(1.04); opacity:1; filter: blur(0.3px); }
  }

/* grain */
  .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#stars{ position:fixed; inset:0; z-index:1; pointer-events:none; }

/* ==== UI LAYER ==== */
  .wrap{
    position:relative;
    z-index:2;
    height:100%;
    display:grid;
    place-items:center;
    padding: clamp(18px, 3vw, 38px);
  }

.shell{
    width: min(980px, 92vw);
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 18px;
    align-items: stretch;
  }

.card{
    border-radius: calc(var(--radius) + 10px);
    background: linear-gradient(180deg, rgba(255,255,255,.08), 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);
    overflow:hidden;
    min-height: min(640px, 78vh);
  }

.left, .right{
    position:relative;
    padding: 22px;
  }

/* top row */
  .toprow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    margin-bottom: 12px;
  }
  .back{
    display:inline-flex;
    align-items:center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.22);
    color: rgba(234,242,255,.92);
    text-decoration:none;
    letter-spacing:.08em;
    text-transform: uppercase;
    font-size: 12px;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
    user-select:none;
  }
  .back:hover{
    transform: translateY(-1px);
    border-color: rgba(106,224,255,.22);
    background: rgba(0,0,0,.30);
  }
  .back i{ font-style: normal; opacity:.85; }

.sig{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap: 4px;
    min-width: 0;
    text-align:right;
  }
  .sig b{
    letter-spacing:.18em;
    text-transform: uppercase;
    font-size: 12px;
    color: rgba(234,242,255,.84);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width: 52ch;
  }
  .sig small{
    color: rgba(169,182,217,.78);
    letter-spacing:.08em;
    text-transform: uppercase;
    font-size: 11px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width: 52ch;
  }

.title{
    margin-top: 10px;
    margin-bottom: 8px;
    font-size: clamp(24px, 3.1vw, 40px);
    letter-spacing: -.02em;
    font-weight: 850;
    color: rgba(234,242,255,.94);
    text-shadow:
      0 0 18px rgba(255,255,255,.08),
      0 0 48px rgba(106,224,255,.16),
      0 0 90px rgba(123,98,255,.14);
  }
  .subtitle{
    margin:0 0 18px 0;
    color: rgba(169,182,217,.90);
    line-height: 1.55;
    font-size: 14px;
    max-width: 62ch;
  }

.divider{
    height:1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), rgba(106,224,255,.22), transparent);
    opacity:.9;
    margin: 16px 0;
  }

/* form */
  form{ margin:0; }
  .field{ display:grid; gap: 8px; margin-top: 12px; }
  label{
    font-size: 12px;
    letter-spacing:.12em;
    text-transform: uppercase;
    color: rgba(169,182,217,.82);
  }
  input{
    width:100%;
    padding: 12px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.22);
    color: rgba(234,242,255,.92);
    outline:none;
    transition: border-color .16s ease, background .16s ease;
  }
  input:focus{
    border-color: rgba(106,224,255,.32);
    background: rgba(0,0,0,.30);
  }
  .row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap: 12px;
    margin-top: 12px;
  }
  .check{
    display:flex;
    align-items:center;
    gap: 10px;
    color: rgba(169,182,217,.92);
    font-size: 13px;
    user-select:none;
  }
  .check input{ width:16px; height:16px; accent-color: rgba(106,224,255,.95); }

.link{
    color: rgba(234,242,255,.92);
    text-decoration:none;
    border-bottom: 1px dashed rgba(255,255,255,.18);
    padding-bottom: 2px;
    font-size: 13px;
  }
  .link:hover{ border-bottom-color: rgba(106,224,255,.30); }

.btn{
    width:100%;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(135deg, rgba(106,224,255,.12), rgba(255,255,255,.02));
    color: rgba(234,242,255,.92);
    font-weight: 850;
    letter-spacing:.12em;
    text-transform: uppercase;
    cursor:pointer;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
  }
  .btn:hover{
    transform: translateY(-1px);
    border-color: rgba(106,224,255,.26);
    background: linear-gradient(135deg, rgba(123,98,255,.12), rgba(255,255,255,.02));
  }

.or{
    display:flex;
    align-items:center;
    gap: 12px;
    margin: 16px 0 8px;
    color: rgba(169,182,217,.80);
    font-size: 12px;
    letter-spacing:.14em;
    text-transform: uppercase;
  }
  .or:before, .or:after{
    content:"";
    flex: 1;
    height:1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  }

.oauth{
    display:grid;
    gap: 10px;
    margin-top: 10px;
  }
  .oauth a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    padding: 12px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.18);
    color: rgba(234,242,255,.92);
    text-decoration:none;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
  }
  .oauth a:hover{
    transform: translateY(-1px);
    border-color: rgba(106,224,255,.24);
    background: rgba(0,0,0,.28);
  }
  .oauth .lefty{ display:flex; align-items:center; gap: 10px; min-width: 0; }
  .oauth .badge{
    width: 36px; height: 36px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    display:grid; place-items:center;
    box-shadow: 0 14px 40px rgba(0,0,0,.35);
    flex: 0 0 auto;
  }
  .oauth .txt{ display:flex; flex-direction:column; gap: 2px; min-width: 0; }
  .oauth .txt b{
    font-size: 13px; letter-spacing:.08em; text-transform: uppercase;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .oauth .txt small{
    font-size: 12px; color: rgba(169,182,217,.82);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }

/* right panel: remove “image box” entirely — use halo ornament that is NOT a rectangle */
  .right{
    display:grid;
    grid-template-rows: auto 1fr auto;
    gap: 14px;
  }

/* halo ornament (borderless, not boxed, not a “square image”) */
  .haloWrap{
    position:relative;
    height: 210px;
    border-radius: 999px;
    /* no border, no solid background */
    background: transparent;
    overflow: visible;
    display:grid;
    place-items:center;
  }
  .haloRing{
    position:absolute;
    inset: -18px;
    border-radius: 999px;
    background:
      radial-gradient(closest-side at 50% 50%,
        rgba(255,255,255,.11),
        rgba(106,224,255,.14) 26%,
        rgba(123,98,255,.10) 48%,
        rgba(255,79,214,.06) 66%,
        transparent 78%);
    filter: blur(0.2px);
    mix-blend-mode: screen;
    animation: ring 4.2s ease-in-out infinite;
    opacity: .95;
  }
  .haloRing2{
    position:absolute;
    inset: 10px;
    border-radius: 999px;
    background:
      radial-gradient(circle at 40% 35%, rgba(106,224,255,.22), transparent 56%),
      radial-gradient(circle at 70% 65%, rgba(123,98,255,.16), transparent 60%),
      radial-gradient(circle at 50% 50%, rgba(255,255,255,.10), transparent 58%);
    mix-blend-mode: screen;
    animation: ring2 2.6s ease-in-out infinite;
    opacity: .9;
  }
  .haloCore{
    position:relative;
    width: 96px;
    height: 96px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
    box-shadow:
      0 24px 90px rgba(0,0,0,.45),
      0 0 70px rgba(106,224,255,.10);
    overflow:hidden;
  }
  .haloCore::before{
    content:"";
    position:absolute; inset:-50%;
    background:
      radial-gradient(circle at 30% 35%, rgba(106,224,255,.34), transparent 55%),
      radial-gradient(circle at 70% 65%, rgba(123,98,255,.26), transparent 60%),
      radial-gradient(circle at 50% 50%, rgba(255,255,255,.14), transparent 58%);
    transform: rotate(18deg);
    animation: core 2.15s ease-in-out infinite;
    mix-blend-mode: screen;
  }

@keyframes ring{ 0%,100%{ transform: scale(1); opacity:.75; } 50%{ transform: scale(1.04); opacity:1; } }
  @keyframes ring2{ 0%,100%{ transform: scale(1); opacity:.70; } 50%{ transform: scale(1.08); opacity:1; } }
  @keyframes core{ 0%,100%{ transform: scale(1) rotate(18deg); opacity:.75; } 50%{ transform: scale(1.10) rotate(18deg); opacity:1; } }

.right h3{
    margin:0;
    font-size: 12px;
    letter-spacing:.14em;
    text-transform: uppercase;
    color: rgba(234,242,255,.86);
  }
  .right p{
    margin:6px 0 0 0;
    color: rgba(169,182,217,.88);
    font-size: 13px;
    line-height: 1.45;
  }
  .mini{
    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: 14px;
  }
  .cta{
    display:grid;
    gap: 10px;
  }
  .cta a{
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    padding: 12px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.18);
    color: rgba(234,242,255,.92);
    text-decoration:none;
    letter-spacing:.10em;
    text-transform: uppercase;
    font-size: 12px;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
  }
  .cta a:hover{
    transform: translateY(-1px);
    border-color: rgba(106,224,255,.24);
    background: rgba(0,0,0,.28);
  }

@media (max-width: 920px){
    .shell{ grid-template-columns: 1fr; }
    .card{ min-height: auto; }
    .haloWrap{ height: 180px; }
  }

@media (prefers-reduced-motion: reduce){
    .atmo::before, .atmo::after, .haloRing, .haloRing2, .haloCore::before{ animation:none !important; }
  }
</style>
</head>
<body>

<div class="atmo" aria-hidden="true">
    <div class="grain"></div>
  </div>
  <canvas id="stars" aria-hidden="true"></canvas>

<section class="card left" aria-label="Infinity login">

<div class="title">Enter the light.</div>
        <p class="subtitle">
          Log in to your Infinity space — where memory becomes constellations, and the sanctuary never closes.
        </p>

<form method="post" action="/infinity/login_submit.php" autocomplete="on">
          <input type="hidden" name="csrf" value="<?= h($csrf) ?>" />
          <div class="field">
            <label for="email">Email</label>
            <input id="email" name="email" type="email" inputmode="email" autocomplete="email" required placeholder="you@example.com" />
          </div>

<div class="field">
            <label for="password">Password</label>
            <input id="password" name="password" type="password" autocomplete="current-password" required placeholder="••••••••••" />
          </div>

<div class="row">
            <label class="check">
              <input type="checkbox" name="remember" value="1" checked />
              Remember me
            </label>
            <a class="link" href="/infinity/forgot.php">Forgot password?</a>
          </div>

<div class="or">Or continue</div>

<div class="oauth" aria-label="OAuth buttons (UI only)">
            <a href="/infinity/oauth_apple.php" aria-label="Continue with Apple">
              <span class="lefty">
                <span class="badge" aria-hidden="true">
                  
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                    <path d="M16.6 13.2c0 2.7 2.4 3.6 2.4 3.6s-1.8 5.1-4.2 5.1c-1.1 0-1.9-.7-3.1-.7-1.2 0-2.2.7-3.2.7C6 21.9 4 17.1 4 13.9c0-5 3.1-6 4.8-6 1.1 0 2 .7 3.1.7 1.1 0 2-.7 3.4-.7 1.1 0 2.3.6 3.1 1.6-2.7 1.6-2 3.7-2 3.7Z" fill="rgba(234,242,255,.88)"/>
                    <path d="M14.8 3.2c-.8 1-1.9 1.8-3.1 1.7-.1-1.2.5-2.4 1.3-3.2.8-.9 2-1.5 3.1-1.5.1 1.1-.4 2.1-1.3 3Z" fill="rgba(234,242,255,.70)"/>
                  </svg>
                </span>
                <span class="txt"><b>Continue with Apple</b><small>Private sign-in</small></span>
              </span>
              <span aria-hidden="true">→</span>
            </a>

<a href="/infinity/oauth_google.php" aria-label="Continue with Google">
              <span class="lefty">
                <span class="badge" aria-hidden="true">
                  
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                    <path d="M21 12.2c0-.6-.1-1.1-.2-1.6H12v3h5.1c-.2 1.2-1 2.2-2 2.8v2h3.2c1.9-1.7 2.7-4.2 2.7-6.2Z" fill="rgba(106,224,255,.92)"/>
                    <path d="M12 22c2.7 0 4.9-.9 6.5-2.4l-3.2-2c-.9.6-2 .9-3.3.9-2.5 0-4.6-1.7-5.4-4h-3.3v2.1C5 19.8 8.2 22 12 22Z" fill="rgba(123,98,255,.90)"/>
                    <path d="M6.6 14.5c-.2-.6-.3-1.2-.3-1.9s.1-1.3.3-1.9V8.6H3.3C2.8 9.6 2.5 10.8 2.5 12s.3 2.4.8 3.4l3.3-.9Z" fill="rgba(255,79,214,.75)"/>
                    <path d="M12 5.5c1.5 0 2.8.5 3.8 1.5l2.8-2.8C16.9 2.5 14.7 1.5 12 1.5 8.2 1.5 5 3.7 3.3 6.9l3.3 2.6c.8-2.3 2.9-4 5.4-4Z" fill="rgba(234,242,255,.70)"/>
                  </svg>
                </span>
                <span class="txt"><b>Continue with Google</b><small>Fast & familiar</small></span>
              </span>
              <span aria-hidden="true">→</span>
            </a>
          </div>

<div style="margin-top:12px; color:rgba(169,182,217,.78); font-size:12px; line-height:1.45;">
            Note: wire <code>/infinity/login_submit.php</code> and OAuth routes later.
            <br/>• CSRF here is demo-only.
          </div>
        </form>

</section>

<aside class="card right" aria-label="Infinity welcome panel">

<div class="mini">
          <h3><?= h($brand) ?></h3>
          <p>
            Not erased. Held in light.
            A place to return — always open.
          </p>
        </div>

<div class="cta">
          <div class="mini">
            <h3>New here?</h3>
            <p>Create an account to begin your living archive and sanctuary space.</p>
            <div style="height:10px"></div>
            <a href="/infinity/signup.php"><span>Create account</span><span aria-hidden="true">→</span></a>
            <div style="margin-top:10px; color:rgba(169,182,217,.78); font-size:12px; line-height:1.45;">
              By continuing, you agree to your future Terms / Privacy pages.
            </div>
          </div>
        </div>

</aside>

</div>
  </div>

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

const rnd = (a,b)=>a+Math.random()*(b-a);
  const stars = [];
  let N = Math.floor(Math.min(220, Math.max(120, innerWidth/8)));

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

// subtle flowing energy field (global, not boxed)
    const flow = ctx.createRadialGradient(
      w*(0.52 + Math.sin(t)*0.04), h*(0.46 + Math.cos(t)*0.04), 40,
      w*0.5, h*0.5, Math.max(w,h)*0.55
    );
    flow.addColorStop(0, `rgba(106,224,255,0.035)`);
    flow.addColorStop(0.35, `rgba(123,98,255,0.028)`);
    flow.addColorStop(0.7, `rgba(255,79,214,0.018)`);
    flow.addColorStop(1, `rgba(0,0,0,0)`);
    ctx.fillStyle = flow;
    ctx.fillRect(0,0,w,h);

// stars
    for (const s of stars){
      s.ph += s.tw;
      s.x += s.vx + Math.sin(t)*0.01;
      s.y += s.vy + Math.cos(t)*0.008;

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.6 + 0.8*tw);

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();
    }

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

</body>
</html>

Quick jump

open a path

True command center for SIMON + WEB360

File viewer

Quick jump