From 9789fb74552260f48d6103f4969287c1d5785fe9 Mon Sep 17 00:00:00 2001 From: RixTox Date: Fri, 6 Dec 2013 00:55:36 +0800 Subject: [PATCH] start ui design --- client/src/styles/main.styl | 125 ++++- client/static/font/cena.eot | Bin 0 -> 2468 bytes client/static/font/cena.svg | 55 ++ client/static/font/cena.ttf | Bin 0 -> 2308 bytes client/static/font/cena.woff | Bin 0 -> 1500 bytes client/static/img/cloud.svg | 791 +++++++++++++++++++++++++++++ client/static/styles/cena-icon.css | 89 ++++ client/views/index.jade | 52 +- client/views/layouts/default.jade | 1 + 9 files changed, 1084 insertions(+), 29 deletions(-) create mode 100644 client/static/font/cena.eot create mode 100644 client/static/font/cena.svg create mode 100644 client/static/font/cena.ttf create mode 100644 client/static/font/cena.woff create mode 100755 client/static/img/cloud.svg create mode 100644 client/static/styles/cena-icon.css diff --git a/client/src/styles/main.styl b/client/src/styles/main.styl index d9fed49..496396d 100644 --- a/client/src/styles/main.styl +++ b/client/src/styles/main.styl @@ -1,7 +1,122 @@ -#section-title, #section-form - margin 0 auto - width 980px +@font-face + font-family 'Josefin Sans' + font-style normal + font-weight 400 + src local('Josefin Sans'), local('JosefinSans'), url("http://themes.googleusercontent.com/static/fonts/josefinsans/v3/xgzbb53t8j-Mo-vYa23n5qRDOzjiPcYnFooOUGCOsRk.woff") format('woff') + +@font-face + font-family 'Lato' + font-style normal + font-weight 100 + src local('Lato Hairline'), local('Lato-Hairline'), url("http://themes.googleusercontent.com/static/fonts/lato/v6/Kom15zUm24dIPfIRiNogNuvvDin1pK8aKteLpeZ5c0A.woff") format('woff') + +html + height 100% + +body + background #36b0e3 + background-image url("../img/cloud.svg"), linear-gradient(to right, #36b0e3 10%, #0071b3 100%) + background-repeat no-repeat + background-position bottom + background-attachment fixed + background-size 100% + font-family 'Lato' + font-weight 100 + letter-spacing 0.7pt + margin 0 + +ul + padding 0 + margin 0 + +li + list-style none + +icon + height 50px + width 50px + font-size 40px + overflow hidden + &:before + margin 5px + +.wrapper + margin 100px auto + width 500px text-align center -#form-table - display inline-block \ No newline at end of file +.button + cursor pointer + +#title + color #fff + font 400 60pt/40pt 'Josefin Sans' + letter-spacing 5pt + text-shadow 2px 2px 2px rgba(0,0,0,0.2) + +#main-form + border-radius 5px + overflow hidden + box-shadow 0 0 20px rgba(0,0,0,0.3) + .card-list-item + min-height 200px + background #f2f2f2 + .control-item + padding 8px 50px + font-size 25px + text-align right + color #fff + position relative + transition all 0.3s ease + icon + position absolute + right 0 + top 0 + &.add + background #00beff + &:hover + background #1ac4ff + &.start + background #2cca2c + &:hover + background #3cd53c + &.button + &:hover + text-shadow 0 0 10px rgba(255,255,255,0.5) + +.card-item + height 50px + overflow hidden + background #fff + position relative + color #555 + text-align left + font-size 20px + border-bottom solid 1px #eee + .input + margin-right 50px + input + border 0 + width 50% + height 50px + padding 0 + float left + text-align right + font 100 25px 'Lato' + letter-spacing 1pt + outline none + color #555 + .control + background #fff + position absolute + white-space nowrap + right 0 + top 0 + bottom 0 + .message + margin-top -8px + .shown, .hidden + display inline-block + +.fail + color #dc1d25 diff --git a/client/static/font/cena.eot b/client/static/font/cena.eot new file mode 100644 index 0000000000000000000000000000000000000000..4c53ad426bead41756f9881844303ade27868306 GIT binary patch literal 2468 zcmds3Uuct86hG(tpIDnjvb4HtKib;*hbHOQHg!o|yLDDK+S&T2?4e9!leB?03F)V% zsIbXkGWIBpy^cK$2ckvB7~%?pJ&dtG;DZk`_OLNueCW^z$7uJvH(xceu)Xiz+v|ts8m1?VWPfc#{o6S_G#E8JpthJrtEN4w|U;dytH=mEIwhCPqh3jOV{gMC9Sj?RTu*$4Jb9p)M#obcI28%q_ST<2QN&`b*F|=8H3F= zUPxC;^d_Cg`T@{(A-#~jG?KVRWDFy+$x?CAz5Df7Kf&}xtY_rju)oQv?#ija;A7fS z&A|`fo{C|eBn&~@E&c$c<)sJ=`~)XjmFHVhllWw#X_DiknAk0v5M;?4MzBTG6yirD z_BO^j(1$(vn6}eA*0oZh!e#)!wq}`Cw?!{ZlfJ`U}ZpBG9@|0joh?L8F(4y!ETB)MGS5aZJSKA z`WuD@+x$NNkyh1G6u-7@Ai2dlaCGnRkp`>93|g)J#^XWtU`K4Y+}x;#HT$s1+Lk@x z>`VKGUbME(5AC&mjaEnO^$X9%qIGjDs`;qq!P&)|6L3ca|BkAwbvu`lM`~1D3-vkQ zx!Fb{5@75(#xl;eCjJVV?`pcHCar+wEY(@~DB$~0Rr}45)s0K0-iE!|#sH4gey%xB zwPrpu^l7n;NqAgm(@y@%zTZRT`#y9kSV#z`umjSw?|O zlZ!cnoA3-RVLpa(Sphr`=+YdpQCU7+3ClDKX`38bMs3;y2^YOYN!u~%z#UZYP0|*& z?4+IO?s2-Ecn>5tR8ZB8|9ognWy_2CV!@8bd!q4p+}@<&X=Oo`+m0MFMtu|6$HR#g wR#{`64K~fQh5TqwJnq3B4>}&~^i_=WCqD`!wQqob0A{sjga7~l literal 0 HcmV?d00001 diff --git a/client/static/font/cena.svg b/client/static/font/cena.svg new file mode 100644 index 0000000..b3d935c --- /dev/null +++ b/client/static/font/cena.svg @@ -0,0 +1,55 @@ + + + + + +Created by FontForge 20120731 at Fri Dec 6 00:49:51 2013 + By Rix +Created by Rix with FontForge 2.0 (http://fontforge.sf.net) + + + + + + + + + + + + + diff --git a/client/static/font/cena.ttf b/client/static/font/cena.ttf new file mode 100644 index 0000000000000000000000000000000000000000..cfb61bd90a61def723c0730fea8948dfd9202b68 GIT binary patch literal 2308 zcmds3%}ZQY6hG&E&%`)0G9687;zNzb1n1+aV>+YN)@G6x(|j4}LYhpR8GWEL!}yXY zNuZTNL+LV5y6vho5Tb-qN=Su57p3$AvdAKoE?SyR7M5g@QnbJO=4l*-{sFz0d(X!` z_x#R1_s)4kOhmisJ(B5ECNp-z{yrNeG9E+QeDZ9}8h-w69}&L;`NHIEwoHMicOXB& zczyD+V^WCUAd;J~u1sa;%IoX!M8RN{nVN@&QO98_lGU396t& zUR7~lv`Xvif$BPzSbG5`U^cS?)@{Pi|G&BKnhv>rhHlee+|J{C1KALH|CG-mqdG;G zm|_FVx@Au#il1UvJWi?BgCQ^5sq2 zzG+t$CngprSZ7(4#x%b+rfQn%F+2wY`{ti8m{@#GQeM( zQ)kBzcXlLOxIbBg{y3dB4B4lo(~3_v3`jwDs=>b|j1*y`Y%vipit&c)_zqrt7tsN& z4LCsQcad~g9O8Oz+%NUN3V5g+BaIP_+d>VelP&(bp@CMv&wso{HYCZfH1wx-8Ancb z4Ii&Fn)RU3;;%m&ln2{m!mrL zU|0(^2%iLeAIox|9x}R7WNIhBrk1E7RJzk|C&v?8B{fCI26;UHEV^n!YjlS#g z64lYS9xu}{J@j~m3{HEz3aqz0UW5KRjZlU1lqCmq4wdjCEnq%FHsUtv3aCTV;4)OA zB6vY7GzDvuEc`O#pa)^$pqD9y`X8f$XDevcHcE5QM&Th3JG|wQNsV=6k^`+VIpRelGIHJoTnQj4h}V_Hky`qwSRy+ZV4HsS*;|QaI zbK36dP52R>M218+iN^DlIlELerwo7A;vdOe8*h>KMa2MlK|QJAK+jA)mX;> literal 0 HcmV?d00001 diff --git a/client/static/font/cena.woff b/client/static/font/cena.woff new file mode 100644 index 0000000000000000000000000000000000000000..ca2efe3a47f2ea5bec7f08d7bf731e1e4804da89 GIT binary patch literal 1500 zcmZuxdo$_niG_?>(P;&*$^~eDD3WjB2i^JdofQ1z7fw4V6`F#Z| zI#Lg6wosFwj|ZzTw*HI==p)oYt|*6025|nt$NZr0Fw7eQ0H;D}7{mwoGT4wK&|?B& zCJmMT5dcM~p^&eIFu-xJgaA$?4{FnpYd~lbC&8ECP!{xI<+Z8FfgQu$<}i5hUQ7by zx)6H65uhOqjxQ{08`NRV*zIvPW@X&ah)7u93Fz4Y!R~FW@8%7$P&SH!2>~*i$~#$b zhdkmy*5l5(H|#1@$8UHp93)JJBMBv#&nk-fFzH|aEE7e$SxkTtnUK$tZzd3ceg!7x zzqo|m?T`8ajG>+%8=SE~rulfFI0x>0%V#jrWuc&5Aee5xBoYWDD@z(_`)D-?f>0~M zXaYV+Y*RV+DqqNz=r`NDiEuJyWSSbyKc$(KV}u}BuyJBV3#@~Qs;~jpQ1K&12#^^Z zAdh1vznzbwehH{1(T=E6fmxt5olqwd^g6N0R#N+ZnT&7HER!vF{E|yP8%#zFar&#z zp-d~nS#q-u0M=q+C42<@OSo?MHiN-!uz)eZxM5OwLs8jXL93lr#QtM%M@4kA@-^1O zO8X18rXCrj$J{Nb|G*|(RUaPqHo@=A*^ttk)|!+ePW-H^=8tpEoNC zF^?XeOA{+7)X5evr&UVRg==q06i!@^FBfWASuR-iyng@HXeP!}==DxJoX}M;XjmJy zu8sS!$X2>elqGu?xoziKoy%&i`}wNI>tluLv4<6<;-=F!2Nz2aQ*%-=n-)}IUwS#eB(7mWC3zFOP4{;6R-92a!Rd|kSvH6- zcH`VvaXNc)Y7E*I@`{tvf6N{e(E8@rJQCD;y`WoL2DL(W~=%+f`JiCFqBR$-5lt834BW8s^!52??h zX3B1L`D=E@&$<-#zOZPI&2MS=z5!v)zRvhfuP7sGQ2q3fa5Le27W{4AP+VrE6PBtb zY7|-{RMGQN{gsD~+Y7lH4Q+|5HHguQmI2pdCXKL3)w1;S)oJnkg7^%d%)o1g-oKx0 z{Is+*76YEnlld>rTXt1gB@YOcYToJ8k&HKC?NeH!B+jzW*eU#uNxz30lk+QK~Q!aPjU9da*> z=0?0JA9#}28Ry0ccco0}Rv)nLqU0q`aX6#Qv{<4a<6f_9*>A+hGNT7jRma35`Mv&0 zx*@a~e`jJ?wy4x`DL&Xi({0(w%jv@G%N?bjUtJvNcPo8=xa*kH?t3} zOpqi~pcwGg^l{rI_%s?7&Mj3)6|IU|RekZ5Z@s1##p + + + + + + + + + + + + diff --git a/client/static/styles/cena-icon.css b/client/static/styles/cena-icon.css new file mode 100644 index 0000000..3b4a963 --- /dev/null +++ b/client/static/styles/cena-icon.css @@ -0,0 +1,89 @@ +/* + Icon Font: Cena +*/ + +@font-face { + font-family: "Cena"; + src: url("../font/cena.eot"); + src: url("../font/cena.eot?#iefix") format("embedded-opentype"), + url("../font/cena.woff") format("woff"), + url("../font/cena.ttf") format("truetype"), + url("../font/cena.svg#cena") format("svg"); + font-weight: normal; + font-style: normal; +} + +.icon-spin:before { + -webkit-animation: spin 2s infinite linear; + -moz-animation: spin 2s infinite linear; + -o-animation: spin 2s infinite linear; + animation: spin 2s infinite linear; +} + +@-moz-keyframes spin { + 0% { + -moz-transform: rotate(0deg); + } + 100% { + -moz-transform: rotate(359deg); + } +} +@-webkit-keyframes spin { + 0% { + -webkit-transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + } +} +@-o-keyframes spin { + 0% { + -o-transform: rotate(0deg); + } + 100% { + -o-transform: rotate(359deg); + } +} +@-ms-keyframes spin { + 0% { + -ms-transform: rotate(0deg); + } + 100% { + -ms-transform: rotate(359deg); + } +} +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(359deg); + } +} + +[data-icon]:before { content: attr(data-icon); } + +[data-icon]:before, +.icon-add:before, +.icon-cross:before, +.icon-loading:before, +.icon-remove:before, +.icon-tick:before, +.icon-waiting:before { + font-family: "Cena"; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + display: inline-block; + text-decoration: inherit; +} + +.icon-add:before { content: "\f100"; } +.icon-cross:before { content: "\f101"; } +.icon-loading:before { content: "\f102"; } +.icon-remove:before { content: "\f103"; } +.icon-tick:before { content: "\f104"; } +.icon-waiting:before { content: "\f105"; } diff --git a/client/views/index.jade b/client/views/index.jade index f2b367b..fed1472 100644 --- a/client/views/index.jade +++ b/client/views/index.jade @@ -1,29 +1,33 @@ extends layouts/default block body - section#section-title - h1 Cena - a.btn-add(href='#') Add - | - a.btn-start(href='#') Start - section#section-form - script#tmpl-card(type='text/x-underscore') - - - - - - - - - Delete - - - table#form-table - tbody - tr.table-header - th.cln-no Card Number - th.cln-psw Password - th.cln-ctrl + .wrapper + h1#title Cena + ul#main-form + li.control-item.button.add + span Add a new line + icon.icon-add + li.card-list-item + ul#card-list + li.card-item + .input + input(placeholder='Number') + input(type='password', placeholder='Password') + .control + icon.button.icon-remove + li.card-item + .input + input(placeholder='Number') + input(type='password', placeholder='Password') + .control.message + .shown + icon.fail.icon-cross + .hidden + span.message.fail Wrong Password + icon.button.icon-remove + li.control-item.button.start + span Start + icon.icon-tick + block scripts script(src='scripts/main.js') \ No newline at end of file diff --git a/client/views/layouts/default.jade b/client/views/layouts/default.jade index fe263b1..5e84bfb 100644 --- a/client/views/layouts/default.jade +++ b/client/views/layouts/default.jade @@ -5,6 +5,7 @@ html title Cena meta(name='viewport', content='width=device-width, initial-scale=1.0') link(rel="icon", type="image/x-icon", href="favicon.ico") + link(rel='stylesheet', href='styles/cena-icon.css') link(rel='stylesheet', href='styles/main.css') body block body