diff options
Diffstat (limited to 'main.html')
| -rw-r--r-- | main.html | 73 |
1 files changed, 70 insertions, 3 deletions
@@ -567,6 +567,35 @@ .mod-card { padding: 10px 6px; } .mod-card .mod-name { font-size: 0.82em; } } + /* ── Command Cards Panel ── */ + #cmd-cards { + position: fixed; right: 0; top: 48px; bottom: 0; width: 280px; + background: var(--bg-secondary); border-left: 1px solid var(--border-color); + z-index: 999; display: none; flex-direction: column; + backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); + overflow-y: auto; + } + #cmd-cards.visible { display: flex; } + #cmd-cards-header { + display: flex; justify-content: space-between; align-items: center; + padding: 12px 14px; border-bottom: 1px solid var(--border-color); + font-weight: bold; font-size: 0.9em; + position: sticky; top: 0; background: var(--bg-secondary); + } + .cmd-card-section { padding: 10px 14px; } + .cmd-card-section + .cmd-card-section { border-top: 1px solid var(--border-color); } + .cmd-card-section-title { font-size: 0.75em; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; } + .cmd-card { + display: flex; align-items: center; gap: 10px; + padding: 10px 12px; margin-bottom: 4px; + background: var(--bg-tertiary); border: 1px solid var(--border-color); + border-radius: 6px; cursor: pointer; transition: border-color .15s; + min-height: 44px; touch-action: manipulation; + } + .cmd-card:hover { border-color: var(--accent-color); } + .cmd-card .cmd { font-family: var(--font-primary); font-weight: bold; font-size: 0.85em; color: var(--accent-color); flex-shrink: 0; min-width: 60px; } + .cmd-card .desc { font-size: 0.78em; color: var(--text-muted); } + #cmd-cards-toggle { cursor: pointer; font-size: 1.1em; line-height: 1; } </style> </head> <body> @@ -576,10 +605,43 @@ <span class="header-version">v4.2</span> </div> <div id="header-status" class="status-pill">Mem: --</div> + <span id="cmd-cards-toggle" onclick="if(webx11)webx11.toggleCmdCards()" title="Quick Commands (Ctrl+K)">📋</span> </header> + <!-- Command Cards Panel --> + <div id="cmd-cards"> + <div id="cmd-cards-header"> + <span>📋 Quick Commands</span> + <span onclick="if(webx11)webx11.toggleCmdCards()" style="cursor:pointer;font-size:1.2em;">✕</span> + </div> + <div class="cmd-card-section"> + <div class="cmd-card-section-title">🟢 Beginners</div> + <div class="cmd-card" onclick="webx11?.executeCommand('help')"><span class="cmd">help</span><span class="desc">Show all commands</span></div> + <div class="cmd-card" onclick="webx11?.executeCommand('ls')"><span class="cmd">ls</span><span class="desc">List files</span></div> + <div class="cmd-card" onclick="webx11?.executeCommand('clear')"><span class="cmd">clear</span><span class="desc">Clear terminal</span></div> + <div class="cmd-card" onclick="webx11?.executeCommand('status')"><span class="cmd">status</span><span class="desc">System health</span></div> + </div> + <div class="cmd-card-section"> + <div class="cmd-card-section-title">🤖 AI</div> + <div class="cmd-card" onclick="webx11?.executeCommand('ai \"what can you do?\"')"><span class="cmd">ai "..."</span><span class="desc">Ask AI assistant</span></div> + <div class="cmd-card" onclick="webx11?.executeCommand('ai-model')"><span class="cmd">ai-model</span><span class="desc">Set AI model</span></div> + </div> + <div class="cmd-card-section"> + <div class="cmd-card-section-title">🔍 Explore</div> + <div class="cmd-card" onclick="webx11?.executeCommand('modules')"><span class="cmd">modules</span><span class="desc">List loaded modules</span></div> + <div class="cmd-card" onclick="webx11?.executeCommand('tutorial')"><span class="cmd">tutorial</span><span class="desc">Interactive tour</span></div> + </div> + <div class="cmd-card-section"> + <div class="cmd-card-section-title">🚀 Advanced</div> + <div class="cmd-card" onclick="webx11?.executeCommand('cron-every 60 echo hello')"><span class="cmd">cron</span><span class="desc">Schedule tasks</span></div> + <div class="cmd-card" onclick="webx11?.executeCommand('webdav-status')"><span class="cmd">webdav</span><span class="desc">Cloud sync</span></div> + <div class="cmd-card" onclick="webx11?.executeCommand('help.html')"><span class="cmd">help</span><span class="desc">Full reference</span></div> + </div> + </div> + + <!-- Terminal Container --> <div id="terminal-container"> -<div class="output-line info">WebX11 Module System v4.2 - Unix-like Terminal</div> + <div class="output-line info">WebX11 Module System v4.2 - Unix-like Terminal</div> <div class="output-line info">Commands: ls, cd, pwd, cat, echo, rm, mkdir, mv, cp, touch, tree, find, grep</div> <div class="output-line info">Type 'help' for all commands</div> <div class="output-line"></div> @@ -708,10 +770,11 @@ <span style="color:var(--warning-color);">Disable on slow connections or when browser becomes unresponsive during long outputs.</span> </div> <hr style="border-color:var(--border-color); margin: 15px 0;"> - <h4 style="color: var(--info-color); margin-bottom: 10px;">🔍 Validator Agent (Future)</h4> + <h4 style="color: var(--info-color); margin-bottom: 10px;">🔍 Validator Agent</h4> <div style="font-size:0.85em; color:var(--text-muted); margin-bottom: 10px;"> A separate lightweight AI that validates the main agent's tool results. Has its own - endpoint and model — independent from your active AI model. + endpoint and model — independent from your active AI model.<br> + <span style="color:var(--success-color);">⚡ Best validator model: <strong>qwen2.5:0.5b</strong> (1.94s, 352MB)</span> </div> <div style="display:flex; align-items:center; gap:10px; margin-bottom: 10px;"> <span style="color:var(--text-muted); font-size:0.85em;">Enable Validator:</span> @@ -862,6 +925,10 @@ Skip — I'll explore </button> </div> + <label style="display:flex;align-items:center;justify-content:center;gap:6px;margin-top:14px;font-size:0.78em;color:var(--text-muted);cursor:pointer;"> + <input type="checkbox" id="welcome-dont-show" onchange="if(this.checked)localStorage.setItem('webx11_welcome_dismissed','1');else localStorage.removeItem('webx11_welcome_dismissed')"> + Don't show this again + </label> <p style="font-size:0.78em;color:var(--text-muted);margin-top:16px;"> Your progress is saved. Type <code>tutorial</code> anytime to resume. </p> |