From 9e05b41888a8193f300356ce8fe443f4a87c0fb5 Mon Sep 17 00:00:00 2001 From: Hamza Ali Date: Wed, 25 Sep 2019 16:03:29 +0700 Subject: [PATCH] code/static: Add frontend layer to the code example --- code/static/css/.style.css.swp | Bin 0 -> 20480 bytes code/static/css/style.css | 231 +++++++++++++++++++++++++++++++++ code/static/index.html | 41 +++++- code/static/js/.index.js.swp | Bin 0 -> 16384 bytes code/static/js/index.js | 173 ++++++++++++++++++++++++ 5 files changed, 438 insertions(+), 7 deletions(-) create mode 100644 code/static/css/.style.css.swp create mode 100644 code/static/css/style.css create mode 100644 code/static/js/.index.js.swp create mode 100644 code/static/js/index.js diff --git a/code/static/css/.style.css.swp b/code/static/css/.style.css.swp new file mode 100644 index 0000000000000000000000000000000000000000..d5704d19d6df647ac9a70d0f6e4f3e54fe879e6a GIT binary patch literal 20480 zcmeI&eUQ}T9l-J63wkP|GLBU%Mz6q$m%ZJ+7w;B9kAnkru&u> zcrvMZ8^>~1x1QVE=2v*zG;~{OqakBmruXW$tNR}vS9i_shHl4caNNP15#z7D6%#Fw zA`nI3KqJuS_Gqo6xTX`{C0%>^Y3i8c<{W4#(e_aUq6kD0h$0Y0Ac{Z~fhYn|1fmFh zh9lq>4_2<^_zw!|@cH0{|PVSC9KEqa1U1CYFvgaGMIzu z=)hDoVH|cJr6{lB8En9Mtiv7n0j@+I7vnqBX%62D66mx-$pM?WN``3M+=(Jh&mjPL-1A&`@!#V8a)`;shLqorfyQc07+i;1S%5pJNHKn2qys z9@%ShKXu>I<2;Q`!cP9I1MHgj{VLQ0LtTAWEr&7PYSs9%D)mKpfRwmlcpq!GKcC#t9B|gq8)J_|=X6tFQ&q;|= zSr}AJ>#|(e%BR#u3M?=7Ys}}oZf8s?q4&9#C`#|{&Dd67Ax#W&mYq^-8r#`r7lj}s z!6(ro#R;v+89i(x{*n>#RyWHMWsyG1M)-vKc;xOyz*!+v9UR7(G z(#?&{ZEAd6eQ-f|%}!j3LyM4oKxI*)5gtG(d24~T|03k286L^7SjCDq9jiU4F64Gd ze_TFHc}jvhi7I&QD(pb$l2{l9tB(6oZ6Kv)&2-u*u+TLITurV?sYWhm z79CSuG*#;3Ux>-1SnJowzxYKr>sUE6t=7tGwOqSKRJzBkYG+uRS zEu2!S)#n(tqsn{Nu=Xjt7+H+mckrETqrA#x#c9A!w{7Kevf{z6!k7*#J{k02;*pAJDxFk6aSyrp}Vu4s*?zz0%Z@GNeWLK`9ui8Yq=zJ+)@B0Wl+$#In_kOvd zXDxX%3fs206hyBXTpxb_7KXZ|yQQ^t$mJuS9TMRMG`t%hem@H9oRzx`yAbgpQx3YL zPEpflf6)97_>{};KpT3!RBZ>XNzo31Q|$!%lUugM#|^#nCYt>lf_z-^9}oNvq}gj+ z;iH0x(4LP9VP!=JQV#L(<~pL zv*PjbK_DhOCA~O-ySm8#o5v4VEQa1ushC;9zWY{Eutzyr7)H{eR- z(F-wFFc(9|2-^5ukFlu14s!jK=!S|T@eaBCU+^kk!E<;NtFa0zaWk&N0%S24%{T$O z$mh4?Ic&xzJcS2w8-9qT7(h2>U^=Fu6%(gv4e?9KQz4#TDVF2@R5yZGa2gc)YjKrbXPM-fX*5H>|g=Of&JY0kWc`Z^@ zRSp<%BML_h_*<+h4;rYAq8BT#Pq2Q-s6mgOHpoHzF8z}fDWBNO0|$F6y2=3!JK)ON zR2;1tWMV@O_JB*Qez3CS&%{WKNJYwb%4pOj8g;4iC>1`IM58V?BXD675RJNoV;$wJ zA*IT0asNXm`y9K8MqQ#&7ctxvjk?h1g!yL0*r5O8g3R+;qfwWk0~=~A8g)sj`x|vB zj|(sa!w2!;AN~xKQpNK(kF@bvvs3SV5YPGIlbYneNo*|p`vdyY(BTm8?;K-!;dn^Q z8yIo2R>@B(ME?Id5}RovzajsBB1m#RB5!{STOjiPwYU{GVhI-GD)hs|*CFNxByc>& z;5aDwC%OASumi7RGgjhz7(@yE$Y3TqF&$#Az*roC_sQ4a!1H((oADd`0?V)%m%~B< zVot*>%s?k5BaYKC3jZS4UxN(3fYJC5`TJk76zlC%kJTxGpN+7KvAo z>&sE($^=9bi2QLv#)d**J`r`z0(wR4CAg3UR$$XroJ?05`v&*zD!z~%!L^3hK cK@&60Qfe^YEc}r{PEcdgfX+-FZ*IhY0W)PU@c;k- literal 0 HcmV?d00001 diff --git a/code/static/css/style.css b/code/static/css/style.css new file mode 100644 index 0000000..27d6309 --- /dev/null +++ b/code/static/css/style.css @@ -0,0 +1,231 @@ +@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap'); + +body { + justify-content: center; + align-items: center; + background-color: #19180A; + width: 100vw; + height: 100vh; + padding: 0; + margin: 0; + font-family: 'Open Sans', sans-serif; + display: flex; +} + +#snackbar { + visibility: hidden; + min-width: 250px; + margin-left: -125px; + background-color: #4D5359; + color: #BBC4FF; + text-align: center; + border-radius: 4px; + padding: 16px; + position: fixed; + z-index: 2; + left: 50%; + bottom: 30px; + font-size: 15px; +} + +#snackbar.snackshow { + visibility: visible; + -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; + animation: fadein 0.5s, fadeout 0.5s 2.5s; +} + +.container { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin: 32px; + width: 90%; + height: 90%; +} + +.messages { + width: 82%; + height: 80%; + overflow-y: scroll; + border-radius: 4px; + background-color: #4D5359; +} + +.messages > div { + padding: 20px; +} + +.message hr { + border: none; + border-bottom: 1px solid transparent; + border-bottom-color: #6c6882; + margin: 14px 0; +} + +.message .new{ + border-bottom-color: #BA5C5C; +} + +.message .author { + line-height: 24px; + line-height: 24px; + color: #AAB3FF; + display: inline; + font-weight: bold; +} + +.message .timestamp { + line-height: 24px; + color: #888888; + display: inline; + font-size: 12px; +} + +.message .content { + color: #C9CEB1; +} + +.users { + width: 15%; + height: 80%; + border-radius: 4px; + background-color: #4D5359; + background: -moz-linear-gradient(left, #4d5359 0%, #324a59 100%); + background: -webkit-linear-gradient(left, #4d5359 0%,#324a59 100%); + background: linear-gradient(to bottom, #4d5359 0%,#324a59 100%); + font-weight: 200px; + text-align: center; + overflow-y: scroll; +} + +.users h3 { + color: #EAF0CE; + font-weight: 100px; +} + +.users p { + text-align: left; + color: #AAB3FF; + margin: 16px 6%; + padding: 3px 9%; + border-left: 4px solid #EAF0CE; + background-color: #EAF0CE22; + text-overflow: ellipsis; + overflow-x: hidden; + white-space: nowrap; +} + +.chat { + display: flex; + align-items: center; + width: 96%; + height: 8%; + padding: 9px; + border-radius: 8px; + background-color: #4d5359; +} + +.primary { + width: 100%; + background: -moz-linear-gradient(left, #4d5359 0%, #324a59 100%); + background: -webkit-linear-gradient(left, #4d5359 0%,#324a59 100%); + background: linear-gradient(to bottom, #4d5359 0%,#324a59 100%); + padding: 12px 32px 12px; +} + +input { + font-family: Helvetica; + font-weight: 300; + width: 100%; + line-height: 2.2rem; + font-size: 1.1rem; + background-color: transparent; + border: none; + outline: none; + color: #AAB3FF; + padding: 0; + margin: 0; +} + +input::placeholder{ + color: #999; +} + +button { + padding: 0; + background: none; + border: none; + outline: none; +} + +i { + font-size: 22px; + transition: color 0.25s; + color: #AAB3FF; +} + +i:hover { + color: #EAF0CE; +} + +.modal { + display: none; + position: fixed; + z-index: 1; + padding-top: 100px; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: #00000088; + animation-name: animatetop; + animation-duration: 0.6s; +} + +.modal-content { + color: #AAB3FF; + position: relative; + background-color: #324a59; + margin: auto; + padding: 18px; + padding-bottom: 36px; + border-radius: 4px; + width: 60%; + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); + -webkit-animation-name: animatetop; + -webkit-animation-duration: 0.6s; +} + +.modal-content h1 { + padding: 18px 0; +} + +@-webkit-keyframes animatetop { + from {top:-300px; opacity:0} + to {top:0; opacity:1} +} + +@keyframes animatetop { + from {top:-300px; opacity:0} + to {top:0; opacity:1} +} + +@-webkit-keyframes fadein { + from {bottom: 0; opacity: 0;} + to {bottom: 30px; opacity: 1;} +} + +@keyframes fadein { + from {bottom: 0; opacity: 0;} + to {bottom: 30px; opacity: 1;} +} + +@-webkit-keyframes fadeout { + from {bottom: 30px; opacity: 1;} + to {bottom: 0; opacity: 0;} +} + +@keyframes fadeout { + from {bottom: 30px; opacity: 1;} + to {bottom: 0; opacity: 0;} +} diff --git a/code/static/index.html b/code/static/index.html index 894abce..633703d 100644 --- a/code/static/index.html +++ b/code/static/index.html @@ -1,10 +1,37 @@ - - - Go Chat Application - - - - + + + Go Chat Application + + + +
Warning: This is some message.
+ + +
+
+
+
+
+
+

