-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsettings.html
79 lines (71 loc) · 3.85 KB
/
settings.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="de">
<head>
<!-- Zeichencodierung und grundlegende Metadaten -->
<meta charset="UTF-8">
<title>Einstellungen - Interaktive Schatzsuche</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Einbindung von Bootstrap CSS für responsive Design und vorgefertigte Stile -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Eigene CSS-Datei für zusätzliche Stile -->
<link rel="stylesheet" href="Styles/styles.css">
</head>
<body>
<!-- Seitenkopf mit Navigationsleiste -->
<header>
<nav class="navbar">
<!-- Zurück-Button, der zur Startseite führt -->
<a href="index.html" class="navbar-button-back-button">⬅️</a>
<!-- Button zum Starten des Spiels, führt zur Karte -->
<a href="karte.html" class="navbar-button play-button">Spiel starten</a>
<!-- Container für die rechten Navigationsbuttons -->
<div class="navbar-right">
<!-- Link zu den Erfolge-Seite mit einem Trophy-Icon -->
<a href="achievements.html" class="navbar-button">
<img src="Images/trophy-cup-black-shape.svg" alt="Erfolge">
</a>
<!-- Link zu den Einstellungen mit einem Zahnrad-Icon -->
<a href="settings.html" class="navbar-button">
<img src="Images/icons8-einstellungen.svg" alt="Einstellungen">
</a>
</div>
</nav>
</header>
<!-- Hauptinhalt der Seite -->
<main class="container">
<div class="gray-part">
<div class="einstellungen">
<!-- Seitentitel -->
<h1 class="page-title">Einstellungen</h1>
<!-- Formular zur Anpassung der Spiel-Einstellungen -->
<form id="settingsForm">
<!-- Abschnitt für die Spielzeit pro Runde -->
<section class="mb-4" aria-labelledby="time-heading">
<h2 id="time-heading" class="h4">Spielzeit pro Runde (in Minuten)</h2>
<label for="gameTime" class="form-label">Legen Sie fest, wie lange eine Runde dauern soll:</label>
<input type="number" id="gameTime" name="gameTime" class="form-control" min="1" max="60" value="5">
</section>
<!-- Abschnitt für die maximale Entfernung der Rätsel -->
<section class="mb-4" aria-labelledby="distance-heading">
<h2 id="distance-heading" class="h4">Maximale Entfernung der Rätsel (in Kilometern)</h2>
<label for="maxDistance" class="form-label">Legen Sie fest, wie weit entfernt Rätsel liegen dürfen:</label>
<input type="number" id="maxDistance" name="maxDistance" class="form-control" min="0.1" max="20" step="0.1" value="1">
</section>
<!-- Abschnitt für die Anzahl der Runden -->
<section class="mb-4" aria-labelledby="rounds-heading">
<h2 id="rounds-heading" class="h4">Anzahl der Runden</h2>
<label for="numRounds" class="form-label">Wie viele Runden möchten Sie spielen?</label>
<input type="number" id="numRounds" name="numRounds" class="form-control" min="1" max="10" value="3">
</section>
<!-- Button zum Absenden des Formulars -->
<button type="submit" class="btn btn-primary mt-3" aria-label="Einstellungen speichern">Speichern</button>
<!-- Nachricht, die nach dem Speichern angezeigt wird -->
<span id="saveMessage" class="save-success" style="display:none; color:green; margin-left:10px;">Erfolgreich gespeichert!</span>
</form>
</div>
</div>
</main>
<!-- Einbindung der JavaScript-Datei für die Einstellungen-Funktionalität -->
<script src="Scripts/settings.js"></script>
</body>
</html>