Files
Musify/web-player/src/routes/login/+page.svelte
T
AdminandClaude Sonnet 5 39e6c2d552 web-player: P12 — chrome de la app (layout, navegación, reproductor)
PlayerExtras se fusiona en PlayerBar, que ahora renderiza volumen y
botón de cola inline y usa el nuevo Slider (input range real con
grosor de thumb controlado por variables CSS) para barra de progreso
y volumen, sustituyendo a SeekBar y VolumeControl (se confirmó por
grep que el modo `compact` de SeekBar era código muerto).

Sidebar y TabsBar migran a appNavLinks(user, counts?) (creado en P5),
eliminando la duplicación de los enlaces de navegación entre ambos.
Decisión tomada sin bloquear: Sidebar gana la marca-gradiente Logo
que no tenía antes, para consistencia visual con MobileHeader y la
pantalla de login.

z-index de PlayerDock y MobileHeader corregido a z-(--z-sticky) (son
barras fijas, no menús) y el de SegmentedControl a z-(--z-raised),
tal como indica la nota B.1.5 del plan. glass-bar y theme-transition
se aplican en PlayerBar (ambas variantes), TabsBar, Queue e Inicio
(hero/spotlight), sustituyendo estilos duplicados de blur/transición.

Verificado con npm run check (0 errores) y npm run build; smoke test
de /login sin errores de consola. Sin QA visual autenticada (Docker
no disponible en esta sesión).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-21 14:39:20 +02:00

47 lines
1.4 KiB
Svelte

<script lang="ts">
import Button from '$lib/components/ui/Button.svelte';
import Logo from '$lib/components/ui/Logo.svelte';
let { data } = $props();
const returnParam = $derived(`returnTo=${encodeURIComponent(data.returnTo)}`);
</script>
<svelte:head>
<title>Iniciar sesión</title>
<meta name="description" content="Inicia sesión o crea una cuenta en Musify." />
</svelte:head>
<div class="relative grid min-h-screen place-items-center overflow-hidden bg-bg px-6 text-fg">
<div class="pointer-events-none absolute inset-0" style="background:var(--mf-ambient)"></div>
<div class="relative flex w-full max-w-4xl flex-col items-center gap-12 text-center">
<Logo size="lg" />
<div class="animate-enter flex flex-col items-center gap-5">
<h1
class="font-display text-[clamp(2.75rem,9vw,8rem)] leading-[1.05] font-semibold tracking-tight"
>
<span class="block">Tu música.</span>
<span class="block">Sin límites.</span>
</h1>
<p class="text-lg text-fg-2">Inicia sesión para continuar.</p>
</div>
<div class="flex w-full max-w-cta flex-col gap-3">
<Button href={`/auth/login?${returnParam}`} reload size="lg" class="w-full">
Iniciar sesión
</Button>
<Button
href={`/auth/login?mode=register&${returnParam}`}
reload
variant="secondary"
size="lg"
class="w-full"
>
Crear cuenta
</Button>
</div>
</div>
</div>