Online Users

+
+
+ + + +
+
+ + diff --git a/code/static/js/.index.js.swp b/code/static/js/.index.js.swp new file mode 100644 index 0000000000000000000000000000000000000000..277e908de940abfa1ffd1bed5abb8e0eb1fca8f3 GIT binary patch literal 16384 zcmeI2ZHygN8ONuH$OUN?5+ve>=@pZE+wI)#ma25A4SfObhAoxdZiP}{?%cC`r=2@< zote9L*L5*5k;F(UQNH-aSn3NQ)L4V~K?x=p4QhRfFQ5${i0{V4KrqBw8-LH4nftQc z-6A1IliB2#nK>`ddCvcwd1mI>TN|FLj+^hdHXHoC%`l$W_^CseeeyBm%Et|3%gC0k z!%}{MzmegQkxja>CO6o_M>inVfxMs=mP3iT%^f<2isv3w!!=0T6hOs4QDPhjNikr;9GDKj=?8j0bIBqHbVt0FyM5- zFrI{Oz)=X{!>}9H!CLs!rG{||ehA0l3vd^_6JA2&lkhdT9~R+GxCuo60u-at8m3?pCSU}vfwgcsoMTPT!av~!_$mAtPQkPABzzrC!b30%9=LD^ z?11fXBisO+pbYEa#fz~4C*T0=he>#uB+)P62{;N7Ou<$-OM>YP`~#kclkhn>3J-$( zEgFST#qH2H=SGdfoaK0S6z#Q}%G_@1a}`nUso0#Oq#ii!rt)LU36&kIJ)V-Ql27~c zs4?C4o!AY0GpW_ZLz$JbxzIn_edcuwb$fo1Lo@K>hMdeRJ6tsFnA1kk4i~pk=lbnf zE#8;A4;u@ zgMAimZhPLH6p5AY+@DY@|8bL=47R#gN;*hyzcz9T3?dyQ^eNA

