ctrl-hacks.github.io/index.html at main · ctrl-hacks/ctrl-hacks.github.io · 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
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CTRL Hacks '23</title>

		<link rel="shortcut icon" href="public/favicon.ico" type="image/x-icon">

		<script type="module" src="/js/main.js"></script>
		<script type="module" src="/js/firebase.js"></script>
		<script type="module" src="/js/events.js"></script>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	</head>
	<body class="m-0 p-0 relative -z-10">

		<nav id="nav" class="flex items-center justify-between absolute w-full opacity-0 invisible md:mt-6 lg:mt-0">
			<img id="nav-logo" src="./media/images/logo.png" alt="" class="lg:w-14 md:w-28 m-6 hover:scale-110 hover:cursor-pointer transition-all">
			<div class="gap-8 flex md:mr-3 lg:mr-0">
				<p id="nav-about" class="font-space-grotesk lg:text-3xl md:text-5xl font-bold transition-all hover:scale-[1.15] hover:cursor-pointer">About</p>
				<p id="nav-signup" class="font-space-grotesk lg:text-3xl md:text-5xl font-bold transition-all hover:scale-[1.15] hover:cursor-pointer mr-8">Sign Up</p>
			</div>
		</nav>

		<canvas id="c" class="fixed top-0 w-screen h-screen -z-10 "></canvas>
		<!-- <div class="w-16 h-16 bg-red-600">WHAT</div> -->

		<section id="home" class="h-screen flex flex-col justify-center items-center text-center mx-10 invisible opacity-0">
			<div id="hero" class="flex flex-col justify-center items-center gap-2 h-2/3">
				<h2 class="font-normal lg:text-2xl md:text-[2.6rem] md:w-[90%] lg:w-auto">Thanks for taking part! Check out the closing ceremonies <a href="https://www.youtube.com/watch?v=60UWrAJM4zY" target="_blank" class="text-blue-500 underline">here</a>!</h2>
				<div class="flex gap-2 my-2">
					<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="lg:w-8 lg:h-8 md:w-12 md:h-12 my-auto"> <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" /> </svg>
					<h3 class="font-space-grotesk lg:text-2xl md:text-[2.6rem] mt-0">Sept. 21-25, 2023</h3>
				</div>
				<button id="signup-btn" class="lg:px-8 lg:py-4 md:px-14 md:py-9 lg:mt-4 md:mt-8 font-space-grotesk lg:text-2xl md:text-5xl bg-white/[0.18] border-1 border-white/[0.18] rounded-lg backdrop-blur-[0.4px] transition-all hover:cursor-pointer rainbow-glow">SIGN UP</button>
				<h4 id="success-msg" class="opacity-0 hidden text-xl mt-4 py-4">Thanks for signing up!</h4>

				<div id="sponsors" class="lg:-mb-48 lg:mt-16 md:-mb-48 md:mt-20">
					<h4 class="font-space-grotesk text-white lg:text-lg md:text-[2.1rem] lg:w-full md:w-3/4 md:mx-auto text-center lg:mb-6 md:mb-8">A HUGE THANK YOU TO ALL OF OUR SPONSORS!</h4>
					<div id="sponsor-cloud" class="grid lg:grid-cols-4 md:grid-cols-1 place-items-center lg:gap-x-4 lg:gap-y-8 md:gap-8">
						<!-- Note to self: change grid-cols to 3 or 4 when we get more sponsors -->
						<a href="https://www.postman.com/" target="_blank"> <img class="lg:h-8 md:h-16" src="./media/images/sponsor-cloud/postman-logo.png" alt="Postman Logo"> </a>
 						<a href="https://gen.xyz/" target="_blank"> <img class="lg:h-8 md:h-16" src="./media/images/sponsor-cloud/xyz-logo-white.png" alt=".xyz Domains Logo"> </a>
 						<a href="https://www.interviewcake.com/" target="_blank"> <img class="lg:h-8 md:h-16" src="./media/images/sponsor-cloud/interview-cake-logo.png" alt="Interview Cake Logo"> </a>
						<a href="https://www.wolframalpha.com/" target="_blank"> <img class="lg:h-8 md:h-16" src="./media/images/sponsor-cloud/wolfram-alpha-logo.png" alt="Wolfram Alpha Logo"> </a>
						<a href="https://www.axure.com/" target="_blank"> <img class="lg:h-8 md:h-16" src="./media/images/sponsor-cloud/axurelogo.png" alt="Axure Logo"> </a>
						<a href="https://www.echo3d.com/" target="_blank"> <img class="lg:h-8 md:h-16" src="./media/images/sponsor-cloud/echo-3d-logo.png" alt="Echo 3D Logo"> </a>
						<a href="https://certopus.com/" target="_blank"> <img class="lg:h-8 md:h-16" src="./media/images/sponsor-cloud/certopus-logo.png" alt="Certopus Logo"> </a>
					</div>
				</div>
			</div>

		</section>

		<section id="about" class="h-screen w-full absolute top-0 -z-10 hidden opacity-0">
			<div class="absolute top-[35%] lg:w-[40%] lg:left-[15%] md:w-[80%] md:left-[10%] z-10 ">
				<p class="text-white lg:text-xl lg:text-left md:text-[2.6rem] md:text-center">A
					<span class="font-bold font-space-grotesk bg-gradient-to-r from-blue-600 to-indigo-400 inline-block text-transparent bg-clip-text">HACKATHON</span>
					is a timed event where you build a solution based on a given
					<span class="font-bold font-space-grotesk bg-gradient-to-r from-red-500 to-orange-400 inline-block text-transparent bg-clip-text">THEME.</span>
					CTRL Hacks takes place over
					<span class="font-bold font-space-grotesk bg-gradient-to-r from-green-500 to-emerald-600 inline-block text-transparent bg-clip-text">96 HOURS</span>,
					offering you the chance you level up your coding skills.
					<br><br>

					The theme has been released! Check out the <a href="https://www.youtube.com/watch?v=PkNQ-rA_2PU" target="_blank">reveal video here</a>!
					This year's theme is <span class="font-bold font-space-grotesk bg-gradient-to-r from-pink-400 to-purple-500 inline-block text-transparent bg-clip-text">TECHNOLOGY IN LEARNING</span>! Whether you make a productivity app or a robot that teaches you science, the floor is yours!
					<br><br>


					For more info, visit out <a href="https://ctrl-hacks.devpost.com/" target="_blank" class="text-blue-500 underline">Devpost</a>, where the hackathon will take place.
				</p>
				<h4 class="font-space-grotesk font-bold lg:text-3xl md:text-7xl mt-12">FAQs</h4>
				<div id="FAQs" class="mb-12 lg:text-base md:text-[2.2rem]">
					<div>
					  <h2 class="mb-0" id="headingOne">
						<button
						  class="group relative flex w-full items-center px-5 py-4 [&:not([data-te-collapse-collapsed])]:text-blue-400"
						  type="button"
						  data-te-collapse-init
						  data-te-target="#collapseOne"
						  aria-expanded="true"
						  aria-controls="collapseOne">
						  Are there any prizes?
						  <span
							class="ml-auto h-5 w-5 shrink-0 rotate-[-180deg] fill-[#336dec] transition-transform duration-200 ease-in-out group-[[data-te-collapse-collapsed]]:rotate-0 group-[[data-te-collapse-collapsed]]:fill-[#212529] motion-reduce:transition-none dark:fill-blue-300 dark:group-[[data-te-collapse-collapsed]]:fill-white">
							<svg
							  xmlns="http://www.w3.org/2000/svg"
							  fill="none"
							  viewBox="0 0 24 24"
							  stroke-width="1.5"
							  stroke="currentColor"
							  class="lg:h-6 lg:w-6 md:h-9 md:w-9">
							  <path
								stroke-linecap="round"
								stroke-linejoin="round"
								d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
							</svg>
						  </span>
						</button>
					  </h2>
					  <div
						id="collapseOne"
						class="!visible"
						data-te-collapse-item
						data-te-collapse-show
						aria-labelledby="headingOne"
						data-te-parent="#FAQs">
						<div class="pr-5 pl-10 py-4">
						  Of course! All prizes will be announced closer to the hackathon. Expect a mix of cash and sponsor-provided prizes, with distinct prizes for the top three projects.
						</div>
					  </div>
					</div>

					<div>
						<h2 class="mb-0" id="headingTwo">
						  <button
							class="group relative flex w-full items-center px-5 py-4 [&:not([data-te-collapse-collapsed])]:text-blue-400"
							type="button"
							data-te-collapse-init
							data-te-collapse-collapsed
							data-te-target="#collapseTwo"
							aria-expanded="false"
							aria-controls="collapseTwo">
							Do I need a team? Is there a max team size?
							<span
							  class="-mr-1 ml-auto h-5 w-5 shrink-0 rotate-[-180deg] fill-[#336dec] transition-transform duration-200 ease-in-out group-[[data-te-collapse-collapsed]]:mr-0 group-[[data-te-collapse-collapsed]]:rotate-0 group-[[data-te-collapse-collapsed]]:fill-[#212529] motion-reduce:transition-none dark:fill-blue-300 dark:group-[[data-te-collapse-collapsed]]:fill-white">
							  <svg
								xmlns="http://www.w3.org/2000/svg"
								fill="none"
								viewBox="0 0 24 24"
								stroke-width="1.5"
								stroke="currentColor"
								class="lg:h-6 lg:w-6 md:h-9 md:w-9">
								<path
								  stroke-linecap="round"
								  stroke-linejoin="round"
								  d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
							  </svg>
							</span>
						  </button>
						</h2>
						<div
						  id="collapseTwo"
						  class="!visible hidden"
						  data-te-collapse-item
						  aria-labelledby="headingTwo"
						  data-te-parent="#FAQs">
						  <div class="pr-5 pl-10 py-4">
							  <p>You can particpate alone or in a team. The max team size is four people.</p>
						  </div>
						</div>
					</div>

					<div>
						<h2 class="mb-0" id="headingThree">
						  <button
							class="group relative flex w-full items-center px-5 py-4 [&:not([data-te-collapse-collapsed])]:text-blue-400"
							type="button"
							data-te-collapse-init
							data-te-collapse-collapsed
							data-te-target="#collapseThree"
							aria-expanded="false"
							aria-controls="collapseThree">
							What if I can't code?
							<span
							  class="-mr-1 ml-auto h-5 w-5 shrink-0 rotate-[-180deg] fill-[#336dec] transition-transform duration-200 ease-in-out group-[[data-te-collapse-collapsed]]:mr-0 group-[[data-te-collapse-collapsed]]:rotate-0 group-[[data-te-collapse-collapsed]]:fill-[#212529] motion-reduce:transition-none dark:fill-blue-300 dark:group-[[data-te-collapse-collapsed]]:fill-white">
							  <svg
								xmlns="http://www.w3.org/2000/svg"
								fill="none"
								viewBox="0 0 24 24"
								stroke-width="1.5"
								stroke="currentColor"
								class="lg:h-6 lg:w-6 md:h-9 md:w-9">
								<path
								  stroke-linecap="round"
								  stroke-linejoin="round"
								  d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
							  </svg>
							</span>
						  </button>
						</h2>
						<div
						  id="collapseThree"
						  class="!visible hidden"
						  data-te-collapse-item
						  aria-labelledby="headingThree"
						  data-te-parent="#FAQs">
						  <div class="pr-5 pl-10 py-4">
							  <p>Fear not! We encourage you to participate, especially if you can't code! There will be non-code prize tracks if you are interested in simply designing a solution, but if you are up to it - a hackathon is the perfect place to learn how to code! We will provide coding tutorials and workshops to help you get started.</p>
						  </div>
						</div>
					  </div>

					  <div>
						<h2 class="mb-0" id="headingFour">
						  <button
							class="group relative flex w-full items-center px-5 py-4 [&:not([data-te-collapse-collapsed])]:text-blue-400"
							type="button"
							data-te-collapse-init
							data-te-collapse-collapsed
							data-te-target="#collapseFour"
							aria-expanded="false"
							aria-controls="collapseFour">
							Is the Hackathon only in Calgary?
							<span
							  class="-mr-1 ml-auto h-5 w-5 shrink-0 rotate-[-180deg] fill-[#336dec] transition-transform duration-200 ease-in-out group-[[data-te-collapse-collapsed]]:mr-0 group-[[data-te-collapse-collapsed]]:rotate-0 group-[[data-te-collapse-collapsed]]:fill-[#212529] motion-reduce:transition-none dark:fill-blue-300 dark:group-[[data-te-collapse-collapsed]]:fill-white">
							  <svg
								xmlns="http://www.w3.org/2000/svg"
								fill="none"
								viewBox="0 0 24 24"
								stroke-width="1.5"
								stroke="currentColor"
								class="lg:h-6 lg:w-6 md:h-9 md:w-9">
								<path
								  stroke-linecap="round"
								  stroke-linejoin="round"
								  d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
							  </svg>
							</span>
						  </button>
						</h2>
						<div
						  id="collapseFour"
						  class="!visible hidden"
						  data-te-collapse-item
						  aria-labelledby="headingFour"
						  data-te-parent="#FAQs">
						  <div class="pr-5 pl-10 py-4">
							  <p>Since our hackathon is Calgary-centered, we have two prize tracks. One for those inside Calgary, and another for those outside Calgary. We also offer prizes for the best no-code solution, and a popular choice award. More info is on our <a class="text-blue-500 underline" href="https://ctrl-hacks.devpost.com/">devpost</a>.</p>
						  </div>
						</div>
					</div>
				  </div>
			</div>
		</section>

		<div id="modal" class="p-8 lg:w-3/5 lg:h-3/5 md:w-4/5 md:h-2/5 absolute flex justify-center items-center flex-col lg:gap-4 md:gap-8 lg:top-[20%] lg:left-[20%] md:top-[30%] md:left-[10%] font-space-grotesk text-2xl bg-white/[0.2] border-1 rounded-xl border-white/[0.6] backdrop-blur-[12px] rainbow-ambient invisible opacity-0">
			<svg xmlns="http://www.w3.org/2000/svg" id="modalClose" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-10 h-10 absolute top-6 right-6 hover:scale-125 hover:cursor-pointer transition-all"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
			<h2 class="font-space-grotesk font-bold lg:text-5xl md:text-8xl w-full text-center">STAY TUNED FOR CTRL HACKS '25!</h2>
			<h4 class="text-center lg:text-xl md:text-[2.6rem] leading-normal">Check out our <a class="tex text-blue-400 underline" href="https://ctrl-hacks.devpost.com/" target="_blank">devpost</a> for more frequent updates.</h4>
			<!-- <div class="flex gap-2 w-3/5 mt-4 justify-center">
				<input type="text" id="email-input" placeholder="example@gmail.com" class="rounded-lg text-black p-4 w-full text-center outline-none">
				<svg id="signup-submit" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12 my-auto hover:scale-125 hover:cursor-pointer transition-all"> <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" /></svg>
			</div> -->
		</div>

		<div id="mobileAlert" class="absolute w-[80%] left-[10%] bottom-[15%] bg-green-400 text-3xl text-center rounded-lg opacity-0 invisible">
			<h4 class="p-8 text-black lg:text-3xl md:text-4xl">Look's like you're viewing this page on mobile. For the best viewing experience, try taking a look on a wider screen!</h4>
		</div>
	</body>
</html>