SIMON Master Console Rebuild

File viewer

guarded to /htdocs

/downloads/files.php

<?php
declare(strict_types=1);
date_default_timezone_set('America/Chicago');

function h(string $v): string {
    return htmlspecialchars($v, ENT_QUOTES, 'UTF-8');
}

$sections = [
    1 => [
        'title' => 'Purpose',
        'icon' => '🎯',
        'summary' => 'Defines the role of the registry, scanner, and security checklist.',
        'content' => [
            'Acts as a central admin page for SIMON Intelligence + WEB360.',
            'Combines expected file registry, live scan, risk review, and publish-readiness checks.',
            'Helps compare the planned architecture against the actual deployed environment.',
        ],
    ],
    2 => [
        'title' => 'Core Function',
        'icon' => '⚙️',
        'summary' => 'Explains the five major jobs this system performs.',
        'content' => [
            'Builds a master file registry.',
            'Scans the live htdocs tree.',
            'Flags risks and writable paths.',
            'Runs security/deployment pass-fail checks.',
            'Suggests next high-impact additions.',
        ],
    ],
    3 => [
        'title' => 'UI Sections',
        'icon' => '🧩',
        'summary' => 'Breaks down the main visible sections of the page.',
        'content' => [
            'Hero summary with key stats.',
            'Scanner controls.',
            'Master registry table.',
            'Branding/menu audit.',
            'Security checklist.',
            'Risk summary.',
            'Live registry.',
            'Folder tree.',
            'Recommended next additions.',
        ],
    ],
    4 => [
        'title' => 'System Categories',
        'icon' => '🗂️',
        'summary' => 'Maps the major folders and system layers.',
        'content' => [
            '/htdocs/ = deployed shell',
            '/_inc/ = shared framework/includes',
            '/simon/ = command center and dashboards',
            '/simon/core = brain/logic files',
            '/simon/api/ = secure execution layer',
            '/simon/config/ = settings/rules/secrets',
            '/simon/data/ = persistence layer',
            '/simon/modules/ = modular engines',
            '/web360/ = builder workspace',
            '/assets/ = branding/media/UI resources',
        ],
    ],
    5 => [
        'title' => 'Technical Logic',
        'icon' => '🧠',
        'summary' => 'Summarizes the code behavior behind the scanner.',
        'content' => [
            'Reads GET parameters for root, search, depth, and hidden files.',
            'Locks scans within htdocs for safety.',
            'Recursively scans directories and builds stats.',
            'Detects risks from filename/path patterns.',
            'Compares live files to the expected registry.',
            'Renders a recursive visual tree.',
        ],
    ],
    6 => [
        'title' => 'Best Use Cases',
        'icon' => '🚀',
        'summary' => 'Shows where this file delivers the most value.',
        'content' => [
            'Master infrastructure map',
            'Deployment readiness review',
            'Security audit helper',
            'Missing-file planner',
            'Operator command dashboard',
            'Architecture validation tool',
        ],
    ],
    7 => [
        'title' => 'Main Strengths',
        'icon' => '💎',
        'summary' => 'Highlights what this page already does well.',
        'content' => [
            'Centralizes your expected architecture.',
            'Compares plan vs live environment.',
            'Surfaces missing required files quickly.',
            'Shows risk labels for sensitive/writable files.',
            'Supports professional site planning and launch prep.',
        ],
    ],
    8 => [
        'title' => 'Current Gaps',
        'icon' => '⚠️',
        'summary' => 'Identifies the limits of the current implementation.',
        'content' => [
            'Read-only; cannot edit or create files.',
            'No authentication layer inside this script.',
            'No database persistence.',
            'No export/report output.',
            'No remediation actions.',
            'No role-based access controls.',
        ],
    ],
    9 => [
        'title' => 'Best Next Upgrades',
        'icon' => '🔧',
        'summary' => 'Lists the strongest next-step enhancements.',
        'content' => [
            'Add file viewer',
            'Add file editor + save',
            'Add auth/session protection',
            'Add export to JSON/CSV/PDF',
            'Add risk filters',
            'Add auto-create missing files',
            'Add permission checker',
            'Add integrity/hash tracking',
            'Add DB-backed registry history',
            'Add SIMON recommendation engine',
        ],
    ],
    10 => [
        'title' => 'Bottom-Line Summary',
        'icon' => '🌌',
        'summary' => 'Wraps the whole system into one final meaning.',
        'content' => [
            'This is a living infrastructure registry and security scanner.',
            'It shows what exists, what is missing, what is risky, and what to build next.',
            'It serves as a command page for SIMON / WEB360 system health, structure, and readiness.',
        ],
    ],
];

$totalSections = count($sections);
$active = isset($_GET['section']) ? (int)$_GET['section'] : 1;
if (!isset($sections[$active])) {
    $active = 1;
}
$progress = (int)round(($active / max(1, $totalSections)) * 100);

