From 6ca6b5aa7d86f0ee21e15655ad16aec43327f73b Mon Sep 17 00:00:00 2001
From: bvanroll <beppe.vanrolleghem@gmail.com>
Date: Sun, 29 Jan 2023 14:30:01 +0100
Subject: [PATCH] testing

---
 .idea/modules.xml          |   8 +++++
 .idea/vcs.xml              |   6 ++++
 package-lock.json          |  24 +++++++++++++
 package.json               |   8 +++++
 public/avatars/example.png | Bin 0 -> 8229 bytes
 public/css/main.css        |  54 +++++++++++++++++++++++++++++
 public/index.html          |  48 ++++----------------------
 ts/main.js                 |  69 +++++++++++++++++++++++++++++++++++++
 ts/main.ts                 |  47 +++++++++++++++++++++++++
 tsconfig.json              |  16 +++++++++
 10 files changed, 238 insertions(+), 42 deletions(-)
 create mode 100644 .idea/modules.xml
 create mode 100644 .idea/vcs.xml
 create mode 100644 package-lock.json
 create mode 100644 package.json
 create mode 100644 public/avatars/example.png
 create mode 100644 public/css/main.css
 create mode 100644 ts/main.js
 create mode 100644 ts/main.ts
 create mode 100644 tsconfig.json

diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..ed1aa97
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/little_people_firebase.iml" filepath="$PROJECT_DIR$/.idea/little_people_firebase.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..35eb1dd
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..aebfc7d
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,24 @@
+{
+  "name": "little_people_firebase",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "typescript": "^4.9.4"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "4.9.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
+      "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..5e26d6b
--- /dev/null
+++ b/package.json
@@ -0,0 +1,8 @@
+{
+  "dependencies": {
+    "typescript": "^4.9.4"
+  },
+  "scripts": {
+    "build": "tsc --build"
+  }
+}
diff --git a/public/avatars/example.png b/public/avatars/example.png
new file mode 100644
index 0000000000000000000000000000000000000000..2b8318559062626e0f4ffe02a52004d0f32d421c
GIT binary patch
literal 8229
zcmXY0dpuMB|F00;s3gh#Udd%{Ywq_;m?W26a~;WT!y0qHg^ZEQX6{Mkl2XjIlD5?*
zLc$Q%@F{%SNR#*-pYQLFoxNYr_w)I>o%cEK_v3N0u0btN96f*Zz<~oNtgXzhA2@K3
z4g6SqTmVAOouC7MB2nh9QI6q(QAi(nzyV|baNhta>rfw9!1Vwhe^ewTKo3wPU9-Jm
zt`V9t{H)M80dHkxWsz2M^?r-m?Sv8Xh*?s(Rz$i{JkBt#`1$jvik^`fnHiP=2&;^`
zt2s>uu|-$2pIkv?e|$V-kx{3ID%@p$w9KrxOn+#eR;wTTpgJeU$;rtyxk4u<&pNw_
z@p%yvm1}dqxe3-784(_pnWi0i&)nJ5+}!-CchK&?i;$ZE3xjp$QQ0bP!GGyJPa8|X
z4sH$(4nN=5>LT-PZEX$WiVMq1LklW82q~7SRc6*UBfYimS!GpqH5Q@qwyF5PpB~$1
zR+`vdx6N&JaQEKZ+p|c(KXk2ebh&AD@39dw&m@Upoz-BTQe~c6ZJbzU6qRF^Qe~Q4
zZkAeYb+6tCU7~jvs}r4TfGV`gYSg`pHAy6xB$ZobHCSgi>O^CV6L8k|9-AhWL!$0?
zr4Uz`D;V@0Hk-}tt+?jof(Y{T^78&W-s0ixaLvw!v%z8i!`|KDz`R{{fB!U&Nb`tI
zxDtiA4Gp$REVGDvP~e134oh;p>d1e2&g;Md30-S5;~RIUe$0IL6C}kP_!m@jx=sIV
z^rF#gullYR_a2@T@$;Uzpnf6y_MpdORNb}f@bFRh$y<KM4<h1betEb0bE-)#F%q!A
zA?y;`n#JS%=K};07>F$XtMTS{8TmJ<@b~n+-<kc#at;5kELA4%E=umzY3vRQ?Qt>_
zL*LD94StJ3N1w6Wi){w0cp2vASpHnrOwh@$U;Uz&#q9qWLwa8On_Xv9lEC@q1MAVr
zBCU1~3-x1S-m%xteb1s$C@X=sP<8u+SuzM82Y=2Or509#;b>+BT@#{%un!}Ml@S%e
z_82O?&|QiYuto{ZuT|e-IFmuRIJhpurBu-{oS}-_zXnnDiCXZ>fK&o<8jxbeGKq>E
z)|i@bfKLIH#=*N8d;li^z6Ef!i3osGPJaP#?AN}~3w5QCA!`)Rd|j<A29)dxWCLdK
z)AWh5EaCrhf&n5Cq7uS>4MWEg6_HkJ@92fya!B7bN_j!I+7=^>A`ZkLF@6D}5cqe1
z4&n4`?3boo76<2M#L)C1hv83{6=FO@JA^$Zb!Y28$8i91jHm@58T4YJBFQw2LNAn+
z>F`^lfUxeMEyiPVDB#$Gah9qNQHQeux+pOcpkwIm0NpYSNM2TM507H8EyBj=g|%|v
z;5ABQfvDyd!-_%!`qadD2T0xEj(}8^C=EzU>GuJtZP;6Yt^oD{=!K#{31rG%YPlq9
zz*oL}NUOHkFw5<`;pj?K+g%L#H4Rh{uHA<ChPEBU{~okiN)nqA6X*EU$u{%U5NssH
z_`#h1Hfe>uw$qg}4*w3$%V%nl%o0jlzP+efF(5Fin0Lu9Ufa(IWaf!|5<A903Z46R
z@w1Ajm^$1DA;&O$^a1ttu~7Da89xl@49R5HYRt_%!HWEv>X2V{Iy`Tc*VKeR0F#U!
zeRx-QGEw|6TncfVQ3RhwpW$CA94M8QGHm*`YSv;^zJt7Tg*=Li8@Zuq$M3UNL3b;t
zY;;uEQ`P2XI9sqJHch)2+srk}F_f^wm4{bbLe~iB=fz0DZ$};Ao`?y?V73y=IXTg&
zz+;qt5d~Tu?iLTuX2df2DLLtI31h+|9cj2S0>+qgx{Z=^XvvqI03pqHJ-Y~&XLxQi
z&NExcN{`>VZ~lcS!=n+Fj6pXE&oPO785eD&>8__v9_YRO1?&@iw=|G1`|e0Xej<er
z>%t1E&4Oll(C9}v$aKAh3wc;+7j>km*N0ln)Hxxz5JHiWXbznvJadqCQA3&}xDM6k
zX`X_k5cU!x_CfhJWq;bxukxX(9-rxj0!?djWO>>Q^#cNR>1Wy@B7rE%(iCB#F^7l`
zh~Duzxg5|AL!B8$-gA58@5S_6rpQypLn}VB9xiB04nS4H*6!(*E1o6fNh=C#Bh3=5
za(i&gJCzZIIr#3_lb0-q_RX!w6dqc+{vV6Ho}y*N<tvmyYPtTrn{1F5Q*qgfk`7p;
zilL<}h1g@_O2m7_ZWrPAa<q^gK5=DY60uwOLC_<VL4QQruDmnrE&|Cg8{O&bMC_ip
z&T>U$wn{s*ZlrG2)XL;(AUV$>bDKCO0y-+JbBGd#`7;K|lYUW0ofUp=N|xtn6wN+c
zcj>q^#|Tl+C<}PQ?64mx{7vS?b?YlVGAZ3@>I9FBU<K5WXuWHgXPldn>*kh55}|9`
zW*0s&>dWI)bq=$v5KEa!Bij8m-I3NRnLKr5!k9PyB?^Ze6tZQUVy+2nG=0mg@2sqn
zl@<Ua?fa|=J>8uhBW?Mac-bp?o&i_p=FIO5wN^<BXpsJ`K0%pB8@iuwaDF1+&K0ZS
zbxT?RWciavzG0FR(-156AGn*6)-xwYLVkKH?6n0eegbRD?da?ncF5ntElSPZ5G18Z
z_zopzru0mRQFztN-8)w$BF&ZqBr-6`JtVOYu&_aG*V)_~riVV14)Ip$%CBo%vO(Y5
zeGB|dy!p)c-sz)CAQkH+IeMxNjTVDsgU<(hMZB*lu4|G^Rn(lOB^xYAWqEgL9N`v<
zF7*_aR3;$T>RfUv3a%xQzE-+J6%*uq!%Lt-uFa7q--_3E%Nc4}nkU>W>w!E@d^`E}
z#fNSimg+eR))mA-IQORh6hYCmK(b6$w!dkrZR_E-?gKjy#jazlmk@2%Yv#1mNJQB`
zsnooY@_b2Lt*m5FpL-EsNo{N{sk&P_9JeSd>EE~a=#tRd`QPe!#z?bSO-rj?p;xyO
zoWH_`?LK2h`eRIYc?JONT7cor;%STEA<hJp%v-7}w|BJZnXZ%fNz)EH;HDPnO`#t(
zo>LiHq`5DDrpVID3oP;d?k&#a<69uR&(Pu3LQ7n?JRnN`zQUZX)-W{bu#xZqDu%z6
z&0lZqa(M5nv6R?mClR)W-+>RA;U!CcpC+r*cGsv>TWXMlp!$-xn}UEA5-Q=d+j3M;
zb{em>>$l=xQojM6>k*tej4CC@vG~~6g)Uo+J^wpH6@4xLSG~l%!$iUtlcYySClZf}
ze2`C%O6<^=`5B>AV%A|g8;(idaf5~%+WAJz6_dASt}nm)`?3!uI&&IT2|3D&U}GC`
z=Prhl`bWCDJ+m)sOm8!lqud$2%q!&9bp5&Aw%h8n_a6j4>-MqkFDt(|s29m`h?idb
zAqNRz=rgUzrZgKTrJsQhg=kr>4V(6D-~OIDz=lRWXUs5NfyucWKi?fs;)rzluv8G5
z3?HWClhQ@;B+ikpU=|di2LSS8OnE-Gc2^{eA7KXA;f))oJwNxPhgJNyQeM=wMY}wa
z?P`bEyGiXY6bawHT>8$5`zXPgE1WEd3hN~MG@Sj9<vB!!CN$v==Dyxrv`9DV2zlqs
z%sJGwm?)~BqY}d!UTE=8xF3euAp={>3)9;JsJlxofeC40`8@%cyqzg6_yB4dno|R~
zl|zk+$#S%OpR?~B^c*L!RZkQozP?uAEvK!U_a(>yyl%#;2)jUOEex5*AH1EA!EZkV
z%&Kzr_AR{38U+~|gN^oqkJym;#&J(qptd9MjDnsCbXp2W`zh+!3?IbQdNu@_tmj{5
zK1xUo&LC9Ft%LTg-t;_VANPM-?Q206xyt&^6B`;w_RkeHnULELSKrXwb6#D*d_o?u
z;;7cP<J*eM0b$&pW&g<~tAo836^1t{fHcQEJmFWqnC5;QzdqXmw95+hAS8-!KMhh(
zY#&W`*myrgj&Lt(B17i_WWYKBJG;>{hfe0I<-%$Z7<sq3X&p42WVPwOh1B`DTjguO
z)h{=i#cu%=*ZNXIZl><V@rlq1Wn~v(pOM#O5oZ?0E=L5;>|R~kqSh*5HPRT!l5S)p
z8CPkr@N-hF>pWz@ayO_47FU4hOgid=i4IZb@Ql2j%vtBsY*fRZaf_(Jh!aIbhh@2?
zvo^`ny<|U79`-24Q~Afe+1wV}p<%3H*JPZe<ptc9t$HUYDjJ@F*>RXN;gx64k~$5_
zOeUmY%jET_xpr_nHLf+fsLXgm8uo?UoxzT&5ma9f0SgmPMJdBGa(nz9#S|>xpq7|o
zq$TEou8~EwS(YL3?!q^yPkc0vhaK|FBlyU!gC(W?Bz|pQ2B!=~?Nino+`0p=gH$Kg
zmk7c68h03mPMJyu?v{D-K$u>lLaZKSz+#QIIgD#0nzDQ}S|gq;+m6%aIriYp4+KQn
zzHyObA2RD9Qr>{?mQVbLRx|=|{aE#jrsjR`R;x9ffOCTV`iUYAUq^<@r3(Kq<jNNQ
zB2G;(dvp-#!}3CG0n^8eIF~xoRG_ndn53N*fdp%dgPtip(_&nlQCc;=%B52%N(6Y|
z#294*nm65<&N3HGXM-_mXhiAxty7pI`ja7;bTk_iK2NPujH8X@hlg#S9pa09HX(M3
zqjqAMP-|@e3-2c*S#vNR``@^BfBg3_DW&3v7Rh{fV`Z2+tR!}1Um?mFzSG<siQ(G!
zib2P?X8++PCGYbr4Rm$o2K6Zp`$0ejANehp`pA&O8~*(e6V~MX7xzC@P?h4J{iz{-
zQ(<Hwf_s^A4Uxupj{M6IJFG8q8-qp1#L(&?+_CCoVv3xTwi61SaU1?=kgM?RtTi<n
zupOUbT2Ux@%ivDL#>0CM8P+5$XZN6p{=RXE1vAX|y8k3%X<3HZNv_ndrN3*2V}#4A
z<r6JByILbL=gQ~h_t^4{<MG5dpjwT$jFJS`N5Q)|1a<j1h*RgimT%Vo8ge@-1GiI>
zd1mAkHnUb^j3FR7Tdn;_wN^&J9M(yZG}x(d-ZHp8FQ%(w3Z1>*z36{*X90#$HKDc@
z8p=7&D~Z82aE?-mzq3t}y%!0Gb!3fqv)}0axTKgeWR>5)J=^;BRkg-xMyuC+Vwx`w
zA+vn{Fh^-e@t!jL(*K5eH2T*Y!y+eGF0I2KKNk>=>d2bxp8InrG#3Fd_&9z)p1(K(
zJzRcDI&tS5DzY^~efj=T2y3D59YiF`B3%p>S^1T4U#He&_xBq+?<t>Q5fRq0oW6Fh
z-c_TFoj0BUl!BG+Pa<|ITH{860g@Jvb<|Ka!E|=cRRu!Rci!+ci8g*9ltRSe?St{y
zQiwF`m~g(q0r%=KOzF;{A=$T|uS6oK46E)=(YG{*!aber$m~AC!%z$X9W{=O7-oK<
zSX!3E^YVsZD$!@=vOdZZo<R<>M!Ne_Q#I?240N(XyJ89jwd;)yvR5N<N8T{a$d;B9
zJ7y=ygyWEBD^r&gL!g=H4UV0mL#kT6*{+yljVip6`H)=ccXi{a6T+8q?{v98zJuC;
zHQY;>tS44LAgra2>m1Dqbww+T!idsCnl;u>WF+emrwsyPEg{kP?|4U9k`GjimPe&v
z7u8x%YS&xtqN%OzAvi}l%UjS$)77^GImjXQ5h$H-o*2h2BXj~@K}!Nqv_cp(kKPNZ
z4~6E_%f18rE#`Je>lpABcnMJ2;$}TQ5+sP=2~9;S;DtcFSP+L$Miek+#l{HSoG;?x
z{4i)Ly^ISlC|$Y1yv4jh?uC>>MBw540YI5kWdo&xGL?PbY0}h-SbO_8!~ujGqi}cR
zLOf7t3(Yd)6_5{jLR-<&V3nptTfxR5><}r8{h%_Ojc4EqHAQQKUM6jv77PRyN8o|L
zZwY6J;7m0|^WDGVB$#o_jNK=2y;*{yQ>%A$NWu#*`x*H#=)Ik<p}m;bJ$+8@Rd=Ak
zVZC!geeZKGD!v9?)&db{rMk)dJfDM7z)Io%xqk+wgSGPi?n?b0E_funVTccF7_5M*
z@tle*wQp~!w-_cIM|IJ=2D8pcuz%JbyX5#}{r*wTIwC9P&OFFo-1}2#HuE<{;5KOs
z>_GDCi-y~^yFn~c_2S`3!SHEjbO*C?N;ops=^M(IxlFPDz8yThcGrRF+)E<dh=*~L
z1>R>RAnFJIPA}$=V?554Zx8)jSTC4$lD(~rWW;TrMCddOJuNh($iJZ(67AU%h)a&q
z8HAqeP_xo*(UI_RS!$N;xX5i5Z@QVxrya26c>H>Y72^D6xsQTj*@H~ngyAZ&`G*hl
zj2k4QRL>K7ToXCkjm+=RzPWuUF&-8~kz}0CI)@NmcG2D29ab{)o&$EltB_OSVUoQ$
zdT+$y8iCF8ly$<(*)_i2vK|Q(wgX!xD<=>#`-Zk!vy~64X+4clBAqPAqz>yWM5}IB
z6#i;Ps1~_4YNXw)5RFpGtHeE?u6(w-Ss<WI${9NOGQ5CUd=?fK|IeSC^%FhA=WiqY
z*{o!wI>>8X;Mj+!9SKha3L!7Ge!XUHnNV{D{)uxL*!_I@CL&5VIF+XOX0302TjKh}
zB2Dlv4ZB`Ky8J$BY)jwWvHkZ71di}$*nj$N1L{yeRJFTOJTBKd;Z5=g$}jUax`Xla
z^14VDNRb-ai9XYXb%<ZT&G0VCCJxsz^Cl_EQd*WqUe>L=t6%bnMGaPI+u<(F@|+c=
z6REVkFW5R=Q={FlQl5N6zVgzBH+5|`-2+Q}bo`vCV&%FB+ug61`^{-C-?_M2UI|?I
zE)yE(+y4hy9SP&7l&!=YF6Uig|G1SEn4Ia*zwJ)-K10UUCd0zW0+-S^rDRS=u14sq
z7<g*w=I6Xv%_@5AU0Q}b`mw1{VBxH~VS>%b<L&0~#XZb}XPn44-6^oM6z{X6Ai6KJ
zA$F#z>)u`Z?KlD_@?H0ZO)5X?xs%{LKlh`hQ%Y+Q|M)JD6#0Yjy2-G2l$@e}o$Y4O
zHD2KQgw4X`%8K0HYgyj$V|3*&nqbr2XRfF0!Y;BqqUZB}%x}FN^mCb(rz!KZsK+_3
zpypS~?Z?3pn@%A`fvPbv3gd4smQFWpQV(!k>rOt-OhPrP2vw#Pct)KQ_C&3E-E$=0
zEo8o8_^lWzIiJ2}=V6(Z=T0cJiEKLy{m?VmcZ(`k+S4g<4qW;814(MLH(Y4<RmUS*
znfWX|R#%P~SdfF`jV`*^^e+pd^6V(@Er}nc>b!E2N<oFZhqkW!%R_%xXZPA)O)ND!
zCfxNEQ`M(&jkWm-gKBI!>oQmY<GGp61p<ycPqD{vt)HuhTN`(+Zzg~6IC8B9IPTcU
zFei0RcHJ%}g+DaGi5kJk<Uy+7d*%$uZuMdz?DR|OyeQ=G=eB|TWBB?9G{Y0ID<`AO
z55E@^E1$<bJfb?#(DXjddCUEu#P?~#0f%M^2_S?r>*}p>50uefKBWhO`Sy=uG`mBa
zmWncE#y$zZ)(`c!wn#9Vdv9x}bsixaKN4hX7hpgx43}@h^B%LHZhro<KCLY*F>I*$
z0=!TIDgvnyxbW+xY7^7eO587LB=hKn*V7>I3myZ)ch$c0BA-OKIS0j1QZX9o9XDsg
z?~(opxIZ0$R6!W|LsGv!tWSf5X96i!rC@EQK@$H`K2!G<6K_9wz&XZ;ZFcx&d*##q
zOtB$p+QBEfql%eLKT>Se-*9b@W%z4KWg@O2I%ms+3%Qz!@A39VF25E_4*^{5&&O{d
zAN}q0(~0m^Q8(RFQw;BG;{g)}@To5%ZA*5HzmoNM3`!;Kr)E=6EWKjtRx!_iY!kjk
z+e)XczZPKDjC)31$(-^(7`9ldfC5DXRA^nFbU&pl&nJfC0z9xog}!PEdu9lto>x~}
zNx08w9C2YnE+E9=%bF!1dy$48hsNXSIEZbHMlbTyXK{QhzTwBuasBT@Vsaz6vnct9
zpb9O=$wimIx2m91w``*xZ89(3#q*xtLVR^x!<}d@{e*rtQ;On$=TR<ZK&zwjD)$eq
z-~^`b+>8$9$1dA0StX~qvyaH0@VHY0E5~!m>5NLL9uA{%X`Jw|740aBxXquxY`ggN
zBv){s9Ky7A%kjl1+DH_<_Qk_+1gAsH(k#*FhdoLTvAl|$7eZ@nUb#j4hT*+*1^f|T
zT0hwQj;DpTBu)E9mgF9y$rgJXf6{Br{UGO2wtfI_BXOu$+ow+zW)S9Ep?zg!9Ri+!
zMm<8WO~-RHtDnCZdzbOr>|+;rE?K=qzLlGgIuIDLzEnj88$1@j=sV?s?0R=YVB_*F
zHG#5byJYOgI!)N^M^uCq^Ap2d*3cp_N8b14;bLa)SlkQ_f02FQjmPen*+cy7rfSXb
zhXx0zWA||%zn6U|?C;4N=t&F@y&4BMSWX|jaVVXGc}aXTPY=|&!oz+#=@!^n?fP|T
z!Rwl5QBP02=~l4usK+<GUx&`J$-OUZFYV;AmvJ|*evN+IVMRs6GOt?x%j-&AoOPnV
z_ve1nOa7kaengJx<|*d5J#2A4mq>ncLNe{W4x>AZ3G{|q*Vp_k?4Nq8!einBSL(L%
z(^$5&Dh_`V@eB&|%1?zgl5zjt=Z1GO1ZzaO3Z?;V+>k`}ST^4{OpP$WkkMWf9<17%
zTOeFc&%Hh#_AG~6hAnP~ux6zmC?pO$L^?_h5O=;Q^YG>9I{rTId$5T3#b+&YSw`0E
zQZhxa-cQA5SN&ChO4NI+!>>HTPK5=`Np(6$!dP>9%~Be?kN~rXp@})^?$2}lSd~O&
zDGlLm`qYEnyA`honqBBPO(Nw}OJKzzwQ!)H&c#ir5Fw<(Ur<P4oxbaoH^`A*zft1#
z9P~ALwR8ehvYmi>{X6{T?f0!wQ>{^Z_3v@{ZBNwQ{wOIW=a7R-ZLo$BEOxQ8t)z6(
z$fZ^2FmjAmN2V3W$VXPk7iav6{gd`hR-Ot(unwzk|B!ub^?A_xlfm`YrfV11Yzxpo
z40HhE*;O7S_OH-%Je@xcrAPesN#*yh+nvb7*1y!WFT2?Rn>_LCyR5c$T4np8mmg)G
zrt-h&f0ozRsR5k*qCLz#qbki`>2ba6_f?%lM$yd4Ip<#U{JMF)OW?g#Sb6I$l{MRJ
z`lkq${<9_HGlqE~bcfLLkfG0|XNc*a`r2FDnSFJkvj=8%I^I-_f`nxglbRkL6W+>T
z4h%hMoCt`$GodCd3-+8U8uZ(`Y33D@giaiElQe9-qhb{ndn(NO@6fwDH94g)Dd_r3
z&##C^W)0(!@O%`NS9lB3t4MdzQaL_%Czp~hTG=3PD}<yi8qC#bx!{^XN8s$72&G5a
z-LnU0b?Rm|Y~#HKJqYxj3Vg#t#Ymh@q|j<a%MCh?o0v|LKQ4r9b3AmhIHqXwyr5!7
z8()c<BYlvn!EMuhH4?VK(Ec^%Og)2aOHIFit5spaE8A~@QF!*(STO*C*cX#bw^z&7
zmrF@l!?w2IDo1)WP1J}t+f{r>C@{pf6#eOa1s)n{ADoaD%-`2O{l&4|MLSQvvYoY2
zi(62+8z?sTsYR_y!-o~Dn@3(AbC_vW3%F1m!#P-fq|jYtX!G#KgCTW~8;h9U_74Kf
zwhz!#p9EX~C}el{a!rftDaq<rX*jTgZB#Wbi(FW9Php<OuJcSVg4HlaUwQ?qU89>D
z4y#)}YqwGDS9gHh3=n7UgqpCY-Q{e$H<E_9DT>X#uY9XIk5#TzRJ%^q@kS|F83eD-
znEhT*xl<u?b1LBf5uUUAh=KXD_7D8aw)ym_h_IT@V~JhW#{Wa^qo<gE9)BJ5{DQ{#
z2bYKs<IZu~X|;!6P0$AoM@*i#+W@lr=vaNJg5}onlKE{>q)eSB+z95&h_UBSNpQ2^
zaD6em+RaEBN+Z{=N~j+6pc~#Rvwy9>6SVm@3nj#U%@}pgD@jsWJ3aR<ED3;Lw0}6U
zY<mwq#R_(KI_UWZ&Hsb=EB*=ij^(T#20f($iHI!W5SVf5A74BHI(Kj96-zZqc}<-u
z^8ZL0{Z|D4&gsJYoHJOL;;6$>3ML7IyYqSZgT2*3(8ujIfcvzaZ(Y#{GWbRSRaDca
zdn{?lj9lru$5S=v`3{YFW6Xu;(h-zOTv@mb%N4C~^2+#rn?85_Dgp=Gzx;k%-uBb+
zHUoOKNWIcBeke(guoEC%RkXZVu=FQGJ5uoB)o!ZxvH$dn%TbXx#{)W{h}^xEU!L?<
z9(nc!7MCLP)}ZH5&%tX`<@8pd3l~^QLW=zdn>y<sQkOPtbbqO`p5A3Ctt7eC^gDTG
z=!Vd_u8R}K8jt5F_CJ%zx7oPgg~|vFE(uz2)#C_R_8Tun4?0D&FV1}GV=TugTj2#{
z3?l+0UY*&>Na2LU2CK}zZF7aY0P7@5x%STNF#2TJ-1y9UYn*^w|8+h-h3&=-X+h82
zKis{V!r=?9mx<5MLX}3i2J0qb7I*PeW_GuYU~LQ+`d_~C6}PLCdbLhd;<L>tANCa%
zS7yISZKwTX<$)JvotFnSg~55U$S-e#<zuUS`pm;?6h_~+U4fS<6P#=6Z_q@~*Ubdr
zkAWjEW9V(1f|$t40<Fr?3#&HJ@Zwv7qy@4!_rVdf#O9zrtjy%=EP>_An4MQ`#O*^r
zIvY8Ar|l3&*vSmlO9#izDzCX^guL53WrrA1zzpX1Tk-k}#@o<#5+6Sz1__dU$=*%-
ph)2LmwBKTX!#=pRcj)*5Ohfa}CZUUbz<2)x*5**N7L!{k{|Cj1gth<x

literal 0
HcmV?d00001

diff --git a/public/css/main.css b/public/css/main.css
new file mode 100644
index 0000000..9149d3c
--- /dev/null
+++ b/public/css/main.css
@@ -0,0 +1,54 @@
+body {
+    padding: 2em;
+}
+.header {
+    font-size: 4em;
+}
+.card {margin-bottom: 7em;
+    width: 80%;
+    overflow: hidden; /* will contain if #first is longer than #second */
+    border: 1px;
+    border-style: outset;
+    padding: .3em;
+}
+.pfp {width: 40%; max-width: 45%; float:left; height: 20em;margin: 2em;}
+.person {max-width: 45%;overflow: hidden; max-height: 29em;margin: 2em;}
+.bio {padding: .3em; margin: .5em}
+.name {
+    font-size: 2em;
+}
+.picture {
+    max-width: 80%;
+}
+.bio-item {
+    font-size: 1.3em;
+}
+.item-content {
+    font-size: 1em;
+}
+@media only screen and (max-width: 600px) {
+    .header {
+        text-align: center;
+    }
+    .card {
+        padding: 0em;
+        width: 90%;
+    }
+    .pfp {
+        width: 100%;
+        max-width: 100%;
+        margin: 0;
+        height: auto;
+        float: none;
+    }
+    .picture {
+        max-width: 100%;
+    }
+    .person {
+        max-width: 90%;
+        width: 90%;
+        margin: 0;
+        padding: 1em;
+        float: none;
+    }
+}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index bb0b59f..4b85afd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -17,56 +17,20 @@
     <script defer src="/__/firebase/init.js?useEmulator=true"></script>
     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
 
-    <style>
-        body {
-            padding: 2em;
-        }
-    </style>
+    <link rel="stylesheet" href="css/main.css">
   </head>
   <body>
-    <h1>Fake People</h1>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <h1 class="header">Fake People</h1>
     <div class="container" style="padding-top: 1em; padding-left: 3em" id="people">
 
     </div>
 
-    <script>
-        var statusItem = document.querySelector("p#status");
-            var peopleList = document.querySelector("#people");
-      document.addEventListener('DOMContentLoaded', function() {
-        try {
-          let app = firebase.app();
-          let features = [
-            'database',
-            'storage'
-          ].filter(feature => typeof app[feature] === 'function');
+    <script src="js/main.js">
 
 
-        } catch (e) {
-          console.error(e);
-        }
-          var database = firebase.database();
-          var rootRef = database.ref('/');
-          console.log(peopleList)
-          rootRef.once('value', function(snapshot){
-              snapshot.forEach(function(d) {
-                  var v = d.val();
-                  peopleList.innerHTML += `<div style="margin-bottom: 7em">
-                                                 <h3 class="card-header">${v.firstName} ${v.lastName}</h3>
-                                                 <h4>Gender:</h4>
-                                                 <p>${v.gender}</p>
-                                                 <h4>Age:</h4>
-                                                 <p>${v.age}</p>
-                                                 <h4>Current Country of Residence:</h4>
-                                                 <p>${v.country}</p>
-                                                 <h4>Job:</h4>
-                                                 <p>${v.job}</p>
-                                                 <h4>Bio:</h4>
-                                                 <p>${v.bio}</p>
-                                		         </div>`;
-                  console.log(d.val());
-              });
-          });
-      });
     </script>
   </body>
 </html>
diff --git a/ts/main.js b/ts/main.js
new file mode 100644
index 0000000..1b2738b
--- /dev/null
+++ b/ts/main.js
@@ -0,0 +1,69 @@
+var statusItem = document.querySelector("p#status");
+var peopleList = document.querySelector("#people");
+var pageSize = 100
+var pageNum = (1 *pageSize) -1;
+document.addEventListener('DOMContentLoaded', function() {
+    try {
+        let app = firebase.app();
+        let features = [
+            'database',
+            'storage'
+        ].filter(feature => typeof app[feature] === 'function');
+
+
+    } catch (e) {
+        console.error(e);
+    }
+    var database = firebase.database();
+    var rootRef = database.ref('/').orderByChild("lastName").startAt(pageNum).limitToFirst(pageSize);
+
+    //const people = []
+    //console.log(peopleList)
+    rootRef.once('value', function(snapshot){
+        console.log(snapshot)
+        snapshot.forEach(function(d) {
+            console.log(d)
+            var v = d.val();
+            console.log(v)
+            peopleList.innerHTML += `<div  class="card">
+                                           <div class="pfp">
+                                            <img class="picture" alt="not yet" src="avatars/example.png"></img>
+                                            </div>
+                                            <div class="person">
+                                                               <h3 class="name">${v.firstName} ${v.lastName}</h3>
+                                                               <h4 class="bio-item">Gender:</h4>
+                                                               <p class="item-content">${v.gender}</p>
+                                                               <h4 class="bio-item">Age:</h4>
+                                                               <p class="item-content">${v.age}</p>
+                                                               <h4 class="bio-item">Current Country of Residence:</h4>
+                                                               <p class="item-content">${v.country}</p>
+                                                               <h4 class="bio-item">Job:</h4>
+                                                               <p class="item-content">${v.job}</p>
+                                              </div>
+                                              <div class="bio">
+                                                               <h4 class="bio-item">Bio:</h4>
+                                                               <p class="item-content">${v.bio}</p>
+                                                                          </div>
+                                              		         </div>`;
+        })
+    });
+    //console.log(people)
+});
+//console.log(people)
+              //              snapshot.forEach(function(d) {
+              //                  var v = d.val();
+              //                  peopleList.innerHTML += `<div style="margin-bottom: 7em">
+              //                                                 <h3 class="card-header">${v.firstName} ${v.lastName}</h3>
+              //                                                 <h4>Gender:</h4>
+              //                                                 <p>${v.gender}</p>
+              //                                                 <h4>Age:</h4>
+              //                                                 <p>${v.age}</p>
+              //                                                 <h4>Current Country of Residence:</h4>
+              //                                                 <p>${v.country}</p>
+              //                                                 <h4>Job:</h4>
+              //                                                 <p>${v.job}</p>
+              //                                                 <h4>Bio:</h4>
+              //                                                 <p>${v.bio}</p>
+              //                                		         </div>`;
+              //                  console.log(d.val());
+              //              });
\ No newline at end of file
diff --git a/ts/main.ts b/ts/main.ts
new file mode 100644
index 0000000..d672e4f
--- /dev/null
+++ b/ts/main.ts
@@ -0,0 +1,47 @@
+
+let peopleListDiv: HTMLElement = document.querySelector("#people")!;
+
+var pageSize: number = 100;
+var pageNum: number = (1 * pageSize) - 1;
+
+document.addEventListener('DOMContentLoaded', function() {
+    try {
+        // @ts-ignore
+        let firebaseApp= firebase.app();
+    } catch (e) {
+        console.error(e);
+    }
+    // @ts-ignore
+    const firebaseDb = firebase.database();
+    var rootDatabaseReference = firebaseDb.ref('/').orderByChild("lastName").startAt(pageNum).limitToFirst(pageSize);
+    rootDatabaseReference.once('value', function(databaseSnapshot: any[]) {
+        console.debug(databaseSnapshot)
+
+        databaseSnapshot.forEach(function(snapshotEntry) {
+            console.debug(snapshotEntry)
+            var snapshotEntryValue = snapshotEntry.val();
+            console.debug(snapshotEntryValue)
+            peopleListDiv.innerHTML += `<div  class="card">
+                                           <div class="pfp">
+                                            <img class="picture" alt="not yet" src="avatars/example.png"></img>
+                                            </div>
+                                            <div class="person">
+                                                               <h3 class="name">${snapshotEntryValue.firstName} ${snapshotEntryValue.lastName}</h3>
+                                                               <h4 class="bio-item">Gender:</h4>
+                                                               <p class="item-content">${snapshotEntryValue.gender}</p>
+                                                               <h4 class="bio-item">Age:</h4>
+                                                               <p class="item-content">${snapshotEntryValue.age}</p>
+                                                               <h4 class="bio-item">Current Country of Residence:</h4>
+                                                               <p class="item-content">${snapshotEntryValue.country}</p>
+                                                               <h4 class="bio-item">Job:</h4>
+                                                               <p class="item-content">${snapshotEntryValue.job}</p>
+                                              </div>
+                                              <div class="bio">
+                                                               <h4 class="bio-item">Bio:</h4>
+                                                               <p class="item-content">${snapshotEntryValue.bio}</p>
+                                                                          </div>
+                                              		         </div>`;
+        })
+    })
+})
+
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..5b1b1f2
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "noImplicitReturns": true,
+    "noUnusedLocals": true,
+    "outDir": "public/js",
+    "sourceMap": true,
+    "strict": true,
+    "target": "esnext",
+    "watch": true
+  },
+  "compileOnSave": true,
+  "include": [
+    "ts"
+  ]
+}
\ No newline at end of file