diff --git a/index.html b/index.html index 5e4a57f..97da4b3 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,3 @@ - @@ -21,20 +20,68 @@
-
-

Dane

+

Episode

- +
+
+ Choose visible elements: +
+ + +
+ +
+ + +
+ + +
+ + +
+ + +
+ + +
+
+ +
@@ -54,19 +101,8 @@ type="text" name="peertube-video-id" id="peertube" - value="https://video.internet-czas-dzialac.pl/w/1L2juuzDN6VH5fCXmuhgGY" - placeholder="https://video.internet-czas-dzialac.pl/w/1L2juuzDN6VH5fCXmuhgGY" - oninput="generateHtml();" - > -
- -
- -
@@ -83,6 +119,16 @@ >
+
+ + +
@@ -94,9 +140,9 @@ >
- + -

Render jak w Ghost

+

Preview (render like in Ghost)

diff --git a/script.js b/script.js index 1b3e26f..8bc98d5 100644 --- a/script.js +++ b/script.js @@ -3,26 +3,41 @@ function generateHtml() { document.querySelector("#episode_name").value && document.querySelector("#castopod").value && document.querySelector("#peertube").value && - document.querySelector("#youtube").value + document.querySelector("#youtube").value && + document.querySelector("#castopod-player-visible").value && + document.querySelector("#peertube-player-visible").value && + document.querySelector("#audio-links-visible").value && + document.querySelector("#video-links-visible").value ) { let castopod_url; let peertube_id; try { castopod_url = document - .querySelector("#castopod").value + .querySelector("#castopod").value; + const regex = /^https:\/\/podcast\.internet-czas-dzialac\.pl\/@icd\/episodes\//; + if (!regex.test(castopod_url)) { + + throw new Error("Incorrect Castopod URL format! Please paste the correct URL."); + } } catch (error) { - alert("Podaj link do odcinka w Castopod"); + alert(error); } try { peertube_id = document .querySelector("#peertube") .value.split("/w/")[1]; + if (!peertube_id) { + throw new Error("Incorrect PeerTube URL format! Please paste the correct URL."); + } } catch (error) { - alert("Podaj prawidłową wartością dla peertube"); + alert(error); } - const html = `
+ let html = ""; + + if (document.querySelector("#castopod-player-visible").checked) { + html += `
-
+
` + } + if (document.querySelector("#peertube-player-visible").checked) { + html += ` +
+ +
` + } + + if (document.querySelector("#audio-links-visible").checked) { + html += `
-
+` + } + if (document.querySelector("#video-links-visible").checked) { + html += `
+
` + } -`; console.log('Copied to clipboard'); document.querySelector("textarea").value = html; document.querySelector(".preview").innerHTML = html; @@ -167,6 +203,8 @@ function generateHtml() { } function copyHtml() { - navigator.clipboard.writeText(document.querySelector("textarea").value); + if (navigator) { + navigator.clipboard.writeText(document.querySelector("textarea").value); + } } diff --git a/style.css b/style.css index aaa1ebb..5760b6e 100644 --- a/style.css +++ b/style.css @@ -8,7 +8,7 @@ } body { - font-family: "Open Sans"; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; color: hsl(258.8, 17.4%, 3%); } @@ -18,6 +18,20 @@ section { flex-wrap: nowrap; } +label { + margin-top: 1rem; + margin-bottom: .5rem; +} + +label:nth-child(1) { + margin-top: 0; +} + +fieldset { + padding: .5rem; + margin-bottom: 2rem; +} + h1 { margin-bottom: 1rem; } @@ -26,13 +40,13 @@ h1 { display: flex; flex-flow: column; width: 24rem; - margin-right: 1rem; + margin-right: 2rem; } .input { display: flex; flex-flow: column; - margin-bottom: 1rem; + margin-bottom: 2rem; } .output { @@ -41,11 +55,24 @@ h1 { height: 20vh; } +.input-checkbox { + padding: .5rem; + user-select: none; +} + +input[type="checkbox"]+label { + cursor: pointer; +} + +input[type="text"] { + font-family: 'Courier New', Courier, monospace; +} + textarea { border: 1px solid #5e636e; padding: .5rem; overflow-y: scroll; - font-size: .667rem; + font-size: .5rem; font-family: 'Courier New', Courier, monospace; width: 100%; height: 100%; @@ -54,11 +81,11 @@ textarea { button { padding: 0.25rem .5rem; - margin-bottom: 1rem; + margin-bottom: 2rem; } .preview { - width: 700px; + padding: 1rem; border: 1px solid #5e636e; } @@ -67,47 +94,48 @@ section { } .player { - width: 100%; - margin-bottom: 2rem; + width: 100%; + margin-bottom: 2rem; } + .podcast-logos { - display: flex; - flex-flow: row wrap; - justify-content: center; - align-items: center; + display: flex; + flex-flow: row wrap; + justify-content: center; + align-items: center; } .audio-logos { - margin-top: 2rem; + margin-top: 2rem; } .video-logos { - margin-bottom: 2rem; + margin-bottom: 2rem; } -.podcast-logos > a { - margin: 0.75rem 0; +.podcast-logos>a { + margin: 0.75rem 0; } -.podcast-logos > a, -.podcast-logos > a:hover { - text-decoration: none !important; - box-shadow: none !important; +.podcast-logos>a, +.podcast-logos>a:hover { + text-decoration: none !important; + box-shadow: none !important; } -.podcast-logos > a > img { - width: auto !important; - margin: 0 0.75rem; - max-width: 120px; - height: 3rem; +.podcast-logos>a>img { + width: auto !important; + margin: 0 0.75rem; + max-width: 120px; + height: 3rem; } @media (prefers-color-scheme: dark) { - .logo { - content: var(--dark-image); - background-color: #191b1f; - display: block; - -moz-box-sizing: border-box; - box-sizing: border-box; - } -} + .logo { + content: var(--dark-image); + background-color: #191b1f; + display: block; + -moz-box-sizing: border-box; + box-sizing: border-box; + } +} \ No newline at end of file