From dee8731e2fc57451b17356090ec449d737c169d5 Mon Sep 17 00:00:00 2001
From: Lewis Hemens <lewis@hemens.co.uk>
Date: Sat, 22 Mar 2014 17:05:35 +0000
Subject: [PATCH] Added new Look and feel with new icons, and fixed some issue
 with app authentication

---
 .../com/lewish/asciiflow/AsciiflowApp.java    |  13 +-
 images/box-tool.png                           | Bin 0 -> 950 bytes
 images/erase-tool.png                         | Bin 0 -> 1528 bytes
 images/freeform-tool.png                      | Bin 0 -> 1233 bytes
 images/info-button.png                        | Bin 0 -> 1388 bytes
 images/line-tool.png                          | Bin 0 -> 407 bytes
 images/move-tool.png                          | Bin 0 -> 1751 bytes
 images/text-tool.png                          | Bin 0 -> 1369 bytes
 index.html                                    | 160 ++++++++----------
 9 files changed, 80 insertions(+), 93 deletions(-)
 create mode 100644 images/box-tool.png
 create mode 100644 images/erase-tool.png
 create mode 100644 images/freeform-tool.png
 create mode 100644 images/info-button.png
 create mode 100644 images/line-tool.png
 create mode 100644 images/move-tool.png
 create mode 100644 images/text-tool.png

diff --git a/android-app/asciiflow-infinity/src/main/java/com/lewish/asciiflow/AsciiflowApp.java b/android-app/asciiflow-infinity/src/main/java/com/lewish/asciiflow/AsciiflowApp.java
index a7848e4..4f71076 100644
--- a/android-app/asciiflow-infinity/src/main/java/com/lewish/asciiflow/AsciiflowApp.java
+++ b/android-app/asciiflow-infinity/src/main/java/com/lewish/asciiflow/AsciiflowApp.java
@@ -4,6 +4,7 @@ import android.app.Activity;
 import android.os.Bundle;
 import android.view.Menu;
 import android.view.MenuItem;
+import android.webkit.WebChromeClient;
 import android.webkit.WebSettings;
 import android.webkit.WebView;
 import android.webkit.WebViewClient;
@@ -19,8 +20,18 @@ public class AsciiflowApp extends Activity {
         webView = (WebView) findViewById(R.id.activity_main_webview);
         WebSettings webSettings = webView.getSettings();
         webSettings.setJavaScriptEnabled(true);
+        webSettings.setSupportMultipleWindows(true);
+        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
+
         webView.setWebViewClient(new WebViewClient());
-        webView.loadUrl("http://lewish.github.io/asciiflow2/app");
+        webView.setWebChromeClient(new WebChromeClient() {
+            @Override
+            public void onCloseWindow(WebView window) {
+                webView.removeView(window);
+                super.onCloseWindow(window);
+            }
+        });
+        webView.loadUrl("http://lewish.github.io/asciiflow2/");
     }
 
 
