-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsettings.html
104 lines (100 loc) · 3.94 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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<!--
Copyright 2024 nigjo.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html>
<head>
<title data-l10nkey="pagetitle.settings">Docks Runner - Settings</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" sizes="any" href="res/dock_runner.svg" type="image/svg+xml">
<link rel="stylesheet" href="res/game.css"/>
<script type="module">
import LM from './res/m_lang.js';
LM.updatePage();
LM.fillSelect(document.getElementById('localeSelection'));
</script>
<script src="res/settings.js" type="module"></script>
<style>body{
background-color: royalblue;
color:white;
.settings{
display:block;
#gamedata .row{
display: inline-block;
}
}
}
@media ( orientation: portrait){
#player{
display:grid;
grid-template-columns: auto 1fr;
gap: 0 .5em;
h2{
grid-column:1/3;
}
}
}
nav{
margin-bottom: 1.5em;
.button{
display:inline-block;
}
}
</style>
</head>
<body class="bgWater">
<header>
<div id="logo" class="bgWay">
<h1><a href="./index.html">Docks Runner</a></h1>
<h2 class="bgWall" data-l10nkey="settings.title">Einstellungen</h2>
</div>
</header>
<main class="settings">
<form name="settings" id="settings">
<section id="gamedata">
<h1 data-l10nkey="settings.board">Spielfeld</h1>
<div class="row">
<label><input type="radio" value="6x10" checked name="gamesize"> <span data-l10nkey="settings.size.default">Standard</span></label>
<label><input type="radio" value="8x12" name="gamesize"> <span data-l10nkey="settings.size.bigger">Größer</span></label>
<label><input type="radio" value="10x16" name="gamesize"> <span data-l10nkey="settings.size.maximal">Max</span></label>
</div><div class="row">
<label><input type="radio" value="custom" name="gamesize"> <span data-l10nkey="settings.size.custom">Custom</span>:</label>
<input placeholder="width x height" pattern="[0-9]+ *[xX] *[0-9]+" name="customsize">
</div>
</section>
<section id="gameopts">
<h1 data-l10nkey="settings.gameoptions">Spieloptionen</h1>
<div class="row">
<label><input type="radio" value="timing" checked name="gamemode"> <span data-l10nkey="settings.mode.timing">Zeitspiel</span></label>
<label><input type="radio" value="search" name="gamemode"> <span data-l10nkey="settings.mode.search">Suchspiel</span></label>
</div>
</section>
<section id="appopts">
<h1 data-l10nkey="settings.appoptions">Weitere Einstellungen</h1>
<div class="row">
<label><span data-l10nkey="settings.locale">Sprache</span> <select name="locale" id="localeSelection"></select></label>
</div>
</section>
</form>
</main>
<nav>
<div id="btnSave" class="bgWay button" data-l10nkey="settings.save">Speichern</div>
<div id="btnBack" class="bgWay button" data-l10nkey="settings.back">Zurück</div>
</nav>
<footer>
© Nigjo Iqn
- <a href="https://github.com/nigjo/mazegen/" data-l10nkey="index.github">View on GitHub</a>
- <a href="code.html" data-l10nkey="index.share">Teilen</a>
</footer>
</body>
</html>