-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
69 lines (54 loc) · 2.2 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
<html>
<head>
<link rel="stylesheet" href="./css/styles.css"/>
<link rel="stylesheet" href="./css/menu-state-styles.css" />
<link rel="stylesheet" href="./css/game-won.css"/>
<script
defer
src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"
></script>
<script
defer
src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/addons/p5.sound.js"
></script>
<script defer src="build/bundle.js"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=VT323&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div id="main-menu">
<h1 class="title">The Ascent</h1>
<div id="menu-frame">
<div class="menu-text-frame">
<p class="menu-text">
You’re playing as the commander of a Swedish submarine named
HMS Sven. By accident, you’ve managed to dive too deep into parts of
the ocean where no light comes through and you need to get back up
to the correct depth again.<br/><br>
While ascending, you’ll face different obstacles that you must avoid at all costs.
</p>
</div>
<lottie-player src="https://assets3.lottiefiles.com/packages/lf20_obtvnlau.json" id="sonar-animation" background="transparent" speed="1" style="width: 150px; height: 150px" loop autoplay></lottie-player>
<div class="button-container">
<input type="image" id="start-game" src="./assets/images/start-button.png"></input>
<div >
<a href="about.html"><img src="./assets/images/about-button.png" class="about-link" alt=""></a>
</div>
</div>
</div>
</div>
<!-- Code injected via JavaScript -->
<div id="div" class="start-game-bg">
<input type="image" id="start-game" src="./assets/images/start-button.png"></input>
<div></div>
</div>
<div id="game-won-div" class="start-game-bg"></div>
<!-- pause menu -->
<!-- Buttons injected via JavaScript-->
</div>
</body>
</html>