From f582cf4b884ffc89394db83bf859ac79c0047ceb Mon Sep 17 00:00:00 2001 From: Akshaj-G Date: Thu, 31 Oct 2024 18:54:14 -0700 Subject: [PATCH 1/7] CHANGES --- images/zoomin-guess/einstien.jpg | Bin 0 -> 10525 bytes images/zoomin-guess/kanye.jpg | Bin 0 -> 1242 bytes images/zoomin-guess/lnx.jpg | Bin 0 -> 1236 bytes images/zoomin-guess/ryangosling.jpg | Bin 0 -> 2996 bytes images/zoomin-guess/tombrady.jpg | Bin 0 -> 1904 bytes navigation/create_and_compete/scripted.js | 3 +- .../create_and_compete/zoominguess-ui.md | 128 +++++++++--------- 7 files changed, 62 insertions(+), 69 deletions(-) create mode 100644 images/zoomin-guess/einstien.jpg create mode 100644 images/zoomin-guess/kanye.jpg create mode 100644 images/zoomin-guess/lnx.jpg create mode 100644 images/zoomin-guess/ryangosling.jpg create mode 100644 images/zoomin-guess/tombrady.jpg diff --git a/images/zoomin-guess/einstien.jpg b/images/zoomin-guess/einstien.jpg new file mode 100644 index 0000000000000000000000000000000000000000..3562145a2062319e1618acc3f053fb59d0a43ba2 GIT binary patch literal 10525 zcmbVyWl$VUv+geL?Becj!9BQJSlk_gyAy)DyKZoIcPF^JB{;zX1cC;+dC&KKr_PUC z=T_aGsp_hk?&<0uPgOrX{kHbD0{|(=$jbnLKmY*vcLCmB0pyZS4$iKYZf=$q6lOjY zw$7FxSzRs7|9$wj2?zzi{kI?>z#||aA^sI4G~|B-4I2#u?eE40n{DJcWsfBVDz|2^$X7zhgnz6}FN|0V$k`%fTsB?WF5=6bN)nI2m*Ve% zN-8d)wz|}K0-`npJ@>t1L~&kHVLUvIW#&WQP*d(1S2%u8TD9Ra`Z~iiu-?)$$%_hE zcj)$6MX*uBT`D6P@**yme8UM^OklEPZk4Zk6amL}2~zm%mYS3b*`vl;RqBNy=4%@7a3ZrG9*4rl(<;&`BbAT9 z`654eekJyjgLUU0ulom<eeOttnI|DDDrwBI2L^;cI4Y@ETHBX0D4Cn4MHto->a;(g`J{F0rOBIB~MHNq+EY-UD<0p5^ zvC(oqdyG?UXM9nGQ4FnRoRbPH?UYaU8w}Q5pJ8R9egx)xW7AT}m%vYarKLpT0b1qZ z;M)Ic!iFqa~7`NS#!6%=uH8F`p>(-SaSJWD3owq#^xoi%ka z#>vt-m#8XiKA%r&A*&f?bpNGGT0v9DJNLWVglV&@z(TFSm3^(TKw1y%rhL?c;Rtn& z{zz>)X&q4I_n{Vf^fXP~bc$**gOq#2EAMPhBhQUSrJMJ|WWTSvk^18o(Z@P6fx=B@ z9@1?7n{}BJj}RL){~urcs*ddH(B0SfrsORTpTXWTrG*;9S=l$6+CM){3%Hy?E#%!J z&mw>5^^n@tetgIG>t>omp_DVVC_5G0&V+`uJ3BS)G3#=lCvurk@CJ}5>5PH+ZglLG zYxnv-9{C(u+5LqV&i_Q#zYz9csDc6g2X6mYE&9K>!v4QqIY0my7$6)B5Ed2|2JxQ= zf8h)V4*+9fBT(Xis5mI7#c^pk5g~ZA>|ETErvC;y5D7>pA;afZii4&no41Sf-K1DD zVSnmIJ$95JtUrB)Fps2f&Wu)Xm9~0^7<*I|@;Kj0^}Zpg`FIA+a{-(4Qw#Ezzka29 z>#2=K+foa6c12>H844B8ssEXSlJDxD;q-Yd)uscXGyg~XNz&>aiSMI>g@v9AnnMn} zCNdw5Px0O8da@!U)o3d3%v+I!y_i&t6~Shr*t|Yc=O3VD$}O~a{p)Idmk1xpMB;mz z+r2cQ?M|gle|Dh|0`Rt0u-&ZhnFs+$?>i5%@4S?)`NNX$7r}&UR_t~?1}5wY^OBxCW23;dJj)UI!62qK8likxVWuI(G*#5DtkGx#aU@ zt zWz@U@;*8;w(q3!4yD$o)$1+s2yPSF;c23xcypeAra@Ep$3z zTF^XKFHWiwF7>lkk1-1h_Jt-om;iaJCJ$BC?%YV%T1Q6944{W*4mS6_R{7)_djr{2si?@~Dz|!r6d)}aj=YTn&K`U)u>g`Hio`Hz zJ_c`i*p`0X$h^$EK4*6VGX?HxDEL)uTY~~(FDo{0XwMw*b=CkZF0{wMsMahnR3EXqX6I`mPY6^We;kps*ki|C~5fW?)`@F>n+Y4JdY{>sDE{6|EcwyLG*k4#{$X0hIA zSxm+xp*@a2FGp!-ph_4}KVU4{Q_HGfUEiC)>a_jvzI@s_jbx-6CRdPCtl9@N;DRUm zWz|c$O0gW&Lm$0hztj;aybK3>{^nY`8$;6=<+(#$qc2XRu{I^BYRfvm2c*5 z>?hD~$p%J9G3grS^_?5}DHM362eo3Enf1L5g3--NZr3)ALDs+k^+2jZ;g0K!MywO2 zX_I$xEsk2DQPjwOz7yRPeKy@n3)4!&8LUoNBE`LL09{9FQ;y zefUqdqz!&4bBLuE+Q@gNd7=7MW*EWC(YAeEeL68xR$a3WO*1%yS6(RlkBu?u7#7V* zE+Q@W$6whsia)zcyK1%>L*L&*l&}s2+#sar??VaX!mhR~D5%w2|40IKrGHfmy|PIb zmwy=`;s}@RZY9(b3wOoAB)hI9#I5Yp8R5*(ME-#sRJVbPGjuSRQK`6pddJz)tHjj4 zqp89|!ofQTEu*Sjrb^}M$7yz`_pg1>EY?xHtJMg&UjA2^Iwf1}%wVn5J5(3Z$-Pt~s2gf}K1;1@=a+%iG) zg7h^dX{fJM+HBfjAz*mOvU{$`Q$yG z04AM8H-E0*>PAx zOaMox!>d-K94Mymbb3}bBM6@(Cfy*_-r^QTTK2;@XZTW^P14Ax2WosF2Pg>dUzMHp z)Rb6qmGhc;r1qwdBv#3t7U*rF63{1a^4=^CRls0t($D5-FIAvZc}Vw=^tau&!ZIPp@t ze5eb_x%-L3D5l5Eb%CgVS%`GVRW+3|5@YI;-YBx(bwzA<0~jy+ z*L55?Y3v^RXeJi?J4r1yD(b~yEj=;cIHeCar`)E`XCfEHzeo&qq%B9H%@DW$D_ij7 zrwww#S9(Vqi)(@+uDG^@Ta4VB8f)i_&$J2NRl!RmH%^X?u_HgcmF>Rpbl^g(h3TxL zRmbf(wLDV@e?1j%N?T4S4a?WUZsRg?Hrxpj^R#Yc-V%QnW#!-HDhrt6RM4p9kFV8% zPw04hcvXM$XviAdi1s;sePtVYkuGnJJj3ht)$MMNeK5Rlk`UvMv$|?2jiIyXql{#-FyG?T0;Wb z`jl&9%d3)c{7fG&pEMR9nKytAw9K1Xl#d)p#*=$4$B=sEyQ4VmB8o_*VjR19+Jusg z7m3}xkcCo@nfkCNzN=$>y@G(eDd&HNSTU zu(8w`R;%NT=46*?6FO<0Q7}QxIc`$M#NzY@)1pUY0>YmbQD{ne;G1Q_KYFjS?wPB1 zOU=~kroC)5Wfw&t7_}XcX(!IG=l3>MJPic&l2h~Kg1ozfH;t%`EW_c2ek_kzWQiSd z$7YlDXpYgEDb7Q4Ym(};kz-WY%IRRgM;7u3k@pY;qz>*`QIy5c_m<>AMdqq4VkU$; ztOb;r+s+S&*_xg{o(V?X*AY)9z5)K0tzMG*e6)MK=~5FxAybzm9KDoz&E}Z>Cd{UZ z6!7eVcv21(?>?7O%YsD;-ydgzyX`2GYamK)!Wq+q0Z=^}HTCY-j;9avth5A~JJ*t? z)GX5F3BGkEmWeguuFuFHNWo6TcA1ypT0f~&#eD~<%L^js2I$96jbFGiKaD0DP1cw6 zRXskP#&V5!-=%9Nul&G_tbBXqGgonD(cZI|!J<*!CKH^qoz?klL(L zy%D9odG&8`iF4@)9kJzUZGGXo-T0_Z>`#4Dv9M*Axv$QDIOe21<_9QF$_)84pexSF zn0|fom%OETQ}H+aYj8;F$U-njaxiI`gZVGMcLTV7?VG7F zaZzznr!A;j=6CoJ)3L*Wb;4O+4A<4!=pB~>8DY)kQ)v7yZ}a9`%bfOC%2xUwf9qUB zi>Uxg1*Qlzg5FZOE?4#vmHQg%DTDjh*0g#v0cCO;#5M-i8sDu2y}l_Y+WvY2&}WDh zuiB%@m5n|3Zt6T~${qCXJ03a;P-);#!91s@%AMykI+wOp+#NrT# zfT%c4;jmqTD5xcp3fR>e2Dn`3cj0lw)PMb(0wIe6IqX-QINaY==oYwtc2E!WD`Lx4 zKZP#Z9mfW{$?k#~Y}{GlD2b@qY-e{DV^Vx{Kz!2HeIq1d8sqg}k%oTICXTTb2=2R| zRbAu~pK8YxVtT<{-Cdx>P&zvhRUE13arTY65;LuZO*jFZ8bgR|D`5t5Fl;i>rs#J) zlCakW`GWJT;+D}UOK(X{&%2fN5(Je1-NKzzim`P#cig!##Z<_lu(}Piq4eaekDd=G zd|zOGwk(<`&!-HGPKz_A zyvrOvcUA745mOqai;U~~Mo_P2;alPL)F=jAV{Iq1Zgj>Z9~73b!nY4;*h#g-bo zW4cC$2o|u8yN6*#CYHKuB5^x9pJt&8C?L6vtt(~mYGHblY!4PvgQFU2Q3=-jx3>}) zSZVS$xXDh@Fl}^GEGg$jDn>hd+oYuSlsmyFZ-DcP{$M??Wu)9elu}=~W6K`(?v)&0 zW=>y!aJI_Hd961FILr*ARNnEc2479$TxA_*c%uF-oO7VBOmxMO2^!*~Cfnp7{=B45 zhtg5h^_ruXZjo2Nq#VQ_cgK)Kyt-Z$;oU?J6)2H((tnQd24h0+vizc0SPu;R^$3ae zk_?&$aiE3@Bq%Y(4ISYVu4qcwB8tKtjX*18bwslcQ#;_P_+C*~Ec;9+Z3UEXs8|+cUmDQLY2%FNs>zgFbZoRpynPF|lOH(pS&0$@jUskcNL=rZWqCG6?_KOT(m(3Xcqx(AtyApqm$o*IBGR zXtLqMXQmdotVNTGU6c2I`Oi2<1R`ZBmh9%1!W7^v=^~`o@bMXh_fbYnB|6DZv-P$C zFD*o@;oSq6DEULGs9|iS0*+sJ@g(14dtyDZ3O6$kb5gyL${igpIOo-cnxWSp_CiS zbB|8^2ATs{VHvND&`_VOQuARNL^_1X4r`@_3#D7Ac7#`|lV5^6WtXMJXX&ee2|pc4 zk8cPadr@rhr&UpG?Ve+ws;{TH0h{__ZCJ5&^MTPu4`^uqG> zdLcAq#?smt2*KDL(B6tg)eacR>fL-Paah~}?v0(NG7M7+8-|;is7yQU$lR-H+Tz&6 z-twa;x9jAV9miO`mZm7+r&@v}{lWpvh;j^}(1nzr|vsIHB`axmjG6ry6JS zaIG9_Dk>)T&7DV`rgPe6T<@SoymTNyEglbNGk2?QJKPu`V#sEG8cel#<<1|alKq*w zLgc`Z586Gnt~>3zju#%=ro?~r8ZB80(4V4=Dts<9#WIWx#1_MFW{X{{#=B1|B!{KF z%7p#SmP-U!7ERT?BuB4Q?IdLlevcz=54WAB_IkF?uE4pUKMxzjMMSlOP+9h9FM&r& z{bxr*7WT?udeq{VN)9nis-iIe^hVd-y~?8_-)|Z5<22uDN4g3O8Wm#nUK9be#xRh{E?rPsvCBD$Z3*Q^ymwQjEB(dkRw_u+IIv%NkHjm`W zP1Y_xWN14`lZaqzsWD!9vnXJx0lD!Agl$>N@r|bzpnwMi#aI5i6PHn#See$aJ3a1q ztV~j{pB6R9Toy(ITdVv?+sj=^D79CAfk26wP>&v*vVVucxDnF>0NvFW!n1cOY%YBC zZveQ_!Ya>0hFpn*iBEUDo!(!uQLNbFpp_M~00gv&a(x9~*)v15(3b}_HlV88ds%Fe zvmp%{qsf7#mTTrg4VyTiL79d8?TbHA03BYfb?n#R<}~;jEdOPMcHei{q4vMUSp}&o zNOUJkE23F4*`BJS=x_gNN7I0S09e33KSeNq)xXLrFy-Hx%G3oElvFU#Fu(hsHnJ!P z%fsszCsw=OmzPL8$|rgkgV!hri6B5G`Din|gX_^PIhj~9kG0}F7B>dzv?6V+BE5ls zT*Y*lg^}DL%pi9_sAs}`V&pm1W8_K8s5puz`oV1-B z#`Qd6cw>e1=O#HZiLj|s8KMX;P^&<_CofoPVr`#ON7ZP3O}3vTv|pvAUGGUI9Lq>2 z=3b&md}0QZYJYPv)fGSSU?NA5XrH4dHBMto3$z#MebwVGb^7cTOrbVzq8O-PxYu9d zBK^89UBA6BfzYNSqFHKvzeI~{9grE`tGGQPj+w z^PX}7tMVtL)@pqST_1T^rYC;$X|{n-FJuTe2KgKxxl?85RI5)yYi3=W>@$=8F?Ddq zDx}{S8F53>BMD{on-`ap;1AMD1mj^{!YwoAfUsd}sxAa$DMI9@2zvmm`XGYL)cPiY zSZ8UuBDEo-PG+gINfHlo4{aDi7HN>eR`ECInfWb*+`B!A8Q&PY$X1@B(Xpt^O(R2D z2Y~YpS6~=b+#8_YA)Y)>hx;zP;F@KqLGB^+7AslPN*mRy=$greAJ$y{j) zUR;Kq@D2F#pa!v3{8C!Y4ZXyU6Hsci9V^nZ7_M>45`1Gf?^@(WN|S0T2+nPzL>0A@ z@(xkrd)LJ~KgQOT9gW3JTo#C_&KZfvDxwmuV0x1Q)+l6u#Rk4$4wM=OIaIWTRGNjr zCwGVp9I&0T{9;>`j+Q_JhGER~H8QE;L$?Ip3$Bc}!MjJJ+*}~+=~57`k#J#XJM(PGG`5fz`CQ4y0|7?q!qU67$XH!#yJvn$^<{T<>mO=gJvp9W$?1 zn1AhIamd@(>rzFVvF)}q;`P4+v8YT&hHxA^o4LWu!P|9=Fbsn64@gW%DUl`K>lcxs zgg7cse%)6%W`7~nvMWrIELYa5YVRk4UcWn3l4g?+!(|&}+hIzf7xws^ui@EpO`)bJ zQ%;qosjOD!T##}d%v6z9^05HtjK?E!tpUBJI!=b@OGWh5R>lN<9D?lFr;NU zY46N4hbKthDSrSTiD#YxWZziUjp^rS&fyH$rvST2FT$fYIKfQ60frWLiDj{Kozi`7 z0=Y%!x%Wp5Zv&{l)<$+_XnvbSWTDiw5#LeR`=<9hoi=d0B4Px^ghBgZ0hZ`Dt@fI+ zQ-_}RRD4)jXoh7&Ja{I)>e+U!Jqe;YU6&|vCf1uUQMl|SC!~@ChAnJWLa_9GpGr{W z5=TiR`g2LIXel$B5R$`GH51NHaK{M_Jm8=rS!O)^!}3e-e3ijIL*81M=HwQj2X^g=fNO)(fqh$j}n)-3{h^>fMf; zQjogh?L(d~cd1I#sMgmsP$4~})!10_4`ST%JUF^AM1hCtS*j!{3Njp7u^zPdjX)ta z3NCgp61B`ScxY@^uz>g$r(zT zu;K*23GA{w_3Y1Sa0hI^0WbG}|I6$`)(+YSvztf7R12-}zPFi1-dlPN6uoGkgL$P0b_f~Po!_k48_n#`Bdl{?FG z17YkJO4W+y_d&BR@lZZj8Y$d#14jmW|E&8Bz5rVtPnxB5>gu!Hc8i}OM zh~31&O@}gh<`f$w@dOgo>^`P(7`7ORgPrww@aHJfbr^wm9*X4-VN)~`VEfcZCKf0n zb2y6Vy4^lCo}E&c5Y~AYs$`GB$w5d>R_(4OoeD)QL71&h8IBYiUlOv|uRHud#q zCSkRZ#7rLZPi*A8)b)(TFw|d?sCfC)8&e3hn{!~Z-vFARpKN?TL)m!&zZp9qlq_B6 zbY*J$T6w!fsfsVWjPfu)RFl#;`j|T7_YM)%PL~)9V_l!+&c&$1_)Brb)>&hgUD!1^ zzU^=irB-Y7B@sp`F$z@v`a@!ld?h-#?&D3j=s1N4LyK$gAlNn<6OzgbuGfS zZ2+Q2cms4L1vR^SVvIf9##z-pzl$}2WpQM<4;|=R-m!cX+m%y92_Epl`dSGs;psDP z=q$mj#xqq;wfyEEGe(4i%bOvNW7U;&wk2-6{c{Pzqt$9GGqKXzK1MYg<>|V4m1&aS z^iUo?Nm6IKbl)9L_{Ti9&tP%S%`K#j7AMCY7O8(R3-;;uGk&7Y&ziQ_JLYkNaDI;u>ENtXs{hT*7bCqvI zmSJ}20abxJthXx~r$*H(3sXxge>t0fi8@7TWp5v4I$gQ*5^wE$UK3#g7w*NU5Dn4mm1ae*<{_BqNIL$pTQQQ2pNDKsvCz z|AX3F!j=#VTh*%{8-8Ek<7fpov5ctq>K?UgBws&{43iGZ6}_G?!}ZiC$J1q&6&V?6 zWf%{z60)5SHGTz3gAq4SA%;H#8_OQXpg&ZSMP#Ixi%@+^IJhiKo26@sey=0U+#}wT zNm81{XR6G=d;69I^LoNbu!au*g5jq~s~OIB6p9XWD0#0hC`)~d1uPo2ktQbDF--p1 zvmNi2@FDF^SjdZc+!2|l1zzP15MP@u9iT2fXrwh{M?j&MjX_|!L~#ofmX<;bKht)b z;mq>}kP$9@?-Jc%q|nJ`ZiW_4yO1zNDA8#`9C}PeX@jwu22ZK448DjLCWBksuf8Ho zazJuCoY9D;U|g4@oa^21h|l{zuG5nwfSN;j%v!v}C7D|s5{LOki8Fz05;v`P*?_Yk zVU1Zbml6O;B;qr?hc~N=%(H~1S8DU|m@}sNk@>VTLTbO5Ah5e&y9zPY?wHiGGU2%Z z52PtPvd5=k;RoYpf>I}1#=@50Qw&1?A!Rjw&Wuje)Vxn0u6hBx0Bn zMUk&<0VbujMl{#V=@hWnN72&`(2=5N#*i9H7u3NUUnc6>?5J&waCjbBd literal 0 HcmV?d00001 diff --git a/images/zoomin-guess/kanye.jpg b/images/zoomin-guess/kanye.jpg new file mode 100644 index 0000000000000000000000000000000000000000..915f249be5d00944ff228e09436d36eca02caa36 GIT binary patch literal 1242 zcmex=ma3|jiIItm zOAI4iKMQ#V{6EAX$iZOFpvKIo#K0uT$SlbC{|JK=&<9M+KwrQC8!I~#GYjMYTMQf^ zFETJ_eP2^s`u4NB|Lo~U)iz%Hn>D#g#>wE}B(=)MC2cAqV%I^&08L?HhMNIoFtRW( zGqJLPjbRc13Owc(xs;au)~g<E8?OwBp%7A!fr`r7e;%9rQEFP#YOxVK`p zdc!IH^Tu%tR`-W_EOKyoyQy;GsbANxiaqI2=;u$B>B6seSRK#XvZx?> zM>)s-{@(1G11ZHfdFI?$Gw1A=0{<*YJ(hVXF%TSC?;6JJy9KyBJOS{nvDzs>P~9t8Lc3+E*pKpfd00 zeCxDKn|Y_D)*o8%L8Mr{GNsA1a1mSEKX+UGTHBcklT0U>lrhSbF~74^l_{MR6WWvW zxA95g-;gEe6<@HOe`6`j#Z)|Vb82YnjHxX-8yrgb`_giMg?+P<`r@)VhWU4=#Jl>0 zJ%>Y=vbkkV{Jlbo@0^NL&m<;>H~bU#e)9V|V}ZSm{>X z%pcSZ-d{0zdoQpz*Gyl`*+O^UW@8ykj&&h|Hza0gty+EN_Vz8?UcFAZ)u!-9;fz?x h&5Li!=Vbm8KJ~@O#mOV!h`?- literal 0 HcmV?d00001 diff --git a/images/zoomin-guess/lnx.jpg b/images/zoomin-guess/lnx.jpg new file mode 100644 index 0000000000000000000000000000000000000000..f0b78c635ab568e87e7deb95567a7e9b69f85709 GIT binary patch literal 1236 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 literal 0 HcmV?d00001 diff --git a/navigation/create_and_compete/scripted.js b/navigation/create_and_compete/scripted.js index 195c6fc9..8dbe705c 100644 --- a/navigation/create_and_compete/scripted.js +++ b/navigation/create_and_compete/scripted.js @@ -3,8 +3,7 @@ const imageList = [ "zoomed-image1.jpg", "zoomed-image2.jpg", "zoomed-image3.jpg" - - + // Add more image URLs as needed ]; diff --git a/navigation/create_and_compete/zoominguess-ui.md b/navigation/create_and_compete/zoominguess-ui.md index 4e7f5070..7a8e8435 100644 --- a/navigation/create_and_compete/zoominguess-ui.md +++ b/navigation/create_and_compete/zoominguess-ui.md @@ -18,11 +18,11 @@ author: Arhaan, Akshaj, Mihir, Keerthan
- -
- - Zoomed Image -
+ +
+ + Zoomed Image +
@@ -62,11 +62,11 @@ author: Arhaan, Akshaj, Mihir, Keerthan @@ -90,18 +90,17 @@ author: Arhaan, Akshaj, Mihir, Keerthan } - .zoom-image-section, - .guess-box, - .explanation-box, - #feedback-section, - #leaderboard-section { - margin-top: 20px; - padding: 15px; - background-color: #fff; - border-radius: 8px; - box-shadow: 0 4px 6px rgba(0, 0, 255, 0.2); /* Blue shadow for sections */ - } - + .zoom-image-section, + .guess-box, + .explanation-box, + #feedback-section, + #leaderboard-section { + margin-top: 20px; + padding: 15px; + background-color: #fff; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 255, 0.2); /* Blue shadow for sections */ + } .zoom-image-box { display: inline-block; @@ -109,28 +108,25 @@ author: Arhaan, Akshaj, Mihir, Keerthan } - .zoom-image { - max-width: 100%; - border-radius: 8px; - } + .zoom-image { + max-width: 100%; + border-radius: 8px; + } + .submit-button { + background-color: #007bff; + color: #fff; + padding: 10px 20px; + border: none; + border-radius: 8px; + cursor: pointer; + box-shadow: 0 4px 6px rgba(0, 0, 255, 0.3); /* Blue shadow for buttons */ + transition: box-shadow 0.3s ease; + } - .submit-button { - background-color: #007bff; - color: #fff; - padding: 10px 20px; - border: none; - border-radius: 8px; - cursor: pointer; - box-shadow: 0 4px 6px rgba(0, 0, 255, 0.3); /* Blue shadow for buttons */ - transition: box-shadow 0.3s ease; - } - - - .submit-button:hover { - box-shadow: 0 6px 12px rgba(0, 0, 255, 0.4); /* Stronger shadow on hover */ - } - + .submit-button:hover { + box-shadow: 0 6px 12px rgba(0, 0, 255, 0.4); /* Stronger shadow on hover */ + } .modal { display: none; @@ -145,28 +141,26 @@ author: Arhaan, Akshaj, Mihir, Keerthan } - .modal-content { - background-color: #fefefe; - margin: auto; - padding: 20px; - border-radius: 10px; - box-shadow: 0 4px 8px rgba(0, 0, 255, 0.3); /* Blue shadow for modal */ - width: 80%; - max-width: 500px; - text-align: center; - } - - - .close-button { - color: #aaa; - float: right; - font-size: 28px; - font-weight: bold; - cursor: pointer; - } - - - .close-button:hover { - color: #000; - } - + .modal-content { + background-color: #fefefe; + margin: auto; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 255, 0.3); /* Blue shadow for modal */ + width: 80%; + max-width: 500px; + text-align: center; + } + + .close-button { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; + cursor: pointer; + } + + .close-button:hover { + color: #000; + } + \ No newline at end of file From 9574a6ddafb9bdfe48c74715fc5161a2134c97d1 Mon Sep 17 00:00:00 2001 From: Akshaj-G Date: Thu, 31 Oct 2024 23:15:52 -0700 Subject: [PATCH 2/7] change --- images/zoomin-guess/{einstien.jpg => einstein.jpg} | Bin navigation/create_and_compete/scripted.js | 8 +++++--- navigation/create_and_compete/zoominguess-ui.md | 2 +- 3 files changed, 6 insertions(+), 4 deletions(-) rename images/zoomin-guess/{einstien.jpg => einstein.jpg} (100%) diff --git a/images/zoomin-guess/einstien.jpg b/images/zoomin-guess/einstein.jpg similarity index 100% rename from images/zoomin-guess/einstien.jpg rename to images/zoomin-guess/einstein.jpg diff --git a/navigation/create_and_compete/scripted.js b/navigation/create_and_compete/scripted.js index 8dbe705c..c7f10b9b 100644 --- a/navigation/create_and_compete/scripted.js +++ b/navigation/create_and_compete/scripted.js @@ -1,8 +1,10 @@ // Array of zoomed-in image URLs const imageList = [ - "zoomed-image1.jpg", - "zoomed-image2.jpg", - "zoomed-image3.jpg" + "einstein.jpg", + "kanye.jpg", + "lnx.jpg", + "ryangosling.jpg", + "tombrady.jpg" // Add more image URLs as needed ]; diff --git a/navigation/create_and_compete/zoominguess-ui.md b/navigation/create_and_compete/zoominguess-ui.md index 7a8e8435..14e2158e 100644 --- a/navigation/create_and_compete/zoominguess-ui.md +++ b/navigation/create_and_compete/zoominguess-ui.md @@ -21,7 +21,7 @@ author: Arhaan, Akshaj, Mihir, Keerthan
- Zoomed Image + Zoomed Image
From 37427342988efa68f719b2a71f676ead5ac9edd3 Mon Sep 17 00:00:00 2001 From: Akshaj-G Date: Thu, 31 Oct 2024 23:24:17 -0700 Subject: [PATCH 3/7] minor changes- zoom n guess --- .../create_and_compete/zoominguess-ui.md | 189 +++++++++++------- 1 file changed, 117 insertions(+), 72 deletions(-) diff --git a/navigation/create_and_compete/zoominguess-ui.md b/navigation/create_and_compete/zoominguess-ui.md index 14e2158e..dd99214e 100644 --- a/navigation/create_and_compete/zoominguess-ui.md +++ b/navigation/create_and_compete/zoominguess-ui.md @@ -1,97 +1,101 @@ --- -layout: post +layout: post title: Create and Compete - Zoominguess UI search_exclude: true permalink: /create_and_compete/zoominguess/ui author: Arhaan, Akshaj, Mihir, Keerthan --- - - + -
-

Zoom N Guess

-

Look at the closely zoomed-in image below and guess who it is. Explain why you think it's that person!

- +

Zoom N Guess

+

Look at the closely zoomed-in image below and guess who it is. Explain why you think it's that person!

- Zoomed Image + Zoomed Image
-
- - + +
-
- - + +
- -
-

Your Feedback

-
Your guess and explanation will appear here after submission.
+

Your Feedback

+
Your guess and explanation will appear here after submission.
-
-

Top Guessers

-
    - -
+

Top Guessers

+
    + +
-
- \ No newline at end of file + +#feedback-section .info-box { + font-size: 1.5em; /* Make the font size larger */ + color: #333333; /* Dark grey text color for all modal content */ + text-shadow: 1px 1px 5px rgba(0, 0, 255, 0.4); /* Blue text shadow */ +} + + + + + From 78a2c77ccf42a3827cf13a38dcccdf01512b8bca Mon Sep 17 00:00:00 2001 From: ArhaanM123! Date: Thu, 31 Oct 2024 23:24:38 -0700 Subject: [PATCH 4/7] swited the placement of the files --- navigation/create_and_compete/zoom-n-guess.md | 167 ++++++++++++++++++ 1 file changed, 167 insertions(+) diff --git a/navigation/create_and_compete/zoom-n-guess.md b/navigation/create_and_compete/zoom-n-guess.md index 7049a0b4..9a355c01 100644 --- a/navigation/create_and_compete/zoom-n-guess.md +++ b/navigation/create_and_compete/zoom-n-guess.md @@ -51,3 +51,170 @@ author: Arhaan, Mihir, Keerthan, and Akshaj + + + + + +
+

Zoom N Guess

+

Look at the closely zoomed-in image below and guess who it is. Explain why you think it's that person!

+ + + +
+ +
+ + Zoomed Image +
+
+ + + +
+ + +
+ + + +
+ + +
+ + + + + + + +
+

Your Feedback

+
Your guess and explanation will appear here after submission.
+
+ + + +
+

Top Guessers

+
    + +
+
+ + + + +
+ + + + + + From 6af4585c66fe6ce8f4697b88aaaa8fd3151cd974 Mon Sep 17 00:00:00 2001 From: ArhaanM123! Date: Thu, 31 Oct 2024 23:25:48 -0700 Subject: [PATCH 5/7] placement of the files is different --- navigation/create_and_compete/zoom-n-guess.md | 300 ++++++++++-------- .../create_and_compete/zoominguess-ui.md | 211 ------------ 2 files changed, 167 insertions(+), 344 deletions(-) delete mode 100644 navigation/create_and_compete/zoominguess-ui.md diff --git a/navigation/create_and_compete/zoom-n-guess.md b/navigation/create_and_compete/zoom-n-guess.md index 9a355c01..bdc95d5d 100644 --- a/navigation/create_and_compete/zoom-n-guess.md +++ b/navigation/create_and_compete/zoom-n-guess.md @@ -52,169 +52,203 @@ author: Arhaan, Mihir, Keerthan, and Akshaj - + -
-

Zoom N Guess

-

Look at the closely zoomed-in image below and guess who it is. Explain why you think it's that person!

- +

Zoom N Guess

+

Look at the closely zoomed-in image below and guess who it is. Explain why you think it's that person!

- -
- - Zoomed Image -
+ +
+ + Zoomed Image +
-
- - + +
-
- - + +
- -
-

Your Feedback

-
Your guess and explanation will appear here after submission.
+

Your Feedback

+
Your guess and explanation will appear here after submission.
-
-

Top Guessers

-
    - -
+

Top Guessers

+
    + +
-
- - - - + .zoomnguess-container { + font-family: Arial, sans-serif; + margin: 0 auto; + padding: 20px; + max-width: 800px; + text-align: center; + box-shadow: 0 4px 8px rgba(0, 0, 255, 0.2); /* Blue shadow for main container */ + border-radius: 10px; + } + + h1 { + font-size: 2em; + color: #333; + text-shadow: 1px 1px 5px rgba(0, 0, 255, 0.4); /* Blue shadow for heading */ + } + + .guess-box label { + font-size: 1.5em; /* Make the font size larger */ + color: #333333; /* Dark grey color */ + text-shadow: 1px 1px 5px rgba(0, 0, 255, 0.4); /* Blue shadow for label */ + } + + .explanation-box label { + font-size: 1.5em; /* Make the font size larger */ + color: #333333; /* Dark grey color */ + text-shadow: 1px 1px 5px rgba(0, 0, 255, 0.4); /* Blue shadow for label */ + } + + .submit-button { + font-size: 1.5em; /* Make the font size larger */ + color: #333333; /* Dark grey color */ + text-shadow: 1px 1px 5px rgba(0, 0, 255, 0.4); /* Blue shadow for label */ + } + .zoom-image-section, + .explanation-box, + #feedback-section, + #leaderboard-section { + margin-top: 20px; + padding: 15px; + background-color: #fff; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 255, 0.2); /* Blue shadow for sections */ + } + + .zoom-image-box { + display: inline-block; + box-shadow: 0 4px 8px rgba(0, 0, 255, 0.3); /* Blue shadow for image box */ + } + + .zoom-image { + max-width: 100%; + border-radius: 8px; + } + .submit-button label { + font-size: 1.5em; /* Make the font size larger */ + color: #333333; /* Dark grey color */ + text-shadow: 1px 1px 5px rgba(0, 0, 255, 0.4); /* Blue shadow for label */ + } + .submit-button { + font-size: 1.5em; /* Increase font size */ + color: #333333; /* Dark grey text color */ + text-shadow: 1px 1px 5px rgba(0, 0, 255, 0.4); /* Blue shadow for text */ + background-color: #007bff; /* Button background color (optional) */ + padding: 10px 20px; /* Add padding for better appearance */ + border: none; + border-radius: 8px; + cursor: pointer; + box-shadow: 0 4px 6px rgba(0, 0, 255, 0.3); /* Blue shadow around button */ + transition: box-shadow 0.3s ease; + } + + .submit-button:hover { + box-shadow: 0 6px 12px rgba(0, 0, 255, 0.4); /* Stronger shadow on hover */ + } + + .modal { + display: none; + position: fixed; + z-index: 1; + padding-top: 60px; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + } + + .modal-content { + background-color: #fefefe; + margin: auto; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 255, 0.3); /* Blue shadow for modal */ + width: 80%; + max-width: 500px; + text-align: center; + text-shadow: 1px 1px 5px rgba(0, 0, 255, 0.4); /* Blue shadow effect */ + } + + .close-button { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; + cursor: pointer; + } + #feedback-modal .modal-content { + font-size: 1.5em; /* Make the font size larger */ + color: #333333; /* Dark grey text color for all modal content */ + text-shadow: 1px 1px 5px rgba(0, 0, 255, 0.4); /* Blue text shadow */ +} + +#feedback-modal h2 { + font-size: 2em; /* Larger font size for the heading */ + color: #333333; /* Dark grey text color */ + text-shadow: 1px 1px 5px rgba(0, 0, 255, 0.4); /* Blue text shadow for heading */ +} + +#feedback-modal p { + font-size: 1.2em; /* Slightly larger font size for paragraph text */ + color: #333333; /* Dark grey text color */ + text-shadow: 1px 1px 5px rgba(0, 0, 255, 0.4); /* Blue text shadow for paragraph */ +} + +#feedback-modal .close-button { + font-size: 1.5em; /* Font size for the close button */ + color: #333333; /* Dark grey text color */ + text-shadow: 1px 1px 5px rgba(0, 0, 255, 0.4); /* Blue text shadow for close button */ + cursor: pointer; /* Pointer cursor for better interactivity */ +} + +.info-box label { + font-size: 1.5em; /* Make the font size larger */ + color: #333333; /* Dark grey color */ + text-shadow: 1px 1px 5px rgba(0, 0, 255, 0.4); /* Blue shadow for label */ + } + +#feedback-section .info-box { + font-size: 1.5em; /* Make the font size larger */ + color: #333333; /* Dark grey text color for all modal content */ + text-shadow: 1px 1px 5px rgba(0, 0, 255, 0.4); /* Blue text shadow */ +} + + \ No newline at end of file diff --git a/navigation/create_and_compete/zoominguess-ui.md b/navigation/create_and_compete/zoominguess-ui.md deleted file mode 100644 index dd99214e..00000000 --- a/navigation/create_and_compete/zoominguess-ui.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -layout: post -title: Create and Compete - Zoominguess UI -search_exclude: true -permalink: /create_and_compete/zoominguess/ui -author: Arhaan, Akshaj, Mihir, Keerthan ---- - - - - -
-

Zoom N Guess

-

Look at the closely zoomed-in image below and guess who it is. Explain why you think it's that person!

- - -
- -
- - Zoomed Image -
-
- - -
- - -
- - -
- - -
- - - - - -
-

Your Feedback

-
Your guess and explanation will appear here after submission.
-
- - -
-

Top Guessers

-
    - -
-
- - - -
- - - - - From e2889eb95d9afb93576bf3fec4e0bde752fc4abb Mon Sep 17 00:00:00 2001 From: ArhaanM123! Date: Thu, 31 Oct 2024 23:28:46 -0700 Subject: [PATCH 6/7] made the format different --- navigation/create_and_compete/zoom-n-guess.md | 199 ++++++++---------- 1 file changed, 84 insertions(+), 115 deletions(-) diff --git a/navigation/create_and_compete/zoom-n-guess.md b/navigation/create_and_compete/zoom-n-guess.md index bdc95d5d..e9c3b7c9 100644 --- a/navigation/create_and_compete/zoom-n-guess.md +++ b/navigation/create_and_compete/zoom-n-guess.md @@ -8,9 +8,6 @@ author: Arhaan, Mihir, Keerthan, and Akshaj --- -Zoominguess UI - -
@@ -59,88 +56,73 @@ author: Arhaan, Mihir, Keerthan, and Akshaj

Zoom N Guess

Look at the closely zoomed-in image below and guess who it is. Explain why you think it's that person!

- -
- -
- - Zoomed Image + +
+ +
+ + Zoomed Image +
-
- -
- - -
+ +
+ + +
- -
- - -
+ +
+ + +
- - + + - -
-

Your Feedback

-
Your guess and explanation will appear here after submission.
-
+ +
+

Your Feedback

+
Your guess and explanation will appear here after submission.
+
- -
-

Top Guessers

-
    - -
-
- - - \ No newline at end of file + #feedback-modal p { + font-size: 1.2em; + color: #333; + text-shadow: 1px 1px 5px rgba(0, 0, 255, 0.4); + } + From f23d3921b489214c30cc820f1a686ccd5335440b Mon Sep 17 00:00:00 2001 From: ArhaanM123! Date: Fri, 1 Nov 2024 00:00:23 -0700 Subject: [PATCH 7/7] changed format and added different colors --- navigation/create_and_compete/scripted.js | 60 ++-- navigation/create_and_compete/zoom-n-guess.md | 281 ++++++++++-------- navigation/create_and_compete/zoominguess.css | 208 ++++++------- 3 files changed, 284 insertions(+), 265 deletions(-) diff --git a/navigation/create_and_compete/scripted.js b/navigation/create_and_compete/scripted.js index c7f10b9b..8b8486bc 100644 --- a/navigation/create_and_compete/scripted.js +++ b/navigation/create_and_compete/scripted.js @@ -5,13 +5,11 @@ const imageList = [ "lnx.jpg", "ryangosling.jpg", "tombrady.jpg" - // Add more image URLs as needed - ]; - - - // Wait for the DOM to load before accessing elements - document.addEventListener("DOMContentLoaded", function() { +]; + +// Wait for the DOM to load before accessing elements +document.addEventListener("DOMContentLoaded", function() { // Elements const zoomedImage = document.getElementById("zoomed-image"); const generateImageButton = document.getElementById("generate-image"); @@ -21,62 +19,54 @@ const imageList = [ const feedbackDisplay = document.getElementById("feedback-display"); const feedbackModal = document.getElementById("feedback-modal"); const closeButton = document.querySelector(".close-button"); - - - // Generate Random Image + + // Generate a random image on button click generateImageButton.addEventListener("click", function() { const randomIndex = Math.floor(Math.random() * imageList.length); const selectedImage = imageList[randomIndex]; zoomedImage.src = selectedImage; - zoomedImage.alt = "Zoomed in image for guessing"; + zoomedImage.alt = "Zoomed-in image for guessing"; feedbackDisplay.innerHTML = ""; // Clear previous feedback on new image generation }); - - - // Submit Guess and Reasoning + + // Handle guess submission submitGuessButton.addEventListener("click", function() { const guess = guessInput.value.trim(); const reasoning = reasoningInput.value.trim(); - - + + // Check for valid input if (guess === "" || reasoning === "") { alert("Please enter both your guess and reasoning."); return; } - - + // Display the guess and reasoning feedbackDisplay.innerHTML = `

Your Guess:

Guess: ${guess}

Reasoning: ${reasoning}

`; - - - // Show modal confirmation + + // Show confirmation modal feedbackModal.style.display = "block"; - - + // Reset input fields guessInput.value = ""; reasoningInput.value = ""; }); - - - // Close Modal + + // Close modal on close button click closeButton.addEventListener("click", function() { feedbackModal.style.display = "none"; }); - - - // Close Modal when clicking outside of it + + // Close modal when clicking outside the modal content window.addEventListener("click", function(event) { - if (event.target == feedbackModal) { + if (event.target === feedbackModal) { feedbackModal.style.display = "none"; } }); - - + // Placeholder function to update the leaderboard const leaderboard = document.getElementById("leaderboard"); function updateLeaderboard(name) { @@ -84,9 +74,7 @@ const imageList = [ listItem.textContent = name; leaderboard.appendChild(listItem); } - - - // Example of adding a name to leaderboard (testing purpose) + + // Example of adding a name to leaderboard (for testing purposes) // updateLeaderboard("Top Guesser #1"); - }); - \ No newline at end of file +}); diff --git a/navigation/create_and_compete/zoom-n-guess.md b/navigation/create_and_compete/zoom-n-guess.md index e9c3b7c9..838f5103 100644 --- a/navigation/create_and_compete/zoom-n-guess.md +++ b/navigation/create_and_compete/zoom-n-guess.md @@ -8,121 +8,95 @@ author: Arhaan, Mihir, Keerthan, and Akshaj --- -
- - -
- Room Details - Moderation Rules - - - - - - - - -

The main purpose of our Zoom-In Guess room is to have people think critically and collaborate with other members of the channel to identify the image as fast as possible.

- - -

Room will consist of:

-
    -
  • **Daily zoomed-in image** that can be optionally pinned to the top of the channel
    • -
  • **Guessing opportunity throughout the day** with the image slowly zooming out if too hard
    • -
  • **Chat box** where channel members can discuss and collaborate on their guesses
    • -
  • **AI assistance** that posts hints if needed and reveals the answer at the end of the day
    • -
  • **Profanity filter** to keep the conversation friendly and inclusive
    • -
- - -
- Additional Interactive Features -
    -
  • **Mini Game - "Guess the Zoom":** Players try to guess the object or person from a zoomed-in image, with clues if needed.
    • -
  • **Posts and Comments:** Members can post their own zoomed-in pictures for others to guess and discuss in the comments.
    • -
  • **Rate and Relate Theme:** After guessing, players rate the difficulty of the image, and connect with others on their similar or differing guesses.
    • -
- - -

This interactive setup makes the game fun, challenging, and a great way to start conversations about perception and recognition!

-
- - - - +

Zoom N Guess

Look at the closely zoomed-in image below and guess who it is. Explain why you think it's that person!

- -
- -
- - Zoomed Image -
+ +
+ +
+ + Zoomed Image
+
- -
- - -
+ +
+ + +
- -
- - -
+ +
+ + +
- - + + - -
-

Your Feedback

-
Your guess and explanation will appear here after submission.
-
+ +
+

Your Feedback

+
Your guess and explanation will appear here after submission.
+
- -
-

Top Guessers

-
    - -
-
- - - + + + +
+ + +
+ Room Details + Moderation Rules + + + + + + + + +

The main purpose of our Zoom-In Guess room is to have people think critically and collaborate with other members of the channel to identify the image as fast as possible.

+ + +

Room will consist of:

+
    +
  • **Daily zoomed-in image** that can be optionally pinned to the top of the channel
    • +
  • **Guessing opportunity throughout the day** with the image slowly zooming out if too hard
    • +
  • **Chat box** where channel members can discuss and collaborate on their guesses
    • +
  • **AI assistance** that posts hints if needed and reveals the answer at the end of the day
    • +
  • **Profanity filter** to keep the conversation friendly and inclusive
    • +
+ + +
+ Additional Interactive Features +
    +
  • **Mini Game - "Guess the Zoom":** Players try to guess the object or person from a zoomed-in image, with clues if needed.
    • +
  • **Posts and Comments:** Members can post their own zoomed-in pictures for others to guess and discuss in the comments.
    • +
  • **Rate and Relate Theme:** After guessing, players rate the difficulty of the image, and connect with others on their similar or differing guesses.
    • +
+ + +

This interactive setup makes the game fun, challenging, and a great way to start conversations about perception and recognition!

+
+ + + diff --git a/navigation/create_and_compete/zoominguess.css b/navigation/create_and_compete/zoominguess.css index 4da57739..8328e376 100644 --- a/navigation/create_and_compete/zoominguess.css +++ b/navigation/create_and_compete/zoominguess.css @@ -3,33 +3,29 @@ width: 80%; max-width: 600px; background-color: #ffffff; - border: 2px solid #ccc; + border: 2px solid #007BFF; border-radius: 10px; padding: 20px; - box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); + box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); margin: 20px auto; text-align: center; - color: #333; /* Dark text color */ - } - - - h1, h2 { - color: #333; /* Dark color for headings */ - } - - - p, label, .info-box, .leaderboard-box li { - color: #333; /* Dark color for main text content */ - } - - - /* Zoom Image Display Section */ - .zoom-image-section { + color: #007BFF; /* Text color to contrast with light background */ +} + +h1, h2 { + color: #007BFF; /* Standout color for headings */ +} + +p, label, .info-box, .leaderboard-box li { + color: #555; /* Slightly dark color for main text content */ +} + +/* Zoom Image Display Section */ +.zoom-image-section { margin-bottom: 15px; - } - - - .zoom-image-box { +} + +.zoom-image-box { border: 2px solid #007BFF; border-radius: 8px; padding: 10px; @@ -38,59 +34,64 @@ align-items: center; height: 200px; background-color: #f9f9f9; - color: #333; /* Dark color for text inside the box */ - } - - - .zoom-image { +} + +.zoom-image { max-width: 100%; max-height: 100%; border-radius: 5px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15); - } - - - /* Guess Input Box */ - .guess-box { +} + +/* Guess Input Box */ +.guess-box { width: 100%; padding: 10px; margin-top: 10px; margin-bottom: 10px; - } - - - .guess-box input { +} + +.guess-box input { width: 100%; padding: 10px; font-size: 16px; - border: 1px solid #007BFF; + border: 2px solid #007BFF; border-radius: 5px; - color: #333; /* Dark text color inside input fields */ - } - - - /* Explanation Box */ - .explanation-box { + color: #007BFF; /* Text color to stand out against white */ + background-color: #f9f9f9; + transition: border-color 0.3s ease; +} + +.guess-box input:focus { + border-color: #0056b3; +} + +/* Explanation Box */ +.explanation-box { width: 100%; margin-top: 10px; margin-bottom: 10px; - } - - - .explanation-box textarea { +} + +.explanation-box textarea { width: 100%; padding: 10px; font-size: 16px; - border: 1px solid #28A745; + border: 2px solid #28A745; border-radius: 5px; resize: vertical; height: 80px; - color: #333; /* Dark text color for textarea */ - } - - - /* Submit Button */ - .submit-button { + color: #28A745; + background-color: #f9f9f9; + transition: border-color 0.3s ease; +} + +.explanation-box textarea:focus { + border-color: #218838; +} + +/* Submit Button */ +.submit-button { width: 100%; background-color: #007BFF; color: #ffffff; @@ -99,35 +100,35 @@ border: none; border-radius: 5px; cursor: pointer; - transition: background-color 0.3s; + transition: background-color 0.3s, transform 0.2s; margin-top: 10px; - } - - - .submit-button:hover { + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); +} + +.submit-button:hover { background-color: #0056b3; - } - - - /* Feedback Section */ - #feedback-section { + transform: scale(1.03); + box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15); +} + +/* Feedback Section */ +#feedback-section { margin-top: 20px; - } - - - .info-box { +} + +#feedback-display { width: 100%; padding: 15px; margin-top: 10px; border: 1px solid #ccc; border-radius: 5px; - background-color: #f9f9f9; - color: #333; /* Ensures text inside info-box is dark */ - } - - - /* Leaderboard Styling */ - .leaderboard-box { + background-color: #e6d6d6; + color: #d9534f; /* Red color for feedback text */ + font-weight: bold; +} + +/* Leaderboard Styling */ +.leaderboard-box { list-style-type: none; padding: 0; border: 1px solid #ccc; @@ -135,18 +136,20 @@ background-color: #f9f9f9; padding: 10px; margin-top: 10px; - } - - - .leaderboard-box li { +} + +.leaderboard-box li { padding: 5px 0; border-bottom: 1px solid #e0e0e0; - color: #333; /* Dark text for leaderboard items */ - } - - - /* Modal Styling */ - .modal { + color: #333; +} + +.leaderboard-box li:hover { + background-color: rgba(0, 123, 255, 0.1); +} + +/* Modal Styling */ +.modal { display: none; position: fixed; z-index: 1; @@ -154,35 +157,32 @@ top: 0; width: 100%; height: 100%; - background-color: rgba(0, 0, 0, 0.4); + background-color: rgba(0, 0, 0, 0.5); padding-top: 60px; - } - - - .modal-content { - background-color: #fefefe; +} + +.modal-content { + background-color: #ffffff; margin: 5% auto; padding: 20px; - border: 1px solid #888; + border: 2px solid #007BFF; width: 80%; max-width: 500px; border-radius: 10px; - box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); + box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3); text-align: center; color: #333; /* Dark text color for modal content */ - } - - - .close-button { +} + +.close-button { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; - } - - - .close-button:hover { - color: #000; - } - \ No newline at end of file + transition: color 0.3s ease; +} + +.close-button:hover { + color: #007BFF; +}