SIMON Master Console Rebuild

File viewer

guarded to /htdocs

/downloads/projects.php

<?php
session_start();
$pagePassword = 'Simonkab';
if (isset($_POST['simon_password'])) {
    if (hash_equals($pagePassword, (string)$_POST['simon_password'])) {
        $_SESSION['simon_auth'] = true;
        header('Location: ' . strtok($_SERVER['REQUEST_URI'], '?'));
        exit;
    }
    $authError = 'Access denied. Use the SIMON project password.';
}
if (isset($_GET['logout'])) {
    $_SESSION = [];
    session_destroy();
    header('Location: ' . strtok($_SERVER['REQUEST_URI'], '?'));
    exit;
}
$isAuthorized = !empty($_SESSION['simon_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>SIMON Projects — SIMON Intelligence</title>
<meta name="description" content="Project registry, phase planning, and dependency review surface">
<meta name="theme-color" content="#081127">
<meta name="robots" content="index,follow">
<meta name="keywords" content="SIMON Intelligence, WEB360 Studio, AI dashboard, command center, analytics, roadmap, automation">
<meta property="og:title" content="SIMON Projects — SIMON Intelligence">
<meta property="og:description" content="Project registry, phase planning, and dependency review surface">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<style>
:root{
  --bg:#050816;
  --bg2:#090f24;
  --panel:rgba(12,18,42,.72);
  --panel-2:rgba(18,28,61,.58);
  --line:rgba(113,182,255,.16);
  --text:#e9f3ff;
  --muted:#9eb2d1;
  --cyan:#66e6ff;
  --blue:#77a8ff;
  --violet:#a56dff;
  --pink:#ff76d8;
  --green:#67ffbf;
  --warn:#ffd86a;
  --danger:#ff7d9a;
  --radius:22px;
  --shadow:0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  --glow:0 0 26px rgba(102,230,255,.22), 0 0 100px rgba(165,109,255,.12);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 15% 20%, rgba(102,230,255,.16), transparent 22%),
    radial-gradient(circle at 85% 10%, rgba(165,109,255,.18), transparent 28%),
    radial-gradient(circle at 50% 90%, rgba(255,118,216,.12), transparent 30%),
    linear-gradient(180deg, #060b19 0%, #081127 60%, #040713 100%);
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(119,168,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(119,168,255,.06) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.65), transparent 80%);
  pointer-events:none;
}
a{color:inherit; text-decoration:none}
.wrap{max-width:1440px;margin:0 auto;padding:28px 22px 70px;position:relative;z-index:2}
.topbar{
  position:sticky; top:14px; z-index:50;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(14,22,48,.86), rgba(8,13,31,.76));
  backdrop-filter: blur(18px);
  border-radius:28px;
  box-shadow:var(--shadow), var(--glow);
  overflow:hidden;
}
.header-main{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px 18px;
}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand h1{font-size:1.08rem;line-height:1.1;margin:0;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.brand small{display:block;color:var(--muted);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase}
.orb{
  width:58px;height:58px; border-radius:50%;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.95), rgba(255,255,255,.1) 18%, rgba(102,230,255,.2) 20%, rgba(102,230,255,.04) 42%, transparent 44%),
    radial-gradient(circle at 55% 55%, rgba(102,230,255,.25), rgba(102,230,255,.04) 40%, rgba(165,109,255,.18) 58%, transparent 68%),
    conic-gradient(from 90deg, rgba(102,230,255,.06), rgba(165,109,255,.2), rgba(255,118,216,.18), rgba(102,230,255,.08));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 0 22px rgba(102,230,255,.35), inset 0 0 40px rgba(255,255,255,.08);
  position:relative;
}
.orb::before,.orb::after{
  content:"";position:absolute;inset:-8px;border-radius:50%;
  border:1px solid rgba(102,230,255,.14);animation:spin 18s linear infinite;
}
.orb::after{inset:-14px;border-color:rgba(165,109,255,.16);animation-direction:reverse;animation-duration:24s}
.header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.pill{
  padding:10px 14px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.04); color:var(--muted); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
}
button,.btn{
  appearance:none;border:none;cursor:pointer;
  color:var(--text);
  background:linear-gradient(135deg, rgba(102,230,255,.18), rgba(165,109,255,.16));
  border:1px solid rgba(113,182,255,.2);
  border-radius:16px;
  padding:11px 14px;
  font-weight:700; letter-spacing:.03em;
  box-shadow:0 8px 24px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.06);
}
button:hover,.btn:hover{transform:translateY(-1px); box-shadow:0 16px 28px rgba(0,0,0,.25), 0 0 18px rgba(102,230,255,.16)}
.drawer{
  max-height:0; overflow:hidden; transition:max-height .35s ease;
  border-top:1px solid rgba(113,182,255,.08);
  background:linear-gradient(180deg, rgba(9,15,36,.92), rgba(6,10,23,.88));
}
.drawer.open{max-height:420px}
.drawer-grid{
  display:grid; grid-template-columns:1.6fr 1fr; gap:18px; padding:18px;
}
.nav-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(125px,1fr)); gap:12px}
.nav-card{
  border:1px solid var(--line); border-radius:18px; padding:12px 14px;
  background:rgba(255,255,255,.035);
  transition:.2s ease;
}
.nav-card:hover{transform:translateY(-2px); box-shadow:var(--glow)}
.nav-card strong{display:block;font-size:.9rem}
.nav-card span{display:block;font-size:.75rem;color:var(--muted);margin-top:5px}
.hero{
  display:grid; grid-template-columns:1.25fr .85fr; gap:18px; margin-top:18px;
}
.panel{
  position:relative; overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(13,20,47,.76), rgba(8,13,30,.72));
  border-radius:28px; box-shadow:var(--shadow);
}
.panel::before{
  content:""; position:absolute; inset:auto -10% 55% auto; width:180px; height:180px;
  background:radial-gradient(circle, rgba(102,230,255,.18), transparent 60%); filter:blur(10px);
}
.hero-copy{padding:26px}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(102,230,255,.22); color:#d8f7ff;
  background:rgba(102,230,255,.08); border-radius:999px; padding:8px 12px;
  font-size:.75rem; text-transform:uppercase; letter-spacing:.18em; margin-bottom:14px;
}
.hero h2{font-size:clamp(2rem,4vw,3.5rem); line-height:1.02; margin:0 0 12px; letter-spacing:-.03em}
.hero p{color:var(--muted); font-size:1rem; line-height:1.65; margin:0 0 18px}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px}
.kpi{
  border:1px solid var(--line); border-radius:20px; padding:14px;
  background:rgba(255,255,255,.035);
}
.kpi b{display:block; font-size:1.25rem}
.kpi span{display:block; color:var(--muted); font-size:.82rem; margin-top:5px}
.orb-panel{display:flex; align-items:center; justify-content:center; min-height:360px; padding:26px}
.orb-stage{
  position:relative; width:min(420px,100%); aspect-ratio:1/1; border-radius:32px;
  border:1px solid var(--line); background:radial-gradient(circle at 50% 42%, rgba(102,230,255,.13), rgba(165,109,255,.08) 40%, transparent 66%);
  overflow:hidden;
}
.orb-stage .pulse{
  position:absolute; inset:50%; transform:translate(-50%,-50%);
  width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.85) 0 7%, rgba(102,230,255,.26) 8% 22%, rgba(165,109,255,.18) 34%, transparent 60%);
  box-shadow:0 0 35px rgba(102,230,255,.3),0 0 120px rgba(102,230,255,.22);
  animation:pulse 4.6s ease-in-out infinite;
}
.ring{position:absolute;inset:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(102,230,255,.22)}
.r1{width:210px;height:210px;animation:spin 18s linear infinite}
.r2{width:270px;height:270px;border-color:rgba(165,109,255,.22);animation:spin 24s linear infinite reverse}
.r3{width:340px;height:340px;border-style:dashed;border-color:rgba(255,118,216,.14);animation:spin 36s linear infinite}
.grid{
  display:grid; grid-template-columns:repeat(12,1fr); gap:18px; margin-top:18px;
}
.card{
  grid-column:span 4; min-height:100%;
  border:1px solid var(--line); border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.025));
  padding:18px;
  box-shadow:var(--shadow);
}
.card h3{margin:0 0 10px; font-size:1rem; letter-spacing:.02em}
.card p,.card li{color:var(--muted); line-height:1.55}
.badge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border-radius:999px;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#dbf8ff;
  border:1px solid rgba(102,230,255,.18); background:rgba(102,230,255,.06); margin-bottom:12px;
}
.metric-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.metric-row:last-child{border-bottom:none}
.metric-row span{color:var(--muted)}
.meter{height:9px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;border:1px solid rgba(255,255,255,.04)}
.meter > i{display:block;height:100%;width:var(--value,55%);background:linear-gradient(90deg, var(--cyan), var(--violet));box-shadow:0 0 18px rgba(102,230,255,.25)}
.table-wrap{overflow:auto;border-radius:20px;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;min-width:660px}
th,td{padding:13px 14px;text-align:left;border-bottom:1px solid rgba(255,255,255,.06)}
th{font-size:.76rem;color:#cde5ff;text-transform:uppercase;letter-spacing:.14em;background:rgba(255,255,255,.03)}
td{color:var(--muted)}
.footer-note{margin-top:22px;color:var(--muted);font-size:.82rem;text-align:center}
form.lock{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:18px;
}
form.lock input{
  background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--text);
  padding:12px 14px; border-radius:14px; min-width:240px; outline:none;
}
.notice{
  margin-top:14px;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,125,154,.24);
  background:rgba(255,125,154,.08); color:#ffd8e2;
}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 14px rgba(103,255,191,.55)}
.quick-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.sparkline{display:flex;align-items:flex-end;gap:7px;height:84px;margin-top:12px}
.sparkline i{display:block;width:12%;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg, rgba(102,230,255,.95), rgba(165,109,255,.7));min-height:24px;box-shadow:0 0 16px rgba(102,230,255,.18)}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 10px}
.section-title h3{margin:0;font-size:1.05rem}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes pulse{0%,100%{transform:translate(-50%,-50%) scale(.94)}50%{transform:translate(-50%,-50%) scale(1.06)}}
@media (max-width:1080px){
  .hero,.drawer-grid{grid-template-columns:1fr}
  .card{grid-column:span 6}
}
@media (max-width:760px){
  .wrap{padding:14px 12px 56px}
  .header-main{padding:12px}
  .card{grid-column:span 12}
  .kpis{grid-template-columns:1fr}
  .brand h1{font-size:.95rem}
  .header-actions{width:100%;justify-content:flex-start}
  .topbar{top:8px;border-radius:22px}
}
</style>
</head>
<body>
<?php if (!$isAuthorized): ?>
<div class="wrap">
  <section class="panel hero-copy" style="max-width:840px;margin:80px auto 0;">
    <span class="eyebrow"><span class="status-dot"></span> Secure SIMON entry</span>
    <h2 style="margin-top:0;">SIMON access lock</h2>
    <p>Enter the project password to unlock this page. The shared password is configured as <strong>Simonkab</strong> in this starter build and should be moved into a secure environment variable before deployment.</p>
    <form method="post" class="lock">
      <input type="password" name="simon_password" placeholder="Enter SIMON password" autocomplete="current-password" />
      <button type="submit">Unlock Module</button>
    </form>
    <?php if (!empty($authError)): ?><div class="notice"><?= htmlspecialchars($authError, ENT_QUOTES, 'UTF-8') ?></div><?php endif; ?>
    <div class="footer-note">Branding, lock gate, hidden second header, and glow effects are already wired into this starter package.</div>
  </section>
