haiany
/
QMAI
espejo de https://github.com/Mochocyang/QMAI.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
							<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body {
      width: 480px;
      height: 500px;
      max-height: 500px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 13px;
      color: #1a1a2e;
      background: #fafafa;
      overflow: hidden !important;
    }
    .header {
      padding: 12px 16px;
      background: #1a1a2e;
      color: white;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .header h1 { font-size: 14px; font-weight: 600; }
    .header .icon { font-size: 18px; }
    .content { padding: 12px 16px; }
    .status {
      padding: 8px 12px;
      border-radius: 6px;
      font-size: 12px;
      margin-bottom: 10px;
    }
    .status.connected { background: #ecfdf5; color: #065f46; }
    .status.disconnected { background: #fef2f2; color: #991b1b; }
    .status.sending { background: #eff6ff; color: #1e40af; }
    .status.success { background: #ecfdf5; color: #065f46; }
    .status.error { background: #fef2f2; color: #991b1b; }
    .field { margin-bottom: 8px; }
    .field label {
      display: block;
      font-size: 11px;
      font-weight: 600;
      color: #6b7280;
      text-transform: uppercase;
      margin-bottom: 3px;
    }
    .field input, .field select {
      width: 100%;
      padding: 6px 8px;
      border: 1px solid #e5e7eb;
      border-radius: 6px;
      font-size: 13px;
      font-family: inherit;
      outline: none;
      background: white;
    }
    .field input:focus, .field select:focus {
      border-color: #6366f1;
      box-shadow: 0 0 0 2px rgba(99,102,241,0.1);
    }
    .field select { cursor: pointer; }
    .url-preview {
      padding: 4px 8px;
      background: #f3f4f6;
      border-radius: 4px;
      font-size: 11px;
      color: #6b7280;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #contentPreview {
      padding: 10px;
      background: #f3f4f6;
      border: 1px solid #e5e7eb;
      border-radius: 6px;
      font-size: 12px;
      color: #374151;
      line-height: 1.6;
      max-height: 260px;
      overflow-y: auto;
      white-space: pre-wrap;
      word-break: break-word;
    }
    #contentPreview::-webkit-scrollbar { width: 8px; }
    #contentPreview::-webkit-scrollbar-track { background: #f3f4f6; border-radius: 0 6px 6px 0; }
    #contentPreview::-webkit-scrollbar-thumb { background: #c5c5c5; border-radius: 4px; }
    #contentPreview::-webkit-scrollbar-thumb:hover { background: #999; }
    .btn {
      width: 100%;
      padding: 10px;
      border: none;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s;
      margin-top: 10px;
    }
    .btn-primary { background: #4f46e5; color: white; }
    .btn-primary:hover { background: #4338ca; }
    .btn-primary:disabled { background: #9ca3af; cursor: not-allowed; }
    .footer {
      padding: 6px 16px;
      border-top: 1px solid #e5e7eb;
      font-size: 10px;
      color: #9ca3af;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="header">
    <span class="icon">📚</span>
    <h1>LLM Wiki Clipper</h1>
  </div>

  <div class="content">
    <div id="statusBar" class="status disconnected">Checking connection...</div>

    <div class="field">
      <label>Save to Project</label>
      <select id="projectSelect">
        <option value="">Loading projects...</option>
      </select>
    </div>

    <div class="field">
      <label>Title</label>
      <input type="text" id="titleInput" placeholder="Page title">
    </div>

    <div class="field">
      <label>URL</label>
      <div class="url-preview" id="urlPreview">—</div>
    </div>

    <div class="field">
      <label>Content Preview</label>
      <div id="contentPreview">Extracting content...</div>
    </div>

    <button class="btn btn-primary" id="clipBtn" disabled>
      📎 Clip to Wiki
    </button>
  </div>

  <div class="footer">
    Content will be saved and auto-ingested into your wiki
  </div>

  <script src="popup.js"></script>
</body>
</html>