121 lines
3.9 KiB
HTML
121 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Nederlandse Arroword Kruiswoordpuzzel</title>
|
|
<link rel="stylesheet" href="styles.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 -->
|
|
<header class="app-header">
|
|
<h1><i class="fas fa-puzzle-piece"></i> Nederlandse Arroword</h1>
|
|
<div class="header-controls">
|
|
<button id="newPuzzleBtn" class="btn btn-primary">
|
|
<i class="fas fa-plus"></i> Nieuwe Puzzel
|
|
</button>
|
|
<button id="settingsBtn" class="btn btn-secondary">
|
|
<i class="fas fa-cog"></i> Instellingen
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<!-- Puzzle Grid Container -->
|
|
<div class="puzzle-container">
|
|
<div id="crosswordGrid" class="crossword-grid"></div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar">
|
|
<!-- Word Solver Tools -->
|
|
<div class="solver-tools">
|
|
<h3><i class="fas fa-lightbulb"></i> Hulp Gereedschap</h3>
|
|
|
|
<!-- Letter Pattern Solver -->
|
|
<div class="solver-section">
|
|
<h4>Letter Patroon</h4>
|
|
<input type="text" id="patternInput" placeholder="Bijv: H_L_O" maxlength="20">
|
|
<button id="patternSolveBtn" class="btn btn-help">
|
|
<i class="fas fa-search"></i> Zoek
|
|
</button>
|
|
<div id="patternResults" class="solver-results"></div>
|
|
</div>
|
|
|
|
<!-- Anagram Solver -->
|
|
<div class="solver-section">
|
|
<h4>Anagram Oplosser</h4>
|
|
<input type="text" id="anagramInput" placeholder="Bijv: OLHLO" maxlength="15">
|
|
<button id="anagramSolveBtn" class="btn btn-help">
|
|
<i class="fas fa-random"></i> Ontcijfer
|
|
</button>
|
|
<div id="anagramResults" class="solver-results"></div>
|
|
</div>
|
|
|
|
<!-- Progress Tracker -->
|
|
<div class="progress-section">
|
|
<h4>Voortgang</h4>
|
|
<div class="progress-bar">
|
|
<div id="progressFill" class="progress-fill"></div>
|
|
</div>
|
|
<span id="progressText">0% voltooid</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Game Controls -->
|
|
<div class="game-controls">
|
|
<button id="checkAnswersBtn" class="btn btn-success">
|
|
<i class="fas fa-check"></i> Controleer
|
|
</button>
|
|
<button id="revealLetterBtn" class="btn btn-warning">
|
|
<i class="fas fa-eye"></i> Onthul Letter
|
|
</button>
|
|
<button id="clearGridBtn" class="btn btn-danger">
|
|
<i class="fas fa-trash"></i> Wissen
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
</main>
|
|
|
|
<!-- Settings Modal -->
|
|
<div id="settingsModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close">×</span>
|
|
<h2>Instellingen</h2>
|
|
<div class="settings-group">
|
|
<label for="difficultySelect">Moeilijkheidsgraad:</label>
|
|
<select id="difficultySelect">
|
|
<option value="easy">Gemakkelijk</option>
|
|
<option value="medium" selected>Normaal</option>
|
|
<option value="hard">Moeilijk</option>
|
|
</select>
|
|
</div>
|
|
<div class="settings-group">
|
|
<label for="gridSizeSelect">Raster Grootte:</label>
|
|
<select id="gridSizeSelect">
|
|
<option value="11x16" selected>11x16 (Standaard)</option>
|
|
<option value="13x18">13x18</option>
|
|
<option value="15x20">15x20</option>
|
|
</select>
|
|
</div>
|
|
<div class="settings-group">
|
|
<label for="languageSelect">Taal:</label>
|
|
<select id="languageSelect">
|
|
<option value="nl" selected>Nederlands</option>
|
|
<option value="en">English</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="puzzleData.js"></script>
|
|
<script src="solvers.js"></script>
|
|
<script src="crossword.js"></script>
|
|
</body>
|
|
</html>
|