new layout
This commit is contained in:
parent
4bf9d97345
commit
4303614237
2 changed files with 50 additions and 121 deletions
|
|
@ -7,14 +7,11 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
%sveltekit.head%
|
%sveltekit.head%
|
||||||
<style>
|
<style>
|
||||||
@font-face {
|
* {
|
||||||
font-family: 'Press Start 2P';
|
font-family: 'Fira Code', monospace;
|
||||||
src: url('/fonts/PressStart2P-Regular.ttf');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: black; /* Fallback */
|
background: black; /* Fallback */
|
||||||
font-family: 'Press Start 2P', sans-serif;
|
|
||||||
color: #37ff1456; /* Retro green text */
|
color: #37ff1456; /* Retro green text */
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -11,9 +11,7 @@
|
||||||
let href = $state('');
|
let href = $state('');
|
||||||
let disabled = $state(true);
|
let disabled = $state(true);
|
||||||
let metadata = $state(false);
|
let metadata = $state(false);
|
||||||
let downloading = $state(false);
|
|
||||||
let logs = $state('');
|
let logs = $state('');
|
||||||
let logId = undefined;
|
|
||||||
|
|
||||||
const formats = Object.keys(supportedFormats).map((f) => {
|
const formats = Object.keys(supportedFormats).map((f) => {
|
||||||
return { value: f, label: f.toUpperCase() };
|
return { value: f, label: f.toUpperCase() };
|
||||||
|
|
@ -27,29 +25,8 @@
|
||||||
showModal = !showModal;
|
showModal = !showModal;
|
||||||
};
|
};
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
document.cookie = 'downloading=0';
|
|
||||||
});
|
|
||||||
|
|
||||||
const readLogs = () => {
|
|
||||||
logId = setInterval(() => {
|
|
||||||
logs += "We're downloading <br>";
|
|
||||||
}, 2000);
|
|
||||||
};
|
|
||||||
const onClick = () => {
|
const onClick = () => {
|
||||||
let checkIterations = 0;
|
|
||||||
link = '';
|
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 = () => {
|
const createAnchor = () => {
|
||||||
|
|
@ -94,43 +71,46 @@
|
||||||
|
|
||||||
<div
|
<div
|
||||||
id="wrapper"
|
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
|
<div
|
||||||
id="loader"
|
id="loader"
|
||||||
class={[
|
class="absolute inset-0 z-10 hidden items-center justify-center bg-black/80 backdrop-blur-sm"
|
||||||
'absolute inset-0 z-10 flex items-center justify-center bg-black/20 backdrop-blur-xs',
|
|
||||||
{ downloading }
|
|
||||||
]}
|
|
||||||
>
|
>
|
||||||
<Loader />
|
<Loader />
|
||||||
{@html logs}
|
{@html logs}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Info Icon -->
|
<!-- Info Button -->
|
||||||
<button
|
<button
|
||||||
onclick={toggleModal}
|
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"
|
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
|
<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"
|
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>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<p id="title" class="mb-6 text-center text-[#00e5ff]">🐙 Scaricatore 🐙</p>
|
<!-- Title -->
|
||||||
<form class="space-y-6">
|
<p id="title" class="mb-4 text-center font-mono text-xl tracking-tight text-cyan-300">
|
||||||
<!-- Source selection -->
|
🐙 Scaricatore 🐙
|
||||||
<div class="flex justify-between">
|
</p>
|
||||||
<div class="w-2/6 lg:w-3/6">
|
|
||||||
<label for="source" class="mb-2 block text-[#00e5ff]"> Choose Source: </label>
|
<!-- 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
|
<select
|
||||||
id="source"
|
id="source"
|
||||||
name="source"
|
name="source"
|
||||||
bind:value={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}
|
{#each sources as source}
|
||||||
<option value={source.value}>{source.label}</option>
|
<option value={source.value}>{source.label}</option>
|
||||||
|
|
@ -138,14 +118,13 @@
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Format Selection -->
|
<div class="flex-1">
|
||||||
<div class="w-2/6">
|
<label for="format" class="mb-1 block text-cyan-300">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-[#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}
|
{#each formats as format}
|
||||||
<option value={format.value}>{format.label}</option>
|
<option value={format.value}>{format.label}</option>
|
||||||
|
|
@ -153,42 +132,44 @@
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Link Input -->
|
|
||||||
|
<!-- Video Link -->
|
||||||
<div>
|
<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
|
<input
|
||||||
name="link"
|
|
||||||
type="url"
|
type="url"
|
||||||
id="link"
|
id="link"
|
||||||
|
name="link"
|
||||||
bind:value={link}
|
bind:value={link}
|
||||||
required
|
required
|
||||||
placeholder="Paste your link here"
|
placeholder="https://..."
|
||||||
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 placeholder:text-green-600 focus:border-pink-400 focus:outline-none"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Metadata -->
|
<!-- Metadata Checkbox -->
|
||||||
<div>
|
<div class="flex items-center gap-2">
|
||||||
<label for="metadata" class="mb-2 block text-[#00e5ff]"
|
|
||||||
>Set filename (<span class="text-red-700">SLOW</span>)</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-[#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>
|
</div>
|
||||||
|
|
||||||
|
<!-- Download Button -->
|
||||||
<a
|
<a
|
||||||
id="btn-download"
|
id="btn-download"
|
||||||
{href}
|
{href}
|
||||||
rel="external"
|
|
||||||
onclick={onClick}
|
onclick={onClick}
|
||||||
|
rel="external"
|
||||||
class="{disabled
|
class="{disabled
|
||||||
? 'disabled'
|
? 'pointer-events-none opacity-50'
|
||||||
: ''} 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"
|
: ''} 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
|
DOWNLOAD
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -197,73 +178,24 @@
|
||||||
|
|
||||||
<!-- Modal -->
|
<!-- Modal -->
|
||||||
{#if showModal}
|
{#if showModal}
|
||||||
<div class="bg-opacity-80 fixed inset-0 z-50 flex items-center justify-center bg-black">
|
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/90 text-green-300">
|
||||||
<div
|
<div class="w-[90%] max-w-md rounded-lg border border-green-400 bg-[#001a00] p-5 text-center">
|
||||||
class="w-4/5 max-w-lg rounded-lg border-4 border-[#00ff7f] bg-[#002b00] p-6 text-center text-[#00ff7f]"
|
<h2 class="mb-3 text-base font-semibold">🐙 Scaricatore v{PUBLIC_VERSION} 🐙</h2>
|
||||||
>
|
|
||||||
<h2 class="mb-4 text-lg">🐙 Scaricatore v{PUBLIC_VERSION} 🐙</h2>
|
|
||||||
<p>
|
<p>
|
||||||
This app allows you to download Spotify playlists and YouTube videos directly. Choose your
|
Download Spotify playlists and YouTube videos with ease. Choose your source, paste a link,
|
||||||
source, paste the link, and select a format to start downloading!
|
select format, go!
|
||||||
</p>
|
</p>
|
||||||
<span class="mt-10 block">
|
<p class="mt-3">
|
||||||
<a class="text-[#00e5ff] underline" href="https://git.pweapon.org/odo/dl.emersa.it"
|
<a class="text-cyan-400 underline" href="https://git.pweapon.org/odo/dl.emersa.it"
|
||||||
>Click here for the source code</a
|
>Source Code</a
|
||||||
>
|
>
|
||||||
</span>
|
</p>
|
||||||
<button
|
<button
|
||||||
onclick={toggleModal}
|
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
|
Close
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/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>
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue