path: root/downloads/floatimg-buttons.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Floating Buttons Setup</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
      min-height: 100vh;
      padding: 40px 20px;
      color: #fff;
    }
    .container { max-width: 640px; margin: 0 auto; }
    h1 { text-align: center; margin-bottom: 10px; font-size: 1.8em; }
    h2 { margin: 35px 0 15px; font-size: 1.2em; color: #90EE90; }
    .subtitle { text-align: center; color: #888; margin-bottom: 30px; }

    .card {
      background: rgba(255,255,255,0.1);
      border: 1px solid transparent;
      border-radius: 12px;
      padding: 18px 20px;
      margin-bottom: 12px;
      cursor: pointer;
      transition: background 0.2s;
      display: flex;
      align-items: center;
      gap: 15px;
      user-select: none;
    }
    .card:hover { background: rgba(255,255,255,0.18); }
    .card:active { transform: scale(0.98); }
    .card.copied { background: rgba(76,175,80,0.35); border-color: #4CAF50; }

    .emoji { font-size: 1.8em; width: 50px; text-align: center; }
    .info { flex: 1; min-width: 0; }
    .label { font-size: 1.1em; font-weight: bold; margin-bottom: 5px; }
    .cmd {
      font-family: monospace;
      background: rgba(0,0,0,0.35);
      padding: 8px 12px;
      border-radius: 6px;
      font-size: 0.82em;
      color: #90EE90;
      word-break: break-all;
      white-space: pre-wrap;
    }
    .copy-icon { font-size: 1.3em; opacity: 0.4; }
    .card:hover .copy-icon { opacity: 1; }

    .btn-wide {
      background: #4CAF50;
      color: white;
      border: none;
      padding: 14px 30px;
      border-radius: 8px;
      font-size: 1.05em;
      cursor: pointer;
      width: 100%;
      margin-top: 15px;
      transition: background 0.2s;
    }
    .btn-wide:hover { background: #45a049; }
    .btn-wide:active { transform: scale(0.98); }

    .note {
      background: rgba(255,193,7,0.12);
      border-left: 4px solid #FFC107;
      padding: 14px 18px;
      border-radius: 0 8px 8px 0;
      margin: 20px 0;
      font-size: 0.92em;
      color: #ffe082;
    }

    .preview {
      background: rgba(0,0,0,0.25);
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 25px;
      text-align: center;
    }
    .preview-label { color: #888; margin-bottom: 14px; font-size: 0.9em; }
    .preview-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
    .preview-btn {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border: none;
      padding: 10px 16px;
      border-radius: 8px;
      font-size: 1.25em;
    }

    .toast {
      position: fixed;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%) translateY(120px);
      background: #4CAF50;
      color: white;
      padding: 12px 24px;
      border-radius: 8px;
      font-weight: bold;
      transition: transform 0.3s;
      z-index: 1000;
    }
    .toast.show { transform: translateX(-50%) translateY(0); }
  </style>
</head>
<body>
  <div class="container">
    <h1>👆 Floating Buttons Setup</h1>
    <p class="subtitle">Click a card to copy the command &nbsp;·&nbsp; paste it in the WebX11 terminal</p>

    <div class="preview">
      <div class="preview-label">Preview</div>
      <div class="preview-btns" id="previewBtns"></div>
    </div>

    <div class="note">
      ⚠️ <b>Note:</b> <code>clipboard-history</code> is <b>not</b> a real command in this system —
      that's why the 📋 button did nothing. It was replaced below with real, verified commands.
    </div>

    <h2>✅ Your Buttons (all verified working)</h2>
    <div id="cardsMain"></div>
    <button class="btn-wide" id="btnCopyMain">📋 Copy All Main Commands</button>

    <h2>💡 More Examples (all verified working)</h2>
    <div id="cardsMore"></div>
    <button class="btn-wide" id="btnCopyMore">📋 Copy All Example Commands</button>
  </div>

  <div class="toast" id="toast">Copied!</div>

  <script>
    // ── All commands below were verified against the system command list ──

    var MAIN_BUTTONS = [
      { emoji: '🆕', label: 'New Session',
        cmd: 'floating-add btn new-session "🆕" new-session' },
      { emoji: '✅', label: 'AI Allow',
        cmd: 'floating-add btn ai-allow "✅" ai-allow' },
      { emoji: '⚙️', label: 'AI Config (confirm-timeout 0)',
        cmd: 'floating-add btn config-timeout "⚙️" ai-config confirm-timeout 0' },
      { emoji: '🌐', label: 'WebDAV Browser',
        cmd: 'floating-add btn webdav-btn "🌐" webdav-browser' },
      { emoji: '📊', label: 'System Status',
        cmd: 'floating-add btn status-btn "📊" status' }
    ];

    var MORE_BUTTONS = [
      { emoji: '🩺', label: 'Health Check',
        cmd: 'floating-add btn health-btn "🩺" health-check' },
      { emoji: '🧹', label: 'Clear AI Context',
        cmd: 'floating-add btn ai-clear-btn "🧹" ai-clear' },
      { emoji: '⏹️', label: 'Stop AI Task',
        cmd: 'floating-add btn ai-stop-btn "⏹️" ai-stop' },
      { emoji: '🧠', label: 'Memory Usage',
        cmd: 'floating-add btn mem-btn "🧠" mem' },
      { emoji: '📦', label: 'List Modules',
        cmd: 'floating-add btn modules-btn "📦" modules' },
      { emoji: '🎨', label: 'Change Theme',
        cmd: 'floating-add btn theme-btn "🎨" theme' },
      { emoji: '💬', label: 'Chat Mode',
        cmd: 'floating-add btn chat-btn "💬" chat' },
      { emoji: '👥', label: 'List Agents',
        cmd: 'floating-add btn agents-btn "👥" agent-list' },
      { emoji: '🗂️', label: 'Kanban Board',
        cmd: 'floating-add btn kanban-btn "🗂️" kanban' },
      { emoji: '🔐', label: 'WebDAV Status',
        cmd: 'floating-add btn webdav-status-btn "🔐" webdav-status' },
      { emoji: '🧪', label: 'Run System Doctor',
        cmd: 'floating-add btn doctor-btn "🧪" doctor' },
      { emoji: '⏰', label: 'System Uptime',
        cmd: 'floating-add btn uptime-btn "⏰" uptime' }
    ];

    // ── Copy helpers (robust: clipboard API first, textarea fallback second) ──

    function fallbackCopy(text) {
      var ta = document.createElement('textarea');
      ta.value = text;
      ta.setAttribute('readonly', '');
      ta.style.position = 'fixed';
      ta.style.left = '-9999px';
      ta.style.top = '0';
      document.body.appendChild(ta);
      ta.focus();
      ta.select();
      var ok = false;
      try { ok = document.execCommand('copy'); } catch (e) { ok = false; }
      document.body.removeChild(ta);
      return ok;
    }

    function copyText(text) {
      return new Promise(function (resolve) {
        if (navigator.clipboard && window.isSecureContext) {
          navigator.clipboard.writeText(text).then(
            function () { resolve(true); },
            function () { resolve(fallbackCopy(text)); }
          );
        } else {
          resolve(fallbackCopy(text));
        }
      });
    }

    function showToast(msg) {
      var toast = document.getElementById('toast');
      toast.textContent = msg;
      toast.classList.add('show');
      setTimeout(function () { toast.classList.remove('show'); }, 2000);
    }

    function copyCard(el, cmd) {
      copyText(cmd).then(function (ok) {
        if (ok) {
          el.classList.add('copied');
          showToast('Copied! Paste in terminal');
          setTimeout(function () { el.classList.remove('copied'); }, 1500);
        } else {
          showToast('Copy failed — select the command text manually');
        }
      });
    }

    // ── Render cards from data (no inline onclick — avoids quote-escaping bugs) ──

    function renderCards(containerId, list) {
      var host = document.getElementById(containerId);
      list.forEach(function (b) {
        var card = document.createElement('div');
        card.className = 'card';

        var emoji = document.createElement('div');
        emoji.className = 'emoji';
        emoji.textContent = b.emoji;

        var info = document.createElement('div');
        info.className = 'info';
        var label = document.createElement('div');
        label.className = 'label';
        label.textContent = b.label;
        var cmd = document.createElement('div');
        cmd.className = 'cmd';
        cmd.textContent = b.cmd;   // textContent → no HTML escaping issues
        info.appendChild(label);
        info.appendChild(cmd);

        var icon = document.createElement('div');
        icon.className = 'copy-icon';
        icon.textContent = '📋';

        card.appendChild(emoji);
        card.appendChild(info);
        card.appendChild(icon);

        card.addEventListener('click', function () { copyCard(card, b.cmd); });
        host.appendChild(card);
      });
    }

    renderCards('cardsMain', MAIN_BUTTONS);
    renderCards('cardsMore', MORE_BUTTONS);

    // Preview strip
    var preview = document.getElementById('previewBtns');
    MAIN_BUTTONS.forEach(function (b) {
      var pb = document.createElement('div');
      pb.className = 'preview-btn';
      pb.textContent = b.emoji;
      preview.appendChild(pb);
    });

    // Copy-all buttons
    document.getElementById('btnCopyMain').addEventListener('click', function () {
      copyText(MAIN_BUTTONS.map(function (b) { return b.cmd; }).join('\n'))
        .then(function () { showToast('All main commands copied!'); });
    });
    document.getElementById('btnCopyMore').addEventListener('click', function () {
      copyText(MORE_BUTTONS.map(function (b) { return b.cmd; }).join('\n'))
        .then(function () { showToast('All example commands copied!'); });
    });
  </script>
</body>
</html>