-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
334 lines (319 loc) · 18.2 KB
/
Copy pathindex.html
File metadata and controls
334 lines (319 loc) · 18.2 KB
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
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A student led team dedicated to model rockets, open to anyone regardless of major.">
<title>UofT STAR - University of Toronto Student Team for Amateur Rocketry</title>
<link rel="icon" type="image/webp" href="UTSTAR_logo.webp">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<!-- Global Stars Background -->
<div class="stars-background"></div>
<!-- Navigation -->
<nav class="navbar">
<div class="nav-container">
<div class="nav-logo">
<img src="Images/UTSTAR_logo.webp" alt="UofT STAR Logo" class="logo-img">
<span>UofT STAR</span>
</div>
<ul class="nav-menu">
<li class="nav-item">
<a href="#home" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#about" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#projects" class="nav-link">Projects</a>
</li>
<li class="nav-item">
<a href="#events" class="nav-link">Events</a>
</li>
<li class="nav-item">
<a href="#team" class="nav-link">Team</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">Contact</a>
</li>
<!--
<li class="nav-item">
<a href="constitution.html" class="nav-link">Constitution</a>
</li>
-->
<li class="nav-item">
<a href="trivia.html" class="nav-link">Trivia</a>
</li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</nav>
<!-- Banner Section -->
<section class="banner">
<div class="banner-image">
<img src="Images/LaunchGroupPic.jpeg" alt="UofT STAR Team Launch" style="background-attachment: fixed">
<div class="banner-overlay"></div>
</div>
</section>
<!-- Hero Section -->
<section id="home" class="hero">
<div class="hero-content">
<h1 class="hero-title">University of Toronto<br><span class="highlight">Student Team for Amateur Rocketry</span></h1>
<p class="hero-description">We are a student-led team dedicated to the design, testing, and launch of model rockets, while fostering education in rocketry for all who are interested.
We have a multitude of engineering divisions and are always welcome to new members.
Click below to learn more!</p>
<div class="hero-buttons">
<a href="#about" class="btn btn-primary">Learn More</a>
<a href="https://forms.gle/isJRaBi8EYFYcJYL7" class="btn btn-secondary" target="_blank" rel="noopener">Join Us</a>
</div>
</div>
<div class="hero-animation">
<div class="planet planet-1"></div>
<div class="planet planet-2"></div>
<div class="planet planet-3"></div>
</div>
</section>
<!-- About Section -->
<section id="about" class="section">
<div class="container">
<h2 class="section-title">About UofT STAR</h2>
<div class="about-content">
<div class="about-text">
<p>
We are the University of Toronto Student Team for Amateur Rocketry (UofT STAR / UTSTAR). Our mission is to design and test team-built model rockets and educate and help new rocketeers progress in the hobby!
</br>
UofT STAR is the only rocketry team run by students of the Faculty of Arts & Science (FAS).
Our goal is to be the go-to rocketry team for anybody in the University looking to learn about or find a community for rocketeers.
Students who want hands-on experience in CAD, solid rocket propulsion, and flight computers or avionics will find just that on our team!
</p>
<div class="features" id="featuresGrid">
<!-- Features will be loaded from website-data.json -->
<div class="loading-placeholder">
<i class="fas fa-spinner fa-spin"></i>
<p>Loading features...</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Removed President's Message Section
<!- President's Message Section ->
<section id="presidents-message" class="section">
<div class="container">
<h2 class="section-title">President's Message</h2>
<div class="about-content">
<div class="about-text" style="text-align: center; max-width: 900px; margin: 0 auto;">
<div style="background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 3rem; backdrop-filter: blur(10px);">
<div style="width: 80px; height: 80px; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); border-radius: 50%; margin: 0 auto 2rem; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; font-weight: 700;">
<i class="fas fa-user-astronaut"></i>
</div>
<p style="font-size: 1.1rem; line-height: 1.8; margin-bottom: 1.5rem;">Hi there! I am <b>Faredoon Dastur</b>, the President and Founder of the U of T Student Team for Amateur Rocketry (UofT STAR). As a second‑year Math and Physics double‑major with a serious interest in spaceflight and model rocketry, I decided to take my hobby one notch higher by assembling a team of students who share my passion. I am thrilled to have an executive committee of eight students who are competent and committed to achieving our project goals.</p>
<p style="font-size: 1.1rem; line-height: 1.8; margin-bottom: 1.5rem;">UofT STAR is the only rocketry team run by students of the Faculty of Arts & Science (FAS). Our vision is to become the go‑to rocketry team for FAS students and, eventually, the wider university. Students who want hands‑on experience in CAD and solid modeling, fluid dynamics, propulsion, and avionics will find our team a great fit—without compromising academic commitments.</p>
<p style="font-size: 1.1rem; line-height: 1.8; margin-bottom: 2rem;">Our mission is to design, test, and launch mid‑ to large‑scale model rockets, each showcasing a unique technology. Our first project aims to demonstrate a model rocket that can <em style="color: var(--accent);">propulsively land without a parachute</em>. We welcome all experience levels. We'd love to have you on board!</p>
<div style="margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;">
<a href="https://forms.gle/isJRaBi8EYFYcJYL7" class="btn btn-primary" target="_blank" rel="noopener">Apply to Join</a>
<a href="https://www.instagram.com/uoftstar/" class="btn btn-secondary" target="_blank" rel="noopener">Follow @uoftstar</a>
</div>
</div>
</div>
</div>
</div>
</section>
-->
<!-- Projects Section -->
<section id="projects" class="section">
<div class="container">
<h2 class="section-title">Project List</h2>
<div class="projects-grid" id="projectsGrid">
<!-- Projects will be loaded from website-data.json -->
<div class="loading-placeholder">
<i class="fas fa-spinner fa-spin"></i>
<p>Loading projects...</p>
</div>
</div>
</div>
</section>
<!-- Events Section -->
<section id="events" class="section">
<div class="container">
<h2 class="section-title">Get Involved</h2>
<div class="about-content" style="text-align: center; max-width: 800px; margin: 0 auto;">
<div class="about-text">
<p>
We're always open to new members and recruit throughout the year. No prior experience required! We're looking for anybody interested in model rocketry, engineering, or design!
</br>
</br>
Interested in joining our community? Check out our socials or click on our Application form below so we can send you the link to our discord!
</p>
<div style="margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;">
<a href="https://forms.gle/isJRaBi8EYFYcJYL7" class="btn btn-primary" target="_blank" rel="noopener">Apply to Join</a>
<a href="https://www.instagram.com/uoftstar/" class="btn btn-secondary" target="_blank" rel="noopener">Follow @uoftstar</a>
</div>
</div>
</div>
</div>
</section>
<!-- Team Section -->
<section id="team" class="section">
<div class="container">
<h2 class="section-title">Leadership Team</h2>
<div class="team-grid" id="teamGrid">
<!-- Team members will be loaded from website-data.json -->
<div class="loading-placeholder">
<i class="fas fa-spinner fa-spin"></i>
<p>Loading team members...</p>
</div>
</div>
<div style="text-align: center; margin-top: 2rem;">
<p style="color: var(--muted);">We're a diverse group of students spanning physics, engineering, computer science, and more. Our executive committee leads various subsystems while fostering a collaborative learning environment.</p>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="section">
<div class="container">
<h2 class="section-title">Contact Us</h2>
<div class="contact-content">
<div class="contact-info">
<h3>Connect With UofT STAR</h3>
<p>Have questions about joining our team or want to learn more about our projects? We'd love to hear from you!</p>
<div class="contact-details">
<div class="contact-item">
<i class="fas fa-envelope"></i>
<span>info.utstar@gmail.com</span>
</div>
<div class="contact-item">
<i class="fas fa-map-marker-alt"></i>
<span>University of Toronto, Faculty of Arts & Science</span>
</div>
<div class="contact-item">
<i class="fas fa-users"></i>
<span>Open to all UofT students - all experience levels welcome</span>
</div>
</div>
<div class="social-links">
<a href="https://www.instagram.com/uoftstar/" class="social-link" target="_blank" rel="noopener"><i class="fab fa-instagram"></i></a>
<a href="mailto:info.utstar@gmail.com" class="social-link"><i class="fas fa-envelope"></i></a>
<a href="https://forms.gle/isJRaBi8EYFYcJYL7" class="social-link" target="_blank" rel="noopener"><i class="fas fa-rocket"></i></a>
</div>
</div>
<div class="contact-form">
<form id="contactForm">
<div class="form-group">
<input type="text" id="name" name="name" placeholder="Your Name" required>
</div>
<div class="form-group">
<input type="email" id="email" name="email" placeholder="Your Email" required>
</div>
<div class="form-group">
<label>Select Your Program(s):</label>
<div class="checkbox-group">
<label class="checkbox-item">
<input type="checkbox" name="program[]" value="physics">
<span class="checkmark"></span>
<span>Physics & Astronomy</span>
</label>
<label class="checkbox-item">
<input type="checkbox" name="program[]" value="mathematics">
<span class="checkmark"></span>
<span>Mathematics</span>
</label>
<label class="checkbox-item">
<input type="checkbox" name="program[]" value="computer-science">
<span class="checkmark"></span>
<span>Computer Science</span>
</label>
<label class="checkbox-item">
<input type="checkbox" name="program[]" value="engineering">
<span class="checkmark"></span>
<span>Engineering</span>
</label>
<label class="checkbox-item">
<input type="checkbox" name="program[]" value="other">
<span class="checkmark"></span>
<span>Other(s)</span>
</label>
</div>
</div>
<div class="form-group">
<textarea id="message" name="message" placeholder="Tell us about your interests in rocketry and aerospace..." rows="4"></textarea>
</div>
<button type="submit" class="btn btn-primary btn-full">Send Message</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-logo">
<img src="Images/UTSTAR_logo.webp" alt="UofT STAR Logo" class="footer-logo-img">
<span>UofT STAR</span>
</div>
<div class="footer-info">
<div class="footer-location">
<i class="fas fa-map-marker-alt"></i>
<div class="location-text">
<span>Bahen Centre for Information Technology</span>
<small>University of Toronto</small>
</div>
</div>
<div class="footer-map">
<div class="map-button" onclick="window.open('https://www.google.com/maps/place/Bahen+Centre+for+Information+Technology/@43.6597267,-79.3994284,17z/data=!3m1!4b1!4m6!3m5!1s0x882b34c75165c957:0x6459384147b4b67b!8m2!3d43.6597267!4d-79.3972397!16s%2Fm%2F0h3p4d0', '_blank')">
<div class="map-preview">
<i class="fas fa-map-marker-alt"></i>
<span>View on Google Maps</span>
<small>Click to open location</small>
</div>
</div>
</div>
</div>
<div class="footer-social">
<a href="https://www.instagram.com/uoftstar/" target="_blank" rel="noopener"><i class="fab fa-instagram"></i></a>
<a href="mailto:info.utstar@gmail.com" target="_blank" rel="noopener"><i class="fas fa-envelope"></i></a>
<a href="https://forms.gle/isJRaBi8EYFYcJYL7" target="_blank" rel="noopener"><i class="fas fa-rocket"></i></a>
</div>
</div>
<p>© 2025 University of Toronto Student Team for Amateur Rocketry. All rights reserved.</p>
</div>
</footer>
<!-- Back to Top Button -->
<button id="backToTop" class="back-to-top" onclick="scrollToTop()">
<i class="fas fa-chevron-up"></i>
</button>
<!-- Project Modal -->
<div id="projectModal" class="project-modal">
<div class="project-modal-content">
<button class="project-modal-close" onclick="closeProjectModal()">×</button>
<div class="project-modal-body">
<div class="project-modal-icon">
<i id="modalIcon"></i>
</div>
<h2 id="modalTitle"></h2>
<div class="project-modal-status">
<span id="modalStatus" class="status-badge"></span>
</div>
<p id="modalDescription"></p>
<div id="modalCarousel" class="project-carousel">
<!-- Carousel images will be loaded here -->
</div>
<div id="modalDetails" class="project-details">
<!-- Additional project details will be loaded here -->
</div>
</div>
</div>
</div>
<script src="website-data.js"></script>
<script src="script.js"></script>
</body>
</html>