asciiflow2/index.html

260 lines
6.3 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<link rel="shortcut icon" sizes="196x196" href="images/favicon.png">
<title>ASCIIFlow Infinity</title>
<style>
* {
font-weight: bold;
font-family: sans-serif;
font-size: 0.95em;
color: #777;
}
body {
margin: 0px;
}
#draw-tools {
text-align: center;
display: inline-block;
position: fixed;
width: 100%;
background-color: #FFF;
z-index: 100;
box-shadow: 0px 3px 3px #CCC;
}
#file-tools {
text-align: right;
display: inline-block;
position: fixed;
right: 0px;
z-index: 100;
}
button {
vertical-align: top;
display: inline-block;
margin: 5px;
width: 30px;
height: 30px;
text-align: center;
cursor: pointer;
outline: 0 !important;
background-size: 200% 100% !important;
background-color: #FFF;
}
.info-icon {
width: 30px;
height: 30px;
background-size: 100% !important;
background-size: 200% 100% !important;
display: inline-block;
}
.info-description {
vertical-align: middle;
margin-left: 5px;
display: inline-block;
height: 30px;
}
#drive-filename {
display: inline-block;
}
/* Mobile overrides */
@media(max-width:600px) {
/* Move file tools to the bottom. */
#file-tools {
bottom: 0px;
background-color: #FFF;
box-shadow:0px -3px 3px #CCC;
width: 100%;
}
#drive-filename {
display: block;
}
}
.dialog {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
max-width: 640px;
max-height: 480px;
width: 90%;
height: 70%;
background: #FFF;
display: none;
z-index: 100;
padding: 5px;
box-shadow:0px 0px 3px 3px #CCC;
}
.visible {
display: block !important;
}
#draw-tools > button, #file-tools > button {
border-width: 0px;
}
button.active, .info-icon {
background-position: right;
}
.dialog > button {
margin-top: 6px;
display: inline-block;
}
#ascii-canvas {
position: fixed;
left: 0px;
top: 0px;
}
textarea {
width: 100%;
height: 100%;
overflow: hidden;
resize: none;
margin: 0px;
padding: 0px;
border: 0px;
font-family: monospace;
white-space: pre;
}
#logo-interstitial {
text-align: center;
vertical-align: middle;
background-color: #FFF;
z-index: 200;
position: fixed;
width: 100%;
height: 100%;
transition: opacity 1.5s ease-in-out;
background-size: 100%;
pointer-events: none;
}
#logo-interstitial > img {
display: inline;
max-width: 100%;
max-height: 100%;
}
#text-tool-widget {
display: none;
z-index: 100;
position: fixed;
top: 60px;
left: 0px;
right: 0px;
width: 300px;
height: 80px;
margin: auto;
text-align: center;
box-shadow: 0px 0px 3px 3px #CCC;
}
.fade-out {
opacity: 0;
}
.box-image { background-image: url('images/box-icon.png'); }
.line-image { background-image: url('images/line-icon.png'); }
.freeform-image { background-image: url('images/freeform-icon.png'); }
.erase-image { background-image: url('images/erase-icon.png'); }
.move-image { background-image: url('images/move-icon.png'); }
.text-image { background-image: url('images/text-icon.png'); }
.info-image { background-image: url('images/info-icon.png'); }
</style>
</head>
<body>
<div id="logo-interstitial">
<img src="images/logo-full.png"></img>
</div>
<div id="draw-tools">
<button id="box-button" class="tool active box-image"></button>
<button id="line-button" class="tool line-image"></button>
<button id="freeform-button" class="tool freeform-image"></button>
<button id="erase-button" class="tool erase-image"></button>
<button id="move-button" class="tool move-image"></button>
<button id="text-button" class="tool text-image"></button>
</div>
<div id="file-tools">
<div id="drive-filename" class="edit">Untitled ASCII Diagram</div>
<button id="export-button" class="tool">Ex</button>
<button id="import-button" class="tool">Im</button>
<button id="save-button" class="tool">Sa</button>
<button id="clear-button" class="tool">Cl</button>
<button id="undo-button" class="tool">Un</button>
<button id="redo-button" class="tool">Re</button>
<button id="options-button" class="tool info-image"></button>
</div>
<div id="export-button-dialog" class="dialog">
<textarea readonly id="export-area"></textarea>
<button class="close-dialog-button">Close</button>
</div>
<div id="options-button-dialog" class="dialog">
<div class="info-icon box-image"></div><div class="info-description">Draw boxes. You can resize them later with the Resize tool.</div><br>
<div class="info-icon line-image"></div><div class="info-description">Draw lines. Connect it to another line to change the orientation.</div><br>
<div class="info-icon text-image"></div><div class="info-description">Press a character on the keyboard, then drag to draw it.</div><br>
<div class="info-icon erase-image"></div><div class="info-description">Drag out an area to erase.</div><br>
<div class="info-icon move-image"></div><div class="info-description">Resize boxes and lines, just drag a line to change it.</div><br>
<div class="info-icon text-image"></div><div class="info-description">Press where to start writing, and type the text you want.</div><br>
<button id="use-lines-button">Lines Mode</button>
<button id="use-ascii-button">ASCII Mode</button>
<button class="close-dialog-button">Close</button>
</div>
<div id="import-button-dialog" class="dialog">
<textarea id="import-area"></textarea>
<button class="close-dialog-button">Close</button>
<button id="import-submit-button">Submit</button>
</div>
<div id="text-tool-widget">
<textarea id="text-tool-input"></textarea>
<button id="text-tool-close">Close</button>
</div>
<textarea id="freeform-tool-input"></textarea>
<canvas id="ascii-canvas"></canvas>
<script src="https://apis.google.com/js/api.js"></script>
<script src="https://apis.google.com/js/client.js"></script>
<script src="jquery-1.9.1.min.js"></script>
<script src="jquery.jeditable.min.js"></script>
<script src="js-compiled.js"></script>
<script>
window.setTimeout(function() { $('#logo-interstitial').addClass('fade-out'); }, 1000);
window.setTimeout(function() { $('#logo-interstitial').hide(); }, 3000);
</script>
</body>
</html>