Fifth library variant that keeps folder sync for offline/local use AND adds Nostr relay sync for cross-device reach via WebSocket. Both transports run simultaneously - writes go to folder AND Nostr, sync imports from both and bridges events between them. Works from file:// since Nostr uses WebSocket (not fetch/WebRTC). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
44 lines
1.9 KiB
HTML
44 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>paste — Nostr + Folder</title>
|
|
<link rel="stylesheet" href="../styles.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>paste <span id="variant-label" class="variant">nostr</span></h1>
|
|
<p class="sub">type text + enter, or paste an image — use #hashtags to add tags</p>
|
|
<div class="folder-bar">
|
|
<button id="select-folder" class="folder-btn">Select sync folder</button>
|
|
<span id="folder-status" class="status"></span>
|
|
</div>
|
|
<div class="folder-bar" style="margin-top:6px">
|
|
<input type="text" id="room-input" placeholder="room key" autocomplete="off"
|
|
style="padding:6px 10px;border:1px solid #555;border-radius:6px;background:#1e1e2e;color:#cdd6f4;font-size:0.85rem;width:180px">
|
|
<button id="join-room" class="folder-btn">Join room</button>
|
|
<span id="nostr-status" class="status"></span>
|
|
</div>
|
|
</header>
|
|
<main>
|
|
<div class="input-area">
|
|
<div class="input-row">
|
|
<input type="text" id="paste-input"
|
|
placeholder="type something and press Enter, or Ctrl+V an image"
|
|
autocomplete="off" spellcheck="false">
|
|
<button class="clip-btn" id="clip-btn" title="Attach a file">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/>
|
|
</svg>
|
|
</button>
|
|
<input type="file" id="file-input" hidden>
|
|
</div>
|
|
<div id="status" class="status"></div>
|
|
</div>
|
|
<div id="items" class="items"></div>
|
|
</main>
|
|
<script type="module" src="./app.ts"></script>
|
|
</body>
|
|
</html>
|