skycel
95ea9f760a
Story 2.1: - Navbar sticky avec logo et liens de navigation - Menu hamburger pour mobile (< 1024px) - JavaScript vanilla pour toggle menu et effet scroll - Accessibilité complète (aria-expanded, Escape, focus) - Classes CSS nav-link et nav-link-active - Intégration dans index.php avec $currentPage Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
58 lines
2.0 KiB
PHP
58 lines
2.0 KiB
PHP
<?php
|
|
// index.php - Page Canary
|
|
|
|
require_once __DIR__ . '/includes/functions.php';
|
|
|
|
include_template('header', [
|
|
'pageTitle' => 'Portfolio en construction',
|
|
'pageDescription' => 'Mon portfolio de développeur web arrive bientôt. Restez connectés !'
|
|
]);
|
|
|
|
include_template('navbar', [
|
|
'currentPage' => 'home'
|
|
]);
|
|
?>
|
|
|
|
<main class="min-h-screen flex items-center justify-center">
|
|
<div class="container-content text-center py-20">
|
|
<!-- Titre principal -->
|
|
<h1 class="text-display text-text-primary mb-4 animate-fade-in">
|
|
Portfolio <span class="text-primary">en construction</span>
|
|
</h1>
|
|
|
|
<!-- Sous-titre -->
|
|
<p class="text-xl text-text-secondary mb-8 max-w-2xl mx-auto animate-fade-in animation-delay-100">
|
|
Je prépare quelque chose de génial pour vous.
|
|
<br>Revenez bientôt pour découvrir mes projets !
|
|
</p>
|
|
|
|
<!-- Badge de test -->
|
|
<div class="flex justify-center gap-4 mb-12 animate-fade-in animation-delay-200">
|
|
<span class="badge">PHP</span>
|
|
<span class="badge">Tailwind CSS</span>
|
|
<span class="badge badge-primary">En cours</span>
|
|
</div>
|
|
|
|
<!-- Card de test -->
|
|
<div class="card max-w-md mx-auto animate-fade-in animation-delay-300">
|
|
<div class="card-body">
|
|
<h3 class="text-subheading mb-2">Infrastructure validée</h3>
|
|
<p class="text-text-secondary mb-4">
|
|
PHP, Tailwind CSS et le serveur fonctionnent correctement.
|
|
</p>
|
|
<div class="flex gap-4 justify-center">
|
|
<span class="btn-primary">Bouton Primary</span>
|
|
<span class="btn-secondary">Bouton Secondary</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test responsive -->
|
|
<p class="text-text-muted text-sm mt-12">
|
|
Testé sur mobile, tablette et desktop.
|
|
</p>
|
|
</div>
|
|
</main>
|
|
|
|
<?php include_template('footer'); ?>
|