Improved colours, progress and more

app.js

@@ -1,7 +1,6 @@
 //! Todo
 //! Filename needs to be filtered
 //! Total progress
-//! Colours
 
 
 const express = require('express');

index.html

@@ -49,27 +49,46 @@
         <p id="title">Title: </p>
 
         <div id="videoList">
-                <label>Select Format - </label>
-                <select id="videoFormatSelect">
-                </select>
-                <br>
-                <input type="hidden" name="url" class="url" id="url">
-                <button class="submitBtn" id="videoDownload">Download</button>
+            <label>Select Format - </label>
+            <select id="videoFormatSelect">
+            </select>
+            <br>
+            <input type="hidden" name="url" class="url" id="url">
+            <button class="submitBtn" id="videoDownload">Download</button>
         </div>
 
         <div id="audioList">
-                <label>Select Format - </label>
-                <select id="audioFormatSelect">
-                </select>
-                <br>
-                <input type="hidden" name="url" class="url">
-                <button class="submitBtn" id="audioDownload">Download</button>
+            <label>Select Format - </label>
+            <select id="audioFormatSelect">
+            </select>
+            <br>
+            <input type="hidden" name="url" class="url">
+            <button class="submitBtn" id="audioDownload">Download</button>
+        </div>
+
+        <div id="preparingBox">
+            <span>Preparing</span>
+            <svg version="1.1" id="L4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+                y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
+                <circle fill="rgb(84, 171, 222)" stroke="none" cx="6" cy="50" r="6">
+                    <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.1" />
+                </circle>
+                <circle fill="rgb(84, 171, 222)" stroke="none" cx="26" cy="50" r="6">
+                    <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.2" />
+                </circle>
+                <circle fill="rgb(84, 171, 222)" stroke="none" cx="46" cy="50" r="6">
+                    <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.3" />
+                </circle>
+            </svg>
+        </div>
+        
+
+        <div id="progressBox">
+            <label>Video Progress: <progress max="100" value="0" id="videoProgress"></progress></label>
+            <br>
+            <label>Audio Progress: <progress max="100" value="0" id="audioProgress"></progress></label>
         </div>
 
-        <label>Video Progress: <progress max="100" value="0" id="videoProgress"></progress></label>
-<br>
-        <label>Audio Progress: <progress max="100" value="0" id="audioProgress"></progress></label>
-<br>
 
     </div>
 
@@ -83,10 +102,21 @@
         })
 
         socket.on("videoProgress", (progress) => {
+            document.getElementById("progressBox").style.display = "inline-block"
+
             document.getElementById("videoProgress").value = progress
+            if (progress != 100){
+                document.querySelector(".submitBtn").style.display = "none"
+            }
+            else{
+                document.querySelector(".submitBtn").style.display = "inline-block"
+            }
         })
 
         socket.on("audioProgress", (progress) => {
+            document.getElementById("progressBox").style.display = "block"
+            document.getElementById("preparingBox").style.display = "none"
+
             document.getElementById("audioProgress").value = progress
         })
 

public/index.css

@@ -1,3 +1,12 @@
+:root{
+	--background: whitesmoke;
+	--text:rgb(20, 20, 20);
+	--box-main:rgb(143, 239, 207);
+	--box-toggle:rgb(108, 231, 190);
+	--box-toggleOn: rgb(67, 212, 164);
+	--theme-toggle:rgb(147, 174, 185);
+}
+
 body {
 	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
 		Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
@@ -5,7 +14,8 @@ body {
 	text-align: center;
 	font-size: xx-large;
 	padding: 10px;
-	background-color: whitesmoke;
+	background-color: var(--background);
+	color:var(--text)
 }
 
 #title {
@@ -49,11 +59,14 @@ input[type="text"] {
 #hidden {
 	display: none;
 	/* display: inline-block; */
-	background-color: rgb(143, 239, 207);
+	background-color: var(--box-main);
 	border-radius: 10px;
 	width: 80%;
-	padding: 10px;
-	color:black;
+	padding: 10px 10px 20px 10px;
+	color:var(--text);
+}
+#progressBox{
+	display:none;
 }
 
 #btnContainer {
