113 lines
3.9 KiB
HTML
113 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>CatDoku - Puzzle dei Gatti</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<header>
|
|
<div class="header-left">
|
|
<button id="btn-back" class="icon-btn" onclick="window.location.href='leaderboard.html'">🏆</button>
|
|
</div>
|
|
<div class="header-center">
|
|
<div class="stat">
|
|
<span class="stat-label">Livello</span>
|
|
<span class="stat-value" id="level-display">1</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-label">Punteggio</span>
|
|
<span class="stat-value" id="score-display">0</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-label">Tempo</span>
|
|
<span class="stat-value" id="time-display">0:00</span>
|
|
</div>
|
|
</div>
|
|
<div class="header-right">
|
|
<span class="player-name" id="player-name-display"></span>
|
|
<button id="btn-settings" class="icon-btn">⚙</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="info-bar">
|
|
<div class="progress">
|
|
<span class="cat-icon">🐱</span>
|
|
<span id="cats-display">0/0</span>
|
|
</div>
|
|
<div class="errors" id="errors-display">
|
|
<span class="heart">⚡</span>
|
|
<span class="heart">⚡</span>
|
|
<span class="heart">⚡</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rules-bar">
|
|
<span class="rule">1 gatto per colore</span>
|
|
<span class="rule">1 gatto per riga e colonna</span>
|
|
<span class="rule">I gatti non possono essere adiacenti</span>
|
|
</div>
|
|
|
|
<div id="grid-container" class="grid-container"></div>
|
|
|
|
<div class="controls">
|
|
<button id="btn-eraser" class="tool-btn" title="Gomma">✎</button>
|
|
<button id="btn-hint" class="tool-btn" title="Suggerimento">
|
|
<span class="hint-icon">💡</span>
|
|
<span class="hint-count" id="hint-count">3</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="size-selector" id="size-selector">
|
|
<label>Dimensione griglia:</label>
|
|
<select id="grid-size">
|
|
<option value="6">6 x 6</option>
|
|
<option value="7">7 x 7</option>
|
|
<option value="8" selected>8 x 8</option>
|
|
<option value="9">9 x 9</option>
|
|
<option value="10">10 x 10</option>
|
|
<option value="11">11 x 11</option>
|
|
<option value="12">12 x 12</option>
|
|
</select>
|
|
<button id="btn-new-game">Nuova Partita</button>
|
|
</div>
|
|
|
|
<div id="modal-overlay" class="modal-overlay hidden">
|
|
<div class="modal" id="modal-content">
|
|
<h2 id="modal-title"></h2>
|
|
<p id="modal-message"></p>
|
|
<button id="modal-btn" class="modal-btn"></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="premium-overlay" class="modal-overlay hidden">
|
|
<div class="modal premium-modal">
|
|
<div class="premium-icon">👑</div>
|
|
<h2>Versione Premium</h2>
|
|
<p>Hai esaurito i suggerimenti gratuiti!</p>
|
|
<p class="premium-text">Acquista la versione Premium per suggerimenti illimitati e molte altre funzionalità.</p>
|
|
<div class="premium-timer">
|
|
<span>Disponibile tra: </span>
|
|
<span id="premium-timer" class="timer-value">5</span>
|
|
<span> secondi</span>
|
|
</div>
|
|
<button id="premium-btn" class="modal-btn premium-btn" disabled>OK</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="name-input-overlay" class="modal-overlay">
|
|
<div class="modal name-modal">
|
|
<h2>Benvenuto in CatDoku!</h2>
|
|
<p>Inserisci il tuo nome per iniziare:</p>
|
|
<input type="text" id="name-input" class="name-input" placeholder="Il tuo nome..." maxlength="20">
|
|
<button id="name-submit-btn" class="modal-btn">Inizia a Giocare</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="game.js"></script>
|
|
</body>
|
|
</html>
|