bruno
ea19d1d050
- bouton flottant rond (44px), semi-transparent blur, hover plus fonce, deplacable souris (pos persistee storage) - option afficher/cacher dans popup extension (showButton) - clipper: notification instantanee des onglets FlowDeck via tabs.sendMessage + polling 15s + BroadcastChannel + visibilitychange - fix bookmark template literal '+title+' -> \/\/\/\/\ (_page_editor_scripts.html) - sync static/extension + zip
54 lines
2.8 KiB
HTML
54 lines
2.8 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
*{box-sizing:border-box;margin:0;padding:0}
|
|
body{font-family:system-ui,sans-serif;width:340px;padding:16px;background:#191919;color:#e0e0e0}
|
|
h2{font-size:15px;margin-bottom:6px}
|
|
.desc{font-size:12px;color:#999;margin-bottom:12px;line-height:1.4}
|
|
label{font-size:11px;color:#999;text-transform:uppercase;letter-spacing:.5px;display:block;margin-top:10px;margin-bottom:4px}
|
|
input{width:100%;background:#2a2a2a;border:1px solid #3a3a3a;border-radius:6px;color:#fff;padding:8px 10px;font-size:13px;outline:none}
|
|
input:focus{border-color:#2383E2}
|
|
.btn{width:100%;margin-top:12px;padding:9px;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer}
|
|
.btn-primary{background:#2383E2;color:#fff}
|
|
.btn-secondary{background:#2a2a2a;color:#ccc;border:1px solid #3a3a3a}
|
|
.btn:active{opacity:.9}
|
|
.row{display:flex;gap:8px;margin-top:10px}
|
|
.row .btn{flex:1}
|
|
.status{margin-top:10px;padding:8px 10px;border-radius:6px;font-size:12px;display:none}
|
|
.status.ok{background:rgba(46,160,67,.15);color:#2ea043;display:block}
|
|
.status.err{background:rgba(224,62,62,.15);color:#e03e3e;display:block}
|
|
.status.warn{background:rgba(217,115,13,.15);color:#d9730d;display:block}
|
|
.small{font-size:11px;color:#777;margin-top:6px}
|
|
a{color:#2383E2;text-decoration:none}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>📌 FlowDeck Clipper</h2>
|
|
<p class="desc">Capture any page into FlowDeck in one click.</p>
|
|
|
|
<div class="row">
|
|
<button class="btn btn-primary" id="clipArticle">Clip article</button>
|
|
<button class="btn btn-secondary" id="clipBookmark">Bookmark</button>
|
|
</div>
|
|
<button class="btn btn-secondary" id="clipSelection" style="margin-top:8px;">Clip selection</button>
|
|
|
|
<label>FlowDeck server URL</label>
|
|
<input id="serverUrl" placeholder="http://localhost:8080">
|
|
|
|
<label>Bearer token <span style="text-transform:none;color:#666">(Settings → API tokens)</span></label>
|
|
<input id="token" placeholder="fd_... or fd_clip_..." type="password">
|
|
<div style="display:flex;gap:6px;margin-top:6px">
|
|
<button class="btn btn-secondary" id="save" style="flex:1;padding:7px;font-size:12px;">Save</button>
|
|
<button class="btn btn-secondary" id="verify" style="flex:1;padding:7px;font-size:12px;">Verify</button>
|
|
</div>
|
|
<label style="display:flex;align-items:center;gap:8px;margin-top:12px;cursor:pointer;text-transform:none;letter-spacing:0;font-size:13px;color:#e0e0e0"><input type="checkbox" id="showButton" style="width:auto;accent-color:#2383E2"> Afficher le bouton flottant sur les pages</label>
|
|
<p class="small" style="margin-left:22px">Rond, semi-transparent, déplaçable à la souris.</p>
|
|
<div id="status" class="status"></div>
|
|
<p class="small">Need a token? Open <a href="#" id="openFlowDeck">FlowDeck → Settings → API tokens</a> or <a href="#" id="openExtensions">Extensions</a>.</p>
|
|
|
|
<script src="popup.js"></script>
|
|
</body>
|
|
</html>
|