SIMON Master Console Rebuild

File viewer

guarded to /htdocs

/web360/ui/editor_pro.php

<?php require_once __DIR__.'/core/bootstrap.php'; $csrf=w360_csrf(); ?>
<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><link rel="stylesheet" href="assets/css/web360.css"><title>WEB360 Pro Editor</title>
<style>.ide{display:grid;grid-template-columns:310px 1fr;min-height:100dvh}.pane{border-right:1px solid var(--line);padding:12px;background:rgba(0,0,0,.28);overflow:auto}.tree button,.tabs button{display:block;width:100%;text-align:left;margin:4px 0;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);border-radius:10px;padding:8px;font:12px ui-monospace}.tabs{display:flex;gap:6px;overflow:auto;padding:8px;border-bottom:1px solid var(--line)}.tabs button{width:auto}.hot{border-color:var(--cyan)!important}@media(max-width:820px){.ide{grid-template-columns:1fr}.pane{max-height:34dvh;border-right:0;border-bottom:1px solid var(--line)}}</style></head>
<body><div class="ide"><aside class="pane"><a class="tile" href="index.php">Dashboard</a><h2>Explorer</h2><input id="q" placeholder="Search" oninput="filterTree(this.value)"><div id="drop" class="card">Drop files here</div><div id="tree" class="tree"></div></aside><main class="workspace"><div class="toolbar"><input id="path" placeholder="projects/demo/index.php"><button onclick="openFile(path.value)">Open</button><button onclick="saveFile()">Save</button><button onclick="document.documentElement.requestFullscreen?.()">Full</button></div><div id="tabs" class="tabs"></div><textarea id="editor" spellcheck="false"></textarea></main></div>
<script>const csrf="<?=htmlspecialchars($csrf,ENT_QUOTES,'UTF-8')?>";let tabs=[],current=null;
async function api(a,d={},post=false){if(!post)return fetch('api/router.php?action='+a+'&'+new URLSearchParams(d)).then(r=>r.json());let f=new FormData();f.append('csrf',csrf);Object.entries(d).forEach(([k,v])=>f.append(k,v));return fetch('api/router.php?action='+a,{method:'POST',body:f}).then(r=>r.json())}
async function tree(){let r=await api('tree');document.getElementById('tree').innerHTML=(r.items||[]).map(p=>`<button onclick="openFile('${p.replaceAll("'","\\'")}')">${p}</button>`).join('')}
async function openFile(p){let r=await api('open_file',{path:p});if(!r.ok)return alert(r.error);editor.value=r.content;path.value=r.path;current=r.path;if(!tabs.includes(current))tabs.push(current);render()}
async function saveFile(){let r=await api('save_file',{path:path.value,content:editor.value},true);if(!r.ok)alert(r.error);tree()}
function render(){tabs.innerHTML=tabs.map(t=>`<button onclick="openFile('${t.replaceAll("'","\\'")}')">${t.split('/').pop()}</button>`).join('')}
function filterTree(q){document.querySelectorAll('#tree button').forEach(b=>b.hidden=!b.textContent.toLowerCase().includes(q.toLowerCase()))}
editor.addEventListener('input',()=>{clearTimeout(window.as);window.as=setTimeout(saveFile,2500)});drop.ondragover=e=>{e.preventDefault();drop.classList.add('hot')};drop.ondragleave=()=>drop.classList.remove('hot');drop.ondrop=async e=>{e.preventDefault();for(const file of e.dataTransfer.files){path.value='workspace/uploads/'+file.name;editor.value=await file.text();await saveFile()}drop.classList.remove('hot')};tree();</script></body></html>

Quick jump

open a path

True command center for SIMON + WEB360

File viewer

Quick jump