From 0894ef9d035476469a1472566929651be8ce77cc Mon Sep 17 00:00:00 2001 From: Steven Tracey Date: Tue, 30 May 2023 16:17:58 -0400 Subject: [PATCH] UI! --- .idea/inspectionProfiles/Project_Default.xml | 5 + darkmode.css | 229 ++++++++ darkmode.js | 35 ++ favicon.ico | Bin 0 -> 32988 bytes index.html | 70 +-- install/index.html | 58 ++ prod/favicon.ico | Bin 0 -> 32988 bytes prod/index.html | 119 ++++ prod/logo.png | Bin 0 -> 2216 bytes prod/script.js | 160 ++++++ prod/stylesheet.css | 538 +++++++++++++++++++ script.js | 40 +- stylesheet.css | 420 ++++----------- 13 files changed, 1308 insertions(+), 366 deletions(-) create mode 100644 darkmode.css create mode 100644 darkmode.js create mode 100644 favicon.ico create mode 100644 install/index.html create mode 100644 prod/favicon.ico create mode 100644 prod/index.html create mode 100644 prod/logo.png create mode 100644 prod/script.js create mode 100644 prod/stylesheet.css diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml index be1b0f0..deda917 100644 --- a/.idea/inspectionProfiles/Project_Default.xml +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -12,5 +12,10 @@ + + + + + \ No newline at end of file diff --git a/darkmode.css b/darkmode.css new file mode 100644 index 0000000..9bcd48c --- /dev/null +++ b/darkmode.css @@ -0,0 +1,229 @@ +/* Default */ +.theme { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-tap-highlight-color: transparent; +} +.icon, +.toggle { + z-index: 1; +} +.icon, +.icon-part { + position: absolute; +} +.icon { + display: block; + top: 0.75em; + left: 0.75em; + width: 1.5em; + height: 1.5em; + -webkit-transition: var(--trans-dur); + transition: var(--trans-dur); +} +.icon-part { + border-radius: 50%; + -webkit-box-shadow: 0.4em -0.4em 0 0.5em var(--white) inset; + box-shadow: 0.4em -0.4em 0 0.5em var(--white) inset; + top: calc(50% - 0.5em); + left: calc(50% - 0.5em); + width: 1em; + height: 1em; + -webkit-transition: opacity var(--trans-dur) ease-in-out, + -webkit-box-shadow var(--trans-dur) ease-in-out, + -webkit-transform var(--trans-dur) ease-in-out; + transition: opacity var(--trans-dur) ease-in-out, + -webkit-box-shadow var(--trans-dur) ease-in-out, + -webkit-transform var(--trans-dur) ease-in-out; + transition: box-shadow var(--trans-dur) ease-in-out, + opacity var(--trans-dur) ease-in-out, + transform var(--trans-dur) ease-in-out; + transition: box-shadow var(--trans-dur) ease-in-out, + opacity var(--trans-dur) ease-in-out, + transform var(--trans-dur) ease-in-out, + -webkit-box-shadow var(--trans-dur) ease-in-out, + -webkit-transform var(--trans-dur) ease-in-out; + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); +} +.icon-part ~ .icon-part { + background-color: var(--white); + border-radius: 0.05em; + top: 50%; + left: calc(50% - 0.05em); + -webkit-transform: rotate(0deg) translateY(0.5em); + -ms-transform: rotate(0deg) translateY(0.5em); + transform: rotate(0deg) translateY(0.5em); + -webkit-transform-origin: 50% 0; + -ms-transform-origin: 50% 0; + transform-origin: 50% 0; + width: 0.1em; + height: 0.2em; +} +.icon-part:nth-child(3) { + -webkit-transform: rotate(45deg) translateY(0.45em); + -ms-transform: rotate(45deg) translateY(0.45em); + transform: rotate(45deg) translateY(0.45em); +} +.icon-part:nth-child(4) { + -webkit-transform: rotate(90deg) translateY(0.45em); + -ms-transform: rotate(90deg) translateY(0.45em); + transform: rotate(90deg) translateY(0.45em); +} +.icon-part:nth-child(5) { + -webkit-transform: rotate(135deg) translateY(0.45em); + -ms-transform: rotate(135deg) translateY(0.45em); + transform: rotate(135deg) translateY(0.45em); +} +.icon-part:nth-child(6) { + -webkit-transform: rotate(180deg) translateY(0.45em); + -ms-transform: rotate(180deg) translateY(0.45em); + transform: rotate(180deg) translateY(0.45em); +} +.icon-part:nth-child(7) { + -webkit-transform: rotate(225deg) translateY(0.45em); + -ms-transform: rotate(225deg) translateY(0.45em); + transform: rotate(225deg) translateY(0.45em); +} +.icon-part:nth-child(8) { + -webkit-transform: rotate(270deg) translateY(0.5em); + -ms-transform: rotate(270deg) translateY(0.5em); + transform: rotate(270deg) translateY(0.5em); +} +.icon-part:nth-child(9) { + -webkit-transform: rotate(315deg) translateY(0.5em); + -ms-transform: rotate(315deg) translateY(0.5em); + transform: rotate(315deg) translateY(0.5em); +} +.label, +.toggle, +.toggle-wrap { + position: relative; +} +.toggle, +.toggle:before { + display: block; +} +.toggle { + background-color: hsl(48,90%,85%); + border-radius: 25% / 50%; + -webkit-box-shadow: 0 0 0 0.125em var(--secondary); + box-shadow: 0 0 0 0.125em var(--secondary); + padding: 0.25em !important; + width: 6em; + height: 3em; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + -webkit-transition: background-color var(--trans-dur) ease-in-out, + -webkit-box-shadow 0.15s ease-in-out, + -webkit-transform var(--trans-dur) ease-in-out; + transition: background-color var(--trans-dur) ease-in-out, + -webkit-box-shadow 0.15s ease-in-out, + -webkit-transform var(--trans-dur) ease-in-out; + transition: background-color var(--trans-dur) ease-in-out, + box-shadow 0.15s ease-in-out, + transform var(--trans-dur) ease-in-out; + transition: background-color var(--trans-dur) ease-in-out, + box-shadow 0.15s ease-in-out, + transform var(--trans-dur) ease-in-out, + -webkit-box-shadow 0.15s ease-in-out, + -webkit-transform var(--trans-dur) ease-in-out; +} +.toggle:before { + background-color: var(--yellow); + border-radius: 50%; + content: ""; + width: 2.5em; + height: 2.5em; + -webkit-transition: 0.3s; + transition: 0.3s; +} +.toggle:focus { + -webkit-box-shadow: 0 0 0 0.125em var(--theme-blue); + box-shadow: 0 0 0 0.125em var(--theme-blue); + outline: transparent; +} +/* Checked */ +.toggle:checked { + background-color: var(--theme-dark-blue); +} +.toggle:checked:before, +.toggle:checked ~ .icon { + -webkit-transform: translateX(3em); + -ms-transform: translateX(3em); + transform: translateX(3em); +} +.toggle:checked:before { + background-color: var(--theme-blue); +} +.toggle:checked ~ .icon .icon-part:nth-child(1) { + -webkit-box-shadow: 0.2em -0.2em 0 0.2em var(--white) inset; + box-shadow: 0.2em -0.2em 0 0.2em var(--white) inset; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + top: 0.25em; + left: 0.25em; +} +.toggle:checked ~ .icon .icon-part ~ .icon-part { + opacity: 0; +} +.toggle:checked ~ .icon .icon-part:nth-child(2) { + -webkit-transform: rotate(45deg) translateY(0.8em); + -ms-transform: rotate(45deg) translateY(0.8em); + transform: rotate(45deg) translateY(0.8em); +} +.toggle:checked ~ .icon .icon-part:nth-child(3) { + -webkit-transform: rotate(90deg) translateY(0.8em); + -ms-transform: rotate(90deg) translateY(0.8em); + transform: rotate(90deg) translateY(0.8em); +} +.toggle:checked ~ .icon .icon-part:nth-child(4) { + -webkit-transform: rotate(135deg) translateY(0.8em); + -ms-transform: rotate(135deg) translateY(0.8em); + transform: rotate(135deg) translateY(0.8em); +} +.toggle:checked ~ .icon .icon-part:nth-child(5) { + -webkit-transform: rotate(180deg) translateY(0.8em); + -ms-transform: rotate(180deg) translateY(0.8em); + transform: rotate(180deg) translateY(0.8em); +} +.toggle:checked ~ .icon .icon-part:nth-child(6) { + -webkit-transform: rotate(225deg) translateY(0.8em); + -ms-transform: rotate(225deg) translateY(0.8em); + transform: rotate(225deg) translateY(0.8em); +} +.toggle:checked ~ .icon .icon-part:nth-child(7) { + -webkit-transform: rotate(270deg) translateY(0.8em); + -ms-transform: rotate(270deg) translateY(0.8em); + transform: rotate(270deg) translateY(0.8em); +} +.toggle:checked ~ .icon .icon-part:nth-child(8) { + -webkit-transform: rotate(315deg) translateY(0.8em); + -ms-transform: rotate(315deg) translateY(0.8em); + transform: rotate(315deg) translateY(0.8em); +} +.toggle:checked ~ .icon .icon-part:nth-child(9) { + -webkit-transform: rotate(360deg) translateY(0.8em); + -ms-transform: rotate(360deg) translateY(0.8em); + transform: rotate(360deg) translateY(0.8em); +} +.toggle-wrap { + margin: 0 0.75em; +} +@supports selector(:focus-visible) { + .toggle:focus { + -webkit-box-shadow: 0 0 0 0.125em var(--secondary); + box-shadow: 0 0 0 0.125em var(--secondary); + } + .toggle:focus-visible { + -webkit-box-shadow: 0 0 0 0.125em var(--theme-blue); + box-shadow: 0 0 0 0.125em var(--theme-blue); + } +} \ No newline at end of file diff --git a/darkmode.js b/darkmode.js new file mode 100644 index 0000000..d3dd910 --- /dev/null +++ b/darkmode.js @@ -0,0 +1,35 @@ +document.getElementById("theme").addEventListener("click", toggleDarkMode, false) + +refreshDarkMode() + +function toggleDarkMode() { + if (getCookie("darkMode") === "on") document.cookie = "darkMode=off"; + else document.cookie = "darkMode=on"; + refreshDarkMode(); +} + +function refreshDarkMode() { + let darkMode = getCookie("darkMode") === "on"; + if (darkMode) { + document.body.classList.add("dark-theme"); + document.getElementById("theme").checked = true; + } else { + if (document.body.classList.contains("dark-theme")) { + document.body.classList.remove("dark-theme"); + } + document.getElementById("theme").checked = false; + } +} + +function getCookie(cookieName) { + let cookieArray = document.cookie.split(";"); + for (let i = 0; i < cookieArray.length; i++) { + let cookie = cookieArray[i].split("="); + if (cookie[0].trim() === cookieName) { + return cookie[1]; + } + } + console.warn("Cookie \"" + cookieName + "\" does not exist"); + document.cookie = cookieName + "="; + return ""; +} \ No newline at end of file diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..a752343b9e2be380342bdd1125359661622c158a GIT binary patch literal 32988 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 literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 9b53a25..65d19ee 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,10 @@ - + + CAIU Signature Card + \ No newline at end of file diff --git a/install/index.html b/install/index.html new file mode 100644 index 0000000..691025d --- /dev/null +++ b/install/index.html @@ -0,0 +1,58 @@ + + + + + + + + Install Card + + + +
+ + + +
+ +
+
+ + + + +
+
+

