-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
241 lines (234 loc) · 14.4 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FTC Team 21959 Dreamers</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/inter-ui/3.19.3/inter.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="language-modal" class="modal">
<div class="modal-content">
<h4>Please Select Your Language</h4>
<h4>请选择您的语言</h4>
<div class="language-options">
<button id="en-btn" class="language-button">🇬🇧 English</button>
<button id="cn-btn" class="language-button">🇨🇳 中文</button>
</div>
</div>
</div>
<header>
<nav aria-label="Main Navigation">
<div class="container">
<div class="logo">
<img src="img/logo.svg" alt="FTC Team 21959 Dreamers Logo">
<span class="logo-text">21959 Dreamers</span>
</div>
<div class="nav-links">
<a href="#about"><i class="fas fa-info-circle"></i> <span data-en="About" data-cn="关于">About</span></a>
<a href="#team"><i class="fas fa-users"></i> <span data-en="Team" data-cn="团队">Team</span></a>
<a href="#contact"><i class="fas fa-envelope"></i> <span data-en="Contact" data-cn="联系">Contact</span></a>
<div class="language-toggle">
<button id="toggle-en-btn" class="language-button">🇬🇧 English</button>
<button id="toggle-cn-btn" class="language-button">🇨🇳 中文</button>
</div>
</div>
<div class="menu-toggle" aria-label="Toggle navigation menu">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
</header>
<main>
<section class="hero" aria-labelledby="hero-title">
<div class="container">
<div class="hero-content">
<div class="hero-text">
<h1 id="hero-title">
<span class="small-text" data-en="FTC Team" data-cn="FTC 团队">FTC Team</span>
<span class="gradient-text" data-en="21959 Dreamers" data-cn="21959 Dreamers">21959 Dreamers</span>
</h1>
<p data-en="Innovating, competing, and inspiring through robotics. We are a passionate team of high school students dedicated to pushing the boundaries of technology and engineering."
data-cn="通过机器人技术进行创新、竞争与启发。我们是一支充满热情的高中生团队，致力于推动技术与工程的边界。">
Innovating, competing, and inspiring through robotics. We are a passionate team of high school students dedicated to pushing the boundaries of technology and engineering.
</p>
<a href="#about" class="cta-button">
<i class="fas fa-rocket"></i>
<span data-en="Learn More" data-cn="了解更多">Learn More</span>
</a>
</div>
<div class="hero-image-container">
<img src="img/group-photo.jpg" alt="Team Dreamers working in their workshop" class="hero-image">
</div>
</div>
</div>
</section>
<section id="about" class="section" aria-labelledby="about-title">
<div class="container">
<h2 id="about-title"><i class="fas fa-info-circle"></i> <span data-en="About Us" data-cn="关于我们">About Us</span></h2>
<div class="about-content">
<div class="about-text">
<p data-en="FTC Team 21959 Dreamers is a group of passionate high school students dedicated to exploring the frontiers of robotics and engineering. Founded in 2022, our team has quickly grown into a powerhouse of innovation and creativity."
data-cn="FTC 团队 21959 Dreamers 是一群充满热情的高中生，致力于探索机器人与工程的前沿。成立于 2022 年，我们的团队迅速成长为创新与创造力的强大力量。">
FTC Team 21959 Dreamers is a group of passionate high school students dedicated to exploring the frontiers of robotics and engineering. Founded in 2022, our team has quickly grown into a powerhouse of innovation and creativity.
</p>
<div class="achievements">
<h3 data-en="Our Achievements" data-cn="我们的成就">Our Achievements</h3>
<div class="achievement-year">2023 - 2024</div>
<ul class="achievement-list">
<li data-en="State Finalists" data-cn="州赛决赛选手">State Finalists</li>
<li data-en="Think Award" data-cn="思维奖">Think Award</li>
</ul>
<div class="achievement-year">2022 - 2023</div>
<ul class="achievement-list">
<li data-en="Regional Champions" data-cn="区域赛冠军">Regional Champions</li>
<li data-en="Innovation in Control Award" data-cn="控制创新奖">Innovation in Control Award</li>
</ul>
</div>
</div>
<div class="stats">
<div class="stat-card">
<i class="fas fa-robot"></i>
<h3>24+</h3>
<p data-en="Competition Matches" data-cn="比赛场次">Competition Matches</p>
</div>
<div class="stat-card">
<i class="fas fa-users"></i>
<h3>12</h3>
<p data-en="Team Members" data-cn="团队成员">Team Members</p>
</div>
<div class="stat-card">
<i class="fas fa-clock"></i>
<h3>1000+</h3>
<p data-en="Hours of Engineering" data-cn="工程时长">Hours of Engineering</p>
</div>
<div class="stat-card">
<i class="fas fa-trophy"></i>
<h3>4</h3>
<p data-en="Major Awards" data-cn="主要奖项">Major Awards</p>
</div>
</div>
</div>
</div>
</section>
<section id="team" class="section" aria-labelledby="team-title">
<div class="container">
<h2 id="team-title"><i class="fas fa-users"></i> <span data-en="Meet Our Team" data-cn="认识我们的团队">Meet Our Team</span></h2>
<div class="team-members" role="list">
<div class="member-card" role="listitem">
<div class="member-img">
<img src="img/member-photo/zigao.png" alt="Team Member 1 - Zigao Wang" />
</div>
<h3 class="member-name">Zigao Wang 王子高</h3>
<p class="member-role" data-en="Outreach Captain" data-cn="外联队长">Outreach Captain</p>
</div>
<div class="member-card" role="listitem">
<div class="member-img">
<img src="img/member-photo/samuel.png" alt="Team Member 2 - Samuel Jiang" />
</div>
<h3 class="member-name">Samuel Jiang 江森达</h3>
<p class="member-role" data-en="Engineering & Design Group" data-cn="工程及设计组">Engineering & Design Group</p>
</div>
<div class="member-card" role="listitem">
<div class="member-img">
<img src="img/member-photo/max.png" alt="Team Member 3 - Max Du" />
</div>
<h3 class="member-name">Max Du 杜昊霖</h3>
<p class="member-role" data-en="Engineering & Design Group" data-cn="工程及设计组">Engineering & Design Group</p>
</div>
<div class="member-card" role="listitem">
<div class="member-img">
<img src="img/member-photo/raphael.png" alt="Team Member 4 - Raphael Ouyang" />
</div>
<h3 class="member-name">Raphael Ouyang 欧阳沛衡</h3>
<p class="member-role" data-en="Programming & Outreach Group" data-cn="编程及外联组">Programming & Outreach Group</p>
</div>
<div class="member-card" role="listitem">
<div class="member-img">
<img src="img/member-photo/boyuan.png" alt="Team Member 5 - Boyuan Wu" />
</div>
<h3 class="member-name">Boyuan Wu 吴博远</h3>
<p class="member-role" data-en="Engineering Group & Driver" data-cn="工程组及操作手">Engineering Group & Driver</p>
</div>
<div class="member-card" role="listitem">
<div class="member-img">
<img src="img/member-photo/thomas.png" alt="Team Member 6 - Thomas Wang" />
</div>
<h3 class="member-name">Thomas Wang 王鹿鸣</h3>
<p class="member-role" data-en="Engineering Group & Driver" data-cn="工程组及操作手">Engineering Group & Driver</p>
</div>
<div class="member-card" role="listitem">
<div class="member-img">
<img src="img/member-photo/amy.png" alt="Team Member 7 - Amy Ai" />
</div>
<h3 class="member-name">Amy Ai 艾美好</h3>
<p class="member-role" data-en="Project Manager" data-cn="项目管理者">Project Manager</p>
</div>
<div class="member-card" role="listitem">
<div class="member-img">
<img src="img/member-photo/claire.png" alt="Team Member 8 - Claire Xin" />
</div>
<h3 class="member-name">Claire Xin 忻翊昶</h3>
<p class="member-role" data-en="Project Manager" data-cn="项目管理者">Project Manager</p>
</div>
<div class="member-card" role="listitem">
<div class="member-img">
<img src="img/member-photo/sean.png" alt="Team Member 9 - Sean Jiang" />
</div>
<h3 class="member-name">Sean Jiang 蒋丛柏</h3>
<p class="member-role" data-en="Engineering Group & Finance Supervisor" data-cn="工程组及财务管理">Engineering Group & Finance Supervisor</p>
</div>
<div class="member-card" role="listitem">
<div class="member-img">
<img src="img/member-photo/kevin.png" alt="Team Member 10 - Kevin Wang" />
</div>
<h3 class="member-name">Kevin Wang 王浩泽</h3>
<p class="member-role" data-en="Engineering Group" data-cn="工程组">Engineering Group</p>
</div>
<div class="member-card" role="listitem">
<div class="member-img">
<img src="img/member-photo/benjamin.png" alt="Team Member 11 - Benjamin Wang" />
</div>
<h3 class="member-name">Benjamin Yang 杨文鼎</h3>
<p class="member-role" data-en="Engineering Group" data-cn="工程组">Engineering Group</p>
</div>
<div class="member-card" role="listitem">
<div class="member-img">
<img src="img/member-photo/richard.png" alt="Team Member 12 - Richard Huang" />
</div>
<h3 class="member-name">Richard Huang 黄睿宸</h3>
<p class="member-role" data-en="Design Group" data-cn="设计组">Design Group</p>
</div>
</div>
</div>
</section>
<section id="contact" class="section" aria-labelledby="contact-title">
<div class="container">
<h2 id="contact-title"><i class="fas fa-envelope"></i> <span data-en="Contact Us" data-cn="联系我们">Contact Us</span></h2>
<div class="contact-info">
<p data-en="Get in touch with us at: " data-cn="联系我们："><a href="mailto:[email protected]">[email protected]</a></p>
</div>
<div class="social-links" role="navigation" aria-label="Social Media Links">
<a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
<a href="#" target="_blank"><i class="fab fa-twitter"></i></a>
<a href="#" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div>
</section>
</main>
<footer>
<div class="container">
<p data-en="© 2024 FTC Team 21959 Dreamers. All rights reserved."
data-cn="© 2024 FTC 团队 21959 Dreamers。版权所有。">
© 2024 FTC Team 21959 Dreamers. All rights reserved.
</p>
<p>
<a href="https://beian.miit.gov.cn/" target="_blank">沪ICP备2024042425号-3</a>
</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>