-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
217 lines (202 loc) · 7.71 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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:title" content="GamifyDev" />
<meta
property="og:description"
content="GamifyDev is a platform to test your knowledge in web development."
/>
<!-- <meta property="og:image" content="https://gamifydev.com/img/og.png" /> -->
<meta property="og:url" content="https://gamifydev.vercel.app" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@gamifydev" />
<meta name="twitter:creator" content="@gamifydev" />
<meta
name="twitter:title"
content="GamifyDev is a platform to test your knowledge in web development."
/>
<meta
name="twitter:description"
content="GamifyDev is a platform to test your knowledge in web development."
/>
<!-- <meta name="twitter:image" content="https://gamifydev.com/img/og.png" /> -->
<meta name="twitter:image:alt" content="GamifyDev" />
<title>GamifyDev</title>
<!-- <link rel="stylesheet" href="css/bulma.min.css" /> -->
<!-- <link rel="stylesheet" href="css/main.css" /> -->
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
<link rel="manifest" href="/manifest.webmanifest" />
<script src="./js/tailwind.min.js"></script>
</head>
<body
class="bg-gray-100"
ondragstart="return false;"
onselectstart="return false;"
oncontextmenu="return false;"
>
<header class="bg-[#757195]">
<nav class="mx-auto max-w-7xl px-6 lg:px-8" aria-label="Top">
<div
class="flex w-full items-center justify-between border-b border-indigo-500 py-6 lg:border-none"
>
<div class="mx-auto lg:hidden">
<a href="/" class="text-center text-white font-medium text-2xl"
>GamifyDev</a
>
</div>
<div class="lg:flex hidden items-center">
<a
href="/"
class="inline-flex align-center text-white font-medium text-2xl w-auto p-1 rounded"
>
<span class="sr-only">GamifyDev</span>
GamifyDev
</a>
<div class="ml-10 hidden space-x-8 lg:block">
<a
href="#about"
class="text-base font-medium text-white hover:text-indigo-50"
>About</a
>
<a
href="#test"
class="text-base font-medium text-white hover:text-indigo-50"
>Test Yourself</a
>
<a
href="#contact"
class="text-base font-medium text-white hover:text-indigo-50"
>Contact</a
>
</div>
</div>
<!-- <div class="ml-10 space-x-4"> -->
<!-- <a
href="#"
class="inline-block rounded-md border border-transparent bg-indigo-500 px-4 py-2 text-base font-medium text-white hover:bg-opacity-75"
>Sign in</a
>
<a
href="#"
class="inline-block rounded-md border border-transparent bg-white px-4 py-2 text-base font-medium text-indigo-600 hover:bg-indigo-50"
>Sign up</a
> -->
<!-- </div> -->
</div>
<div class="flex flex-wrap justify-center gap-x-6 py-4 lg:hidden">
<a
href="#about"
class="text-base font-medium text-white hover:text-indigo-50"
>About</a
>
<a
href="#test"
class="text-base font-medium text-white hover:text-indigo-50"
>Test Yourself</a
>
<a
href="#contact"
class="text-base font-medium text-white hover:text-indigo-50"
>Contact</a
>
</div>
</nav>
</header>
<div
id="promptForUpdateModal"
class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50 hidden"
>
<div class="bg-white p-8 rounded shadow-lg">
<h2 class="text-2xl font-bold mb-4">New Update Available</h2>
<p class="mb-4">
A new version of the app is available. Do you want to update now?
</p>
<div class="flex justify-end">
<button
id="updateButton"
class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 mr-2"
>
Update
</button>
<button
id="cancelButton"
class="bg-gray-300 px-4 py-2 rounded hover:bg-gray-400"
>
Cancel
</button>
</div>
</div>
</div>
<main class="max-w-7xl mx-auto my-10 p-5" id="page-content"></main>
<footer
class="bg-gray-800 text-white text-center py-4 fixed bottom-0 w-full"
>
© 2023 GamifyDev
</footer>
<script src="./js/external/dexie.js"></script>
<script src="./js/utils.js"></script>
<script src="./js/storage.js"></script>
<script src="./js/tys.js"></script>
<script src="./js/about.js"></script>
<script src="./js/contact.js"></script>
<script src="./js/modules.js"></script>
<script src="./js/quiz.js"></script>
<script src="./js/home.js"></script>
<!-- <script type="module">
import { Workbox } from "./js/external/workbox.mjs";
const promptForUpdate = () => {
return new Promise((resolve, reject) => {
const modal = document.getElementById("promptForUpdateModal");
modal.classList.remove("hidden");
const updateButton = document.getElementById("updateButton");
const cancelButton = document.getElementById("cancelButton");
updateButton.addEventListener("click", () => {
modal.classList.add("hidden");
resolve(true);
});
cancelButton.addEventListener("click", () => {
modal.classList.add("hidden");
resolve(false);
});
});
};
if ("serviceWorker" in navigator) {
const wb = new Workbox("/sw.js");
let registration;
const showSkipWaitingPrompt = async (event) => {
// Assuming the user accepted the update, set up a listener
// that will reload the page as soon as the previously waiting
// service worker has taken control.
wb.addEventListener("controlling", () => {
// At this point, reloading will ensure that the current
// tab is loaded under the control of the new service worker.
// Depending on your web app, you may want to auto-save or
// persist transient state before triggering the reload.
window.location.reload();
});
// When `event.wasWaitingBeforeRegister` is true, a previously
// updated service worker is still waiting.
// You may want to customize the UI prompt accordingly.
// This code assumes your app has a promptForUpdate() method,
// which returns true if the user wants to update.
// Implementing this is app-specific; some examples are:
// https://open-ui.org/components/alert.research or
// https://open-ui.org/components/toast.research
const updateAccepted = await promptForUpdate();
if (updateAccepted) {
wb.messageSkipWaiting();
}
};
// Add an event listener to detect when the registered
// service worker has installed but is waiting to activate.
wb.addEventListener("waiting", (event) => {
showSkipWaitingPrompt(event);
});
wb.register();
}
</script> -->
<script src="./index.js"></script>
</body>
</html>