forked from cmda-minor-web/browser-technologies-2223
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex-failed.html
136 lines (100 loc) · 6.46 KB
/
index-failed.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
<!DOCTYPE html>
<html lang="NL">
<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, maximum-scale=1">
<meta name="theme-color" content="#deff05">
<title>Web Development Wars</title>
<link rel="shortcut icon" href="./favicon.ico">
<link rel="stylesheet" href="./styles/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<main>
<header>
<p><mark>20 studenten zijn je al voor geweest!</mark></p>
</header>
<!--
chrome, safari, firefox
safari/iOS, samsung internet, chrome android
-->
<!--
VAKKEN:
- Projectweek 1 kick-off: Joost Faber, Robert Spier, Vasilis van Gemert en Sanne 't Hooft
- Web App from Scratch: Joost Faber en Robert Spier
- CSS to the Rescue: Vasilis van Gemert en Sanne 't Hooft
- Progressive Web Apps: Robert Spier en Declan Rek (Voorhoede)
- Browser Technologies: Vasilis van Gemert en Peter Paul Koch (QuirksMode)
- Projectweek 2: Robert Spier, Declan Rek (Voorhoede), Vasilis van Gemert en Peter Paul Koch (QuirksMode)
- Real-Time Web: Justus Sturkenboom en Shyanta Vleugel (Triple)
- Human Centered Design: Eric Groot Kormelink en Koop Reynders
- Projectweek 3: Justus Sturkenboom, Shyanta Vleugel (Triple), Eric Groot Kormelink en Koop Reynders
- Meesterproef: Joost Faber, Koop Reynders, Justus Sturkenboom, Vasilis van Gemert, Sanne 't Hooft en Robert Spier
-->
<article class="default">
<header>
<img class="web_dev-symbol image--mobile floating" src="./assets/web_dev_symbol-mobile.svg" width="72" alt="Web Dev Wars">
<img class="web_dev-symbol image--desktop floating" src="./assets/web_dev_symbol-desktop.svg" width="72" alt="Web Dev Wars">
<h1>Web Development Wars:</h1>
<p>Beoordeel en strijd om de hoogste score in de Minor!</p>
</header>
<hr>
<section>
<h2>Klaar voor de strijd?</h2>
<p>Laat ons en je medestudenten weten wie je bent! Alleen je <mark><span class="tag"><span aria-hidden="true">{</span>username<span aria-hidden="true">}</span></span></mark> zal na afloop op het scoreboard worden getoond</p>
<img class="smiley-stamp image--desktop floating" src="./assets/smiley_stamp.svg" width="92" alt="Smiley stamp">
<div class="arrow-stamp arrow-stamp--purple image--desktop floating">
<img src="./assets/single_arrow-purple.svg" width="50" alt="Arrow icon">
<img src="./assets/single_arrow-green.svg" width="50" alt="Arrow icon">
<img src="./assets/single_arrow-purple.svg" width="50" alt="Arrow icon">
</div>
<div class="arrow-stamp arrow-stamp--green image--desktop floating">
<img src="./assets/single_arrow-green.svg" width="50" alt="Arrow icon">
<img src="./assets/single_arrow-purple.svg" width="50" alt="Arrow icon">
<img src="./assets/single_arrow-green.svg" width="50" alt="Arrow icon">
</div>
<form action="./dashboard.html" method="GET" id="personal_info-form">
<div class="message">
<p>Je bent één van de onderstaande met geel aangegeven velden vergeten in te vullen!</p>
</div>
<fieldset>
<div data-input-wrapper data-input-type="name">
<label for="name"><span aria-hidden="true">{</span> Voor- en achternaam <span aria-hidden="true">}</span> *</label>
<input type="text" name="name" id="name" placeholder="Voor- en achternaam" value="Maijla Ikiz" required>
</div>
<div data-input-wrapper data-input-type="username">
<label for="username"><span aria-hidden="true">{</span> Username <span aria-hidden="true">}</span> *</label>
<input type="text" pattern="[A-Za-z0-9._-]{4}" name="username" id="username" placeholder="Username voor op het scoreboard" required>
</div>
<div data-input-wrapper data-input-type="email">
<label for="email"><span aria-hidden="true">{</span> E-mailadres <span aria-hidden="true">}</span> *</label>
<input class="error-input" type="text" name="email" id="email" placeholder="E-mailadres" value="maijla.ikiz@hva.nl" autocapitalize="off" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{1,63}$" required>
</div>
<div data-input-wrapper data-input-type="studentnumber">
<label for="studentnumber"><span aria-hidden="true">{</span> Studentnummer <span aria-hidden="true">}</span> *</label>
<input type="text" inputmode="numeric" pattern="^[56]\d{8}$" name="studentnumber" id="studentnumber" placeholder="Studentnummer" value="500756166" required>
</div>
<div class="checkbox-wrap">
<input type="checkbox" name="anonymous" id="anonymous">
<label for="anonymous">
<span><img src="./assets/check-icon.svg" alt="Checkmark icon" width="26"></span>
<p>Anonymous Mode<br><small>(Je username zal niet zichtbaar zijn op het scoreboard)</small></p>
</label>
</div>
</fieldset>
<hr>
<button type="submit">Ready set go!</button>
</form>
</section>
</article>
<footer>
<p>Met liefde gemaakt door CMD</p>
</footer>
</main>
<script src="./scripts/applyData.js" type="module"></script>
<script src="./scripts/validator.js" type="module"></script>
</body>
</html>