diff options
Diffstat (limited to 'main.html')
| -rw-r--r-- | main.html | 133 |
1 files changed, 131 insertions, 2 deletions
@@ -666,6 +666,132 @@ .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; } + + /* ── Floating UI Module ── */ + #floating-container { + position: fixed; + bottom: calc(50px + 25px + 8px); + right: 12px; + z-index: 500; + display: flex; + flex-direction: column-reverse; + align-items: flex-end; + gap: 6px; + pointer-events: none; + max-width: 280px; + } + .floating-btn { + pointer-events: auto; + background: var(--bg-tertiary); + border: 1px solid var(--border-color); + color: var(--text-color); + padding: 8px 14px; + border-radius: 8px; + font-family: inherit; + font-size: 0.9em; + cursor: pointer; + display: flex; + align-items: center; + gap: 6px; + white-space: nowrap; + touch-action: manipulation; + min-height: 44px; + box-shadow: 0 2px 8px rgba(0,0,0,0.4); + transition: border-color 0.15s, background 0.15s; + user-select: none; + } + .floating-btn:hover, + .floating-btn:active { + border-color: var(--accent-color); + background: #0a1a0a; + } + .floating-menu { + pointer-events: auto; + background: var(--bg-tertiary); + border: 1px solid var(--border-color); + border-radius: 8px; + overflow: hidden; + min-width: 140px; + box-shadow: 0 2px 12px rgba(0,0,0,0.5); + } + .floating-menu-header { + padding: 8px 14px; + cursor: pointer; + display: flex; + align-items: center; + gap: 8px; + font-size: 0.9em; + min-height: 44px; + touch-action: manipulation; + user-select: none; + border-bottom: 1px solid var(--border-color); + } + .floating-menu-header:hover { + background: #0a1a0a; + } + .floating-menu-header .arrow { + transition: transform 0.2s; + font-size: 0.7em; + } + .floating-menu-header .arrow.collapsed { + transform: rotate(-90deg); + } + .floating-menu-body { + overflow: hidden; + transition: max-height 0.2s ease-out; + max-height: 0; + } + .floating-menu-body.expanded { + max-height: 300px; + } + .floating-menu-btn { + display: block; + width: 100%; + text-align: left; + padding: 8px 14px 8px 24px; + background: transparent; + border: none; + color: var(--text-muted); + font-family: inherit; + font-size: 0.85em; + cursor: pointer; + touch-action: manipulation; + min-height: 40px; + } + .floating-menu-btn:hover, + .floating-menu-btn:active { + background: #0a1a0a; + color: var(--text-color); + } + .floating-panel { + pointer-events: auto; + background: var(--bg-secondary); + border: 1px solid var(--border-color); + border-radius: 8px; + padding: 8px 14px; + font-size: 0.8em; + min-width: 120px; + box-shadow: 0 2px 8px rgba(0,0,0,0.4); + } + .floating-panel-title { + font-weight: bold; + color: var(--text-muted); + margin-bottom: 4px; + font-size: 0.9em; + } + .floating-panel-content { + color: var(--text-color); + line-height: 1.4; + } + @keyframes float-in { + from { opacity: 0; transform: translateY(8px) scale(0.95); } + to { opacity: 1; transform: translateY(0) scale(1); } + } + .floating-btn, + .floating-menu, + .floating-panel { + animation: float-in 0.15s ease-out; + } </style> </head> <body> @@ -718,6 +844,9 @@ <div class="output-line info loading" id="loading-indicator">Loading modules...</div> </div> + <!-- Floating UI Container — populated by FloatingModule --> + <div id="floating-container"></div> + <!-- AI Confirm Area — fixed outside scrollable output, always visible --> <div id="ai-confirm-area" class="hidden"></div> @@ -1058,7 +1187,7 @@ var mods = [ ['Foundation (always loaded)', ['virtual-fs.js','module-manager.js','ollama-manager.js','terminal.js'], true], ['Built-in modules', ['module-system.js','module-fs.js','module-modmgr.js','module-ollama.js','module-my.js','module-searxng.js','module-servermon.js','module-ollamamodels.js','module-config.js','module-simplegui.js','module-io.js','module-dynamicprompts.js','module-aiassist.js','module-aiasm.js','module-smartctx.js','module-duckduckgo.js','module-fetcher.js','module-skills.js','module-chatstudio.js'], false], - ['Extensions', ['calc.js','voice.js','cron.js','theme.js','wpm.js','mindmap.js','webdav.js','skill-pack-core.js','editor.js','diff.js','alias.js','finder.js','filemgr.js','cryptogzip.js','tutorial.js','shell.js','busybox.js'], false] + ['Extensions', ['calc.js','voice.js','cron.js','theme.js','wpm.js','mindmap.js','webdav.js','skill-pack-core.js','editor.js','diff.js','alias.js','finder.js','filemgr.js','cryptogzip.js','tutorial.js','shell.js','busybox.js','floating.js'], false] ]; var isSel = function(name) { return true; }; // default: all selected mods.forEach(function(section) { @@ -1095,7 +1224,7 @@ </script> <!-- Async dependency-ordered module loader (replaces 26 synchronous script tags) --> - <script src="modules/core/module-loader.js?v=2026-06-07-v4.5.13"></script> + <script src="modules/core/module-loader.js?v=2026-06-08-v4.5.22"></script> <script> // ═══ ONE TRUE VERSION SOURCE ═══ |