index2.html

<!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-Attachments Management</span></a>
    
        <button id="prev"><span>&#9664;</span></button>
        <button id="next"><span>&#9654;</span></button>

    </div>

    <div>
        <section  class="container">
        <h2>Willkommen zur ITA-Messe 2024</h2>
        <p>Am Dienstag, den 12. März 2024 um 9:30 Uhr morgens, 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ülern.</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>Eröffnungszeremonie</td>
                    <td>TBA</td>
                </tr>
                <tr>
                    <td>9:45</td>
                    <td>E-Mail-Attachments Management</td>
                    <td>Das Projekt bietet 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>Alkaseer Abdullah</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 hergestellt wird.</td>
                    <td>Luc Trottmann, Leon Rüsing</td>
                </tr>
                <tr>
                    <td>11:30</td>
                    <td>Glasfaser</td>
                    <td>Spleißvorgang einer Glasfaser und ein Vergleich der Ansprechzeit sowohl auch der Bandbreite zu Kuperleitungen. </td>
                    <td>Stefan Grygierek, Oliwia Zdera</td>
                </tr>
                <tr>
                    <td>12:05</td>
                    <td>Ladestation</td>
                    <td>Ladestation fürs Aufladen von E-Fahrzeugen ehemaliges Techniker Projekt weitergeführt von, den ITA’s für die 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>Stände/Workshops </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>Spleißvorgang einer Glasfaser und ein Vergleich der Ansprechzeit sowohl auch der Bandbreite zu Kuperleitungen.</li>
                <li><strong>Space Shooter:</strong> Spieler steuert ein Raumschiff, um gegnerische Raumschiff 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 hat 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&amp;layer=mapnik&amp;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&amp;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')">
                        <img src="bild4.png" alt="3D-Drucker" style="width: 630px; height: 400px; 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="width: 700px; height: 400px; border: 2px solid #000;">
                </div>
            </section>    
    </div>

    <footer>
        <a style="color: rgb(0,0,0); text-decoration: none ;" href="mailto:stefan.grygierek@students.tbs1.de">
            <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:alkaseerabdullahaparta@gmail.com">
            <span style="font-family: font-weight= bold" ;="" font-size:="" small;"="">Abduallah Alkaseer</span></a> (c) 2024</p>
        
    </footer>

    <script src="script.js"></script>


</body>
</html>