forked from CWAD/relibre
First commit
This commit is contained in:
146
ui/generator.html
Normal file
146
ui/generator.html
Normal file
@@ -0,0 +1,146 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
Relibre
|
||||
Copyleft (🄯) 2025 James Osborne
|
||||
SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Relibre Generator</title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<link rel="stylesheet" href="./generator.css">
|
||||
</head>
|
||||
<body>
|
||||
<main class="wrap">
|
||||
<header>
|
||||
<h1>Relibre</h1>
|
||||
<p class="sub">Fill the form → Generate HTML → you get a single <code>[release_name].html</code> to share as your landing page for your new music release.</p>
|
||||
<noscript><p class="warn">This tool needs JavaScript enabled.</p></noscript>
|
||||
<p id="envStatus" class="muted"></p>
|
||||
</header>
|
||||
|
||||
<form id="releaseForm" class="form" aria-label="Release information form">
|
||||
<section aria-labelledby="basic-heading">
|
||||
<h2 id="basic-heading">Basic</h2>
|
||||
<label>Album art
|
||||
<input type="file" id="artwork" accept="image/*" required aria-describedby="artwork-help">
|
||||
<span id="artwork-help" class="help-text">Recommended: Square image, at least 1000×1000 pixels</span>
|
||||
</label>
|
||||
<label class="inline-check" style="margin-top:6px">
|
||||
<input type="checkbox" id="scrubMeta">
|
||||
<span>Strip image metadata (EXIF/IPTC/XMP) before embedding</span>
|
||||
</label>
|
||||
<span class="help-text">Done locally via canvas re-encode. Pixels stay the same; metadata is removed.</span>
|
||||
|
||||
<label>Album title
|
||||
<input type="text" id="title" required aria-required="true">
|
||||
</label>
|
||||
<label>Artist name
|
||||
<input type="text" id="artist" required aria-required="true">
|
||||
</label>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="buy-heading">
|
||||
<h2 id="buy-heading">Buy CTA</h2>
|
||||
<div class="grid2">
|
||||
<label>Button label
|
||||
<input type="text" id="buyLabel" placeholder="Buy on Bandcamp">
|
||||
</label>
|
||||
<label>URL
|
||||
<input type="url" id="buyUrl" placeholder="https://...">
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="audio-heading">
|
||||
<h2 id="audio-heading">Audio Embed</h2>
|
||||
<fieldset>
|
||||
<legend>Audio source type</legend>
|
||||
<label><input type="radio" name="audioType" value="bandcamp" checked> Bandcamp iframe</label>
|
||||
<label><input type="radio" name="audioType" value="self"> Self-hosted URLs</label>
|
||||
</fieldset>
|
||||
<div id="bandcampBox">
|
||||
<label for="bandcampIframe">Bandcamp embed code</label>
|
||||
<textarea id="bandcampIframe" placeholder="Paste Bandcamp embed iframe here"></textarea>
|
||||
</div>
|
||||
<div id="selfAudioBox" class="hidden">
|
||||
<p>Provide one or more audio URLs you host (optional OGG fallback).</p>
|
||||
<div class="grid2">
|
||||
<label>MP3 URL
|
||||
<input type="url" id="audioMp3Url" placeholder="https://example.com/track.mp3">
|
||||
</label>
|
||||
<label>OGG URL (optional)
|
||||
<input type="url" id="audioOggUrl" placeholder="https://example.com/track.ogg">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="desc-heading">
|
||||
<h2 id="desc-heading">Description (Markdown supported)</h2>
|
||||
<label for="desc" class="sr-only">Release description</label>
|
||||
<textarea id="desc" rows="10" placeholder="Tracklist, credits, notes..." aria-describedby="markdown-help"></textarea>
|
||||
<p id="markdown-help" class="help-text">Supports: **bold**, *italic*, `code`, [links](url), lists</p>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="stream-heading">
|
||||
<h2 id="stream-heading">Stream Section</h2>
|
||||
<p>Select services and enter URLs (leave blank to omit).</p>
|
||||
<div id="streamList" class="grid2"></div>
|
||||
<button type="button" id="addCustomStream" aria-label="Add custom streaming service">+ Add custom stream</button>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="watch-heading">
|
||||
<h2 id="watch-heading">Watch</h2>
|
||||
<fieldset>
|
||||
<legend>Video source type</legend>
|
||||
<label><input type="radio" name="watchType" value="youtube" checked> YouTube/PeerTube iframe</label>
|
||||
<label><input type="radio" name="watchType" value="self"> Self-hosted video URLs</label>
|
||||
</fieldset>
|
||||
<div id="watchIframeBox">
|
||||
<label for="watchIframe">Video embed code</label>
|
||||
<textarea id="watchIframe" placeholder="Paste YouTube or PeerTube iframe here"></textarea>
|
||||
</div>
|
||||
<div id="watchSelfBox" class="hidden">
|
||||
<p>Provide one or more video URLs you host (poster image optional).</p>
|
||||
<div class="grid2">
|
||||
<label>MP4 URL
|
||||
<input type="url" id="videoMp4Url" placeholder="https://example.com/video.mp4">
|
||||
</label>
|
||||
<label>WebM URL (optional)
|
||||
<input type="url" id="videoWebmUrl" placeholder="https://example.com/video.webm">
|
||||
</label>
|
||||
</div>
|
||||
<label>Poster image URL (optional)
|
||||
<input type="url" id="videoPosterUrl" placeholder="https://example.com/poster.jpg">
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="support-heading">
|
||||
<h2 id="support-heading">Buy / Support</h2>
|
||||
<div class="grid2">
|
||||
<label>Bandcamp URL
|
||||
<input type="url" id="supportBandcamp" placeholder="https://...">
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="follow-heading">
|
||||
<h2 id="follow-heading">Follow</h2>
|
||||
<p>Select networks and enter URLs (leave blank to omit).</p>
|
||||
<div id="followList" class="grid2"></div>
|
||||
<button type="button" id="addCustomFollow" aria-label="Add custom follow link">+ Add custom follow</button>
|
||||
</section>
|
||||
|
||||
<section class="actions">
|
||||
<button type="button" id="generate" class="primary">Generate HTML</button>
|
||||
<span id="status"></span>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
<script src="./icons.js"></script>
|
||||
<script src="./generator.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user