whidix
b849e6c4dc
- Implemented a POST endpoint for recording daily wins in the game. - Created login and signup functionality with email and password. - Developed a profile page allowing users to update their profile information, change passwords, and manage active sessions. - Added a toggle feature for switching between login and signup forms. - Enhanced the layout by removing the profile button and adjusting the header structure.
98 lines
4.5 KiB
Svelte
98 lines
4.5 KiB
Svelte
<script lang="ts">
|
|
export let data;
|
|
|
|
$: yesterdayCharacter = data.yesterdayCharacter;
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>OnePieceDle</title>
|
|
</svelte:head>
|
|
|
|
<main
|
|
class="relative min-h-screen overflow-hidden bg-slate-950 text-slate-100"
|
|
>
|
|
<div class="absolute inset-0 bg-gradient-to-br from-slate-950/85 via-slate-900/60 to-slate-950/80"></div>
|
|
<div class="absolute inset-0 mix-blend-screen opacity-20 bg-[radial-gradient(circle_at_top,rgba(255,215,84,0.35),transparent_55%)]"></div>
|
|
|
|
<div class="relative mx-auto flex min-h-screen w-full max-w-6xl flex-col items-center justify-center px-6 py-10">
|
|
<div class="flex w-full flex-col items-center gap-8">
|
|
<div class="text-center mb-12">
|
|
<h1 class="text-4xl font-black uppercase tracking-[0.3em] text-amber-50 sm:text-6xl">
|
|
OnePieceDle
|
|
</h1>
|
|
<p class="mt-4 max-w-2xl text-base text-slate-200 sm:text-lg">
|
|
Devine le personnage de l'equipage, des marines ou du vaste monde. Chaque indice te rapproche du tresor.
|
|
</p>
|
|
</div>
|
|
<div class="grid w-full gap-4 sm:grid-cols-2">
|
|
<div class="rounded-2xl border border-white/10 bg-white/5 p-6 shadow-[0_24px_60px_rgba(0,0,0,0.45)] backdrop-blur">
|
|
<h2 class="text-sm font-semibold uppercase tracking-[0.2em] text-amber-100">Personnage du jour</h2>
|
|
<p class="mt-3 text-lg font-semibold text-white">Nouveau mystere toutes les 24 heures</p>
|
|
<p class="mt-2 text-sm text-slate-200">Compare tes essais, debloque des indices et garde ta serie.</p>
|
|
<a
|
|
href="/daily"
|
|
class="mt-5 inline-flex w-full items-center justify-center rounded-full bg-amber-300 px-5 py-3 text-sm font-semibold text-slate-900 transition hover:bg-amber-200"
|
|
>
|
|
Commencer
|
|
</a>
|
|
</div>
|
|
<div class="rounded-2xl border border-white/10 bg-white/5 p-6 shadow-[0_24px_60px_rgba(0,0,0,0.45)] backdrop-blur">
|
|
<h2 class="text-sm font-semibold uppercase tracking-[0.2em] text-amber-100">Partie libre</h2>
|
|
<p class="mt-3 text-lg font-semibold text-white">Entraine-toi avec des pirates legendaires</p>
|
|
<p class="mt-2 text-sm text-slate-200">Choisis une epoque, regle la difficulte et vogue a ton rythme.</p>
|
|
<button class="mt-5 w-full rounded-full border border-amber-200/40 bg-transparent px-5 py-3 text-sm font-semibold text-amber-100 transition hover:border-amber-200 hover:text-amber-50">
|
|
En construction
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="w-full rounded-3xl border border-white/10 bg-white/5 p-6 shadow-[0_24px_60px_rgba(0,0,0,0.45)] backdrop-blur sm:p-8">
|
|
{#if yesterdayCharacter}
|
|
<div class="flex flex-col items-center gap-5 text-center sm:flex-row sm:text-left">
|
|
{#if yesterdayCharacter.pictureUrl}
|
|
<img
|
|
src={yesterdayCharacter.pictureUrl}
|
|
alt={yesterdayCharacter.name}
|
|
class="h-20 w-20 rounded-full border border-amber-200/40 object-cover"
|
|
/>
|
|
{:else}
|
|
<div class="flex h-20 w-20 items-center justify-center rounded-full border border-amber-200/40 bg-slate-900/70 text-xs uppercase tracking-[0.25em] text-amber-100">
|
|
Photo
|
|
</div>
|
|
{/if}
|
|
<div class="flex-1">
|
|
<p class="text-xs font-semibold uppercase tracking-[0.28em] text-amber-100">Personnage d'hier</p>
|
|
<p class="mt-2 text-lg font-semibold text-white">{yesterdayCharacter.name}</p>
|
|
{#if yesterdayCharacter.epithets}
|
|
<p class="mt-1 text-sm text-slate-400">
|
|
{typeof yesterdayCharacter.epithets === 'string'
|
|
? JSON.parse(yesterdayCharacter.epithets).join(', ')
|
|
: (yesterdayCharacter.epithets as string[]).join(', ')}
|
|
</p>
|
|
{/if}
|
|
</div>
|
|
<a
|
|
href={"https://onepiece.fandom.com/fr/wiki/" + yesterdayCharacter.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="w-full rounded-full border border-amber-200/40 bg-transparent px-5 py-3 text-sm font-semibold text-amber-100 transition hover:border-amber-200 hover:text-amber-50 sm:w-auto"
|
|
>
|
|
Voir la page
|
|
</a>
|
|
</div>
|
|
{:else}
|
|
<div class="flex flex-col items-center gap-5 text-center sm:flex-row sm:text-left">
|
|
<div class="flex h-20 w-20 items-center justify-center rounded-full border border-amber-200/40 bg-slate-900/70 text-xs uppercase tracking-[0.25em] text-amber-100">
|
|
Photo
|
|
</div>
|
|
<div class="flex-1">
|
|
<p class="text-xs font-semibold uppercase tracking-[0.28em] text-amber-100">Personnage d'hier</p>
|
|
<p class="mt-2 text-lg font-semibold text-white">Aucun personnage</p>
|
|
<p class="mt-1 text-sm text-slate-200">Aucun personnage d'hier disponible</p>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|