added a real frontpage
This commit is contained in:
Maieul BOYER
parent
efdef8f8e9
commit
3120a640e3
3 changed files with 125 additions and 33 deletions
|
|
@ -5,9 +5,11 @@
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Ft Boules</title>
|
<title>Ft Boules</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="bg-gray-500 font-sans min-h-screen">
|
<body class="bg-gray-500 font-sans min-h-screen font-[Inter]">
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<header
|
<header
|
||||||
class="fixed top-0 left-0 right-0 h-14 bg-gray-800 text-white flex items-center justify-between px-4 shadow-md z-50">
|
class="fixed top-0 left-0 right-0 h-14 bg-gray-800 text-white flex items-center justify-between px-4 shadow-md z-50">
|
||||||
|
|
@ -34,7 +36,7 @@
|
||||||
<a href="/signin" class="hover:bg-gray-700 rounded-md px-3 py-2">👤 Signin</a>
|
<a href="/signin" class="hover:bg-gray-700 rounded-md px-3 py-2">👤 Signin</a>
|
||||||
<a href="/chat" class="hover:bg-gray-700 rounded-md px-3 py-2">👤 Chat</a>
|
<a href="/chat" class="hover:bg-gray-700 rounded-md px-3 py-2">👤 Chat</a>
|
||||||
<a href="/ttt" class="hover:bg-gray-700 rounded-md px-3 py-2">⭕ Tic-Tac-Toe</a>
|
<a href="/ttt" class="hover:bg-gray-700 rounded-md px-3 py-2">⭕ Tic-Tac-Toe</a>
|
||||||
<a href="/contact" class="hover:bg-gray-700 rounded-md px-3 py-2">⚙️ Settings</a>
|
<a href="/profile" class="hover:bg-gray-700 rounded-md px-3 py-2">⚙️ Profile</a>
|
||||||
<a href="/logout" class="hover:bg-gray-700 rounded-md px-3 py-2">🚪 Logout</a>
|
<a href="/logout" class="hover:bg-gray-700 rounded-md px-3 py-2">🚪 Logout</a>
|
||||||
</nav>
|
</nav>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,112 @@
|
||||||
<div>
|
<div class="bg-gradient-to-br from-slate-50 to-slate-100 text-slate-800">
|
||||||
Welcome a to <span> The Site de Boule </span>
|
|
||||||
</div>
|
<!-- Hero -->
|
||||||
<div>
|
<section class="max-w-7xl mx-auto px-6 py-20 grid lg:grid-cols-2 gap-12 items-center">
|
||||||
Welcome a to <span> The Site de Boule </span>
|
<div>
|
||||||
</div>
|
<h2 class="text-5xl font-extrabold leading-tight mb-6">
|
||||||
<div>
|
A Website<br />
|
||||||
Welcome a to <span> The Site de Boule </span>
|
<span class="text-yellow-500">Entirely About Balls</span>
|
||||||
</div>
|
</h2>
|
||||||
<div>
|
<p class="text-lg text-slate-600 mb-8">
|
||||||
Welcome a to <span> The Site de Boule </span>
|
Tennis balls. Ping pong balls. Spherical legends of sport and chaos.
|
||||||
</div>
|
If it bounces, it belongs here.
|
||||||
<div>
|
<br />
|
||||||
Welcome a to <span> The Site de Boule </span>
|
<span> Since we didn't have any ideas, you can also play <span
|
||||||
|
class="font-bold text-gray-800">pong</span></span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<img src="https://images.unsplash.com/photo-1521412644187-c49fa049e84d?auto=format&fit=crop&w=900&q=80"
|
||||||
|
alt="Tennis balls"
|
||||||
|
class="rounded-3xl shadow-2xl hover:rotate-1 hover:scale-105 transition duration-500" />
|
||||||
|
<span class="absolute -bottom-4 -right-4 bg-white px-4 py-2 rounded-xl shadow text-sm">
|
||||||
|
Naturally Sourced Ball
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Categories -->
|
||||||
|
<section class="bg-white border-t border-slate-200">
|
||||||
|
<div class="max-w-7xl mx-auto px-6 py-16">
|
||||||
|
<h3 class="text-3xl font-bold mb-12 text-center">
|
||||||
|
Featured Ball Categories
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-10">
|
||||||
|
<!-- Tennis -->
|
||||||
|
<div class="group rounded-2xl border border-slate-200 p-6 hover:shadow-xl transition">
|
||||||
|
<div class="overflow-hidden rounded-xl mb-4">
|
||||||
|
<img src="https://images.unsplash.com/photo-1698593659825-61f93a745233?auto=format&fit=crop&w=800&q=80"
|
||||||
|
class="group-hover:scale-110 transition duration-500" alt="Tennis balls" />
|
||||||
|
</div>
|
||||||
|
<h4 class="text-xl font-semibold mb-2 group-hover:text-yellow-500 transition">
|
||||||
|
Tennis Balls
|
||||||
|
</h4>
|
||||||
|
<p class="text-slate-600 text-sm">
|
||||||
|
Fuzzy icons of optimism. Designed to bounce forever, until they don’t.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Ping Pong -->
|
||||||
|
<div class="group rounded-2xl border border-slate-200 p-6 hover:shadow-xl transition">
|
||||||
|
<div class="overflow-hidden rounded-xl mb-4">
|
||||||
|
|
||||||
|
<img src="https://images.unsplash.com/photo-1558433916-90a36b44753f?auto=format&fit=crop&w=800&q=80"
|
||||||
|
class="group-hover:scale-110 transition duration-500" alt="Ping pong balls" />
|
||||||
|
</div>
|
||||||
|
<h4 class="text-xl font-semibold mb-2 group-hover:text-yellow-500 transition">
|
||||||
|
Ping Pong Balls
|
||||||
|
</h4>
|
||||||
|
<p class="text-slate-600 text-sm">
|
||||||
|
Lightweight, unpredictable, and emotionally devastating to lose.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Other -->
|
||||||
|
<div class="group rounded-2xl border border-slate-200 p-6 hover:shadow-xl transition">
|
||||||
|
<div class="overflow-hidden rounded-xl mb-4">
|
||||||
|
<img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?auto=format&fit=crop&w=800&q=80"
|
||||||
|
class="group-hover:scale-110 transition duration-500" alt="Rubber balls" />
|
||||||
|
</div>
|
||||||
|
<h4 class="text-xl font-semibold mb-2 group-hover:text-yellow-500 transition">
|
||||||
|
Other Balls
|
||||||
|
</h4>
|
||||||
|
<p class="text-slate-600 text-sm">
|
||||||
|
Stress balls. Mystery balls. Balls with unclear intentions.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Stats -->
|
||||||
|
<section class="max-w-7xl mx-auto px-6 py-20">
|
||||||
|
<div class="grid sm:grid-cols-3 gap-10 text-center">
|
||||||
|
<div class="hover:scale-110 transition">
|
||||||
|
<p class="text-5xl font-extrabold text-yellow-500">1,024</p>
|
||||||
|
<p class="text-slate-600 mt-2">Balls Observed</p>
|
||||||
|
</div>
|
||||||
|
<div class="hover:scale-110 transition">
|
||||||
|
<p class="text-5xl font-extrabold text-yellow-500">98%</p>
|
||||||
|
<p class="text-slate-600 mt-2">Bounce Accuracy</p>
|
||||||
|
</div>
|
||||||
|
<div class="hover:scale-110 transition">
|
||||||
|
<p class="text-5xl font-extrabold text-yellow-500">0</p>
|
||||||
|
<p class="text-slate-600 mt-2">Regrets</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="bg-yellow-500">
|
||||||
|
<div class="max-w-7xl mx-auto px-6 py-16 text-center">
|
||||||
|
<h3 class="text-4xl font-extrabold mb-4">
|
||||||
|
Embrace the Ball Lifestyle
|
||||||
|
</h3>
|
||||||
|
<p class="max-w-2xl mx-auto mb-8 text-black/80">
|
||||||
|
No sign-up <span class="text-xs">(we do lie)</span>. No judgment. Just balls.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,11 @@
|
||||||
import { addRoute, setTitle, type RouteHandlerParams } from "@app/routing";
|
import { addRoute, setTitle } from "@app/routing";
|
||||||
import page from './root.html?raw'
|
import page from "./root.html?raw";
|
||||||
import { updateUser } from "@app/auth";
|
|
||||||
|
|
||||||
addRoute('/', async (_: string): Promise<string> => {
|
addRoute(
|
||||||
let user = await updateUser();
|
"/",
|
||||||
if (user === null)
|
async (_: string): Promise<string> => {
|
||||||
setTitle(`Welcome`)
|
setTitle(`Welcome`);
|
||||||
else
|
return page;
|
||||||
setTitle(`Welcome ${user.guest ? '[GUEST] ' : ''}${user.name}`);
|
},
|
||||||
return page;
|
{ bypass_auth: true },
|
||||||
}, { bypass_auth: true })
|
);
|
||||||
|
|
||||||
addRoute('/with_title/:title', (_: string, args: RouteHandlerParams) => {
|
|
||||||
setTitle(args.title)
|
|
||||||
console.log(`title should be '${args.title}'`);
|
|
||||||
return page;
|
|
||||||
}, { bypass_auth: false })
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue