167 lines
4.7 KiB
HTML
167 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Kruiswoord Pro: Zweedse puzzel</title>
|
|
<link rel="stylesheet" href="styles_v3.css">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="app-container">
|
|
<header class="top-header">
|
|
<div class="header-left">
|
|
<button class="header-btn menu-btn" id="menuBtn">
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
<div class="level-info">
|
|
<span class="level-number">Niveau 1</span>
|
|
<div class="difficulty-stars">
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="far fa-star"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header-center">
|
|
<h1 class="app-title">Kruiswoord Pro</h1>
|
|
</div>
|
|
|
|
<div class="header-right">
|
|
<div class="coins-display">
|
|
<i class="fas fa-coins"></i>
|
|
<span id="coinsCount">100</span>
|
|
</div>
|
|
<button class="header-btn hints-btn" id="hintsBtn">
|
|
<i class="fas fa-lightbulb"></i>
|
|
<span class="hint-count">3</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Progress Bar -->
|
|
<div class="progress-container">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="progressFill"></div>
|
|
</div>
|
|
<span class="progress-text" id="progressText">0% voltooid</span>
|
|
</div>
|
|
|
|
<!-- Main Game Area -->
|
|
<main class="game-main">
|
|
<!-- Crossword Grid Container -->
|
|
<div class="puzzle-section">
|
|
<div class="grid-container" id="crosswordGrid">
|
|
<!-- Grid will be generated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bottom Controls -->
|
|
<div class="bottom-controls">
|
|
<button class="control-btn" id="checkBtn">
|
|
<i class="fas fa-check-circle"></i>
|
|
<span>Controleren</span>
|
|
</button>
|
|
|
|
<button class="control-btn" id="clearBtn">
|
|
<i class="fas fa-eraser"></i>
|
|
<span>Wissen</span>
|
|
</button>
|
|
|
|
<button class="control-btn hint-btn" id="revealLetterBtn">
|
|
<i class="fas fa-eye"></i>
|
|
<span>Letter</span>
|
|
</button>
|
|
|
|
<button class="control-btn" id="skipBtn">
|
|
<i class="fas fa-forward"></i>
|
|
<span>Overslaan</span>
|
|
</button>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Side Menu -->
|
|
<div class="side-menu" id="sideMenu">
|
|
<div class="menu-header">
|
|
<h3>Menu</h3>
|
|
<button class="close-menu" id="closeMenu">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="menu-items">
|
|
<button class="menu-item" id="dailyPuzzle">
|
|
<i class="fas fa-calendar-day"></i>
|
|
<span>Dagelijkse Puzzel</span>
|
|
<span class="bonus-indicator">+5</span>
|
|
</button>
|
|
|
|
<button class="menu-item" id="levelSelect">
|
|
<i class="fas fa-layer-group"></i>
|
|
<span>Kies Niveau</span>
|
|
</button>
|
|
|
|
<button class="menu-item" id="statistics">
|
|
<i class="fas fa-chart-bar"></i>
|
|
<span>Statistieken</span>
|
|
</button>
|
|
|
|
<button class="menu-item" id="settings">
|
|
<i class="fas fa-cog"></i>
|
|
<span>Instellingen</span>
|
|
</button>
|
|
|
|
<button class="menu-item" id="help">
|
|
<i class="fas fa-question-circle"></i>
|
|
<span>Hulp</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Success Modal -->
|
|
<div class="modal" id="successModal">
|
|
<div class="modal-content success-modal">
|
|
<div class="success-icon">
|
|
<i class="fas fa-trophy"></i>
|
|
</div>
|
|
<h2>Gefeliciteerd!</h2>
|
|
<p>Je hebt de puzzel opgelost!</p>
|
|
<div class="reward-info">
|
|
<div class="reward-item">
|
|
<i class="fas fa-star"></i>
|
|
<span>+3 Sterren</span>
|
|
</div>
|
|
<div class="reward-item">
|
|
<i class="fas fa-coins"></i>
|
|
<span>+50 Munten</span>
|
|
</div>
|
|
</div>
|
|
<div class="modal-buttons">
|
|
<button class="btn btn-primary" id="nextPuzzleBtn">Volgende Puzzel</button>
|
|
<button class="btn btn-secondary" id="closeModalBtn">Sluiten</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal" id="hintModal">
|
|
<div class="modal-content hint-modal">
|
|
<h3>Hint Gebruiken</h3>
|
|
<p>Wil je een hint gebruiken om een letter te onthullen?</p>
|
|
<div class="hint-cost">
|
|
<i class="fas fa-lightbulb"></i>
|
|
<span>Kosten: 1 hint</span>
|
|
</div>
|
|
<div class="modal-buttons">
|
|
<button class="btn btn-primary" id="useHintBtn">Gebruiken</button>
|
|
<button class="btn btn-secondary" id="cancelHintBtn">Annuleren</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="puzzleData.js"></script>
|
|
<script src="game.js"></script>
|
|
</body>
|
|
</html>
|