-#F4RCBS2r=rN7QIyZ3 z)4+aVsnX4|bG}+n2dpvie(B=Cj^a{kMPxHKRKT1N?`UjPHt2ae4Lhz{v$ofkU0N(M zU?;L7<=0DnRpL9Mq}!VdceTE*zf9x~HR18FRi zm!sU7I3cH60kb5h7Q3@qDqEiNXX1v58pCBX2?Ml}%_^R{u)Q(gbvB{djtlHIZJw4gT2?Nhlg+e1PBn61MH;7rCMyS`!R9>X8Tqrc787paD z?KRbBeKmd@Ou4F~Z)JDdEII8kBq&YjahMzX(wNrb6)w<>q05u2NO<*YtFB;~23OZ@7!O^i(jt+ZigoN<d;#$qWYU%T27p)KXG^zL}&vu^}TiB>rb}Y3P6* zsg`2j2RfE%w@|OIRXXEzr3M0?1fKCErj!zQcw8px4e3Xm-mu)-62}Vtt&zdj5l^u! z`l7#|ZE2b4?BWV@SxAb!`i>oH=%S0%o!?^S3|2j`wVLyLRDFbKDqMRVhT^J17lyIxNyYC8^_uUuF#3aot; z;Jp{~{NX?=|j~v6PKCZfz@?JIrDy;)t@Hh?7yHQn^LNk=Zq9 ziW9YYo~H6@C9zk!n%oNw@t(b`3+R!QL_}B0l3**%D?L+0WQp41buvM%9aCK9v5>r0 z=>`&FWKz9-B3jx!R8yTKknCK|jBb#bk&EhuT34lYrLv2*vCN{@=1Jr0skwfujsI-Z zWGiIvZP{iYEf}(`vrAsiOrIC)?wU)*s^01bnYVJWs<*m9;_Y7A>KCN*y%qhWW%~ZK z+zrgz!;%|VOE5vmtoQm(he4C=rDolr9T97|^$q#{U*y~L*L=Im_kZ^P{d0Wd{|kN# zPr;+`S+L<=xCeH@HShx8`KRGG@Em*}o`DnaF!*pc+y-M%g%YfVi(w7CLO$SScnN+E z--GYMGw?J#4v)fD-~sTU2KT}i7=dfyQn&;ppYRlX8@>dRQ+NnI4G+RcU>5EM3$BJU z_W*@z=$@KlP>vg}>qbyacKk{Bn zN?qp<`dY7=N|rCEm2%;7v-H_vC#;gl|Bpr;%m(FI|Lp5})uqze9$7CILJn_S*1uj# zGHktU`#=g?D$69V`FPd|Ny+f6nBUNr