add authshell

2026-08-09 08:03:29 +01:00
parent 142cf4a7f7
commit 16ba916029
1 changed files with 61 additions and 0 deletions
@@ -0,0 +1,61 @@
 <script lang="ts">
 	let { title, subtitle, children }: {
 		title: string;
 		subtitle?: string;
 		children?: any;
 	} = $props();
 </script>
 <main class="auth">
 	<a class="brand" href="/">FamChore</a>
 	<div class="card">
 		<h1>{title}</h1>
 		{#if subtitle}
 			<p class="sub">{subtitle}</p>
 		{/if}
 		{@render children?.()}
 	</div>
 </main>
 <style>
 	.auth {
 		min-height: 100vh;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
 		padding: 2rem 1rem;
 		background: linear-gradient(135deg, #eef2ff 0%, #ffffff 55%, #eef2ff 100%);
 		font-family: system-ui, -apple-system, sans-serif;
 		color: #1f2937;
 	}
 	.brand {
 		font-size: 1.15rem;
 		font-weight: 700;
 		color: #4338ca;
 		text-decoration: none;
 		margin-bottom: 1.5rem;
 	}
 	.card {
 		width: 100%;
 		max-width: 420px;
 		background: #fff;
 		border: 1px solid #e5e7eb;
 		border-radius: 16px;
 		box-shadow: 0 12px 30px rgba(67, 56, 202, 0.08);
 		padding: 2rem;
 	}
 	.card h1 {
 		margin: 0 0 0.35rem;
 		font-size: 1.5rem;
 	}
 	.sub {
 		margin: 0 0 1.5rem;
 		color: #6b7280;
 		font-size: 0.9rem;
 		line-height: 1.5;
 	}
 	@media (max-width: 480px) {
 		.card { padding: 1.5rem; }
 	}
 </style>