unicorn.html (21892B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Unicorn Paint</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> 8 <link rel="stylesheet" type="text/css" href="/static/jquery.colorpickersliders.css"> 9 <link rel="stylesheet" type="text/css" href="/static/unicorn-paint.css"> 10 </head> 11 <body> 12 <div class="unicornhat"> 13 <h1>Unicorn Paint</h1> 14 <table cellspacing="0" cellpadding="0" border-collapse="collapse"> 15 <tr> 16 <td data-color="0" style="background:rgb(0,0,0);"></td> 17 <td data-color="0" style="background:rgb(0,0,0);"></td> 18 <td data-color="0" style="background:rgb(0,0,0);"></td> 19 <td data-color="0" style="background:rgb(0,0,0);"></td> 20 <td data-color="0" style="background:rgb(0,0,0);"></td> 21 <td data-color="0" style="background:rgb(0,0,0);"></td> 22 <td data-color="0" style="background:rgb(0,0,0);"></td> 23 <td data-color="0" style="background:rgb(0,0,0);"></td> 24 <td data-color="0" style="background:rgb(0,0,0);"></td> 25 <td data-color="0" style="background:rgb(0,0,0);"></td> 26 <td data-color="0" style="background:rgb(0,0,0);"></td> 27 <td data-color="0" style="background:rgb(0,0,0);"></td> 28 <td data-color="0" style="background:rgb(0,0,0);"></td> 29 <td data-color="0" style="background:rgb(0,0,0);"></td> 30 <td data-color="0" style="background:rgb(0,0,0);"></td> 31 <td data-color="0" style="background:rgb(0,0,0);"></td> 32 </tr> 33 <tr> 34 <td data-color="0" style="background:rgb(0,0,0);"></td> 35 <td data-color="0" style="background:rgb(0,0,0);"></td> 36 <td data-color="0" style="background:rgb(0,0,0);"></td> 37 <td data-color="0" style="background:rgb(0,0,0);"></td> 38 <td data-color="0" style="background:rgb(0,0,0);"></td> 39 <td data-color="0" style="background:rgb(0,0,0);"></td> 40 <td data-color="0" style="background:rgb(0,0,0);"></td> 41 <td data-color="0" style="background:rgb(0,0,0);"></td> 42 <td data-color="0" style="background:rgb(0,0,0);"></td> 43 <td data-color="0" style="background:rgb(0,0,0);"></td> 44 <td data-color="0" style="background:rgb(0,0,0);"></td> 45 <td data-color="0" style="background:rgb(0,0,0);"></td> 46 <td data-color="0" style="background:rgb(0,0,0);"></td> 47 <td data-color="0" style="background:rgb(0,0,0);"></td> 48 <td data-color="0" style="background:rgb(0,0,0);"></td> 49 <td data-color="0" style="background:rgb(0,0,0);"></td> 50 </tr> 51 <tr> 52 <td data-color="0" style="background:rgb(0,0,0);"></td> 53 <td data-color="0" style="background:rgb(0,0,0);"></td> 54 <td data-color="0" style="background:rgb(0,0,0);"></td> 55 <td data-color="0" style="background:rgb(0,0,0);"></td> 56 <td data-color="0" style="background:rgb(0,0,0);"></td> 57 <td data-color="0" style="background:rgb(0,0,0);"></td> 58 <td data-color="0" style="background:rgb(0,0,0);"></td> 59 <td data-color="0" style="background:rgb(0,0,0);"></td> 60 <td data-color="0" style="background:rgb(0,0,0);"></td> 61 <td data-color="0" style="background:rgb(0,0,0);"></td> 62 <td data-color="0" style="background:rgb(0,0,0);"></td> 63 <td data-color="0" style="background:rgb(0,0,0);"></td> 64 <td data-color="0" style="background:rgb(0,0,0);"></td> 65 <td data-color="0" style="background:rgb(0,0,0);"></td> 66 <td data-color="0" style="background:rgb(0,0,0);"></td> 67 <td data-color="0" style="background:rgb(0,0,0);"></td> 68 </tr> 69 <tr> 70 <td data-color="0" style="background:rgb(0,0,0);"></td> 71 <td data-color="0" style="background:rgb(0,0,0);"></td> 72 <td data-color="0" style="background:rgb(0,0,0);"></td> 73 <td data-color="0" style="background:rgb(0,0,0);"></td> 74 <td data-color="0" style="background:rgb(0,0,0);"></td> 75 <td data-color="0" style="background:rgb(0,0,0);"></td> 76 <td data-color="0" style="background:rgb(0,0,0);"></td> 77 <td data-color="0" style="background:rgb(0,0,0);"></td> 78 <td data-color="0" style="background:rgb(0,0,0);"></td> 79 <td data-color="0" style="background:rgb(0,0,0);"></td> 80 <td data-color="0" style="background:rgb(0,0,0);"></td> 81 <td data-color="0" style="background:rgb(0,0,0);"></td> 82 <td data-color="0" style="background:rgb(0,0,0);"></td> 83 <td data-color="0" style="background:rgb(0,0,0);"></td> 84 <td data-color="0" style="background:rgb(0,0,0);"></td> 85 <td data-color="0" style="background:rgb(0,0,0);"></td> 86 </tr> 87 <tr> 88 <td data-color="0" style="background:rgb(0,0,0);"></td> 89 <td data-color="0" style="background:rgb(0,0,0);"></td> 90 <td data-color="0" style="background:rgb(0,0,0);"></td> 91 <td data-color="0" style="background:rgb(0,0,0);"></td> 92 <td data-color="0" style="background:rgb(0,0,0);"></td> 93 <td data-color="0" style="background:rgb(0,0,0);"></td> 94 <td data-color="0" style="background:rgb(0,0,0);"></td> 95 <td data-color="0" style="background:rgb(0,0,0);"></td> 96 <td data-color="0" style="background:rgb(0,0,0);"></td> 97 <td data-color="0" style="background:rgb(0,0,0);"></td> 98 <td data-color="0" style="background:rgb(0,0,0);"></td> 99 <td data-color="0" style="background:rgb(0,0,0);"></td> 100 <td data-color="0" style="background:rgb(0,0,0);"></td> 101 <td data-color="0" style="background:rgb(0,0,0);"></td> 102 <td data-color="0" style="background:rgb(0,0,0);"></td> 103 <td data-color="0" style="background:rgb(0,0,0);"></td> 104 </tr> 105 <tr> 106 <td data-color="0" style="background:rgb(0,0,0);"></td> 107 <td data-color="0" style="background:rgb(0,0,0);"></td> 108 <td data-color="0" style="background:rgb(0,0,0);"></td> 109 <td data-color="0" style="background:rgb(0,0,0);"></td> 110 <td data-color="0" style="background:rgb(0,0,0);"></td> 111 <td data-color="0" style="background:rgb(0,0,0);"></td> 112 <td data-color="0" style="background:rgb(0,0,0);"></td> 113 <td data-color="0" style="background:rgb(0,0,0);"></td> 114 <td data-color="0" style="background:rgb(0,0,0);"></td> 115 <td data-color="0" style="background:rgb(0,0,0);"></td> 116 <td data-color="0" style="background:rgb(0,0,0);"></td> 117 <td data-color="0" style="background:rgb(0,0,0);"></td> 118 <td data-color="0" style="background:rgb(0,0,0);"></td> 119 <td data-color="0" style="background:rgb(0,0,0);"></td> 120 <td data-color="0" style="background:rgb(0,0,0);"></td> 121 <td data-color="0" style="background:rgb(0,0,0);"></td> 122 </tr> 123 <tr> 124 <td data-color="0" style="background:rgb(0,0,0);"></td> 125 <td data-color="0" style="background:rgb(0,0,0);"></td> 126 <td data-color="0" style="background:rgb(0,0,0);"></td> 127 <td data-color="0" style="background:rgb(0,0,0);"></td> 128 <td data-color="0" style="background:rgb(0,0,0);"></td> 129 <td data-color="0" style="background:rgb(0,0,0);"></td> 130 <td data-color="0" style="background:rgb(0,0,0);"></td> 131 <td data-color="0" style="background:rgb(0,0,0);"></td> 132 <td data-color="0" style="background:rgb(0,0,0);"></td> 133 <td data-color="0" style="background:rgb(0,0,0);"></td> 134 <td data-color="0" style="background:rgb(0,0,0);"></td> 135 <td data-color="0" style="background:rgb(0,0,0);"></td> 136 <td data-color="0" style="background:rgb(0,0,0);"></td> 137 <td data-color="0" style="background:rgb(0,0,0);"></td> 138 <td data-color="0" style="background:rgb(0,0,0);"></td> 139 <td data-color="0" style="background:rgb(0,0,0);"></td> 140 </tr> 141 <tr> 142 <td data-color="0" style="background:rgb(0,0,0);"></td> 143 <td data-color="0" style="background:rgb(0,0,0);"></td> 144 <td data-color="0" style="background:rgb(0,0,0);"></td> 145 <td data-color="0" style="background:rgb(0,0,0);"></td> 146 <td data-color="0" style="background:rgb(0,0,0);"></td> 147 <td data-color="0" style="background:rgb(0,0,0);"></td> 148 <td data-color="0" style="background:rgb(0,0,0);"></td> 149 <td data-color="0" style="background:rgb(0,0,0);"></td> 150 <td data-color="0" style="background:rgb(0,0,0);"></td> 151 <td data-color="0" style="background:rgb(0,0,0);"></td> 152 <td data-color="0" style="background:rgb(0,0,0);"></td> 153 <td data-color="0" style="background:rgb(0,0,0);"></td> 154 <td data-color="0" style="background:rgb(0,0,0);"></td> 155 <td data-color="0" style="background:rgb(0,0,0);"></td> 156 <td data-color="0" style="background:rgb(0,0,0);"></td> 157 <td data-color="0" style="background:rgb(0,0,0);"></td> 158 </tr> 159 <tr> 160 <td data-color="0" style="background:rgb(0,0,0);"></td> 161 <td data-color="0" style="background:rgb(0,0,0);"></td> 162 <td data-color="0" style="background:rgb(0,0,0);"></td> 163 <td data-color="0" style="background:rgb(0,0,0);"></td> 164 <td data-color="0" style="background:rgb(0,0,0);"></td> 165 <td data-color="0" style="background:rgb(0,0,0);"></td> 166 <td data-color="0" style="background:rgb(0,0,0);"></td> 167 <td data-color="0" style="background:rgb(0,0,0);"></td> 168 <td data-color="0" style="background:rgb(0,0,0);"></td> 169 <td data-color="0" style="background:rgb(0,0,0);"></td> 170 <td data-color="0" style="background:rgb(0,0,0);"></td> 171 <td data-color="0" style="background:rgb(0,0,0);"></td> 172 <td data-color="0" style="background:rgb(0,0,0);"></td> 173 <td data-color="0" style="background:rgb(0,0,0);"></td> 174 <td data-color="0" style="background:rgb(0,0,0);"></td> 175 <td data-color="0" style="background:rgb(0,0,0);"></td> 176 </tr> 177 <tr> 178 <td data-color="0" style="background:rgb(0,0,0);"></td> 179 <td data-color="0" style="background:rgb(0,0,0);"></td> 180 <td data-color="0" style="background:rgb(0,0,0);"></td> 181 <td data-color="0" style="background:rgb(0,0,0);"></td> 182 <td data-color="0" style="background:rgb(0,0,0);"></td> 183 <td data-color="0" style="background:rgb(0,0,0);"></td> 184 <td data-color="0" style="background:rgb(0,0,0);"></td> 185 <td data-color="0" style="background:rgb(0,0,0);"></td> 186 <td data-color="0" style="background:rgb(0,0,0);"></td> 187 <td data-color="0" style="background:rgb(0,0,0);"></td> 188 <td data-color="0" style="background:rgb(0,0,0);"></td> 189 <td data-color="0" style="background:rgb(0,0,0);"></td> 190 <td data-color="0" style="background:rgb(0,0,0);"></td> 191 <td data-color="0" style="background:rgb(0,0,0);"></td> 192 <td data-color="0" style="background:rgb(0,0,0);"></td> 193 <td data-color="0" style="background:rgb(0,0,0);"></td> 194 </tr> 195 <tr> 196 <td data-color="0" style="background:rgb(0,0,0);"></td> 197 <td data-color="0" style="background:rgb(0,0,0);"></td> 198 <td data-color="0" style="background:rgb(0,0,0);"></td> 199 <td data-color="0" style="background:rgb(0,0,0);"></td> 200 <td data-color="0" style="background:rgb(0,0,0);"></td> 201 <td data-color="0" style="background:rgb(0,0,0);"></td> 202 <td data-color="0" style="background:rgb(0,0,0);"></td> 203 <td data-color="0" style="background:rgb(0,0,0);"></td> 204 <td data-color="0" style="background:rgb(0,0,0);"></td> 205 <td data-color="0" style="background:rgb(0,0,0);"></td> 206 <td data-color="0" style="background:rgb(0,0,0);"></td> 207 <td data-color="0" style="background:rgb(0,0,0);"></td> 208 <td data-color="0" style="background:rgb(0,0,0);"></td> 209 <td data-color="0" style="background:rgb(0,0,0);"></td> 210 <td data-color="0" style="background:rgb(0,0,0);"></td> 211 <td data-color="0" style="background:rgb(0,0,0);"></td> 212 </tr> 213 <tr> 214 <td data-color="0" style="background:rgb(0,0,0);"></td> 215 <td data-color="0" style="background:rgb(0,0,0);"></td> 216 <td data-color="0" style="background:rgb(0,0,0);"></td> 217 <td data-color="0" style="background:rgb(0,0,0);"></td> 218 <td data-color="0" style="background:rgb(0,0,0);"></td> 219 <td data-color="0" style="background:rgb(0,0,0);"></td> 220 <td data-color="0" style="background:rgb(0,0,0);"></td> 221 <td data-color="0" style="background:rgb(0,0,0);"></td> 222 <td data-color="0" style="background:rgb(0,0,0);"></td> 223 <td data-color="0" style="background:rgb(0,0,0);"></td> 224 <td data-color="0" style="background:rgb(0,0,0);"></td> 225 <td data-color="0" style="background:rgb(0,0,0);"></td> 226 <td data-color="0" style="background:rgb(0,0,0);"></td> 227 <td data-color="0" style="background:rgb(0,0,0);"></td> 228 <td data-color="0" style="background:rgb(0,0,0);"></td> 229 <td data-color="0" style="background:rgb(0,0,0);"></td> 230 </tr> 231 <tr> 232 <td data-color="0" style="background:rgb(0,0,0);"></td> 233 <td data-color="0" style="background:rgb(0,0,0);"></td> 234 <td data-color="0" style="background:rgb(0,0,0);"></td> 235 <td data-color="0" style="background:rgb(0,0,0);"></td> 236 <td data-color="0" style="background:rgb(0,0,0);"></td> 237 <td data-color="0" style="background:rgb(0,0,0);"></td> 238 <td data-color="0" style="background:rgb(0,0,0);"></td> 239 <td data-color="0" style="background:rgb(0,0,0);"></td> 240 <td data-color="0" style="background:rgb(0,0,0);"></td> 241 <td data-color="0" style="background:rgb(0,0,0);"></td> 242 <td data-color="0" style="background:rgb(0,0,0);"></td> 243 <td data-color="0" style="background:rgb(0,0,0);"></td> 244 <td data-color="0" style="background:rgb(0,0,0);"></td> 245 <td data-color="0" style="background:rgb(0,0,0);"></td> 246 <td data-color="0" style="background:rgb(0,0,0);"></td> 247 <td data-color="0" style="background:rgb(0,0,0);"></td> 248 </tr> 249 <tr> 250 <td data-color="0" style="background:rgb(0,0,0);"></td> 251 <td data-color="0" style="background:rgb(0,0,0);"></td> 252 <td data-color="0" style="background:rgb(0,0,0);"></td> 253 <td data-color="0" style="background:rgb(0,0,0);"></td> 254 <td data-color="0" style="background:rgb(0,0,0);"></td> 255 <td data-color="0" style="background:rgb(0,0,0);"></td> 256 <td data-color="0" style="background:rgb(0,0,0);"></td> 257 <td data-color="0" style="background:rgb(0,0,0);"></td> 258 <td data-color="0" style="background:rgb(0,0,0);"></td> 259 <td data-color="0" style="background:rgb(0,0,0);"></td> 260 <td data-color="0" style="background:rgb(0,0,0);"></td> 261 <td data-color="0" style="background:rgb(0,0,0);"></td> 262 <td data-color="0" style="background:rgb(0,0,0);"></td> 263 <td data-color="0" style="background:rgb(0,0,0);"></td> 264 <td data-color="0" style="background:rgb(0,0,0);"></td> 265 <td data-color="0" style="background:rgb(0,0,0);"></td> 266 </tr> 267 <tr> 268 <td data-color="0" style="background:rgb(0,0,0);"></td> 269 <td data-color="0" style="background:rgb(0,0,0);"></td> 270 <td data-color="0" style="background:rgb(0,0,0);"></td> 271 <td data-color="0" style="background:rgb(0,0,0);"></td> 272 <td data-color="0" style="background:rgb(0,0,0);"></td> 273 <td data-color="0" style="background:rgb(0,0,0);"></td> 274 <td data-color="0" style="background:rgb(0,0,0);"></td> 275 <td data-color="0" style="background:rgb(0,0,0);"></td> 276 <td data-color="0" style="background:rgb(0,0,0);"></td> 277 <td data-color="0" style="background:rgb(0,0,0);"></td> 278 <td data-color="0" style="background:rgb(0,0,0);"></td> 279 <td data-color="0" style="background:rgb(0,0,0);"></td> 280 <td data-color="0" style="background:rgb(0,0,0);"></td> 281 <td data-color="0" style="background:rgb(0,0,0);"></td> 282 <td data-color="0" style="background:rgb(0,0,0);"></td> 283 <td data-color="0" style="background:rgb(0,0,0);"></td> 284 </tr> 285 <tr> 286 <td data-color="0" style="background:rgb(0,0,0);"></td> 287 <td data-color="0" style="background:rgb(0,0,0);"></td> 288 <td data-color="0" style="background:rgb(0,0,0);"></td> 289 <td data-color="0" style="background:rgb(0,0,0);"></td> 290 <td data-color="0" style="background:rgb(0,0,0);"></td> 291 <td data-color="0" style="background:rgb(0,0,0);"></td> 292 <td data-color="0" style="background:rgb(0,0,0);"></td> 293 <td data-color="0" style="background:rgb(0,0,0);"></td> 294 <td data-color="0" style="background:rgb(0,0,0);"></td> 295 <td data-color="0" style="background:rgb(0,0,0);"></td> 296 <td data-color="0" style="background:rgb(0,0,0);"></td> 297 <td data-color="0" style="background:rgb(0,0,0);"></td> 298 <td data-color="0" style="background:rgb(0,0,0);"></td> 299 <td data-color="0" style="background:rgb(0,0,0);"></td> 300 <td data-color="0" style="background:rgb(0,0,0);"></td> 301 <td data-color="0" style="background:rgb(0,0,0);"></td> 302 </tr> 303 304 </table> 305 <div class="palette"> 306 <ul> 307 <li class="selected" style="background:rgb(0,0,0);"></li> 308 <li style="background:rgb(132,0,0);"></li> 309 <li style="background:rgb(0,132,0);"></li> 310 <li style="background:rgb(132,132,0);"></li> 311 <li style="background:rgb(0,0,132);"></li> 312 <li style="background:rgb(132,0,132);"></li> 313 <li style="background:rgb(0,132,132);"></li> 314 <li style="background:rgb(132,132,132);"></li> 315 <li style="background:rgb(198,198,198);"></li> 316 <li style="background:rgb(255,0,0);"></li> 317 <li style="background:rgb(0,255,0);"></li> 318 <li style="background:rgb(255,255,0);"></li> 319 <li style="background:rgb(0,0,255);"></li> 320 <li style="background:rgb(255,0,255);"></li> 321 <li style="background:rgb(0,255,255);"></li> 322 <li style="background:rgb(255,255,255);"></li> 323 </ul> 324 </div> 325 <div class="current"></div> 326 <div class="mc"> 327 </div> 328 <ul class="tools"> 329 <li data-tool="paint" class="paint selected"><span class="fa fa-pencil"></span></li> 330 <li data-tool="fill" class="fill"><span class="fa fa-bitbucket"></span></li> 331 <li data-tool="erase" class="erase"><span class="fa fa-eraser"></span></li> 332 <li data-tool="pick" class="pick"><span class="fa fa-eyedropper"></span></li> 333 <li data-tool="lighten" class="lighten"><span class="fa fa-sun-o"></span></li> 334 <li data-tool="darken" class="darken"><span class="fa fa-adjust"></span></li> 335 <li data-tool="trash" class="trash"><span class="fa fa-trash"></span></li> 336 <li data-tool="save" class="save"><span class="fa fa-save"></span></li> 337 </ul> 338 </div> 339 <script type="text/javascript" src="/static/jquery.min.js"></script> 340 <script type="text/javascript" src="/static/jquery-ui.min.js"></script> 341 <script type="text/javascript" src="/static/tinycolor.js"></script> 342 <script type="text/javascript" src="/static/jquery.colorpickersliders.js"></script> 343 <script type="text/javascript" src="/static/unicorn-paint.js"></script> 344 </body> 345 </html>