name:
index.html
-rw-r--r--
6812
1
2<!DOCTYPE html>
3<html lang="en">
4 <head>
5 <title>Hexagonal Tile Editor</title>
6 <meta charset="utf-8">
7 <link href="css/bootstrap.css" rel="stylesheet" media="screen">
8 <link href="css/bootstrap-colorpicker.min.css" rel="stylesheet" media="screen">
9 <link href="css/main.css" rel="stylesheet" media="screen">
10 </head>
11 <body>
12 <div class="hud">
13 <div class="cap-left"></div>
14 <div class="center"></div>
15 <div class="cap-right"></div>
16 <div class="content">
17 <div class="hexcount">0 hexagons</div>
18 <svg version="1.1" id="hexsvg" class="hexsvg pull-right color picker" height="36" width="40" data-toggle="tooltip" title="Color">
19 <polygon class="color" points="12,3 28,3 36,17 28,33 12,33 4,17"/>
20 <polygon class="drop" points="10,0 30,0 40,17 30,36 10,36 0,17"/>
21 </svg>
22 <svg version="1.1" id="hexsvg" class="hexsvg button pull-right remove" height="36" width="40" data-toggle="tooltip" title="Remove hexagon">
23 <polygon class="drop" points="10,0 30,0 40,17 30,36 10,36 0,17"/>
24 <polygon class="shape" points="12,3 28,3 36,17 28,33 12,33 4,17"/>
25 <polygon class="icon" points="12,20 12,16 28,16 28,20"/>
26 </svg>
27 <svg version="1.1" id="hexsvg" class="hexsvg button pull-right add active" height="36" width="40" data-toggle="tooltip" title="Add hexagon">
28 <polygon class="drop" points="10,0 30,0 40,17 30,36 10,36 0,17"/>
29 <polygon class="shape" points="12,3 28,3 36,17 28,33 12,33 4,17"/>
30 <polygon class="icon" points="18,10 22,10 22,16 28,16 28,20 22,20 22,26 18,26 18,20 12,20 12,16 18,16"/>
31 </svg>
32 <div class="gap pull-right"></div>
33 <svg version="1.1" id="hexsvg" class="hexsvg button pull-right save" height="36" width="40" data-toggle="tooltip" title="Save scene">
34 <polygon class="drop" points="10,0 30,0 40,17 30,36 10,36 0,17"/>
35 <polygon class="shape" points="12,3 28,3 36,17 28,33 12,33 4,17"/>
36 <text x="6" y="22" class="icon save">SAVE</text>
37 </svg>
38 <svg version="1.1" id="hexsvg" class="hexsvg button pull-right load" height="36" width="40" data-toggle="tooltip" title="Load a scene">
39 <polygon class="drop" points="10,0 30,0 40,17 30,36 10,36 0,17"/>
40 <polygon class="shape" points="12,3 28,3 36,17 28,33 12,33 4,17"/>
41 <text x="6" y="22" class="icon save">LOAD</text>
42 </svg>
43 <svg version="1.1" id="hexsvg" class="hexsvg button pull-right new" height="36" width="40" data-toggle="tooltip" title="Create new scene">
44 <polygon class="drop" points="10,0 30,0 40,17 30,36 10,36 0,17"/>
45 <polygon class="shape" points="12,3 28,3 36,17 28,33 12,33 4,17"/>
46 <text x="8" y="22" class="icon save">NEW</text>
47 </svg>
48 <div class="gap pull-right"></div>
49 <svg version="1.1" id="hexsvg" class="hexsvg button pull-right info" height="36" width="40" data-toggle="tooltip" title="Info">
50 <polygon class="drop" points="10,0 30,0 40,17 30,36 10,36 0,17"/>
51 <polygon class="shape" points="12,3 28,3 36,17 28,33 12,33 4,17"/>
52 <polygon class="icon" points="18,10 22,10 22,13 18,13"/>
53 <polygon class="icon" points="18,15 22,15 22,26 18,26"/>
54 </svg>
55 </div>
56 </div>
57 <div class="draw" id="draw"></div>
58
59 <div class="modal fade welcome" id="welcomeModal" tabindex="-1" role="dialog" aria-hidden="true">
60 <div class="modal-dialog">
61 <div class="modal-content">
62 <div class="modal-header">
63 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
64 <h2>Hexagonal Tile Editor</h2>
65 </div>
66 <div class="modal-body">
67 <h3>Camera Controls</h3>
68 <p>
69 <strong>Move: </strong> W, A, S, D to move camera. R, F to move raise and lower.
70 <br/>
71 <strong>Rotate: </strong> Use the up, down, left, right arrows to rotate camera.
72 <br/>
73 <strong>Zoom: </strong> Scroll to zoom in and out.
74 </p>
75 <h3>Tools</h3>
76 <p>
77 <strong>Add hexagon: </strong> Click on the scene to add a hexagon in that location.
78 <br/>
79 <strong>Remove hexagon: </strong> Click on a hexagon to remove that hexagon from the scene.
80 <br/>
81 <strong>Color: </strong> Select the color for new hexagons.
82 <br/>
83 <strong>Save, Load, New: </strong> Save, load, or create a new scene.
84 </p>
85 <h3>Demos</h3>
86 <p>
87 <a href="#" class="demo" id="castle">Castle and Walls</a>
88 <br/>
89 <a href="#" class="demo" id="island">Island in the Sun</a>
90 </p>
91 </div>
92 <div class="modal-footer">
93 <a href="#" data-dismiss="modal">Let's Go!</a>
94 </div>
95 </div>
96 </div>
97 </div>
98
99 <div class="modal fade load" id="loadModal" tabindex="-1" role="dialog" aria-hidden="true">
100 <div class="modal-dialog">
101 <div class="modal-content">
102 <div class="modal-header">
103 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
104 <h2>Load Scene</h2>
105 </div>
106 <div class="modal-body list">
107 <div class="row item">
108 <div class="col-md-4 how-many">68 hexagons</div>
109 <div class="col-md-6 date">December 20th 2013, 2:01 pm</div>
110 <div class="col-md-2 loadme">
111 <a href="#">Load</a>
112 </div>
113 </div>
114 </div>
115 <div class="modal-body">
116 <div class="alert alert-info pull-left"><strong>Heads up! </strong>You're scenes are only being saved to your browser. If you clear your browser's settings your scenes will be deleted.</div>
117 </div>
118 <div class="modal-footer">
119 <a href="#" class="" data-dismiss="modal">Close</a>
120 </div>
121 </div>
122 </div>
123 </div>
124
125
126 <script src="js/vendor/three.min.js"></script>
127 <script src="js/vendor/Detector.js"></script>
128 <script src="js/vendor/stats.min.js"></script>
129 <script src="js/vendor/jquery.min.js"></script>
130 <script src="js/vendor/moment.min.js"></script>
131 <script src="js/vendor/bootstrap.min.js"></script>
132 <script src="js/vendor/bootstrap-colorpicker.min.js"></script>
133
134 <script src="js/trippleclick.min.js"></script>
135 <script src="js/camera-controls.js"></script>
136
137 <script src="js/demo.js"></script>
138 <script src="js/hexagon.js"></script>
139 <script src="js/board.js"></script>
140 <script src="js/main.js"></script>
141
142 </body>
143</html>