odo/dl.emersa.it
1
0
Fork 0
Code Issues Pull requests Releases 10 Packages Activity Actions

Way better UI
All checks were successful
Bump deps (only minor versions) / ci (push) Successful in 16s
Details

Browse source
This commit is contained in:
0d0 2025-02-23 05:09:56 +01:00
parent d523c4853f
commit 45b85fed1d
1 changed files with 26 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
src/routes/+page.svelte
View file

@ -83,18 +83,18 @@
} }
}); });
</script> </script>
<div <div
id="wrapper" 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 }]}> <div id="loader" class={[{ downloading }]}>
<Loader /> <Loader />
</div> </div>
<!-- Info Icon --> <!-- Info Icon -->
<button <button
onclick={toggleModal} 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" 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-6 w-6" viewBox="0 0 24 24">
@ -104,11 +104,11 @@
</svg> </svg>
</button> </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"> <form class="space-y-6">
<!-- Source Selection --> <!-- Source Selection -->
<fieldset class="space-y-4"> <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"> <label class="flex items-center space-x-3">
<input type="radio" name="source" value="youtube" bind:group={source} class="retro-radio" /> <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" href="https://github.com/yt-dlp/yt-dlp/blob/master/supportedsites.md"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="text-pink-500 hover:underline" class="text-[#ff3399] hover:underline"
>supported sites >supported sites
</a>) </a>)
</span> </span>
@ -143,7 +143,7 @@
<!-- Link Input --> <!-- Link Input -->
<div> <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 <input
name="link" name="link"
type="url" type="url"
@ -151,18 +151,18 @@
bind:value={link} bind:value={link}
required required
placeholder="Paste your link here" 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> </div>
<!-- Format Selection --> <!-- Format Selection -->
<div> <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 <select
id="format" id="format"
name="format" name="format"
bind:value={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} {#each formats as format}
<option value={format.value}>{format.label}</option> <option value={format.value}>{format.label}</option>
@ -170,15 +170,15 @@
</select> </select>
</div> </div>
<!-- Format Selection --> <!-- Metadata -->
<div> <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 <input
type="checkbox" type="checkbox"
id="metadata" id="metadata"
name="metadata" name="metadata"
bind:checked={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> </div>
@ -188,7 +188,7 @@
onclick={onClick} onclick={onClick}
class="{disabled class="{disabled
? '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 DOWNLOAD
</a> </a>
@ -199,7 +199,7 @@
{#if showModal} {#if showModal}
<div class="bg-opacity-80 fixed inset-0 z-50 flex items-center justify-center bg-black"> <div class="bg-opacity-80 fixed inset-0 z-50 flex items-center justify-center bg-black">
<div <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> <h2 class="mb-4 text-lg">🐙 Scaricatore v{PUBLIC_VERSION} 🐙</h2>
<p> <p>
@ -207,13 +207,13 @@
source, paste the link, and select a format to start downloading! source, paste the link, and select a format to start downloading!
</p> </p>
<span class="mt-10 block"> <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 >Click here for the source code</a
> >
</span> </span>
<button <button
onclick={toggleModal} 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 Close
</button> </button>
@ -223,7 +223,8 @@
<style> <style>
* { * {
font-size: 12px; font-size: 14px;
font-family: 'Press Start 2P', cursive;
} }
#loader { #loader {
@ -240,17 +241,17 @@
.retro-radio { .retro-radio {
appearance: none; appearance: none;
background-color: #000; background-color: #000;
border: 2px solid #39ff14; border: 2px solid #00ff7f;
width: 20px; width: 20px;
height: 20px; height: 20px;
cursor: pointer; cursor: pointer;
} }
.retro-radio:checked { .retro-radio:checked {
background-color: #39ff14; background-color: #00ff7f;
box-shadow: box-shadow:
0 0 4px #39ff14, 0 0 4px #00ff7f,
0 0 10px #39ff14; 0 0 10px #00ff7f;
} }
input[type='url'], input[type='url'],
@ -259,16 +260,16 @@
} }
#title { #title {
font-size: 22px; font-size: 24px;
} }
#btn-download { #btn-download {
font-size: 24px; font-size: 26px;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
} }
a.disabled { a.disabled {
pointer-events: none; pointer-events: none;
cursor: default; cursor: default;
opacity: 0.4; opacity: 0.5;
} }
</style> </style>