mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 16:02:26 +00:00
google-labs-jules[bot]
6e21247505
- Adds --z-modal-always-top: 200 token in css/tokens.css - Adds .modal-always-on-top utility class in css/tailwind.source.css - Applies class to EventDetailsModal, EmbedVideoModal, and ShareNostrModal
128 lines
4.1 KiB
HTML
128 lines
4.1 KiB
HTML
<!-- components/share-nostr-modal.html -->
|
|
<div
|
|
id="shareNostrModal"
|
|
class="bv-modal modal-always-on-top hidden items-start justify-center md:items-center"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="shareNostrModalTitle"
|
|
aria-describedby="shareNostrModalDescription"
|
|
data-ds="new"
|
|
>
|
|
<div class="bv-modal-backdrop" data-dismiss></div>
|
|
|
|
<div class="modal-sheet max-h-modal-shell overflow-hidden flex flex-col w-full max-w-2xl" tabindex="-1">
|
|
<div class="modal-header">
|
|
<h2 id="shareNostrModalTitle" class="text-xl font-bold text-text">
|
|
Share on Nostr
|
|
</h2>
|
|
<button
|
|
id="closeShareNostrModal"
|
|
class="modal-close"
|
|
type="button"
|
|
aria-label="Close share modal"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-6 w-6"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M6 18L18 6M6 6l12 12"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="modal-body space-y-6 overflow-y-auto flex-1 min-h-0 custom-scrollbar p-6">
|
|
<p id="shareNostrModalDescription" class="text-sm text-muted">
|
|
Publish a short note and thumbnail preview to your preferred Nostr relays.
|
|
</p>
|
|
|
|
<div class="space-y-2">
|
|
<label for="shareNostrContent" class="block text-sm font-medium text-text">
|
|
Post content
|
|
</label>
|
|
<textarea
|
|
id="shareNostrContent"
|
|
rows="6"
|
|
class="textarea"
|
|
placeholder="Write your message"
|
|
></textarea>
|
|
</div>
|
|
|
|
<div class="space-y-3 rounded-lg border border-border bg-panel/50 p-4">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-xs font-semibold uppercase tracking-wide text-muted">
|
|
Preview
|
|
</span>
|
|
<a
|
|
id="shareNostrPreviewUrl"
|
|
class="text-xs text-accent hover:underline break-all"
|
|
href="#"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
--
|
|
</a>
|
|
</div>
|
|
<div class="flex items-start gap-4">
|
|
<div class="h-16 w-24 rounded-md border border-border bg-surface-alt overflow-hidden flex items-center justify-center">
|
|
<img
|
|
id="shareNostrPreviewThumbnail"
|
|
class="h-full w-full object-cover hidden"
|
|
alt="Video thumbnail preview"
|
|
/>
|
|
<span
|
|
id="shareNostrPreviewFallback"
|
|
class="text-xs text-muted text-center px-2"
|
|
>
|
|
No thumbnail
|
|
</span>
|
|
</div>
|
|
<div class="flex-1 space-y-1 min-w-0">
|
|
<p id="shareNostrPreviewTitle" class="text-sm font-semibold text-text truncate">
|
|
--
|
|
</p>
|
|
<p id="shareNostrPreviewMeta" class="text-xs text-muted truncate">
|
|
--
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<label for="shareNostrRelays" class="block text-sm font-medium text-text">
|
|
Relays to post to
|
|
</label>
|
|
<input
|
|
id="shareNostrRelays"
|
|
type="text"
|
|
class="input"
|
|
placeholder="wss://relay.example, wss://relay.example2"
|
|
/>
|
|
<p class="text-xs text-muted">
|
|
Separate relay URLs with commas. The list defaults to your write relays.
|
|
</p>
|
|
<div id="shareNostrRelayPills" class="flex flex-wrap gap-2"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer flex flex-col gap-3 border-t border-border bg-panel/30 p-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<p id="shareNostrStatus" class="text-xs text-muted" role="status" aria-live="polite"></p>
|
|
<div class="flex items-center gap-3">
|
|
<button id="cancelShareNostr" type="button" class="btn-ghost">
|
|
Cancel
|
|
</button>
|
|
<button id="postShareNostr" type="button" class="btn-primary">
|
|
Post
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|