From 45b85fed1d467de83c43fb6d9b2825240e74d4f9 Mon Sep 17 00:00:00 2001
From: 0d0 <0d0acre@esiliati.org>
Date: Sun, 23 Feb 2025 05:09:56 +0100
Subject: [PATCH] Way better UI

---
 src/routes/+page.svelte | 51 +++++++++++++++++++++--------------------
 1 file changed, 26 insertions(+), 25 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 0e2f7e8..714644d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -83,18 +83,18 @@
 		}
 	});
 </script>
-
 <div
 	id="wrapper"
-	class="relative mx-auto rounded-lg bg-black p-6 text-green-500 shadow-lg sm:max-w-sm sm:border-4 sm:border-green-500 md:mt-10 md:max-w-md lg:max-w-lg 2xl:max-w-2xl"
+	class="relative mx-auto rounded-lg bg-black p-6 text-[#00ff7f] shadow-lg sm:max-w-sm sm:border-4 sm:border-[#00ff7f] md:mt-10 md:max-w-md lg:max-w-lg 2xl:max-w-2xl"
 >
 	<div id="loader" class={[{ downloading }]}>
 		<Loader />
 	</div>
+
 	<!-- Info Icon -->
 	<button
 		onclick={toggleModal}
-		class="absolute top-3 right-3 text-pink-500 transition hover:text-pink-300"
+		class="absolute top-3 right-3 text-[#ff007f] transition hover:text-[#ff3399]"
 		aria-label="Open Info Modal"
 	>
 		<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="h-6 w-6" viewBox="0 0 24 24">
@@ -104,11 +104,11 @@
 		</svg>
 	</button>
 
-	<h1 id="title" class="mb-6 text-center text-xl">🐙 Scaricatore 🐙</h1>
+	<h1 id="title" class="mb-6 text-center text-2xl text-[#00e5ff]">🐙 Scaricatore 🐙</h1>
 	<form class="space-y-6">
 		<!-- Source Selection -->
 		<fieldset class="space-y-4">
-			<legend class="text-green-400">Choose Source:</legend>
+			<legend class="text-[#00e5ff]">Choose Source:</legend>
 
 			<label class="flex items-center space-x-3">
 				<input type="radio" name="source" value="youtube" bind:group={source} class="retro-radio" />
@@ -134,7 +134,7 @@
 						href="https://github.com/yt-dlp/yt-dlp/blob/master/supportedsites.md"
 						target="_blank"
 						rel="noopener noreferrer"
-						class="text-pink-500 hover:underline"
+						class="text-[#ff3399] hover:underline"
 						>supported sites
 					</a>)
 				</span>
@@ -143,7 +143,7 @@
 
 		<!-- Link Input -->
 		<div>
-			<label for="link" class="mb-2 block text-green-400"> Enter Playlist or Video Link: </label>
+			<label for="link" class="mb-2 block text-[#00e5ff]"> Enter Playlist or Video Link: </label>
 			<input
 				name="link"
 				type="url"
@@ -151,18 +151,18 @@
 				bind:value={link}
 				required
 				placeholder="Paste your link here"
-				class="w-full rounded-lg border-4 border-green-500 bg-green-200 px-4 py-3 text-black focus:border-pink-500 focus:outline-none"
+				class="w-full rounded-lg border-4 border-[#00ff7f] bg-[#001a00] px-4 py-3 text-[#00ff7f] focus:border-[#ff3399] focus:outline-none"
 			/>
 		</div>
 
 		<!-- Format Selection -->
 		<div>
-			<label for="format" class="mb-2 block text-green-400"> Choose Format: </label>
+			<label for="format" class="mb-2 block text-[#00e5ff]"> Choose Format: </label>
 			<select
 				id="format"
 				name="format"
 				bind:value={format}
-				class="w-full rounded-lg border-4 border-green-500 bg-green-200 px-4 py-3 text-black focus:border-pink-500 focus:outline-none"
+				class="w-full rounded-lg border-4 border-[#00ff7f] bg-[#001a00] px-4 py-3 text-[#00ff7f] focus:border-[#ff3399] focus:outline-none"
 			>
 				{#each formats as format}
 					<option value={format.value}>{format.label}</option>
@@ -170,15 +170,15 @@
 			</select>
 		</div>
 
-		<!-- Format Selection -->
+		<!-- Metadata -->
 		<div>
-			<label for="metadata" class="mb-2 block text-green-400"> Metadata </label>
+			<label for="metadata" class="mb-2 block text-[#00e5ff]"> Metadata </label>
 			<input
 				type="checkbox"
 				id="metadata"
 				name="metadata"
 				bind:checked={metadata}
-				class="rounded-lg border-4 border-green-500 bg-green-200 px-4 py-3 text-black focus:border-pink-500 focus:outline-none"
+				class="rounded-lg border-4 border-[#00ff7f] bg-[#001a00] px-4 py-3 text-[#00ff7f] focus:border-[#ff3399] focus:outline-none"
 			/>
 		</div>
 
@@ -188,7 +188,7 @@
 			onclick={onClick}
 			class="{disabled
 				? 'disabled'
-				: ''} block w-full rounded-lg border-4 border-pink-700 bg-pink-500 px-4 py-3 text-center text-4xl text-black transition hover:bg-pink-600 active:border-yellow-500"
+				: ''} block w-full rounded-lg border-4 border-[#ff3399] bg-[#ff007f] px-4 py-3 text-center text-4xl text-black transition hover:bg-[#ff3399] active:border-yellow-500"
 		>
 			DOWNLOAD
 		</a>
@@ -199,7 +199,7 @@
 {#if showModal}
 	<div class="bg-opacity-80 fixed inset-0 z-50 flex items-center justify-center bg-black">
 		<div
-			class="w-4/5 max-w-lg rounded-lg border-4 border-green-500 bg-green-900 p-6 text-center text-green-100"
+			class="w-4/5 max-w-lg rounded-lg border-4 border-[#00ff7f] bg-[#002b00] p-6 text-center text-[#00ff7f]"
 		>
 			<h2 class="mb-4 text-lg">🐙 Scaricatore v{PUBLIC_VERSION} 🐙</h2>
 			<p>
@@ -207,13 +207,13 @@
 				source, paste the link, and select a format to start downloading!
 			</p>
 			<span class="mt-10 block">
-				<a class="underline" href="https://git.pweapon.org/odo/dl.emersa.it"
+				<a class="underline text-[#00e5ff]" href="https://git.pweapon.org/odo/dl.emersa.it"
 					>Click here for the source code</a
 				>
 			</span>
 			<button
 				onclick={toggleModal}
-				class="mt-6 rounded-lg border-4 border-pink-700 bg-pink-500 px-4 py-2 text-black hover:bg-pink-600"
+				class="mt-6 rounded-lg border-4 border-[#ff3399] bg-[#ff007f] px-4 py-2 text-black hover:bg-[#ff3399]"
 			>
 				Close
 			</button>
@@ -223,7 +223,8 @@
 
 <style>
 	* {
-		font-size: 12px;
+		font-size: 14px;
+		font-family: 'Press Start 2P', cursive;
 	}
 
 	#loader {
@@ -240,17 +241,17 @@
 	.retro-radio {
 		appearance: none;
 		background-color: #000;
-		border: 2px solid #39ff14;
+		border: 2px solid #00ff7f;
 		width: 20px;
 		height: 20px;
 		cursor: pointer;
 	}
 
 	.retro-radio:checked {
-		background-color: #39ff14;
+		background-color: #00ff7f;
 		box-shadow:
-			0 0 4px #39ff14,
-			0 0 10px #39ff14;
+			0 0 4px #00ff7f,
+			0 0 10px #00ff7f;
 	}
 
 	input[type='url'],
@@ -259,16 +260,16 @@
 	}
 
 	#title {
-		font-size: 22px;
+		font-size: 24px;
 	}
 
 	#btn-download {
-		font-size: 24px;
+		font-size: 26px;
 		transition: opacity 0.3s ease;
 	}
 	a.disabled {
 		pointer-events: none;
 		cursor: default;
-		opacity: 0.4;
+		opacity: 0.5;
 	}
 </style>