Signature Card Installation Guide

+
Fig
+

P

+
+
Sec
+
+ + + +
Made by the best intern!
+ + + \ No newline at end of file diff --git a/prod/favicon.ico b/prod/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..a752343b9e2be380342bdd1125359661622c158a GIT binary patch literal 32988 zcmeHP32joP3{XGTnu^lTJ#$A8s<0Uu7~)L_AA> zu*vl4^(NE#$b)32NAXbnSpACIn|>kmuC$4rff_#SS-}Ne0fe6jG5=yd-gr0H)p$u! z%yY)sO8BR0n=V%3hl!oONl0^<7!TYl#C%JB$m{)t?+iHko|f6>b)I9@JcSqvJag`!{*1|%0%NoS3Rm7fVg$ucM^AT^%+~ICAhuqCV#M{XS-Fw8| zl?vsRkakdBltuAkS97n>-Tdc5qg{@*93yr&eqi~$4Q*^x_@FEO6LKp;)W_0EpRH7g zX38T(y$X+SnevKVO-iDUrnkAxYmO`gJ``=OKT7Ou^vR#E&)D`%bPe~LWqX? z-s8vY-@iYM-M3`)JKxbTX7m%khzDH6`^x^Lo{xEMw~S%G4;m+!D{|jD1@d+7{@}rs zNb~7JXJ8lP^_cd1Di0EJ!@s>K-h|a~Y=3-*>jmQfSdaTu`l)WYf4yQ3yDP_%dUMQg z7CQZVG57ad->ZC}HgIv@x8_dod1J)`F64fh)?-q0{#b zTdy;%^JDl8`Xbf>&u%{CKXtTuz(+k#B<6hq^u5Ysk^?jbqP~YmlYY6S$4$s zJhfe87>eCZm;}jICysCE;YDl;NA9lM(l76P|#e93AV-!67OdpK;zT;v|=Z+K) z_=xYZ@i6w)F-dKOKJ?&-(61;H(C=#rr%}r<^pNH$7j`#~1pPu+V-aNPUSS-JeYIcM z9EiBTozm?+D_%T&uAFCpQrT*PP1oBpV`W?a%w>tNKoFkkw)sK+-R);;aG zq;(M3`ltEOKPg^+7_j=TLfr3Y>D9g`_Cub~EJZmeR~{4tSK~sS9Zat*ARSLjtKK{C zDOv;iihBG%&y{|0)2d0pdcH0stV54hy*S#ZVD9b|yH}l(EB#!s@l3wMT~Jt$9<6$D zY@ZhKe#!T@=8OsPJ*}rg_xZAr_k4P^QyiPKA@6oB>N_FV{y(q7`!me{O~QV}_|wrh zR6NOS?AhY^;z4}K+cKVXUzIOR2M&3Bx%R!94|wN`q)Vygj+c;hHX-b)Qt8Mwgipd; zvfGary47~FK8ty0=SsJlk9;)}xYz!-^{BKB6*Acu_IyS9i%Lg6As_U-Td=sVj$TG% zAN&8hd}vP1D@A>mNSlBw4dI_LRKJYL_pqD!ln4>u1*tUT`=1YaK1|sBa`$r}J%apy z2t%hnqVm{-|AgJsx4dks%nq~`{zVPT@}*asU+4{-!*}|34_g-iZbD;6g53mrsjp!} zSPgypb?DX4AbdoK`X9l#dKT-<8-z0fYx#y`7u$0VXS~4{%l15R-%dUrn5=F8NWAl5 zZz;o<$yZ5d-VKUFduR_zK1)JZU^(;=Yc}nYyIaoUJAF4HeS?_vkIKf!fW{W_Scv#% zjRdXf%7EY6Lxe9foj9G(5Ba8$eZ0Hb51MDDD{H8D_!0h=?`m3`5r07&utuXkv?=1d zZ>Tay;yc#E`&r)-CaS{&rhCL2t1qsvhc{;CpHy9XNpZDZNSBIR^U;xfSL3U?JV4zN z`Oo1&f83R>jM0ea!k#PP>)1v9C&Yg?_NhH&AC363vcZW?$92U^=YB6%*;ku@GiPci z)Ss%^RPLdsbEU<_45ULA4huh%~`eY&a#9BUsFIaEW1Jc&kwUFVj zW}?G1fBsJ_wT_AsqPg0xNEKFuHpQ~IOc5*XmuAWakFl_cudt=XD>9XxuFgV<=c=ve zTAXF;sNbp2*;8))UaTnnRIaiqQhBLT^5Q&2a@u@Fb+ZmFly>Lc4#+i2mGv@dv13cg z3v)qdvftTww+4mUvg5@nYmCM}eJgo|WP$y)yz4EH0%p8edV*YO|BCf3`dICIHvgUW zzfv=$YWt0;~xU4-yu9#c03h6t8UgoQblPi ztp{v;RNB~@V5zbFBj3skCBIy0eR&$jHXGw4`zvjWQrjj~J1(*;o&&x>7SNiI@}So7@}wp9!?fwg+q&)E{d24%_H=m?`~yc{N?``p&4ttcO}g^FJfN{bbAr|ksmdCbm(E>M zT$6eKkW%!x`72e~7SK4LJyPlz82AsJg7y#>EV~0blifLP2pdL2LHonS(4E;{DXBjX z(66o$BrmG%&km#5ah23kW4{J+uaD`;Nj)-^2TWcb!1PmRl~k9WX{jlDo92D-Qp|f* zPonkl0Pp|Q!D?AD=Nh@zzLNHn#0$bveoXWyc`-p=V!ukPbu5#ewjCENyB+I*qb8M4 zKbHUeQroGPrE^Q65BzSpG}Ao+lkv>NlkYtNIE#9w(B1Sr7x%9*hdg0m()B{f{XA?v zcjCDVz9fsdsJ8)On2Y+?@V(6o#0@JZq3XPUT+nl&(AC_}&WFQ}Mz$bnV@tx$Mz*%( zLv|(lMz%IOL(F#t`o#8z8TmATut*^m_?-FP>(~PZ*@aT=MueA>T{Y(GliG7Xv%zm@ zc$08=6&p`mUuxazf3(4p$eS6rO~W7|=qn~(0{0!-CZ^V@4Uw1n1ZS7TG}WYyhVAe* zW^2-xIm~w|!yIaODQ!hMAH;6&DX#(A`FdI`aH39Cx=~!jJ)&oF z*tr4BQ{BpRBKctbD!Ri#OG~crG&ku^44ta>i4tQ0j%+}AjXQ0hVI0E#{yq8p?^B^B z0%wfo6Tfn$HC;YdX2|`Jrn-Gz%^_DklQ&u#@_d&z;S6DiOBbI}8*v5hZeiy@<3rr_ zkwaUU-yVFfWu@g1wLWb)6?23SHS8JDV9RmZdewKjZvb-V%h9X9VW+TZ zHN%G0I#WYBhl~4SHV@kuBa8kJ(Wlh6)W@lHYX8G8*u~baEXqtb*7f3P{PE$2Pqg)E z-%0kdyEn2qgHL`W+4zzq*FxMYa;LUF?K|Cb1mDo@%;!YQ1GI_Rr^$~6_F8tw4Q%wx zc1u1QB)4?hEq3E>ps>5&+@0M$M_kZtmHWvTBgG$ud@oQhNg?c z{-|UR^7J&f!@uk5)NjN6PkzSo_O=^P|CH3c*qc007}kt8ZiP+58X#Mb`kl^I;_jU5 zi`wc&9KVBo=?t;j@!s^;ZdSx{>lUG+^xYY6VUJX4t5xeC%@Ek#>=|#~rVw5s!qy|# z-E@rTwC$e$`Yj5u%_m2*ZnbO?HmB)z;Ct0Tjd#Am6GiwuUFi)%LMl0l(*e3$Z z9%RE4Dy=IB&to`Ft>ZuD>e;7_R{eVAa^^cTV9xVKQQ%wniRkQIzPe*$f=1O)pEfJ=o}jEih2w> z%X-{X5`*5pB7qIK7STC9tUodOhP83NsjhB7M(Q+0HwyT|+r_(rY+p}0B&|aOdw$>m z6espJE0hMh(_6ZQq=|$~zuodhdv>}$)?dpP8?cVMZb?(zpy;BlZAY0q8n%(2sGdHg z7njsIwvcb&pu%)spa;y$WuLuvUN0@||cmchql7cNb)W z|G?L>EKi$`^wV_wCq7~P++o?iVIN(d_E4nH5~jo+{MWlDkMcr?zg6YAHl*{%*bA*? zbCGaG$QC*~z=gftke|@){r7O)t8e8au3Gp;_72?5gR~3}47yhjb^eX+U4=j8TFZ|1 zM4p&$0m&q_E&RvT0;rciEq=Lqa=9tZCGwwkVJ z{;Z>*8?PWcj`?3d=;i2xcOc&$J&H3E4Ufpul^~a&?7TO1q z?rT}%=!3p-xn9~_}c!Fue^#zX`s99 z%r-yj+QG-`X?P@lbhi$*pD?c^?@13N%!uJe)Nj-Vd}Fw5h_!!^evY$=e`Gc<>TA09 zCgcwDolP}dY-JVlMwz_}-zW_*>uc4jQ$wz!;Xbi{{ce))6hHl*(@wQKG4o>j552rv z>|3`RWAI*jPxqsB1i0iO^1|z83gy;5p}h24%TrfRrS#$kU)DB0vBFx8ef!7249X;@ zV-NTDtIkbVr(Qhy5SAqO)MAzGeL7zP|LZv<8}!m=io+Ups0A3xh40@DSu(qQs52_* z$|89Rzt?vTD8Ke}#2WDi2Mi7v956UwaKPYz!2yE<1_uld7#uJ-U~s_TfWZNS0|o~S n4j3FTIACzV;DEsag98Q!3=S9^FgRdvz~F$v0fPevFbDn*a*FF= literal 0 HcmV?d00001 diff --git a/prod/index.html b/prod/index.html new file mode 100644 index 0000000..97d3453 --- /dev/null +++ b/prod/index.html @@ -0,0 +1,119 @@ + + + + + + + + CAIU Signature Card + + + + + + +
+
+
+

Signature Card Creator

+
+ +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+ + +
+
+ + +
+
+ + +
+ + +
+ +
+
+
+
+ + + + + \ No newline at end of file diff --git a/prod/logo.png b/prod/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..0930e72e1db7c05224498b6d45c3072df074e8a9 GIT binary patch literal 2216 zcmV;Z2v_$~Nk&GX2mkOdF}?|>$f)ZBxAYt$&AOU{OwwryPg zh;|OuuBiyxwvD3$I)6^5@J&%|D-kpx0uha9jd@t<&ewnd*}W02%-Bkt{~i>yONQ^y zk(rn8`T!6Mpa3kzZW>8p_GrwuO_XSp;9Iusx~*;7D!N#bN3R8yAO)JJto;8Ey#b`m z*2ZPdh=~4A0RDuf?_zATRAYj?L1t0HdfZ3#u#`yxvV>jG4KyyI*BoGW9;oD#|&+YZ~T!HIS!s_Gk+RghIxIOk`1+h-K9<#5Ew%un| zC;-F?D~z^%+~s+@T<&Xdopo5hUM~0NE;+KQX5S_$u(b1q$n6P$v(Nx!7FLMd-tF+b zT`rf)^|c0RN%ghIWqyBE%gXwlZ}!Z#XxoceU$ja*H zBKOPs?X>}h)$i+N{j0_gcg{-|SUrqqBDc%d>tn;Jd|fYFzlx;e&Wgp%JylNRekr^@ zUYlND*Gu77fi&E^TNt?SbRJ)qinsgY`FuYA^|)Uz6`z}=;qE^3uoJ^sye@~o%9fV9 zM*tAzv464q@h)E*68F!uj(-TR%LiU%#ks!%z{o#^`zKr;D|&!#rZqyBQkvq~TtDKr zlvy+OqW}==+nEE%ERTj|&w3`$%V)}hR+t1^B{vZOVo?~d)u$7=f5>B&S*(U)2jDDK zM`3>+w-33`Vv#!PP9^Fn?oZ?TLC#WjRMwJ=iqlzKKJ*447da|B3p>;l{iC@8XiGZO z&Lv(2`5fevLWx(K3L@%CI0bx=u&_n-Sdc4W`jfc;-%Cw#r#Cm!Pj}Q6&Gkbl;6=mV$!YSbT5qAK60i_xWv>wml z>mwcja*5Ro+bFfhlX!lF02oVBJuR?W`8SF+aQ%Qg07yx!*A}E&?MHZ-7PM8qKH#4j zw18G^DhQRF#~5~FVOQmKyek&pC9&F2z+5LC#7a`pSTa???Qr*{T*AJVl&I8jJ&2bC zDd|d5oyXyxOA<<$DRIcB0UNVcns78A>kc6a4*9j$ z^?@BdYn`SSZ1#5zHGBY&wNjWIM}1s(xqV}2duvHE8Ol931urHTY z`F=iM*eu`A=L`Qs>^9blQ`yv?$<)J}{&=|=clZe;HCK_Kfa*4lYfjp3iMC1O;WWb7 zZHZd;=E9qsCJspSI*Fl6Z{<(}E_+O5JOPLt4Z-2h(#OT%%+HFRCO-~gOy%fQ%m&8EoMbuGip zfW&2U4P6&^Sx$(G4IO|?GcKo*X%?4$7`skaoXcxIi!%k_J0(T|;6E5>z_^eAWacd~ z0GPHogQ{wvEe*_AOdNq>2j_(4D#8hi!U({_QWF8RD+m!=drknH%|WE0_BjQbaT={z z2-%0AvJiutv?05NEgcO2gmFn!v-p(JGmWOTf)9x7-BYTBmdQOOATqf}F2!J;NXI+4 zNn$t3FfEC)vtF5tGJ6>-K;9%71|X7rFHB0RW5Gz~QOVG5a5h+c(-z=LGV~B7`L2{n zn!HJdzLva6asniheCyJvWN7Ia1DP?AuX*d7|O3`LF8#r33(_@e{)U literal 0 HcmV?d00001 diff --git a/prod/script.js b/prod/script.js new file mode 100644 index 0000000..576c9c1 --- /dev/null +++ b/prod/script.js @@ -0,0 +1,160 @@ +function handleCheckbox() { + const extensionInput = document.getElementById("extensionInput"); + const directLineInput = document.getElementById("directLineInput"); + if (document.getElementById("directLineCheckbox").checked) { + extensionInput.style.display = "none"; + directLineInput.style.display = "block"; + document.getElementById("extension").value = ""; + } else { + extensionInput.style.display = "block"; + directLineInput.style.display = "none"; + document.getElementById("directLine").value = ""; + } +} + +let backendUrl = "https://vcard.caiu.org/backend" +let locations = JSON.parse("{}"); + +function loadLocations() { + let locationsList = document.getElementById("location"); + + fetchWithTimeout(backendUrl + "/data/locations", { + timeout: 5000, + method: 'GET', + mode: 'cors', + headers: { + 'Accept': 'application/json' + } + }).then(response => { + response.text().then(text => { + locations = JSON.parse(text); + locationsList.innerText = ""; + for (let i = 0; i < locations.length; i++) { + locationsList.options[locationsList.options.length] = new Option(locations[i].name, locations[i].id); + } + }) + }); +} + +function submitForm() { + let body = + "{" + + "\"name\":\"" + document.getElementById("full_name").value + "\"," + + "\"title\":\"" + document.getElementById("title").value + "\"," + + "\"email\":\"" + document.getElementById("email").value + "\"," + + "\"locationId\":\"" + document.getElementById("location").value + "\"," + + "\"extension\":\"" + document.getElementById("extension").value + "\"," + + "\"directNumber\":\"" + document.getElementById("directLine").value + "\"," + + "\"cellNumber\":\"" + document.getElementById("cellNumber").value + "\"," + + "\"size\":" + document.querySelector('input[name = outlookVer]:checked').value + + "}"; + + fetchWithTimeout(backendUrl + "/generate", { + timeout: 5000, + method: 'POST', + mode: 'cors', + Headers: { + 'Accept': 'image/png', + }, + body: body + }).then(async response => { + downloadImage(await response.arrayBuffer()); + }); + + document.getElementById("full_name").value = ""; + document.getElementById("title").value = ""; + document.getElementById("email").value = ""; + document.getElementById("extension").value = ""; + document.getElementById("directLine").value = ""; + document.getElementById("cellNumber").value = ""; +} + +function downloadImage(arrayBuffer) { + const blob = new Blob([arrayBuffer], { type: "image/png" }); + const cardElement = document.getElementById("vcard"); + const imgElement = document.getElementById("cardImg"); + + let urlCreator = window.URL || window.webkitURL; + let imageUrl = urlCreator.createObjectURL(blob); + + cardElement.href = imageUrl; + cardElement.style.display = 'unset'; + imgElement.src = imageUrl; + cardElement.download = "card.png"; + cardElement.click(); +} + +function loadFromExistingCard() { + const data = new FormData(); + data.append("card", document.getElementById("existingFile").files[0]); + + fetchWithTimeout(backendUrl + "/edit", { + timeout: 5000, + method: 'POST', + mode: 'cors', + headers: { + 'Accept': 'application/json' + }, + body: data + }).then(response => response.json()).then(json => { + document.getElementById("full_name").value = json.Name; + document.getElementById("title").value = json.Title; + document.getElementById("email").value = json.Email; + document.getElementById("location").value = json.Location; + if (json.Extension === "") { + let directLineCheckbox = document.getElementById("directLineCheckbox"); + if (directLineCheckbox.value === "on") { + document.getElementById("directLine").value = json.DirectNumber; + } + } else { + document.getElementById("extension").value = json.Extension; + } + document.getElementById("cellNumber").value = json.CellNumber; + }); +} + +function toggleDarkMode() { + if (getCookie("darkMode") === "on") document.cookie = "darkMode=off"; + else document.cookie = "darkMode=on"; + refreshDarkMode(); +} + +function refreshDarkMode() { + let darkMode = getCookie("darkMode") === "on"; + if (darkMode) { + document.body.classList.add("dark-theme"); + document.getElementById("theme").checked = true; + } else { + if (document.body.classList.contains("dark-theme")) { + document.body.classList.remove("dark-theme"); + } + document.getElementById("theme").checked = false; + } +} + +async function fetchWithTimeout(resource, options = {}) { + const { timeout = 8000 } = options; + const controller = new AbortController(); + const id = setTimeout(() => controller.abort(), timeout); + + const response = await fetch(resource, { + ...options, + signal: controller.signal + }); + clearTimeout(id); + + return response; +} + +function getCookie(cookieName) { + let cookieArray = document.cookie.split(";"); + for (let i = 0; i < cookieArray.length; i++) { + let cookie = cookieArray[i].split("="); + if (cookie[0].trim() === cookieName) { + return cookie[1]; + } + } + console.warn("Cookie \"" + cookieName + "\" does not exist"); + document.cookie = cookieName + "="; + return ""; +} \ No newline at end of file diff --git a/prod/stylesheet.css b/prod/stylesheet.css new file mode 100644 index 0000000..4f544e9 --- /dev/null +++ b/prod/stylesheet.css @@ -0,0 +1,538 @@ +:root { + --blue: #007bff; + --indigo: #6610f2; + --purple: #6f42c1; + --pink: #e83e8c; + --red: #dc3545; + --orange: #fd7e14; + --yellow: #ffc107; + --green: #28a745; + --teal: #20c997; + --cyan: #17a2b8; + --white: #fff; + --gray: #6c757d; + --gray-dark: #343a40; + --secondary: #6c757d; + --success: #28a745; + --info: #17a2b8; + --warning: #ffc107; + --danger: #dc3545; + --light: #f8f9fa; + --dark: #343a40; + + --theme-blue: #007bff; + --theme-dark-blue: hsl(198,90%,15%); + + --breakpoint-xs: 0; + --breakpoint-sm: 576px; + --breakpoint-md: 768px; + --breakpoint-lg: 992px; + --breakpoint-xl: 1200px; + --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; + --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; + --text-color: #212529; + --background-color: #ffffff; + --secondary-color: #f8f9fa !important; + --secondary-accent: #495057; + --trans-dur: 0.3s; +} +* { + -webkit-transition: background-color ease .5s, text-color ease .5s, color ease .5s; + -moz-transition: background-color ease .5s, text-color ease .5s, color ease .5s; + -ms-transition: background-color ease .5s, text-color ease .5s, color ease .5s; + -o-transition: background-color ease .5s, text-color ease .5s, color ease .5s; + transition: background-color ease .5s, text-color ease .5s, color ease .5s; +} +html { + font-family: sans-serif; + line-height: 1.15; + -webkit-text-size-adjust: 100%; +} +body { + margin: 0; + font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + text-align: left; + color: var(--text-color); + background-color: var(--background-color); +} + +*, ::after, ::before { + box-sizing: border-box; +} + +article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section { + display: block; +} + +button, input, optgroup, select, textarea { + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +button, input { + overflow: visible; +} + +button, select { + text-transform: none; +} + +label { + display: inline-block; + margin-bottom: .5rem; +} + +input, textarea { + background-color: var(--secondary-color); +} + +h1, h2, h3, h4, h5, h6 { + margin-top: 0; + margin-bottom: .5rem; +} +.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { + margin-bottom: .5rem; + font-family: inherit; + font-weight: 500; + line-height: 1.2; + color: inherit; +} +.h1, h1 { + font-size: 2.5rem; +} +.h2, h2 { + font-size: 2rem; +} + +.btn { + display: inline-block; + font-weight: 400; + text-align: center; + white-space: nowrap; + vertical-align: middle; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + border: 1px solid transparent; + padding: .375rem .75rem; + font-size: 1rem; + line-height: 1.5; + border-radius: .25rem; + transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; +} +.btn-primary { + color: #fff; + background-color: var(--theme-blue); + border-color: var(--theme-blue); +} +.btn:not(:disabled):not(.disabled) { + cursor: pointer; +} + +select.form-control:not([size]):not([multiple]) { + height: calc(2.25rem + 2px); +} + +input[type="checkbox"], input[type="radio"] { + box-sizing: border-box; + padding: 0; +} + +[type="reset"], [type="submit"], button, html [type="button"] { + -webkit-appearance: button; +} + +/*--------------------------------------*/ + +.dark-theme { + --text-color: #ffffff; + --background-color: #28272d; + --secondary-color: #1f1e23 !important; + --secondary-accent: #181818; +} + +.text-center { + text-align: center !important; +} + +.mt-5, .my-5 { + margin-top: 1rem !important; +} + +.mb-5 { + margin-bottom: 1rem !important; +} + +.form-group { + margin-bottom: 1rem; +} +.form-control { + display: block; + width: 100%; + padding: .375rem .75rem; + font-size: 1rem; + line-height: 1.5; + color: var(--text-color); + background-color: var(--secondary-color); + background-clip: padding-box; + border: 1px solid #ced4da; + border-radius: .25rem; + + -webkit-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,background-color ease .5s, text-color ease .5s, color ease .5s; + -moz-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,background-color ease .5s, text-color ease .5s, color ease .5s; + -ms-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,background-color ease .5s, text-color ease .5s, color ease .5s; + -o-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,background-color ease .5s, text-color ease .5s, color ease .5s; + transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,background-color ease .5s, text-color ease .5s, color ease .5s; +} + +.navbar { + background-color: var(--secondary-color); + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + padding: .5rem 1rem; +} + +.navbar-brand{ + display:inline-block; + padding-top:.3125rem; + padding-bottom:.3125rem; + margin-right:1rem; + font-size:1.25rem; + line-height:inherit; + white-space:nowrap +} + +.navbar-brand:focus, .navbar-brand:hover { + text-decoration:none; +} + +.nav-align { + width: fit-content; + vertical-align: middle; + padding-left: 20px; + padding-right: 20px; + float: right; + margin: 0; +} + +.nav-container { + display: inline-flex; + position: relative; + float: right; + align-items: center; +} + +.card { + margin: auto; + width: 24em; +} + +.circle { + width: 40px; + height: 40px; + border-radius: 50%; + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + margin-right: 15px; + padding: 0 !important; +} + +.loading { + width: 40px; + height: 40px; + border: 5px solid var(--white ); + border-top: 5px solid var(--theme-blue); + border-radius: 50%; + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + animation: spin 1.25s ease-in-out infinite; +} +@keyframes spin { + 0% { transform: rotate(0deg) } + 100% { transform: rotate(360deg) } +} + +.connected { + background: var(--success); +} +.disconnected { + background: var(--danger); +} + +/*--------------------------------------*/ + +.container { + width: 100%; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; +} +@media (min-width: 576px) { + .container { + max-width: 540px; + } +} +@media (min-width: 768px) { + .container { + max-width: 720px; + } +} +@media (min-width: 992px) { + .container { + max-width: 960px; + } +} +@media (min-width: 1200px) { + .container { + max-width: 1140px; + } +} + +/*---------------------------------------------*/ + +/* Default */ +.theme { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-tap-highlight-color: transparent; +} +.icon, +.toggle { + z-index: 1; +} +.icon, +.icon-part { + position: absolute; +} +.icon { + display: block; + top: 0.75em; + left: 0.75em; + width: 1.5em; + height: 1.5em; + -webkit-transition: var(--trans-dur); + transition: var(--trans-dur); +} +.icon-part { + border-radius: 50%; + -webkit-box-shadow: 0.4em -0.4em 0 0.5em var(--white) inset; + box-shadow: 0.4em -0.4em 0 0.5em var(--white) inset; + top: calc(50% - 0.5em); + left: calc(50% - 0.5em); + width: 1em; + height: 1em; + -webkit-transition: opacity var(--trans-dur) ease-in-out, + -webkit-box-shadow var(--trans-dur) ease-in-out, + -webkit-transform var(--trans-dur) ease-in-out; + transition: opacity var(--trans-dur) ease-in-out, + -webkit-box-shadow var(--trans-dur) ease-in-out, + -webkit-transform var(--trans-dur) ease-in-out; + transition: box-shadow var(--trans-dur) ease-in-out, + opacity var(--trans-dur) ease-in-out, + transform var(--trans-dur) ease-in-out; + transition: box-shadow var(--trans-dur) ease-in-out, + opacity var(--trans-dur) ease-in-out, + transform var(--trans-dur) ease-in-out, + -webkit-box-shadow var(--trans-dur) ease-in-out, + -webkit-transform var(--trans-dur) ease-in-out; + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); +} +.icon-part ~ .icon-part { + background-color: var(--white); + border-radius: 0.05em; + top: 50%; + left: calc(50% - 0.05em); + -webkit-transform: rotate(0deg) translateY(0.5em); + -ms-transform: rotate(0deg) translateY(0.5em); + transform: rotate(0deg) translateY(0.5em); + -webkit-transform-origin: 50% 0; + -ms-transform-origin: 50% 0; + transform-origin: 50% 0; + width: 0.1em; + height: 0.2em; +} +.icon-part:nth-child(3) { + -webkit-transform: rotate(45deg) translateY(0.45em); + -ms-transform: rotate(45deg) translateY(0.45em); + transform: rotate(45deg) translateY(0.45em); +} +.icon-part:nth-child(4) { + -webkit-transform: rotate(90deg) translateY(0.45em); + -ms-transform: rotate(90deg) translateY(0.45em); + transform: rotate(90deg) translateY(0.45em); +} +.icon-part:nth-child(5) { + -webkit-transform: rotate(135deg) translateY(0.45em); + -ms-transform: rotate(135deg) translateY(0.45em); + transform: rotate(135deg) translateY(0.45em); +} +.icon-part:nth-child(6) { + -webkit-transform: rotate(180deg) translateY(0.45em); + -ms-transform: rotate(180deg) translateY(0.45em); + transform: rotate(180deg) translateY(0.45em); +} +.icon-part:nth-child(7) { + -webkit-transform: rotate(225deg) translateY(0.45em); + -ms-transform: rotate(225deg) translateY(0.45em); + transform: rotate(225deg) translateY(0.45em); +} +.icon-part:nth-child(8) { + -webkit-transform: rotate(270deg) translateY(0.5em); + -ms-transform: rotate(270deg) translateY(0.5em); + transform: rotate(270deg) translateY(0.5em); +} +.icon-part:nth-child(9) { + -webkit-transform: rotate(315deg) translateY(0.5em); + -ms-transform: rotate(315deg) translateY(0.5em); + transform: rotate(315deg) translateY(0.5em); +} +.label, +.toggle, +.toggle-wrap { + position: relative; +} +.toggle, +.toggle:before { + display: block; +} +.toggle { + background-color: hsl(48,90%,85%); + border-radius: 25% / 50%; + -webkit-box-shadow: 0 0 0 0.125em var(--secondary); + box-shadow: 0 0 0 0.125em var(--secondary); + padding: 0.25em !important; + width: 6em; + height: 3em; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + -webkit-transition: background-color var(--trans-dur) ease-in-out, + -webkit-box-shadow 0.15s ease-in-out, + -webkit-transform var(--trans-dur) ease-in-out; + transition: background-color var(--trans-dur) ease-in-out, + -webkit-box-shadow 0.15s ease-in-out, + -webkit-transform var(--trans-dur) ease-in-out; + transition: background-color var(--trans-dur) ease-in-out, + box-shadow 0.15s ease-in-out, + transform var(--trans-dur) ease-in-out; + transition: background-color var(--trans-dur) ease-in-out, + box-shadow 0.15s ease-in-out, + transform var(--trans-dur) ease-in-out, + -webkit-box-shadow 0.15s ease-in-out, + -webkit-transform var(--trans-dur) ease-in-out; +} +.toggle:before { + background-color: var(--yellow); + border-radius: 50%; + content: ""; + width: 2.5em; + height: 2.5em; + -webkit-transition: 0.3s; + transition: 0.3s; +} +.toggle:focus { + -webkit-box-shadow: 0 0 0 0.125em var(--theme-blue); + box-shadow: 0 0 0 0.125em var(--theme-blue); + outline: transparent; +} +/* Checked */ +.toggle:checked { + background-color: var(--theme-dark-blue); +} +.toggle:checked:before, +.toggle:checked ~ .icon { + -webkit-transform: translateX(3em); + -ms-transform: translateX(3em); + transform: translateX(3em); +} +.toggle:checked:before { + background-color: var(--theme-blue); +} +.toggle:checked ~ .icon .icon-part:nth-child(1) { + -webkit-box-shadow: 0.2em -0.2em 0 0.2em var(--white) inset; + box-shadow: 0.2em -0.2em 0 0.2em var(--white) inset; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + top: 0.25em; + left: 0.25em; +} +.toggle:checked ~ .icon .icon-part ~ .icon-part { + opacity: 0; +} +.toggle:checked ~ .icon .icon-part:nth-child(2) { + -webkit-transform: rotate(45deg) translateY(0.8em); + -ms-transform: rotate(45deg) translateY(0.8em); + transform: rotate(45deg) translateY(0.8em); +} +.toggle:checked ~ .icon .icon-part:nth-child(3) { + -webkit-transform: rotate(90deg) translateY(0.8em); + -ms-transform: rotate(90deg) translateY(0.8em); + transform: rotate(90deg) translateY(0.8em); +} +.toggle:checked ~ .icon .icon-part:nth-child(4) { + -webkit-transform: rotate(135deg) translateY(0.8em); + -ms-transform: rotate(135deg) translateY(0.8em); + transform: rotate(135deg) translateY(0.8em); +} +.toggle:checked ~ .icon .icon-part:nth-child(5) { + -webkit-transform: rotate(180deg) translateY(0.8em); + -ms-transform: rotate(180deg) translateY(0.8em); + transform: rotate(180deg) translateY(0.8em); +} +.toggle:checked ~ .icon .icon-part:nth-child(6) { + -webkit-transform: rotate(225deg) translateY(0.8em); + -ms-transform: rotate(225deg) translateY(0.8em); + transform: rotate(225deg) translateY(0.8em); +} +.toggle:checked ~ .icon .icon-part:nth-child(7) { + -webkit-transform: rotate(270deg) translateY(0.8em); + -ms-transform: rotate(270deg) translateY(0.8em); + transform: rotate(270deg) translateY(0.8em); +} +.toggle:checked ~ .icon .icon-part:nth-child(8) { + -webkit-transform: rotate(315deg) translateY(0.8em); + -ms-transform: rotate(315deg) translateY(0.8em); + transform: rotate(315deg) translateY(0.8em); +} +.toggle:checked ~ .icon .icon-part:nth-child(9) { + -webkit-transform: rotate(360deg) translateY(0.8em); + -ms-transform: rotate(360deg) translateY(0.8em); + transform: rotate(360deg) translateY(0.8em); +} +.toggle-wrap { + margin: 0 0.75em; +} +@supports selector(:focus-visible) { + .toggle:focus { + -webkit-box-shadow: 0 0 0 0.125em var(--secondary); + box-shadow: 0 0 0 0.125em var(--secondary); + } + .toggle:focus-visible { + -webkit-box-shadow: 0 0 0 0.125em var(--theme-blue); + box-shadow: 0 0 0 0.125em var(--theme-blue); + } +} \ No newline at end of file diff --git a/script.js b/script.js index 3ccff6e..5004795 100644 --- a/script.js +++ b/script.js @@ -77,6 +77,14 @@ function downloadImage(arrayBuffer) { cardElement.click(); } +function getCardToEdit() { + let uploadDiv = document.getElementById("uploadDiv") + let fadeDiv = document.getElementById("fade") + uploadDiv.classList.remove("hidden") + fadeDiv.classList.remove("hidden") + +} + function loadFromExistingCard() { const data = new FormData(); data.append("card", document.getElementById("existingFile").files[0]); @@ -106,25 +114,6 @@ function loadFromExistingCard() { }); } -function toggleDarkMode() { - if (getCookie("darkMode") === "on") document.cookie = "darkMode=off"; - else document.cookie = "darkMode=on"; - refreshDarkMode(); -} - -function refreshDarkMode() { - let darkMode = getCookie("darkMode") === "on"; - if (darkMode) { - document.body.classList.add("dark-theme"); - document.getElementById("theme").checked = true; - } else { - if (document.body.classList.contains("dark-theme")) { - document.body.classList.remove("dark-theme"); - } - document.getElementById("theme").checked = false; - } -} - async function fetchWithTimeout(resource, options = {}) { const { timeout = 8000 } = options; const controller = new AbortController(); @@ -137,17 +126,4 @@ async function fetchWithTimeout(resource, options = {}) { clearTimeout(id); return response; -} - -function getCookie(cookieName) { - let cookieArray = document.cookie.split(";"); - for (let i = 0; i < cookieArray.length; i++) { - let cookie = cookieArray[i].split("="); - if (cookie[0].trim() === cookieName) { - return cookie[1]; - } - } - console.warn("Cookie \"" + cookieName + "\" does not exist"); - document.cookie = cookieName + "="; - return ""; } \ No newline at end of file diff --git a/stylesheet.css b/stylesheet.css index a1d3d05..a1dc5f9 100644 --- a/stylesheet.css +++ b/stylesheet.css @@ -21,7 +21,9 @@ --dark: #343a40; --theme-blue: #007bff; + --theme-blue-hover: #0064d9; --theme-dark-blue: hsl(198,90%,15%); + --theme-active: #002872; --breakpoint-xs: 0; --breakpoint-sm: 576px; @@ -31,11 +33,17 @@ --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --text-color: #212529; + --text-color-neg: #ffffff; --background-color: #ffffff; --secondary-color: #f8f9fa !important; --secondary-accent: #495057; --trans-dur: 0.3s; } + +*, ::after, ::before { + box-sizing: inherit; +} + html { font-family: sans-serif; line-height: 1.15; @@ -51,27 +59,49 @@ body { color: var(--text-color); background-color: var(--background-color); } - -*, ::after, ::before { - box-sizing: border-box; +header { + display: flex; + justify-content: space-between; + align-items: center; + background-color: var(--secondary-color); } -article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section { - display: block; +footer { + text-align: center; + font-size: 12px; } -button, input, optgroup, select, textarea { +button { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; -} - -button, input { overflow: visible; + text-transform: none; } -button, select { +input { + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; + overflow: visible; + background-color: var(--secondary-color); +} + +textarea { + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; + background-color: var(--secondary-color); +} + +select { + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; text-transform: none; } @@ -80,10 +110,6 @@ label { margin-bottom: .5rem; } -input, textarea { - background-color: var(--secondary-color); -} - h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: .5rem; @@ -145,6 +171,7 @@ input[type="checkbox"], input[type="radio"] { .dark-theme { --text-color: #ffffff; + --text-color-neg: #212529; --background-color: #28272d; --secondary-color: #1f1e23 !important; --secondary-accent: #181818; @@ -154,11 +181,11 @@ input[type="checkbox"], input[type="radio"] { text-align: center !important; } -.mt-5, .my-5 { +.mt { margin-top: 1rem !important; } -.mb-5 { +.mb { margin-bottom: 1rem !important; } @@ -179,25 +206,53 @@ input[type="checkbox"], input[type="radio"] { transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; } +.logo { + display: inline-block; + padding-top: 0.25em; + padding-bottom: 0.25em; + padding-left: 0.5em; +} + .navbar { - background-color: var(--secondary-color); - position: relative; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - padding: .5rem 1rem; + margin-top: -5px; +} +.navbar ul { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; + background-color: var(--theme-blue); +} +.navbar li { + float: left; +} +.navbar li:first-child { + margin-left: 10em; +} +.navbar li:last-child { + margin-right: 10em; +} +.navbar li a { + display: block; + color: var(--white); + text-align: center; + padding: 1.5em; + text-decoration: none; +} +.navbar li a:hover:not(.active) { + background-color: var(--theme-blue-hover); +} +.active { + background-color: var(--theme-active); +} +.float-left { + float:left !important; +} +.float-right { + float: right !important; } .navbar-brand{ - display:inline-block; padding-top:.3125rem; padding-bottom:.3125rem; margin-right:1rem; @@ -210,57 +265,46 @@ input[type="checkbox"], input[type="radio"] { text-decoration:none; } -.nav-align { - width: fit-content; - vertical-align: middle; - padding-left: 20px; - padding-right: 20px; - float: right; - margin: 0; -} - -.nav-container { - display: inline-flex; - position: relative; - float: right; - align-items: center; -} - .card { margin: auto; width: 24em; } -.circle { - width: 40px; - height: 40px; - border-radius: 50%; - -moz-border-radius: 50%; - -webkit-border-radius: 50%; - margin-right: 15px; - padding: 0 !important; +.fade { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: white; + opacity: 50%; } -.loading { - width: 40px; - height: 40px; - border: 5px solid var(--white ); - border-top: 5px solid var(--theme-blue); - border-radius: 50%; - -moz-border-radius: 50%; - -webkit-border-radius: 50%; - animation: spin 1.25s ease-in-out infinite; -} -@keyframes spin { - 0% { transform: rotate(0deg) } - 100% { transform: rotate(360deg) } +.upload { + opacity: 100% !important; + border-radius: .5rem; + padding: 1em; + border: solid 2px var(--theme-dark-blue); + background-color: var(--background-color); + position: absolute; + width: 16em; + height: 9em; + left: 50%; + top: 14em; + margin-left: -9em; } -.connected { - background: var(--success); +.hidden { + display: none; } -.disconnected { - background: var(--danger); + +.dotted { + display: flex; + border: dotted 2px var(--theme-dark-blue); + width: 100%; + height: 100%; + text-align: center; + align-items: center; } /*--------------------------------------*/ @@ -292,235 +336,3 @@ input[type="checkbox"], input[type="radio"] { max-width: 1140px; } } - -/*---------------------------------------------*/ - -/* Default */ -.theme { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-tap-highlight-color: transparent; -} -.icon, -.toggle { - z-index: 1; -} -.icon, -.icon-part { - position: absolute; -} -.icon { - display: block; - top: 0.75em; - left: 0.75em; - width: 1.5em; - height: 1.5em; - -webkit-transition: var(--trans-dur); - transition: var(--trans-dur); -} -.icon-part { - border-radius: 50%; - -webkit-box-shadow: 0.4em -0.4em 0 0.5em var(--white) inset; - box-shadow: 0.4em -0.4em 0 0.5em var(--white) inset; - top: calc(50% - 0.5em); - left: calc(50% - 0.5em); - width: 1em; - height: 1em; - -webkit-transition: opacity var(--trans-dur) ease-in-out, - -webkit-box-shadow var(--trans-dur) ease-in-out, - -webkit-transform var(--trans-dur) ease-in-out; - transition: opacity var(--trans-dur) ease-in-out, - -webkit-box-shadow var(--trans-dur) ease-in-out, - -webkit-transform var(--trans-dur) ease-in-out; - transition: box-shadow var(--trans-dur) ease-in-out, - opacity var(--trans-dur) ease-in-out, - transform var(--trans-dur) ease-in-out; - transition: box-shadow var(--trans-dur) ease-in-out, - opacity var(--trans-dur) ease-in-out, - transform var(--trans-dur) ease-in-out, - -webkit-box-shadow var(--trans-dur) ease-in-out, - -webkit-transform var(--trans-dur) ease-in-out; - -webkit-transform: scale(0.5); - -ms-transform: scale(0.5); - transform: scale(0.5); -} -.icon-part ~ .icon-part { - background-color: var(--white); - border-radius: 0.05em; - top: 50%; - left: calc(50% - 0.05em); - -webkit-transform: rotate(0deg) translateY(0.5em); - -ms-transform: rotate(0deg) translateY(0.5em); - transform: rotate(0deg) translateY(0.5em); - -webkit-transform-origin: 50% 0; - -ms-transform-origin: 50% 0; - transform-origin: 50% 0; - width: 0.1em; - height: 0.2em; -} -.icon-part:nth-child(3) { - -webkit-transform: rotate(45deg) translateY(0.45em); - -ms-transform: rotate(45deg) translateY(0.45em); - transform: rotate(45deg) translateY(0.45em); -} -.icon-part:nth-child(4) { - -webkit-transform: rotate(90deg) translateY(0.45em); - -ms-transform: rotate(90deg) translateY(0.45em); - transform: rotate(90deg) translateY(0.45em); -} -.icon-part:nth-child(5) { - -webkit-transform: rotate(135deg) translateY(0.45em); - -ms-transform: rotate(135deg) translateY(0.45em); - transform: rotate(135deg) translateY(0.45em); -} -.icon-part:nth-child(6) { - -webkit-transform: rotate(180deg) translateY(0.45em); - -ms-transform: rotate(180deg) translateY(0.45em); - transform: rotate(180deg) translateY(0.45em); -} -.icon-part:nth-child(7) { - -webkit-transform: rotate(225deg) translateY(0.45em); - -ms-transform: rotate(225deg) translateY(0.45em); - transform: rotate(225deg) translateY(0.45em); -} -.icon-part:nth-child(8) { - -webkit-transform: rotate(270deg) translateY(0.5em); - -ms-transform: rotate(270deg) translateY(0.5em); - transform: rotate(270deg) translateY(0.5em); -} -.icon-part:nth-child(9) { - -webkit-transform: rotate(315deg) translateY(0.5em); - -ms-transform: rotate(315deg) translateY(0.5em); - transform: rotate(315deg) translateY(0.5em); -} -.label, -.toggle, -.toggle-wrap { - position: relative; -} -.toggle, -.toggle:before { - display: block; -} -.toggle { - background-color: hsl(48,90%,85%); - border-radius: 25% / 50%; - -webkit-box-shadow: 0 0 0 0.125em var(--secondary); - box-shadow: 0 0 0 0.125em var(--secondary); - padding: 0.25em !important; - width: 6em; - height: 3em; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - -webkit-transition: background-color var(--trans-dur) ease-in-out, - -webkit-box-shadow 0.15s ease-in-out, - -webkit-transform var(--trans-dur) ease-in-out; - transition: background-color var(--trans-dur) ease-in-out, - -webkit-box-shadow 0.15s ease-in-out, - -webkit-transform var(--trans-dur) ease-in-out; - transition: background-color var(--trans-dur) ease-in-out, - box-shadow 0.15s ease-in-out, - transform var(--trans-dur) ease-in-out; - transition: background-color var(--trans-dur) ease-in-out, - box-shadow 0.15s ease-in-out, - transform var(--trans-dur) ease-in-out, - -webkit-box-shadow 0.15s ease-in-out, - -webkit-transform var(--trans-dur) ease-in-out; -} -.toggle:before { - background-color: var(--yellow); - border-radius: 50%; - content: ""; - width: 2.5em; - height: 2.5em; - -webkit-transition: 0.3s; - transition: 0.3s; -} -.toggle:focus { - -webkit-box-shadow: 0 0 0 0.125em var(--theme-blue); - box-shadow: 0 0 0 0.125em var(--theme-blue); - outline: transparent; -} -/* Checked */ -.toggle:checked { - background-color: var(--theme-dark-blue); -} -.toggle:checked:before, -.toggle:checked ~ .icon { - -webkit-transform: translateX(3em); - -ms-transform: translateX(3em); - transform: translateX(3em); -} -.toggle:checked:before { - background-color: var(--theme-blue); -} -.toggle:checked ~ .icon .icon-part:nth-child(1) { - -webkit-box-shadow: 0.2em -0.2em 0 0.2em var(--white) inset; - box-shadow: 0.2em -0.2em 0 0.2em var(--white) inset; - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); - top: 0.25em; - left: 0.25em; -} -.toggle:checked ~ .icon .icon-part ~ .icon-part { - opacity: 0; -} -.toggle:checked ~ .icon .icon-part:nth-child(2) { - -webkit-transform: rotate(45deg) translateY(0.8em); - -ms-transform: rotate(45deg) translateY(0.8em); - transform: rotate(45deg) translateY(0.8em); -} -.toggle:checked ~ .icon .icon-part:nth-child(3) { - -webkit-transform: rotate(90deg) translateY(0.8em); - -ms-transform: rotate(90deg) translateY(0.8em); - transform: rotate(90deg) translateY(0.8em); -} -.toggle:checked ~ .icon .icon-part:nth-child(4) { - -webkit-transform: rotate(135deg) translateY(0.8em); - -ms-transform: rotate(135deg) translateY(0.8em); - transform: rotate(135deg) translateY(0.8em); -} -.toggle:checked ~ .icon .icon-part:nth-child(5) { - -webkit-transform: rotate(180deg) translateY(0.8em); - -ms-transform: rotate(180deg) translateY(0.8em); - transform: rotate(180deg) translateY(0.8em); -} -.toggle:checked ~ .icon .icon-part:nth-child(6) { - -webkit-transform: rotate(225deg) translateY(0.8em); - -ms-transform: rotate(225deg) translateY(0.8em); - transform: rotate(225deg) translateY(0.8em); -} -.toggle:checked ~ .icon .icon-part:nth-child(7) { - -webkit-transform: rotate(270deg) translateY(0.8em); - -ms-transform: rotate(270deg) translateY(0.8em); - transform: rotate(270deg) translateY(0.8em); -} -.toggle:checked ~ .icon .icon-part:nth-child(8) { - -webkit-transform: rotate(315deg) translateY(0.8em); - -ms-transform: rotate(315deg) translateY(0.8em); - transform: rotate(315deg) translateY(0.8em); -} -.toggle:checked ~ .icon .icon-part:nth-child(9) { - -webkit-transform: rotate(360deg) translateY(0.8em); - -ms-transform: rotate(360deg) translateY(0.8em); - transform: rotate(360deg) translateY(0.8em); -} -.toggle-wrap { - margin: 0 0.75em; -} -@supports selector(:focus-visible) { - .toggle:focus { - -webkit-box-shadow: 0 0 0 0.125em var(--secondary); - box-shadow: 0 0 0 0.125em var(--secondary); - } - .toggle:focus-visible { - -webkit-box-shadow: 0 0 0 0.125em var(--theme-blue); - box-shadow: 0 0 0 0.125em var(--theme-blue); - } -} \ No newline at end of file