🚀 Template de Base
📋 Copier le Code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game UI - Animation Exercise</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
color: white;
min-height: 100vh;
overflow-x: hidden;
}
/* Splash Screen */
.splash-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
/* TODO: Animation d'apparition et disparition */
}
.logo {
font-size: 3rem;
font-weight: bold;
text-transform: uppercase;
/* TODO: Animation de logo (scale + rotate + glow) */
}
/* Game Container */
.game-container {
max-width: 400px;
margin: 0 auto;
padding: 2rem;
/* TODO: Animation d'entrée de page */
}
/* Header avec titre */
.game-title {
text-align: center;
font-size: 2rem;
font-weight: bold;
margin-bottom: 2rem;
background: linear-gradient(45deg, #f1c40f, #e67e22);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* TODO: Animation de pulsation et brillance */
}
/* Barre de vie */
.health-container {
margin-bottom: 2rem;
}
.health-label {
font-size: 0.9rem;
margin-bottom: 0.5rem;
opacity: 0.8;
}
.health-bar {
background: rgba(255,255,255,0.1);
height: 20px;
border-radius: 10px;
overflow: hidden;
position: relative;
}
.health-fill {
height: 100%;
background: linear-gradient(90deg, #e74c3c, #f39c12, #2ecc71);
border-radius: 10px;
transition: width 0.5s ease;
/* TODO: Animation de pulsation basée sur le niveau */
}
/* Score animé */
.score-container {
text-align: center;
margin-bottom: 2rem;
}
.score-value {
font-size: 2.5rem;
font-weight: bold;
color: #f1c40f;
/* TODO: Animation de comptage + bounce lors des gains */
}
/* Power-ups */
.powerups-container {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 2rem;
}
.powerup {
width: 60px;
height: 60px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
cursor: pointer;
transition: all 0.3s ease;
/* TODO: Animations différentes pour chaque power-up */
}
.powerup-lightning {
background: linear-gradient(135deg, #3498db, #2980b9);
/* TODO: Animation de rotation */
}
.powerup-fire {
background: linear-gradient(135deg, #e74c3c, #c0392b);
/* TODO: Animation de flamme (scale + glow) */
}
.powerup-gem {
background: linear-gradient(135deg, #9b59b6, #8e44ad);
/* TODO: Animation de brillance */
}
/* Boutons de jeu */
.game-buttons {
display: flex;
flex-direction: column;
gap: 1rem;
}
.btn {
padding: 1rem;
border: none;
border-radius: 12px;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.2s ease;
/* TODO: Micro-interactions (hover + active) */
}
.btn-primary {
background: linear-gradient(135deg, #2ecc71, #27ae60);
color: white;
}
.btn-secondary {
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
}
/* Notifications */
.notification {
position: fixed;
top: 2rem;
right: 2rem;
background: linear-gradient(135deg, #f39c12, #e67e22);
color: white;
padding: 0.8rem 1.2rem;
border-radius: 25px;
font-weight: bold;
transform: translateX(100%);
/* TODO: Animation slide-in/slide-out */
}
/* Loading spinner */
.loading {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
}
.spinner {
width: 50px;
height: 50px;
border: 4px solid rgba(255,255,255,0.3);
border-top: 4px solid #f1c40f;
border-radius: 50%;
/* TODO: Animation de rotation */
}
/* Keyframes à définir */
/* TODO: @keyframes pour splash screen */
/* TODO: @keyframes pour logo animation */
/* TODO: @keyframes pour health bar pulse */
/* TODO: @keyframes pour score counting */
/* TODO: @keyframes pour power-ups effects */
/* TODO: @keyframes pour notifications */
/* TODO: @keyframes pour celebration effects */
/* Responsive */
@media (max-width: 480px) {
.game-container {
padding: 1rem;
}
.game-title {
font-size: 1.5rem;
}
.powerup {
width: 50px;
height: 50px;
font-size: 1.2rem;
}
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
</style>
</head>
<body>
<!-- Splash Screen -->
<div class="splash-screen" id="splashScreen">
<div class="logo" id="logo">Super Game</div>
</div>
<!-- Game UI -->
<div class="game-container" id="gameContainer">
<h1 class="game-title">Super Game</h1>
<!-- Health Bar -->
<div class="health-container">
<div class="health-label">Health:</div>
<div class="health-bar">
<div class="health-fill" id="healthFill" style="width: 75%;"></div>
</div>
</div>
<!-- Score -->
<div class="score-container">
<div class="score-value" id="scoreValue">0</div>
<div style="font-size: 0.9rem; opacity: 0.7;">Score</div>
</div>
<!-- Power-ups -->
<div class="powerups-container">
<div class="powerup powerup-lightning" id="powerupLightning">⚡</div>
<div class="powerup powerup-fire" id="powerupFire">🔥</div>
<div class="powerup powerup-gem" id="powerupGem">💎</div>
</div>
<!-- Game Buttons -->
<div class="game-buttons">
<button class="btn btn-primary" id="playBtn">PLAY GAME</button>
<button class="btn btn-secondary" id="settingsBtn">Settings</button>
<button class="btn btn-secondary" id="leaderboardBtn">Leaderboard</button>
</div>
</div>
<!-- Notification -->
<div class="notification" id="notification">+100 XP Earned!</div>
<!-- Loading -->
<div class="loading" id="loading">
<div class="spinner"></div>
</div>
<script>
// TODO: JavaScript pour déclencher les animations
// Splash screen animation
function hideSplashScreen() {
// TODO: Implémenter la disparition du splash screen
}
// Score animation
function animateScore(targetScore) {
// TODO: Animation de comptage du score
}
// Health bar animation
function updateHealth(percentage) {
// TODO: Animer la barre de vie
}
// Notification system
function showNotification(message) {
// TODO: Afficher une notification animée
}
// Power-up effects
function activatePowerup(type) {
// TODO: Animation d'activation des power-ups
}
// Initialize game
setTimeout(hideSplashScreen, 3000);
setTimeout(() => animateScore(12450), 4000);
</script>
</body>
</html>