</div>
</body></html>
<?php exit; endif; ?>
<div class="wrap">
  <header class="topbar">
    <div class="header-main">
      <div class="brand">
        <div class="orb" aria-hidden="true"></div>
        <div>
          <small>SIMON Intelligence</small>
          <h1>SIMON Projects</h1>
        </div>
      </div>
      <div class="header-actions">
        <span class="pill">Glow UI</span>
        <span class="pill" id="liveNow">Syncing…</span>
        <span class="pill">Phase 1 Build</span>
        <button id="drawerToggle" type="button" aria-expanded="false">Open Hidden 2nd Header</button>
      </div>
    </div>
    <div class="drawer" id="headerDrawer">
      <div class="drawer-grid">
        <div>
          <div class="section-title"><h3>Module map</h3><span class="pill">Quick Jump</span></div>
          <div class="nav-grid"><a class="nav-card" href="/simon/console.php"><strong>Console</strong><span>SIMON module surface</span></a><a class="nav-card" href="/simon/dashboard.php"><strong>Dashboard</strong><span>SIMON module surface</span></a><a class="nav-card" href="/simon/projects.php"><strong>Projects</strong><span>SIMON module surface</span></a><a class="nav-card" href="/simon/accounting.php"><strong>Accounting</strong><span>SIMON module surface</span></a><a class="nav-card" href="/simon/assets.php"><strong>Assets</strong><span>SIMON module surface</span></a><a class="nav-card" href="/simon/investor.php"><strong>Investor</strong><span>SIMON module surface</span></a><a class="nav-card" href="/simon/roadmap.php"><strong>Roadmap</strong><span>SIMON module surface</span></a><a class="nav-card" href="/simon/links.php"><strong>Links</strong><span>SIMON module surface</span></a><a class="nav-card" href="/simon/analytics.php"><strong>Analytics</strong><span>SIMON module surface</span></a><a class="nav-card" href="/simon/security_console.php"><strong>Security</strong><span>SIMON module surface</span></a><a class="nav-card" href="/simon/social_dashboard.php"><strong>Social</strong><span>SIMON module surface</span></a><a class="nav-card" href="/simon/forecast.php"><strong>Forecast</strong><span>SIMON module surface</span></a><a class="nav-card" href="/simon/ai_review.php"><strong>AI Review</strong><span>SIMON module surface</span></a></div>
        </div>
        <div class="panel" style="padding:18px;min-height:100%;">
          <span class="badge">SIMON Tags</span>
          <div class="metric-row"><strong>Brand</strong><span>SIMON + WEB360</span></div>
          <div class="metric-row"><strong>Security</strong><span>Password gate active</span></div>
          <div class="metric-row"><strong>Theme</strong><span>Orb glow / neural glass</span></div>
          <div class="metric-row"><strong>Mode</strong><span>Phase 1 starter shell</span></div>
          <div class="quick-actions">
            <a class="btn" href="/htdocs/index.php">Public Landing</a>
            <a class="btn" href="?logout=1">Logout</a>
          </div>
        </div>
      </div>
    </div>
  </header>

