mirrors/roar
1
Fork 0
mirror of https://github.com/lalbornoz/roar.git synced 2024-11-22 23:36:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

assets/{css,js,html}/*, index.html: clean up & correct {CSS,HTML}.

Browse Source 
assets/text/TODO: updated.
This commit is contained in:
Lucio Andrés Illanes Albornoz 2018-11-25 11:57:06 +01:00
parent 80b89add02
commit 72cb6696b5
12 changed files with 286 additions and 251 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/css/ak.css
View File

@ -37,3 +37,7 @@
.fn {color: #FF00FF} .fn {color: #FF00FF}
.fo {color: #7F7F7F} .fo {color: #7F7F7F}
.fp {color: #D2D2D2} .fp {color: #D2D2D2}
/*
* vim:ts=2 sw=2 expandtab fenc=utf-8 foldmethod=marker nowrap tw=0
*/

14
assets/css/help.css
View File

@ -1,3 +1,13 @@
@font-face {
font-family: 'FixedsysExcelsior301Regular';
font-style: normal;
src: url('../fonts/fsex300-webfont.eot');
src: url('../fonts/fsex300-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/fsex300-webfont.woff') format('woff'),
url('../fonts/fsex300-webfont.ttf') format('truetype'),
url('../fonts/fsex300-webfont.svg#FixedsysExcelsior301Regular') format('svg');
}
body { body {
background: #000000; background: #000000;
background-image: url('../images/tile.jpg'); background-image: url('../images/tile.jpg');
@ -40,3 +50,7 @@ p {
pre { pre {
color: white; color: white;
} }
/*
* vim:ts=2 sw=2 expandtab fenc=utf-8 foldmethod=marker nowrap tw=0
*/

315
assets/css/sally.css
View File

@ -1,188 +1,205 @@
textarea,input[type=text],body {
margin:0;
font-family: 'FixedsysExcelsior301Regular';
font-size: 12pt;
font-weight: 100;
line-height: 11pt;
color: #6d6b6d;
-webkit-font-smoothing: antialiased !important;
}
body {
background-color: #000000 !important;
}
@font-face { @font-face {
font-family: 'FixedsysExcelsior301Regular'; font-family: 'FixedsysExcelsior301Regular';
font-style: normal;
src: url('../fonts/fsex300-webfont.eot'); src: url('../fonts/fsex300-webfont.eot');
src: url('../fonts/fsex300-webfont.eot?#iefix') format('embedded-opentype'), src: url('../fonts/fsex300-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/fsex300-webfont.woff') format('woff'), url('../fonts/fsex300-webfont.woff') format('woff'),
url('../fonts/fsex300-webfont.ttf') format('truetype'), url('../fonts/fsex300-webfont.ttf') format('truetype'),
url('../fonts/fsex300-webfont.svg#FixedsysExcelsior301Regular') format('svg'); url('../fonts/fsex300-webfont.svg#FixedsysExcelsior301Regular') format('svg');
font-style: normal; }
body {
background-color: #000000 !important;
transition: 0.1s linear;
} }
a {display: block} /* {{{ Element styles */
a:link, a:visited {text-decoration: none; color: #6b6760} a {
a:hover { text-decoration: underline } display: block;
}
a:link, a:visited {
color: #6B6760;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
span {
display: inline-block;
line-height: 15px;
min-width: 8px;
}
textarea {
background: #001100;
border: 1px solid #333333;
color: #00FF00;
font-family: 'FixedsysExcelsior301Regular';
font-size: 12pt;
height: 300px;
outline: 0;
width: 37vw;
}
textarea, input[type=text], body {
color: #6D6B6D;
font-family: 'FixedsysExcelsior301Regular';
line-height: 11pt;
font-size: 12pt;
font-weight: 100;
margin: 0;
-webkit-font-smoothing: antialiased !important;
}
/* }}} */
/* {{{ BODY class styles */
body.grid div {
border-left: 1px solid #444444;
}
body.grid span {
border-bottom: 1px solid #444444;
border-right: 1px solid #444444;
}
body.grid .tool {
border: 1px solid #444444;
}
body.grid #brush_wrapper > div:first-child,
body.grid #canvas_wrapper > div:first-child,
body.grid #letters_wrapper > div:first-child,
body.grid #palette_wrapper > div:first-child {
border-top: 1px solid #444444;
}
body.loading {
opacity: 0;
}
/* }}} */
/* {{{ Class styles */
.ba.focused { box-shadow: inset 0 0px 2px #000, inset 0 0px 2px #000; border-color: #000; }
.block:nth-child(n+2) { padding-left: 30px; }
.block { padding:4px; }
.bucket #canvas_wrapper { cursor: url(../images/bucket.png) 3 15, auto; }
.close { position: absolute; top: 20px; right: 20px; z-index: 2; padding: 10px; background: black; cursor: pointer; }
.dropper #canvas_wrapper { cursor: url(../images/dropper.gif) 0 15, auto; }
.ed { color: #fff; }
.ed.focused { color: white; text-decoration: underline; }
.faded { color: #404040; } .faded { color: #404040; }
.rapper, .block { .focused { box-shadow: inset 0 0px 2px #fff; border-color: #fff; }
float: left; .focused { box-shadow: inset 1px 0 2px white, inset -1px 0 2px white, inset 0 1px 2px white, inset 0 -1px 2px white; }
height:auto; .hidden { visibility: hidden; }
width:auto; .loading .vertical #ui_wrapper { clear: none }
.locked { border-bottom: 1px solid; color: #bbb; text-decoration: none; }
.selector_el.creating div { display: none; }
.selector_el.dragging { color: #0f0; }
.tool { cursor: pointer; }
.tool.focused { color: white; text-decoration: underline; }
.tool.locked.focused { box-shadow: 0 0; }
.tool.radio { margin: 0 8px 0 0; }
.vertical .wrapper, .vertical .block { float: left; }
.vertical #brush_container { display: inline-block; float: left; }
.vertical #canvas_wrapper,
.vertical #canvas_wrapper div,
.vertical #palette_wrapper,
.vertical #palette_wrapper { margin-right: 10px; }
.vertical #secret_wrapper { margin-right: 10px; }
.vertical #secret_wrapper span { float: left; clear: both; }
.vertical #tools_block { min-width: 100%; }
.vertical #tools_wrapper,
.vertical #ui_wrapper { width: 320px; float: left; clear: none; }
.vertical #workspace_wrapper { width: auto; position: relative; float: left; }
.wrapper { cursor: crosshair; }
.block {
background-color: #000000; background-color: #000000;
float: left;
height: auto;
user-select: none;
width: auto;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
user-select: none;
} }
.rapper { .custom {
white-space:pre-wrap; float: left;
word-wrap: break-word; margin-bottom: 5px;
margin-right: 5px;
} }
#ui_rapper .block { .faba.focused, .fbba.focused, .fcba.focused, .fdba.focused, .feba.focused, .ffba.focused, .fgba.focused, .fhba.focused,
width: 100px; .fiba.focused, .fjba.focused, .fkba.focused, .flba.focused, .fmba.focused, .fnba.focused, .foba.focused, .fpba.focused {
box-shadow: inset 1px 0 2px #888888, inset -1px 0 2px #888888, inset 0 1px 2px #888888, inset 0 -1px 2px #888888;
} }
.block { .panke #add_custom_el,
padding:4px; .panke #doc_el,
} .panke #export_button,
.block:nth-child(n+2) { .panke #format_el,
padding-left: 30px; .panke #grid_el,
} .panke #import_textarea,
#textarea_mode { padding: 4px; } .panke #load_el,
.tool { .panke #save_el,
cursor: pointer; .panke #vertical_checkbox { }
} .selector_el {
.hidden { border: 1px dashed #fff !important;
visibility: hidden; left: -999px;
} margin-top: -1px;
.tool.radio { padding-top: 1px;
margin: 0 8px 0 0; position: absolute;
top: -999px;
} }
.tool.radio.focused { .tool.radio.focused {
color: #000; background-color: #6D6D6D;
background-color: #6d6d6d;
box-shadow: none; box-shadow: none;
color: #000000;
} }
.transparent { .transparent {
background-color: transparent; background-color: transparent;
background-image: url(../images/gray-dither.gif); background-image: url(../images/gray-dither.gif);
background-size: 8px 8px; background-size: 8px 8px;
} }
@media (-webkit-min-device-pixel-ratio: 2) { @media (-webkit-min-device-pixel-ratio: 2) {
.transparent { .transparent {
background-size: 4px 4px; background-size: 4px 4px;
} }
} }
span,a { min-width: 8px; line-height: 15px; display: inline-block; } .wrapper {
.rapper { cursor: crosshair; } background-color: #000000;
body.grid span { border-right: 1px solid #444; border-bottom: 1px solid #444; }
body.grid div { border-left: 1px solid #444; }
body.grid #canvas_rapper > div:first-child,
body.grid #palette_rapper > div:first-child,
body.grid #letters_rapper > div:first-child,
body.grid #brush_rapper > div:first-child { border-top: 1px solid #444; }
body.grid .tool { border: 1px solid #444; }
.ed { color: #fff; }
.locked { border-bottom: 1px solid; color: #bbb; text-decoration: none; }
.tool.locked.focused { box-shadow: 0 0; }
.focused { box-shadow: inset 0 0px 2px #fff; border-color: #fff; }
.ba.focused { box-shadow: inset 0 0px 2px #000, inset 0 0px 2px #000; border-color: #000; }
.tool.focused, .ed.focused { color: white; text-decoration: underline; }
.focused { box-shadow: inset 1px 0 2px white, inset -1px 0 2px white, inset 0 1px 2px white, inset 0 -1px 2px white; }
.faba.focused, .fbba.focused, .fcba.focused, .fdba.focused, .feba.focused, .ffba.focused, .fgba.focused, .fhba.focused,
.fiba.focused, .fjba.focused, .fkba.focused, .flba.focused, .fmba.focused, .fnba.focused, .foba.focused, .fpba.focused
{ box-shadow: inset 1px 0 2px #888, inset -1px 0 2px #888, inset 0 1px 2px #888, inset 0 -1px 2px #888; }
body.loading { opacity: 0; }
body { transition: 0.1s linear; }
#import_textarea { font-size: 9pt; }
textarea { font-size:12pt; width: 37vw; height: 300px; background: #333; color: #0f0; border: 0; font-family: 'FixedsysExcelsior301Regular'; outline: 0; border: 1px solid #333; background:#010;}
#import_rapper { display: none; }
#canvas_rapper {
white-space: pre;
box-shadow: 0 0 2px rgba(255,255,255,0.3);
margin: 3px;
}
#ui_rapper { clear:both; float: left; width: 100vw; }
#workspace_rapper { width: 100%; }
.loading .vertical #ui_rapper { clear: none }
.vertical #ui_rapper { width: 320px; float: left; clear: none; }
.vertical .rapper, .vertical .block { float: left; }
.vertical #canvas_rapper,
.vertical #canvas_rapper div,
.vertical #tools_rapper,
.vertical #palette_rapper,
.vertical #brush_container { display: inline-block; float: left; }
.vertical #workspace_rapper { width: auto; position: relative; float: left; }
.vertical #palette_rapper { margin-right: 10px; }
.vertical #tools_block { min-width: 100%; }
#secret_rapper { float: left; clear: right; }
#secret_rapper span { float: left; }
.vertical #secret_rapper { margin-right: 10px; }
.vertical #secret_rapper span { float: left; clear: both; }
#tools_block > * {
cursor: crosshair;
}
#brush_rapper, #letters_rapper {
cursor: crosshair;
}
.dropper #canvas_rapper {
cursor: url(../images/dropper.gif) 0 15, auto;
}
.bucket #canvas_rapper {
cursor: url(../images/bucket.png) 3 15, auto;
}
#brush_rapper {
border: 1px solid;
display: inline-block;
margin-bottom: 13px;
float: left; float: left;
} height: auto;
#letters_rapper { user-select: none;
display: inline-block; white-space: pre-wrap;
width: auto;
word-wrap: break-word;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
user-select: none;
} }
.close { position: absolute; top: 20px; right: 20px; z-index: 2; padding: 10px; background: black; cursor: pointer; } /* }}} */
#experimental_palette_toggle.focused { box-shadow: none; } /* {{{ Id styles */
#brush_wrapper, #letters_wrapper { cursor: crosshair; }
#cursor_input { position: fixed; top: 0; right: 0; width:30px; opacity: 0; font-size: 16px; } #cursor_input { position: fixed; top: 0; right: 0; width:30px; opacity: 0; font-size: 16px; }
.selector_el { #experimental_palette_toggle.focused { box-shadow: none; }
border: 1px dashed #fff !important; #import_wrapper { display: none; }
padding-top: 1px; #import_textarea { font-size: 9pt; }
position:absolute; #secret_wrapper { float: left; clear: right; }
margin-top: -1px; #secret_wrapper span { float: left; }
top:-999px;left:-999px; #textarea_mode { padding: 4px; }
} #tools_block > * { cursor: crosshair; }
.selector_el.dragging { #ui_wrapper .block { width: 100px; }
color: #0f0; #ui_wrapper { clear:both; float: left; width: 100vw; }
} #workspace_wrapper { width: 100%; }
.selector_el.creating div {
display: none; #brush_wrapper {
} border: 1px solid;
.custom { display: inline-block;
float: left; float: left;
margin-right: 5px; margin-bottom: 13px;
margin-bottom: 5px;
} }
@keyframes rainbow { #canvas_wrapper {
0% { color: hsl(0,100%,50%) } box-shadow: 0 0 2px rgba(255,255,255,0.3);
33% { color: hsl(90,100%,50%) } margin: 3px;
50% { color: #fff } white-space: pre;
66% { color: hsl(320,100%,50%) }
100% { color: hsl(360,100%,50%) }
} }
.panke #load_el, #letters_wrapper {
.panke #import_textarea, display: inline-block;
.panke #doc_el, user-select: none;
.panke #export_button, -moz-user-select: none;
.panke #grid_el, -webkit-user-select: none;
.panke #save_el, }
.panke #vertical_checkbox, /* }}} */
.panke #add_custom_el,
.panke #format_el { } /*
* vim:ts=2 sw=2 expandtab fenc=utf-8 foldmethod=marker nowrap tw=0
*/

3
assets/html/help.html
View File

@ -6,7 +6,6 @@
<head> <head>
<link charset="utf-8" href="../css/help.css" rel="stylesheet" type="text/css" /> <link charset="utf-8" href="../css/help.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<title>asciiblaster v1.0.6 documentation</title> <title>asciiblaster v1.0.6 documentation</title>
</head> </head>
<!-- }}} --> <!-- }}} -->
@ -39,6 +38,8 @@
encode to, assuming UTF-8, 2-3 bytes in total vs. one (1) byte for those part of the initial encode to, assuming UTF-8, 2-3 bytes in total vs. one (1) byte for those part of the initial
set (e.g. 0-9, A-Z, a-z, etc.)<br /> set (e.g. 0-9, A-Z, a-z, etc.)<br />
<br /> <br />
Internet Explorer is explicitly unsupported.<br />
<br />
Repeating patterns of alternating back- and foreground colours, and vice versa, are encoded Repeating patterns of alternating back- and foreground colours, and vice versa, are encoded
using a single (1) byte in mIRC format (video reverse) and as such save space, especially using a single (1) byte in mIRC format (video reverse) and as such save space, especially
with large numbers of repetitions or alternations. with large numbers of repetitions or alternations.

10
assets/js/app.js
View File

@ -17,10 +17,10 @@ function init () {
bind() bind()
} }
function build () { function build () {
canvas.append(canvas_rapper) canvas.append(canvas_wrapper)
brush.append(brush_rapper) brush.append(brush_wrapper)
palette.append(palette_rapper) palette.append(palette_wrapper)
letters.append(letters_rapper) letters.append(letters_wrapper)
letters.repaint("Basic Latin") letters.repaint("Basic Latin")
controls.circle.focus() controls.circle.focus()
@ -30,7 +30,7 @@ function build () {
brush.build() brush.build()
// controls.grid.use() // controls.grid.use()
canvas.resize_rapper() canvas.resize_wrapper()
} }
function bind () { function bind () {
canvas.bind() canvas.bind()

4
assets/js/clipboard.js
View File

@ -19,8 +19,8 @@ var clipboard = (function () {
if (! clipboard.importing) { clipboard.export_data() } if (! clipboard.importing) { clipboard.export_data() }
} }
}, },
show: function () { import_rapper.style.display = "block"; clipboard.visible = true; changed = false }, show: function () { import_wrapper.style.display = "block"; clipboard.visible = true; changed = false },
hide: function () { import_rapper.style.display = "none"; clipboard.visible = false }, hide: function () { import_wrapper.style.display = "none"; clipboard.visible = false },
focus: function () { focus: function () {
if (! clipboard.importing) { if (! clipboard.importing) {
import_textarea.focus() import_textarea.focus()

30
assets/js/matrix.js
View File

@ -58,8 +58,8 @@ Matrix.prototype.demolish = function (){
this.forEach(function(lex){ this.forEach(function(lex){
lex.demolish() lex.demolish()
}) })
while (this.rapper && this.rapper.firstChild) { while (this.wrapper && this.wrapper.firstChild) {
this.rapper.removeChild(this.rapper.firstChild); this.wrapper.removeChild(this.wrapper.firstChild);
} }
this.aa.forEach(function(row){ this.aa.forEach(function(row){
row.length = 0 row.length = 0
@ -122,15 +122,15 @@ Matrix.prototype.build = function(){
lex.build() lex.build()
}) })
} }
Matrix.prototype.append = function(rapper){ Matrix.prototype.append = function(wrapper){
rapper = this.rapper = rapper || this.rapper wrapper = this.wrapper = wrapper || this.wrapper
if (! this.rapper) return if (! this.wrapper) return
this.aa.forEach(function(row, y){ this.aa.forEach(function(row, y){
var div = document.createElement("div") var div = document.createElement("div")
row.forEach(function(lex, x) { row.forEach(function(lex, x) {
div.appendChild(lex.span) div.appendChild(lex.span)
}) })
rapper.appendChild( div ) wrapper.appendChild( div )
}) })
} }
Matrix.prototype.region = function(w,h,x,y) { Matrix.prototype.region = function(w,h,x,y) {
@ -164,7 +164,7 @@ Matrix.prototype.resize = function(w,h){
h = h || canvas.h h = h || canvas.h
var div, row, lex var div, row, lex
var f = this.f, old_h = this.aa.length, old_w = this.aa[0].length var f = this.f, old_h = this.aa.length, old_w = this.aa[0].length
var rapper = this.rapper var wrapper = this.wrapper
w = max(w, 1) w = max(w, 1)
h = max(h, 1) h = max(h, 1)
if (h < old_h) { if (h < old_h) {
@ -180,7 +180,7 @@ Matrix.prototype.resize = function(w,h){
else if (h > old_h) { else if (h > old_h) {
for (var y = old_h; y < h; y++) { for (var y = old_h; y < h; y++) {
div = document.createElement("div") div = document.createElement("div")
rapper.appendChild( div ) wrapper.appendChild( div )
this.aa[y] = new Array (w) this.aa[y] = new Array (w)
for (var x = 0; x < w; x++) { for (var x = 0; x < w; x++) {
lex = this.aa[y][x] = f(x,y) lex = this.aa[y][x] = f(x,y)
@ -211,11 +211,11 @@ Matrix.prototype.resize = function(w,h){
this.h = h this.h = h
this.bind && this.bind() this.bind && this.bind()
this.focus_clamp() this.focus_clamp()
if (this.rapper && this.rapper.parentNode != document.body) { if (this.wrapper && this.wrapper.parentNode != document.body) {
this.resize_rapper() this.resize_wrapper()
} }
} }
Matrix.prototype.resize_rapper = function(){ Matrix.prototype.resize_wrapper = function(){
var cell = canvas.aa[0][0].span var cell = canvas.aa[0][0].span
var cw = cell.offsetWidth var cw = cell.offsetWidth
var ch = cell.offsetHeight var ch = cell.offsetHeight
@ -223,10 +223,10 @@ Matrix.prototype.resize_rapper = function(){
var width = cw * this.aa[0].length var width = cw * this.aa[0].length
var height = ch * this.aa.length var height = ch * this.aa.length
if (canvas.grid) { width++; height++ } if (canvas.grid) { width++; height++ }
this.rapper.parentNode.style.height = "" this.wrapper.parentNode.style.height = ""
this.rapper.style.width = this.wrapper.style.width =
this.rapper.parentNode.style.width = (width) + "px" this.wrapper.parentNode.style.width = (width) + "px"
this.rapper.style.top = "" this.wrapper.style.top = ""
} }
Matrix.prototype.ascii = function () { Matrix.prototype.ascii = function () {
var lines = this.aa.map(function(row, y){ var lines = this.aa.map(function(row, y){

12
assets/js/ui/brush.js
View File

@ -113,14 +113,14 @@ var custom = (function(){
exports.clone = function (){ exports.clone = function (){
var new_brush = brush.clone() var new_brush = brush.clone()
var rapper = document.createElement("div") var wrapper = document.createElement("div")
rapper.className = "custom" wrapper.className = "custom"
new_brush.append(rapper) new_brush.append(wrapper)
custom_rapper.appendChild(rapper) custom_wrapper.appendChild(wrapper)
// store in localstorage? // store in localstorage?
rapper.addEventListener("click", function(e){ wrapper.addEventListener("click", function(e){
if (e.shiftKey) { if (e.shiftKey) {
rapper.parentNode.removeChild(rapper) wrapper.parentNode.removeChild(wrapper)
delete new_brush delete new_brush
} else { } else {
// load this brush // load this brush

6
assets/js/ui/controls.js vendored
View File

@ -122,9 +122,9 @@ var controls = (function(){
state = typeof state == "boolean" ? state : ! document.body.classList.contains("grid") state = typeof state == "boolean" ? state : ! document.body.classList.contains("grid")
document.body.classList[ state ? "add" : "remove" ]('grid') document.body.classList[ state ? "add" : "remove" ]('grid')
letters.grid = palette.grid = canvas.grid = state letters.grid = palette.grid = canvas.grid = state
canvas.resize_rapper() canvas.resize_wrapper()
palette.resize_rapper() palette.resize_wrapper()
letters.resize_rapper() letters.resize_wrapper()
if (! selection.hidden) selection.reposition() if (! selection.hidden) selection.reposition()
this.update( state ) this.update( state )
} }

4
assets/js/ui/paletters.js
View File

@ -192,14 +192,14 @@ var palette = (function(){
brush.char = lex.char brush.char = lex.char
brush.opacity = lex.opacity brush.opacity = lex.opacity
brush.generate() brush.generate()
brush_rapper.style.borderColor = css_reverse_lookup[fillColor] brush_wrapper.style.borderColor = css_reverse_lookup[fillColor]
return return
}) })
}) })
} }
brush_rapper.style.borderColor = css_reverse_lookup[fillColor] brush_wrapper.style.borderColor = css_reverse_lookup[fillColor]
return palette return palette

15
assets/text/TODO
View File

@ -1,8 +1,7 @@
1) bug: fix @ IE8? 1) feature: {bold,italic,underline} attributes
2) feature: {bold,italic,underline} attributes 2) feature: draw w/ keyboard instead of [LR]MB
3) feature: draw w/ keyboard instead of [LR]MB 3) feature: {line,measuring} tool
4) feature: {line,measuring} tool 4) feature: status bar w/ position, etc.
5) feature: status bar w/ position, etc. 5) feature: zoom {in,out} (esp. on Android)
6) feature: zoom {in,out} (esp. on Android) 6) reimplement: ANSI (maybe,) {save,upload} as PNG & gallery, cutoff (print line #(s) affected, tunably,) shaders (maybe)
7) reimplement: ANSI (maybe,) {save,upload} as PNG & gallery, cutoff (print line #(s) affected, tunably,) shaders (maybe) 7) releases: merge w/ MiRCARTools (into asciiblaster,) provide signed release APK
8) releases: merge w/ MiRCARTools (into asciiblaster,) provide signed release APK

28
index.html
View File

@ -13,26 +13,26 @@
<!-- }}} --> <!-- }}} -->
<!-- {{{ BODY --> <!-- {{{ BODY -->
<body class="loading panke"> <body class="loading panke">
<!-- {{{ DIV: workspace_rapper --> <!-- {{{ DIV: workspace_wrapper -->
<div id="workspace_rapper"> <div id="workspace_wrapper">
<div id="canvas_rapper" class="rapper"></div> <div id="canvas_wrapper" class="wrapper"></div>
</div> </div>
<!-- }}} --> <!-- }}} -->
<!-- {{{ DIV: ui_rapper --> <!-- {{{ DIV: ui_wrapper -->
<div id="ui_rapper"> <div id="ui_wrapper">
<!-- {{{ DIV: tools_block --> <!-- {{{ DIV: tools_block -->
<div class="block" id="tools_block"> <div class="block" id="tools_block">
<div id="palette_rapper"></div> <div id="palette_wrapper"></div>
<div id="secret_rapper"> <div id="secret_wrapper">
<span id="experimental_palette_toggle">.</span> <span id="experimental_palette_toggle">.</span>
</div> </div>
<div id="letters_rapper"></div> <div id="letters_wrapper"></div>
<div id="custom_rapper"></div> <div id="custom_wrapper"></div>
</div> </div>
<!-- }}} --> <!-- }}} -->
<!-- {{{ DIV: brush_container --> <!-- {{{ DIV: brush_container -->
<div id="brush_container" class="block"> <div id="brush_container" class="block">
<div id="brush_rapper"> <div id="brush_wrapper">
</div> </div>
<span id="fg_checkbox" class="tool">x fg</span><br /> <span id="fg_checkbox" class="tool">x fg</span><br />
<span id="bg_checkbox" class="tool">x bg</span><br /> <span id="bg_checkbox" class="tool">x bg</span><br />
@ -43,8 +43,8 @@
<span id="redo_el" class="tool hidden">redo</span><br /> <span id="redo_el" class="tool hidden">redo</span><br />
</div> </div>
<!-- }}} --> <!-- }}} -->
<!-- {{{ DIV: tools_rapper --> <!-- {{{ DIV: tools_wrapper -->
<div id="tools_rapper" class="block"> <div id="tools_wrapper" class="block">
<span id="square_el" class="tool">square</span><br /> <span id="square_el" class="tool">square</span><br />
<span id="circle_el" class="tool">circle</span><br /> <span id="circle_el" class="tool">circle</span><br />
<span id="cross_el" class="tool">cross</span><br /> <span id="cross_el" class="tool">cross</span><br />
@ -72,12 +72,12 @@
<span id="vertical_checkbox" class="tool">x vertical</span> <span id="vertical_checkbox" class="tool">x vertical</span>
</div> </div>
<div id="import_rapper"> <div id="import_wrapper">
<span id="format_el">ascii *mirc</span> <span id="format_el">ascii *mirc</span>
<span id="import_buttons"> <span id="import_buttons">
<button id="import_button">import</button> <button id="import_button">import</button>
</span> </span>
<div id="gallery_rapper" /><br /> <div id="gallery_wrapper" /><br />
<div id="cutoff_warning_el">character limit of 425 exceeded</div> <div id="cutoff_warning_el">character limit of 425 exceeded</div>
<textarea id="import_textarea" cols="100" rows="30"></textarea> <textarea id="import_textarea" cols="100" rows="30"></textarea>
</div> </div>