80 lines
2.1 KiB
Svelte
80 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import { Construction } from 'lucide-svelte';
|
|
import { fade, fly } from 'svelte/transition';
|
|
import { onMount } from 'svelte';
|
|
|
|
let visible = false;
|
|
onMount(() => {
|
|
visible = true;
|
|
});
|
|
</script>
|
|
|
|
<div
|
|
class="flex h-[calc(100vh-200px)] flex-col items-center justify-center overflow-hidden p-8 text-center"
|
|
>
|
|
{#if visible}
|
|
<div
|
|
class="relative mb-8 rounded-full bg-blue-50 p-8 dark:bg-blue-900/20"
|
|
in:fly={{ y: -50, duration: 1000, delay: 200 }}
|
|
>
|
|
<div class="absolute inset-0 animate-ping rounded-full bg-blue-400 opacity-20"></div>
|
|
<Construction
|
|
class="relative z-10 h-16 w-16 animate-bounce text-blue-500 dark:text-blue-400"
|
|
/>
|
|
</div>
|
|
|
|
<h1
|
|
class="mb-4 text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white"
|
|
in:fade={{ duration: 1000, delay: 500 }}
|
|
>
|
|
En Construcción
|
|
</h1>
|
|
|
|
<p
|
|
class="max-w-md text-xl leading-relaxed text-gray-500 dark:text-gray-400"
|
|
in:fade={{ duration: 1000, delay: 800 }}
|
|
>
|
|
MODULO AUN NO DISPONIBLE!
|
|
</p>
|
|
|
|
<div class="mt-10" in:fly={{ y: 20, duration: 1000, delay: 1100 }}>
|
|
<a
|
|
href="/dashboard"
|
|
class="group inline-flex items-center justify-center rounded-lg bg-blue-600 px-6 py-3 text-base font-semibold text-white shadow-lg transition-all hover:scale-105 hover:bg-blue-700 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none active:scale-95"
|
|
>
|
|
<span>Volver al Inicio</span>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
:global(.animate-bounce) {
|
|
animation: bounce 2s infinite;
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%,
|
|
100% {
|
|
transform: translateY(-5%);
|
|
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
|
}
|
|
50% {
|
|
transform: translateY(0);
|
|
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
}
|
|
</style>
|