diff --git a/images/box-tool.png b/images/box-tool.png
new file mode 100644
index 0000000000000000000000000000000000000000..5c4f83831322d60b27a433f8250f0b891e30836c
GIT binary patch
literal 950
zcmV;n14;aeP)<h;3K|Lk000e1NJLTq001Ze001Zm0ssI21Dr2900009a7bBm000XU
z000XU0RWnu7ytkO2XskIMF-vk77iyfxw%^v000A3Nkl<ZSi|j@KZ~736vltgIWzBl
z@9xH31IAd0l@<yKm~?`jpTW*1g&#$%Yz4o8AZTT&wE-bEg8#sXN(@2Wy}Nhs`_7zW
zvAd?Qx;6pb!_@PeGv}GZb4HoTlL+Gp#s3dnV3WOulNjxf^3{9%_{C~^w1?)luAcM}
zK{_^XwRO7n9>q#LcdOmFGdy*RMjx6}fYKOB;HC`t^8M5AJ{{M;>@mWo+M=`U`cpYo
zbz-?)QZ99;H#_;<TIc0ET)REvewJ}ZMUcpYZ$2DPe_fBuWv|&*N;#tyix`rg*0!tS
z^w8~qdWGqc|NL1#`>L+p9z$p4Edm_q8+@^Tz~bp;G^V3@=USPL;3%RSC4|Rzf|&PS
zV)aO}ve@hGq^}PbGUB4f1M?>9LJ3S>yt}5Z#oqARyD+kt>~w$vWZ7&dpA7DO&>wz{
zRAj`I0zXf=kdh#5VYC6whgO$SQ!l&`y;wPJeW!R%#1LgGa5wyiPyDyL(bK3U9HL`>
zq3Tivh>rIr)P16n3KOu9i>`Fr_UVb4IF+^35IHJMy}O_9Vsiq=vkOCAoqctA>~>Bu
zCQ1X6Ma&ReEej_G7!9FWWyagz`YgpzE{nhdjm`!s?X>jWFa`oF3(ER0no}wOWf~DO
zqn68FeF?q<UxF{em*7kAKf!aOYn1_M*qm93P^-;P1c`M}18uf70wftVWvI4r>k0j_
z5f}{EA)$3h=_txBbjyW0;ZthBm{<&3PIsx<$}zc0ua+ZnlA_?;>_PNmB1@Ns#zdQa
zED8{*9v5x`X-jg2gX}xXl!<^Gx^!XothMk#nl#j=wEe1?-sAg^lOgM|#gech(zoMA
zOuqUyTy8V8robMby-bv9jb3mpHf9w%$H(pNJ9WL1JH4YCAV1j-Tn=n=C|i;(Y-&X#
zK?GLLMi_>KU|}=6*EzZ$<Gw8p%KT6O2iQ7oPE9uNZUwH>1IoU#vYB*ce_UQAqv!d>
zl>ta_GMpFRoWJ{MIKB^~nWc|S7P%u@m7?_RN^FH}KK&l!Za)9IKXZ#L%{d2qHZnGj
zuzKU|;;Z=S-ex{rMu^Gmv~o3C6IGU5s=5Tpo^<`@{K{Ltf0LOqtYLZPc`yG!{^Q`k
Y0F1lLdiUisO#lD@07*qoM6N<$f?&|Xod5s;

literal 0
HcmV?d00001

diff --git a/images/erase-tool.png b/images/erase-tool.png
new file mode 100644
index 0000000000000000000000000000000000000000..1f868642be0c46187b9edb441d45f96f3a44a2ce
GIT binary patch
literal 1528
zcmV<U1qb?xP)<h;3K|Lk000e1NJLTq001Ze001Zm1^@s6jQ+T700009a7bBm000XU
z000XU0RWnu7ytkO2XskIMF-vk77i^K@9Ik5000G-Nkl<ZSi`+pZ+EIb6P$zqV(lM9
zgx>o7KUu9(s9L~_3Q3+f&*lWRw%4{l-qgc6Y&NsAvy+r*tu=n((OQEs_U$<0rxR03
zfiY&1v-f{Z!tA#Y{Hf<x5ZrFJD9aL3N(4cGySqF1zW?7OXmjfv&#J1zd_KqFa4_Xg
z(-d(WLkRKd_uo#CF$Sd+IOo0KQcBcyjpyfQ>~=eofYusCQ9vn$G)>_+j^QPJf6Uu&
zm-sl4)*5A5BFi!~O#{XlIOk^JrfHDpIXLH-PN#4jr-vZt{KK{QwIwDLwANU!*T}LA
zRaJp=4y`qmQsx`SanN-gvMj^v>npmh>mh8%{*e+>Af*(lszR1!D9aMA>q04Y!YxX=
zZChkn2F4gBlL>?ny~NIy_-dKaT4S@>Aj>k;b#0KMvL2&t|8`v$aU3H_5>xIUl^H1|
zs;a{4>nqB#1m_$=2vfS_a@oHf$H9KTM^O~uoFfcFBSGi7`kxWhTI2ow9n0ksbzPgT
zlu{b9Ypu<1dQUvmTAR&yo`*C|F&>ZMIL_H-Ih)`meOj$n$g&LE?bh&yI`%8Nc3g7T
zbuk`~kt7LR*FE8*_?NPlWr;k`(KJnOF)3w_gP+B59LMNs+qPJ**I<lcI-SCG-5yZ<
zlFr#u^8WsAkZao(oO9EijIl2zXLq#y>~=d8MS(oeaX1_<>!6(!B}zKC-EN_jg6DY#
zIoEZ;7(?5(Uvew75sJ?kGn`zlR;a4VB*_>%O_0h)e<``Tt_|O$l(@OMK^({MJP%5#
z-U$25OxWvCvb1K`b-hZ6OC?^dR(N@N!G6Do5W;ZH_kB#KQ-on?CIbcj48`NkaL&<n
z9T;N>f&in@sK-NbuEa_yGh4UYErbvzknj7L&1M*lMqrE~NfKzSv0N@c99Nh4O(h-<
zhq%AL$IZ>n=d*aT+2Hy48FgJF2m)}<vET3E`#zqYo^W?}*OP=KN$~Xa^iQ6V&?6p4
zQG_UpPG&Se{&2lsV?LjwZCgWLYK%XB{@~%^!Hg%HuTd0XHk+NGW0#UBU^k%e`*?hO
zL>$LGexB%{)*4k+VX;_1Db*ut5Cn#EAI(nAxk2FN<ppiqn)jS@v~3I5b<uU5+4x{E
zz~kd19v&Wy$NX>>Q=9MidvslAoXKD?K$@nwy}dnaHf=;4$3YZDP)Z@oGP6-ijzpS{
z0@LXf<MH^S9~6XM*L6lp>=Fb)fG`YuqI|5Gb}1=IA%sEF^E{&fwhF{?+|%51C~{ka
z>>*A8_xn9Io6Uz#+D6jw=Koz!CAMw75CUnMVltVW#5h}G3hetnq9}rt5{JXVeAqM%
zvMhs?(geK}kj^Ib4cRLp1O|hF;WAakc0d=;B#beHVF&<NE|-SnT5B{-gXMAw$8m6f
zf8T2qyUb)L7K;UTyB(yIX7fS_#Bq$tWOBmeOWG;y>`9O8Bxzv)n9t{6jN$h7*4TCX
zWJW%*X&U4E2u1RJHfrZ?AwD&%MAV`vFrUxO7^3&S?<0<5#BtmUmghP0JU7VEvDEi{
zq-lyMimtk^;pg;BDTOc$F`Lbdc99Edn#Nco+FPFID2f72)0oKs0G{XdbncqFnGekZ
z39r`LaEf&B@87>Dio$TwHnB9mY;m_`=-Zb^=QOD(3M>{291e#b3WSv1P{(EcOy{n?
z-6B^*D80SCnL8Ikm`-s*2;=K$e2vHBZ(X~6>Ci+XPQ0W86J2lE-KVw2a5zMgB*swK
zh+TW3DK4G7>?G(mKq-Z{w>NXDqs2#~k+Dqn#=hbauR6FNYZE0+@*<@)-19sSaU7pW
ziG6~zN9wQNu#)56Y&LKl2VoduI2`_S1N_<zE9V?R5SV5e3<kfF+_x`}Y@Yqr^JACj
eKlN{i<L7^B{By9IFlc-L0000<MNUMnLSTZ-yX3q8

literal 0
HcmV?d00001

diff --git a/images/freeform-tool.png b/images/freeform-tool.png
new file mode 100644
index 0000000000000000000000000000000000000000..8b519b54dc4da8bccb496839cf600cc57a202ec8
GIT binary patch
literal 1233
zcmV;?1TOoDP)<h;3K|Lk000e1NJLTq001Ze001Zm1^@s6jQ+T700009a7bBm000XU
z000XU0RWnu7ytkO2XskIMF-vk77i>h!$i|$000DVNkl<ZSi|jD$#UvC6l@K4u$@2v
z6QGjH|Nm2}?vhME7;KCONpJD$sDv@WB&oW05p8fB4XvX--N$0a7=wSfas1=$7vOiB
z)LMgc4*JdW9JARBX_}&{DscY)9=<|VV+<H$_P5*ZB93E(VF)1v0HCTWNGWZfdSjF%
z1mNlE$$|p_&bj@c`+Tm^Vp?naH)9M!2zZ`{;c$pJjxA6MP#vgrcM1S`o<k{RC!@i%
zK$~bX#_Sk(Q^pu5rI6=2s;a_%zsG1aLJ$P@r0P-Rb;Q%@6r6Lrh}Ig$7#L%qwT4ov
z)zLO>f-#1ws^I%RilV^V+Z$%H8ImM9i1q;o>xc(~0Xm%ylu`$gZ5uu6BZRPkj4|Mx
zBS{jxzrUlZDtjWE%?3gUL{W5_gG~e_Aa!6(lhm6_33u+YEU{Xx@c#ae{eFM2na9UR
z3<iVtGUIaYV(oG=pFkR8;CUY6IL5=n1Hv%0iKvvqa=C1zh9od<gqk9H3D{GTLGyIG
zU1V8?-EL<io~CJYk~Br^625&VF>XZaa|S^G&+{xlIp-E|YbS95Qqr`IAVtyTqANjC
z$^)e!X}buZJAksX4M<m{n<B^<Ls1l{stQ5~aLyrwfDqzH#`tHEa|wP)b49v|%f=Y2
z*K3qz3C0+dQjk)@_kC*)t&4@P$c)>E1fE)1mUw-AwfaXE7lvWu-10N4a+61Ejj}9{
z7CZ;g_3$)JvDs|!@$q4gx-3iF-riz393FV`rvP1oYps!G8ImNyVzEG)rmZE%r3YoI
zn?On__`Z+9V1Ou!4m9*^1gUU%etyPsxokB5HiGT)*gX}clojqcj!)~aQp(h8KE@c9
z%Ozf3UXUcoMHyTd>UyHl27TYhWHP~MG_o?*m{eM8Q-8TwEHInRkmtEACP^}g*ylLt
zmRR(Tq+~jsA`C+WL2wkgvmD&-_twm%lvYHqudi`)bAu>~EMM9tNz;+n3)Q-hH<nw*
z7@G)EN~`Yuejk&`1f5O?QpzuRu}cpE;ew-6s_WoEMXj~QYPCABx6x>X>2!)92+kG)
zry_W2jGJ(71%D*e)JZ9YqA2V!TwPt+lAJ8)(h{sGvD|m(l8?KKlJ$^*ODW-bp7r8W
zW%;>i)@gJ~$eVz2(l-L=l9@h7n~Kp(qjoC8&sivU2^)r?9b}9_S(eE2yw$>&6t}KM
zx_ujY>Ix`*vr^}>EV12gZE60K&E>uO{AoSNIY+P8J18>AQL-%iF>o%e$ffAHeoFRc
zK`8|x1a`X}{`~oaJkPCb7-P`u_0a8hZ6*BOMxUfoN_)l9@Ar?bjsUu%IiJt1)ls6<
zzgK?Zh{;imF_2PXGMQjJ9-rnQ4UFR$cXxLPg1}Bf4)Rmcqt8%UzbFdK=ks<2D*%kg
zV{|$l%;$3?Nn&pZE~#qT+~3g2d7ftja*)|{vryk1by7-UyWL{FUL(sg>ongzULgd^
vvV@cpoO47`g!}vZBd=$_chtWC|8n~efB$S!k=O*T00000NkvXXu0mjf8^uL^

literal 0
HcmV?d00001

diff --git a/images/info-button.png b/images/info-button.png
new file mode 100644
index 0000000000000000000000000000000000000000..b2f6d14456f29e345af6ca37efee2adc7ee881f7
GIT binary patch
literal 1388
zcmV-y1(W)TP)<h;3K|Lk000e1NJLTq001Ze001Zm1^@s6jQ+T700009a7bBm000XU
z000XU0RWnu7ytkO2XskIMF-vk77i~KI%EY}000FGNkl<ZSi|jDSx@6U6g}~hv=GWx
z#Qwl4{{P=W1tBC*%aT$`X=BHpm$@F>P1}t0>C-%536a{deSGe@i<4MuE&k!g@Q=42
zfd45#V~l%VCC$3=Wpn(ozma_sJ4sbl;G72wB}oDR&{{(X;l`3AfwdOj-`}v-Vm6z>
z7=tuT(Q36IrF8Gm8g;-IjRgRWF<^`ZY$i$KHi&^vCKJ59y<s#Op{gqP4y{pD6{M8d
z-rmO6))qRQPOwM3{vwb8gT$UcnVtz?Q51N7e#T@naiBQou-3YF34{;2-EQOL<OF%1
z&jIy`S!v>!EdpIt74GitP!t8El!1AwstVY%*1A6eOyG}>j&N{r@CU$e5*C4+Gche{
zjDfWloO6uFW8B~0Ln-AZDy6^}gAgKMnSe3I957=Hgb>hLLu-xQ-CdlWow+{JbzO5K
z1kM=aoP=|ZvMllN@PM)`9dH21vJA!;Xsv^T`9QVSZtdxGinX;hFvjry{tm_%PESvf
zrs+}!=Xyy`j4^1faesf0@9%H7DKVq94h}=i(E(ycvn<1OIt2ivX^NsK(C_zGYEZ=P
z?t4_f-^X}74m>Q@DE;2p*ucfb1+2ArczD2YICRXCgoF^NstQ5~SZne2_J;NKb?ofy
z)P@{u?H>k7?DStLh1b{DV3TF-`uZ9|2uLY$d3os$>u>5i3}ejg;cI)TiHT~?Ir{xR
zrqgNQ081mjr%wVv5}-I)RaF2G07jz`K0iMfuE}B(lduPaffH~OfVa1|&|0G`OZ0j@
z7Xjj!>K{f3fh0-r{{9}wrdESAD1^XpICQ69CSbo6MS-ucFK1S*HPSS7vLUJXTBqmF
z&rc|&Tzp+wER05@AnY{Jpp+72Swd^=*duVU*-1_mBaJbbOeV{{*q=n3G%+o;_4RdJ
zU0u1*L~K$Z_A8}2txcy>bUK~6Jz2~i#W-IlP1^DCF|4%^Lg4!P+68tBDP$3fo0LKs
zV=ihm$|MA~&P=Nq3>NlMAZd=kBuU~Ni1w!b*m5kU+Fy{0fToS!ComKh;)<xQXeDOj
zgi!0EX_^KLHm!guO(sbKrIa%<^~db^VAC|MEoNC=XP)Pd`lgN&J3*FZn9XLc!1eQT
zT}8dNwzfQz`1;$}*l1jm#~LQ*y12N&&dyFyz{YZ-J*AXrx7*7ziQk!J8QSf3;}{6Q
zc`da(&vABk=GgP~9hi_YbUK|m4bppTuH&~^yWK80=Z#HF>B`UPF_=0B$+8UHZg&n?
ztrz<fyWK9Nl#Q#Ir>7@Z-x2e@Ue6uUzXrq(ndf=!*uqN_wc&7xySqC#nZ^h}ow;If
zrGCooN-0;owpuOR+}t3`vS#I03}9<(3r9ysLH$M%-v<+4mSVjT2i96hDWQ~dw>-K!
ztOV%O>wDea-X0DP4qO_eio>r`wAO)M>45Q?)><f~V2r{3{yuhhcU_IR^4jT#2><d;
zDe3X?5k*m8Hk-LG29!DC%e~L2&rXsgkW%9G^c0($n~vpWH@i82%i3Ttz+f;yS(X7H
zzs9S(yAXR)N}QjcyO>8gI1VvOFYa|0qqul@d3iy<-$z-NL4d9cC7g3`&T)8nh`qhN
zV4qcY;yHl+27V>7XnZ^#<KyE4UteEPN;#8r&XHvq@;t}p=B7(yG26c9ulzQ%h=sa|
ubs?tiBh#Yy>U92BCjR-t`UCKPY`*}-MOx`nE~>Nu0000<MNUMnLSTZA0GuoU

literal 0
HcmV?d00001

diff --git a/images/line-tool.png b/images/line-tool.png
new file mode 100644
index 0000000000000000000000000000000000000000..dab4b1be21a978e85d7e8dff63c3100721692f02
GIT binary patch
literal 407
zcmeAS@N?(olHy`uVBq!ia0vp^8X(NU1|)m_?Z^dEoCO|{#S9GG!XV7ZFl&wkP>{XE
z)7O>#9<vyqhE|l<dnpD6Ml(+r$B>A_Z)cqCYBk_#^}n?+_JyDLuYdgNy97l9x7cr9
zb!GLvn>|-uH)$=L&_8*yl*;?P$Ge>$JU!UJa{`Qh^f%nAUh>PN-75X-nyt5I-rJ%R
zk*(OmAXuAU$d&f|&cb<9KJ7ZHd7GQTsY5nrh3x9`l@FdT-Ce7(ltu7h_5RQIm$F|k
zZ8dyWc7Q?jTvWDz;GE*whu9Bf&bsj3_SUw&v9_A3YqlyVX)Fzxruu4^-8KsYtLFxN
z%CnYvE{gjwZ;H@oo5ioKcn%l5byV_tw!gxo$-|}OggnD%8~4!A?aWfiW`;e67orwx
zaHT|UtM)x%`P@D<dYWqIq=jx7TZ3M`SM-!L^!Ouod}r{12kpxp9{;Ee+PnH-4{O!c
zO$E!IJboRv$Ao2vh5MiUHb%(_VD#bQ57q~#Ph6U!ePbmsP#HX3{an^LB{Ts5z=y5B

literal 0
HcmV?d00001

diff --git a/images/move-tool.png b/images/move-tool.png
new file mode 100644
index 0000000000000000000000000000000000000000..cb2b1bb841f829f2dfca22960317b1602a1cfa27
GIT binary patch
literal 1751
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

literal 0
HcmV?d00001

diff --git a/images/text-tool.png b/images/text-tool.png
new file mode 100644
index 0000000000000000000000000000000000000000..5c30098d422a24d871d0087660a498b78fcf132d
GIT binary patch
literal 1369
zcmV-f1*ZCmP)<h;3K|Lk000e1NJLTq001Ze001Zm1^@s6jQ+T700009a7bBm000XU
z000XU0RWnu7ytkO2XskIMF-vk77i{cl^Gc(000E|Nkl<ZSi|jDO?R6*6dXx_ZNNBC
zH*Pom|Np7Gc9EuzG2u%_AnC1i3l2@3#?9&C=^US6V#H|f+__g`)>?}zjJatTV{e|<
z!<EK0z|0MPt%<C)xKc3w4ugH)gE0oi7&zy2{q6v*wP1`9Tf;Em$B!Q<%M!*I0Kj&;
zMVh8qE|<_+LkRJH039ogF&JZTe}9kT@kk5;z}?*)7-LA&6pO{;{WRzpaziPFhldB8
zPNxaOT5Ih0dkn+y+YJ9J0LPj##-Jz)48s7=^XQ(n7QXMJZCgkwp|yUK7XJvKwHAHf
z<Kf`}oO5Dmxm=PiJ<r2_zenHq?{72KT1Y7&r3B|3T5ABnr%#^<tPlci+oEZj_W?N8
zkx~kIo`Z7^V+=UwSglsrY&HnP5JCtH!vMw@@;rx9>hA*_hqvoG9FIqE&MBO`-44F*
zW4GH)7E{;tB#Hidh=*ao@pvSg@jMTn=ON2706>;yST2|Jf0s;J>xm0on%S=g*fb65
zx}KD_o12?SrY1=O&N+k-Fvj5V@eys?f^$AG`%A#SN`ux~v~7#7>*xhR5a9Oq_Sb}*
zBg--Z#~4G`btub{fSmt*&W2vaVB5AR%Mw~^Vj+%W1VJ!)VHk#3uh#^abB?ksA*Fm$
zjjoy`RaK#B8Vc27u|S%pPZ)9aI0ynVZ^xpW>*^X*N}*{QSZg7KfVCE37$QlMSw^BL
z!fLgm?^<hARfVqWX2bkufJITDu4}3sp66k`UQa-sUvD-W_`Xl~+qOkjRg)xniOq`v
zN-1ge#u!9VgfvZ`urU_Cvm6)ZzVFetEhWz%C5fw@&a<qwD2f7QSyJT?LQusx*Xj6W
zoO9gV+)TcgWl81lygPappj(aa`>@thA~42K6a`MF6NC_8j3Ep|eE9GIjIr5nWgN2A
zYK84~OV3IvQ4|H$>zB3)-gxz{u8tp&Qle=Z0^avMs;a`*uV0CQxp2AGUu!+_P0l$^
zrxU8GdZOVMJ8B2cv1g2-ZrO!C2m&%+m(gSWxiCAOIiOA+)>_ncjj}8e$MK5*`FXcI
zX0Pvi)O8K5H9XIwFb%^1&N+PFrx2g(&#~&}(^^yc(^^9*by2U#$LzU@U4Q4a=YYEw
z-u=cgGWQt+W{g1y0i_hls3;23;zb&Cs}w>|9j&Sg!!XbUNs{39_7*`9pznLyUOINp
zUpBsGjN#|cpVVl$=zRS6@!2r5^P>;9`tRSrBhPbcJi{==moHxsh9R+Vz72iuMXu5K
z_U#*_l=R!rpFd-_+x_-gK38+gvc%zVAblBQkYyQ_E(h*4g`Y8oD2k9}8LYL`E8gGV
z&-$X{jnAz#&vWWnj4_Dg7-1Mry6QjOPKIHK)oL}__#Y03iHnRE{KTl0QYg!EVjtte
z|CT+jn=45Y2q7pERaH%raW=$GM|qy3>pB=?ptZ(wxx{9(nUuBju)YQ~=Nxey!}oo1
z1*H^<qL}E}efar)<8U|-7|uD;G({9eS2<>L&qh&%^?E&7*!cKlY*GB&W*pVV82G-A
zIF4rze=aHXbM@JsJS0hi#bQBBNhxQyr+kin*RibE>q*o3yJL_`SUs18laA+ku+|b0
z<ApHBe)*ug@%Z?NySqEYar`8_&mG5IdiXT9sHSPK-|wN6!gjl*t?RQ!{jUv<e|-E8
b@U7!N+p48ru_3y{00000NkvXXu0mjfFCv(%

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index 5cc02f1..4bcfeb2 100644
--- a/index.html
+++ b/index.html
@@ -13,11 +13,47 @@
   font-size: 0.95em;
 }
 
-#draw-tools, #file-tools, #edit-tools, #drive-tools, .tooltip {
+body {
+  margin: 0px;
+}
+
+#draw-tools {
+  text-align: center;
   display: inline-block;
-  position: relative;
-  float: left;
+  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;
+  width: 100%;
+  z-index: 100;
+}
+
+button {
+  display: inline-block;
+  margin: 5px;
+  width: 30px;
+  height: 30px;
+  text-align: center;
+  cursor: pointer;
+  outline: 0 !important;
+  background-size: 100% !important;
+}
+
+/* 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;
+  }
 }
 
 .dialog {
@@ -29,50 +65,32 @@
   margin: auto;
   max-width: 640px;
   max-height: 480px;
-  width: 80%;
-  height: 80%;
-  background: #B2CAFF;
-  border-width: 2px;
-  border-color: #777;
-  border-style: solid;
+  width: 90%;
+  height: 70%;
+  background: #FFF;
   display: none;
   z-index: 100;
   padding: 5px;
+  box-shadow:0px 0px 3px 3px #CCC;
 }
 
 .visible {
   display: block !important;
 }
 
-button {
-  display: block;
-  margin: 3px;
-  width: 60px;
-  height: 30px;
-  text-align: center;
-  cursor: pointer;
-  outline: 0 !important;
-  border-width: 2px;
-  border-color: #777;
-  border-style: solid;
-}
-
-#draw-tools > button {
-  background: #B2CAFF;
+#draw-tools > button, #file-tools > button {
+  background: transparent;
+  border-width: 0px;
 }
 
 #draw-tools > button.active {
-  background: #8BB5FF;
+  /* TODO: Offset background images. */
 }
 
 #file-tools > button {
   background: #D8D8D8;
 }
 
-#edit-tools > button {
-  background: #FCB789;
-}
-
 .dialog > button {
   margin-top: 6px;
   display: inline-block;
@@ -84,23 +102,8 @@ button {
   top: 0px;
 }
 
-#logo {
-  position: fixed;
-  top: 0px;
-  left: 0px;
-  z-index: 100;
-  background: #F8F8F8;
-  border-right: 1px solid #444;
-  border-bottom: 1px solid #444;
-}
 
 #drive-textarea {
-  margin: 9px;
-}
-
-#logo pre {
-  margin: 0px;
-  display: none;
 }
 
 textarea {
@@ -115,68 +118,34 @@ textarea {
   white-space: pre;
 }
 
-.tooltip {
-  display: none;
-}
-
-/* Horrible hack to stop touble tap events on mobile/tablet. */
-/* TODO: Enable tooltips on mobile without double tap .*/
-media(min-width:800px) {
-.tool:hover > .tooltip {
-  display: block;
-  position: fixed;
-  bottom: 5px;
-  left: 5px;
-}
-}
-
-
 </style>
 </head>
 <body>
-<div id="logo"><pre>
-    __   ____  ____  _  _    ____    _____ _        __
-   /  \ | ___|| ___||_||_|  / ___|| |  _  | \  __  / / 
-  / /\ \|_ \  | |    _  _  / /  | | | | | |\ \/  \/ / 
- /  __  \_\ \ | |__ | || |/ __| | |_| |_| | \      / 
-/__/  \__\___||____||_||_|_/    |____|____|  \_/\_/ 
-
-</pre></div>
 
 <div id="draw-tools">
-  <button id="box-button" class="tool active">Box
-    <div class="tooltip">Draw boxes. You can resize them later with the Resize tool.</div>
+  <button id="box-button" class="tool active" style="background-image: url('images/box-tool.png');">
   </button>
-  <button id="line-button" class="tool">Line
-    <div class="tooltip">Draw lines. Connect it to another line to change the orientation.</div>
+  <button id="line-button" class="tool" style="background-image: url('images/line-tool.png');">
   </button>
-  <button id="freeform-button" class="tool">Draw
-    <div class="tooltip">Press a character on the keyboard, then drag to draw it.</div>
+  <button id="freeform-button" class="tool" style="background-image: url('images/freeform-tool.png');">
   </button>
-  <button id="erase-button" class="tool">Erase
-    <div class="tooltip">Drag out an area to erase.</div>
+  <button id="erase-button" class="tool" style="background-image: url('images/erase-tool.png');">
   </button>
-  <button id="move-button" class="tool">Resize
-    <div class="tooltip">Resize boxes and lines, just drag a line to change it.</div>
+  <button id="move-button" class="tool" style="background-image: url('images/move-tool.png');">
   </button>
-  <button id="text-button" class="tool">Text
-    <div class="tooltip">Press where to start writing, and type the text you want.</div>
+  <button id="text-button" class="tool" style="background-image: url('images/text-tool.png');">
   </button>
-  <!-- <button id="select-button">Select</button> -->
 </div>
+
 <div id="file-tools">
-  <button id="export-button" class="tool">Export</button>
-  <button id="import-button" class="tool">Import</button>
-  <button id="save-button" class="tool">Save</button>
-  <!-- <button id="save-button" class="tool">Open</button> -->
-  <button id="options-button" class="tool">Mode</button>
-</div>
-<div id="edit-tools">
-  <button id="clear-button" class="tool">Clear</button>
-  <button id="undo-button" class="tool">Undo</button>
-</div>
-<div id="drive-tools">
   <div id="drive-filename" class="edit"></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" style="background-image: url('images/info-button.png');"></button>
 </div>
 
 <div id="export-button-dialog" class="dialog">
@@ -185,6 +154,13 @@ media(min-width:800px) {
 </div>
 
 <div id="options-button-dialog" class="dialog">
+  <div class="tooltip">Draw boxes. You can resize them later with the Resize tool.</div>
+  <div class="tooltip">Draw lines. Connect it to another line to change the orientation.</div>
+  <div class="tooltip">Press a character on the keyboard, then drag to draw it.</div>
+  <div class="tooltip">Drag out an area to erase.</div>
+  <div class="tooltip">Resize boxes and lines, just drag a line to change it.</div>
+  <div class="tooltip">Press where to start writing, and type the text you want.</div>
+
   <button id="use-lines-button">Lines Mode</button>
   <button id="use-ascii-button">ASCII Mode</button>
 </div>