diff options
Diffstat (limited to 'help.html')
| -rw-r--r-- | help.html | 926 |
1 files changed, 926 insertions, 0 deletions
diff --git a/help.html b/help.html new file mode 100644 index 0000000..80c2e9c --- /dev/null +++ b/help.html @@ -0,0 +1,926 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="UTF-8"> +<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> +<meta name="theme-color" content="#0a0a14"> +<title>WebX11 v4.2 — Help</title> +<style> +/* ── Reset & Base ── */ +*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} +:root{ + --bg:#0a0a14; + --bg2:#111122; + --bg3:#16162a; + --bg4:#1c1c36; + --text:#d0d0e8; + --text2:#8888aa; + --accent:#7c5cfc; + --accent2:#a78bfa; + --green:#34d399; + --cyan:#22d3ee; + --amber:#fbbf24; + --rose:#fb7185; + --pink:#e879f9; + --border:#2a2a4a; + --radius:12px; + --font-mono:'JetBrains Mono','Fira Code','Cascadia Code','Courier New',monospace; + --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI','Inter','SF Pro',Roboto,sans-serif +} +html{scroll-behavior:smooth} +body{background:var(--bg);color:var(--text);font-family:var(--font-sans);line-height:1.7;font-size:15px;-webkit-font-smoothing:antialiased} +@media(max-width:600px){body{font-size:13.5px}} + +/* ── Header ── */ +header{ + position:sticky;top:0;z-index:100; + background:rgba(10,10,20,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); + border-bottom:1px solid var(--border);padding:0 +} +header::after{ + content:'';position:absolute;bottom:-1px;left:10%;right:10%;height:1px; + background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.5 +} +.header-inner{max-width:960px;margin:0 auto;padding:20px 24px 16px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px} +.header-left{display:flex;align-items:center;gap:14px} +.header-logo{width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--pink));display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;flex-shrink:0} +h1{font-size:1.35em;font-weight:700;letter-spacing:-.02em;color:#fff} +h1 span{color:var(--accent2)} +.header-meta{display:flex;align-items:center;gap:10px;font-size:.8em;color:var(--text2)} +.badge{ + display:inline-block;padding:3px 10px;border-radius:20px;font-size:.7em;font-weight:600; + letter-spacing:.03em;text-transform:uppercase +} +.badge-v{background:rgba(124,92,252,.2);color:var(--accent2);border:1px solid rgba(124,92,252,.3)} +.badge-new{background:rgba(52,211,153,.15);color:var(--green);border:1px solid rgba(52,211,153,.25)} + +/* ── Nav ── */ +nav{ + position:sticky;top:74px;z-index:99; + background:rgba(10,10,20,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); + border-bottom:1px solid var(--border);padding:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none +} +nav::-webkit-scrollbar{display:none} +.nav-inner{max-width:960px;margin:0 auto;padding:8px 24px;display:flex;gap:4px;flex-wrap:nowrap} +.nav-link{ + flex-shrink:0;color:var(--text2);text-decoration:none;padding:6px 14px;border-radius:8px; + font-size:.78em;font-weight:500;transition:all .15s;white-space:nowrap +} +.nav-link:hover{color:#fff;background:rgba(124,92,252,.12)} + +/* ── Main ── */ +main{max-width:960px;margin:0 auto;padding:32px 24px 80px} + +/* ── Search ── */ +.search-box{ + display:flex;gap:8px;margin-bottom:40px; + background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius); + padding:4px;transition:border-color .2s +} +.search-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,92,252,.15)} +.search-box input{ + flex:1;background:transparent;border:none;color:var(--text);font-family:var(--font-mono); + font-size:.9em;outline:none;padding:10px 14px +} +.search-box input::placeholder{color:var(--text2);opacity:.6} +.search-box button{ + background:var(--accent);color:#fff;border:none;padding:8px 20px;border-radius:8px; + font-size:.8em;font-weight:600;cursor:pointer;transition:opacity .15s;font-family:inherit +} +.search-box button:hover{opacity:.85} +.search-result-msg{color:var(--amber);font-size:.85em;margin-top:8px;display:none} + +/* ── Sections ── */ +section{margin-bottom:56px;scroll-margin-top:130px} +h2{ + font-size:1.35em;font-weight:700;color:#fff;margin-bottom:20px;letter-spacing:-.01em; + display:flex;align-items:center;gap:10px +} +h2::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent)} +h3{ + font-size:1.05em;font-weight:600;color:var(--text);margin:28px 0 12px; + display:flex;align-items:center;gap:8px +} +h4{font-size:.92em;font-weight:600;color:var(--accent2);margin:20px 0 8px} +p{margin-bottom:14px;color:var(--text);line-height:1.8} +ul,ol{margin-bottom:14px;padding-left:22px;color:var(--text)} +li{margin-bottom:6px} +a{color:var(--accent2);text-decoration:none;transition:color .15s} +a:hover{color:#fff} + +/* ── Tables ── */ +.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:16px 0;border-radius:var(--radius);border:1px solid var(--border)} +table{width:100%;border-collapse:collapse;font-size:.88em} +th,td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--border)} +th{background:var(--bg3);color:var(--accent2);font-weight:600;font-size:.82em;text-transform:uppercase;letter-spacing:.04em} +tr:last-child td{border-bottom:none} +tr:hover td{background:rgba(124,92,252,.04)} +code{ + font-family:var(--font-mono);font-size:.88em;padding:2px 7px;border-radius:5px; + background:rgba(124,92,252,.12);color:var(--accent2);border:1px solid rgba(124,92,252,.15) +} +pre code{background:transparent;border:none;padding:0;color:var(--text);font-size:.88em} + +/* ── Pre / Code Blocks ── */ +pre{ + background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius); + padding:16px 20px;overflow-x:auto;margin:16px 0;font-family:var(--font-mono);font-size:.85em;line-height:1.6 +} +pre .cmt{color:var(--text2);opacity:.6} /* comment style */ + +/* ── Callouts ── */ +.callout{ + padding:16px 20px;border-radius:var(--radius);margin:16px 0; + border-left:3px solid;position:relative +} +.callout::before{content:'';position:absolute;inset:0;border-radius:var(--radius);opacity:.06;pointer-events:none} +.callout-success{border-color:var(--green)}.callout-success::before{background:var(--green)} +.callout-info{border-color:var(--cyan)}.callout-info::before{background:var(--cyan)} +.callout-warning{border-color:var(--amber)}.callout-warning::before{background:var(--amber)} +.callout-error{border-color:var(--rose)}.callout-error::before{background:var(--rose)} +.callout-ollama{border-color:var(--pink)}.callout-ollama::before{background:var(--pink)} +.callout-title{font-weight:700;margin-bottom:6px;display:block;font-size:.92em} + +/* ── Feature Grid ── */ +.feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:16px 0} +.feature-card{ + background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius); + padding:16px;transition:border-color .2s,transform .15s +} +.feature-card:hover{border-color:rgba(124,92,252,.4);transform:translateY(-1px)} +.feature-card h4{margin:0 0 6px;font-size:.88em} +.feature-card p{font-size:.82em;color:var(--text2);margin:0;line-height:1.5} + +/* ── Quick Ref ── */ +.quick-ref{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin:16px 0} +.quick-ref-title{color:var(--accent2);font-weight:700;text-align:center;margin-bottom:16px;font-size:.95em;letter-spacing:.02em;text-transform:uppercase} +.quick-ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px} +.quick-ref-item{background:var(--bg3);padding:10px 12px;border-radius:8px;border:1px solid var(--border)} +.quick-ref-item .cmd{color:var(--accent2);font-family:var(--font-mono);font-weight:600;font-size:.85em;display:block} +.quick-ref-item .desc{color:var(--text2);font-size:.78em;margin-top:3px} + +/* ── Version Items ── */ +.version-item{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin:12px 0;transition:border-color .2s} +.version-item:hover{border-color:rgba(124,92,252,.3)} +.version-item .v-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap;gap:6px} +.version-item .v-num{color:var(--accent2);font-weight:700;font-size:.95em} +.version-item .v-date{color:var(--text2);font-size:.82em} +.version-item ul{margin:0;padding-left:18px} +.version-item li{margin-bottom:4px;font-size:.88em;color:var(--text)} + +/* ── Footer ── */ +footer{ + text-align:center;padding:32px 24px;border-top:1px solid var(--border); + color:var(--text2);font-size:.82em +} +footer .links{display:flex;justify-content:center;gap:20px;margin-bottom:14px;flex-wrap:wrap} +footer .links a{color:var(--text);font-weight:500} +footer .links a:hover{color:var(--accent2)} +footer .tagline{color:var(--accent2);margin-top:10px;font-weight:500} + +/* ── Back to Top ── */ +.back-top{ + position:fixed;bottom:24px;right:24px; + background:var(--bg3);border:1px solid var(--border);color:var(--text2); + width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center; + font-size:18px;cursor:pointer;opacity:0;pointer-events:none;transition:all .2s;z-index:50; + backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-decoration:none +} +.back-top.visible{opacity:1;pointer-events:auto} +.back-top:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-2px)} + +/* ── Responsive ── */ +@media(max-width:600px){ + .header-inner{padding:16px 16px 12px} + .header-meta{display:none} + .nav-inner{padding:6px 12px;gap:2px} + .nav-link{padding:5px 10px;font-size:.74em} + main{padding:20px 16px 60px} + h2{font-size:1.15em} + .feature-grid{grid-template-columns:1fr} + .quick-ref-grid{grid-template-columns:1fr 1fr} + pre{font-size:.8em;padding:12px 14px} + th,td{padding:8px 10px;font-size:.82em} +} +@media(max-width:400px){ + .quick-ref-grid{grid-template-columns:1fr} + .badge-new{display:none} +} +</style> +</head> +<body> + +<header> + <div class="header-inner"> + <div class="header-left"> + <div class="header-logo">⚡</div> + <h1>WebX11 <span>Docs</span></h1> + </div> + <div class="header-meta"> + <span class="badge badge-v">v4.2</span> + <span class="badge badge-new">24 core · 12 ext</span> + <span style="color:var(--text2)">110+ commands</span> + </div> + </div> +</header> + +<nav> + <div class="nav-inner"> + <a href="#overview" class="nav-link">Overview</a> + <a href="#start" class="nav-link">Quick Start</a> + <a href="#commands" class="nav-link">Commands</a> + <a href="#filesystem" class="nav-link">Filesystem</a> + <a href="#ai" class="nav-link">AI Agent</a> + <a href="#skills" class="nav-link">Skills</a> + <a href="#ollama" class="nav-link">Ollama</a> + <a href="#web" class="nav-link">Search & Web</a> + <a href="#voice" class="nav-link">Voice & Sound</a> + <a href="#config" class="nav-link">Config</a> + <a href="#modules" class="nav-link">Modules</a> + <a href="#extras" class="nav-link">Extras</a> + <a href="#sessions" class="nav-link">Sessions</a> + <a href="#storage" class="nav-link">Storage</a> + <a href="#security" class="nav-link">Security</a> + <a href="#trouble" class="nav-link">Troubleshoot</a> + <a href="#ref" class="nav-link">Quick Ref</a> + <a href="#history" class="nav-link">Changelog</a> + </div> +</nav> + +<main> + <div class="search-box"> + <input type="text" id="search-input" placeholder="Search docs…" spellcheck="false"> + <button onclick="searchDocs()">Search</button> + </div> + <div class="search-result-msg" id="search-result-msg"></div> + + <!-- ── Overview ── --> + <section id="overview"> + <h2>⛅ Overview</h2> + <p>WebX11 v4.2 is a browser-based Unix-like terminal — dynamic modules, AI assistant (Ollama), persistent virtual filesystem, web search, voice input, code editor, and a full skill system. Everything runs client-side in your browser.</p> + <div class="feature-grid"> + <div class="feature-card"><h4>🧩 24 Core + 12 Ext</h4><p>Modules loaded at startup. Load new ones from any URL at runtime.</p></div> + <div class="feature-card"><h4>🤖 Agent with Tools</h4><p>15+ tools — file ops, web search, skills, modules. Destructive action confirmations with inline bar + countdown.</p></div> + <div class="feature-card"><h4>📚 Skills System</h4><p>Persistent procedural memory. Create, patch, search, export skills for repeatable workflows.</p></div> + <div class="feature-card"><h4>💾 VFS + Sessions</h4><p>Virtual filesystem persists in localStorage. Save/load/export sessions.</p></div> + <div class="feature-card"><h4>🎤 Voice Input</h4><p>Speech recognition in the terminal. Works in Chrome, Edge, Safari.</p></div> + <div class="feature-card"><h4>🌐 Web Search</h4><p>SearXNG + DuckDuckGo fallback + URL fetch/extract. All built-in.</p></div> + <div class="feature-card"><h4>☁️ WebDAV Sync</h4><p>Push, pull, backup VFS to any WebDAV server.</p></div> + <div class="feature-card"><h4>📱 Mobile First</h4><p>Touch-optimized. <code>srcdoc</code> HTML preview works on mobile.</p></div> + <div class="feature-card"><h4>✏️ Text Editor</h4><p>Inline VFS editor — <code>edit <path></code> opens a modal with save/cancel.</p></div> + <div class="feature-card"><h4>🔗 Aliases</h4><p><code>ll</code>, <code>h</code>, <code>cls</code> built-in. Define custom aliases with <code>alias x=y</code>.</p></div> + </div> + </section> + + <!-- ── Quick Start ── --> + <section id="start"> + <h2>🚀 Quick Start</h2> + <ol style="margin-bottom:8px"> + <li><strong>Open</strong> <code>index.html</code> in Chrome/Edge</li> + <li>Watch the splash screen load modules</li> + <li>Type <code>help</code> + Enter</li> + <li>Use the quick-action buttons above the input area</li> + </ol> + + <h3>First Commands</h3> + <pre><span class="cmt"># List VFS files</span> +ls + +<span class="cmt"># List files faster</span> +ll + +<span class="cmt"># Connect to Ollama AI</span> +ollamaconnect + +<span class="cmt"># Chat with AI</span> +ai what's in this directory? + +<span class="cmt"># Create a file</span> +put hello.txt Hello World + +<span class="cmt"># Edit a file</span> +edit hello.txt + +<span class="cmt"># Search the web</span> +search quantum computing + +<span class="cmt"># Find files</span> +find hello + +<span class="cmt"># Compare two files</span> +diff a.txt b.txt</pre> + + <div class="callout callout-info"> + <span class="callout-title">⌨️ Keyboard Shortcuts</span> + <ul style="margin:0"> + <li><strong>Enter</strong> — Execute</li> + <li><strong>Tab</strong> — Cycle autocomplete</li> + <li><strong>↑/↓</strong> — Command history</li> + <li><strong>Esc</strong> — Hide autocomplete / stop AI</li> + <li><strong>|</strong> — Pipe: <code>ls | grep hello</code></li> + </ul> + </div> + </section> + + <!-- ── Commands ── --> + <section id="commands"> + <h2>📖 Full Command Reference</h2> + + <h3>System</h3> + <div class="table-wrap"><table> + <tr><th>Command</th><th>Description</th><th>Example</th></tr> + <tr><td><code>help</code></td><td>Show all commands</td><td><code>help</code></td></tr> + <tr><td><code>clear</code> / <code>cls</code></td><td>Clear terminal</td><td><code>cls</code></td></tr> + <tr><td><code>echo</code></td><td>Print text</td><td><code>echo Hello</code></td></tr> + <tr><td><code>mem</code></td><td>Show memory usage</td><td><code>mem</code></td></tr> + <tr><td><code>status</code></td><td>System status</td><td><code>status</code></td></tr> + <tr><td><code>font-size</code></td><td>Change font size (8–32)</td><td><code>font-size 16</code></td></tr> + <tr><td><code>load-local</code></td><td>Load module from VFS or URL</td><td><code>load-local modules/ext/calc.js</code></td></tr> + <tr><td><code>startup-modules</code></td><td>Open startup module selector</td><td><code>startup-modules</code></td></tr> + <tr><td><code>preview</code></td><td>Preview HTML in iframe</td><td><code>preview test.html</code></td></tr> + <tr><td><code>factory-reset</code></td><td>Reset config</td><td><code>factory-reset</code></td></tr> + <tr><td><code>reset-vfs</code></td><td>Reset VFS</td><td><code>reset-vfs</code></td></tr> + </table></div> + + <h3>AI Assistant</h3> + <div class="table-wrap"><table> + <tr><th>Command</th><th>Description</th><th>Example</th></tr> + <tr><td><code>ai</code> / <code>ask</code></td><td>Chat with AI (tool-calling)</td><td><code>ai create a notes file</code></td></tr> + <tr><td><code>ai-clear</code></td><td>Reset conversation context</td><td><code>ai-clear</code></td></tr> + <tr><td><code>ai-system</code></td><td>View/set system prompt</td><td><code>ai-system</code></td></tr> + <tr><td><code>ai-context</code></td><td>Show conversation memory</td><td><code>ai-context</code></td></tr> + <tr><td><code>ai-allow</code></td><td>Allow pending destructive action</td><td><code>ai-allow</code></td></tr> + <tr><td><code>ai-deny</code></td><td>Deny pending destructive action</td><td><code>ai-deny</code></td></tr> + <tr><td><code>ai-stop</code></td><td>Cancel running AI request</td><td><code>ai-stop</code></td></tr> + </table></div> + + <h3>Smart Context</h3> + <div class="table-wrap"><table> + <tr><th>Command</th><th>Description</th><th>Example</th></tr> + <tr><td><code>context</code></td><td>Set active profile</td><td><code>context expert</code></td></tr> + <tr><td><code>contexts</code></td><td>List profiles</td><td><code>contexts</code></td></tr> + <tr><td><code>context-new</code></td><td>Create profile</td><td><code>context-new myprofile</code></td></tr> + <tr><td><code>context-delete</code></td><td>Delete profile</td><td><code>context-delete old</code></td></tr> + <tr><td><code>smart-ask</code></td><td>Ask with current profile</td><td><code>smart-ask explain this</code></td></tr> + </table></div> + + <h3>Dynamic Prompts</h3> + <div class="table-wrap"><table> + <tr><th>Command</th><th>Description</th><th>Example</th></tr> + <tr><td><code>prompt</code></td><td>Use saved template</td><td><code>prompt summarize</code></td></tr> + <tr><td><code>prompt-save</code></td><td>Save template</td><td><code>prompt-save myprompt</code></td></tr> + <tr><td><code>prompt-list</code></td><td>List saved prompts</td><td><code>prompt-list</code></td></tr> + <tr><td><code>prompt-delete</code></td><td>Delete prompt</td><td><code>prompt-delete old</code></td></tr> + <tr><td><code>prompt-var</code></td><td>Set template variable</td><td><code>prompt-var name Alice</code></td></tr> + <tr><td><code>prompt-vars</code></td><td>List variables</td><td><code>prompt-vars</code></td></tr> + </table></div> + + <h3>Skills</h3> + <div class="table-wrap"><table> + <tr><th>Command</th><th>Description</th><th>Example</th></tr> + <tr><td><code>skill-list</code></td><td>List all skills</td><td><code>skill-list</code></td></tr> + <tr><td><code>skill-view</code></td><td>View skill content</td><td><code>skill-view web-scraper</code></td></tr> + <tr><td><code>skill-create</code></td><td>Create a skill</td><td><code>skill-create name desc "steps" tags</code></td></tr> + <tr><td><code>skill-patch</code></td><td>Update a skill</td><td><code>skill-patch name "new content"</code></td></tr> + <tr><td><code>skill-delete</code></td><td>Delete a skill</td><td><code>skill-delete oldskill</code></td></tr> + <tr><td><code>skill-export</code></td><td>Export skill to JSON</td><td><code>skill-export myskill</code></td></tr> + <tr><td><code>skill-import</code></td><td>Import skill from JSON</td><td><code>skill-import</code></td></tr> + <tr><td><code>skill-sync</code></td><td>Rebuild skill index</td><td><code>skill-sync</code></td></tr> + </table></div> + + <h3>Config</h3> + <div class="table-wrap"><table> + <tr><th>Command</th><th>Description</th><th>Example</th></tr> + <tr><td><code>config</code></td><td>Get a config value</td><td><code>config</code></td></tr> + <tr><td><code>config-set</code></td><td>Set a config value</td><td><code>config-set key value</code></td></tr> + <tr><td><code>config-list</code></td><td>List all config</td><td><code>config-list</code></td></tr> + <tr><td><code>config-delete</code></td><td>Delete a config entry</td><td><code>config-delete key</code></td></tr> + <tr><td><code>config-export</code></td><td>Export config as JSON</td><td><code>config-export</code></td></tr> + <tr><td><code>config-reset</code></td><td>Reset all config</td><td><code>config-reset</code></td></tr> + </table></div> + </section> + + <!-- ── Filesystem ── --> + <section id="filesystem"> + <h2>📁 Filesystem</h2> + <p>All VFS files persist in <code>localStorage</code>. <code>ls</code>, <code>cd</code>, <code>pwd</code> work like a real terminal. Clickable output — tap a file to <code>cat</code>, tap a dir to <code>cd</code>.</p> + <div class="table-wrap"><table> + <tr><th>Command</th><th>Description</th><th>Example</th></tr> + <tr><td><code>ls</code> / <code>ll</code></td><td>List files</td><td><code>ll</code></td></tr> + <tr><td><code>cd</code></td><td>Change directory</td><td><code>cd notes</code></td></tr> + <tr><td><code>pwd</code></td><td>Print working directory</td><td><code>pwd</code></td></tr> + <tr><td><code>cat</code></td><td>View file</td><td><code>cat readme.txt</code></td></tr> + <tr><td><code>put</code></td><td>Create file with content</td><td><code>put hello.txt Hello World</code></td></tr> + <tr><td><code>edit</code></td><td>Open in modal editor</td><td><code>edit notes.md</code></td></tr> + <tr><td><code>rm</code></td><td>Delete file</td><td><code>rm temp.txt</code></td></tr> + <tr><td><code>mkdir</code></td><td>Create directory</td><td><code>mkdir projects</code></td></tr> + <tr><td><code>rmdir</code></td><td>Remove directory</td><td><code>rmdir empty</code></td></tr> + <tr><td><code>mv</code></td><td>Move/rename</td><td><code>mv old.txt new.txt</code></td></tr> + <tr><td><code>cp</code></td><td>Copy file</td><td><code>cp a.txt b.txt</code></td></tr> + <tr><td><code>touch</code></td><td>Create empty file</td><td><code>touch newfile.txt</code></td></tr> + <tr><td><code>tree</code></td><td>Directory tree</td><td><code>tree</code></td></tr> + <tr><td><code>find</code></td><td>Recursive file search</td><td><code>find .txt</code></td></tr> + <tr><td><code>diff</code></td><td>Compare two files</td><td><code>diff a.txt b.txt</code></td></tr> + <tr><td><code>grep</code></td><td>Search file contents</td><td><code>grep hello *.txt</code></td></tr> + <tr><td><code>head</code></td><td>First N lines</td><td><code>head file.txt 10</code></td></tr> + <tr><td><code>tail</code></td><td>Last N lines</td><td><code>tail file.txt 10</code></td></tr> + <tr><td><code>sort</code></td><td>Sort file lines</td><td><code>sort file.txt</code></td></tr> + <tr><td><code>wc</code></td><td>Count lines/words/chars</td><td><code>wc file.txt</code></td></tr> + <tr><td><code>du</code></td><td>Disk usage</td><td><code>du</code></td></tr> + <tr><td><code>upload</code></td><td>Upload file from device</td><td><code>upload</code></td></tr> + <tr><td><code>download</code></td><td>Download file</td><td><code>download file.txt</code></td></tr> + <tr><td><code>vfs-export</code></td><td>Download VFS as JSON</td><td><code>vfs-export</code></td></tr> + <tr><td><code>vfs-import</code></td><td>Import VFS from JSON</td><td><code>vfs-import</code></td></tr> + </table></div> + </section> + + <!-- ── AI Agent ── --> + <section id="ai"> + <h2>🤖 AI Assistant</h2> + <div class="callout callout-success"> + <span class="callout-title">Tool-Calling Agent</span> + The AI runs a full agent loop with 15+ tools: filesystem, web search, URL fetch, skills, WPM, session memory, user profile, module introspection. + </div> + + <h3>How It Works</h3> + <ol> + <li>Type <code>ai <request></code></li> + <li>AI loads relevant skills + recent session memory</li> + <li>Decides which tools to call (up to 5 turns)</li> + <li><strong>Destructive tools</strong> trigger an inline confirm bar — no dark overlay</li> + <li>120s countdown: yellow → bold red at 30s → pulsing at 10s</li> + <li>Type <code>ai-allow</code> / <code>ai-deny</code> or tap the buttons</li> + <li>After complex tasks, AI suggests creating a skill</li> + </ol> + + <div class="callout callout-warning"> + <span class="callout-title">⚠️ Destructive Tools</span> + <code>write_file</code>, <code>delete_file</code>, <code>run_command</code>, <code>make_directory</code>, <code>edit_module</code> all require confirmation before executing. + </div> + + <h3>Available Tools</h3> + <div class="table-wrap"><table> + <tr><th>Tool</th><th>Description</th><th>Destructive?</th></tr> + <tr><td><code>list_files</code></td><td>List VFS directory</td><td>❌</td></tr> + <tr><td><code>read_file</code></td><td>Read file (8k trunc)</td><td>❌</td></tr> + <tr><td><code>write_file</code></td><td>Write to file</td><td>✅</td></tr> + <tr><td><code>make_directory</code></td><td>Create directory</td><td>✅</td></tr> + <tr><td><code>delete_file</code></td><td>Delete file/dir</td><td>✅</td></tr> + <tr><td><code>get_status</code></td><td>System status</td><td>❌</td></tr> + <tr><td><code>get_help</code></td><td>List commands</td><td>❌</td></tr> + <tr><td><code>web_search</code></td><td>SearXNG + DDG</td><td>❌</td></tr> + <tr><td><code>web_fetch</code></td><td>Extract URL content</td><td>❌</td></tr> + <tr><td><code>run_command</code></td><td>Execute terminal cmd</td><td>✅</td></tr> + <tr><td><code>load_skills</code></td><td>Search relevant skills</td><td>❌</td></tr> + <tr><td><code>create/patch/list_skills</code></td><td>Skill management</td><td>❌</td></tr> + <tr><td><code>view/edit/test/reload</code></td><td>Module operations</td><td>edit ✅</td></tr> + <tr><td><code>user_get/set/list/forget</code></td><td>User profile</td><td>❌</td></tr> + <tr><td><code>session_save/load/recent/stats</code></td><td>Session memory</td><td>❌</td></tr> + </table></div> + + <h3>Sound Notification</h3> + <p>A short <strong>"ding"</strong> plays via WebAudio when AI finishes. Toggle with the <strong>🔊 Sound</strong> button in quick-actions. Persists in localStorage.</p> + </section> + + <!-- ── Skills ── --> + <section id="skills"> + <h2>📚 Skills System</h2> + <div class="callout callout-success"> + <span class="callout-title">Procedural Memory</span> + Skills are reusable markdown procedures stored in VFS <code>/skills/</code>. The AI auto-loads relevant skills at task start. Create skills after complex workflows (3+ tool calls) to save the approach. + </div> + + <h3>Format</h3> + <pre>--- +name: web-scrape-and-summarize +description: Scrape a URL and summarize +tags: [web, research] +category: general +--- +## Steps +1. Use web_fetch(url) to get content +2. Present a concise summary +3. Save with create_skill</pre> + + <h3>Commands</h3> + <pre><span class="cmt"># List all skills</span> +skill-list + +<span class="cmt"># Create a skill</span> +skill-create my-skill "Does X" "Steps to do X" "tag1,tag2" + +<span class="cmt"># View / patch / delete</span> +skill-view my-skill +skill-patch my-skill "Updated steps" +skill-delete my-skill + +<span class="cmt"># Export / Import</span> +skill-export my-skill +skill-import</pre> + + <h3>Auto-Creation</h3> + <p>When the AI encounters the same tool error 3+ times, a workaround skill is auto-created. Every 20 messages, skills are audited for staleness.</p> + </section> + + <!-- ── Ollama ── --> + <section id="ollama"> + <h2>🤖 Ollama</h2> + <div class="callout callout-ollama"> + <span class="callout-title">Local or Remote AI</span> + WebX11 connects to any Ollama instance. All tool-calling and chat features require a connection. + </div> + + <h3>Setup</h3> + <pre><span class="cmt"># Install & pull a model</span> +curl -fsSL https://ollama.com/install.sh | sh +ollama pull llama2 + +<span class="cmt"># Start Ollama</span> +ollama serve + +<span class="cmt"># In WebX11</span> +ollamaconnect</pre> + + <h3>Commands</h3> + <div class="table-wrap"><table> + <tr><th>Command</th><th>Description</th></tr> + <tr><td><code>ollamaconnect</code></td><td>Connect to Ollama</td></tr> + <tr><td><code>ollamasetproxy</code></td><td>Set remote endpoint</td></tr> + <tr><td><code>ollamamodels</code></td><td>List models</td></tr> + <tr><td><code>ollamasetmodel</code></td><td>Set active model</td></tr> + <tr><td><code>ollamadisconnect</code></td><td>Disconnect</td></tr> + <tr><td><code>ollama</code></td><td>Open Ollama Manager UI</td></tr> + <tr><td><code>models</code></td><td>List all models</td></tr> + <tr><td><code>model-info</code></td><td>Model details</td></tr> + <tr><td><code>model-pull</code></td><td>Pull a model</td></tr> + <tr><td><code>model-delete</code></td><td>Delete a model</td></tr> + <tr><td><code>model-run</code></td><td>Run model with prompt</td></tr> + </table></div> + + <div class="callout callout-warning"> + <span class="callout-title">🔌 CORS for Remote</span> + <code>OLLAMA_ORIGINS="*" ollama serve</code> + </div> + </section> + + <!-- ── Search & Web ── --> + <section id="web"> + <h2>🌐 Search & Web</h2> + <div class="callout callout-info"> + <span class="callout-title">SearXNG + DDG + URL Fetcher</span> + Three modules provide comprehensive web capabilities via the proxy API. + </div> + <div class="table-wrap"><table> + <tr><th>Command</th><th>Module</th><th>Description</th><th>Example</th></tr> + <tr><td><code>search</code> / <code>s</code></td><td>SearXNG</td><td>Web search</td><td><code>search raspberry pi</code></td></tr> + <tr><td><code>ddg</code> / <code>duck</code></td><td>DDG</td><td>DuckDuckGo fallback</td><td><code>ddg news today</code></td></tr> + <tr><td><code>fetch</code> / <code>web</code></td><td>Fetcher</td><td>Fetch URL content</td><td><code>fetch https://example.com</code></td></tr> + <tr><td><code>extract</code></td><td>Fetcher</td><td>Clean readable text</td><td><code>extract https://news.article</code></td></tr> + </table></div> + <p>The AI agent also has <code>web_search</code> and <code>web_fetch</code> tools using the same APIs.</p> + </section> + + <!-- ── Voice & Sound ── --> + <section id="voice"> + <h2>🎤 Voice & Sound</h2> + <div class="callout callout-success"> + <span class="callout-title">Speech Recognition</span> + A <strong>🎤 button</strong> in the input area activates SpeechRecognition. Chrome, Edge, Safari 14.1+. Not Firefox. + </div> + <ul> + <li>Tap 🎤 to start listening — button pulses green</li> + <li>Say your command — recognized text fills the input</li> + <li>Tap again or wait to stop</li> + <li>Red flash indicates failure</li> + </ul> + <h3>Sound</h3> + <p>Toggle AI response "ding" with the <strong>🔊 Sound</strong> button. Persists in localStorage.</p> + </section> + + <!-- ── Config ── --> + <section id="config"> + <h2>⚙️ Configuration</h2> + <p>All config values stored as <code>webx11_config_*</code> in localStorage. Use the ⚙ Config button or CLI commands.</p> + <h3>Notable Keys</h3> + <div class="table-wrap"><table> + <tr><th>Key</th><th>Description</th><th>Values</th></tr> + <tr><td><code>webx11_config_ai_sound</code></td><td>AI sound toggle</td><td><code>on</code>, <code>off</code></td></tr> + <tr><td><code>webx11_config_voice_visible</code></td><td>Mic button visibility</td><td><code>on</code>, <code>off</code></td></tr> + </table></div> + <h3>Persisted State</h3> + <div class="table-wrap"><table> + <tr><th>Key</th><th>Description</th></tr> + <tr><td><code>webx11_filesystem</code></td><td>VFS JSON</td></tr> + <tr><td><code>webx11_modules</code></td><td>Loaded module URLs</td></tr> + <tr><td><code>webx11_ollama_endpoint</code></td><td>Ollama API URL</td></tr> + <tr><td><code>webx11_ollama_model</code></td><td>Selected model</td></tr> + <tr><td><code>webx11_startup_modules</code></td><td>Startup selection</td></tr> + <tr><td><code>webx11_font_size</code></td><td>Font size (8–32)</td></tr> + <tr><td><code>webx11_command_history</code></td><td>Command history</td></tr> + <tr><td><code>webx11_terminal_output</code></td><td>Persisted output</td></tr> + <tr><td><code>webx11_ai_context</code></td><td>AI conversation history</td></tr> + <tr><td><code>webx11_user_profile</code></td><td>AI user profile</td></tr> + <tr><td><code>webx11_aliases</code></td><td>User-defined aliases</td></tr> + </table></div> + </section> + + <!-- ── Modules ── --> + <section id="modules"> + <h2>🧩 Module System</h2> + <div class="callout callout-info"> + <span class="callout-title">24 Core + 12 Ext</span> + Modules loaded in dependency order at startup. Toggle ext modules with ⚙ gear on splash. + </div> + <h3>Commands</h3> + <div class="table-wrap"><table> + <tr><th>Command</th><th>Description</th></tr> + <tr><td><code>modules</code></td><td>Open Module Manager UI</td></tr> + <tr><td><code>loadmod <url></code></td><td>Load module from URL</td></tr> + <tr><td><code>removemod <name></code></td><td>Remove a module</td></tr> + <tr><td><code>listmods</code></td><td>List all loaded modules</td></tr> + </table></div> + + <h3>Boot Order</h3> + <ol> + <li>Splash screen with ⚙ gear</li> + <li>Foundation: <code>virtual-fs.js</code> → <code>module-manager.js</code> → <code>ollama-manager.js</code> → <code>terminal.js</code></li> + <li>Built-in modules loaded async</li> + <li>Ext modules loaded if selected</li> + <li>Splash hides, terminal ready</li> + </ol> + + <h3>Code Editor</h3> + <p>The AI can <code>edit_module(name)</code> to copy source into the Code Editor modal. Edit inline, then <strong>💾 Save & Test</strong> to load live from <code>/_mods/</code>. Use <code>test_module</code> without reloading the page.</p> + </section> + + <!-- ── Extras ── --> + <section id="extras"> + <h2>🧰 Extended Modules</h2> + + <h3>WebDAV Sync</h3> + <div class="table-wrap"><table> + <tr><th>Command</th><th>Description</th></tr> + <tr><td><code>webdav-config</code></td><td>Configure server</td></tr> + <tr><td><code>webdav-status</code></td><td>Connection status</td></tr> + <tr><td><code>webdav-ls</code></td><td>List remote dir</td></tr> + <tr><td><code>webdav-push</code></td><td>Push file</td></tr> + <tr><td><code>webdav-pull</code></td><td>Pull file</td></tr> + <tr><td><code>webdav-backup</code></td><td>Backup VFS</td></tr> + <tr><td><code>webdav-restore</code></td><td>Restore VFS</td></tr> + <tr><td><code>webdav-backup-list</code></td><td>List backups</td></tr> + </table></div> + + <h3>Calculator & Cron</h3> + <div class="table-wrap"><table> + <tr><th>Command</th><th>Module</th><th>Description</th></tr> + <tr><td><code>calc</code></td><td>calc.js</td><td>Evaluate math / unit conversion</td></tr> + <tr><td><code>cron-every</code></td><td>cron.js</td><td>Schedule a command</td></tr> + <tr><td><code>cron-list</code></td><td>cron.js</td><td>List scheduled jobs</td></tr> + <tr><td><code>cron-stop</code></td><td>cron.js</td><td>Stop a job</td></tr> + <tr><td><code>cron-clear</code></td><td>cron.js</td><td>Clear all jobs</td></tr> + </table></div> + + <h3>Theme, WPM & Mindmap</h3> + <div class="table-wrap"><table> + <tr><th>Command</th><th>Module</th><th>Description</th></tr> + <tr><td><code>theme</code></td><td>theme.js</td><td>Set color theme (dark, light, amber, cyber, …)</td></tr> + <tr><td><code>wpm</code></td><td>wpm.js</td><td>Package manager</td></tr> + <tr><td><code>mindmap</code></td><td>mindmap.js</td><td>Show file structure as mindmap</td></tr> + </table></div> + + <h3>Server Monitor</h3> + <div class="table-wrap"><table> + <tr><th>Command</th><th>Description</th></tr> + <tr><td><code>server</code></td><td>Add server to monitor</td></tr> + <tr><td><code>servers</code></td><td>List monitored servers</td></tr> + <tr><td><code>server-check</code></td><td>Ping a server</td></tr> + <tr><td><code>server-remove</code></td><td>Remove server</td></tr> + <tr><td><code>monitor</code></td><td>Toggle auto-monitoring</td></tr> + </table></div> + + <h3>IO / Backup</h3> + <div class="table-wrap"><table> + <tr><th>Command</th><th>Description</th></tr> + <tr><td><code>export-mods</code></td><td>Export module configs</td></tr> + <tr><td><code>import-mods</code></td><td>Import module configs</td></tr> + <tr><td><code>backup</code></td><td>Full system backup</td></tr> + <tr><td><code>restore</code></td><td>Restore from backup</td></tr> + <tr><td><code>share-mod</code></td><td>Share module as text</td></tr> + </table></div> + + <h3>Aliases</h3> + <p>Built-in: <code>ll</code> = <code>ls</code>, <code>h</code> = <code>help</code>, <code>cls</code> = <code>clear</code>. Define custom: <code>alias x=ls -la</code>. Remove: <code>unalias x</code>. Persists in localStorage.</p> + </section> + + <!-- ── Sessions ── --> + <section id="sessions"> + <h2>💬 Sessions</h2> + <p>Sessions persist AI conversation logs in VFS <code>/memory/</code>. The AI auto-loads recent sessions at start for continuity.</p> + <h3>AI Tools</h3> + <div class="table-wrap"><table> + <tr><th>Tool</th><th>Description</th></tr> + <tr><td><code>session_save</code></td><td>Save summary</td></tr> + <tr><td><code>session_load</code></td><td>Load by date</td></tr> + <tr><td><code>session_recent</code></td><td>Show last N</td></tr> + <tr><td><code>session_stats</code></td><td>Aggregate statistics</td></tr> + </table></div> + <p>The terminal auto-saves session state every 60s and auto-restores on page reload.</p> + </section> + + <!-- ── Storage ── --> + <section id="storage"> + <h2>💾 Storage</h2> + <div class="callout callout-success"> + <span class="callout-title">localStorage Persistence</span> + Everything survives hard refreshes via 15+ localStorage keys. + </div> + <pre><span class="cmt"># Clear all WebX11 data</span> +localStorage.clear() +location.reload() + +<span class="cmt"># Back up / restore VFS</span> +vfs-export +vfs-import</pre> + <p>~5–10MB per domain. Only URLs (not code) are stored for modules.</p> + </section> + + <!-- ── Security ── --> + <section id="security"> + <h2>🔒 Security</h2> + <div class="table-wrap"><table> + <tr><th>Feature</th><th>Status</th></tr> + <tr><td>Input Validation</td><td>✅</td></tr> + <tr><td>Output Escaping</td><td>✅</td></tr> + <tr><td>No eval() on User Input</td><td>✅</td></tr> + <tr><td>Path Traversal Prevention</td><td>✅</td></tr> + <tr><td>Sandboxed File System</td><td>✅</td></tr> + <tr><td>AI Destructive Confirmations</td><td>✅ Required + timeout</td></tr> + <tr><td>Iframe Preview Sandbox</td><td>✅ allow-same-origin allow-scripts</td></tr> + </table></div> + <div class="callout callout-warning"> + <span class="callout-title">⚠️ Module Loading</span> + Only load modules from trusted sources — they have full terminal access. + </div> + </section> + + <!-- ── Troubleshooting ── --> + <section id="trouble"> + <h2>🔧 Troubleshooting</h2> + <div class="table-wrap"><table> + <tr><th>Issue</th><th>Solution</th></tr> + <tr><td>AI not responding</td><td>Run <code>ollamaconnect</code> first, ensure Ollama is running</td></tr> + <tr><td>Voice not working</td><td>Chrome/Edge/Safari only. Grant mic permission</td></tr> + <tr><td>Module fails to load</td><td>Check CORS on the hosting server</td></tr> + <tr><td>Data lost after refresh</td><td>Check localStorage is enabled. Private mode clears data</td></tr> + <tr><td>AI actions not confirming</td><td>Confirm bar auto-denies after 120s. Type <code>ai-allow</code></td></tr> + <tr><td>Sound not playing</td><td>Browser may need first user gesture. Toggle off/on</td></tr> + <tr><td>Ollama CORS error</td><td><code>OLLAMA_ORIGINS="*" ollama serve</code></td></tr> + </table></div> + <h3>Debug</h3> + <pre><span class="cmt"># Console</span> +F12 → Console + +<span class="cmt"># View AI state</span> +ai-system +ai-context + +<span class="cmt"># Module status</span> +listmods</pre> + </section> + + <!-- ── Quick Ref ── --> + <section id="ref"> + <h2>⚡ Quick Reference</h2> + <div class="quick-ref"> + <div class="quick-ref-title">WebX11 v4.2</div> + <div class="quick-ref-grid"> + <div class="quick-ref-item"><span class="cmd">help</span><span class="desc">Show all commands</span></div> + <div class="quick-ref-item"><span class="cmd">cls</span><span class="desc">Clear terminal</span></div> + <div class="quick-ref-item"><span class="cmd">ll</span><span class="desc">List files</span></div> + <div class="quick-ref-item"><span class="cmd">cd <dir></span><span class="desc">Change directory</span></div> + <div class="quick-ref-item"><span class="cmd">cat <f></span><span class="desc">View file</span></div> + <div class="quick-ref-item"><span class="cmd">edit <f></span><span class="desc">Edit file</span></div> + <div class="quick-ref-item"><span class="cmd">ai <msg></span><span class="desc">Chat with AI</span></div> + <div class="quick-ref-item"><span class="cmd">search <q></span><span class="desc">Web search</span></div> + <div class="quick-ref-item"><span class="cmd">find <q></span><span class="desc">File search</span></div> + <div class="quick-ref-item"><span class="cmd">diff a b</span><span class="desc">Compare files</span></div> + <div class="quick-ref-item"><span class="cmd">ollamaconnect</span><span class="desc">Connect AI</span></div> + <div class="quick-ref-item"><span class="cmd">ai-allow</span><span class="desc">Allow destructive</span></div> + <div class="quick-ref-item"><span class="cmd">ai-deny</span><span class="desc">Deny destructive</span></div> + <div class="quick-ref-item"><span class="cmd">modules</span><span class="desc">Module Manager</span></div> + <div class="quick-ref-item"><span class="cmd">skill-list</span><span class="desc">List skills</span></div> + <div class="quick-ref-item"><span class="cmd">alias</span><span class="desc">List aliases</span></div> + <div class="quick-ref-item"><span class="cmd">preview</span><span class="desc">HTML preview</span></div> + <div class="quick-ref-item"><span class="cmd">upload</span><span class="desc">Upload file</span></div> + </div> + </div> + </section> + + <!-- ── Changelog ── --> + <section id="history"> + <h2>📋 Changelog</h2> + + <div class="version-item"> + <div class="v-header"><span class="v-num">v4.2 — May 2026</span><span class="v-date">2026-05-25</span></div> + <ul> + <li><strong>Editor</strong> — <code>edit <path></code> opens inline VFS editor modal</li> + <li><strong>Diff</strong> — <code>diff a b</code> LCS-based comparison + <code>diff --module</code></li> + <li><strong>Aliases</strong> — <code>ll</code>, <code>h</code>, <code>cls</code> defaults + custom alias definition</li> + <li><strong>File Finder</strong> — <code>find <query></code> recursive VFS search</li> + <li>Agent loop: capped at 5 turns (was 1), <code>edit_module</code> destructive confirmation, model auto-validation</li> + <li><code>ai-stop</code> now cancels chat + stream, not just tool calls</li> + <li>Unknown commands awaited, "Command not found" suppressed on AI route</li> + <li><code>loopResult</code> scope fix — no more undefined error on AI fail</li> + <li>Preview iframe allows JS (<code>allow-scripts</code>), cache bump <code>v=18</code></li> + <li>Splash fallback + startup modal list all 12 ext modules</li> + </ul> + </div> + + <div class="version-item"> + <div class="v-header"><span class="v-num">v4.1</span><span class="v-date">2026-05-23</span></div> + <ul> + <li>AI Agent with full tool-calling loop (15+ tools)</li> + <li>Inline destructive confirmation bar with 120s countdown timer</li> + <li>Skills system (8 CLI commands + UI modal)</li> + <li>Voice input (🎤 button, SpeechRecognition, show/hide toggle)</li> + <li>Sound notification (🔊 toggle, WebAudio ding)</li> + <li>AI spinner in status bar</li> + <li>Session system (save/load/recent/stats)</li> + <li>WebDAV sync (8 commands)</li> + <li>Web search (SearXNG + DDG + URL fetch/extract)</li> + <li>Config manager (6 commands + UI)</li> + <li>Startup modules selector (⚙ gear on splash)</li> + <li>Code editor modal (module editing, save & test live)</li> + <li>HTML preview via srcdoc (mobile)</li> + <li>File/dir autocomplete, pipe support</li> + <li>Smart context profiles, dynamic prompts with variables</li> + <li>Server monitor, ChatStudio overlay</li> + <li>Modular architecture: 23 JS modules, async loader</li> + </ul> + </div> + + <div class="version-item"> + <div class="v-header"><span class="v-num">v4.0</span><span class="v-date">2026-05-20</span></div> + <ul> + <li>Monolith refactored into core/ext modules</li> + <li>Async module loader with splash screen</li> + <li>Config manager modal</li> + <li>Bootloader fix for disabled modules</li> + </ul> + </div> + </section> +</main> + +<footer> + <div class="links"> + <a href="./index.html">Launch WebX11</a> + <a href="https://ollama.com" target="_blank">Ollama</a> + </div> + <p>WebX11 v4.2 · 2026</p> + <p class="tagline">Happy Hacking 🖥️🤖🎤</p> +</footer> + +<a href="#" class="back-top" id="backTop">↑</a> + +<script> +/* ── Back to Top ── */ +const bt = document.getElementById('backTop'); +window.addEventListener('scroll',()=>{bt.classList.toggle('visible',window.scrollY>300)}); + +/* ── Search ── */ +function searchDocs(){ + const q=document.getElementById('search-input').value.toLowerCase().trim(); + const msg=document.getElementById('search-result-msg'); + if(!q){msg.style.display='none';return} + const sections=document.querySelectorAll('section'); + let found=false; + sections.forEach(s=>{ + if(s.textContent.toLowerCase().includes(q)){ + s.scrollIntoView({behavior:'smooth'}); + s.style.border='2px solid var(--accent)';s.style.borderRadius='12px'; + s.style.padding='0 20px';s.style.transition='border .3s'; + setTimeout(()=>{s.style.border='none';s.style.padding='0'},2000); + found=true; + } + }); + if(!found){ + msg.textContent='No results for "'+q+'"'; + msg.style.display='block'; + setTimeout(()=>{msg.style.display='none'},3000); + }else{msg.style.display='none'} +} +document.getElementById('search-input').addEventListener('keypress',e=>{if(e.key==='Enter')searchDocs()}); + +/* ── Smooth scroll nav ── */ +document.querySelectorAll('.nav-link').forEach(l=>{ + l.addEventListener('click',e=>{ + e.preventDefault(); + const t=document.querySelector(l.getAttribute('href')); + if(t)t.scrollIntoView({behavior:'smooth'}); + }); +}); + +console.log('WebX11 v4.2 Docs — Modern'); +</script> +</body> +</html> |