-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
executable file
·371 lines (368 loc) · 12.7 KB
/
index.html
File metadata and controls
executable file
·371 lines (368 loc) · 12.7 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
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
<!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="Welcome to the website of the CJT-Robotics Team of the Christoph-Jacob-Treu Gymnasium Lauf an der Pegnitz."
/>
<link rel="icon" href="res/favicon.png" />
<!-- <link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
/> -->
<link rel="stylesheet" href="style.css" />
<title>CJT-Robotics</title>
</head>
<body>
<!-- HEADER -->
<header id="header">
<div class="wrapper" id="headerWrapper">
<!-- Left side of the header -->
<div id="headerLogo">
<img src="res/favicon.png" alt="Logo of the 'CJT Robotics Team'" />
<p>CJT-Robotics</p>
</div>
<!-- END Left side of the header -->
<!-- Right side of the header -->
<div id="headerNavbar">
<ul id="navbar">
<li class="navbarElements"><a href="#">Home</a></li>
<li class="navbarElements"><a href="#team">Team</a></li>
<li class="navbarElements"><a href="#sponsors">Sponsors</a></li>
<li class="navbarElements"><a href="#resources">Resources</a></li>
<li class="navbarElements"><a href="#socials">Socials</a></li>
<li class="navbarElements"><a href="#footer">Imprint</a></li>
</ul>
</div>
<!-- END Right side of the header -->
</div>
</header>
<!-- END HEADER -->
<!-- CONTENT -->
<!-- LANDING PAGE -->
<section id="landing">
<div class="wrapper" id="landingWrapper">
<h1 class="animationLeft">
Hi, We're the <span>CJT-Robotics Team</span><br />of the
<a href="https://www.cjt-gym-lauf.de/" target="_blank"
>Christoph-Jacob-Treu-Gymnasium</a
>
</h1>
</div>
</section>
<!-- END LANDING PAGE -->
<!-- ABOUT US PAGE -->
<section id="team">
<div class="wrapper" id="teamWrapper">
<div id="leftTeam">
<img src="res/robot.png" alt="Image of our Robot 'Error 404'" />
<p>Our Robot 'Error 404'</p>
</div>
<div id="rightTeam">
<h1 class="section-headline animationLeft">About us</h1>
<div>
<p class="animationRight" id="aboutUsText">
We are a group of around ten high school students who are building
robots to compete in the
<a
href="https://major.robocup.de/ligen/rescue/?lang=en"
target="_blank"
>GermanOpen</a
>
and the
<a href="https://www.robocup.org/leagues/10" target="_blank"
>world championship</a
>. The category in which we are participating is called
<a href="https://rrl.robocup.org/" target="_blank"
>Rescue Robot League (RRL)</a
>. The aim is to develop a robot that is capable of driving into
potentially dangerous terrain, for example, destroyed houses after
an earthquake, and check for survivors. We are the only school
that has ever participated in these championships for a dozen
years. We are currently working on the robot named 'Error 404'.
This name corresponds to the phrase 'Error 404 Robot not Found'.
The history behind this name is that we started working on this
robot just before the Robocup started, so we went there with a
robot that basically didn’t exist.
</p>
</div>
<div class="animationBottom" id="tab-titles">
<p class="tab-link active-link" onclick="opentab('rewards')">
Rewards
</p>
<p class="tab-link" onclick="opentab('events')">Upcoming Events</p>
<p class="tab-link" onclick="opentab('members')">Team Members</p>
</div>
<div>
<div class="tab-content active-tab" id="rewards">
<ul>
</ul>
</div>
<div class="tab-content" id="events">
<ul>
</ul>
</div>
<div class="tab-content" id="members">
<ul>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- END ABOUT US PAGE -->
<!-- SPONSOR PAGE -->
<section id="sponsors">
<div class="wrapper" id="sponsorsWrapper">
<h1 class="section-headline animationLeft">Our Sponsors</h1>
<div class="container" id="containerSponsors">
<div class="card card--sponsor animationRight">
<div class="card-head" id="lfy">
<h3 class="card-headline">We're looking for you!</h3>
</div>
<p class="card-description">
Would you like to support us with your company? We are currently
seeking sponsors to support our robot! Your name could appear here
and on the robot, alongside other renowned companies already
involved in our project. Feel free to get in touch with us to
learn more about our sponsorship opportunities!
</p>
<a
href="mailto:contact@cjt-robotics.de?subject=Request%20Sponsorship"
class="card-button"
>Send an eMail</a
>
</div>
</div>
</div>
</section>
<!-- END SPONSOR PAGE -->
<!-- RESOURCES PAGE -->
<section id="resources">
<div class="wrapper" id="resourcesWrapper">
<h1 class="section-headline animationLeft">Resources</h1>
<div class="container animationRight" id="containerResources">
<div class="resourceCard animationTop">
<h3>Team Description Paper</h3>
<p>
To participate at the RoboCup, each team must submit a Team
Description Paper. This paper contains information how the Robot
is built and what software is used so the reader would be able to
construct a similar robot.
</p>
<a
href="https://drive.google.com/file/d/1ZpmEQQssUhv80ew8a5nBbrOA9kyCFzbF/view?usp=sharing"
target="_blank"
class="card-button button--resources"
>Open TDP</a
>
</div>
<div class="resourceCard animationRight">
<h3>3D-Models</h3>
<p>
A lot of parts of the robot a 3D-printed and therefore modelled in
before. An example for this is the suspension system, that was
custom created to make sure it will withstand the mechanical
forces. If are interested in these models, you can follow the link
below.
</p>
<a
href="https://drive.google.com/drive/folders/1DqhKLt5K_8qPpIUqtAGT62EXCGsW8LTk?usp=sharing"
target="_blank"
class="card-button button--resources"
>Open Model-Folder</a
>
</div>
<div class="resourceCard animationTop">
<h3>Videos & Images</h3>
<p>
A lot of Photos and Videos were created during the competitions to
better visualize the performance of the robot in difficult
terrain. The Folder also contains technical photos that display
its dimensions.
</p>
<div>
<a
href="https://youtu.be/UXENGQurI-s"
target="_blank"
class="card-button button--resources button"
>Open Videoplaylist</a
>
<a
href="https://drive.google.com/drive/folders/1pHyMs976UFkTRWWq-S6zDVopHQgebFj0?usp=sharing"
target="_blank"
class="card-button button--resources button"
id="resources-button-in"
>Open Images-Folder</a
>
</div>
</div>
<div class="resourceCard animationRight">
<h3>Wikis</h3>
<p>
For more more detailed information about our hardware and software
please visit the Wikis provided here. For more information feel
free to contact us at
<a
href="mailto:contact@cjt-robotics.de?subject=More%20information"
>contact@cjt-robotics.de</a
>
</p>
<div>
<a
href="https://github.com/CJT-Robotics/hardware-docs/wiki/"
target="_blank"
class="card-button button--resources"
>Hardware Wiki</a
>
<a
href="#"
target="_blank"
class="card-button button--resources button"
id="resources-button-in"
>Software Wiki, coming soon</a
>
</div>
</div>
</div>
<div class="container" id="containerSlideshow">
<div class="slideshow">
<div class="slideshowelement">
</div>
</div>
</div>
</div>
</section>
<!-- END RESOURCES PAGE -->
<!-- SOCIAL MEDIA PAGE -->
<section id="socials">
<div class="wrapper" id="socialsWrapper">
<h1 class="section-headline animationLeft">Social Media</h1>
<div class="container" id="containerSocials">
<div class="card card--social animationRight">
<div class="card-head">
<img src="res/icons/instagram.png" alt="" class="card-logo" />
<h3 class="card-headline">Instagram</h3>
</div>
<p class="card-description">
On our Instagram profile, we upload pictures of our robot. Feel
free to check out our content! Just click the button and enjoy!
</p>
<a
href="https://www.instagram.com/cjtrobotics/"
target="_blank"
class="card-button"
>See more</a
>
</div>
<div class="card card--social animationRight">
<div class="card-head">
<img src="res/icons/youtube.png" alt="" class="card-logo" />
<h3 class="card-headline">YouTube</h3>
</div>
<p class="card-description">
On our YouTube channel, we upload videos of our robot at
competitions, during the development phase, and its testing. To
watch them, click the button!
</p>
<a
href="https://www.youtube.com/@CJT-Robotics"
target="_blank"
class="card-button"
>Watch more</a
>
</div>
<div class="card card--social animationRight">
<div class="card-head">
<img src="res/icons/github.png" alt="" class="card-logo" />
<h3 class="card-headline">GitHub</h3>
</div>
<p class="card-description">
We publish our programs used for our robot on our GitHub profile.
Additionally, it is documented for self-use or further expansion.
To learn more, click the button!
</p>
<a
href="https://github.com/CJT-Robotics"
target="_blank"
class="card-button"
>Learn more</a
>
</div>
</div>
</div>
</section>
<!-- END SOCIAL MEDIA PAGE -->
<!-- FOOTER -->
<footer id="footer">
<div class="wrapper" id="footerWrapper">
<h1 class="section-headline animationLeft">Contact us</h1>
<div class="container" id="containerFooter">
<div id="topFooter">
<div id="leftFooter">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2590.2809734967454!2d11.26519209214318!3d49.516970980475136!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47a1e14ea0be20df%3A0x2547eb9b7a14727e!2sChristoph-Jacob-Treu%20Gymnasium!5e0!3m2!1sde!2sde!4v1709988747868!5m2!1sde!2sde"
style="border: 0"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
></iframe>
<a href="mailto:contact@cjt-robotics.de"
>contact@cjt-robotics.de</a
>
</div>
<div id="rightFooter">
<div id="socialLinks" class="animationRight">
<a
href="https://www.instagram.com/cjtrobotics/"
target="_blank"
class="socialMediaLink"
><img src="res/icons/instagram.png" alt="Logo"
/></a>
<a
href="https://www.youtube.com/@CJT-Robotics"
target="_blank"
class="socialMediaLink"
><img src="res/icons/youtube.png" alt="Logo"
/></a>
<a
href="https://github.com/CJT-Robotics"
target="_blank"
class="socialMediaLink"
><img src="res/icons/github.png" alt="Logo"
/></a>
</div>
<div id="address" class="animationBottom">
<p>Christoph-Jacob-Treu Gymnasium | CJT-Robotics</p>
<p>Hardtstraße 37</p>
<p>91207 Lauf an der Pegnitz</p>
</div>
</div>
</div>
<div id="bottomFooter">
<p id="copyright">Copyright © Markus Peltsarszky 2026</p>
</div>
</div>
</div>
</footer>
<!-- END FOOTER -->
<!-- TOO SMALL -->
<div id="small">
<img src="res/favicon.png" alt="" />
<p>Sorry, this site doesn't support your device!</p>
</div>
<!-- END TOO SMALL -->
<!-- GOOGLE FONTS NOTICE -->
<div id="fontsNotice">
<div id="fontsNoticeBox">
<p>Diese Website nutzt Google Fonts über die Google API.</p>
<button id="fontsNoticeButton">Verstanden</button>
</div>
</div>
<!-- END GOOGLE FONTS NOTICE -->
<script src="https://unpkg.com/scrollreveal"></script>
<script src="script.js"></script>
</body>
</html>