-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
155 lines (135 loc) · 9.38 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
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Informationen zur ITA-Messe 2024">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<title>ITA-Messe 2024</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>ITA-Messe 2024</h1>
</header>
<div id="slider-container">
<a href="#Glasfaser" class="slide" style="background-image: url('bild1.gif');"><span class="subtitle">Glasfaser</span></a>
<a href="#3D-Druckern" class="slide" style="background-image: url('bild2.jpeg');"><span class="subtitle">3D-Drucker</span></a>
<a href="#E-Mail-Attachments Management" class="slide" style="background-image: url('bild5.gif');"><span class="subtitle">E-Mail-Attachment Management</span></a>
<button id="prev"><span>◀</span></button>
<button id="next"><span>▶</span></button>
</div>
<div>
<section class="container">
<h2>Ausblick: ITA-Messe 2025</h2>
Nach der Messe ist bekanntlich vor der Messe. Auch für das Jahr 2025
planen wir wieder eine Messe der ITA-Oberstufe. Vorraussichtlich
wird diese auch wieder vor den Osterferien stattfinden. Details
folgen an dieser Stelle.
<h2>Willkommen zur ITA-Messe 2024</h2>
<p>Für Dienstag, den 12. März 2024 ab 9:30 Uhr möchten wir Sie gerne zur <strong>ITA-Messe</strong> einladen. Bei dieser Veranstaltung zeigen unsere Schülerinnen und Schüler aus den höheren Klassen, was sie im Bereich der Informationstechnik gelernt haben. Sie können dort neue Entwicklungen in der Software, bei Netzwerken und in der Elektrotechnik sehen. Entdecken Sie die innovativen Projekte unserer Schüler und Schülerinnen. Folge Sie uns auf <a href="https://www.twitch.tv/ita_messe">Twitch</a></p></p>
<h2>Programm</h2>
<table>
<tr>
<th>Uhrzeit</th>
<th>Projekt</th>
<th>Beschreibung</th>
<th>Speaker</th>
</tr>
<tr>
<td>9:00</td>
<td>Einlass</td>
<td>Öffnung der Veranstaltung</td>
<td>TBA</td>
</tr>
<tr>
<td>9:30</td>
<td>Opening</td>
<td>Begrüßung</td>
<td>TBA</td>
</tr>
<tr>
<td>9:45</td>
<td>E-Mail-Attachment Management</td>
<td>Das Projekt zeigt eine Lösung zum effizienten Verwalten von E-Mail-Anhängen, indem es das Herunterladen, Teilen, Sichern und Löschen von E-Mails über eine benutzerfreundliche Plattform erleichtert.</td>
<td>Abdullah Alkaseer</td>
</tr>
<tr>
<td>10:10</td>
<td>SolarSandwich </td>
<td>Unser revolutionäres Sandwich-Projekt ermöglicht es Kunden, individuelle Sandwiches über ein Bestellsystem zu bestellen, das mit Solarstrom betrieben wird.</td>
<td>Luc Trottmann, Leon Rüsing</td>
</tr>
<tr>
<td>11:30</td>
<td>Glasfaser</td>
<td>Spleißvorgang einer Glasfaser und Bezeichnung der verschiedenen Isolierschichten.</td>
<td>Stefan Grygierek, Oliwia Zdera</td>
</tr>
<tr>
<td>12:05</td>
<td>Ladestation</td>
<td>Ladestation für das Aufladen von E-Fahrzeugen, ehemaliges Techniker Projekt, weitergeführt von den ITA’s. Entwicklung einer Webanwendung und einer App um den Zugriff auf die Ladestation zu vereinfachen und zu digitalisieren. </td>
<td>Philip Terber, Tristan Amann </td>
</tr>
</table>
<h2>Messestände</h2>
<ul>
<li><strong>3D-Drucker/Modellierung: </strong>Modellierung von 3D-Objekten in Blender und Herstellung durch einen 3D-Drucker.</li>
<li><strong>Glasfaser:</strong> Glasfaser Spleißvorgang und Ausstellung der unterschiedlichen Komponenten in einer Gebäudeinfrastruktur</li>
<li><strong>Space Shooter:</strong> Spieler steuert ein Raumschiffe, um gegnerische Raumschiffe und andere Objekte abzuschießen.</li>
<li><strong>Discord Bot:</strong> Discord Bot zum Managen und Moderieren von Discord Servern sowie extra Funktionen wie zum Beispiel Trivia. </li>
<li><strong>Gameboy:</strong> Das Projekt 3D-Drucker hat sich mit verschiedenen Möglichkeiten des 3D Drucks beschäftigt und dabei eigene Modelle entworfen und gedruckt.</li>
<li><strong>SolarSandwich :</strong> An unserem Stand kannst du unser Bestellsystem selbst testen und nebenbei auch die leckeren Sandwiches probieren, welche mit Solarstrom hergestellt werden.
("Am Tag der ITA-Messe wird zusätzlich Netzstrom zum Einsatz kommen. Eine reine Versorgung mit Solarstrom ist nicht gegeben.") </li>
<li><strong>Pi-Alarmanlage:</strong> Smarte Überwachung mit Raspberry Pi.</li>
<li><strong>Rouge-Like Game:</strong> In diesem Spiel erkundet ihr eine große zufällig generierte Map, in der ihr Monster bekämpft und mit Items stärker werdet.</li>
</ul>
<section>
<h2 style="color: #343a40;">Standort</h2>
<div class="map-container">
<iframe id="map-iframe" src="https://www.openstreetmap.org/export/embed.html?bbox=7.21626,51.47074,7.23626,51.49074&layer=mapnik&marker=51.48074,7.22501"></iframe>
</div>
<div style="text-align: center;">
<a href="https://www.openstreetmap.org/export/embed.html?bbox=7.22526,51.48023,7.22499,51.480994&layer=mapnik" target="_blank" class="btn btn-primary" style="background-color: #343a40; border: 2px solid #343a40; padding: 12px 24px; text-transform: uppercase; font-weight: bold; color: #fff; border-radius: 6px; transition: background-color 0.3s ease; display: inline-block; margin-top: 20px;">Große Karte anzeigen</a>
</div>
</section>
</main>
<section id="E-Mail-Attachments Management">
<h2>E-Mail-Attachments Management</h2>
<p>Das Projekt "E-Mail-Attachments Management" entwickelt eine Anwendung, die das Herunterladen, Teilen und Sichern von E-Mails und deren Anhängen vereinfacht, sowie das Löschen von E-Mails für Nutzer erleichtert. Mit dem Einsatz von Technologien wie Laravel, PHP, HTML, CSS, und JavaScript sowie die Integration von Sicherheitsmechanismen und effizienter Datenverarbeitung im Hintergrund, bietet dieses Programm eine benutzerfreundliche Oberfläche zur effizienten E-Mail
verwaltung. Das Endziel ist es, eine Plattform zu schaffen, die es Nutzern ermöglicht, ihre E-Mail-Anhänge effektiver zu verwalten, indem sie die Sicherheit erhöht und den Zugriff sowie die Organisation von Anhängen vereinfacht.</p>
<div class="video-container" onclick="togglePlay('cosmicDungeonVideo', 'cosmicDungeonOverlay')">
<div class="video-container" onclick="togglePlay('cosmicDungeonVideo', 'cosmicDungeonOverlay')" style="max-width: 100%; display: flex; justify-content: center;">
<img src="bild4.png" alt="3D-Drucker" style="max-width: 100%; max-height: 100%; height: auto; border: 2px solid #000;">
</div>
</div>
</section>
<section id="Glasfaser">
<h2>Glasfaser</h2>
<p>Spleißvorgang einer Glasfaser und ein Vergleich der Ansprechzeit sowohl auch der Bandbreite zu Kuperleitungen. </p>
<div class="video-container" onclick="togglePlay('apartHumanityVideo', 'apartHumanityOverlay')">
<video id="apartHumanityVideo" controls>
<source src="video1.mp4" type="video/mp4">
Ihr Browser unterstützt keine Video-Tags.
</video>
</div>
</section>
<section id="3D-Druckern">
<h2>3D-Drucker/Modellierung</h2>
<p>Modellierung von 3D-Objekten in Blender und Herstellung durch einen 3D-Drucker.</p>
<div class="video-container" onclick="togglePlay('cosmicDungeonVideo', 'cosmicDungeonOverlay')">
<img src="bild2.jpeg" alt="3D-Drucker" style="max-width: 100%; max-height: 100%; height: auto; border: 2px solid #000;">
</div>
</section>
</div>
<footer>
<a style="color: rgb(0,0,0); text-decoration: none ;" href="mailto:[email protected]">
<span style="font-family: font-weight= bold" ;="" font-size:="" small;"="">Kontakt</span></a>
<p>Folge uns auf <a href="https://www.twitch.tv/ita_messe">Twitch</a></p>
<a style="color: rgb(0,0,0); text-decoration: none ;" href="mailto:[email protected]">
<span style="font-family: font-weight= bold" ;="" font-size:="" small;"="">Abdullah Alkaseer</span></a> (c) 2024</p>
</footer>
<script src="script.js"></script>
</body>
</html>