index.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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>aschaffenburg.fun</title>
		<script src="init.js" type="module" defer></script>
		<meta
			name="viewport"
			content="initial-scale=1,maximum-scale=1,user-scalable=no"
		/>
		<style>
			body {
				margin: 0;
				padding: 0;
			}

			#map {
				position: absolute;
				top: 0;
				bottom: 0;
				width: 100%;
			}

			@font-face {
				font-family: exo;
				src: url(exo-font/Exo-Regular.otf);
			}

			#actions-left {
				left: 0px;
			}

			#actions-right {
				right: 0px;
			}

			.actions {
				position: fixed;
				bottom: 0px;
			}

			*::-webkit-scrollbar-thumb {
				visibility: visible;
			}

			.action {
				width: 4em;
				height: 4em;
				margin: 0.4em 0.4em;
				border-radius: 10px;
				/*border-color: #7fb82e;
				border-style: solid;
				border-width: 0.2em;*/
				outline: 0.1em solid #7fb82e;
				background-color: #d9e9c6;
				cursor: pointer;
				display: block;
			}

			.colorize {
				filter: invert(55%) sepia(98%) saturate(322%) hue-rotate(43deg)
					brightness(97%) contrast(90%);
			}

			@keyframes blink {
				0% {
					opacity: 100%;
				}
				70% {
					opacity: 0%;
				}
				100% {
					opacity: 100%;
				}
			}

			* {
				font-family: exo;
			}

			.ui-button {
				/*background-color: #bbeb82;
				border-color: #7fb82e;
				border-style: solid;*/
				background-color: #7fb82e;
				border-style: none;
				font-size: 1em;
				border-radius: 10px;
				height: 2em;
				cursor: pointer;
			}

			.ui-button:hover {
				background-image: linear-gradient(rgb(255 255 255/10%) 0 0);
			}

			.ui-button:active {
				background-image: linear-gradient(rgb(255 255 255/30%) 0 0);
			}
		</style>
	</head>
	<body>
		<div id="map"></div>
		<div id="actions-left" class="actions">
			<div class="action" id="action-info" style="position: relative">
				<img
					class="colorize"
					src="info.svg"
					width="85%"
					style="position: absolute; left: 7%; top: 7%"
				/>
			</div>
			<div class="action" id="action-timeline">
				<img class="colorize" src="marker.svg" />
			</div>
		</div>
		<div id="actions-right" class="actions">
			<div class="action" id="action-settings">
				<img class="colorize" src="gear.svg" />
			</div>
			<div class="action" id="action-model">
				<img id="model-image" width="100%" style="border-radius: 10px" />
			</div>
		</div>
	</body>
</html>