2014-01-05 00:24:48 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" >
2014-03-26 21:53:42 +00:00
< meta name = "Description" content = "Infinite ASCII diagrams, save to Google Drive, resize, freeform draw, and export straight to text/html." >
2014-01-11 21:02:14 +00:00
< meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" / >
2014-02-19 23:11:51 +00:00
< meta name = "apple-mobile-web-app-capable" content = "yes" / >
2014-03-22 21:26:46 +00:00
< meta name = "mobile-web-app-capable" content = "yes" / >
< link rel = "shortcut icon" sizes = "196x196" href = "images/favicon.png" >
2014-01-19 12:42:51 +00:00
< title > ASCIIFlow Infinity< / title >
2014-01-12 19:08:29 +00:00
< style >
2014-02-24 23:47:36 +00:00
* {
font-weight: bold;
2014-03-03 23:10:15 +00:00
font-family: sans-serif;
2014-02-24 23:47:36 +00:00
font-size: 0.95em;
2014-03-25 21:46:31 +00:00
color: #666;
2014-02-24 23:47:36 +00:00
}
2014-03-23 19:55:46 +00:00
a {
color: #FF9E20;
}
2014-03-22 17:05:35 +00:00
body {
margin: 0px;
}
2014-03-23 22:12:53 +00:00
button {
cursor: pointer;
}
#drive-file-list li {
list-style: none;
font-size: 15px;
margin: 5px;
}
2014-03-22 17:05:35 +00:00
#draw-tools {
2014-03-25 21:46:31 +00:00
text-align: left;
padding-left: 120px;
2014-03-22 17:05:35 +00:00
display: inline-block;
position: fixed;
width: 100%;
background-color: #FFF;
z-index: 100;
2014-03-25 21:46:31 +00:00
-webkit-box-shadow: 0px 1px 5px 0px #BBB; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
box-shadow: 0px 1px 5px 0px #BBB; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */
}
#logo-bar {
position: fixed;
left: 0px;
z-index: 101;
margin: 8px;
2014-03-22 17:05:35 +00:00
}
#file-tools {
text-align: right;
2014-02-24 23:47:36 +00:00
display: inline-block;
2014-03-22 17:05:35 +00:00
position: fixed;
2014-03-25 21:46:31 +00:00
right: 2px;
2014-01-12 19:08:29 +00:00
z-index: 100;
}
2014-03-23 12:50:45 +00:00
#draw-tools > button, #file-tools > button {
2014-03-25 21:46:31 +00:00
font-size: 12px;
2014-03-22 17:36:52 +00:00
vertical-align: top;
2014-03-22 17:05:35 +00:00
display: inline-block;
2014-03-25 21:46:31 +00:00
margin: 8px 8px;
width: 24px;
height: 24px;
2014-03-22 17:05:35 +00:00
text-align: center;
2014-03-25 21:46:31 +00:00
cursor: pointer;
2014-03-22 17:05:35 +00:00
outline: 0 !important;
2014-03-22 20:12:04 +00:00
background-size: 200% 100% !important;
background-color: #FFF;
2014-03-22 17:05:35 +00:00
}
2014-03-25 21:46:31 +00:00
#file-tools > button.info-image {
margin-left: 30px;
}
.info-icon, .info-icon-file {
2014-03-22 17:36:52 +00:00
width: 30px;
height: 30px;
2014-03-25 21:46:31 +00:00
margin: 0 0 5px -4px;
2014-03-22 17:36:52 +00:00
background-size: 100% !important;
2014-03-22 20:12:04 +00:00
background-size: 200% 100% !important;
2014-03-22 17:36:52 +00:00
display: inline-block;
}
.info-description {
2014-03-25 21:46:31 +00:00
vertical-align: text-bottom;
margin-left: 10px;
2014-03-22 17:36:52 +00:00
display: inline-block;
height: 30px;
2014-03-25 21:46:31 +00:00
width: 64%;
text-align: left;
2014-03-22 17:36:52 +00:00
}
2014-03-25 21:46:31 +00:00
.info-description br {
display: none;
}
.dialog span {
color: #AAA;
}
2014-03-22 20:12:04 +00:00
#drive-filename {
display: inline-block;
}
2014-03-25 21:46:31 +00:00
#drive-save-state {
display: inline-block;
line-height: 40px;
margin-right: 10px;
color: #bbb;
font-weight: normal;
font-size: 0.9em;
}
#drive-filename {
font-size: 30px;
border: gray 1px solid;
padding: 5px;
background: #EEE;
cursor: pointer;
}
2014-03-22 17:05:35 +00:00
/* Mobile overrides */
2014-03-25 21:46:31 +00:00
@media(max-width:780px) {
#logo-bar {
margin: 10px;
}
#draw-tools > button, #file-tools > button {
margin: 10px 4px;
}
#draw-tools {
text-align: center;
padding-left: 0px;
}
2014-03-22 17:05:35 +00:00
/* Move file tools to the bottom. */
2014-03-25 21:46:31 +00:00
#file-tools {
left: 0px;
padding-left: 9px;
2014-03-22 17:05:35 +00:00
bottom: 0px;
background-color: #FFF;
2014-03-22 20:12:04 +00:00
width: 100%;
2014-03-25 21:46:31 +00:00
text-align: left;
-webkit-box-shadow: 0px -1px 5px 0px #BBB; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
box-shadow: 0px -1px 5px 0px #BBB; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */
}
#drive-save-state {
line-height: 44px;
margin-right: 6px;
}
#options-button {
position: fixed;
right: 6px;
}
#drive-filename {
display: block;
}
2014-03-22 17:05:35 +00:00
}
2014-01-20 21:36:58 +00:00
.dialog {
2014-01-21 23:43:20 +00:00
position: fixed;
2014-02-24 23:47:36 +00:00
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
2014-03-25 21:46:31 +00:00
width: 85%;
height: 89%;
2014-02-19 23:11:51 +00:00
max-width: 640px;
2014-03-25 21:46:31 +00:00
max-height: 380px;
2014-03-22 17:05:35 +00:00
background: #FFF;
2014-01-19 23:21:53 +00:00
display: none;
2014-02-24 23:47:36 +00:00
z-index: 100;
2014-03-25 21:46:31 +00:00
padding: 20px;
text-align: center;
-webkit-box-shadow: 0px 0px 5px 0px #BBB; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
box-shadow: 0px 0px 5px 0px #BBB; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */
2014-01-19 13:28:36 +00:00
}
2014-01-20 21:36:58 +00:00
.visible {
display: block !important;
}
2014-03-22 17:05:35 +00:00
#draw-tools > button, #file-tools > button {
border-width: 0px;
2014-01-19 13:28:36 +00:00
}
2014-03-22 20:12:04 +00:00
button.active, .info-icon {
background-position: right;
2014-02-24 23:47:36 +00:00
}
.dialog > button {
margin-top: 6px;
display: inline-block;
2014-01-21 23:31:58 +00:00
}
2014-03-23 12:50:45 +00:00
.close-dialog-button, #import-submit-button, #text-tool-close {
position: absolute;
right: 0px;
bottom: 0px;
2014-03-25 21:46:31 +00:00
margin: 7px;
border: 0;
-webkit-appearance: none;
background-color: transparent;
}
@media(max-width:500px) {
#logo-bar {
display: none;
}
.info-description {
vertical-align: top;
width: 84%;
}
.dialog, .dialog p {
font-size: 0.90em !important;
}
.dialog {
padding: 10px;
max-height: 410px;
}
.info-icon, .info-icon-file {
margin: 0 0 10px -4px;
}
.info-description br {
display: block;
}
.close-dialog-button, #import-submit-button, #text-tool-close {
margin: 10px 3px;
}
}
#options-logo {
margin: 10px 0 0;
}
#options-scroll {
overflow-y: scroll;
height: 91%;
-webkit-overflow-scrolling: touch;
}
#options-scroll p {
margin: 10px 0 15px;
}
.dialog-button-bar {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 8%;
min-height: 34px;
background-color: #DDD;
text-align: right;
2014-03-23 12:50:45 +00:00
}
#import-submit-button {
2014-03-25 21:46:31 +00:00
margin-right: 80px;
2014-03-23 12:50:45 +00:00
}
2014-01-12 19:08:29 +00:00
#ascii-canvas {
2014-01-19 23:21:53 +00:00
position: fixed;
2014-01-12 19:08:29 +00:00
left: 0px;
top: 0px;
2014-01-19 23:21:53 +00:00
}
2014-01-22 22:57:33 +00:00
textarea {
2014-02-19 23:11:51 +00:00
width: 100%;
2014-03-25 21:46:31 +00:00
height: 91%;
font-size: 1.2em;
font-weight: normal;
2014-01-21 23:31:58 +00:00
overflow: hidden;
resize: none;
2014-02-19 23:11:51 +00:00
margin: 0px;
padding: 0px;
border: 0px;
2014-01-21 23:31:58 +00:00
font-family: monospace;
white-space: pre;
}
2014-03-22 20:39:50 +00:00
#logo-interstitial {
2014-03-22 21:06:31 +00:00
text-align: center;
vertical-align: middle;
2014-03-22 20:39:50 +00:00
background-color: #FFF;
z-index: 200;
position: fixed;
width: 100%;
height: 100%;
2014-03-25 21:46:31 +00:00
/* transition: opacity 1.5s ease-in-out; */
2014-03-22 20:39:50 +00:00
background-size: 100%;
2014-03-22 21:06:31 +00:00
pointer-events: none;
}
#logo-interstitial > img {
display: inline;
max-width: 100%;
max-height: 100%;
2014-03-25 21:46:31 +00:00
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
2014-03-22 20:39:50 +00:00
}
2014-03-23 11:52:12 +00:00
#text-tool-widget {
display: none;
z-index: 100;
position: fixed;
top: 60px;
left: 0px;
right: 0px;
width: 300px;
2014-03-25 23:25:28 +00:00
height: 100px;
2014-03-23 11:52:12 +00:00
margin: auto;
text-align: center;
box-shadow: 0px 0px 3px 3px #CCC;
}
2014-03-25 21:46:31 +00:00
.fade-out {
opacity: 0;
2014-03-23 19:33:17 +00:00
}
2014-03-25 21:46:31 +00:00
.box-image { background-image: url('images/box-icon.gif'); }
.line-image { background-image: url('images/line-icon.gif'); }
.freeform-image { background-image: url('images/freeform-icon.gif'); }
.erase-image { background-image: url('images/erase-icon.gif'); }
.move-image { background-image: url('images/move-icon.gif'); }
.text-image { background-image: url('images/text-icon.gif'); }
.drive-image { background-image: url('images/drive-icon.gif'); }
.export-image { background-image: url('images/export-icon.gif'); }
.import-image { background-image: url('images/import-icon.gif'); }
.clear-image { background-image: url('images/clear-icon.gif'); }
.undo-image { background-image: url('images/undo-icon.gif'); }
.redo-image { background-image: url('images/redo-icon.gif'); }
2014-04-07 22:28:20 +00:00
.select-image { background-image: url('images/select-icon.gif'); }
2014-03-25 21:46:31 +00:00
.info-image { background-image: url('images/info-icon.gif'); }
/* New intro animation */
.animated {
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
2014-03-23 19:55:46 +00:00
}
2014-03-25 21:46:31 +00:00
@-webkit-keyframes bounceOut {
0% {
opacity: 0;
-webkit-transform: scale(.9);
transform: scale(.9);
}
12.5% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
73% {
-webkit-transform: scale(1);
transform: scale(1);
}
83% {
-webkit-transform: scale(.95);
transform: scale(.95);
}
92% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(.3);
transform: scale(.3);
}
}
@keyframes bounceOut {
0% {
opacity: 0;
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
transform: scale(.9);
}
12.5% {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
73% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
83% {
-webkit-transform: scale(.95);
-ms-transform: scale(.95);
transform: scale(.95);
}
92% {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(.3);
-ms-transform: scale(.3);
transform: scale(.3);
}
2014-03-22 20:39:50 +00:00
}
2014-03-25 21:46:31 +00:00
.bounceOut {
-webkit-animation-name: bounceOut;
animation-name: bounceOut;
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
2014-03-22 17:36:52 +00:00
2014-01-12 19:08:29 +00:00
< / style >
2014-01-05 00:24:48 +00:00
< / head >
< body >
2014-02-24 23:47:36 +00:00
2014-03-25 21:46:31 +00:00
< div id = "logo-interstitial" class = "animated fadeOut" >
< img src = "images/logo-full.gif" class = "animated bounceOut" / >
2014-03-22 21:06:31 +00:00
< / div >
2014-03-22 20:39:50 +00:00
2014-03-25 21:46:31 +00:00
< img id = "logo-bar" src = "images/logo-bar.gif" width = "88" height = "24" / >
2014-02-24 23:47:36 +00:00
< div id = "draw-tools" >
2014-03-22 20:12:04 +00:00
< 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 >
2014-04-07 22:28:20 +00:00
< button id = "select-button" class = "tool select-image" > < / button >
2014-02-24 23:47:36 +00:00
< / div >
2014-03-22 17:05:35 +00:00
2014-02-24 23:47:36 +00:00
< div id = "file-tools" >
2014-03-23 19:16:21 +00:00
< div id = "drive-save-state" > Unsaved< / div >
2014-03-23 17:06:40 +00:00
< button id = "drive-button" class = "tool drive-image" > < / button >
2014-03-25 21:46:31 +00:00
< button id = "export-button" class = "tool export-image" > < / button >
< button id = "import-button" class = "tool import-image" > < / button >
< button id = "clear-button" class = "tool clear-image" > < / button >
< button id = "undo-button" class = "tool undo-image" > < / button >
< button id = "redo-button" class = "tool redo-image" > < / button >
2014-03-22 17:36:52 +00:00
< button id = "options-button" class = "tool info-image" > < / button >
2014-03-03 23:10:15 +00:00
< / div >
2014-02-24 23:47:36 +00:00
2014-03-25 21:46:31 +00:00
2014-02-24 23:47:36 +00:00
< div id = "export-button-dialog" class = "dialog" >
2014-03-25 21:46:31 +00:00
< textarea readonly id = "export-area" > < / textarea >
< div class = "dialog-button-bar" >
< button class = "close-dialog-button" > Close< / button >
< / div >
2014-02-24 23:47:36 +00:00
< / div >
2014-03-10 22:54:02 +00:00
< div id = "options-button-dialog" class = "dialog" >
2014-03-25 21:46:31 +00:00
< div id = "options-scroll" >
< img id = "options-logo" src = "images/logo-options.gif" width = "176" height = "48" / >
2014-03-26 20:55:42 +00:00
< br >
< button id = "use-lines-button" > Lines Mode< / button >
< button id = "use-ascii-button" > ASCII Mode< / button > < br >
2014-03-25 21:46:31 +00:00
< p > Moving around.< br >
Desktop: < span > Hold CTRL and drag the screen.< / span > < br >
Mobile: < span > Drag quickly to move. Press and hold to start drawing. Pinch to zoom in/out.< / span > < / p >
< div class = "info-icon box-image" > < / div > < div class = "info-description" > Draw boxes. < span > You can resize them later with the Resize tool.< / span > < / div > < br >
< div class = "info-icon line-image" > < / div > < div class = "info-description" > Draw lines. < span > Connect it to another line to change the orientation.< / span > < / div > < br >
< div class = "info-icon freeform-image" > < / div > < div class = "info-description" > Draw freehand. < span > Press a character on the keyboard and draw with it.< / span > < / div > < br >
< div class = "info-icon erase-image" > < / div > < div class = "info-description" > Erase. < span > Drag out an area to remove its contents from the canvas.< / span > < / div > < br >
2014-04-27 10:48:24 +00:00
< div class = "info-icon move-image" > < / div > < div class = "info-description" > Resize boxes and lines. < span > Drag a line to change its size/shape.< / span > < / div > < br >
2014-03-25 21:46:31 +00:00
< div class = "info-icon text-image" > < / div > < div class = "info-description" > Type text. < span > Click and type where you'd like to add text to the canvas.< / span > < / div > < br >
< br >
< div class = "info-icon-file drive-image" > < / div > < div class = "info-description" > Save. < span > Connect to Google Drive to save your work automatically.< / span > < / div > < br >
< div class = "info-icon-file export-image" > < / div > < div class = "info-description" > Export. < span > Copy your work to use it outside of ASCIIFlow.< / span > < / div > < br >
< div class = "info-icon-file import-image" > < / div > < div class = "info-description" > Import. < span > Paste ASCII/text to import it onto the canvas.< / span > < / div > < br >
< div class = "info-icon-file clear-image" > < / div > < div class = "info-description" > Clear. < span > Remove the entire contents from the canvas. Can be undone.< / span > < / div > < br >
< div class = "info-icon-file undo-image" > < / div > < div class = "info-description" > Undo. < br > < span > Made a mistake? Undo!< / span > < / div > < br >
< div class = "info-icon-file redo-image" > < / div > < div class = "info-description" > Redo. < br > < span > Too many Undo's? Redo!< / span > < / div > < br >
< br >
2014-03-26 20:55:42 +00:00
2014-03-26 21:00:29 +00:00
< div > File issues as bugs < a href = "https://github.com/lewish/asciiflow2-issues/issues" > here< / a > .< / div > < br >
2014-03-26 21:07:17 +00:00
< div > Return to the original < a href = "http://stable.ascii-flow.appspot.com/" > ASCIIFlow< / a > .< / div > < br >
2014-03-26 20:55:42 +00:00
Developed by < a href = "https://plus.google.com/+LewisHemens/about" > Lewis< / a > , Designed by < a href = "mailto:info@samirvine.co.uk" > Sam< / a > and < a href = "mailto:ryangilbanks@gmail.com" > Ryan< / a > .
2014-03-25 21:46:31 +00:00
< br >
< br >
< / div >
< div class = "dialog-button-bar" >
< button class = "close-dialog-button" > Close< / button >
< / div >
2014-03-10 22:54:02 +00:00
< / div >
2014-02-24 23:47:36 +00:00
< div id = "import-button-dialog" class = "dialog" >
< textarea id = "import-area" > < / textarea >
2014-03-25 21:46:31 +00:00
< div class = "dialog-button-bar" >
< button class = "close-dialog-button" > Close< / button >
< button id = "import-submit-button" > Import< / button >
< / div >
2014-02-24 23:47:36 +00:00
< / div >
2014-03-23 11:52:12 +00:00
2014-03-23 17:06:40 +00:00
<!-- These dialogs are handled seperately. -->
2014-03-23 11:52:12 +00:00
< div id = "text-tool-widget" >
< textarea id = "text-tool-input" > < / textarea >
2014-03-25 23:25:28 +00:00
< div class = "dialog-button-bar" >
< button id = "text-tool-close" > Close< / button >
< / div >
2014-03-23 11:52:12 +00:00
< / div >
2014-03-23 17:06:40 +00:00
< div id = "drive-dialog" class = "dialog" >
2014-03-23 19:16:21 +00:00
< div id = "drive-filename" > Untitled ASCII Diagram< / div >
2014-03-26 20:56:48 +00:00
< div style = "margin: 5px;" > Edit permissions and manage files in < a href = "http://drive.google.com/" target = "_blank" > Google Drive< / a > .< / div >
< br >
< button id = "drive-new-file-button" > New Drawing< / button >
2014-03-23 22:12:53 +00:00
< br >
2014-03-25 23:46:37 +00:00
< div id = "drive-file-list" >
2014-03-25 23:49:19 +00:00
<!-- filled with li's -->
2014-03-25 23:46:37 +00:00
< / div >
2014-03-25 21:46:31 +00:00
< div class = "dialog-button-bar" >
< button class = "close-dialog-button" > Close< / button >
< / div >
2014-03-23 17:06:40 +00:00
< / div >
2014-03-23 12:25:03 +00:00
< textarea id = "freeform-tool-input" > < / textarea >
2014-01-12 19:08:29 +00:00
< canvas id = "ascii-canvas" > < / canvas >
2014-03-23 11:52:12 +00:00
2014-01-07 22:49:54 +00:00
< script src = "jquery-1.9.1.min.js" > < / script >
2014-01-05 00:24:48 +00:00
< script src = "js-compiled.js" > < / script >
2014-03-23 17:06:40 +00:00
< script src = "https://apis.google.com/js/client.js?onload=window.gapiCallback" > < / script >
2014-03-22 20:39:50 +00:00
2014-03-26 00:08:16 +00:00
< script type = "text/javascript" >
var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
if (width > 750) {
window._tpm = window._tpm || [];
window._tpm['paywallID'] = '37774341';
window._tpm['trackPageview'] = true;
}
< / script >
< script type = "text/javascript" src = "//code.tinypass.com/tpl/d1/tpm.js" > < / script >
2014-03-26 19:47:18 +00:00
< script >
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
2014-03-26 21:43:28 +00:00
})(window,document,'script','//www.google-analytics.com/analytics.js','analytics');
2014-03-26 19:47:18 +00:00
2014-03-26 21:43:28 +00:00
analytics('create', 'UA-49427709-1', 'asciiflow.com');
analytics('send', 'pageview');
2014-03-26 19:47:18 +00:00
< / script >
2014-03-22 20:39:50 +00:00
< script >
2014-03-22 22:30:08 +00:00
window.setTimeout(function() { $('#logo-interstitial').hide(); }, 3000);
2014-03-22 20:39:50 +00:00
< / script >
2014-01-05 00:24:48 +00:00
< / body >
2014-01-07 22:49:54 +00:00
< / html >