$prev = $active > 1 ? $active - 1 : null;
$next = $active < $totalSections ? $active + 1 : null;
?>
<!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 Outline — Dynamic Cosmic Branching</title>
<meta name="theme-color" content="#081120">
<style>
:root{
    --bg:#050914;
    --bg2:#081426;
    --panel:rgba(10,18,36,.84);
    --panel2:rgba(16,26,48,.94);
    --line:rgba(115,190,255,.16);
    --text:#eef6ff;
    --muted:#96aacc;
    --cyan:#72e8ff;
    --blue:#72a8ff;
    --violet:#9d84ff;
    --pink:#ff7fd7;
    --green:#59efb0;
    --amber:#ffd36f;
    --red:#ff7f96;
    --shadow:0 24px 90px rgba(0,0,0,.45);
    --radius:22px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    min-height:100vh;
    font:14px/1.55 Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at 15% 10%, rgba(114,232,255,.13), transparent 20%),
        radial-gradient(circle at 82% 14%, rgba(157,132,255,.14), transparent 24%),
        radial-gradient(circle at 50% 85%, rgba(255,127,215,.08), transparent 24%),
        linear-gradient(180deg,var(--bg),var(--bg2));
    overflow-x:hidden;
}
body:before{
    content:"";
    position:fixed; inset:0; pointer-events:none;
    background-image:
      linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size:34px 34px;
    mask-image:linear-gradient(to bottom, rgba(255,255,255,.7), rgba(255,255,255,.08));
}
.wrap{
    max-width:1600px;
    margin:0 auto;
    padding:22px;
    position:relative;
    z-index:1;
}
.hero{
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg, rgba(9,16,30,.95), rgba(9,14,26,.92));
    border:1px solid var(--line);
    border-radius:30px;
    box-shadow:var(--shadow);
    padding:24px;
}
.hero:before{
    content:"";
    position:absolute; inset:-15%;
    background:
      radial-gradient(circle at 15% 26%, rgba(114,232,255,.18), transparent 18%),
      radial-gradient(circle at 70% 18%, rgba(157,132,255,.14), transparent 20%),
      radial-gradient(circle at 60% 70%, rgba(255,127,215,.10), transparent 16%);
    filter:blur(26px);
    pointer-events:none;
}
.hero-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:110px 1fr 290px;
    gap:20px;
    align-items:center;
}
.orb{
    width:92px;height:92px;border-radius:50%;
    margin:auto;position:relative;
    background:
      radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(114,232,255,.76) 18%, rgba(114,168,255,.30) 42%, rgba(157,132,255,.14) 58%, transparent 70%);
    box-shadow:0 0 32px rgba(114,232,255,.36), 0 0 72px rgba(114,168,255,.16), inset 0 0 24px rgba(255,255,255,.12);
    animation:pulse 5s ease-in-out infinite;
}
.orb:before,.orb:after{
    content:"";
    position:absolute; inset:-12px;
    border-radius:50%;
    border:1px solid rgba(114,232,255,.18);
    animation:spin 12s linear infinite;
}
.orb:after{
    inset:-22px;
    border-color:rgba(157,132,255,.16);
    animation-direction:reverse;
    animation-duration:18s;
}
@keyframes pulse{50%{transform:scale(1.05)}}
@keyframes spin{to{transform:rotate(360deg)}}

.kicker{
    display:inline-flex;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid var(--line);
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:12px;
}
h1{
    margin:12px 0 8px;
    font-size:clamp(30px,4vw,54px);
    line-height:1.02;
}
.sub{color:#d8e7fb;max-width:920px}
.stats{
    display:grid;
    gap:12px;
}
.stat{
    padding:14px;
    border-radius:18px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.07);
}
.stat .k{
    font-size:11px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.08em;
}
.stat .v{
    font-size:25px;
    font-weight:800;
    margin-top:6px;
}
.progress-shell{
    margin-top:16px;
}
.progress{
    height:12px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
}
.progress span{
    display:block;
    height:100%;
    width:<?= $progress ?>%;
    background:linear-gradient(90deg,var(--cyan),var(--blue),var(--violet),var(--pink));
}
.layout{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:20px;
    margin-top:20px;
}
.panel{
    background:linear-gradient(180deg,var(--panel),var(--panel2));
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}
.sidebar{
    padding:18px;
    position:sticky;
    top:18px;
    align-self:start;
}
.sidebar h2,.content h2{
    margin:0 0 14px;
    font-size:20px;
}
.nav-list{
    display:grid;
    gap:10px;
}
.nav-link{
    display:block;
    padding:14px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.06);
    background:rgba(255,255,255,.03);
    color:var(--text);
    text-decoration:none;
    transition:.2s ease;
}
.nav-link:hover{
    transform:translateY(-1px);
    border-color:rgba(114,232,255,.30);
    text-decoration:none;
}
.nav-link.active{
    background:linear-gradient(135deg, rgba(114,232,255,.18), rgba(157,132,255,.16));
    border-color:rgba(114,232,255,.34);
}
.nav-top{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
}
.nav-num{
    font-size:12px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.08em;
}
.nav-title{
    font-size:15px;
    font-weight:800;
    margin-top:5px;
}
.nav-summary{
    margin-top:6px;
    color:var(--muted);
    font-size:13px;
}
.content{
    padding:22px;
}
.content-header{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
    flex-wrap:wrap;
}
.badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.04);
    color:var(--text);
    font-size:12px;
    font-weight:700;
}
.icon-title{
    display:flex;
    align-items:center;
    gap:12px;
}
.icon-bubble{
    width:54px;height:54px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    background:linear-gradient(135deg, rgba(114,232,255,.18), rgba(157,132,255,.16));
    border:1px solid rgba(114,232,255,.28);
}
.section-sub{
    color:var(--muted);
    font-size:15px;
    margin-top:8px;
    max-width:900px;
}
.cards{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    margin-top:20px;
}
.card{
    padding:16px;
    border-radius:18px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.07);
}
.card h3{
    margin:0 0 10px;
    font-size:16px;
}
.card ul{
    margin:0;
    padding-left:18px;
}
.card li+li{margin-top:8px}
.branch-row{
    margin-top:22px;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 16px;
    border-radius:14px;
    border:1px solid var(--line);
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    color:var(--text);
    font-weight:800;
    text-decoration:none;
}
.btn:hover{text-decoration:none}
.btn.primary{
    background:linear-gradient(135deg, rgba(114,232,255,.20), rgba(114,168,255,.16));
    border-color:rgba(114,232,255,.30);
}
.footer{
    margin-top:18px;
    text-align:center;
    color:var(--muted);
    font-size:12px;
}
@media (max-width: 1180px){
    .hero-grid,.layout,.cards{grid-template-columns:1fr}
    .sidebar{position:relative;top:0}
}
</style>
</head>
<body>
<div class="wrap">

