From 6b3f13a34f85f01a185f8353a5407ebaa8d69aab Mon Sep 17 00:00:00 2001 From: MeowcaTheoRange Date: Thu, 8 Sep 2022 22:45:41 -0500 Subject: [PATCH] First commit! --- assets/chemistry.png | Bin 0 -> 830 bytes assets/clock.png | Bin 0 -> 1499 bytes assets/clock2.png | Bin 0 -> 1028 bytes assets/hourglass.png | Bin 0 -> 986 bytes assets/interro.png | Bin 0 -> 874 bytes assets/mark.png | Bin 0 -> 1107 bytes assets/none.png | Bin 0 -> 143 bytes assets/rainbow.png | Bin 0 -> 425 bytes assets/sport.png | Bin 0 -> 1246 bytes assets/sussy.png | Bin 0 -> 1180 bytes assets/trans.png | Bin 0 -> 423 bytes canvas.js | 89 +++++++++++++ favicon.ico | Bin 0 -> 1092 bytes index.html | 198 +++++++++++++++++++++++++++ styles/clock.css | 111 ++++++++++++++++ styles/dialog.css | 112 ++++++++++++++++ styles/root.css | 7 + styles/style.css | 310 +++++++++++++++++++++++++++++++++++++++++++ 18 files changed, 827 insertions(+) create mode 100644 assets/chemistry.png create mode 100644 assets/clock.png create mode 100644 assets/clock2.png create mode 100644 assets/hourglass.png create mode 100644 assets/interro.png create mode 100644 assets/mark.png create mode 100644 assets/none.png create mode 100644 assets/rainbow.png create mode 100644 assets/sport.png create mode 100644 assets/sussy.png create mode 100644 assets/trans.png create mode 100644 canvas.js create mode 100644 favicon.ico create mode 100644 index.html create mode 100644 styles/clock.css create mode 100644 styles/dialog.css create mode 100644 styles/root.css create mode 100644 styles/style.css diff --git a/assets/chemistry.png b/assets/chemistry.png new file mode 100644 index 0000000000000000000000000000000000000000..bcdd1d193b1e202c04a9c3a1c7cc22882fa7a4a0 GIT binary patch literal 830 zcmV-E1Ht@>P)4W9b^JeVDmYFn@0J3CDvi|R~+r_MPA{#=|8UO$Q000000000000000 z0000000000h;Fk!;J)vV{|4B$r}Z%{k6m3?0KOIE>mZ6kNyoAnvl4LtW)`G(EX|nJ z{E_@;Z9!(scD^1&0l<0)KylLoKs$~}6o71-s%+=$LEHhdOlp?%^!B&sm%dHz>^4u4 z_1FX!M*xZ=0L69f0W4hY7g*otFnu?WO<+DO0mTu3;s`)-1fVzqP#gg$E<^yhob%%v zfNk5JNAU@P50?PE7XJO;=bue&({BY|75Vk&JVi8~SqHdNEMDR9gxCba4*@7{S^#MO zG0_2vBLKy@JrOh;pECZeL;y7R6ZU<7L1equlPG- z%^0UOI>0R+Eqd0Nbb#cvK_LJO(1d^`p#5&TMzq}b&0NIy90-81vmN~Lvq(W807fL2 zZjpjO02H*>>sCR~oCll0)>i<_n>C)dg6RN4ql)FVED!*J8L!k&V~h+1OTYp&0U-dz z5r7us!3-}1;Gf7L7)G?54kkvH$=807*qo IM6N<$f;X&QIRF3v literal 0 HcmV?d00001 diff --git a/assets/clock.png b/assets/clock.png new file mode 100644 index 0000000000000000000000000000000000000000..8ee2788c7567390cc5ed1e410e0c23cbd9e3523c GIT binary patch literal 1499 zcmV<11tj{3P)aDxWwxIi7J z)XY+1Mg+JEqZq{q1_C;t;Rwe#qMIxvrzXIJ5lmtNT`>o?P{TeQrFAaf}O`qmCwS=nCK-6i`GT2GEZY6g}g& z@mHMn5Q6|0@f?pLI-KG?KG3=6DFgTlk1-U{5o*H;X7a>mxBETgqJJjF9RvO=i zi4&}aN{jz9b_$4h_<_}*N)HLO!BL_t5e z8%vll{y4#(z8%R=U=g!M^A=UZlnVuyF>f?)(`NLzg6FXlhWd;*S*s6F6>q?*d5*`U z$3+t05|(r$R%t(;a$%r-tQr(59O-jK&%mOw$*m=Gx5Q z-u_3>KDJcjI7hgSPPdG^4Cb|P+vlG@Q|p(|Q2k=l_K`IxTl{_Yu=QT~1%>*0!| zz&h%prG#l$X9oc;psX6#vfB5fK`mn?l-Z%FYX+uOu(+4SsT&45!JcU9bvPV00VehS zTgKwLPi#TXcA3pX*Pel4W&hjRrlWkICbmUWABL@-HUT+Z*VxHGt9aOf+;=9eZUzDF zQrp;Wd*43*P!qeNX~J5_)(niQNJ%cK_CQMQ#;ERO5f~A_PvZoO*@4b+Dw+}!c%P9* z@gXHk&0rAVA_hg%QFa=|gp@qUDk-C9Kqfqz_#y@b062%-JXAVH6OhsAF=-#YO(2F$ zzpL0;6OiHimwW$~bd_B26Of)^dm*I<5Rgt>PB%geD*lv9_PVkX)GiU-{&hf#|*~)!}z-td}A%HRb#NTj|CuKmuR}u!m~dinox-@lpK9^Bi8~l+x9)>L(EI zjeQ2Xp||)AGLuRuV}%__5(OzefPnNqM(lJ(7^qIK4P)v-g_l{z9STe;gi)TECLqJO zV)8k-g~OPJ@dH260m>Z=s6{Nb(*&rAGtp#3qVeD~rWvg8bi@ox$!9t{Vx7b?h}Al=#<}tWx&8s@_%Y^o}c_d8d}u z6r1_^w4g(MrGtmn0={%5m>mS@M$G|GiQ$B$0C%IJ8mq256Yh|5SFM9Sqi%m6SW-S{ z1Mgg&odoFGu+0h9wabjbW#it;hO0^(8PwB(ap26eS?I|MJZWqe2T_+BqO%eks#XY8 zq6+`%z+;B>x6EDY6Cw#v!>G*@p54zZ@FboY_m|e9FT;BBLR2&AlZ2<)uLUmSsiFS1 z?;`B~|H@hJFZ}_zzjg`a{^Bc;`>V%5?k|4>xxapYi(G#Iaf_UPf^v&oe*|=koPUOO zi(G#Q_Yt}N6!Aag_+!w!X#eN99dyt^2OT_Y`~#&l?mL~+Q(gc7002ovPDHLkV1oOd Bx1s<5 literal 0 HcmV?d00001 diff --git a/assets/clock2.png b/assets/clock2.png new file mode 100644 index 0000000000000000000000000000000000000000..15b3a57e3b29f64efe8358783e6c5d4cc7d5f4f2 GIT binary patch literal 1028 zcmV+f1pE7mP) zZIatC3`5~g54K0o&AdNaO+DM#@dqh_B;ElMNqB}FCF1}>2qA-+ux4G?FN@b%mgQyfI_#7Xz$)}TD$9^s0Po=6QB8()0z`!Vjw&Lg5r8H5cVw1< zUI6Ccw`7%oR)8$QZ^P^`)3h>LIB3aw-{3f3BmB4 zK6VL01<1CzcgM>tL6`v9!ryXd?5q-m2=F9)mW8Y$!Bhb%1i$6#d>H32O@NB~=itiR z*yb}ufGTx)L{w0 zvV1XxpAXXpU@-pY7@{R(Sd+u|w0a?iiSCU-66|BT1)L$`Yuo5w8AS_tgoyxW7nt=s z`x%^_`|P<)ZvgR`nG!q}Ao}Xh1mhY^X#mEFN5QrgJQ5(o-U~>;BitK6i~m1NEufpg z=G+z_OZ~IL(gLmxp!(-WTRpSPL~kLM$&r2|z~r-vsIga1K^2pavjh=DC0bXpRIRW!6?I z0h%KLn)5q)08jBgn0oj6ET42N#-Rq-VO`g+J-I5KhDv}poC&y!1nIYcPeeX3JOgTg zzjO>AXwU#hbPat=O98t47r+@>3Bdl}1QE0lz_RKqg%30kKv(@S55wB%9)KM0rhOy;!^4iV z!m=i60Agm`XFV1`EpQ#CwV2ufOcNJ>FcCl>3C|OK@bi=D_W+$+fN}2S{yv@+*0nKh zfNr5yz_bAdZ2Md^tXDq}d=9|4CtAZCKH$^zC0HD4Ecjw12w4P)3*_3*5^!80i66t@4Q-HgaJsG~(*lk@<}e)D_qSpoQZo{fTS$OJ)J!)-aw`0HpP{0_X0Rj1Ga% z+%Mb}6<&kg1Zc%paF1;OoICr93f(Um2cQL0pr3UBvb&>KmF|~}4}p&=UC>HvmCPpq z<|{D)q#B)7VU5q20E1L4zEmgxS1(+~9YN*0kTL;i5m}JxZ)2AVfZGMEUVN$0A@GsI ze!D{PrD7AnMddyJS;+|?i$P}CxLTdY$kwf@umA~bAD|W6TtZbjpR59(gUzd@lS3cNDaVl#XmWPpu~3tugE0? zDFN8M_$P-Dgx>{Fd@nY)fyfcM1txfb17p!Lr{JO7XAD z2*K0`_(qvY=fQv6yt18i<+0O>LjsWfUoGf2YyuF1n$kZR^o%=-@6Bp3y8yhh zdoZ>SK#x^IGjn@gIsjL=hlH~g000000000000000006k+3m3EIpN^=vSpWb407*qo IM6N<$g6itO761SM literal 0 HcmV?d00001 diff --git a/assets/interro.png b/assets/interro.png new file mode 100644 index 0000000000000000000000000000000000000000..e0fb720a4574a21b091019e9c3b0a95e31bdf9b3 GIT binary patch literal 874 zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H1|$#LC7xzrU^eu0aSW-L^Y-rTvc(2Gt%=LC z<<|7u7y zJ+Sjff3E=3_A^W$R{iMb6=a%jSN5Lan-aq#js^=Rg+7K3Wrj!7SRZUZ?efNvUBI2; zh#*5@8e_sLb2Tf30AfKl{0|)XLWkf^b$r5)#JBVAW;J(xnJh7Rqhf@*{g5dryI&(bC+w|z3Gw1 zr>QZ_lMC8qwkF8Iy zyY1OK#mJYz>*oInuln)~s%l=cHR>?rPS#_%7wPxRKyb^2Rp0)_Ub!cKB;($_7xn>< za*yN-HiR@ExM|d<|AJxep3>%YT}M@h<~?i+%~)6tI6M(BV3T;V^~cs3>=6%Y)T+36 z87(TqWmd0d@NZ1u`LN`9IZL?yzZIdoV~;V!SJ_qgul*D0{o)7Lj5E8OBmCV28_t%M z3j(Fe#1~Dy*>L62{1ic5mZckX?#zke;5eYah-HyE3(JDW=LP}|tu|~6%^70Y{64Kx zxOd2zL2R~Q&qPOs;De5Pw2aQPT9~|MyU=6WS<=8avrc;=L&>eb60=12F|oPm{E(DY wXqf2;Os+FHOOmd0uj6P?o)=fh4h>(A$MTkeg*KVF%AY|Zp00i_>zopr00OXRbpQYW literal 0 HcmV?d00001 diff --git a/assets/mark.png b/assets/mark.png new file mode 100644 index 0000000000000000000000000000000000000000..5e5fd5581a57606d2616c247dade0dcaf6e405dc GIT binary patch literal 1107 zcmV-Z1g!gsP) zTXvi<5Ja1tEX+&y&d3)D!NBOzkLp(4-^AGJx+4jRK_Y|@LI@#*5JCtcWC^zDKfscG z-@ml3wQbwC*0qo*BY`y2vUc&KjIxm=eGu{LI0h z$s)n909xT!3H*)>5_Ai&!s?hN=n`}Zpb`EGp7g>j#5FzyNoj z(yZTV>JlKU<(j+&?YUj9B^-MIKs-Na6ku^E04OcJfW|OD0XlgLCgU850t|2$bjI*S zIv0YnHZn8Ti*xJ&76*1Eu*yoC2m8K%jn)UU2dK2tHjB0RZ~|Dbv{hxaHgE!vpM*RW zOxB=F0CvIHjN}8?15{gS)55ClZ~}9|C5sP*{unR$zxeL*2_wP#g5WtDx z98dN8R9CCIL(T!JG8(ewlfo3B2x@x)QDYH_fjxi|sBcm=zYE~DZaWdRx$Ob8hJmMT z-PMK=xofbzEV>7W1fA7-9QuXLD1)Y%BuyR)V}z_xAQ7KIz#O`H84nxOP(YVQjE z)S#?mqy;_UTlWATZv(YV-L~x;#rjClYM{0b(0c2$vIvOnR$mC}88Q$HVgYhn%}xx7 zKCL?v&9JTK0H$XK&Hiy&gs}W{LkS=fca8v>3?5y&$BR3M&J9F4Ou|zN)WxR|0YrF~ zkO$BLi10KqOT6CO9CBbpwe8=`Os@mXSV$4#nLa-L0A+i$0-mpoR}(;l2TN<=d2WNM z03rq_S}Z1l_kj`W0vxb6=qKViLNfslI5%h~;^Z)M0S+j_JE@M18$okVfVYl%xb*;6 z*dzQS^03Y@0S;CdA^Hm>;Q}12c>5R~z6g*2XDWT4;0c8AML-1*sk_&Y@+`&Q>swxY z7L?h(MhK|SPe2PGf+K-9UcC~$00%3H;5j6v5#UT^8N4T|DFqOzDM7?tN?HN#$Sg(F zEovzNu4EA+a($w-0B@kk5xqFItN@=_YvLa ezW~Uj1U$%R=x1QGlT6+XGR4!?&t;ucLK6UD$`q*p literal 0 HcmV?d00001 diff --git a/assets/rainbow.png b/assets/rainbow.png new file mode 100644 index 0000000000000000000000000000000000000000..c1342bab246209e9415a39861f78a6df62ae74d3 GIT binary patch literal 425 zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H1|$#LC7xzrU@Y)-aSW-L^Y)Ts7n7ri%fT&I zi>nLLGuA73tdC<++4?hJc6oK~^LMxV-d_5C`?mZ)%l@}}Uzh*0-S++SCE5SqZMUB; z?=fLK!l~fLP{`CF>@bJn5sQF&gT<&2_K>jK(qR7AHcs{&FbWtvUHx3vIVCg!0IKtX A%m4rY literal 0 HcmV?d00001 diff --git a/assets/sport.png b/assets/sport.png new file mode 100644 index 0000000000000000000000000000000000000000..634be917656b4fa8d6b99e9bca498a972f62c4ae GIT binary patch literal 1246 zcmV<41R?v0P) zS+cA+3`AWWy|BCVw=>>PJDN*S;6X!5%JW-=ZJcR&z?jwuA%qY@2qA@5iqXrN96!j$3fl!Bh>tAnDB&W2gz(nFAxD8w5nxw*slnYf&5{414hTaSKw=dSp#>tE z0NwzIt^O{L(f^{E0D26tQ&|Wt{u}4}@-8Rrw(wQ)JuB48uy6Uyqy^apL==BFf61qn zGr$=js`#DVa#$MystcICaTL+-&=9fTZ^|wpllZOaluyM}(h07RP5d(+{d%YfkXiiJ z@XPBO0kVjHy^p7IqHRTYGXRqKGXlO{JDP^35#SAgEdETM5~Fd=*}~9&r89pcg7_o( z?_9f+p5zp;HRERiNaBxj_blJL)k@+%3-|_t_?`3W9NN>oUCazHQ*lV*pUEbEYeojh zApR^-?gOd|u&y+%{It^5h(PKF7%j9{i}BhchywJEAPMdacok{%Dcc*-#BWVG0(iIn zZ~12&%&h`729V@UMertmh_N<&gJfOqR3A=2DltBkH=0Ez8WyXi#`UlWxGU{R@e zc~lp31-CK4?he|w-!!_Gw=_8mXc(k`cu5!qg?LF>Mgb; zq7eY0^`Aj2&nlYtVLk@%csJkkdUV7L5beO_88Vx|Gy-T0%B=7*f%Mk1DM`PZs(rQZ{{O2*cH$8rRS9RA7wgzExEOf_;iWOQ>%m4Er|VDCMD zquaqowuPf%8C{nQ5b-VFNLU)c?A<`LMHW=7>&bKsKoiIy8BwPVAhE%MM!>;s7C;kV z;5rSY34Y_Tw&K1HKoj^fWdJR)XaYaPBf#n>T4;iIG}cqpx&SWz%;D7lL=A9v@n13R*0Vw)AX$+A0v~o?h4DeLxnw8|S zK9NcEGml5aR9^^cEwAvMG+lrs*+oA?1N=uN(a)4OKvm&8ugAn?9S2kwzB6=AUg2QL%Sa`FIo|gb+dqA%qY@2qA zQI6y)3`Nc8Ev%PbJIj1LMJi>wQb25cues;D)B${A96|>(A%qY@2(cY4y8&Jt$MN&+ zH?6f-d`q~X6QC#1QB)L&LV(Pmf1-*EkOCkE{0?RrpaftG{1rwKAOv6!{1qk<(gmm% z{1X-lQU$0Q{CChrNE0A3`0s;`AQ`d*DFS!}C3;}JL_p}@5&=dB31MJHV3r_Ufa<}2hjEJglXcbD0PZ^mYU4V+gKVj$_%oN}a+Tf#3hh+tL2StY7@hBkx zO7P!75CKgBcL5LseN*vp{S+6y80W*8EFBD-x}0#w-5gV-hnhH8LsXprN$y9u9+dshvRU8#D4+Lx@S ztFKdls%Rc&V&zf_TlM)^23BPNw;e&qum%5Qg#=ye0IUOO#@+T6bk_i_wHHe!P|*7sDgw`e zMHNATA7|<*07-nk<5QKVmXUsx7GU%_`M2LAOX1PB zvQvQ9GIRCs4V4riB4AY|NEd)k+aeNPsVlNWho{mI#3G#gIoQY%h`^<7m4Q8DPbo7cD_n_9!91Dk3Bp z-EiVvmp}=?Fo%vxa2Mdw{zep~U7w5hBI5Zr>wxRo)5*{dxPr<6W*k{y7PR1-Ef&Cg zc{Nj(m1_i%*MiFcCk&Y&T7uTvEBqRffBX|3RWI6c@T@1Br3hfQ?hap>su|BTOcTHi zd-ZP?w$n_@3Xr|C2jLmN>$({ieW&^X6W{um-Oh9Y%y8##umB07d{az5=QO uPy(E=6i`A4A%qY@2qA%qnz zKA|aZq8vGIg>iDaIk?HkO>MH<^C$cMx$D2TpV;Lue?W)v2&aM{Lm^X#u)`dNM=S#B z4HiTR?WnEUciG(F1QVJ1fwsIYwON**FoBg+t6>hTj*UAuC6Y+@!ZaaybVsf2-X6`( fWOyEI*gJkUa}IUS&*2ro2w?DZ^>bP0l+XkK=(T+Z literal 0 HcmV?d00001 diff --git a/canvas.js b/canvas.js new file mode 100644 index 0000000..41e5240 --- /dev/null +++ b/canvas.js @@ -0,0 +1,89 @@ +document.querySelectorAll(".clock").forEach((clock) => { + var canvas = clock.querySelector("canvas"); + var ctx = canvas.getContext("2d"); + ctx.resetTransform(); + ctx.translate(32, 32); + ctx.strokeStyle = "#FFFFFF"; + ctx.lineWidth = 2; + ctx.lineCap = "round"; + update(); +}); +function update() { + document.querySelectorAll(".clock").forEach((clock, i) => { + if (clock.classList.contains("main-clock")) return; + var canvas = clock.querySelector("canvas"); + var ctx = canvas.getContext("2d"); + ctx.resetTransform(); + ctx.translate(32, 32); + ctx.strokeStyle = "#FFFFFF"; + ctx.lineWidth = 2; + ctx.lineCap = "round"; + var canvas = clock.querySelector("canvas"); + var ctx = canvas.getContext("2d"); + var now = new Date(); + var hour = now.toLocaleTimeString(undefined, { + timeZone: clock.dataset.timezone, + hour: "2-digit", + hour12: false + }) % 12; + var minute = now.getMinutes(); + clock.querySelector(".timezone").innerHTML = now.toLocaleDateString(undefined, { + timeZone: clock.dataset.timezone, + year: "numeric", + month: "long", + day: "numeric", + weekday: "long", + timeZoneName: 'long' + }); + clock.querySelector(".title").innerHTML = now.toLocaleTimeString(undefined, { + timeZone: clock.dataset.timezone, + hc: "h12", timeStyle: "short" + }); + ctx.clearRect(-32,-32, 64, 64); + ctx.beginPath(); + ctx.arc(0, 0, 30, 0, Math.PI * 2); + ctx.stroke(); + drawHand(ctx, (hour*Math.PI/6)+(minute*Math.PI/(6*60)), 16); + drawHand(ctx, (minute*Math.PI/30), 24); + }); +} + +function drawHand(ctx, pos, length) { + ctx.beginPath(); + ctx.moveTo(0,0); + ctx.rotate(pos); + ctx.lineTo(0, -length); + ctx.stroke(); + ctx.rotate(-pos); +} + +var theClock = document.querySelector(".main-clock"); +var prevMin = new Date().getMinutes(); +function updateMain() { + var canvas = theClock.querySelector("canvas"); + var ctx = canvas.getContext("2d"); + var now = new Date(); + var hour = now.getHours() % 12; + var minute = now.getMinutes(); + if (prevMin != minute) update(); + prevMin = minute; + theClock.querySelector(".timezone").innerHTML = now.toLocaleDateString(undefined, { + year: "numeric", + month: "long", + day: "numeric", + weekday: "long", + timeZoneName: 'long' + }); + theClock.querySelector(".title").innerHTML = now.toLocaleTimeString(undefined, { + hc: "h12", timeStyle: "short" + }); + ctx.clearRect(-32,-32, 64, 64); + ctx.beginPath(); + ctx.arc(0, 0, 30, 0, Math.PI * 2); + ctx.stroke(); + drawHand(ctx, (hour*Math.PI/6)+(minute*Math.PI/(6*60)), 16); + drawHand(ctx, (minute*Math.PI/30), 24); + window.requestAnimationFrame(updateMain); +} + +window.requestAnimationFrame(updateMain); \ No newline at end of file diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..52edddd7f71df4dc9e851a2483f85da9c00ced86 GIT binary patch literal 1092 zcmV-K1iSl*P)-(Kmu<#z=U$s-@+>-@q%^bBVXVuY2YHW%0Yh{Uq}o6G^D*~Pe+pY z%mt3Joy8QWRZ1ypDX^IB9OVL^BkkK6pBDWZ?v6S2eOg!$Im!ZBxIgANw^G^cn9Z}2 zQx4KbozrM_v@uw6yvIzJrazxICH=NF*%zalR{Bef`ign7U*ArDgidNa-LjLB5)x*} z`TkSu6g||7j9*Vr2}i1yi9C0#!*@|7_J^zJvd(c^AkE;EW#FGQiwB8jep+Vg@Evxm zWzb<7Qwh_J3|m&&X1}Ciz(PN@tc7(J3H=@k2A3_))2LDejTT3`lytBLi~BUIltHs) z)(y$>eX~^QaOjDgtv}0 z8+(m!(CJ9RLx56r8uRaQ>omMHg4xuv3Yco7c`vAlZ@$9N-|9@kOMp_e8XT4<|AB+< zX_dEtYNK8_7r)D>$1n6nS!*~Hq-$WK>CSaklnMMb5R%u3`9OAFEfC@foY*s}ZHEAZ@2`3j2 zpcLI2o2F=!lbXqqOa&a#*qn?uxuKct$W*`%jm?c{lSi7#l1v3G(bznSHqpzNLZ$)= z8k^o|lRnL)CQ|`58k@dolOfHdGE)JS8k?d2KtKvE#1-b2&xKN0#J~{8m|UJkoI)5a z;x*gK5k{ppvW-Sv4RF)(BqzZ}CX`Aj#Y7JC&5-b&<4j32l@Lniilfc3^jG0MJJU<% zgwp9qXS&Uzbkb>|f+mJD{owT2-Ht>BjZ{e))0z6%#W>NDQmUwTaHe}Kl`ZN;+A2=Y zG{PClwu(q&%h8z*3pTc7T8mE3)MGZ!Jz9%0&0QyFS|i=u6=<(JI8(PZnESNXB@Q?o zoM~nZCw4pFkT_!U66Jry + + + + + + + + Clock + + + + + + + + +
+
+
+ +
+
+ + + + +
+
+
+
+
+

Loading...


+

Loading...

+
+

Welcome!

+ Feel free to take some notes.
+ +
+
+
+ + +
+
+
+
+

Customize Color

+

+

Customize Background

+
+
+ +
+
+
+
+
+
+

Select Timezone

+
+ +
+ +
+
+
+
+
+ + + + \ No newline at end of file diff --git a/styles/clock.css b/styles/clock.css new file mode 100644 index 0000000..ded14bc --- /dev/null +++ b/styles/clock.css @@ -0,0 +1,111 @@ +.body { + width: calc(100vw - 64px); + height: 100vh; + position: fixed; + left: 64px; + top: 0; + padding: 0 16px; + box-sizing: border-box; + z-index: 1; + overflow-y: auto; +} + +.body .clock { + width: 100%; + min-height: max-content; + border-radius: 8px; + position: relative; + overflow: hidden; + padding: 16px; + box-sizing: border-box; + color: white; + margin: 16px 0; +} + +.body .clock::before { + content: ""; + background-color: #FFFFFF40; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + backdrop-filter: blur(8px); + z-index: -1; +} + + + +.body .clock h1 { + margin: 0; + margin-top: 16px; + padding: 0; + color: white; + font-weight: lighter; + vertical-align: middle; +} + + + +.body .clock div.labels { + display: inline-block; + vertical-align: middle; +} + +.body .clock div.labels * { + margin: 0; + padding: 0; + color: white; + font-weight: lighter; + display: inline-block; + vertical-align: middle; +} + +.body .clock div.labels .timezone { + color: #c0c0c0; +} + +canvas { + margin: 0; + margin-right: 16px; + padding: 0; + vertical-align: middle; +} + +textarea { + resize: none; + width: 100%; + margin-top: 8px; + box-sizing: border-box; + height: max-content; + max-height: 100%; + padding: 8px; + border: none; + border-radius: 4px; + background-color: #00000040; + color: white; +} + +.deleteclock { + margin-top: 16px; + width: 32px; + height: 32px; + padding: 0; + border: none; + background-color: #FF000080; + color: white; + border-radius: 16px; + transition: background-color 0.125s; +} + +.deleteclock:focus { + background-color: #FF0000A0; +} + +.deleteclock:hover { + background-color: #FF0000C0; +} + +.deleteclock:active { + background-color: #FF0000FF; +} \ No newline at end of file diff --git a/styles/dialog.css b/styles/dialog.css new file mode 100644 index 0000000..e2d1cd8 --- /dev/null +++ b/styles/dialog.css @@ -0,0 +1,112 @@ +.scrim-over--.open { + background-color: #0006; + backdrop-filter: blur(4px); + pointer-events: auto; +} + +.scrim-over-- .dialog { + display: none; +} + +.scrim-over--.open .dialog { + display: inline-block; +} + +.dialog { + min-width: 320px; + min-height: 128px; + background-color: var(--background-light); + transition: background-color 0.125s; + color: white; + border-radius: 8px; + padding: 16px; + box-sizing: border-box; + pointer-events: auto; +} + +.dialog p { + margin: 0; + padding: 0; + margin-bottom: 4px; +} + +.dialog .dlg-top { + display: block; + font-weight: bold; + font-size: 18px; + margin: 8px 0; +} + +.dialog form div { + text-align: right; + margin-top: 8px; + box-sizing: border-box; +} + +.dialog form div input[type=submit] { + margin: 0; + padding: 8px; + height: 32px; + box-sizing: border-box; + border: none; + background-color: transparent; + color: var(--main-color); + font-weight: bold; + border-radius: 4px; + transition: background-color 0.125s, color 0.125s; +} + +.dialog form div input:focus { + background-color: #00000020; +} + +.dialog form div input:hover { + background-color: #00000040; +} + +.dialog form div input:active { + background-color: #00000080; +} + +input[type="radio"] { + opacity: 0; + width: 0; + margin: 0; + padding: 0; +} + +input[type="radio"] + label { + display: inline-block; + margin: 8px; + padding: 0; + width: 96px; + height: 64px; + border-radius: 4px; + box-shadow: 0 0 4px 2px rgba(0,0,0,0.25); + transition: border 0.25s; + box-sizing: border-box; + border: 8px solid transparent; + background-size: 96px; + background-repeat: no-repeat; +} + +input[type="radio"]:checked + label { + border: 8px solid #FFF6; +} + +input[type="radio"]:focus + label { + outline: 4px solid white; +} + +.dialog select { + width: 100%; + margin: 8px 0; + box-sizing: border-box; + height: max-content; + max-height: 100%; + padding: 8px; + border: none; + border-radius: 4px; + background-color: #00000040; + color: white; +} \ No newline at end of file diff --git a/styles/root.css b/styles/root.css new file mode 100644 index 0000000..a223417 --- /dev/null +++ b/styles/root.css @@ -0,0 +1,7 @@ +:root { + --main-color: #FFFF00; + --background: #202020; + --background-light: #404040; + --background-grad: url("../assets/none.png"); + --background-image: url("../assets/clocks.png"); +} \ No newline at end of file diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 0000000..d351bc0 --- /dev/null +++ b/styles/style.css @@ -0,0 +1,310 @@ +body { + background: var(--background); + background-size: 100vw 100vh; + image-rendering: -webkit-optimize-contrast; + image-rendering: crisp-edges; + transition: background 0.125s; + margin: 0; + padding: 0; +} + +#back { + background-image: var(--background-image); + background-size: 128px; + background-position: center; + opacity: 0.15; + position: fixed; + height: 100%; + width: 100%; +} + +* { + font-family: 'Courier New', Courier, monospace; +} + +.header { + width: 64px; + height: 100vh; + position: fixed; + left: 0; + top: 0; + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: space-between; + align-content: stretch; + align-items: center; + z-index: 9; + transition: width 0.125s; +} + +.header.wide { + width: 256px; +} +.scrim--, .scrim-over-- { + display: inline-block; + width: 100vw; + height: 100vh; + z-index: 8; + position: absolute; + top: 0; + left: 0; + background-color: transparent; + backdrop-filter: none; + pointer-events: none; + transition: background-color 0.125s, backdrop-filter 0.125s; +} +.scrim-over-- { + z-index: 10; + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: center; + align-content: center; + align-items: center; +} +.header.wide ~ .scrim-- { + background-color: #0006; + backdrop-filter: blur(4px); + pointer-events: auto; +} + +.header::before { + background-color: #FFFFFF40; + content: ""; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + backdrop-filter: blur(8px); +} + +.header div { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + align-content: space-around; + align-items: center; + gap: 8px; + padding: 8px; + width: 100%; + box-sizing: border-box; + height: 50%; +} + +.header div:first-child { + justify-content: flex-start; +} + +.header div:last-child { + justify-content: flex-end; +} + +.header button { + height: 48px; + width: 100%; + border-radius: 24px; + border: none; + padding: 12px; + margin: none; + background-color: transparent; + transition: background-color 0.125s; + color: #FFFFFF; + position: relative; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + align-items: center; +} +.header.wide button { + overflow: hidden; +} + +.header button:hover { + background-color: #FFFFFF40; +} + +.header button::after { + position: absolute; + display: inline-block; + content: attr(data-title); + font-family: 'Courier New', Courier, monospace; + font-size: 12px; + height: 12px; + box-sizing: content-box; + background-color: transparent; + color: transparent; + left: calc(100% + 16px); + border-radius: 4px; + top: calc(50% - 14px); + transition: color 0.125s, width 0.125s; + width: 0; + padding: 8px 0; + overflow: hidden; +} + +.header:not(.wide) button:hover::after { + background-color: #202020; + color: #FFFFFF; + width: initial; + padding: 8px; +} + +.header:not(.wide) button:focus::after { + background-color: #202020; + color: #FFFFFF; + width: initial; + padding: 8px; +} + +.header.wide button::after { + left: 48px; + top: calc(50% - 7px); + color: white; + width: initial; + height: 14px; + padding: 0; + font-size: 14px; +} + +.header button:focus { + background-color: #FFFFFF20; +} + +.header button:active { + background-color: #FFFFFF80; +} + +sep { + display: inline-block; + width: 100%; + height: 0; + background-color: transparent; + border: 1px dashed #FFFFFF; + margin: 4px; + z-index: 9; +} + +.poplight { + position: fixed; + right: 16px; + bottom: 16px; + width: 128px; + height: 128px; + transition: bottom 0.125s; + z-index: 9; +} + +.poplight.hidden { + bottom: -128px; +} + +.poplight button.hide { + position: absolute; + width: 32px; + height: 32px; + right: -0px; + top: -48px; + margin: 0; + padding: 0; + border: none; + border-radius: 16px; + background-color: transparent; + color: white; +} + +.poplight button.hide::after { + position: absolute; + display: inline-block; + content: attr(data-title); + font-family: 'Courier New', Courier, monospace; + font-size: 12px; + height: 12px; + box-sizing: content-box; + background-color: transparent; + color: transparent; + right: 0; + border-radius: 4px; + top: -48px; + transition: color 0.125s, width 0.125s; + width: 0; + padding: 8px 0; + overflow: hidden; +} + +.poplight button.hide:hover::after { + background-color: #202020; + color: #FFFFFF; + width: initial; + padding: 8px; +} + +.poplight button.hide:focus { + background-color: #FFFFFF20; +} + +.poplight button.hide:hover { + background-color: #FFFFFF40; +} + +.poplight button.hide:active { + background-color: #FFFFFF80; +} + +.poplight button.press { + position: absolute; + top: 0; + right: 0; + width: 100%; + height: 100%; + border-radius: 64px; + background-color: #808080; + overflow: hidden; + border: none; + font-size: 64px; + transition: top 0.125s, right 0.125s, width 0.125s, height 0.125s, background-color 0.125s, color 0.125s, font-size 0.125s; +} + +.poplight.hidden button.press { + top: -48px; + right: 48px; + width: 32px; + height: 32px; + border-radius: 64px; + font-size: 24px; + color: transparent; +} + +.poplight button.press.popped { + background-color: var(--main-color); + box-shadow: 0px 0px 32px 0px var(--main-color); +} + +.poplight button.press::after { + position: absolute; + content: "devices"; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 64px; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: transparent; +} + +.poplight button.press:hover::after { + background-color: #ffffff40; +} + +.poplight button.press:active::after { + background-color: #ffffff80; +} + +.poplight button.press.popped::after { + content: "phonelink_off"; +} \ No newline at end of file