-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
230 lines (229 loc) · 23.2 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>
<html lang="en">
<head>
<title>Hello, world!</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="workspace" class="workspace"></div>
<div class="d-flex">
<div class="base red">
<div class="item n1"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>1<div class="col"></div></div></div>
<div class="item n2"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>2<div class="col"></div></div></div>
<div class="item n3"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>3<div class="col"></div></div></div>
<div class="item n4"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>4<div class="col"></div></div></div>
<div class="item n5"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>5<div class="col"></div></div></div>
<div class="item n6"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>6<div class="col"></div></div></div>
<div class="item n7"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>7<div class="col"></div></div></div>
<div class="item n8"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>8<div class="col"></div></div></div>
<div class="item n9"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>9<div class="col"></div></div></div>
<div class="item n10"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>10<div class="col"></div></div></div>
<div class="item n11"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>11<div class="col"></div></div></div>
<div class="item n12"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>12<div class="col"></div></div></div>
<div class="item n13"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>13<div class="col"></div></div></div>
<div class="item n14"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>14<div class="col"></div></div></div>
<div class="item n15"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>15<div class="col"></div></div></div>
<div class="item n16"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>16<div class="col"></div></div></div>
<div class="item n17"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>17<div class="col"></div></div></div>
<div class="item n18"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>18<div class="col"></div></div></div>
<div class="item n19"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>19<div class="col"></div></div></div>
<div class="item n20"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>20<div class="col"></div></div></div>
<div class="item n21"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>21<div class="col"></div></div></div>
<div class="item n22"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>22<div class="col"></div></div></div>
<div class="item n23"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>23<div class="col"></div></div></div>
<div class="item n24"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>24<div class="col"></div></div></div>
<div class="item n25"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>25<div class="col"></div></div></div>
<div class="item n26"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>26<div class="col"></div></div></div>
<div class="item n27"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>27<div class="col"></div></div></div>
<div class="item n28"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>28<div class="col"></div></div></div>
<div class="item n29"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>29<div class="col"></div></div></div>
<div class="item n30"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>30<div class="col"></div></div></div>
<div class="item n31"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>31<div class="col"></div></div></div>
<div class="item n32"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>32<div class="col"></div></div></div>
<div class="item n33"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>33<div class="col"></div></div></div>
<div class="item n34"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>34<div class="col"></div></div></div>
<div class="item n35"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>35<div class="col"></div></div></div>
<div class="item n36"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>36<div class="col"></div></div></div>
<div class="item n37"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>37<div class="col"></div></div></div>
<div class="item n38"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>38<div class="col"></div></div></div>
<div class="item n39"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>39<div class="col"></div></div></div>
<div class="item n40"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>40<div class="col"></div></div></div>
<div class="item n41"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>41<div class="col"></div></div></div>
<div class="item n42"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>42<div class="col"></div></div></div>
<div class="item n43"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>43<div class="col"></div></div></div>
<div class="item n44"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>44<div class="col"></div></div></div>
<div class="item n45"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>45<div class="col"></div></div></div>
<div class="item n46"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>46<div class="col"></div></div></div>
<div class="item n47"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>47<div class="col"></div></div></div>
<div class="item n48"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>48<div class="col"></div></div></div>
<div class="item n49"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>49<div class="col"></div></div></div>
<div class="item n50"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>50<div class="col"></div></div></div>
<div class="item n51"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>51<div class="col"></div></div></div>
<div class="item n52"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>52<div class="col"></div></div></div>
<div class="item n53"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>53<div class="col"></div></div></div>
<div class="item n54"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>54<div class="col"></div></div></div>
<div class="item n55"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>55<div class="col"></div></div></div>
<div class="item n56"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>56<div class="col"></div></div></div>
<div class="item n57"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>57<div class="col"></div></div></div>
<div class="item n58"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>58<div class="col"></div></div></div>
<div class="item n59"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>59<div class="col"></div></div></div>
<div class="item n60"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>60<div class="col"></div></div></div>
<div class="item n61"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>61<div class="col"></div></div></div>
<div class="item n62"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>62<div class="col"></div></div></div>
<div class="item n63"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>63<div class="col"></div></div></div>
<div class="item n64"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>64<div class="col"></div></div></div>
<div class="item n65"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>65<div class="col"></div></div></div>
<div class="item n66"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>66<div class="col"></div></div></div>
<div class="item n67"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>67<div class="col"></div></div></div>
<div class="item n68"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>68<div class="col"></div></div></div>
<div class="item n69"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>69<div class="col"></div></div></div>
<div class="item n70"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>70<div class="col"></div></div></div>
<div class="item n71"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>71<div class="col"></div></div></div>
<div class="item n72"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>72<div class="col"></div></div></div>
<div class="item n73"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>73<div class="col"></div></div></div>
<div class="item n74"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>74<div class="col"></div></div></div>
<div class="item n75"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>75<div class="col"></div></div></div>
<div class="item n76"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>76<div class="col"></div></div></div>
<div class="item n77"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>77<div class="col"></div></div></div>
<div class="item n78"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>78<div class="col"></div></div></div>
<div class="item n79"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>79<div class="col"></div></div></div>
<div class="item n80"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>80<div class="col"></div></div></div>
<div class="item n81"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>81<div class="col"></div></div></div>
<div class="item n82"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>82<div class="col"></div></div></div>
<div class="item n83"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>83<div class="col"></div></div></div>
<div class="item n84"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>84<div class="col"></div></div></div>
<div class="item n85"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>85<div class="col"></div></div></div>
<div class="item n86"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>86<div class="col"></div></div></div>
<div class="item n87"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>87<div class="col"></div></div></div>
<div class="item n88"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>88<div class="col"></div></div></div>
<div class="item n89"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>89<div class="col"></div></div></div>
<div class="item n90"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>90<div class="col"></div></div></div>
<div class="item n91"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>91<div class="col"></div></div></div>
<div class="item n92"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>92<div class="col"></div></div></div>
<div class="item n93"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>93<div class="col"></div></div></div>
<div class="item n94"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>94<div class="col"></div></div></div>
<div class="item n95"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>95<div class="col"></div></div></div>
<div class="item n96"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>96<div class="col"></div></div></div>
<div class="item n97"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>97<div class="col"></div></div></div>
<div class="item n98"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>98<div class="col"></div></div></div>
<div class="item n99"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>99<div class="col"></div></div></div>
<div class="item n100"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>100<div class="col"></div></div></div>
<div class="item n101"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>101<div class="col"></div></div></div>
<div class="item n102"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>102<div class="col"></div></div></div>
<div class="item n103"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>103<div class="col"></div></div></div>
<div class="item n104"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>104<div class="col"></div></div></div>
<div class="item n105"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>105<div class="col"></div></div></div>
<div class="item n106"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>106<div class="col"></div></div></div>
<div class="item n107"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>107<div class="col"></div></div></div>
<div class="item n108"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>108<div class="col"></div></div></div>
<div class="item n109"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>109<div class="col"></div></div></div>
<div class="item n110"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>110<div class="col"></div></div></div>
<div class="item n111"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>111<div class="col"></div></div></div>
<div class="item n112"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>112<div class="col"></div></div></div>
<div class="item n113"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>113<div class="col"></div></div></div>
<div class="item n114"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>114<div class="col"></div></div></div>
<div class="item n115"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>115<div class="col"></div></div></div>
<div class="item n116"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>116<div class="col"></div></div></div>
<div class="item n117"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>117<div class="col"></div></div></div>
<div class="item n118"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>118<div class="col"></div></div></div>
<div class="item n119"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>119<div class="col"></div></div></div>
<div class="item n120"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>120<div class="col"></div></div></div>
<div class="item n121"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>121<div class="col"></div></div></div>
<div class="item n122"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>122<div class="col"></div></div></div>
<div class="item n123"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>123<div class="col"></div></div></div>
<div class="item n124"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>124<div class="col"></div></div></div>
<div class="item n125"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>125<div class="col"></div></div></div>
<div class="item n126"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>126<div class="col"></div></div></div>
<div class="item n127"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>127<div class="col"></div></div></div>
<div class="item n128"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>128<div class="col"></div></div></div>
<div class="item n129"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>129<div class="col"></div></div></div>
<div class="item n130"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>130<div class="col"></div></div></div>
<div class="item n131"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>131<div class="col"></div></div></div>
<div class="item n132"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>132<div class="col"></div></div></div>
<div class="item n133"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>133<div class="col"></div></div></div>
<div class="item n134"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>134<div class="col"></div></div></div>
<div class="item n135"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>135<div class="col"></div></div></div>
<div class="item n136"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>136<div class="col"></div></div></div>
<div class="item n137"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>137<div class="col"></div></div></div>
<div class="item n138"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>138<div class="col"></div></div></div>
<div class="item n139"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>139<div class="col"></div></div></div>
<div class="item n140"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>140<div class="col"></div></div></div>
<div class="item n141"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>141<div class="col"></div></div></div>
<div class="item n142"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>142<div class="col"></div></div></div>
<div class="item n143"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>143<div class="col"></div></div></div>
<div class="item n144"><div class="d-flex flex-column h-100 text-center"><div class="col"></div>144<div class="col"></div></div></div>
</div>
<div class="col">
<aside class="sidebar">
<ul id="palette" class="nav nav-pills nav-fill mt-3">
<li class="nav-item">
<a class="nav-link active red" href="#">red</a>
</li>
<li class="nav-item">
<a class="nav-link green" href="#">green</a>
</li>
<li class="nav-item blue">
<a class="nav-link" href="#">blue</a>
</li>
</ul>
<div class="block">
<pre id="editor" class="mt-3">
</pre>
<div class="text-right">
<div class="run btn">
Run
</div>
</div>
</div>
</aside>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/html");
$(function(){
var now_color = "red";
var $b = $(".base");
$b.on("click", ".item", function(){
if($(this).hasClass(now_color)){
$(this).removeClass(now_color);
} else {
$(this).removeClass("red green blue");
$(this).addClass(now_color);
}
});
$(".run.btn").on("click", function(){
$("#workspace").html(editor.getValue());
});
$("#palette").on("click", ".nav-link", function(){
var $t = $(this);
$(".nav-link").removeClass("active");
$t.addClass("active");
$b.removeClass(now_color);
if($t.hasClass("red")) {
$b.addClass("red");
now_color = "red";
} else if($t.hasClass("green")) {
$b.addClass("green");
now_color = "green";
} else {
$b.addClass("blue");
now_color = "blue";
}
});
})
</script>
</body>
</html>