-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
159 lines (140 loc) · 8.16 KB
/
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AdLer 0.1 UI MockUp</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
fontFamily: {
sans: ['Roboto', 'sans-serif'],
},
extend: {
dropShadow: {
'adler': '2px 2px rgba(0, 0, 0, 0.9)',
'none': '0 0 0 rgba(0,0,0,0)'
},
colors: {
babylonbg: "#33334d", //Babylon Default Hintergrundfarbe
blacktrans50: "rgba(0,0,0,0.5)", //50% schwarz für Modal-Hintergrund
adlerlightblue: "rgb(207,216,229)",
adlerblue: "rgb(69,160,229)",
adlerdarkblue: "rgb(23,45,77)",
adlergold: "rgb(229,189,115)",
adlerbrown: "rgb(77,62,54)",
},
},
},
}
</script>
<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="index.css">
</head>
<body class="max-w-screen">
<div class="w-full h-screen bg-adlerbrown m-auto">
<div class="mt-2 lg:mt-6 absolute px-12 w-full h-12 grid grid-cols-7">
<button class="flex flex-row gap-x-2 items-center">
<img class="w-12 lg:w-20" src="src\22-04-07_adLer_flat_logo_simple.svg" alt="">
<em class="text-align-center align-middle text-white text-sm lg:text-2xl bg-adlerblue rounded-md p-1 material-icons drop-shadow-adler active:drop-shadow-none">dehaze</em>
</button>
<div id="mainMenu" className="fixed left-20 top-10">
<ul>
<li class="flex flex-row">
<img class="w-4 lg:w-6 drop-shadow-adler m-1" src="src/Bild/bild-icon.svg" alt="Bild">
<h3 class="text-white font-bold text-sm lg:text-lg drop-shadow-adler">Definition Metriken</h3>
</li>
<li class="flex flex-row">
<img class="w-4 lg:w-6 drop-shadow-adler m-1" src="src/Text/Zettel_gold_text-icon_2.svg" alt="Text">
<h3 class="text-white font-bold text-sm lg:text-lg drop-shadow-adler">Wozu Metriken?</h3>
</li class="flex flex-row">
<li class="flex flex-row">
<img class="w-4 lg:w-6 drop-shadow-adler m-1" src="src/Video/screen_button-video-icon.svg" alt="Video">
<h3 class="text-white font-bold text-sm lg:text-lg drop-shadow-adler">Metriken Teil I</h3>
</li>
</ul>
</div>
<!-- Auskommentiert wg. .js
<details class="text-white w-64 lg:w-72 fixed left-12 lg:left-20 lg:ml-12 mt-2 top-6 lg:top-14 items-center justify-self-center">
<summary className=></summary>
<ul>
<li class="flex flex-row">
<img class="w-4 lg:w-6 drop-shadow-adler m-1" src="src/Bild/bild-icon.svg" alt="Bild">
<h3 class="text-white font-bold text-sm lg:text-lg drop-shadow-adler">Definition Metriken</h3>
</li>
<li class="flex flex-row">
<img class="w-4 lg:w-6 drop-shadow-adler m-1" src="src/Text/Zettel_gold_text-icon_2.svg" alt="Text">
<h3 class="text-white font-bold text-sm lg:text-lg drop-shadow-adler">Wozu Metriken?</h3>
</li class="flex flex-row">
<li class="flex flex-row">
<img class="w-4 lg:w-6 drop-shadow-adler m-1" src="src/Video/screen_button-video-icon.svg" alt="Video">
<h3 class="text-white font-bold text-sm lg:text-lg drop-shadow-adler">Metriken Teil I</h3>
</li>
</ul>
</details>
-->
<button class="flex flex-row gap-x-2 items-center justify-self-center">
<h2 class="text-white font-bold text-lg lg:text-4xl drop-shadow-adler">Lernelemente</h2>
<em class="text-align-center align-middle text-white text-sm lg:text-2xl bg-adlerblue rounded-md p-1 material-icons drop-shadow-adler active:drop-shadow-none">arrow_downward</em>
</button>
<details
class="text-white w-64 lg:w-72 fixed left-32 lg:left-96 lg:ml-12 top-6 lg:top-14 items-center justify-self-center">
<summary class="">
</summary>
<ul class="flex flex-col gap-2 mt-3">
<li class="flex flex-row">
<img class="w-4 lg:w-6 drop-shadow-adler m-1" src="src/H5P/h5p_icon.svg" alt="H5P">
<h3 class="text-white font-bold text-sm lg:text-lg drop-shadow-adler">Metriken Teil II</h3>
</li>
<li class="flex flex-row">
<img class="w-4 lg:w-6 drop-shadow-adler m-1" src="src/Bild/bild-icon.svg" alt="Bild">
<h3 class="text-white font-bold text-sm lg:text-lg drop-shadow-adler">Arten von Metriken</h3>
</li>
<li class="flex flex-row">
<img class="w-4 lg:w-6 drop-shadow-adler m-1" src="src/Text/Zettel_gold_text-icon_2.svg" alt="Text">
<h3 class="text-white font-bold text-sm lg:text-lg drop-shadow-adler">Eigenschaften von Metriken
</h3>
</li>
<li class="flex flex-row">
<img class="w-4 lg:w-6 drop-shadow-adler m-1" src="src/H5P/h5p_icon.svg" alt="H5P">
<h3 class="text-white font-bold text-sm lg:text-lg drop-shadow-adler">Wordsearch Metriken</h3>
</li>
<li class="flex flex-row">
<img class="w-4 lg:w-6 drop-shadow-adler m-1" src="src/H5P/h5p_icon.svg" alt="H5P">
<h3 class="text-white font-bold text-sm lg:text-lg drop-shadow-adler">Schiebespiel Metriken</h3>
</li>
</ul>
</details>
<button class="flex flex-row gap-x-2 items-center justify-self-center col-span-3 drop-shadow-adler">
<img class="w-12 lg:w-20" src="src\22-04-05_Lernraum_icon.svg" alt="">
<div class="flex flex-col">
<h1 class="text-white font-bold text-xl lg:text-5xl">Software Engineering</h1>
<h3 class="text-white text-sm lg:text-3xl font-bold">Metriken</h3>
</div>
</button>
<div></div>
<button
class="flex flex-row gap-x-2 items-center object-center justify-self-end order-last drop-shadow-adler">
<img class="w-12 lg:w-20" src="src/Coin/coin-icon.svg" alt="">
<h2 class="text-white font-bold text-xl lg:text-4xl">x4</h2>
</button>
</div>
<div class="h-screen w:screen flex flex-col justify-center items-center">
<img class="h-screen object-cover" src="src\mockup3DUIAdLerOptik02-2.png" alt="">
</div>
<div class="flex justify-center">
<div
class="bg-adlerblue rounded-md flex flex-row items-center p-1 lg:p-2 fixed bottom-2 lg:bottom-16 drop-shadow-adler">
<img class="object-cover w-12 lg:w-20 drop-shadow-adler" src="src\bild_icon_test.png" alt="Bild-Icon">
<h2 class="text-white drop-shadow-adler font-bold text-xl lg:text-4xl">Definition Metriken</h2>
</div>
</div>
</div>
<script src="mockup.js"></script>
</body>
</html>