From d91a1cc6e3128973cd146fac3f3a1c25c1083eb3 Mon Sep 17 00:00:00 2001 From: Arkadiusz Wieczorek Date: Sun, 9 Jan 2022 14:19:32 +0100 Subject: [PATCH] Update --- index.html | 114 ++++++++++++++++++++++++++++++++++ script.js | 179 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 113 +++++++++++++++++++++++++++++++++ 3 files changed, 406 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..d1b1cfc --- /dev/null +++ b/index.html @@ -0,0 +1,114 @@ + + + + + + + + Audio/video links generator + + + + + +
+ +
+

Dane

+
+ + +
+ +
+ + +
+ +
+ + +
+ + + +
+ + +
+ +
+
+ +
+

Output

+ +
+ + + +

Render jak w Ghost

+
+ +
+
+ +
+ + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..bbe680f --- /dev/null +++ b/script.js @@ -0,0 +1,179 @@ +function generateHtml() { + if ( + document.querySelector("#episode_name").value && + document.querySelector("#funkwhale").value && + document.querySelector("#peertube").value && + document.querySelector("#youtube").value + ) { + let funkwhale_id; + let peertube_id; + try { + funkwhale_id = document + .querySelector("#funkwhale") + .value.split("/tracks/")[1]; + } catch (error) { + alert("Podaj prawidłową wartością dla funkwhale"); + } + + try { + peertube_id = document + .querySelector("#peertube") + .value.split("/w/")[1]; + } catch (error) { + alert("Podaj prawidłową wartością dla peertube"); + } + + const html = `
+ +
+
+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + +
`; + console.log(html); + document.querySelector("textarea").value = html; + document.querySelector(".preview").innerHTML = html; + } +} + +function copyHtml() { + navigator.clipboard.writeText(document.querySelector("textarea").value); +} + diff --git a/style.css b/style.css new file mode 100644 index 0000000..aaa1ebb --- /dev/null +++ b/style.css @@ -0,0 +1,113 @@ +* { + margin: 0px; + padding: 0px; + box-sizing: border-box; + text-rendering: optimizelegibility; + font-smooth: auto; + -webkit-font-smoothing: auto; +} + +body { + font-family: "Open Sans"; + color: hsl(258.8, 17.4%, 3%); +} + +section { + display: flex; + flex-flow: row; + flex-wrap: nowrap; +} + +h1 { + margin-bottom: 1rem; +} + +.inputs { + display: flex; + flex-flow: column; + width: 24rem; + margin-right: 1rem; +} + +.input { + display: flex; + flex-flow: column; + margin-bottom: 1rem; +} + +.output { + display: flex; + flex-flow: column; + height: 20vh; +} + +textarea { + border: 1px solid #5e636e; + padding: .5rem; + overflow-y: scroll; + font-size: .667rem; + font-family: 'Courier New', Courier, monospace; + width: 100%; + height: 100%; + margin-bottom: 1rem; +} + +button { + padding: 0.25rem .5rem; + margin-bottom: 1rem; +} + +.preview { + width: 700px; + border: 1px solid #5e636e; +} + +section { + padding: 1rem; +} + +.player { + width: 100%; + margin-bottom: 2rem; +} +.podcast-logos { + display: flex; + flex-flow: row wrap; + justify-content: center; + align-items: center; +} + +.audio-logos { + margin-top: 2rem; +} + +.video-logos { + margin-bottom: 2rem; +} + +.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 > 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; + } +}