128 lines
No EOL
5.4 KiB
HTML
128 lines
No EOL
5.4 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="IceBreaker - Le jeu de navigation arctique. Pilotez votre cargo à travers les eaux glaciales et évitez les icebergs !">
|
|
<meta name="theme-color" content="#0a1929">
|
|
<title>IceBreaker - Défi Arctique</title>
|
|
<link rel="stylesheet" href="./assets/css/main.css">
|
|
<link rel="stylesheet" href="./assets/css/index.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
|
|
<body id="indexBody">
|
|
|
|
<!-- Particules de neige -->
|
|
<div id="snow-container" aria-hidden="true"></div>
|
|
|
|
<!-- Background arctique -->
|
|
<div id="arctic-background">
|
|
<div id="arctic-aurora"></div>
|
|
<div id="arctic-wave"></div>
|
|
<div id="arctic-wave-2"></div>
|
|
</div>
|
|
|
|
<main class="main-content">
|
|
<div class="hub-container glassmorphism-panel">
|
|
|
|
<!-- Header avec logo -->
|
|
<header>
|
|
<div class="logo-container">
|
|
<span class="logo-icon">🚢</span>
|
|
<h1 id="main-title">IceBreaker</h1>
|
|
</div>
|
|
<p id="sub-title" class="welcome-text">Traversez les eaux glacées arctiques et livrez votre précieuse
|
|
cargaison.</p>
|
|
</header>
|
|
|
|
<!-- Section Capitaine (nouveau joueur) -->
|
|
<section id="captain-section" class="hidden">
|
|
<div class="captain-welcome">
|
|
<h2><span class="icon">⚓</span> Bienvenue à bord, Matelot !</h2>
|
|
<p>Avant de prendre la mer, présentez-vous. Comment devons-nous vous appeler, Capitaine ?</p>
|
|
<div class="input-group">
|
|
<input type="text" id="captain-name-input" placeholder="Entrez votre nom de capitaine..."
|
|
maxlength="30" autocomplete="off">
|
|
<button id="save-captain-btn" class="btn-primary">
|
|
<span>Embarquer</span>
|
|
<span class="btn-icon">→</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section Sélection de difficulté -->
|
|
<section id="difficulty-selection">
|
|
<h2> Nouvelle Traversée</h2>
|
|
<p id="captain-greeting" class="greeting-text"></p>
|
|
<div class="difficulty-options">
|
|
<button class="diff-btn" data-difficulty="1">
|
|
<span class="diff-icon">❄️</span>
|
|
<span class="diff-name">Eaux Calmes</span>
|
|
<span class="diff-desc">Pour les nouveaux marins</span>
|
|
</button>
|
|
<button class="diff-btn" data-difficulty="2">
|
|
<span class="diff-icon">🌊</span>
|
|
<span class="diff-name">Mer de Béring</span>
|
|
<span class="diff-desc">Navigateur confirmé</span>
|
|
</button>
|
|
<button class="diff-btn" data-difficulty="3">
|
|
<span class="diff-icon">⚡</span>
|
|
<span class="diff-name">Tempête Polaire</span>
|
|
<span class="diff-desc">Pour les plus téméraires</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section Leaderboard -->
|
|
<section id="leaderboard">
|
|
<h2><span class="icon">🏆</span> Journal de Bord</h2>
|
|
<div class="leaderboard-content">
|
|
<table id="results-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Rang</th>
|
|
<th>Capitaine</th>
|
|
<th>Score</th>
|
|
<th>Livraison</th>
|
|
<th>Difficulté</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="results-table-body">
|
|
<tr>
|
|
<td colspan="5" class="no-data">Chargement des archives...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contrôle Audio discret -->
|
|
<div id="audio-controls" class="audio-panel">
|
|
<button id="audio-toggle" class="audio-btn" title="Réglages audio">
|
|
<span class="audio-icon">🔊</span>
|
|
</button>
|
|
<div id="audio-slider-container" class="audio-slider-wrap hidden">
|
|
<label for="master-volume">Volume</label>
|
|
<input type="range" id="master-volume" min="0" max="100" value="80">
|
|
<span id="volume-value">80%</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Audio -->
|
|
<audio id="background-audio" loop preload="auto">
|
|
<source src="./assets/sounds/menu-ambiance.mp3" type="audio/mpeg">
|
|
</audio>
|
|
|
|
<script src="./assets/js/storage.js"></script>
|
|
<script src="./assets/js/audio-manager.js"></script>
|
|
<script src="./assets/js/index.js"></script>
|
|
</body>
|
|
|
|
</html> |