-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
93 lines (93 loc) · 4.63 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="2.5D Colored cube voxel-art editor by Tech-Tac" />
<meta name="author" content="Tech-Tac" />
<meta name="keywords" content="Cubes, 3D, 2.5D, Voxel, Art" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<title>Cubes</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="view">
<div class="world animate">
<div class="cube-container"></div>
</div>
<div class="hud">
<input type="color" class="color-picker" value="#ff0000" />
<div class="rotator-wrapper">
<button class="rotator-btn" onclick="rotate(rotation-90)"><</button>
<input type="range" class="rotator" id="rotator" min="0" value="0" step="90" max="270" />
<button class="rotator-btn" onclick="rotate(rotation+90)">></button>
</div>
<div class="save-load">
<button type="button" class="btn-save">Save</button>
<button type="button" class="btn-load" onclick="file.click()">load<input type="file" hidden id="file" class="load-file" /></button>
</div>
<button class="btn-cube btn-help" title="Help"></button>
<a href="https://github.com/Tech-Tac" target="_blank" class="author">Tech-Tac</a>
</div>
</div>
<div class="gui">
<dialog id="dlg-help">
<button autofocus title="Close" class="btn-cube btn-close"></button>
<div class="content">
<p>Make 3D builds out of little <span id="helpBtnCubeBalls">cubes</span>, you can change cube colors, view from a different angle, and save/share your build!</p>
<h2 id="controls">Controls</h2>
<ul>
<li><code>LMB</code>: Place cube</li>
<li><code>shift</code> + <code>LMB</code>: Place cube (opposite face)</li>
<li><code>alt</code> + <code>drag</code>: Draw with cubes</li>
<li><code>ctrl</code> + <code>drag</code>: Paint cubes with color</li>
<li><code>RMB</code>: Break cube</li>
<li><code>MMB</code>: Pick color</li>
<li><code>drag color-picker to cube</code>: Pick color</li>
<li><code>RMB</code> + <code>drag</code>: Rotate view (locked to 90° increments)</li>
<li><code>wheel up</code>: Zoom in</li>
<li><code>wheel down</code>: Zoom out</li>
<li><code>drag</code>: Pan</li>
<li><code>leftarrow</code>: Pan left</li>
<li><code>rightarrow</code>: Pan right</li>
<li><code>uparrow</code>: Pan up</li>
<li><code>downarrow</code>: Pan down</li>
<li><code>+</code> (numpad): Zoom in</li>
<li><code>-</code> (numpad): Zoom out</li>
<li><code>></code> (<code>.</code>): Rotate view by 90°deg clockwise</li>
<li><code><</code> (<code>,</code>): Rotate view by 90°deg counterclockwise</li>
<li><code>m</code>: Toggle mute</li>
<li><code>h</code>: Hide HUD</li>
<li><code>ctrl</code> + <code>z</code>: Undo</li>
<li><code>ctrl</code> + <code>y</code>: Redo</li>
<li><code>ctrl</code> + <code>c</code>: Copy cubes</li>
<li><code>ctrl</code> + <code>v</code>: Paste Cubes</li>
<li><code>ctrl</code> + <code>s</code>: Save</li>
<li><code>ctrl</code> + <code>o</code>: Open file...</li>
<li><code>ctrl</code> + <code>r</code>: Clear all cubes</li>
<li><code>ctrl</code> + <code>b</code>: Balls</li>
<li><code>f1</code>: Show help</li>
<li><code>ctrl</code> + <code>shift</code> + <code>c</code>: Share build link</li>
<li><code>ctrl</code> + <code>p</code>: Play "Bad Apple!!"</li>
</ul>
<h3 id="touch">Touch</h3>
<ul>
<li><code>tap</code>: Place cube</li>
<li><code>long press</code>: Break cube</li>
<li><code>pinch</code>: Zoom</li>
<li><code>swipe</code>: Pan</li>
</ul>
<a href="https://www.github.com/Tech-Tac/cubes" target="_blank">Source on GitHub</a>
<br />
<div class="cubes-deco">
<div class="cube" style="background-color: #f00"></div>
<div class="cube" style="background-color: #0f0"></div>
<div class="cube" style="background-color: #00f"></div>
</div>
</div>
</dialog>
</div>
<script src="index.js"></script>
<script src="playvideo.js"></script>
</body>
</html>