313 lines
15 KiB
HTML
313 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="description" content="Amusement — Showcase de visuels frontend modernes, animations et effets premium." />
|
|
<meta name="theme-color" content="#0a0a1a" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
|
|
<title>Amusement — Frontend Visual Showcase</title>
|
|
|
|
<link rel="manifest" href="manifest.json" />
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎨</text></svg>" />
|
|
<link rel="apple-touch-icon" href="icons/icon-192.png" />
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
|
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<!-- ─── Cursor glow effect ─── -->
|
|
<div id="cursor-glow" aria-hidden="true"></div>
|
|
|
|
<!-- ─── Floating particles background ─── -->
|
|
<canvas id="particles-canvas" aria-hidden="true"></canvas>
|
|
|
|
<!-- ─── Navigation ─── -->
|
|
<nav id="main-nav" class="glass-nav" role="navigation">
|
|
<div class="nav-brand">
|
|
<span class="brand-icon">🎨</span>
|
|
<span class="brand-text">Amusement</span>
|
|
</div>
|
|
<div class="nav-links">
|
|
<a href="#hero" class="nav-link active" data-section="hero">Accueil</a>
|
|
<a href="#cards" class="nav-link" data-section="cards">Cartes</a>
|
|
<a href="#stats" class="nav-link" data-section="stats">Stats</a>
|
|
<a href="#gallery" class="nav-link" data-section="gallery">Galerie</a>
|
|
<a href="#contact" class="nav-link" data-section="contact">Contact</a>
|
|
</div>
|
|
<button id="nav-toggle" class="nav-toggle" aria-label="Menu">
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
</nav>
|
|
|
|
<!-- ─── Mobile menu ─── -->
|
|
<div id="mobile-menu" class="mobile-menu glass-panel">
|
|
<a href="#hero" class="mobile-link" data-section="hero">Accueil</a>
|
|
<a href="#cards" class="mobile-link" data-section="cards">Cartes</a>
|
|
<a href="#stats" class="mobile-link" data-section="stats">Stats</a>
|
|
<a href="#gallery" class="mobile-link" data-section="gallery">Galerie</a>
|
|
<a href="#contact" class="mobile-link" data-section="contact">Contact</a>
|
|
</div>
|
|
|
|
<main>
|
|
<!-- ─── Hero Section ─── -->
|
|
<section id="hero" class="section hero-section">
|
|
<div class="hero-content">
|
|
<div class="hero-badge">✨ Frontend Visual Showcase</div>
|
|
<h1 class="hero-title">
|
|
<span class="title-line">Expériences</span>
|
|
<span class="title-line gradient-text">Visuelles</span>
|
|
<span class="title-line">Modernes</span>
|
|
</h1>
|
|
<p class="hero-description">
|
|
Une collection de composants UI premium avec glassmorphism,
|
|
animations fluides et design dark-mode raffiné.
|
|
</p>
|
|
<div class="hero-actions">
|
|
<a href="#cards" class="btn btn-primary">
|
|
<span>Explorer</span>
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
</a>
|
|
<a href="#contact" class="btn btn-ghost">En savoir plus</a>
|
|
</div>
|
|
</div>
|
|
<div class="hero-visual">
|
|
<div class="floating-card card-1 glass-card">
|
|
<div class="mini-chart"></div>
|
|
<span>Performances</span>
|
|
</div>
|
|
<div class="floating-card card-2 glass-card">
|
|
<div class="mini-bars"></div>
|
|
<span>Analytics</span>
|
|
</div>
|
|
<div class="floating-card card-3 glass-card">
|
|
<div class="mini-ring"></div>
|
|
<span>Engagement</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ─── Feature Cards Section ─── -->
|
|
<section id="cards" class="section cards-section">
|
|
<div class="section-header">
|
|
<span class="section-tag">Composants</span>
|
|
<h2 class="section-title">Cartes <span class="gradient-text">Interactives</span></h2>
|
|
<p class="section-subtitle">Survolez pour découvrir les effets de profondeur et de lumière</p>
|
|
</div>
|
|
<div class="cards-grid">
|
|
<article class="feature-card glass-card" id="card-design">
|
|
<div class="card-glow"></div>
|
|
<div class="card-icon">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
|
|
</div>
|
|
<h3 class="card-title">Design System</h3>
|
|
<p class="card-text">Tokens de design cohérents, palette de couleurs harmonieuse et typographie soignée.</p>
|
|
<div class="card-metrics">
|
|
<div class="metric"><span class="metric-value">24</span><span class="metric-label">composants</span></div>
|
|
<div class="metric"><span class="metric-value">8</span><span class="metric-label">variantes</span></div>
|
|
</div>
|
|
</article>
|
|
<article class="feature-card glass-card" id="card-motion">
|
|
<div class="card-glow"></div>
|
|
<div class="card-icon">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
|
|
</div>
|
|
<h3 class="card-title">Micro-Animations</h3>
|
|
<p class="card-text">Transitions fluides et animations GPU-accélérées pour une expérience vivante.</p>
|
|
<div class="card-metrics">
|
|
<div class="metric"><span class="metric-value">60</span><span class="metric-label">fps</span></div>
|
|
<div class="metric"><span class="metric-value"><16</span><span class="metric-label">ms</span></div>
|
|
</div>
|
|
</article>
|
|
<article class="feature-card glass-card" id="card-glass">
|
|
<div class="card-glow"></div>
|
|
<div class="card-icon">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>
|
|
</div>
|
|
<h3 class="card-title">Glassmorphism</h3>
|
|
<p class="card-text">Effets de verre dépoli avec transparence, blur et bordures lumineuses.</p>
|
|
<div class="card-metrics">
|
|
<div class="metric"><span class="metric-value">CSS</span><span class="metric-label">natif</span></div>
|
|
<div class="metric"><span class="metric-value">GPU</span><span class="metric-label">accel.</span></div>
|
|
</div>
|
|
</article>
|
|
<article class="feature-card glass-card" id="card-responsive">
|
|
<div class="card-glow"></div>
|
|
<div class="card-icon">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/></svg>
|
|
</div>
|
|
<h3 class="card-title">Responsive</h3>
|
|
<p class="card-text">Layouts fluides qui s'adaptent à tous les écrans, mobile-first et performants.</p>
|
|
<div class="card-metrics">
|
|
<div class="metric"><span class="metric-value">100</span><span class="metric-label">score</span></div>
|
|
<div class="metric"><span class="metric-value">PWA</span><span class="metric-label">ready</span></div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ─── Stats Section ─── -->
|
|
<section id="stats" class="section stats-section">
|
|
<div class="section-header">
|
|
<span class="section-tag">Métriques</span>
|
|
<h2 class="section-title">Statistiques <span class="gradient-text">en Direct</span></h2>
|
|
<p class="section-subtitle">Compteurs animés avec intersection observer</p>
|
|
</div>
|
|
<div class="stats-grid">
|
|
<div class="stat-card glass-card">
|
|
<span class="stat-number" data-target="1284">0</span>
|
|
<span class="stat-label">Composants créés</span>
|
|
<div class="stat-bar"><div class="stat-fill" data-width="87"></div></div>
|
|
</div>
|
|
<div class="stat-card glass-card">
|
|
<span class="stat-number" data-target="99">0</span>
|
|
<span class="stat-label">Performance Score</span>
|
|
<div class="stat-bar"><div class="stat-fill" data-width="99"></div></div>
|
|
</div>
|
|
<div class="stat-card glass-card">
|
|
<span class="stat-number" data-target="42">0</span>
|
|
<span class="stat-label">Animations fluides</span>
|
|
<div class="stat-bar"><div class="stat-fill" data-width="72"></div></div>
|
|
</div>
|
|
<div class="stat-card glass-card">
|
|
<span class="stat-number" data-target="365">0</span>
|
|
<span class="stat-label">Jours d'uptime</span>
|
|
<div class="stat-bar"><div class="stat-fill" data-width="100"></div></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ─── Gallery Section ─── -->
|
|
<section id="gallery" class="section gallery-section">
|
|
<div class="section-header">
|
|
<span class="section-tag">Visuels</span>
|
|
<h2 class="section-title">Galerie <span class="gradient-text">Immersive</span></h2>
|
|
<p class="section-subtitle">Grille adaptative avec effets de survol et transitions</p>
|
|
</div>
|
|
<div class="gallery-grid">
|
|
<div class="gallery-item glass-card" style="--hue: 260;">
|
|
<div class="gallery-visual">
|
|
<div class="abstract-shape shape-a"></div>
|
|
</div>
|
|
<div class="gallery-overlay">
|
|
<span class="gallery-tag">Gradient Mesh</span>
|
|
</div>
|
|
</div>
|
|
<div class="gallery-item gallery-wide glass-card" style="--hue: 320;">
|
|
<div class="gallery-visual">
|
|
<div class="abstract-shape shape-b"></div>
|
|
</div>
|
|
<div class="gallery-overlay">
|
|
<span class="gallery-tag">Aurora Effect</span>
|
|
</div>
|
|
</div>
|
|
<div class="gallery-item glass-card" style="--hue: 180;">
|
|
<div class="gallery-visual">
|
|
<div class="abstract-shape shape-c"></div>
|
|
</div>
|
|
<div class="gallery-overlay">
|
|
<span class="gallery-tag">Fluid Blob</span>
|
|
</div>
|
|
</div>
|
|
<div class="gallery-item glass-card" style="--hue: 30;">
|
|
<div class="gallery-visual">
|
|
<div class="abstract-shape shape-d"></div>
|
|
</div>
|
|
<div class="gallery-overlay">
|
|
<span class="gallery-tag">Neon Glow</span>
|
|
</div>
|
|
</div>
|
|
<div class="gallery-item gallery-wide glass-card" style="--hue: 140;">
|
|
<div class="gallery-visual">
|
|
<div class="abstract-shape shape-e"></div>
|
|
</div>
|
|
<div class="gallery-overlay">
|
|
<span class="gallery-tag">Particle Wave</span>
|
|
</div>
|
|
</div>
|
|
<div class="gallery-item glass-card" style="--hue: 210;">
|
|
<div class="gallery-visual">
|
|
<div class="abstract-shape shape-f"></div>
|
|
</div>
|
|
<div class="gallery-overlay">
|
|
<span class="gallery-tag">Glass Prism</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ─── Contact / CTA Section ─── -->
|
|
<section id="contact" class="section contact-section">
|
|
<div class="contact-container glass-card">
|
|
<div class="contact-info">
|
|
<span class="section-tag">Contact</span>
|
|
<h2 class="section-title">Restons en <span class="gradient-text">Contact</span></h2>
|
|
<p class="contact-text">Envoyez un message pour en savoir plus sur ces composants et techniques frontend.</p>
|
|
<div class="contact-details">
|
|
<div class="contact-item">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
|
|
<span>hello@amusement.dev</span>
|
|
</div>
|
|
<div class="contact-item">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
|
<span>Paris, France</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<form id="contact-form" class="contact-form" onsubmit="return false;">
|
|
<div class="form-group">
|
|
<label for="name">Nom</label>
|
|
<input type="text" id="name" class="form-input" placeholder="Votre nom" required />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="email">Email</label>
|
|
<input type="email" id="email" class="form-input" placeholder="votre@email.com" required />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="message">Message</label>
|
|
<textarea id="message" class="form-input" rows="4" placeholder="Votre message..." required></textarea>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary btn-full" id="submit-btn">
|
|
<span>Envoyer</span>
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7z"/></svg>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- ─── Footer ─── -->
|
|
<footer class="site-footer glass-nav">
|
|
<div class="footer-content">
|
|
<div class="footer-brand">
|
|
<span class="brand-icon">🎨</span>
|
|
<span>Amusement</span>
|
|
</div>
|
|
<p class="footer-copy">© 2026 Amusement PWA — Frontend Visual Showcase</p>
|
|
<div class="footer-links">
|
|
<a href="#hero">Accueil</a>
|
|
<a href="#cards">Cartes</a>
|
|
<a href="#gallery">Galerie</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- ─── Toast notification ─── -->
|
|
<div id="toast" class="toast" role="alert" aria-live="polite"></div>
|
|
|
|
<!-- ─── Install PWA prompt ─── -->
|
|
<div id="install-prompt" class="install-prompt glass-card" hidden>
|
|
<span>📲 Installer l'application</span>
|
|
<button id="install-btn" class="btn btn-primary btn-sm">Installer</button>
|
|
<button id="dismiss-install" class="btn-dismiss" aria-label="Fermer">✕</button>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|