<div>
                <div class="kicker">SIMON Intelligence • Dynamic Outline Branching</div>
                <h1>1–10 Cosmic Interactive Summary</h1>
                <div class="sub">
                    A branded PHP command page that turns the summary outline into a branching cosmic interface.
                    Each section acts like a node in the SIMON system map.
                </div>

<div class="progress-shell">
                    <div class="progress"><span></span></div>
                    <div class="sub" style="margin-top:8px;">Section <?= $active ?> of <?= $totalSections ?> • <?= $progress ?>% through branch map</div>
                </div>
            </div>

<div class="stats">
                <div class="stat">
                    <div class="k">Active Branch</div>
                    <div class="v"><?= h((string)$active) ?></div>
                </div>
                <div class="stat">
                    <div class="k">Total Branches</div>
                    <div class="v"><?= h((string)$totalSections) ?></div>
                </div>
                <div class="stat">
                    <div class="k">Mode</div>
                    <div class="v" style="font-size:18px;">Cosmic Interactive</div>
                </div>
            </div>
        </div>
    </section>

<section class="layout">
        <aside class="panel sidebar">
            <h2>Branch Navigator</h2>
            <div class="nav-list">
                <?php foreach ($sections as $num => $section): ?>
                    <a class="nav-link <?= $num === $active ? 'active' : '' ?>" href="?section=<?= $num ?>">
                        <div class="nav-top">
                            <div class="nav-num">Section <?= $num ?></div>
                            <div><?= h($section['icon']) ?></div>
                        </div>
                        <div class="nav-title"><?= h($section['title']) ?></div>
                        <div class="nav-summary"><?= h($section['summary']) ?></div>
                    </a>
                <?php endforeach; ?>
            </div>
        </aside>

<main class="panel content">
            <div class="content-header">
                <div>
                    <div class="icon-title">
                        <div class="icon-bubble"><?= h($sections[$active]['icon']) ?></div>
                        <div>
                            <h2>Section <?= $active ?> — <?= h($sections[$active]['title']) ?></h2>
                            <div class="section-sub"><?= h($sections[$active]['summary']) ?></div>
                        </div>
                    </div>
                </div>
                <div class="badge">SIMON Branch Node <?= $active ?></div>
            </div>

<div class="cards">
                <div class="card">
                    <h3>Core Summary</h3>
                    <ul>
                        <?php foreach ($sections[$active]['content'] as $item): ?>
                            <li><?= h($item) ?></li>
                        <?php endforeach; ?>
                    </ul>
                </div>

<div class="card">
                    <h3>Branch Value</h3>
                    <ul>
                        <li>Transforms the outline into a structured operator view.</li>
                        <li>Makes each concept navigable as its own SIMON node.</li>
                        <li>Supports future expansion into dashboards, editors, and scanners.</li>
                        <li>Fits the cosmic branded command-center style.</li>
                    </ul>
                </div>
            </div>

<div class="branch-row">
                <?php if ($prev !== null): ?>
                    <a class="btn" href="?section=<?= $prev ?>">← Previous Branch</a>
                <?php endif; ?>

<?php if ($next !== null): ?>
                    <a class="btn primary" href="?section=<?= $next ?>">Next Branch →</a>
                <?php endif; ?>

<a class="btn" href="?section=1">Restart Map</a>
                <a class="btn" href="?section=10">Jump to Final Summary</a>
            </div>
        </main>
    </section>

<div class="footer">
        SIMON Intelligence • Dynamic Cosmic PHP Outline • <?= h(date('F j, Y g:i A')) ?>
    </div>
</div>
</body>
</html>

Quick jump

open a path

True command center for SIMON + WEB360

File viewer

Quick jump