73 lines
4.0 KiB
HTML
73 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<style>
|
|
* { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
|
|
body { width: 350px; margin: 0; padding: 14px; background: #1a1a1a; color: #f3f4f6; }
|
|
.header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #333; }
|
|
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: #fff; }
|
|
.logo { width: 24px; height: 24px; border-radius: 6px; background: #00a82d; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; }
|
|
.gear-btn { background: none; border: none; color: #9ca3af; cursor: pointer; font-size: 12px; text-decoration: underline; }
|
|
.gear-btn:hover { color: #fff; }
|
|
label { display: block; font-size: 11px; font-weight: 600; color: #9ca3af; margin-bottom: 4px; margin-top: 10px; }
|
|
input, select, textarea { width: 100%; padding: 7px 9px; border-radius: 6px; border: 1px solid #374151; background: #262626; color: #fff; font-size: 12px; outline: none; }
|
|
input:focus, select:focus, textarea:focus { border-color: #00a82d; }
|
|
.modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 4px; }
|
|
.mode-btn { padding: 6px 4px; font-size: 11px; font-weight: 600; border-radius: 6px; border: 1px solid #374151; background: #262626; color: #d1d5db; cursor: pointer; text-align: center; }
|
|
.mode-btn.active { background: #00a82d; border-color: #00a82d; color: #fff; }
|
|
.save-btn { width: 100%; margin-top: 14px; padding: 9px; border-radius: 8px; border: none; background: #00a82d; color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; }
|
|
.save-btn:hover { background: #008f26; }
|
|
.save-btn:disabled { opacity: 0.5; cursor: wait; }
|
|
.status { margin-top: 10px; font-size: 12px; padding: 8px; border-radius: 6px; display: none; }
|
|
.status.ok { display: block; background: rgba(0, 168, 45, 0.2); border: 1px solid #00a82d; color: #86efac; }
|
|
.status.err { display: block; background: rgba(220, 38, 38, 0.2); border: 1px solid #dc2626; color: #fca5a5; }
|
|
#settingsPanel { display: none; margin-bottom: 12px; padding: 10px; background: #242424; border: 1px solid #374151; border-radius: 8px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<div class="brand">
|
|
<div class="logo">E</div>
|
|
<span>Everclone Web Clipper</span>
|
|
</div>
|
|
<button type="button" id="toggleSettings" class="gear-btn">Settings</button>
|
|
</div>
|
|
|
|
<div id="settingsPanel">
|
|
<label style="margin-top:0">Everclone Server URL</label>
|
|
<input type="url" id="serverUrl" placeholder="https://everclone.vloser.us" />
|
|
<label>API Key</label>
|
|
<input type="password" id="apiKey" placeholder="evc_..." />
|
|
<button type="button" id="saveSettingsBtn" class="save-btn" style="margin-top:8px; padding:6px; font-size:11px;">Save Connection</button>
|
|
</div>
|
|
|
|
<label style="margin-top:0">Title</label>
|
|
<input type="text" id="noteTitle" placeholder="Page title" />
|
|
|
|
<label>Clip Format</label>
|
|
<div class="modes">
|
|
<button type="button" class="mode-btn active" data-mode="article">Article</button>
|
|
<button type="button" class="mode-btn" data-mode="selection">Selection</button>
|
|
<button type="button" class="mode-btn" data-mode="full">Full Page</button>
|
|
<button type="button" class="mode-btn" data-mode="bookmark">Bookmark</button>
|
|
</div>
|
|
|
|
<label>Notebook</label>
|
|
<select id="notebookSelect">
|
|
<option value="Web Clips">Web Clips</option>
|
|
<option value="Inbox">Inbox</option>
|
|
</select>
|
|
|
|
<label>Tags (comma-separated)</label>
|
|
<input type="text" id="noteTags" value="web-clip" />
|
|
|
|
<label>Add Remark / Note (optional)</label>
|
|
<textarea id="noteComment" rows="2" placeholder="Add your thoughts..."></textarea>
|
|
|
|
<button type="button" id="clipBtn" class="save-btn">Save Clip to Everclone</button>
|
|
<div id="statusBox" class="status"></div>
|
|
|
|
<script src="popup.js"></script>
|
|
</body>
|
|
</html> |