Add Memos Clipper extension with Markdown content extraction and browser integration.
This commit is contained in:
135
src/popup.html
Normal file
135
src/popup.html
Normal file
@@ -0,0 +1,135 @@
|
||||
<!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-blue-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-blue-600 hover:bg-blue-700 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 bg-white sticky top-0 z-10">
|
||||
<div class="logo flex items-center space-x-2 text-blue-600">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
<polyline points="14 2 14 8 20 8"/>
|
||||
<line x1="16" y1="13" x2="8" y2="13"/>
|
||||
<line x1="16" y1="17" x2="8" y2="17"/>
|
||||
</svg>
|
||||
<span id="page-title" class="page-title font-semibold text-gray-800 truncate max-w-[180px]">Clip to Memos</span>
|
||||
</div>
|
||||
<div class="header-actions flex space-x-1">
|
||||
<button id="mode-toggle" class="icon-btn p-1.5 rounded hover:bg-gray-100 text-gray-500 transition" title="Switch clip mode">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15">
|
||||
<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>
|
||||
</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">
|
||||
<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-blue-100"></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">
|
||||
<div id="md-preview" class="preview-body prose prose-sm 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>
|
||||
|
||||
<!-- 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">
|
||||
<div class="footer-left">
|
||||
<select id="visibility-select" class="text-xs border border-gray-200 rounded px-2 py-1 bg-white focus:outline-none focus:ring-1 focus:ring-blue-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 rounded hover:bg-white transition text-gray-500" title="Re-clip page">↺</button>
|
||||
<button id="send-btn" class="send-btn bg-blue-600 hover:bg-blue-700 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="/marked.min.js" type="module"></script>
|
||||
<script src="/popup.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user