135 lines
5.2 KiB
HTML
135 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Memos Clipper</title>
|
|
<link rel="stylesheet" href="popup.css" />
|
|
</head>
|
|
<body>
|
|
<!-- ── Loading ── -->
|
|
<div id="view-loading" class="view">
|
|
<div class="spinner"></div>
|
|
<span>Extracting content…</span>
|
|
</div>
|
|
|
|
<!-- ── No settings ── -->
|
|
<div id="view-setup" class="view hidden">
|
|
<div class="setup-box">
|
|
<div class="setup-icon">
|
|
<svg 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>Configure your Memos instance first.</p>
|
|
<button id="open-settings-btn">Open Settings</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Main editor ── -->
|
|
<div id="view-main" class="view hidden">
|
|
<header>
|
|
<div class="logo">
|
|
<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">Clip to Memos</span>
|
|
</div>
|
|
<div class="header-actions">
|
|
<button id="mode-toggle" class="icon-btn" 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" 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">
|
|
<textarea id="md-editor" spellcheck="false" placeholder="Markdown content…"></textarea>
|
|
<div id="char-counter" class="char-counter">0 chars</div>
|
|
</div>
|
|
|
|
<!-- preview panel -->
|
|
<div id="tab-preview" class="tab-panel hidden">
|
|
<div id="md-preview" class="preview-body"></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>
|
|
<div class="footer-left">
|
|
<select id="visibility-select">
|
|
<option value="PRIVATE">🔒 Private</option>
|
|
<option value="PROTECTED">🔗 Protected</option>
|
|
<option value="PUBLIC">🌐 Public</option>
|
|
</select>
|
|
</div>
|
|
<div class="footer-right">
|
|
<button id="reload-btn" class="secondary-btn" title="Re-clip page">↺</button>
|
|
<button id="send-btn" class="send-btn">
|
|
<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>
|
|
Send to Memos
|
|
</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"></script>
|
|
<script src="popup.js"></script>
|
|
</body>
|
|
</html>
|