From 23426a3a9bb2cd4b774e83d7e7c7f477413daeff Mon Sep 17 00:00:00 2001 From: James Dinh Date: Tue, 31 May 2022 00:57:35 -0700 Subject: [PATCH] Added Timeline --- css/general.css | 259 +++++++++++++++++++++++++++++++++++++++++++++++- index.html | 93 ++++++++++++++++- js/timeline.js | 12 --- 3 files changed, 350 insertions(+), 14 deletions(-) delete mode 100644 js/timeline.js diff --git a/css/general.css b/css/general.css index 08e9a5e..d37c9f0 100644 --- a/css/general.css +++ b/css/general.css @@ -466,4 +466,261 @@ footer li { footer a { color:rgb(108, 176, 231); font-size: 16px; -} \ No newline at end of file +} + +/* Timeline */ +#timeline { + width: 100%; + height: 100%; + text-align: center; +} + +#timeline-heading { + text-align: center; + margin-top: 20px; + } + +.flex-parent { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + } + +.input-flex-container { + display: flex; + justify-content: space-around; + align-items: center; + flex-wrap: wrap; + width: 80%; + max-width: 1000px; + position: relative; + z-index: 0; + } + +input { + width: 25px; + height: 25px; + background-color: #2C3E50; + position: relative; + border-radius: 50%; + display: block; + appearance: none; + cursor: pointer; + } +input:focus { + outline: none; + } +input::before, input::after { + content: ""; + display: block; + position: absolute; + z-index: -1; + top: 50%; + transform: translateY(-50%); + background-color: #2C3E50; + width: 6vw; + height: 5px; + } + input::before { + right: calc(2vw); + } + input::after { + left: calc(1vw); + } + input:checked { + background-color: #2C3E50; + } + input:checked::before { + background-color: #2C3E50; + } + input:checked::after { + background-color: #AEB6BF; + } + input:checked ~ input, input:checked ~ input::before, input:checked ~ input::after { + background-color: #AEB6BF; + } + input:checked + .dot-info span { + font-size: 13px; + color: rgb(243, 174, 252); + font-weight: bold; + } + + .dot-info { + width: 25px; + height: 25px; + display: block; + visibility: hidden; + position: relative; + z-index: -1; + left: calc((((80vw - 25px) / 20) * -1) - 1px); + } + .dot-info span { + visibility: visible; + position: absolute; + font-size: 12px; + } + .dot-info span.year { + bottom: -30px; + right: -0.2vw; + /* transform: translateX(-60%); */ + } + .dot-info span.label { + top: -56px; + left: -10px; + transform: rotateZ(-45deg); + width: 70px; + text-indent: -10px; + } + + #timeline-descriptions-wrapper { + width: 100%; + margin-top: 70px; + font-size: 22px; + font-weight: 400; + margin-bottom: 200px; + text-align: left; + } + #timeline-descriptions-wrapper div { + margin-top: 0; + display: none; + } + + .timeline-description { + font-size: 16px; + font-weight: normal; + } + + .timeline-description-subtitle { + font-size: 18px; + color: rgb(121, 120, 120); + } + + .timeline-description-list li { + margin: 10px 40px; + font-size: 16px; + } + + .important-text { + color: rgb(255, 126, 126); + } + + input[data-description="1"]:checked ~ #timeline-descriptions-wrapper div[data-description="1"] { + display: block; + } + + input[data-description="2"]:checked ~ #timeline-descriptions-wrapper div[data-description="2"] { + display: block; + } + + input[data-description="3"]:checked ~ #timeline-descriptions-wrapper div[data-description="3"] { + display: block; + } + + input[data-description="4"]:checked ~ #timeline-descriptions-wrapper div[data-description="4"] { + display: block; + } + + input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-description="5"] { + display: block; + } + + @media (min-width: 1250px) { + input::before { + left: -37.5px; + } + input::after { + right: -37.5px; + } + + .dot-info { + left: calc((((1000px - 25px) / 20) * -1) - 1px); + } + + #timeline-descriptions-wrapper { + margin-left: -37.5px; + } + } + @media (max-width: 630px) { + .flex-parent { + justify-content: initial; + } + + .input-flex-container { + flex-wrap: wrap; + justify-content: center; + width: 400px; + height: auto; + margin-top: 15vh; + margin-left: 0; + padding-bottom: 30px; + } + + input, .dot-info { + width: 60px; + height: 60px; + margin: 0 10px 50px; + } + + input { + background-color: transparent !important; + z-index: 1; + } + input::before, input::after { + content: none; + } + input:checked + .dot-info { + background-color: #2C3E50; + } + input:checked + .dot-info span.year { + font-size: 14px; + } + input:checked + .dot-info span.label { + font-size: 12px; + } + + .dot-info { + visibility: visible; + border-radius: 50%; + z-index: 0; + left: 0; + margin-left: -70px; + background-color: #AEB6BF; + } + .dot-info span.year { + top: 0; + left: 0; + transform: none; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + color: #ECF0F1; + } + .dot-info span.label { + top: calc(100% + 5px); + left: 50%; + transform: translateX(-50%); + text-indent: 0; + text-align: center; + } + + #timeline-descriptions-wrapper { + margin-top: 30px; + margin-left: 0; + text-align: center; + } + } + @media (max-width: 480px) { + .input-flex-container { + width: 340px; + } + } + @media (max-width: 400px) { + .input-flex-container { + width: 300px; + } + } \ No newline at end of file diff --git a/index.html b/index.html index 9f28237..d22dd75 100644 --- a/index.html +++ b/index.html @@ -89,8 +89,98 @@
  • Aug 12-14 -> Summer 2022 Hackathon
    • -
  • Our program is dedicated to providing the Gilroy/Morgan Hill/Hollister youth with the opportunity to develop their coding skills. We specialize in hackathons where students participate in teams and compete for prizes. Students can create their own teams or if they are competing individually, we will assign teams based on experience level and programming language. For this hackathon, we plan on grouping at least one experienced person with novices so that no one is out of their depth. The current estimate is that there will be one or two experienced people and two novices in each team for this contest. However, depending on the number of participants, we may decrease team size if not enough people participate.
    • +
  • Our program is dedicated to providing the Gilroy/Morgan Hill/Hollister youth with the opportunity to develop their coding skills. We specialize in hackathons where students participate in teams and compete for prizes.
    • + +
    +

    Timeline

    +
    +
    + +
    + 8/12 6:00pm + Opening Ceremony +
    + +
    + 8/12 6:30pm + Hacking Begins +
    + +
    + 8/14 12:00pm + Hacking Ends +
    + +
    + 8/14 2:00pm + Project Presentations +
    + +
    + 8/14 3:30pm + Awards Ceremony +
    +
    +
    +

    Opening Ceremony

    +
    8/12 | 6:00pm - 6:30pm

    +

    The official start of the hackathon where we deliver the opening presentation along with the final teams, prompts, rules, and timeline.
    +

      +
    • You are required to attend this portion of the hackathon to participate
      • +
    • =IMPORTANT= DO NOT START CODING during this period
      • +
    +

    +
    +
    +

    Hacking Begins

    +
    8/12 | 6:30pm

    +

    + Now's your time to shine! Start working with your team to build your project. No strings attached! +

      +
    • =IMPORTANT= Your project must follow the given prompt and guidelines; otherwise, your team may lose a lot of points for unrelated topic
      • +
    • Remember, you only have 44 hours to complete your project... Use your time wisely
      • +
    +

    +
    +
    +

    Hacking Ends

    +
    8/14 | 12:00pm

    +

    STOP coding! Your 44 hours of intense stress and turmoil are finally up! We hope you learned some valuable skills and met some new friends along the way.
    +

      +
    • =IMPORTANT= Make sure you turn in your project BEFORE the deadline at 12:30pm. You can find the submission form on the Discord server or Submit Here
      • +
    • Don't leave yet though, because you still need to present your project to the judges
      • +
    • From now until Project Presentations (2:00pm), your team will have around 2 hours to prepare for your presentation. Get back to work!
      • +
    +

    +
    +
    +

    Project Presentations

    +
    8/14 | 2:00pm - 3:00pm

    +

    This is where your team will present your product to our honored judges.
    +

      +
    • Be Creative! Make your product stand out by including a demo or showing its function across multiple sources
      • +
    • Presentations will occur in order of team number (i.e. Team 1 will go first)
      • +
    • It is advised you have your camera on and that you ensure your microphone and tech work before presenting
      • +
    • =IMPORTANT= 5 minutes max per team. Your team is not allowed to go ABOVE those 5 minutes... Use your time wisely.
      • +
    • Your team will be graded on both the product and presenting as per the rubric
      • +
    +

    +
    +
    +

    Awards Ceremony

    +
    8/14 | 3:30pm - 4:00pm

    +

    Congratuations! Judge scores are tallied and here's where we announce the 1st, 2nd, and 3rd place teams along with positive feedback.
    +

      +
    • Winners: we will contact you via Email about your prizes, allow up to 2 days for a response
      • +
    • For Questions, ask in the Discord server (#ask-questions), or contact tech support at tech@gilroyhacks.com
      • +
    +

    +
    +
    +
    +
    +

    STEPS

    @@ -140,6 +230,7 @@

    Rules

    +

    Prizes

    diff --git a/js/timeline.js b/js/timeline.js deleted file mode 100644 index 1d80480..0000000 --- a/js/timeline.js +++ /dev/null @@ -1,12 +0,0 @@ -$(function () { - var inputs = $(".input"); - var paras = $(".description-flex-container").find("p"); - inputs.click(function () { - var t = $(this), - ind = t.index(), - matchedPara = paras.eq(ind); - - t.add(matchedPara).addClass("active"); - inputs.not(t).add(paras.not(matchedPara)).removeClass("active"); - }); -});