owlhacks/index.html at main · FAUHSCoding/owlhacks · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>OwlHacks 2025</title>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <div class="container">
      <h1>OwlHacks 2025</h1>
      <p class="tagline">FAU High School's inaugural student-run hackathon</p>
      <p class="dates">March 29 - March 31</p>
      <p class="event-ended">The hackathon has ended. Thank you for your interest!</p>

      <div class="cta">
        <a href="https://owlhacks25.devpost.com/" class="btn">View Projects</a>
      </div>
    </div>
  </header>

  <section id="about" class="section hidden">
    <div class="container">
      <h2>About OwlHacks 2025</h2>

      <img src="assets/fauhs1.jpg" alt="About OwlHacks" class="section-image">
      <p>
        OwlHacks 2025 was FAUHS's first-ever entirely student-run hackathon.
        We gave participants 36 hours to build whatever wild, quirky, or surprisingly brilliant project they could dream up.
        Students brought their best ideas and competed for some truly amazing prizes. Thank you to everyone who participated!
        Check out the amazing projects on our <a href="https://owlhacks25.devpost.com/">Devpost page</a>.
      </p>
    </div>
  </section>

  <section id="tracks" class="section hidden">
    <div class="container">
      <h2>Hackathon Tracks</h2>
      <div class="tracks-grid">
        <div class="track">
          <h3>Web Development</h3>
          <p>
            From sleek portfolios to the most cursed websites imaginable, the Web
            Development track is your playground. Whether you're building the next big thing
            or just an inside joke, this track is all about bringing your best ideas to the
            web.
          </p>
          <a href="https://owlhacks25.devpost.com/">View Projects</a>
        </div>
        <div class="track">
          <h3>Hardware</h3>
          <p>
            The Hardware track is where you bring your gadgets, microcontrollers, sensors,
            and all things physical to life. With Arduinos and a variety of sensors available,
            you’ve got the tools you need to make something awesome—or just ridiculously fun.
          </p>
          <a href="https://owlhacks25.devpost.com/">View Projects</a>
        </div>
        <div class="track">
          <h3>Game Development</h3>
          <p>
            Ready to turn your wildest game ideas into playable chaos? This track is where you
            get to build everything from simple 2D games to mind-bending experiences. Creativity
            and gameplay take center stage—anything can happen.
          </p>
          <a href="https://owlhacks25.devpost.com/">View Projects</a>
        </div>
        <div class="track">
          <h3>Open-Ended</h3>
          <p>
            For the hackers who don’t fit neatly into a box, the Open-Ended track welcomes any
            project idea—no theme, no limitations, just pure hacking potential. If you can
            imagine it, you can build it!
          </p>
          <a href="https://owlhacks25.devpost.com/">View Projects</a>
        </div>
      </div>
    </div>
  </section>


  <section id="awards" class="section hidden">
    <div class="container">

        <h2>Awards</h2>


      <!-- Awards Grid -->
      <div class="awards-grid">
        <!-- 1. Best Beginner Hacks -->
        <div class="award-card">
          <h3>Best Beginner Hacks</h3>
          <p>
            This award celebrates the freshest ideas from participants just starting their
            hackathon journey. Creativity and clarity in presentation are key here—if you can
            explain your idea in a way that makes everyone go, “That’s genius!” you’ve already
            won half the battle.
          </p>
        </div>

        <!-- 2. Best Advanced Hacks -->
        <div class="award-card">
          <h3>Best Advanced Hacks</h3>
          <p>
            This award recognizes the most technically impressive projects that push the limits
            of coding, design, and execution. If your hack blends ingenuity with intricate
            execution—presenting something that’s both brilliant and functional—this one’s for you.
          </p>
        </div>

        <!-- 3. Track Awards -->
        <div class="award-card">
          <h3>Track Awards</h3>
          <p>
            Best Web Dev Project, Best Game, Best Hardware Project — these awards recognize the
            most technically impressive projects in each track. If your hack blends ingenuity
            with intricate execution, you’ve got a solid shot at these.
          </p>
        </div>

        <!-- 4. Popular Vote Award (hidden by default) -->
        <div class="award-card hidden-award">
          <h3>Popular Vote Award</h3>
          <p>
            This award is chosen by your fellow hackers. The project with the most votes from
            participants takes home the prize. May the crowd be ever in your favor!
          </p>
        </div>

        <!-- 5. Most Cursed Code (hidden by default) -->
        <div class="award-card hidden-award">
          <h3>Most Cursed Code</h3>
          <p>
            This award goes to the hack that might make your eyes bleed, but is too amusing
            to ignore. Think questionable variable names, bizarre architecture, or
            unpredictably glitchy results — the more cursed, the better!
          </p>
        </div>

        <!-- 6. Most Useless Project (hidden by default) -->
        <div class="award-card hidden-award">
          <h3>Most Useless Project</h3>
          <p>
            Celebrating the project that accomplishes absolutely nothing — yet does it in a
            way that’s hilariously memorable. If your hack solves no real problem (or invents
            a new one), you might just win this one!
          </p>
        </div>
      </div>

      <!-- "Show More" Button -->
      <div class="show-more-container">
        <button class="show-more-btn">Show More</button>
      </div>
    </div>
  </section>


  <section id="schedule" class="section hidden">
    <div class="container">
      <h2>Schedule</h2>
      <div class="schedule-item">
        <h3>Day 1</h3>
        <p>Details coming soon.</p>
      </div>
      <div class="schedule-item">
        <h3>Day 2</h3>
        <p>Details coming soon.</p>
      </div>
      <div class="schedule-item">
        <h3>Day 3</h3>
        <p>During coding club</p>
      </div>
    </div>
  </section>

    <!-- FAQ Accordion Section -->
    <section id="faq" class="section hidden">
      <div class="container">
        <h2>Frequently Asked Questions</h2>

        <div class="accordion">
          <!-- FAQ 1 -->
          <div class="accordion-item">
            <button class="accordion-header">
              Who can attend OwlHacks 2025?
            </button>
            <div class="accordion-content">
              <p>
                Any FAUHS student interested in building projects, learning new
                technologies, and having fun is welcome to join. Beginners and experts alike!
              </p>
            </div>
          </div>
          <!-- FAQ 2 -->
          <div class="accordion-item">
            <button class="accordion-header">
              What should I bring?
            </button>
            <div class="accordion-content">
              <p>
                Bring your laptop, chargers, and any hardware you want to use. We’ll
                provide basic supplies, snacks, and a great hacking environment!
              </p>
            </div>
          </div>
          <!-- FAQ 3 -->
          <div class="accordion-item">
            <button class="accordion-header">
              How do I sign up?
            </button>
            <div class="accordion-content">
              <p>
                Simply click the “Sign Up” button at the top or fill out the interest form.
                You’ll receive additional details and announcements via email.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>

  <footer>
    <div class="container">
      <p>&copy; 2025 OwlHacks. All rights reserved.</p>
      <p>See all hackathon submissions on <a href="https://owlhacks25.devpost.com/" class="footer-link">Devpost</a></p>
    </div>
  </footer>

  <script src="script.js"></script>
</body>
</html>