Added Tooltips
This commit is contained in:
James Dinh
parent
3bbca04770
commit
17c14013f1
118
css/general.css
118
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;
|
||||
}
|
||||
|
||||
BIN
img/.DS_Store
vendored
BIN
img/.DS_Store
vendored
Binary file not shown.
27
index.html
27
index.html
@ -73,8 +73,7 @@
|
||||
</a>
|
||||
<div id="banner">
|
||||
<p id="banner-text"><a class="navlink" id="timer-link" href="#timeline">Opening Ceremony</a> in
|
||||
<abbr class="tooltip-nav" title="Aug 12, 4pm"><span id="timer"></span></abbr>
|
||||
<!-- <span id="nav-tooltip" data-text="Aug 12, 4pm"></span> -->
|
||||
<span id="timer"></span>
|
||||
</p>
|
||||
</div>
|
||||
<div id="nav-links-container">
|
||||
@ -247,7 +246,7 @@
|
||||
<p class="timeline-description">Congratuations! Judge scores are tallied and here's where we announce the 1st, 2nd, and 3rd place teams along with constructive feedback for each in the <u>Community Room</u>.<br>
|
||||
<ul class="timeline-description-list">
|
||||
<li><u>Winners</u>: we will contact you via Email about your prizes; allow up to 2 days for a response</li>
|
||||
<li>For Questions, ask in the Discord server (#ask-questions), or contact tech support at <a class="link" target="_blank" href="mailto:tech@gilroyhacks.com" title="Email">tech@gilroyhacks.com</a></li>
|
||||
<li>For Questions, ask in the Discord server (#ask-questions), or contact tech support at <a class="link" target="_blank" href="mailto:tech@gilroyhacks.com">tech@gilroyhacks.com</a></li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
@ -270,7 +269,7 @@
|
||||
<div id="checklist">
|
||||
<input id="01" onclick="save()" type="checkbox" name="r" value="1">
|
||||
<label for="01">
|
||||
<p class="title">1. Sign up w/ this <a onclick="check('01'); save()" class="link" target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7" title="Signup Form">form</a></p>
|
||||
<p class="title">1. Sign up w/ this <a onclick="check('01'); save()" class="link tooltip" id="signup-link" target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7">form</a></p>
|
||||
</label>
|
||||
<label for="01">
|
||||
<p class="step-desc">- These questions are used to gauge your experience and skills so we can pair you with others</p>
|
||||
@ -283,7 +282,7 @@
|
||||
<div id="checklist">
|
||||
<input id="02" onclick="save()" type="checkbox" name="r" value="2">
|
||||
<label for="02">
|
||||
<p class="title">2. Join the <a onclick="check('02'); save()" class="link" target="_blank" href="https://discord.gg/nkTDKMcYbr" title="Discord Invite Link">Discord</a></p>
|
||||
<p class="title">2. Join the <a onclick="check('02'); save()" class="link tooltip" id="discord-link" target="_blank" href="https://discord.gg/nkTDKMcYbr">Discord</a></p>
|
||||
</label>
|
||||
<label for="02">
|
||||
<p class="step-desc">- Please change your nickname to your First and Last name</p>
|
||||
@ -488,7 +487,7 @@
|
||||
<div class="rules-card" id="rules-2">
|
||||
<p class="rules-title">Do not plagiarize</p>
|
||||
<p>
|
||||
- You are allowed to use existing libraries and packages with a valid license but required to give credit when credit is due (which also includes Creative Commons and <abbr class="tooltip" title="Open-source software is computer software that is released under a license in which the copyright holder grants users the rights to use, study, change, and distribute the software and its source code to anyone and for any purpose">Open Source Projects</abbr>)
|
||||
- You are allowed to use existing libraries and packages with a valid license but required to give credit when credit is due (which also includes Creative Commons and <abbr class="tooltip-rules" title="Open-source software is computer software that is released under a license in which the copyright holder grants users the rights to use, study, change, and distribute the software and its source code to anyone and for any purpose">Open Source Projects</abbr>)
|
||||
<br>
|
||||
- You may also use old projects as frameworks for your product, but you cannot work on any material that is related to the hackathon before the event
|
||||
</p>
|
||||
@ -574,7 +573,7 @@
|
||||
<br><br>
|
||||
However, Gilroy Hacks will use these photos for promoting purposes ONLY. We will never share your personal or private information to anyone outside the event.
|
||||
<br><br>
|
||||
If you have a disagreement with any of the terms stated above, please contact an event organizer or email <a class="link" id="email-replace-tech" target="_blank" href="mailto:tech-at-gilroyhacks-dot-com" title="Email">tech (at) gilroyhacks (dot) com</a>
|
||||
If you have a disagreement with any of the terms stated above, please contact an event organizer or email <a class="link tooltip email-link" id="email-replace-tech" target="_blank" href="mailto:tech-at-gilroyhacks-dot-com">tech (at) gilroyhacks (dot) com</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -658,7 +657,7 @@
|
||||
<div class="team-description">
|
||||
<h4 class="person-name">Aadhavan Magesh</h4>
|
||||
<h5 class="person-subtitle">Secretary</h5>
|
||||
<h5 class="person-contact"><span class="discord-text">Discord</span>: Skymon<span class="discord-tag">#0438</span><br><a class="link" id="email-replace-aadhavan" target="_blank" href="mailto:aadhavan.magesh-at-gmail-dot-com" title="Email">aadhavan.magesh (at) gmail (dot) com</a></h5>
|
||||
<h5 class="person-contact"><span class="discord-text">Discord</span>: Skymon<span class="discord-tag">#0438</span><br><a class="link tooltip email-link" id="email-replace-aadhavan" target="_blank" href="mailto:aadhavan.magesh-at-gmail-dot-com">aadhavan.magesh (at) gmail (dot) com</a></h5>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
@ -669,7 +668,7 @@
|
||||
<div class="team-description">
|
||||
<h4 class="person-name">Isaac Hwang</h4>
|
||||
<h5 class="person-subtitle">Lead Organizer</h5>
|
||||
<h5 class="person-contact"><span class="discord-text">Discord</span>: Fesh<span class="discord-tag">#5995</span><br><a class="link" id="email-replace-isaac" target="_blank" href="mailto:ihwang125-at-gmail-dot-com" title="Email">ihwang125 (at) gmail (dot) com</a></h5>
|
||||
<h5 class="person-contact"><span class="discord-text">Discord</span>: Fesh<span class="discord-tag">#5995</span><br><a class="link tooltip email-link" id="email-replace-isaac" target="_blank" href="mailto:ihwang125-at-gmail-dot-com">ihwang125 (at) gmail (dot) com</a></h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-entry">
|
||||
@ -688,7 +687,7 @@
|
||||
<div class="team-description">
|
||||
<h4 class="person-name">Vijay Kethanaboyina</h4>
|
||||
<h5 class="person-subtitle">Outreach Manager</h5>
|
||||
<h5 class="person-contact"><span class="discord-text">Discord</span>: SURPRISE!!<span class="discord-tag">#8662</span><br><a class="link" id="email-replace-vijay" target="_blank" href="mailto:vijaykethanaboyina-at-gmail-dot-com" title="Email">vijaykethanaboyina (at) gmail (dot) com</a></h5>
|
||||
<h5 class="person-contact"><span class="discord-text">Discord</span>: SURPRISE!!<span class="discord-tag">#8662</span><br><a class="link tooltip email-link" id="email-replace-vijay" target="_blank" href="mailto:vijaykethanaboyina-at-gmail-dot-com">vijaykethanaboyina (at) gmail (dot) com</a></h5>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
@ -699,7 +698,7 @@
|
||||
<div class="team-description">
|
||||
<h4 class="person-name">James Dinh</h4>
|
||||
<h5 class="person-subtitle">Lead Website Designer</h5>
|
||||
<h5 class="person-contact"><span class="discord-text">Discord</span>: wellfedbison<span class="discord-tag">#0607</span><br><a class="link" id="email-replace-james" target="_blank" href="mailto:jamesdinh77-at-protonmail-dot-com" title="Email">jamesdinh77 (at) protonmail (dot) com</a></h5>
|
||||
<h5 class="person-contact"><span class="discord-text">Discord</span>: wellfedbison<span class="discord-tag">#0607</span><br><a class="link tooltip email-link" id="email-replace-james" target="_blank" href="mailto:jamesdinh77-at-protonmail-dot-com">jamesdinh77 (at) protonmail (dot) com</a></h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-entry">
|
||||
@ -707,7 +706,7 @@
|
||||
<div class="team-description">
|
||||
<h4 class="person-name">Clement Boiteux</h4>
|
||||
<h5 class="person-subtitle">Tech Support</h5>
|
||||
<h5 class="person-contact"><span class="discord-text">Discord</span>: Maul<span class="discord-tag">#8742</span><br><a class="link" id="email-replace-ezra" target="_blank" href="mailto:ezrabridger27-at-gmail-dot-com" title="Email">ezrabridger27 (at) gmail (dot) com</a></h5>
|
||||
<h5 class="person-contact"><span class="discord-text">Discord</span>: Maul<span class="discord-tag">#8742</span><br><a class="link tooltip email-link" id="email-replace-ezra" target="_blank" href="mailto:ezrabridger27-at-gmail-dot-com">ezrabridger27 (at) gmail (dot) com</a></h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-entry">
|
||||
@ -715,7 +714,7 @@
|
||||
<div class="team-description">
|
||||
<h4 class="person-name">Mark Shen</h4>
|
||||
<h5 class="person-subtitle">Tech Support</h5>
|
||||
<h5 class="person-contact"><span class="discord-text">Discord</span>: No Game No life<span class="discord-tag">#4534</span><br><a class="link" id="email-replace-mark" target="_blank" href="mailto:markshen00-at-gmail-dot-com" title="Email">markshen00 (at) gmail (dot) com</a></h5>
|
||||
<h5 class="person-contact"><span class="discord-text">Discord</span>: No Game No life<span class="discord-tag">#4534</span><br><a class="link tooltip email-link" id="email-replace-mark" target="_blank" href="mailto:markshen00-at-gmail-dot-com">markshen00 (at) gmail (dot) com</a></h5>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
@ -726,7 +725,7 @@
|
||||
<div class="team-description">
|
||||
<h4 class="person-name">Bryce Mankovsky</h4>
|
||||
<h5 class="person-subtitle">Marketing Manager</h5>
|
||||
<h5 class="person-contact"><span class="discord-text">Discord</span>: bmank52<span class="discord-tag">#1664</span><br><a class="link" id="email-replace-bryce" target="_blank" href="mailto:brycemankovsky-at-gmail-dot-com" title="Email">brycemankovsky (at) gmail (dot) com</a></h5>
|
||||
<h5 class="person-contact"><span class="discord-text">Discord</span>: bmank52<span class="discord-tag">#1664</span><br><a class="link tooltip email-link" id="email-replace-bryce" target="_blank" href="mailto:brycemankovsky-at-gmail-dot-com">brycemankovsky (at) gmail (dot) com</a></h5>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
@ -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; }
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user