-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathIndex.html
100 lines (92 loc) · 3.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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="src\images\icons\icon-192x192.png" />
<meta charset="UTF-8" />
<!--all meta här under definerar storleken på enheten och hur content ska visas (Ett försök till att göra appen responsiv)-->
<meta
name="viewport"
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
/>
<meta name="description" content="Spyfall Clone i en PWA" />
<meta name="theme-color" content="#333333" />
<!--All meta här gör så att Apple enheter ska kunna fungera, och det sätter fullscreen med en status bar som får våran tema färg(tror jag),
finns mer att läsa på "https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html"-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="KennethFall" />
<meta name="apple-mobile-web-app-status-bar-style" content="#333333" />
<link
rel="apple-touch-icon"
sizes="192x192"
href="/src/icons/icon-192x192.png"
/>
<!--Pekar på ikonen vi ska använda-->
<!--Pekar på vilket manifest vi ska använda och vår CSS-->
<link rel="manifest" href="manifest.json" />
<link rel="stylesheet" href="css/general.css" />
<link rel="stylesheet" href="css/index.css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>KennethFall</title>
</head>
<body>
<div class="title-block">
<h1>KennethFall: The Game!</h1>
</div>
<div id="portrait">
<img src="src\rotate.png" alt="Rotate phone" />
</div>
<main>
<button class="btn" id="fewer-btn">
<img src="src/minustecken.png" alt="" />
</button>
<form id="player-box">
<input
type="text"
class="player-input"
id="input-1"
placeholder="Player 1 name"
maxlength="6"
/>
<input
type="text"
class="player-input"
id="input-2"
placeholder="Player 2 name"
maxlength="6"
/>
<input
type="text"
class="player-input"
id="input-3"
placeholder="Player 3 name"
maxlength="6"
/>
</form>
<button class="btn" id="more-btn">
<img src="src\plustecken.png" alt="" />
</button>
</main>
<!-- Navigation -->
<div class="nav-buttons">
<button id="rules-btn" class="btn">RULES</button>
<button id="next-btn" class="btn">NEXT</button>
</div>
<!--Ett trött försök till att få sw.js att fungera-->
<script>
if ("serviceWorker" in navigator) {
navigator.serviceWorker
.register("serviceWorker.js")
.then((registration) => {
console.log("SW Registered");
console.log(registration);
})
.catch((error) => {
console.log("SW Registration Failed!");
console.log(error);
});
}
</script>
<script src="js/variables.js"></script>
<script src="js/index.js"></script>
</body>
</html>