-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
115 lines (108 loc) · 4.37 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>InkRun</title>
<style>
* {
padding: 0;
margin: 0;
}
canvas {
/* background: #eee; */
background: transparent;
display: block;
margin: 0 auto;
}
</style>
<link rel="stylesheet" href="./css/inkrun.css">
<link rel="icon" href="./assets/images/Pen-icon.png">
<link href="https://fonts.googleapis.com/css?family=Tangerine&display=swap" rel="stylesheet">
<audio id="audio"
src="assets/audio/JeffSpeed68_-_In_the_clouds.mp3"
preload="auto"
controls="none"
loop="true"
style="display: none"
></audio>
<audio id="sound"
src="assets/audio/267937__anagar__writing.wav"
preload="auto"
controls="none"
loop="true"
style="display: none"
></audio>
</head>
<body>
<div class="abs-center">
<div id="gif-modal" class="gif-modal">
<img src="assets/images/inkrun-demo.gif">
</div>
<div id="easy" class="start-button">
<button id="start-button">Easy</button>
</div>
<div id="medium" class="start-button">
<button id="start-button">Medium</button>
</div>
<div id="hard" class="start-button">
<button id="start-button">Hard</button>
</div>
<div class="attribution-block">
<div class="attribution-by">Background music:</div>
<a href="http://dig.ccmixter.org/files/JeffSpeed68/59123">In the clouds</a>
<div class="attribution-name">by Stefan Kartenberg</div>
<div class="attribution-copyright">(c) copyright 2019</div>
<div class="creative-commons">Licensed under a Creative Commons <a
href="http://creativecommons.org/licenses/by-nc/3.0/">
Attribution Noncommercial (3.0)</a> license. Ft: Javolenus
</div>
</div>
<div class="attribution">
<p class="first-part">A game by</p>
<p class="second-part">Nick Tomsho</p>
</div>
<div class="title-header">
<h1>InkRun</h1>
</div>
<div class="horizontal-container">
<div class="keyboard-controls-container">
<h2>Controls</h2>
<ul>
<li>A / <- left</li>
<li>D / -> right</li>
<li>W / ^ jump</li>
<li>P / E pause</li>
<li>R restart level</li>
<li>Draw with the mouse. Use smooth, slow lines for best efficiency</li>
<li>
<button id="audio-button">Music on/off</button>
</li>
<li>
<div id="color-selector">
<div class="color-choice active-color" id="choice-black"></div>
<div class="color-choice" id="choice-cyan"></div>
<div class="color-choice" id="choice-red"></div>
<div class="color-choice" id="choice-yellow"></div>
<div class="color-choice" id="choice-purple"></div>
<div class="color-choice" id="choice-green"></div>
</div>
</li>
</ul>
</div>
<div class="canvas-container">
<canvas id="inkRunCanvas" width="810" height="540"></canvas>
</div>
<div class="links-container">
<h2>Links</h2>
<div class="links">
<a href="https://github.com/ntomsho/InkRun" target="_blank"><img class="logo-icon" src="./assets/images/github-icon.svg"></a>
<a href="https://www.linkedin.com/in/nick-tomsho" target="_blank"><img class="logo-icon" src="./assets/images/linkedin-icon.png"></a>
<a href="https://angel.co/nick-tomsho" target="_blank"><img class="logo-icon" src="./assets/images/angellist-icon.png"></a>
<a href="https://ntomsho.github.io/" target="_blank"><img class="logo-icon" src="./assets/images/portfolio-icon.png"></a>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="./bundle.js"></script>
</html>