-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
67 lines (63 loc) · 2.49 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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
<link rel="stylesheet" href="./css/index.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600" rel="stylesheet">
<link rel="icon" href="./images/favicon.ico" type="image/x-icon">
<script src="./p5.min.js"></script>
<script src="./addons/p5.dom.min.js"></script>
<script src="./addons/p5.sound.min.js"></script>
<script src="./utils/vector_util.js"></script>
<script src="./penrose/penrose_class.js"></script>
<script src="./penrose/colors.js"></script>
<script src="./penrose/recurse_sketch.js"></script>
</head>
<body>
<button id="burger" class="hamburger hamburger--spin" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<div id="menu" class="hidden slideLeft">
<div class="row" id="row1">
<h1>The Penrose Tiles</h1>
<div>A project by <a href="http://www.thingsishow.com">Samuel Golland</a></div>
<div id="contact-buttons-inner">
<a href="http://www.github.com/rictorlome"><img id="github" src='images/github-logo.svg'></img>
</a>
</div>
</div>
<div class="row" id="row2">
<div id="depth">Recursion Depth</div>
<div id="speed">Reveal Duration</div>
<div id="reveal">Reveal Pattern</div>
</div>
<div class="row" id="row3">
<div id="color1">Color One</div>
<div id="color2">Color Two</div>
<div id="color3">Color Three</div>
<div id="color4">Color Four</div>
<div id="color5">Color Five</div>
</div>
<div class="row" id="row4">
<div id="reset"> You can also press 'r' to reset the tiling when this menu is closed.</div>
</div>
<div class="row" id="row5">
For additional information, please visit the <a href="http://www.github.com/rictorlome/penrose">github repository.</a>
</div>
</div>
</body>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", () => {
const burger = document.getElementById('burger');
const menu = document.getElementById('menu');
burger.addEventListener('click', () => {
burger.classList.toggle('is-active')
menu.classList.toggle('hidden')
menu.classList.toggle('slideRight')
menu.classList.toggle('slideLeft')
})
})
</script>
</html>