Way better UI
All checks were successful
Bump deps (only minor versions) / ci (push) Successful in 16s
All checks were successful
Bump deps (only minor versions) / ci (push) Successful in 16s
This commit is contained in:
parent
d523c4853f
commit
45b85fed1d
1 changed files with 26 additions and 25 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue