popup.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <style> 6 * { margin: 0; padding: 0; box-sizing: border-box; } 7 body { 8 width: 280px; 9 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 10 font-size: 13px; 11 color: #333; 12 background: #fff; 13 padding: 16px; 14 } 15 .header { 16 display: flex; 17 align-items: center; 18 gap: 8px; 19 margin-bottom: 14px; 20 } 21 .header img { width: 24px; height: 24px; } 22 .header h1 { font-size: 15px; font-weight: 600; } 23 .status-row { 24 display: flex; 25 align-items: center; 26 gap: 8px; 27 padding: 10px 12px; 28 border-radius: 8px; 29 background: #f5f5f5; 30 } 31 .dot { 32 width: 8px; height: 8px; 33 border-radius: 50%; 34 flex-shrink: 0; 35 } 36 .dot.connected { background: #34c759; } 37 .dot.disconnected { background: #ff3b30; } 38 .dot.connecting { background: #ff9500; } 39 .status-text { font-size: 13px; color: #555; } 40 .status-text strong { color: #333; } 41 .hint { 42 margin-top: 10px; 43 padding: 8px 10px; 44 border-radius: 6px; 45 background: #f0f4ff; 46 font-size: 11px; 47 color: #666; 48 line-height: 1.5; 49 display: none; 50 } 51 .hint code { 52 background: #e8ecf1; 53 padding: 1px 4px; 54 border-radius: 3px; 55 font-size: 11px; 56 } 57 .footer { 58 margin-top: 14px; 59 text-align: center; 60 font-size: 11px; 61 color: #999; 62 } 63 .footer a { color: #007aff; text-decoration: none; } 64 .footer a:hover { text-decoration: underline; } 65 </style> 66 </head> 67 <body> 68 <div class="header"> 69 <img src="icons/icon-48.png" alt="OpenCLI"> 70 <h1>OpenCLI</h1> 71 </div> 72 <div class="status-row"> 73 <span class="dot disconnected" id="dot"></span> 74 <span class="status-text" id="status">Checking...</span> 75 </div> 76 <div class="hint" id="hint"> 77 This is normal. The extension connects automatically when you run any <code>opencli</code> command. 78 </div> 79 <div class="footer"> 80 <a href="https://github.com/jackwener/opencli" target="_blank">Documentation</a> 81 </div> 82 <script src="popup.js"></script> 83 </body> 84 </html>