<section class="hero">
    <div class="panel hero-copy">
      <span class="eyebrow"><span class="status-dot"></span> Project registry, phase planning, and dependency review surface</span>
      <h2>Track projects, priorities, blockers, and next actions</h2>
      <p>This module is the planning spine for SIMON. Use it to track active builds, phase ownership, completion status, dependencies, and action sequencing across the whole ecosystem.</p>
      <div class="quick-actions">
        <a class="btn" href="/simon/console.php">Open Console</a>
        <a class="btn" href="/simon/dashboard.php">System View</a>
        <a class="btn" href="/simon/roadmap.php">Roadmap</a>
      </div>
      <div class="kpis">
        <div class="kpi"><b>15</b><span>Phase 1 modules ready</span></div>
        <div class="kpi"><b>2-layer</b><span>Header with hidden second rail</span></div>
        <div class="kpi"><b>1 password</b><span>Starter lock: Simonkab</span></div>
      </div>
    </div>
    <div class="panel orb-panel">
      <div class="orb-stage" aria-hidden="true">
        <div class="pulse"></div>
        <div class="ring r1"></div>
        <div class="ring r2"></div>
        <div class="ring r3"></div>
      </div>
    </div>
  </section>

<section class="grid">
    <article class="card"><span class="badge">Signal</span><h3>Core status</h3><div class="metric-row"><strong>Visual layer</strong><span>Glowing / active</span></div><div class="metric-row"><strong>Auth gate</strong><span>Starter password</span></div><div class="metric-row"><strong>Header rail</strong><span>Expandable 2nd header</span></div></article><article class="card"><span class="badge">Alignment</span><h3>System readiness</h3><div class="metric-row"><div><strong>UI polish</strong><span style="display:block;">Target alignment</span></div><div style="min-width:140px;width:46%;"><div class="meter"><i data-fill="90"></i></div></div></div><div class="metric-row"><div><strong>Module structure</strong><span style="display:block;">Target alignment</span></div><div style="min-width:140px;width:46%;"><div class="meter"><i data-fill="86"></i></div></div></div><div class="metric-row"><div><strong>Expansion readiness</strong><span style="display:block;">Target alignment</span></div><div style="min-width:140px;width:46%;"><div class="meter"><i data-fill="79"></i></div></div></div></article><article class="card"><span class="badge">Trend</span><h3>Momentum</h3><p>Use this section for animated or real data later. It already reads like a modern analytics tile.</p><div class="sparkline"><i style="height:28px"></i><i style="height:52px"></i><i style="height:44px"></i><i style="height:66px"></i><i style="height:72px"></i><i style="height:54px"></i><i style="height:80px"></i></div></article><article class="card"><span class="badge">Expansion</span><h3>Next upgrade</h3><p>Add shared includes, database-backed persistence, environment-based secrets, role auth, and real data pipes once the shell is deployed.</p></article>
  </section>

<section class="panel" style="margin-top:18px;padding:18px;">
      <div class="section-title"><h3>Module starter matrix</h3><span class="pill">Live-ready shell</span></div>
      <div class="table-wrap">
        <table><thead><tr><th>Layer</th><th>Current state</th><th>Recommended next step</th></tr></thead><tbody><tr><td>UI shell</td><td>Ready</td><td>Connect live data</td></tr><tr><td>Security</td><td>Starter password active</td><td>Move secret to config/env</td></tr><tr><td>Automation</td><td>Planned</td><td>Add macro runner</td></tr><tr><td>Forecasting</td><td>Planned</td><td>Wire to projects/tasks/assets</td></tr><tr><td>Investor narrative</td><td>Ready</td><td>Add valuation metrics</td></tr></tbody></table>
      </div>
    </section>

<div class="footer-note">Built as a modern SIMON starter with branding, tags, animated glow, protected module access, and expandable hidden second header.</div>
</div>

</body>
</html>

Quick jump

open a path

True command center for SIMON + WEB360

File viewer

Quick jump