rparodi/ft_transcendence
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(frontend/frontpage): adding a real frontpage of "site de boule"

Browse source
This commit is contained in:
Raphaël 2025-12-29 18:19:55 +01:00 • committed by GitHub
commit 926677223c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 125 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.envrc
View file

@ -1 +0,0 @@
use flake "path:$(realpath -m .)"

6
frontend/index.html
View file

@ -5,9 +5,11 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ft Boules</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
</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
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="/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="/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>
</nav>
</aside>

115
frontend/src/pages/root/root.html
View file

@ -1,15 +1,112 @@
<div class="bg-gradient-to-br from-slate-50 to-slate-100 text-slate-800">
<!-- Hero -->
<section class="max-w-7xl mx-auto px-6 py-20 grid lg:grid-cols-2 gap-12 items-center">
<div>
Welcome a to <span> The Site de Boule </span>
<h2 class="text-5xl font-extrabold leading-tight mb-6">
A Website<br />
<span class="text-yellow-500">Entirely About Balls</span>
</h2>
<p class="text-lg text-slate-600 mb-8">
Tennis balls. Ping pong balls. Spherical legends of sport and chaos.
If it bounces, it belongs here.
<br />
<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>
Welcome a to <span> The Site de Boule </span>
<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>
<div>
Welcome a to <span> The Site de Boule </span>
</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>
<div>
Welcome a to <span> The Site de Boule </span>
<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>
<div>
Welcome a to <span> The Site de Boule </span>
<!-- 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>

25
frontend/src/pages/root/root.ts
View file

@ -1,18 +1,11 @@
import { addRoute, setTitle, type RouteHandlerParams } from "@app/routing";
import page from './root.html?raw'
import { updateUser } from "@app/auth";
import { addRoute, setTitle } from "@app/routing";
import page from "./root.html?raw";
addRoute('/', async (_: string): Promise<string> => {
let user = await updateUser();
if (user === null)
setTitle(`Welcome`)
else
setTitle(`Welcome ${user.guest ? '[GUEST] ' : ''}${user.name}`);
addRoute(
"/",
async (_: string): Promise<string> => {
setTitle(`Welcome`);
return page;
}, { 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 })
},
{ bypass_auth: true },
);