139 lines
7.0 KiB
HTML
139 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Memos Clipper</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<link rel="stylesheet" href="popup.css" />
|
|
</head>
|
|
<body>
|
|
<!-- ── Loading ── -->
|
|
<div id="view-loading" class="view flex flex-col items-center justify-center p-8 space-y-4">
|
|
<div class="spinner animate-spin rounded-full h-8 w-8 border-b-2 border-emerald-500"></div>
|
|
<span class="text-gray-600">Extracting content…</span>
|
|
</div>
|
|
|
|
<!-- ── No settings ── -->
|
|
<div id="view-setup" class="view hidden p-6 text-center">
|
|
<div class="setup-box border border-dashed border-gray-300 rounded-lg p-6 flex flex-col items-center">
|
|
<div class="setup-icon text-gray-400 mb-4">
|
|
<svg class="w-12 h-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
|
|
</svg>
|
|
</div>
|
|
<p class="text-gray-700 mb-4 font-medium">Configure your Memos instance first.</p>
|
|
<button id="open-settings-btn" class="bg-emerald-500 hover:bg-emerald-600 text-white px-4 py-2 rounded shadow transition">Open Settings</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Main editor ── -->
|
|
<div id="view-main" class="view hidden">
|
|
<header class="flex items-center justify-between p-3 border-b border-gray-100 dark:border-gray-800 bg-white dark:bg-[#1a1a1f] sticky top-0 z-10">
|
|
<div class="logo flex items-center space-x-2 text-emerald-500">
|
|
<img src="icons/icon32.png" width="18" height="18" alt="Memos Logo">
|
|
<span id="page-title" class="page-title font-semibold text-gray-800 dark:text-gray-200 truncate max-w-[180px]">Clip to Memos</span>
|
|
</div>
|
|
<div class="header-actions flex space-x-1">
|
|
<button id="mode-toggle" class="mode-btn flex items-center space-x-1 px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-500 transition text-xs" title="Switch clip mode">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="13" height="13">
|
|
<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
|
|
</svg>
|
|
<span id="mode-label">Full page</span>
|
|
</button>
|
|
<button id="settings-btn" class="icon-btn p-1.5 rounded hover:bg-gray-100 text-gray-500 transition" title="Settings">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15">
|
|
<circle cx="12" cy="12" r="3"/>
|
|
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- tab bar -->
|
|
<div class="tabs">
|
|
<button class="tab active" data-tab="edit">Edit</button>
|
|
<button class="tab" data-tab="preview">Preview</button>
|
|
<div class="tab-indicator"></div>
|
|
</div>
|
|
|
|
<!-- edit panel -->
|
|
<div id="tab-edit" class="tab-panel flex flex-col h-96 border-b border-gray-100 dark:border-gray-800">
|
|
<textarea rows="14" id="md-editor" spellcheck="false" placeholder="Markdown content…" class="flex-1 w-full p-3 text-sm resize-none focus:outline-none focus:ring-1 focus:ring-emerald-100 dark:focus:ring-emerald-900/30 bg-transparent text-inherit"></textarea>
|
|
<div id="char-counter" class="char-counter text-right px-3 py-1 text-[10px] text-gray-400">0 chars</div>
|
|
</div>
|
|
|
|
<!-- preview panel -->
|
|
<div id="tab-preview" class="tab-panel hidden h-64 overflow-y-auto p-3 border-b border-gray-100 dark:border-gray-800">
|
|
<div id="md-preview" class="preview-body prose prose-sm dark:prose-invert max-w-none"></div>
|
|
</div>
|
|
|
|
<!-- images section -->
|
|
<div id="images-section">
|
|
<div class="images-header">
|
|
<span id="images-label">Images <span id="img-count" class="badge">0</span></span>
|
|
<label class="toggle-label">
|
|
<input type="checkbox" id="attach-images" checked />
|
|
upload as attachments
|
|
</label>
|
|
</div>
|
|
<div id="images-list"></div>
|
|
</div>
|
|
|
|
<!-- options row -->
|
|
<div id="options-row">
|
|
<label class="toggle-label" title="Remove hyperlinks from the clipped text, keeping only the link labels">
|
|
<input type="checkbox" id="strip-links" />
|
|
strip links
|
|
</label>
|
|
</div>
|
|
|
|
<!-- tag input -->
|
|
<div id="tags-row">
|
|
<input id="tags-input" type="text" placeholder="#tag1 #tag2 …" spellcheck="false" />
|
|
</div>
|
|
|
|
<!-- footer -->
|
|
<footer class="flex items-center justify-between p-3 bg-gray-50 dark:bg-[#22222a]">
|
|
<div class="footer-left">
|
|
<select id="visibility-select" class="text-xs border border-gray-200 dark:border-gray-700 rounded px-2 py-1 bg-white dark:bg-[#1a1a1f] text-inherit focus:outline-none focus:ring-1 focus:ring-emerald-400 transition">
|
|
<option value="PRIVATE">🔒 Private</option>
|
|
<option value="PROTECTED">🔗 Protected</option>
|
|
<option value="PUBLIC">🌐 Public</option>
|
|
</select>
|
|
</div>
|
|
<div class="footer-right flex space-x-2">
|
|
<button id="reload-btn" class="secondary-btn p-1.5 border border-gray-200 dark:border-gray-700 rounded hover:bg-white dark:hover:bg-gray-800 transition text-gray-500" title="Re-clip page">↺</button>
|
|
<button id="send-btn" class="send-btn bg-emerald-500 hover:bg-emerald-600 text-white px-4 py-1.5 rounded shadow flex items-center space-x-2 transition">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
|
|
<line x1="22" y1="2" x2="11" y2="13"/>
|
|
<polygon points="22 2 15 22 11 13 2 9 22 2"/>
|
|
</svg>
|
|
<span class="text-sm font-medium">Send to Memos</span>
|
|
</button>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- ── Success ── -->
|
|
<div id="view-success" class="view hidden">
|
|
<div class="success-box">
|
|
<div class="success-icon">✓</div>
|
|
<p>Memo saved!</p>
|
|
<a id="memo-link" href="#" target="_blank">Open in Memos →</a>
|
|
<button id="new-clip-btn" class="secondary-btn" style="margin-top:8px">Clip another</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Error ── -->
|
|
<div id="view-error" class="view hidden">
|
|
<div class="setup-box">
|
|
<div class="setup-icon err">✗</div>
|
|
<p id="error-msg">Something went wrong.</p>
|
|
<button id="retry-btn">Retry</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/popup.js" type="module"></script>
|
|
</body>
|
|
</html>
|