SIMON Master Console Rebuild
True command center for SIMON + WEB360
This rebuild gives you a cleaner production spine: interactive tree, live viewer, guarded editor, dynamic graphics, architecture map, and note storage. It is designed to sit beside your existing
console.php
and become the stronger replacement path.
Dashboard
Tree
Viewer
System Map
File Registry
Notes
Files
15,279
Folders
408
Scanned Size
3.84 GB
PHP Files
891
Editable Text Files
12,540
File viewer
guarded to /htdocs
/tools/index.php
$allGroups = [ 'Reports' => $reports, 'Widgets' => $widgets, 'Panels' => $panels, 'Files' => $projectFiles, 'Routes' => $routes, 'Publishing' => $publishing, 'APIs' => $apis, ]; ?> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title><?= h($system['project_name']) ?></title> <meta name="robots" content="noindex,nofollow"> <meta name="theme-color" content="#050b16"> <style> :root{ --bg:#040913;--bg2:#06111f;--panel:#071423;--panel2:#0a1627;--panel3:#0d1b31; --line:rgba(85,145,255,.14);--line-strong:rgba(77,232,255,.30); --text:#ebf7ff;--muted:#8da5c3;--cyan:#35e0ff;--cyan2:#74f4ff;--blue:#56a9ff; --indigo:#6e7cff;--green:#38e59a;--yellow:#ffd35d;--orange:#ff9a46;--red:#ff5d7c; --violet:#aa80ff;--shadow:0 24px 70px rgba(0,0,0,.42);--radius:22px; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ min-height:100vh;color:var(--text); font:14px/1.45 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background: radial-gradient(circle at 20% 0%, rgba(53,224,255,.08), transparent 26%), radial-gradient(circle at 100% 0%, rgba(110,124,255,.08), transparent 22%), radial-gradient(circle at 50% 50%, rgba(53,224,255,.03), transparent 40%), linear-gradient(180deg,var(--bg),var(--bg2)); overflow-x:hidden; } body::before{ content:"";position:fixed;inset:0;pointer-events:none;opacity:.18; background: linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px); background-size:32px 32px; } a{color:inherit;text-decoration:none} code{color:#bfefff} .shell{position:relative;z-index:1;display:grid;grid-template-columns:290px 1fr 380px;gap:18px;min-height:100vh;padding:18px} .panel{background:linear-gradient(180deg,rgba(8,18,31,.96),rgba(6,14,25,.98));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)} .sidebar,.rightbar{padding:18px;display:flex;flex-direction:column;gap:16px} .main{display:flex;flex-direction:column;gap:16px} .brand{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.06)} .brand-icon{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:radial-gradient(circle at 35% 35%, rgba(53,224,255,.18), transparent 45%), linear-gradient(180deg,#091729,#07111f);border:1px solid rgba(53,224,255,.2);box-shadow:0 0 24px rgba(53,224,255,.15);font-size:34px;color:var(--cyan)} .brand-title{font-size:22px;font-weight:900;letter-spacing:.04em}.brand-sub{color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-top:2px} .card{background:linear-gradient(180deg,rgba(10,19,34,.92),rgba(8,15,26,.98));border:1px solid rgba(255,255,255,.05);border-radius:18px;padding:14px} .card-title{margin:0 0 12px;color:#c6d8ef;font-size:11px;letter-spacing:.14em;text-transform:uppercase} .search,.select{width:100%;min-height:46px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:#09131f;color:var(--text);padding:0 14px;outline:none} .nav-list,.group-list,.action-list,.stack{display:grid;gap:10px} .nav-link,.line-link,.action-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:14px;background:#0a1524;border:1px solid rgba(255,255,255,.05);transition:.18s ease} .nav-link:hover,.line-link:hover,.action-btn:hover{transform:translateY(-1px);border-color:rgba(53,224,255,.24);box-shadow:0 0 0 1px rgba(53,224,255,.08), 0 12px 24px rgba(0,0,0,.18)} .nav-link.active,.line-link.active{border-color:rgba(53,224,255,.28);box-shadow:0 0 0 1px rgba(53,224,255,.10), 0 0 30px rgba(53,224,255,.08)} .badge-count{color:var(--cyan);font-weight:800} .topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px} .chips{display:flex;flex-wrap:wrap;gap:10px} .chip{padding:8px 12px;border-radius:999px;background:#091320;border:1px solid rgba(255,255,255,.06);color:var(--muted);font-size:12px} .chip.live{color:#ff7b7b} .chip.active{color:var(--cyan);border-color:rgba(53,224,255,.24)} .glow-btn{padding:10px 14px;border-radius:14px;background:linear-gradient(135deg, rgba(53,224,255,.18), rgba(86,169,255,.18));border:1px solid rgba(53,224,255,.25);color:#fff;font-weight:800} .stat-row{display:grid;grid-template-columns:repeat(6,minmax(140px,1fr));gap:14px} .stat{padding:16px;border-radius:18px;background:linear-gradient(180deg,rgba(10,19,33,.94),rgba(8,14,24,.98));border:1px solid rgba(255,255,255,.05)} .stat .label{font-size:11px;color:#a6bbd8;text-transform:uppercase;letter-spacing:.12em} .stat .value{margin-top:8px;font-size:26px;font-weight:900} .stat.good .value{color:var(--green)} .stat.warn .value{color:var(--yellow)} .stat.bad .value{color:var(--red)} .stat.neutral .value{color:var(--cyan)} .tabbar{display:flex;align-items:center;justify-content:space-between;gap:12px} .pills{display:flex;gap:10px;flex-wrap:wrap} .pill{padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:#091320;color:#d7ebff;font-weight:700;font-size:13px} .pill.active{color:var(--cyan);border-color:rgba(53,224,255,.28);box-shadow:0 0 0 1px rgba(53,224,255,.08)} .grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:16px} .grid-3{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:16px} .section{padding:16px} .section h3{margin:0 0 14px;font-size:14px;text-transform:uppercase;letter-spacing:.12em;color:#c4d5ee} .item-list{display:grid;gap:12px} .item{padding:14px;border-radius:16px;background:radial-gradient(circle at top right, rgba(53,224,255,.08), transparent 25%), linear-gradient(180deg,rgba(10,18,31,.96),rgba(7,13,22,.99));border:1px solid rgba(255,255,255,.06)} .item-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start} .item-title{font-size:18px;font-weight:900} .tiny{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.10em} .desc{margin-top:10px;color:var(--muted)} .status-pill{padding:7px 10px;border-radius:999px;font-size:11px;font-weight:900;text-transform:uppercase;border:1px solid rgba(255,255,255,.08);align-self:flex-start} .status-pill.good{color:var(--green)} .status-pill.warn{color:var(--yellow)} .status-pill.bad{color:var(--red)} .status-pill.neutral{color:var(--violet)} .meta{display:grid;gap:8px;margin-top:12px} .meta-row{display:flex;justify-content:space-between;gap:10px;font-size:14px} .meta-row span:first-child{color:#9db4d0} .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} .tag{padding:6px 10px;border-radius:12px;background:#091421;border:1px solid rgba(255,255,255,.06);font-size:12px} .chart-wrap{display:grid;gap:10px} .bar-chart{display:flex;align-items:flex-end;gap:8px;height:200px;padding:12px;border-radius:14px;background:#091421;border:1px solid rgba(255,255,255,.05)} .bar-chart span{flex:1;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--blue),var(--cyan2))} .file-list{display:grid;gap:10px} .file-item{display:grid;grid-template-columns:22px 1fr auto;gap:10px;padding:10px 12px;border-radius:12px;background:#091421;border:1px solid rgba(255,255,255,.05)} .footer-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .footer-actions .action-btn{min-height:46px} .kv{display:grid;gap:10px} .kv-row{display:flex;justify-content:space-between;gap:12px;font-size:14px} .kv-row span:first-child{color:#9db4d0} [data-filter-item]{transition:opacity .18s ease, transform .18s ease} .is-hidden{display:none !important} @media (max-width:1500px){.shell{grid-template-columns:270px 1fr}.rightbar{grid-column:1 / -1}.grid-2,.grid-3{grid-template-columns:1fr}.stat-row{grid-template-columns:repeat(3,minmax(140px,1fr))}} @media (max-width:1080px){.shell{grid-template-columns:1fr}.stat-row{grid-template-columns:repeat(2,minmax(150px,1fr))}} @media (max-width:640px){.shell{padding:12px}.stat-row{grid-template-columns:1fr}.footer-actions{grid-template-columns:1fr}} </style> </head> <body> <div class="shell"> <aside class="panel sidebar"> <div class="brand"> <div class="brand-icon">🧠</div> <div> <div class="brand-title"><?= h($system['brand']) ?></div> <div class="brand-sub"><?= h($system['subtitle']) ?></div> </div> </div> <div class="card"> <div class="card-title">Search</div> <input class="search" id="inventorySearch" type="text" placeholder="Search reports, widgets, files, APIs..."> </div> <div class="card"> <div class="card-title">Navigation</div> <div class="nav-list"> <?php foreach ($nav as $item): ?> <a class="nav-link<?= !empty($item['active']) ? ' active' : '' ?>" href="#<?= h($item['target']) ?>"> <span><?= h($item['icon']) ?> <?= h($item['label']) ?></span> </a> <?php endforeach; ?> </div> </div> <div class="card"> <div class="card-title">Inventory Groups</div> <div class="group-list"> <?php foreach ($allGroups as $label => $group): ?> <a class="line-link" href="#<?= h(slugify($label)) ?>"><span><?= h($label) ?></span><span class="badge-count"><?= count($group) ?></span></a> <?php endforeach; ?> </div> </div> <div class="card"> <div class="card-title">Quick Actions</div> <div class="action-list"> <a class="action-btn" href="/_guardian/dashboard.php">Guardian Dashboard</a> <a class="action-btn" href="/connlink/links.php">LINK Center</a> <a class="action-btn" href="/simon/traffic.php">Traffic Dashboard</a> <a class="action-btn" href="/tools/index.php">Tools Index</a> <a class="action-btn" href="/web360/">WEB360</a> </div> </div> </aside> <main class="main" id="overview"> <div class="panel topbar"> <div class="chips"> <span class="chip active"><?= h($system['environment']) ?></span> <span class="chip"><?= h($system['version']) ?></span> <span class="chip"><?= h($system['timezone']) ?></span> <span class="chip">Operator: <?= h($system['operator']) ?></span> <span class="chip live">Template Mode · Edit arrays to modify</span> </div> <div style="display:flex;gap:10px;flex-wrap:wrap"> <a class="glow-btn" href="#reports">Reports</a> <a class="glow-btn" href="#apis">APIs</a> </div> </div> <section class="stat-row"> <?php foreach ($topStats as $stat): ?> <div class="panel stat <?= h(status_class((string)$stat['status'])) ?>"> <div class="label"><?= h((string)$stat['label']) ?></div> <div class="value"><?= h((string)$stat['value']) ?></div> </div> <?php endforeach; ?> </section> <section class="panel section"> <h3>Whole Project Areas</h3> <div class="grid-3"> <?php foreach ($projectAreas as $area): ?> <div class="item" data-filter-item data-filter-text="<?= h(strtolower($area['title'] . ' ' . $area['path'] . ' ' . $area['description'] . ' ' . $area['status'])) ?>"> <div class="item-top"> <div> <div class="tiny"><?= h($area['path']) ?></div> <div class="item-title" style="font-size:18px"><?= h($area['title']) ?></div> </div> <div class="status-pill <?= h(status_class($area['status'])) ?>"><?= h($area['status']) ?></div> </div> <div class="desc"><?= h($area['description']) ?></div> <div class="meta"> <div class="meta-row"><span>Count</span><span><?= (string)$area['count'] ?></span></div> </div> </div> <?php endforeach; ?> </div> </section> <div class="tabbar"> <div class="pills"> <span class="pill active">Overview</span> <span class="pill">Reports</span> <span class="pill">Widgets</span> <span class="pill">Files</span> <span class="pill">APIs</span> <span class="pill">Publishing</span> </div> <div style="display:flex;gap:10px;min-width:240px"> <select class="select"> <option>Sort: Name</option> <option>Sort: Status</option> <option>Sort: Modified</option> </select> </div> </div> <section class="grid-2"> <div class="panel section"> <h3>Project Graphs</h3> <div class="chart-wrap"> <div class="tiny">Traffic Trend</div> <div class="bar-chart"> <?php foreach ($graphs['traffic'] as $bar): ?> <span style="height:<?= percent_bar($bar) ?>%"></span> <?php endforeach; ?> </div> <div class="tiny">Health Trend</div> <div class="bar-chart"> <?php foreach ($graphs['health'] as $bar): ?> <span style="height:<?= percent_bar($bar) ?>%"></span> <?php endforeach; ?> </div> <div class="tiny">Publishing / Reels Trend</div> <div class="bar-chart"> <?php foreach ($graphs['publishing'] as $bar): ?> <span style="height:<?= percent_bar($bar) ?>%"></span> <?php endforeach; ?> </div> </div> </div> <div class="panel section" id="providers"> <h3>Tool Capability Map</h3> <div class="item-list"> <?php foreach ($toolCapabilities as $tool): ?> <div class="item" data-filter-item data-filter-text="<?= h(strtolower($tool['name'] . ' ' . $tool['status'] . ' ' . $tool['desc'])) ?>"> <div class="item-top"> <div class="item-title" style="font-size:16px"><?= h($tool['name']) ?></div> <div class="status-pill <?= h(status_class($tool['status'])) ?>"><?= h($tool['status']) ?></div> </div> <div class="desc"><?= h($tool['desc']) ?></div> </div> <?php endforeach; ?> </div> </div> </section> <section class="panel section" id="reports"> <h3>Reports</h3> <div class="item-list"> <?php foreach ($reports as $report): ?> <div class="item" data-filter-item data-filter-text="<?= h(strtolower($report['title'] . ' ' . $report['category'] . ' ' . $report['status'] . ' ' . $report['owner'] . ' ' . $report['route'] . ' ' . $report['description'])) ?>"> <div class="item-top"> <div> <div class="tiny"><?= h($report['category']) ?></div> <div class="item-title"><?= h($report['title']) ?></div> </div> <div class="status-pill <?= h(status_class($report['status'])) ?>"><?= h($report['status']) ?></div> </div> <div class="desc"><?= h($report['description']) ?></div> <div class="meta"> <div class="meta-row"><span>Owner</span><span><?= h($report['owner']) ?></span></div> <div class="meta-row"><span>Route</span><span><?= h($report['route']) ?></span></div> </div> </div> <?php endforeach; ?> </div> </section> <section class="grid-3"> <div class="panel section" id="widgets"> <h3>Widgets</h3> <div class="item-list"> <?php foreach ($widgets as $widget): ?> <div class="item" data-filter-item data-filter-text="<?= h(strtolower($widget['title'] . ' ' . $widget['type'] . ' ' . $widget['status'] . ' ' . $widget['area'])) ?>"> <div class="item-top"> <div class="item-title" style="font-size:16px"><?= h($widget['title']) ?></div> <div class="status-pill <?= h(status_class($widget['status'])) ?>"><?= h($widget['status']) ?></div> </div> <div class="meta"> <div class="meta-row"><span>Type</span><span><?= h($widget['type']) ?></span></div> <div class="meta-row"><span>Area</span><span><?= h($widget['area']) ?></span></div> </div> </div> <?php endforeach; ?> </div> </div> <div class="panel section" id="panels"> <h3>Panels</h3> <div class="item-list"> <?php foreach ($panels as $panelItem): ?> <div class="item" data-filter-item data-filter-text="<?= h(strtolower($panelItem['title'] . ' ' . $panelItem['status'] . ' ' . $panelItem['route'])) ?>"> <div class="item-top"> <div class="item-title" style="font-size:16px"><?= h($panelItem['title']) ?></div> <div class="status-pill <?= h(status_class($panelItem['status'])) ?>"><?= h($panelItem['status']) ?></div> </div> <div class="meta"> <div class="meta-row"><span>Route</span><span><?= h($panelItem['route']) ?></span></div> </div> </div> <?php endforeach; ?> </div> </div> <div class="panel section" id="routes"> <h3>Routes</h3> <div class="item-list"> <?php foreach ($routes as $route): ?> <div class="item" data-filter-item data-filter-text="<?= h(strtolower($route['label'] . ' ' . $route['path'] . ' ' . $route['security'] . ' ' . $route['status'])) ?>"> <div class="item-top"> <div> <div class="tiny"><?= h($route['security']) ?></div> <div class="item-title" style="font-size:16px"><?= h($route['label']) ?></div> </div> <div class="status-pill <?= h(status_class($route['status'])) ?>"><?= h($route['status']) ?></div> </div> <div class="meta"> <div class="meta-row"><span>Path</span><span><?= h($route['path']) ?></span></div> </div> </div> <?php endforeach; ?> </div> </div> </section> <section class="panel section" id="files"> <h3>Files</h3> <div class="file-list"> <?php foreach ($projectFiles as $file): ?> <div class="file-item" data-filter-item data-filter-text="<?= h(strtolower($file['name'] . ' ' . $file['group'] . ' ' . $file['type'] . ' ' . $file['status'] . ' ' . $file['modified'])) ?>"> <div>▣</div> <div> <div style="font-weight:800"><?= h($file['name']) ?></div> <div class="tiny"><?= h($file['group']) ?> · <?= h($file['type']) ?> · <?= h($file['size']) ?> · <?= h($file['modified']) ?></div> </div> <div class="status-pill <?= h(status_class($file['status'])) ?>"><?= h($file['status']) ?></div> </div> <?php endforeach; ?> </div> </section> <section class="panel section" id="publishing"> <h3>Publishing / Reels / Queue</h3> <div class="item-list"> <?php foreach ($publishing as $item): ?> <div class="item" data-filter-item data-filter-text="<?= h(strtolower($item['title'] . ' ' . $item['platform'] . ' ' . $item['status'] . ' ' . $item['asset'] . ' ' . $item['campaign'])) ?>"> <div class="item-top"> <div> <div class="tiny"><?= h($item['platform']) ?></div> <div class="item-title" style="font-size:16px"><?= h($item['title']) ?></div> </div> <div class="status-pill <?= h(status_class($item['status'])) ?>"><?= h($item['status']) ?></div> </div> <div class="meta"> <div class="meta-row"><span>Asset</span><span><?= h($item['asset']) ?></span></div> <div class="meta-row"><span>Campaign</span><span><?= h($item['campaign']) ?></span></div> </div> </div> <?php endforeach; ?> </div> </section> <section class="panel section" id="roadmap"> <h3>Roadmap Summary</h3> <div class="item-list"> <div class="item"> <div class="item-top"> <div class="item-title" style="font-size:16px">Current Focus</div> <div class="status-pill warn">active</div> </div> <div class="desc">Unify dashboards, wire tracking, normalize protected routes, and prepare modules for richer live data sources.</div> </div> <div class="item"> <div class="item-top"> <div class="item-title" style="font-size:16px">Next Spine</div> <div class="status-pill good">next</div> </div> <div class="desc">API gateway → tracking → memory → scoring → automation → reporting.</div> </div> </div> </section> </main> <aside class="panel rightbar" id="apis"> <div class="section"> <h3>API / Tool Info</h3> <div class="kv"> <div class="kv-row"><span>Google Calendar</span><span>Available</span></div> <div class="kv-row"><span>Gmail</span><span>Available</span></div> <div class="kv-row"><span>Google Contacts</span><span>Available</span></div> <div class="kv-row"><span>Automations</span><span>Available</span></div> <div class="kv-row"><span>Phone / Voice Layer</span><span>Planned</span></div> </div> </div> <?php foreach ($apis as $api): ?> <div class="section" data-filter-item data-filter-text="<?= h(strtolower($api['name'] . ' ' . $api['category'] . ' ' . $api['status'] . ' ' . $api['purpose'] . ' ' . implode(' ', $api['key_capabilities']) . ' ' . $api['notes'])) ?>"> <h3><?= h($api['name']) ?></h3> <div class="kv"> <div class="kv-row"><span>Category</span><span><?= h($api['category']) ?></span></div> <div class="kv-row"><span>Status</span><span><?= h($api['status']) ?></span></div> <div class="kv-row"><span>Purpose</span><span style="max-width:55%;text-align:right"><?= h($api['purpose']) ?></span></div> </div> <div class="tags"> <?php foreach ($api['key_capabilities'] as $cap): ?> <span class="tag"><?= h($cap) ?></span> <?php endforeach; ?> </div> <div class="desc" style="margin-top:12px"><?= h($api['notes']) ?></div> </div> <?php endforeach; ?> <div class="section"> <h3>How to Modify This Template</h3> <div class="kv"> <div class="kv-row"><span>Reports</span><span>Edit <code>$reports</code></span></div> <div class="kv-row"><span>Widgets</span><span>Edit <code>$widgets</code></span></div> <div class="kv-row"><span>Panels</span><span>Edit <code>$panels</code></span></div> <div class="kv-row"><span>Files</span><span>Edit <code>$projectFiles</code></span></div> <div class="kv-row"><span>Routes</span><span>Edit <code>$routes</code></span></div> <div class="kv-row"><span>Publishing</span><span>Edit <code>$publishing</code></span></div> <div class="kv-row"><span>API Info</span><span>Edit <code>$apis</code></span></div> <div class="kv-row"><span>Project Areas</span><span>Edit <code>$projectAreas</code></span></div> </div> </div> <div class="footer-actions"> <a class="action-btn" href="/_guardian/dashboard.php">Guardian</a> <a class="action-btn" href="/connlink/links.php">LINK</a> <a class="action-btn" href="/simon/traffic.php">Traffic</a> <a class="action-btn" href="/web360/">WEB360</a> </div> </aside> </div> <script> (function(){ const input = document.getElementById('inventorySearch'); if (!input) return; input.addEventListener('input', function(){ const q = input.value.trim().toLowerCase(); document.querySelectorAll('[data-filter-item]').forEach(function(el){ const text = (el.getAttribute('data-filter-text') || '').toLowerCase(); el.classList.toggle('is-hidden', q !== '' && !text.includes(q)); }); }); })(); </script> </body> </html>
Save file
Quick jump
open a path
Open