@@ -66,15 +79,16 @@ input[type="text"] {
 	width: 50%;
 	font-size: x-large;
 	border: none;
-	background-color: rgb(108, 231, 190);
+	background-color: var(--box-toggle);
 	border-radius: 10px;
 	cursor: pointer;
 	padding: 8px;
+	color:var(--text)
 }
 
 select {
 	padding: 15px;
-	background-color: lightgreen;
+	background-color: rgb(127, 253, 127);
 	border: none;
 	border-radius: 8px;
 	cursor: pointer;
@@ -102,6 +116,7 @@ label {
 	border: none;
 	font-size: large;
 	cursor: pointer;
+	display:inline-block;
 	
 	animation-duration: .5s;
 	animation-timing-function: linear;
@@ -118,6 +133,13 @@ label {
 	align-items: center;
 }
 
+#preparingBox{
+	display:none;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+}
+
 svg {
 	width: 100px;
 	height: 100px;
@@ -128,7 +150,7 @@ svg {
 #themeToggle {
 	width: 55px;
 	height: 30px;
-	background-color: rgb(147, 174, 185);
+	background-color: var(--theme-toggle);
 	border-radius: 40px;
 	display: flex;
 	cursor: pointer;
@@ -146,4 +168,4 @@ svg {
 	transition: linear;
 	transition-duration: 0.4s;
 	left:0px;
-}
+}

public/index.js

@@ -166,11 +166,13 @@ function download(type) {
 }
 
 document.getElementById("videoDownload").addEventListener("click", (event) => {
+	document.getElementById("preparingBox").style.display = "flex";
 	clickAnimation("videoDownload");
 	download("video");
 });
 
 document.getElementById("audioDownload").addEventListener("click", (event) => {
+	document.getElementById("preparingBox").style.display = "flex";
 	clickAnimation("audioDownload");
 	download("audio");
 });
@@ -186,41 +188,46 @@ document.getElementById("url").addEventListener("keypress", (event) => {
 });
 
 videoToggle.addEventListener("click", (event) => {
-	videoToggle.style.backgroundColor = "rgb(67, 212, 164)";
-	audioToggle.style.backgroundColor = "rgb(108, 231, 190)";
+	videoToggle.style.backgroundColor = "var(--box-toggleOn)";
+	audioToggle.style.backgroundColor = "var(--box-toggle)";
 	document.getElementById("audioList").style.display = "none";
 	document.getElementById("videoList").style.display = "block";
 });
 
 audioToggle.addEventListener("click", (event) => {
-	audioToggle.style.backgroundColor = "rgb(67, 212, 164)";
-	videoToggle.style.backgroundColor = "rgb(108, 231, 190)";
+	audioToggle.style.backgroundColor = "var(--box-toggleOn)";
+	videoToggle.style.backgroundColor = "var(--box-toggle)";
 	document.getElementById("videoList").style.display = "none";
 	document.getElementById("audioList").style.display = "block";
 });
 
 // Toggle theme
 let darkTheme = false;
-let button = document.getElementById("themeToggle");
 let circle = document.getElementById("themeToggleInside");
+const root = document.querySelector(":root");
+
 function toggle() {
 	if (darkTheme == false) {
 		circle.style.left = "25px";
-		button.style.backgroundColor = "rgb(80, 193, 238)";
+
+		root.style.setProperty("--background", "rgb(40,40,40)");
+		root.style.setProperty("--text", "white");
+		root.style.setProperty("--box-main", "rgb(80,80,80)");
+		root.style.setProperty("--box-toggle", "rgb(70,70,70)");
+		root.style.setProperty("--theme-toggle", "rgb(80, 193, 238)");
+
 		darkTheme = true;
-		document.body.style.backgroundColor = "rgb(50,50,50)";
-		document.getElementById("hidden").style.backgroundColor =
-			"rgb(143, 239, 207)";
-		document.body.style.color = "whitesmoke";
 		localStorage.setItem("theme", "dark");
 	} else {
 		circle.style.left = "0px";
+
+		root.style.setProperty("--background", "whitesmoke");
+		root.style.setProperty("--text", "rgb(20, 20, 20)");
+		root.style.setProperty("--box-main", "rgb(143, 239, 207)");
+		root.style.setProperty("--box-toggle", "rgb(108, 231, 190)");
+		root.style.setProperty("--theme-toggle", "rgb(147, 174, 185)");
+
 		darkTheme = false;
-		button.style.backgroundColor = "rgb(147, 174, 185)";
-		document.body.style.backgroundColor = "whitesmoke";
-		document.getElementById("hidden").style.backgroundColor =
-			"rgb(203, 253, 236)";
-		document.body.style.color = "black";
 		localStorage.setItem("theme", "light");
 	}
 }