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 @@
-
+
+
+
+
@@ -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