63 lines
2.8 KiB
HTML
63 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Momento Web Clipper</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Vazirmatn:wght@400;600;700&display=swap" rel="stylesheet" />
|
|
<link rel="stylesheet" href="sidepanel.css" />
|
|
</head>
|
|
<body>
|
|
<div id="app" class="shell">
|
|
<header class="header">
|
|
<div class="brand">
|
|
<div class="brand-logo">M</div>
|
|
<div class="brand-text">
|
|
<span class="brand-name">Momento</span>
|
|
<span class="brand-sub">Web Clipper</span>
|
|
</div>
|
|
</div>
|
|
<div class="header-right">
|
|
<div id="connBadge" class="conn-badge" hidden>
|
|
<span class="conn-dot"></span>
|
|
<span id="connLabel">Connecté</span>
|
|
</div>
|
|
<button type="button" id="settingsBtn" class="icon-btn" title="Instance Momento" aria-label="Instance Momento">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div id="settingsPanel" class="settings-panel" hidden>
|
|
<label class="field">
|
|
<span>URL de votre instance Momento</span>
|
|
<input id="baseUrl" type="text" spellcheck="false" placeholder="http://localhost:3000" />
|
|
</label>
|
|
<div class="preset-row">
|
|
<button type="button" class="preset-btn" data-url="https://memento-note.com">Production</button>
|
|
<button type="button" class="preset-btn" data-url="http://localhost:3000">localhost:3000</button>
|
|
<button type="button" class="preset-btn" data-url="http://127.0.0.1:3000">127.0.0.1:3000</button>
|
|
</div>
|
|
<div class="settings-actions">
|
|
<button type="button" id="applyInstanceBtn" class="btn btn-primary btn-sm">Appliquer & reconnecter</button>
|
|
<button type="button" id="openLoginBtn" class="btn btn-secondary btn-sm">Ouvrir Momento ↗</button>
|
|
</div>
|
|
<p class="settings-hint">
|
|
Connectez-vous sur <strong>la même URL</strong> dans Chrome (Google OAuth). En dev, utilisez exactement
|
|
<code>http://localhost:3000</code> ou <code>http://127.0.0.1:3000</code> — pas un mélange des deux.
|
|
</p>
|
|
<p id="settingsStatus" class="settings-status" hidden></p>
|
|
</div>
|
|
|
|
<main id="screen" class="main"></main>
|
|
|
|
<footer class="footer">
|
|
<span class="footer-meta">Momento Web Clipper v0.3.0</span>
|
|
</footer>
|
|
</div>
|
|
<script src="sidepanel.js"></script>
|
|
</body>
|
|
</html>
|