160 lines
3.6 KiB
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> |