-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
230 lines (224 loc) · 10.1 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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9" lang="en"> <![endif]-->
<html manifest="editor.manifest">
<head>
<title>Blocker - An Isometric Block Editor</title>
<link rel="stylesheet" href="css/stylesheet.min.css" />
<link rel="stylesheet" href="css/blocks.css" />
<script src="javascript/libraries/modernizr.custom.74974.js"></script>
</head>
<body>
<!--[if lte IE 9]><article class="browser-warning">
<strong>Unsupported Browser</strong> You are using an unsupported browser. The application may become unresponsive, show errors or not work at all.
Please upgrade or change your browser.
</article><![endif]-->
</div>
<a href="gallery/" class="toggle-button show-gallery">Open Gallery</a>
<section class="help">
<a href="#" class="help-button help-toggle">?</a>
<article class="help-text help-welcome">
<h1>Welcome to Blocker</h1>
<p>
Blocker is an isometric block editor. It allows you to create isometric pixel sketches right in the browser.
</p>
<div class="help-getting-started">
<h1>Getting Started</h1>
<p>
To start drawing, select a color from the toolbar on the bottom of the screen and click on the canvas.
A transparent block shows you where the next block will be placed when you click. You can add or remove
blocks from the canvas easily by switching drawing modes.
</p>
</div>
<div class="help-drawing-modes">
<h1>Drawing Modes</h1>
<p>
Single block mode adds one block at at time to the canvas.
In multiple blocks mode, you can add multiple blocks and can control the number of blocks
using the sliders to adjust the grid size.
</p>
<p>
Delete mode removes blocks from the canvas. Selecting one or multiple blocks will turn them black indicating what
blocks will be removed - then click the delete button in the toolbar or hitting the backspace button on the keyboard.
</p>
<p>The history buttons in the toolbar allow you to redo or undo your actions.</p>
</div>
<div class="help-import-export">
<h1>Import and Export</h1>
<p>
Sketches saved as json files can be imported. Sketches can be saved to the local web storage
or exported in either a json or html format.
</p>
<p>In the <strong>file</strong> menu you can:</p>
<ul>
<li>
<strong>Save</strong> your sketch to your local machine.
</li>
<li>
<strong>Load</strong> a sketch that you have saved to your local machine.
</li>
<li>
<strong>Import</strong> a sketch that was exported in a <code>json</code> format.
</li>
<li>
<strong>Export</strong> a sketch to either an <code>html</code> or a <code>json</code> file.
Export it as <code>html</code> to embed your sketch on other websites. Export it as <code>json</code>
if you want to import and modify your sketch at a later date using this editor.
</li>
</ul>
</div>
<div class="help-keyboard-shortcuts">
<h1>Keyboard shortcuts</h1>
<ul>
<li>Press the numbers <strong>1 - 6</strong> to change the block color.</li>
<li>Press <code>ctrl + q</code> for single block mode.</li>
<li>Press <code>ctrl + m</code> for multiple block mode.</li>
<li>Press <code>ctrl + d</code> for delete mode.</li>
<li>Press <code>ctrl + z</code> for undo.</li>
<li>Press <code>ctrl + shift + z</code> for redo.</li>
<li>Press <code>ctrl + s</code> to open the save menu.</li>
<li>Press <code>ctrl + o</code> to open the import menu.</li>
<li>Press <code>ctrl + e</code> to open the export menu.</li>
<li>Press <code>ctrl + h</code> to toggle this help box.</li>
<li>Press <code>ctrl + k</code> to switch between editor and gallery.</li>
<li>In single block mode, hold <code>shift</code> while moving the mouse to draw blocks faster.</li>
<li>In delete mode, hold <code>shift</code> while dragging to select multiple blocks.</li>
<li>In delete mode, press <code>backspace</code> to delete selected blocks.</li>
</ul>
</div>
<div class="help-keyboard-shortcuts">
<h1>Pro Tips</h1>
<ul>
<li>
You can use transparent blocks to build hovering objects. Just build an object as you normally would using transparent blocks as scaffolding.
When you're done click "Delete Blocks" / "Delete transparent blocks" to remove all transparent blocks.
</li>
<li>
Mac users can use the <code>cmd</code> key instead of <code>ctrl</code> for shortcuts.
</li>
</ul>
</div>
<p>If you want to share your sketches with others, you can <a href="gallery/upload.php">upload</a> it it to our <a href="gallery">gallery</a>.</p>
<p><a class="help-toggle" href="#">close</a></p>
</article>
</section>
<nav>
<section class="stats">
<p class="count"><span>0</span> blocks</p>
</section>
<div class="info-container">
<div class="multiple-info">
<h1>Grid Size</h1>
<ul>
<li id="size-width" class="size-slider"><h1>width</h1></li>
<li id="size-depth" class="size-slider"><h1>depth</h1></li>
</ul>
</div>
<div class="delete-info">
<h1>Delete</h1>
<a href="#" id="delete-selected" class="info-button">Delete Selected Blocks</a>
<a href="#" id="delete-all" class="info-button">Delete All Blocks</a>
<a href="#" id="delete-transparent" class="info-button">Delete Transparent Blocks</a>
<p>Click on a block to select it. Hold down shift while dragging to select multiple blocks.</p>
</div>
<div class="export-info">
<h1>Export</h1>
<label for="export-sketch">Sketch Name</label>
<input id="export-sketch" type="text" />
<a href="#" id="export-json" class="info-button">Export to JSON</a>
<a href="#" id="export-html" class="info-button">Export to HTML</a>
<p>Export to HTML to use your sketch on a web site. Export to JSON to save your sketch and come back later to continue working on it.</p>
</div>
<div class="import-info">
<h1>Import</h1>
<label for="import-file">Choose JSON File</label>
<input id="import-file" type="file" />
<p>You can import .json files that you saved from previous sessions.</p>
</div>
<div class="upload-info">
<div class="upload-form">
<h1>Upload Sketch to the Gallery</h1>
<label for="upload-sketch">Sketch Name</label>
<input id="upload-sketch" type="text" class="required" required />
<label for="upload-author">Your Name</label>
<input id="upload-author" type="text" />
<label for="upload-email">Your Email Address</label>
<input id="upload-email" type="email" />
<label for="upload-website">Your Website</label>
<input id="upload-website" type="url" />
<label for="upload-twitter">Your Twitter Handle</label>
<input id="upload-twitter" type="text" />
<a href="#" id="upload" class="info-button">Upload Sketch</a>
<p>You can upload your sketch to the gallery. The <em>Sketch Name</em> field is mandatory. Our <a href="http://www.bigspaceship.com/terms-of-service/">Terms and Conditions</a> apply.</p>
</div>
<div class="upload-inprogress upload-hidden">
<h1>Uploading</h1>
</div>
<div class="upload-success upload-hidden">
<h1>Upload successful.</h1>
<a href="#" id="upload-again" class="info-button">Upload again</a>
</div>
<div class="upload-failed upload-hidden">
<h1>Upload failed.</h1>
<a href="#" id="upload-try-again" class="info-button">Try again</a>
</div>
</div>
<div class="single-info">
<p>Click or drag the mouse to add blocks. Hold down shift to draw even more blocks.</p>
</div>
<div class="save-info">
<a href="#" class="info-button">Save</a>
<label for="save-sketch">Sketch Name</label>
<input id="save-sketch" type="text" />
<p>Save current sketch to local storage.</p>
</div>
<div class="load-info">
<p>Load a sketch from Local Storage</p>
</div>
</div>
<div class="mode-buttons">
<h1>Drawing Mode</h1>
<ul>
<li><a href="#" id="mode-single" class="mode-button">single block</a></li>
<li><a href="#" id="mode-multiple" class="mode-button">multiple blocks</a></li>
<li><a href="#" id="mode-delete" class="mode-button">delete blocks</a></li>
</ul>
</div>
<div class="color-buttons">
<h1>Block Color</h1>
<ul>
<li><a href="#" class="color-yellow"id="color-button-yellow">yellow</a></li>
<li><a href="#" class="color-orange"id="color-button-orange">orange</a></li>
<li><a href="#" class="color-red"id="color-button-red">red</a></li>
<li><a href="#" class="color-blue"id="color-button-blue">blue</a></li>
<li><a href="#" class="color-pink"id="color-button-pink">pink</a></li>
<li><a href="#" class="color-brown"id="color-button-brown">brown</a></li>
<li><a href="#" class="color-green"id="color-button-green">green</a></li>
<li><a href="#" class="color-white"id="color-button-white">white</a></li>
<li><a href="#" class="color-transparent"id="color-button-transparent">transparent</a></li>
</ul>
</div>
<div class="history-buttons">
<h1>History</h1>
<ul>
<li><a href="#" id="history-undo" class="history-button">undo</a></li>
<li><a href="#" id="history-redo" class="history-button">redo</a></li>
</ul>
</div>
<div class="file-buttons">
<h1>File</h1>
<ul>
<li><a href="#" id="file-save" class="file-button">save</a></li>
<li><a href="#" id="file-load" class="file-button">load</a></li>
<li><a href="#" id="file-import" class="file-button">import</a></li>
<li><a href="#" id="file-export" class="file-button">export</a></li>
<li><a href="#" id="file-upload" class="file-button">upload</a></li>
</ul>
</div>
<footer><p>Blocker was built by <a href="http://www.bigspaceship.com">Big Spaceship</a>.</p></footer>
</nav>
<script src="javascript/editor.min.js"></script>
</body>
</html>