audio-video-links-generator/index.html

160 lines
3.6 KiB
HTML

<html lang="en">
<head>
<meta charset="UTF-8">
<meta
http-equiv="X-UA-Compatible"
content="IE=edge"
>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>Audio/video links generator</title>
<link
rel="stylesheet"
href="style.css"
>
<script src="script.js"></script>
</head>
<body>
<section>
<div class="inputs">
<h1>Episode</h1>
<div class="input">
<label for="name">Episode name</label>
<input
type="text"
name="episode-name"
id="episode_name"
value="Generic name - ICD #999"
placeholder="Generic name - ICD #999"
oninput="generateHtml();"
>
</div>
<fieldset>
<legend>Choose visible elements:</legend>
<div class="input-checkbox">
<input
type="checkbox"
id="castopod-player-visible"
name="castopod-player-visible"
checked
oninput="generateHtml();"
/>
<label for="castopod-player-visible">Castopod player</label>
</div>
<div class="input-checkbox">
<input
type="checkbox"
id="peertube-player-visible"
name="peertube-player-visible"
oninput="generateHtml();"
/>
<label for="peertube-player-visible">PeerTube player</label>
</div>
<div class="input-checkbox">
<input
type="checkbox"
id="audio-links-visible"
name="audio-links-visible"
checked
oninput="generateHtml();"
/>
<label for="audio-links-visible">Audio links</label>
</div>
<div class="input-checkbox">
<input
type="checkbox"
id="video-links-visible"
name="video-links-visible"
checked
oninput="generateHtml();"
/>
<label for="video-links-visible">Video links</label>
</div>
</fieldset>
<div class="input">
<label for="castopod">Castopod episode url</label>
<input
type="text"
name="castopod-episode-id"
id="castopod"
value="https://podcast.internet-czas-dzialac.pl/@icd/episodes/icd-weekend-4-wizja-nowych-wyszukiwarek-yt-dokleja-sledzace-ciagi-znakow-a-firefox-je-usuwa"
placeholder="https://podcast.internet-czas-dzialac.pl/@icd/episodes/icd-weekend-4-wizja-nowych-wyszukiwarek-yt-dokleja-sledzace-ciagi-znakow-a-firefox-je-usuwa"
oninput="generateHtml();"
>
</div>
<div class="input">
<label for="peertube">Peertube video url</label>
<input
type="text"
name="peertube-video-id"
id="peertube"
value="https://video.internet-czas-dzialac.pl/w/a8sThShNukC8Vbm1MHZ5Ta"
placeholder="https://video.internet-czas-dzialac.pl/w/a8sThShNukC8Vbm1MHZ5Ta"
oninput="generateHtml();"
>
</div>
<div class="input">
<label for="youtube">Youtube video url</label>
<input
type="text"
name="youtube-video-id"
id="youtube"
value="https://www.youtube.com/watch?v=3MC-_83Zqik"
placeholder="https://www.youtube.com/watch?v=3MC-_83Zqik"
oninput="generateHtml();"
>
</div>
<div class="input">
<label for="odysee">Odysee video url (optional)</label>
<input
type="text"
name="odysee-video-id"
id="odysee"
placeholder="https://odysee.com/@internetczasdzialac:6/internet-of-things,-czy-internet-of-shit:1"
oninput="generateHtml();"
>
</div>
</div>
<div class="result">
<div class="output">
<h1>Output</h1>
<textarea
name="output"
id="output"
></textarea>
</div>
<button onclick="copyHtml()">Copy HTML code</button>
<h1>Preview (render like in Ghost)</h1>
<div class="preview">
</div>
</div>
</section>
<script>
window.addEventListener("DOMContentLoaded", function () {
generateHtml()
}, false);
</script>
</body>
</html>