From 17c14013f14bc7016e2c46d40ddce81d5b9d7bc9 Mon Sep 17 00:00:00 2001 From: James Dinh Date: Mon, 18 Jul 2022 16:46:17 -0700 Subject: [PATCH] Added Tooltips --- .DS_Store | Bin 6148 -> 0 bytes css/general.css | 118 ++++++++++++++++++++++++++---------------------- img/.DS_Store | Bin 8196 -> 0 bytes index.html | 27 ++++++----- js/general.js | 81 +++++++++++---------------------- 5 files changed, 103 insertions(+), 123 deletions(-) delete mode 100644 .DS_Store delete mode 100644 img/.DS_Store diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index 66544226211eac98f190077f0d9fbf2323beaf6a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6148 zcmeHK&2G~`5S~p8brLG&0HPNpOI)LpA3z{3CX@qLjNkw$*s*C1t~ZJuQpt+sEAS4y z0!Mff-h~r<`%~m3m>U&EJJRg8KQp_Y&*NP$5wYGnUuQskyG@!>M%kmJ`u(!+7}@_JMFwHfYvPnrzHUeN>+FJM zHq-mTmtdB}S>Eq|V~wVD;o^?HV|VPA-VtAVxt}kxu|IzMdm0w}M^X6&7(?j$L`zFP7Ootm}e8xzXG;LL( z;_I1Hu~!ts{-EcKhJWHh#0sh9;v)uiG#gB`!9+?SMRY>@bVNCLN!EE`*Wg{{r9p4D z5>Bj8wb`WvGfy#Ziu8=2HM7eU{8UNRHqDW$0W_ChIi74YZN;0a`gC9!!#={(`!vH^ zCpB?Yy)eo76`l5W=lq6Xp4>2C82C#Ji2cEV3UoD=3gy;;LS6xY7P_UNE`R=kj_3fo z8cT)ffiUF?RIW^4F_^wPFy)SMSKF5gl{+!HGUm}MGkrs0`s%?PX->>lXiCF?VPKts zrfPP@`Twx~{=e>IT806`z<sD~$taYHTphARQsZhG0(8sZ?h@*H9 bDg|SXr~qA!r9$*T%#VPi!4!spGiBf>Ynkf9 diff --git a/css/general.css b/css/general.css index e130aec..884cf9d 100644 --- a/css/general.css +++ b/css/general.css @@ -164,6 +164,29 @@ nav ul li { background-color: rgb(57, 57, 57); border-radius: 5px; padding: 2px 5px; + position: relative; +} + +#timer::after { + content: 'Aug 12, 4pm'; + position: absolute; + text-align: center; + align-items: center; + top: 30px; + right: -20px; + padding: 2px 0; + width: 150%; + opacity: 1; + background-color: #222429; + border-radius: 10px; + transition: opacity 300ms, transform 300ms; + transform: scale(0); + transform-origin: top; + } + + #timer:hover::after, + #timer:focus::after{ + transform: scale(1); } .tooltip-nav { @@ -194,60 +217,6 @@ nav ul li { } } -/* #nav-tooltip { - visibility: visible; - width: 80px; - background-color: black; - color: #fff; - text-align: center; - border-radius: 6px; - padding: 2px 0; - position: absolute; - z-index: 101; - bottom: -100%; - left: 57%; - margin-left: -40px; - font-size: 14px; - transition: opacity 1s; -} */ - -/* -.tooltip-nav { - position: relative; - display: inline-block; - border-bottom: 1px dotted black; - text-decoration: none; - -} - -.tooltip-nav .tooltiptext { - visibility: hidden; - width: 120px; - background-color: black; - color: #fff; - text-align: center; - border-radius: 6px; - padding: 5px 0; - - position: absolute; - z-index: 100; - top: 100%; - left: 50%; - margin-left: -60px; -} - -.tooltip-nav:hover .tooltiptext { - visibility: visible; -} */ - -/* .notification { - position: absolute; - text-align: center; - margin: auto; - z-index: 100; - visibility: hidden; -} */ - @keyframes dropdown{ 0% { opacity: 0; @@ -1278,6 +1247,45 @@ section { } } +.tooltip { + position: relative; +} + +.tooltip::after { + content: ''; + position: absolute; + text-align: center; + align-items: center; + top: 22px; + right: -35px; + padding: 3px 7px; + width: max-content; + opacity: 1; + z-index: 1; + background-color: #222429; + border-radius: 10px; + transition: opacity 300ms, transform 300ms; + transform: scale(0); + transform-origin: top; + } + +.tooltip:hover::after { + transform: scale(1); +} + +#signup-link::after { + content: 'Signup Form'; +} + +.email-link::after { + content: 'Email'; + right: 65px; +} + +#discord-link::after { + content: 'Discord Invite Link'; +} + #sponsor-heading { margin: 30px 0 0; } @@ -1866,7 +1874,7 @@ section { } } -.tooltip { +.tooltip-rules { text-decoration: underline dotted; cursor: help; } diff --git a/img/.DS_Store b/img/.DS_Store deleted file mode 100644 index 14b971deee2c9f67d8df582af46450823155cff3..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 8196 zcmeHMO>fjN5PdEctc2)NajArgask01E0tdm$|6AOZI1|*{bEH)H`UT@1*hEk5Bvpw zA18P-wpu5fs0#-~#W=FZvHfP^Hp9VlRaPuK!;i6-PX8(fHCkdFu*liQm19z_q|pc1IECA$$)$x5@wNEkfoRU z>0qH-0Lo1^Yhs=I0L3IhW7|Fmc{p6K?7|Mk zsdeHK9S)ayX{9k>46HIBd-o1T7-E4>@&0|37bEt`>-3Dd_fr#Vz&6J(P;jUJ1yiKR ziC(g0%35>+5NY^c({K+nV$SeEv2z?^Ono`8DSM{PTHJ0;%N-pnPku;b!Mmab`L%|; zkC$p&X7QO{npb?9F+P%k1P4J=g2!w<;q|0N>yMh&M{8+)L(4MTIhi}9_LRB6gsn>) z<88C8jakjs!!>OURO>N0UC`1wtxQ-?@wCm7diz`C?FWBgsbvJ{$9?QE+b51Bi7v2XvjI+HR97re8lLRI3lt!mYsM#9(zlpc8K>XPpi+Rev3zU z>EnVvnbY?}&ScJ*OR+~=M~nkKIlG*d_`+>PzSzP5&v_l7e^ty2*A?tGEy??K7GmMb zw^lfj{SnCJVCkk}XVj5TG @@ -270,7 +269,7 @@
@@ -669,7 +668,7 @@

Isaac Hwang

Lead Organizer
-
Discord: Fesh#5995
ihwang125 (at) gmail (dot) com
+
Discord: Fesh#5995
@@ -688,7 +687,7 @@

Vijay Kethanaboyina

Outreach Manager
-
Discord: SURPRISE!!#8662
vijaykethanaboyina (at) gmail (dot) com
+
Discord: SURPRISE!!#8662
@@ -699,7 +698,7 @@

James Dinh

Lead Website Designer
-
Discord: wellfedbison#0607
jamesdinh77 (at) protonmail (dot) com
+
Discord: wellfedbison#0607
@@ -707,7 +706,7 @@

Clement Boiteux

Tech Support
-
Discord: Maul#8742
ezrabridger27 (at) gmail (dot) com
+
Discord: Maul#8742
@@ -715,7 +714,7 @@

Mark Shen

Tech Support
-
Discord: No Game No life#4534
markshen00 (at) gmail (dot) com
+
Discord: No Game No life#4534
@@ -726,7 +725,7 @@

Bryce Mankovsky

Marketing Manager
-
Discord: bmank52#1664
brycemankovsky (at) gmail (dot) com
+
Discord: bmank52#1664
diff --git a/js/general.js b/js/general.js index eb482c5..8d66bba 100644 --- a/js/general.js +++ b/js/general.js @@ -42,60 +42,6 @@ document.addEventListener('DOMContentLoaded', function(){ setAttributes(bryce, {"href": "mailto:brycemankovsky" + "@" + "gmail.com?subject=Gilroy Hacks", "target": "_blank"}); bryce.innerHTML = "brycemankovsky" + "@" + "gmail.com"; - // Checkbox Local Storage - var i; - var checkboxes = document.querySelectorAll('#signup-container input[type=checkbox]'); - var verify = true; - function save() { - for (i = 0; i < checkboxes.length; i++) { - localStorage.setItem(checkboxes[i].value, checkboxes[i].checked); - } - } - window.onload = function() { - load(); - }; - function load() { - for (i = 0; i < checkboxes.length; i++) { - checkboxes[i].checked = localStorage.getItem(checkboxes[i].value) === 'true' ? true:false; - } - } - function check(id) { - document.getElementById(id).checked = true; - } - function uncheck(id) { - document.getElementById(id).checked = false; - } - function notification(id) { - if (localStorage.getItem(checkboxes[id].value) != true) { verify = false; } - if (verify) { document.getElementById('notification').style.visibility = visible; } - } - - // function btnToggle() { - // if (document.getElementById('#check').checked) { - // document.getElementById('#check').checked = false; - // } - // else { - // document.getElementById('#check').checked = true; - // } - // } - // document.getElementById('#check').addEventListener('click', function (event) { - // if (!document.getElementById('check').checked) { - // event.stopPropagation(); - // } - // }); - // window.onclick = function(event) { - // if (!event.target.matches('check')) { - // if (document.getElementById('check').checked) { - // document.getElementById('check').checked = false; - // } - // } - // } - - // document.getElementById("navList").addEventListener('click', function (event) { - // if (document.getElementById('check').checked) { - // event.stopPropagation(); - // }}); - // Scroll Element // Creating an observer when the user views that element const observer = new IntersectionObserver(entries => { @@ -257,3 +203,30 @@ window.addEventListener("load", function() { }); // General functions +// Checkbox Local Storage +var i; +var checkboxes = document.querySelectorAll('#signup-container input[type=checkbox]'); +var verify = true; +function save() { + for (i = 0; i < checkboxes.length; i++) { + localStorage.setItem(checkboxes[i].value, checkboxes[i].checked); + } +} +window.onload = function() { + load(); +}; +function load() { + for (i = 0; i < checkboxes.length; i++) { + checkboxes[i].checked = localStorage.getItem(checkboxes[i].value) === 'true' ? true:false; + } +} +function check(id) { + document.getElementById(id).checked = true; +} +function uncheck(id) { + document.getElementById(id).checked = false; +} +function notification(id) { + if (localStorage.getItem(checkboxes[id].value) != true) { verify = false; } + if (verify) { document.getElementById('notification').style.visibility = visible; } +} \ No newline at end of file