253 lines
12 KiB
HTML
253 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-bs-theme="dark">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Nostr Poster - Content Manager</title>
|
|
|
|
<!-- Bootstrap & CSS -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<link rel="stylesheet" href="/assets/css/style.css">
|
|
|
|
<!-- nostr-tools ESM (attaches nip19 to window.nostrTools) -->
|
|
<script type="module">
|
|
import { nip19 } from 'https://esm.sh/nostr-tools@1.10.0?bundle';
|
|
window.nostrTools = { nip19 };
|
|
</script>
|
|
|
|
<!-- Main JS -->
|
|
<script src="/assets/js/main.js"></script>
|
|
|
|
<!-- Content Page JS -->
|
|
<script src="/assets/js/content.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg navbar-dark">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="/">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-send-fill me-2"
|
|
viewBox="0 0 16 16">
|
|
<path d="M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18
|
|
a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41
|
|
a.5.5 0 0 0 .886-.083l6-15Zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0
|
|
0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471-.47 1.178Z" />
|
|
</svg>
|
|
Nostr Poster - Content
|
|
</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
|
class="bi bi-robot me-1" viewBox="0 0 16 16">
|
|
<path
|
|
d="M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5ZM3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.58 26.58 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.933.933 0 0 1-.765.935c-.845.147-2.34.346-4.235.346-1.895 0-3.39-.2-4.235-.346A.933.933 0 0 1 3 9.219V8.062Zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a24.767 24.767 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25.286 25.286 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135Z" />
|
|
<path
|
|
d="M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2V1.866ZM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5Z" />
|
|
</svg>
|
|
Bots
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<ul class="navbar-nav ms-auto">
|
|
<li class="nav-item" id="userInfoRow">
|
|
<span class="me-3">Logged in as: <span id="userPubkey"></span></span>
|
|
<button class="btn btn-sm btn-outline-danger" id="logoutButton2">Logout</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container mt-4">
|
|
<!-- Bot Selection Section -->
|
|
<div class="bot-selection-container text-center">
|
|
<h3 class="mb-4">Select a Bot to Manage Content</h3>
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-6">
|
|
<div class="input-group">
|
|
<select id="botSelect" class="form-select">
|
|
<!-- Populated by loadBotChoices() in main.js -->
|
|
<option value="">-- Select a Bot --</option>
|
|
</select>
|
|
<button class="btn btn-primary" id="loadContentBtn">Load Content</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Global Media Server Settings -->
|
|
<div class="row justify-content-center mt-3" id="mediaServerSettings">
|
|
<div class="col-md-8">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Media Server Settings</h5>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-2">
|
|
<label for="primaryServer" class="form-label">Primary Media Server</label>
|
|
<select id="primaryServer" class="form-select mb-2">
|
|
<option value="nip94">NIP-94 Server</option>
|
|
<option value="blossom">Blossom Server</option>
|
|
</select>
|
|
<div class="mb-2">
|
|
<label for="primaryServerURL" class="form-label">Server URL</label>
|
|
<input type="text" id="primaryServerURL" class="form-control"
|
|
placeholder="https://your-nip94-server.com">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 mb-2">
|
|
<label for="fallbackServer" class="form-label">Fallback Server</label>
|
|
<select id="fallbackServer" class="form-select mb-2">
|
|
<option value="none">None</option>
|
|
<option value="nip94">NIP-94 Server</option>
|
|
<option value="blossom">Blossom Server</option>
|
|
</select>
|
|
<div class="mb-2">
|
|
<label for="fallbackServerURL" class="form-label">Fallback URL</label>
|
|
<input type="text" id="fallbackServerURL" class="form-control"
|
|
placeholder="https://your-fallback-server.com">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-sm btn-primary mt-2" id="saveMediaSettingsBtn">Save Settings</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content areas (only visible after bot selection) -->
|
|
<div id="contentContainer" class="d-none">
|
|
<div class="row">
|
|
<!-- Content Upload Section (Left) -->
|
|
<div class="col-md-6 mb-4">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4>Content Files</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="contentArea">
|
|
<!-- Files will be listed here -->
|
|
<p>Select a bot and click "Load Content" to see files.</p>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<h5>Upload New Content</h5>
|
|
<div class="mb-3">
|
|
<input type="file" id="uploadFileInput" class="form-control" accept="image/*,video/*">
|
|
<div id="uploadPreviewContainer" class="d-none">
|
|
<img id="uploadPreview" class="upload-preview img-fluid">
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-primary" id="uploadButton" disabled>Upload</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Manual Post Section (Right) -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h4>Create Manual Post</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Post Type Selection -->
|
|
<div class="mb-3">
|
|
<label class="form-label">Post Type</label>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="postKind" id="postKind1" value="1" checked>
|
|
<label class="form-check-label" for="postKind1">
|
|
Standard Post (kind: 1)
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="postKind" id="postKind20" value="20">
|
|
<label class="form-check-label" for="postKind20">
|
|
<strong>Picture Post (kind: 20)</strong> - Images displayed in a gallery-like feed
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Title Field (only for kind 20) -->
|
|
<div class="mb-3 d-none" id="titleField">
|
|
<label for="postTitle" class="form-label">Title <span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control" id="postTitle" placeholder="Post title (required for kind: 20)">
|
|
<small class="form-text text-muted">Required for picture posts (kind: 20)</small>
|
|
</div>
|
|
|
|
<!-- Content Field -->
|
|
<div class="mb-3">
|
|
<label for="manualPostContent" class="form-label">Content</label>
|
|
<textarea class="form-control" id="manualPostContent" rows="4"
|
|
placeholder="Write your post content here..."></textarea>
|
|
</div>
|
|
|
|
<!-- Hashtags Field -->
|
|
<div class="mb-3">
|
|
<label for="postHashtags" class="form-label">Hashtags</label>
|
|
<input type="text" class="form-control" id="postHashtags"
|
|
placeholder="comma separated: art, photography, etc">
|
|
</div>
|
|
|
|
<!-- Media Section - Enhanced for Kind 20 -->
|
|
<div class="card mb-3">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">Media Attachment</h5>
|
|
<span class="badge bg-info" id="kind20MediaRequired" style="display: none;">Required for kind: 20</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Upload Section -->
|
|
<div class="mb-3">
|
|
<label class="form-label">Upload Image</label>
|
|
<div class="input-group">
|
|
<input type="file" id="postMediaInput" class="form-control" accept="image/*">
|
|
<button class="btn btn-secondary" type="button" id="quickUploadBtn">Upload</button>
|
|
</div>
|
|
<small class="form-text text-muted">Upload to attach an image to your post</small>
|
|
</div>
|
|
|
|
<!-- Media URL Field (manually entered URL or populated after upload) -->
|
|
<div class="mb-3">
|
|
<label for="mediaUrlInput" class="form-label">Media URL</label>
|
|
<input type="text" class="form-control" id="mediaUrlInput"
|
|
placeholder="Enter media URL or upload an image">
|
|
<small class="form-text text-muted">For kind: 20 posts, an image URL is required (either here or in
|
|
the content)</small>
|
|
</div>
|
|
|
|
<!-- Alt Text Field (for accessibility) -->
|
|
<div class="mb-3">
|
|
<label for="mediaAltText" class="form-label">Alt Text</label>
|
|
<input type="text" class="form-control" id="mediaAltText"
|
|
placeholder="Describe the image for accessibility">
|
|
<small class="form-text text-muted">Recommended for image description (improves accessibility)</small>
|
|
</div>
|
|
|
|
<!-- Media Preview -->
|
|
<div id="mediaPreviewContainer" class="d-none mt-2">
|
|
<div class="card">
|
|
<div class="card-body text-center">
|
|
<img id="mediaPreview" class="upload-preview img-fluid mb-2">
|
|
<div id="mediaLinkContainer" class="media-link">
|
|
<small class="text-muted">Media will appear here after upload</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="button" class="btn btn-success mt-2" id="submitPostBtn">Post Now</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |