From 43036142377d32f2f5a7798b6cf4648c6b048b8d Mon Sep 17 00:00:00 2001
From: 0d0 <0d0acre@esiliati.org>
Date: Sat, 19 Apr 2025 16:34:55 +0200
Subject: [PATCH] new layout

---
 src/app.html            |   7 +-
 src/routes/+page.svelte | 164 ++++++++++++----------------------------
 2 files changed, 50 insertions(+), 121 deletions(-)

diff --git a/src/app.html b/src/app.html
index 555ee96..b770d41 100644
--- a/src/app.html
+++ b/src/app.html
@@ -7,14 +7,11 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 		<style>
-			@font-face {
-				font-family: 'Press Start 2P';
-				src: url('/fonts/PressStart2P-Regular.ttf');
+			* {
+				font-family: 'Fira Code', monospace;
 			}
-
 			body {
 				background: black; /* Fallback */
-				font-family: 'Press Start 2P', sans-serif;
 				color: #37ff1456; /* Retro green text */
 				margin: 0;
 			}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 07793c0..5e6c5b7 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -11,9 +11,7 @@
 	let href = $state('');
 	let disabled = $state(true);
 	let metadata = $state(false);
-	let downloading = $state(false);
 	let logs = $state('');
-	let logId = undefined;
 
 	const formats = Object.keys(supportedFormats).map((f) => {
 		return { value: f, label: f.toUpperCase() };
@@ -27,29 +25,8 @@
 		showModal = !showModal;
 	};
 
-	onMount(() => {
-		document.cookie = 'downloading=0';
-	});
-
-	const readLogs = () => {
-		logId = setInterval(() => {
-			logs += "We're downloading <br>";
-		}, 2000);
-	};
 	const onClick = () => {
-		let checkIterations = 0;
 		link = '';
-		downloading = true;
-		document.cookie = 'downloading=1';
-
-		readLogs();
-
-		const id = setInterval(() => {
-			if (document.cookie.includes('downloading=0') || checkIterations > 3) {
-				downloading = false && clearInterval(id) && clearInterval(logId);
-			}
-			checkIterations++;
-		}, 1000);
 	};
 
 	const createAnchor = () => {
@@ -94,43 +71,46 @@
 
 <div
 	id="wrapper"
-	class="relative mx-auto rounded-lg bg-black p-6 text-[#00ff7f] shadow-lg sm:mt-10 sm:max-w-sm sm:border-4 sm:border-[#00ff7f] lg:max-w-lg 2xl:max-w-2xl"
+	class="relative mx-auto max-w-full rounded-2xl bg-black p-4 text-green-400 shadow-xl sm:max-w-sm md:max-w-md lg:max-w-lg"
 >
+	<!-- Loader Overlay -->
 	<div
 		id="loader"
-		class={[
-			'absolute inset-0 z-10 flex items-center justify-center bg-black/20 backdrop-blur-xs',
-			{ downloading }
-		]}
+		class="absolute inset-0 z-10 hidden items-center justify-center bg-black/80 backdrop-blur-sm"
 	>
 		<Loader />
 		{@html logs}
 	</div>
 
-	<!-- Info Icon -->
+	<!-- Info Button -->
 	<button
 		onclick={toggleModal}
-		class="absolute top-3 right-3 text-[#ff007f] transition hover:text-[#ff3399]"
+		class="absolute top-3 right-3 text-pink-500 transition hover:text-pink-400"
 		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">
+		<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="h-5 w-5" viewBox="0 0 24 24">
 			<path
 				d="M12 0C5.373 0 0 5.373 0 12c0 6.627 5.373 12 12 12s12-5.373 12-12C24 5.373 18.627 0 12 0zm.75 18h-1.5v-6h1.5v6zm0-8h-1.5V8h1.5v2z"
 			/>
 		</svg>
 	</button>
 
-	<p id="title" class="mb-6 text-center text-[#00e5ff]">🐙 Scaricatore 🐙</p>
-	<form class="space-y-6">
-		<!-- Source selection -->
-		<div class="flex justify-between">
-			<div class="w-2/6 lg:w-3/6">
-				<label for="source" class="mb-2 block text-[#00e5ff]"> Choose Source: </label>
+	<!-- Title -->
+	<p id="title" class="mb-4 text-center font-mono text-xl tracking-tight text-cyan-300">
+		🐙 Scaricatore 🐙
+	</p>
+
+	<!-- Form -->
+	<form class="space-y-5 font-mono text-sm">
+		<!-- Source & Format -->
+		<div class="flex flex-col gap-4 sm:flex-row">
+			<div class="flex-1">
+				<label for="source" class="mb-1 block text-cyan-300">Source</label>
 				<select
 					id="source"
 					name="source"
 					bind:value={source}
-					class="w-full rounded-lg border-4 border-[#00ff7f] bg-[#001a00] px-4 py-3 text-[#00ff7f] focus:border-[#ff3399] focus:outline-none"
+					class="w-full rounded-md border border-green-400 bg-[#000f00] px-3 py-2 text-green-300 focus:border-pink-400 focus:outline-none"
 				>
 					{#each sources as source}
 						<option value={source.value}>{source.label}</option>
@@ -138,14 +118,13 @@
 				</select>
 			</div>
 
-			<!-- Format Selection -->
-			<div class="w-2/6">
-				<label for="format" class="mb-2 block text-[#00e5ff]"> Choose Format: </label>
+			<div class="flex-1">
+				<label for="format" class="mb-1 block text-cyan-300">Format</label>
 				<select
 					id="format"
 					name="format"
 					bind:value={format}
-					class="w-full rounded-lg border-4 border-[#00ff7f] bg-[#001a00] px-4 py-3 text-[#00ff7f] focus:border-[#ff3399] focus:outline-none"
+					class="w-full rounded-md border border-green-400 bg-[#000f00] px-3 py-2 text-green-300 focus:border-pink-400 focus:outline-none"
 				>
 					{#each formats as format}
 						<option value={format.value}>{format.label}</option>
@@ -153,42 +132,44 @@
 				</select>
 			</div>
 		</div>
-		<!-- Link Input -->
+
+		<!-- Video Link -->
 		<div>
-			<label for="link" class="mb-2 block text-[#00e5ff]"> Enter Video Link: </label>
+			<label for="link" class="mb-1 block text-cyan-300">Video Link</label>
 			<input
-				name="link"
 				type="url"
 				id="link"
+				name="link"
 				bind:value={link}
 				required
-				placeholder="Paste your link here"
-				class="w-full rounded-lg border-4 border-[#00ff7f] bg-[#001a00] px-4 py-3 text-[#00ff7f] focus:border-[#ff3399] focus:outline-none"
+				placeholder="https://..."
+				class="w-full rounded-md border border-green-400 bg-[#000f00] px-3 py-2 text-green-300 placeholder:text-green-600 focus:border-pink-400 focus:outline-none"
 			/>
 		</div>
 
-		<!-- Metadata -->
-		<div>
-			<label for="metadata" class="mb-2 block text-[#00e5ff]"
-				>Set filename (<span class="text-red-700">SLOW</span>)</label
-			>
+		<!-- Metadata Checkbox -->
+		<div class="flex items-center gap-2">
 			<input
 				type="checkbox"
 				id="metadata"
 				name="metadata"
 				bind:checked={metadata}
-				class="rounded-lg border-4 border-[#00ff7f] bg-[#001a00] px-4 py-3 text-[#00ff7f] focus:border-[#ff3399] focus:outline-none"
+				class="h-4 w-4 border border-green-400 bg-[#000f00] text-green-500 focus:ring-pink-400"
 			/>
+			<label for="metadata" class="text-cyan-300"
+				>Set filename (<span class="text-red-500">slow</span>)</label
+			>
 		</div>
 
+		<!-- Download Button -->
 		<a
 			id="btn-download"
 			{href}
-			rel="external"
 			onclick={onClick}
+			rel="external"
 			class="{disabled
-				? 'disabled'
-				: ''} 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"
+				? 'pointer-events-none opacity-50'
+				: ''} block w-full rounded-md border border-pink-400 bg-pink-600 px-4 py-3 text-center text-base font-bold text-black transition hover:bg-pink-500 active:border-yellow-400"
 		>
 			DOWNLOAD
 		</a>
@@ -197,73 +178,24 @@
 
 <!-- Modal -->
 {#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-[#00ff7f] bg-[#002b00] p-6 text-center text-[#00ff7f]"
-		>
-			<h2 class="mb-4 text-lg">🐙 Scaricatore v{PUBLIC_VERSION} 🐙</h2>
+	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/90 text-green-300">
+		<div class="w-[90%] max-w-md rounded-lg border border-green-400 bg-[#001a00] p-5 text-center">
+			<h2 class="mb-3 text-base font-semibold">🐙 Scaricatore v{PUBLIC_VERSION} 🐙</h2>
 			<p>
-				This app allows you to download Spotify playlists and YouTube videos directly. Choose your
-				source, paste the link, and select a format to start downloading!
+				Download Spotify playlists and YouTube videos with ease. Choose your source, paste a link,
+				select format, go!
 			</p>
-			<span class="mt-10 block">
-				<a class="text-[#00e5ff] underline" href="https://git.pweapon.org/odo/dl.emersa.it"
-					>Click here for the source code</a
+			<p class="mt-3">
+				<a class="text-cyan-400 underline" href="https://git.pweapon.org/odo/dl.emersa.it"
+					>Source Code</a
 				>
-			</span>
+			</p>
 			<button
 				onclick={toggleModal}
-				class="mt-6 rounded-lg border-4 border-[#ff3399] bg-[#ff007f] px-4 py-2 text-black hover:bg-[#ff3399]"
+				class="mt-6 rounded-md border border-pink-400 bg-pink-600 px-4 py-2 text-black hover:bg-pink-500"
 			>
 				Close
 			</button>
 		</div>
 	</div>
-{/if}
-
-<style>
-	* {
-		font-family: 'Press Start 2P', cursive;
-	}
-
-	@media (max-height: 1000px) {
-		* {
-			font-size: 10px;
-		}
-	}
-
-	@media (min-width: 1400px) {
-		* {
-			font-size: 12px;
-		}
-	}
-
-	#loader {
-		display: none;
-	}
-
-	#loader.downloading {
-		display: grid;
-		justify-items: center;
-		align-items: center;
-	}
-
-	input[type='url'],
-	select {
-		font-family: inherit;
-	}
-
-	#title {
-		font-size: 18px;
-	}
-
-	#btn-download {
-		font-size: 26px;
-		transition: opacity 0.3s ease;
-	}
-	a.disabled {
-		pointer-events: none;
-		cursor: default;
-		opacity: 0.5;
-	}
-</style>
+{/if}
\ No newline at end of file