-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
75 lines (64 loc) · 2.38 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
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.3.5/Tween.min.js"></script>
<script src="confetti.js"></script>
<script src="confettiCube.js"></script>
<script src="index.js"></script>
<link rel="stylesheet" href="index.css" />
<head>
<title>Virutal Rubik's Cube</title>
</head>
<body>
<div id="pre" style="height: 100%;position: absolute;left: 0;right: 0;top: 0;bottom: 0;display: flex;">
<div class="sk-cube-grid" style="margin: auto;">
<div class="sk-cube sk-cube1"></div>
<div class="sk-cube sk-cube2"></div>
<div class="sk-cube sk-cube3"></div>
<div class="sk-cube sk-cube4"></div>
<div class="sk-cube sk-cube5"></div>
<div class="sk-cube sk-cube6"></div>
<div class="sk-cube sk-cube7"></div>
<div class="sk-cube sk-cube8"></div>
<div class="sk-cube sk-cube9"></div>
</div>
</div>
<div id="post" class="hidden">
<div id="confettiContainer">
<canvas id="confetti"></canvas>
</div>
<div class="info">
<h3>Virtual Rubik's Cube</h3>
<div class="legend">
<p>Drag to scan.</p>
<p>Scroll to zoom.</p>
<div id="free">
<p>Currently in free mode.</p>
<p>CW : f b l r u d</p>
<p>CCW: F B L R U D</p>
<p>Press m to scramble the cube.</p>
<p>Press s to solve current cube.</p>
<p>0 to reset the cube.</p>
</div>
<div id="solving">
<p>Currently in solving mode.</p>
<p>Right arrow to speed up the solve.</p>
<p>Left arrow to slow down the solve.</p>
</div>
</div>
</div>
<p id="current_move"></p>
<p class="author">Calvin, Hamdan, Haven, Adrian, Seikun, Jessica.</a>
</p>
</div>
</body>
<script>
var author = document.getElementsByClassName('author')[0];
author.addEventListener('mouseover', function() {
author.style.opacity = 0.5;
});
author.addEventListener('mouseout', function() {
author.style.opacity = 0;
});
</script>
</html>