Merge branch 'bugfix/finalisierung' into 'dev'

Bugfix/finalisierung

See merge request eb2342s/swe-b1-a!13

webseite/assets/css/subject.css

@@ -1,4 +1,14 @@
 /* Subject page styles */
+
+/* Corporate Design Colors */
+:root {
+    --primary-color: #5265A0; /* HSGG Blau */
+    --secondary-color: #323966; /* Dunkel Blau */
+    --background-color: #F3F4F6; /* Gray-50 */
+    --text-color: #1F2937; /* Gray-900 */
+    --accent-color: #62a1f4; /* Green */
+}
+
 * {
     margin: 0;
     padding: 0;
@@ -8,7 +18,6 @@
 
 body {
     min-height: 100vh;
-    display: flex;
     overflow-x: hidden;
 }
 
@@ -107,11 +116,11 @@ body {
 
 .topic-card {
     border-radius: 20px;
-    padding: 2rem;
+    padding: 1.5rem;
     position: relative;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.1);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    box-shadow: 2px 4px 6px 2px rgba(0, 0, 0, 0.1);
     transform: translateY(0);
     transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
     box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -133,8 +142,8 @@ body {
 
 .topic-card:hover {
     transform: translateY(-5px);
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
-    0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    /*box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
+    0 10px 10px -5px rgba(0, 0, 0, 0.04);*/
 }
 
 .topic-card:hover::before {
@@ -144,7 +153,6 @@ body {
 .topic-header {
     display: flex;
     align-items: center;
-    margin-bottom: 1.5rem;
     position: relative;
 }
 
@@ -163,7 +171,6 @@ body {
 .topic-description {
     font-size: 1rem;
     line-height: 1.7;
-    margin-bottom: 1.5rem;
 }
 
 .related-topics {
@@ -202,8 +209,7 @@ body {
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
-    transform: translateY(0);  /* Set initial transform state */
-    transition: all 0.2s ease;
+    transform: translateY(0); /* Set initial transform state */
 }
 
 .download-btn:hover {
@@ -234,6 +240,7 @@ body {
     .search-container {
         width: 100%;
     }
+
     .menu-toggle {
         display: flex !important;
     }
@@ -292,8 +299,12 @@ body {
 
 /* Add floating animation for icons */
 @keyframes float {
-    0%, 100% { transform: translateY(0); }
-    50% { transform: translateY(-10px); }
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-10px);
+    }
 }
 
 .theme-toggle:hover {
@@ -313,6 +324,7 @@ body {
 }
 
 .download-section h4 {
+    color: var(--primary-color);
     margin-bottom: 1rem;
     font-size: 1rem;
 }
@@ -323,22 +335,6 @@ body {
     flex-wrap: wrap;
 }
 
-.download-btn {
-    color: white;
-    padding: 0.75rem 1.25rem;
-    border-radius: 10px;
-    text-decoration: none;
-    font-size: 0.9rem;
-    transition: all 0.2s ease;
-    backdrop-filter: blur(5px);
-    flex: 1;
-    min-width: 120px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-}
-
 .download-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
@@ -390,4 +386,4 @@ body {
 .topic-card:hover {
     transform: translateY(-5px) scale(1.01);
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
-}
+}

webseite/assets/css/topic.css

@@ -1,3 +1,12 @@
+/* Corporate Design Colors */
+:root {
+    --primary-color: #5265A0; /* HSGG Blau */
+    --secondary-color: #323966; /* Dunkel Blau */
+    --background-color: #F3F4F6; /* Gray-50 */
+    --text-color: #1F2937; /* Gray-900 */
+    --accent-color: #62a1f4; /* Green */
+}
+
 * {
     margin: 0;
     padding: 0;
@@ -7,7 +16,6 @@
 
 body {
     min-height: 100vh;
-    display: flex;
     overflow-x: hidden;
 }
 
@@ -60,6 +68,7 @@ body {
 /* Main Content Styles */
 .main-content {
     margin-left: 280px;
+    width: calc(100% - 280px);
     padding: 2rem;
     flex: 1;
 }
@@ -70,7 +79,8 @@ body {
     border-radius: 20px;
     padding: 2rem;
     margin-bottom: 2rem;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    /*box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);*/
+    box-shadow: 2px 4px 6px 2px rgba(0, 0, 0, 0.1);
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
@@ -126,7 +136,7 @@ body {
 .exercise-section {
     padding: 1.5rem;
     border-radius: 12px;
-    color: white;
+    /*color: white;*/
     margin-top: 2rem;
     position: relative;
     overflow: hidden;
@@ -148,7 +158,7 @@ body {
     align-items: center;
     gap: 0.5rem;
     background: rgba(255, 255, 255, 0.1);
-    color: white;
+    /*color: white;*/
     padding: 0.75rem 1.25rem;
     border-radius: 10px;
     text-decoration: none;
@@ -163,7 +173,7 @@ body {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1024px) {
     .sidebar {
         transform: translateX(-100%);
     }
@@ -174,6 +184,8 @@ body {
 
     .main-content {
         margin-left: 0;
+        width: 100%;
+        padding: 1rem;
     }
 }
 

webseite/assets/js/search.js

@@ -0,0 +1,31 @@
+// Update search function with fallback animation
+function handleSearch() {
+    const searchTerm = document.getElementById('searchInput').value.toLowerCase();
+    const topicCards = document.querySelectorAll('.topic-card');
+
+    topicCards.forEach(card => {
+        const title = card.querySelector('.topic-title')?.textContent.toLowerCase() || '';
+        const description = card.querySelector('.topic-description')?.textContent.toLowerCase() || '';
+        const relatedTopics = Array.from(card.querySelectorAll('.related-topics li'))
+            .map(li => li.textContent.toLowerCase())
+            .join(' ');
+
+        const content = `${title} ${description} ${relatedTopics}`;
+
+        if (content.includes(searchTerm)) {
+            card.style.display = 'block';
+            if (window.gsap) {
+                gsap.to(card, {
+                    opacity: 1,
+                    y: 0,
+                    duration: 0.3
+                });
+            } else {
+                card.style.opacity = 1;
+                card.style.transform = 'translateY(0)';
+            }
+        } else {
+            card.style.display = 'none';
+        }
+    });
+}

webseite/assets/js/sidebar.js

@@ -0,0 +1,83 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const menuToggle = document.querySelector('.menu-toggle');
+    const sidebar = document.querySelector('.sidebar');
+
+    // Function to handle sidebar toggle
+    function toggleSidebar() {
+        sidebar.classList.toggle('active');
+
+        // Add overlay when sidebar is active on mobile/tablet
+        if (window.innerWidth <= 1024) {
+            if (sidebar.classList.contains('active')) {
+                addOverlay();
+            } else {
+                removeOverlay();
+            }
+        }
+    }
+
+    // Function to add overlay
+    function addOverlay() {
+        const overlay = document.createElement('div');
+        overlay.className = 'sidebar-overlay';
+        overlay.style.cssText = `
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: rgba(0, 0, 0, 0.5);
+                z-index: 45;
+                transition: opacity 0.3s ease;
+            `;
+        document.body.appendChild(overlay);
+
+        // Close sidebar when clicking overlay
+        overlay.addEventListener('click', () => {
+            sidebar.classList.remove('active');
+            removeOverlay();
+        });
+
+        // Fade in
+        requestAnimationFrame(() => {
+            overlay.style.opacity = '1';
+        });
+    }
+
+    // Function to remove overlay
+    function removeOverlay() {
+        const overlay = document.querySelector('.sidebar-overlay');
+        if (overlay) {
+            overlay.style.opacity = '0';
+            setTimeout(() => overlay.remove(), 300);
+        }
+    }
+
+    // Add click event to menu toggle
+    menuToggle.addEventListener('click', toggleSidebar);
+
+    // Handle window resize
+    let resizeTimer;
+    window.addEventListener('resize', () => {
+        clearTimeout(resizeTimer);
+        resizeTimer = setTimeout(() => {
+            if (window.innerWidth > 1024) {
+                sidebar.classList.remove('active');
+                removeOverlay();
+            }
+        }, 250);
+    });
+});
+
+// Add this right after your existing toggleSidebar function
+function updateMenuVisibility() {
+    const menuToggle = document.querySelector('.menu-toggle');
+    if (window.innerWidth <= 1024) { // Smartphone breakpoint
+        menuToggle.style.display = 'flex';
+    } else {
+        menuToggle.style.display = 'none';
+    }
+}
+
+// Add event listeners
+window.addEventListener('resize', updateMenuVisibility);

webseite/classes/SubjectData.php

@@ -28,11 +28,6 @@ class SubjectData
      */
     public string $color;
 
-    /**
-     * @var string Text des Knopfes der auf die Fachseite weiterführt, nur reiner Text
-     */
-    public string $buttonText;
-
     /**
      * @var string Icon des Faches als Font-Awesome CSS-Klasse
      */
@@ -54,6 +49,11 @@ class SubjectData
 
         $subjectDirectory = "config/subjects";
         $subjectNames = scandir($subjectDirectory);
+
+        usort($subjectNames, function ($a, $b) {
+            return strcmp($a, $b);
+        });
+
         foreach ($subjectNames as $subjectName) {
             if ($subjectName == "." || $subjectName == "..") {
                 continue;
@@ -84,7 +84,7 @@ class SubjectData
         $subjectDirectory = "config/subjects/$subjectId";
         $filename = "$subjectDirectory/properties.json";
         $data = Util::parseJsonFromFile($filename);
-        if(!isset($data)) {
+        if (!isset($data)) {
             return null;
         }
 
@@ -108,12 +108,6 @@ class SubjectData
             return null;
         }
 
-        if (isset($data->buttonText)) {
-            $result->buttonText = $data->buttonText;
-        } else {
-            return null;
-        }
-
         if (isset($data->icon)) {
             $result->icon = $data->icon;
         } else {

webseite/classes/TopicData.php

@@ -54,6 +54,11 @@ class TopicData
 
         $topicDirectory = "config/subjects/$subjectId/topics";
         $topicNames = scandir($topicDirectory);
+
+        usort($topicNames, function ($a, $b) {
+            return strcmp($a, $b);
+        });
+
         foreach ($topicNames as $topicName) {
             if ($topicName == "." || $topicName == "..") {
                 continue;
@@ -85,7 +90,7 @@ class TopicData
         $topicsDirectory = "config/subjects/$subjectId/topics";
         $topicDataDirectory = "$topicsDirectory/$topicId";
         $data = Util::parseJsonFromFile("$topicDataDirectory/properties.json");
-        if(!isset($data)) {
+        if (!isset($data)) {
             return null;
         }
 

webseite/classes/Util.php

@@ -41,7 +41,7 @@ class Util
     static function parseJsonFromFile(string $filename): mixed
     {
         $content = self::readFileContent($filename);
-        if(!isset($content)) {
+        if (!isset($content)) {
             return null;
         }
         return json_decode($content);

webseite/config/subjects/deutsch/properties.json

@@ -2,6 +2,5 @@
   "displayName": "Deutsch",
   "description": "Deutsch ist rot",
   "color": "#ef4444",
-  "buttonText": "Erfahre von einem ungeheuren Ungeziefer",
   "icon": "fa-book"
 }

webseite/config/subjects/deutsch/topics/adverbiale-bestimmung/properties.json

@@ -3,7 +3,7 @@
   "icon": "fa-map-pin",
   "description": "Adverbiale Bestimmungen sind Satzteile, die zusätzliche Informationen über Umstände wie Zeit, Ort, Grund oder Art und Weise geben und dadurch die Handlung des Satzes genauer beschreiben.",
   "relatedTopics": [
-    "topic2", "topic3"
+    "wortarten", "vier-faelle"
   ],
   "files": [
     "exercise1.pdf"

webseite/config/subjects/deutsch/topics/geschichten-erzaehlen/properties.json

@@ -3,9 +3,9 @@
   "icon": "fa-feather-pointed",
   "description": "Das Thema \"Geschichten erzählen\" umfasst das kreative Gestalten und Vermitteln von Erlebnissen oder Fantasien durch eine spannende Handlung, interessante Charaktere und lebendige Beschreibungen, um die Zuhörer oder Leser zu fesseln.",
   "relatedTopics": [
-    "topic5", "topic4"
+    "satzglieder", "personalpronomen"
   ],
   "files": [
-    "exercise1.pdf"
+    "exercise1.pdf", "exercise2.pdf",  "exercise3.pdf"
   ]
 }

webseite/config/subjects/deutsch/topics/personalpronomen/properties.json

@@ -3,7 +3,7 @@
   "icon": "fa-person",
   "description": "Personalpronomen sind Wörter, die anstelle von Personen oder Dingen verwendet werden, wie zum Beispiel \"ich\", \"du\", \"er\", \"sie\" oder \"es\", um Wiederholungen zu vermeiden und Sätze flüssiger zu gestalten.",
   "relatedTopics": [
-    "topic2", "topic1"
+    "wortarten", "geschichten-erzaehlen"
   ],
   "files": [
     "exercise1.pdf"

webseite/config/subjects/deutsch/topics/satzglieder/properties.json

@@ -3,7 +3,7 @@
   "icon": "fa-link",
   "description": "Satzglieder sind die Bausteine eines Satzes, die jeweils eine bestimmte Funktion erfüllen, wie Subjekt, Prädikat, Objekt oder adverbiale Bestimmung, und sich gemeinsam verschieben lassen, ohne die grammatische Korrektheit des Satzes zu verändern.",
   "relatedTopics": [
-    "topic2", "topic3"
+    "wortarten", "vier-faelle"
   ],
   "files": [
     "exercise1.pdf"

webseite/config/subjects/deutsch/topics/vier-faelle/properties.json

@@ -3,9 +3,9 @@
   "icon": "fa-4",
   "description": "Die vier Fälle im Deutschen - Nominativ, Genitiv, Dativ und Akkusativ - beschreiben die verschiedenen grammatischen Funktionen eines Nomens oder Pronomens im Satz, wie Subjekt, Besitz, indirektes Objekt oder direktes Objekt.",
   "relatedTopics": [
-    "topic5"
+    "satzglieder"
   ],
   "files": [
-    "exercise1.pdf"
+    "exercise1.pdf", "exercise2.pdf"
   ]
 }

webseite/config/subjects/deutsch/topics/wortarten/properties.json

@@ -3,7 +3,7 @@
   "icon": "fa-sitemap",
   "description": "Wortarten sind Kategorien, in die Wörter anhand ihrer grammatischen Funktion und Bedeutung eingeteilt werden, wie zum Beispiel Nomen, Verben, Adjektive und Adverbien.",
   "relatedTopics": [
-    "topic5", "topic6", "topic4"
+    "satzglieder", "adverbiale-bestimmung", "personalpronomen"
   ],
   "files": [
     "exercise1.pdf"

webseite/config/subjects/englisch/properties.json

@@ -0,0 +1,6 @@
+{
+  "displayName": "Englisch",
+  "description": "He she it das s muss mit!",
+  "color": "#17B750",
+  "icon": "fa-language"
+}

webseite/config/subjects/englisch/topics/LoremIpsum/article.html

@@ -0,0 +1,9 @@
+<img alt="Ein Bild" src="$TOPICPATH/img.png">
+<br>
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+<br><br>
+Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+<br><br>
+Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
+<br>
+Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer

webseite/config/subjects/englisch/topics/LoremIpsum/properties.json

@@ -0,0 +1,11 @@
+{
+  "displayName": "Lorem Ipsum",
+  "icon": "fa-sitemap",
+  "description": "Lorem Ipsum",
+  "relatedTopics": [
+
+  ],
+  "files": [
+    "exercise1.pdf"
+  ]
+}

webseite/config/subjects/mathe/properties.json

@@ -2,6 +2,5 @@
   "displayName": "Mathe",
   "description": "Mathe ist blau",
   "color": "#3b82f6",
-  "buttonText": "Jetzt rechnen!",
   "icon": "fa-square-root-alt"
 }

webseite/config/subjects/mathe/topics/bruchrechnung/properties.json

@@ -3,9 +3,9 @@
   "icon": "fa-chart-pie",
   "description": "Die Bruchrechnung ist ein Teil der Mathematik, der das Rechnen mit Brüchen beinhaltet, also das Teilen eines Ganzen in gleich große Teile, und umfasst Operationen wie Addition, Subtraktion, Multiplikation und Division von Brüchen.",
   "relatedTopics": [
-    "topic1", "topic2", "topic5", "topic6"
+    "schriftliches-multiplizieren", "schriftliches-dividieren", "punkt-vor-strichrechnung", "rechnen-mit-klammern"
   ],
   "files": [
-    "exercise1.pdf"
+    "exercise1.pdf", "exercise2.pdf"
   ]
 }

webseite/config/subjects/mathe/topics/punkt-vor-strichrechnung/properties.json

@@ -3,7 +3,7 @@
   "icon": "fa-plus-minus",
   "description": "Die Regel \"Punkt vor Strichrechnung\" besagt, dass bei mathematischen Berechnungen Multiplikation und Division immer vor Addition und Subtraktion ausgeführt werden müssen, um das richtige Ergebnis zu erhalten.",
   "relatedTopics": [
-    "topic6", "topic3"
+    "rechnen-mit-klammern", "bruchrechnung"
   ],
   "files": [
     "exercise1.pdf"

webseite/config/subjects/mathe/topics/rechnen-mit-einheiten/properties.json

@@ -3,9 +3,9 @@
   "icon": "fa-clock",
   "description": "Rechnen mit Einheiten bedeutet, Größen mit verschiedenen Maßeinheiten wie Meter, Kilogramm oder Liter rechnerisch zu verarbeiten, dabei die Einheiten korrekt umzurechnen und sicherzustellen, dass das Ergebnis in der richtigen Einheit angegeben wird.",
   "relatedTopics": [
-    "topic2", "topic3"
+    "schriftliches-dividieren", "bruchrechnung"
   ],
   "files": [
-    "exercise1.pdf"
+    "exercise1.pdf", "exercise2.pdf"
   ]
 }

webseite/config/subjects/mathe/topics/rechnen-mit-klammern/properties.json

@@ -3,7 +3,7 @@
   "icon": "fa-code",
   "description": "Beim Rechnen mit Klammern werden die Rechenoperationen innerhalb der Klammern zuerst ausgeführt, bevor die restlichen Berechnungen im Ausdruck vorgenommen werden, um die korrekte Reihenfolge der Rechenschritte einzuhalten.",
   "relatedTopics": [
-    "topic5", "topic3"
+    "punkt-vor-strichrechnung", "bruchrechnung"
   ],
   "files": [
     "exercise1.pdf"

webseite/config/subjects/mathe/topics/schriftliches-dividieren/properties.json

@@ -3,9 +3,9 @@
   "icon": "fa-divide",
   "description": "Schriftliches Dividieren ist eine Methode zur schrittweisen Aufteilung einer Zahl durch eine andere, wobei man die Teilschritte nacheinander schriftlich notiert, um das Ergebnis systematisch zu berechnen.",
   "relatedTopics": [
-    "topic1"
+    "schriftliches-multiplizieren"
   ],
   "files": [
-    "exercise1.pdf"
+    "exercise1.pdf", "exercise2.pdf", "exercise3.pdf", "exercise4.pdf"
   ]
 }

webseite/config/subjects/mathe/topics/schriftliches-multiplizieren/properties.json

@@ -3,7 +3,7 @@
   "icon": "fa-x",
   "description": "Schriftliches Multiplizieren ist eine Rechenmethode, bei der zwei Zahlen schrittweise multipliziert werden, indem man die einzelnen Stellen der Zahlen nacheinander verrechnet, die Teilergebnisse notiert und am Ende addiert, um das Gesamtergebnis zu erhalten.",
   "relatedTopics": [
-    "topic2"
+    "schriftliches-dividieren"
   ],
   "files": [
     "exercise1.pdf"

webseite/impressum.php

@@ -19,7 +19,7 @@
 <nav class="fixed top-0 w-full bg-white/80 backdrop-blur-lg shadow-sm z-50">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex justify-between h-16">
-            <a href="homepage.php" class="flex items-center">
+            <a href="index.php" class="flex items-center">
                 <img src="assets/images/hsgg-logo.png" alt="HSGG Logo" class="h-10 mr-3">
                 <span class="text-2xl font-bold text-[var(--primary-color)]">HSGG</span>
             </a>
@@ -27,7 +27,7 @@
     </div>
 </nav>
 
-<div class="content mt-24 max-w-7xl mx-auto">
+<div class="content mt-24 max-w-7xl mx-[16px] xl:mx-auto">
     <h1 class="text-3xl font-bold text-gray-900 mb-6">Impressum</h1>
     <p class="text-gray-600 mb-4">Angaben gemäß § 5 TMG:</p>
     <p class="text-gray-600 mb-4">

webseite/index.php

@@ -12,7 +12,9 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
 </head>
-<body class="bg-gray-50">
+
+
+<body class="bg-gray-50 min-h-screen">
 <!-- Animated background blobs -->
 <div class="fixed inset-0 -z-10 overflow-hidden">
     <div class="blob absolute w-96 h-96 bg-sky-300/30 -top-48 -left-16"></div>
@@ -23,7 +25,7 @@
 <nav class="fixed top-0 w-full bg-white/80 backdrop-blur-lg shadow-sm z-50">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex justify-between h-16">
-            <a href="homepage.php" class="flex items-center">
+            <a href="index.php" class="flex items-center">
                 <img src="assets/images/hsgg-logo.png" alt="HSGG Logo" class="h-10 mr-3">
                 <span class="text-2xl font-bold text-[var(--primary-color)]">HSGG</span>
             </a>
@@ -32,7 +34,7 @@
 </nav>
 
 <!-- Hero Section -->
-<div class="pt-24 pb-16 px-4">
+<div class="hidden md:block pt-24 px-4">
     <div class="max-w-7xl mx-auto">
         <div class="text-center">
             <h1 class="text-5xl md:text-6xl font-bold text-gray-900 mb-6">
@@ -44,7 +46,7 @@
 </div>
 
 <!-- Subject Grid -->
-<div class="max-w-7xl mx-auto px-4 py-12 grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
+<div class="max-w-7xl mx-auto px-4 pt-20 grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
     <!-- Mathematik -->
     <?php
     require_once("classes/SubjectData.php");
@@ -88,7 +90,7 @@
 
 </div>
 
-<footer class="fixed bottom-0 w-full bg-white/80 backdrop-blur-lg shadow-sm p-5">
+<footer class="sticky top-[100vh] w-full bg-white/80 backdrop-blur-lg shadow-sm p-5">
     <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
         <div class="flex justify-between">
             <p class="text-gray-600">&copy; Horst-Schlämmer-Gedächtnis-Gymnasium</p>

webseite/subject.php

@@ -25,8 +25,12 @@ $topics = $subjectData->topics;
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
     <script src="https://cdn.tailwindcss.com"></script>
     <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+    <script src="assets/js/sidebar.js"></script>
+    <script src="assets/js/search.js"></script>
 </head>
-<body>
+
+
+<body class="min-h-screen">
 
 <nav class="sidebar bg-[<?php echo($subjectData->color); ?>]">
     <div class="sidebar-header">
@@ -35,7 +39,7 @@ $topics = $subjectData->topics;
         <h2><?php echo($subjectData->displayName); ?></h2>
     </div>
 
-    <a href="homepage.php" class="nav-link">
+    <a href="index.php" class="nav-link">
         <i class="fas fa-home"></i> Startseite
     </a>
     <a href="#" class="nav-link active">
@@ -47,12 +51,13 @@ $topics = $subjectData->topics;
     <button class="menu-toggle h-12 w-12 border-2 p-1 hover:border-[<?php echo($subjectData->color); ?>]">
         <i class="fas fa-bars"></i>
     </button>
-    <input type="text" class="search-box p-3 border-2 w-full focus:border-[<?php echo($subjectData->color); ?>]" id="searchInput" placeholder="Suche nach Themen, Übungen oder Hilfe..."
+    <input type="text" class="search-box p-3 border-2 w-full focus:border-[<?php echo($subjectData->color); ?>]"
+           id="searchInput" placeholder="Suche nach Themen, Übungen oder Hilfe..."
            oninput="handleSearch()">
 </div>
 
 <div class="main-content">
-    <div class="container">
+    <div class="max-w-7xl mx-auto px-4 py-12 grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-8 mb-8">
 
         <?php
 
@@ -70,6 +75,7 @@ $topics = $subjectData->topics;
                     <p class="topic-description">
                         <?php echo($topicData->description); ?>
                     </p>
+                    <!--
                     <div class="related-topics bg-gray-100">
                         <h4>Verwandte Themen:</h4>
                         <ul>
@@ -92,9 +98,9 @@ $topics = $subjectData->topics;
                             }
                             ?>
                         </ul>
-                    </div>
+                    </div>-->
                 </div>
-                <div class="download-section">
+                <div class="download-section bg-gray-100 p-[20px] rounded-[20px]">
                     <h4>Übungen herunterladen:</h4>
                     <div class="download-links">
                         <?php
@@ -103,7 +109,8 @@ $topics = $subjectData->topics;
 
                             <a onclick="event.stopPropagation();"
                                href="<?php echo("config/subjects/$subjectData->id/topics/$topicData->id/$fileName") ?>"
-                               target="_blank" download class="download-btn bg-[<?php echo($subjectData->color); ?>]">
+                               target="_blank" download
+                               class="download-btn border-2 border-[<?php echo($subjectData->color); ?>]">
                                 <i class="fas fa-file-pdf"></i>
                                 <?php echo($fileName); ?>
                             </a>
@@ -122,124 +129,15 @@ $topics = $subjectData->topics;
     </div>
 </div>
 
-<script>
-    document.addEventListener('DOMContentLoaded', () => {
-        const menuToggle = document.querySelector('.menu-toggle');
-        const sidebar = document.querySelector('.sidebar');
+<footer class="sticky top-[100vh] lg:ms-[280px] w-full lg:w-auto bg-white/80 backdrop-blur-lg shadow-sm p-5">
+    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+        <div class="flex justify-between">
+            <p class="text-gray-600">&copy; Horst-Schlämmer-Gedächtnis-Gymnasium</p>
+            <p><a href="impressum.php"
+                  class="text-[var(--primary-color)] hover:text-[var(--accent-color)]">Impressum</a></p>
+        </div>
+    </div>
+</footer>
 
-        // Function to handle sidebar toggle
-        function toggleSidebar() {
-            sidebar.classList.toggle('active');
-
-            // Add overlay when sidebar is active on mobile/tablet
-            if (window.innerWidth <= 1024) {
-                if (sidebar.classList.contains('active')) {
-                    addOverlay();
-                } else {
-                    removeOverlay();
-                }
-            }
-        }
-
-        // Function to add overlay
-        function addOverlay() {
-            const overlay = document.createElement('div');
-            overlay.className = 'sidebar-overlay';
-            overlay.style.cssText = `
-                position: fixed;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                background: rgba(0, 0, 0, 0.5);
-                z-index: 45;
-                transition: opacity 0.3s ease;
-            `;
-            document.body.appendChild(overlay);
-
-            // Close sidebar when clicking overlay
-            overlay.addEventListener('click', () => {
-                sidebar.classList.remove('active');
-                removeOverlay();
-            });
-
-            // Fade in
-            requestAnimationFrame(() => {
-                overlay.style.opacity = '1';
-            });
-        }
-
-        // Function to remove overlay
-        function removeOverlay() {
-            const overlay = document.querySelector('.sidebar-overlay');
-            if (overlay) {
-                overlay.style.opacity = '0';
-                setTimeout(() => overlay.remove(), 300);
-            }
-        }
-
-        // Add click event to menu toggle
-        menuToggle.addEventListener('click', toggleSidebar);
-
-        // Handle window resize
-        let resizeTimer;
-        window.addEventListener('resize', () => {
-            clearTimeout(resizeTimer);
-            resizeTimer = setTimeout(() => {
-                if (window.innerWidth > 1024) {
-                    sidebar.classList.remove('active');
-                    removeOverlay();
-                }
-            }, 250);
-        });
-    });
-
-    // Add this right after your existing toggleSidebar function
-    function updateMenuVisibility() {
-        const menuToggle = document.querySelector('.menu-toggle');
-        if (window.innerWidth <= 768) { // Smartphone breakpoint
-            menuToggle.style.display = 'flex';
-        } else {
-            menuToggle.style.display = 'none';
-        }
-    }
-
-    // Add event listeners
-    window.addEventListener('resize', updateMenuVisibility);
-
-    // Update search function with fallback animation
-    function handleSearch() {
-        const searchTerm = document.getElementById('searchInput').value.toLowerCase();
-        const topicCards = document.querySelectorAll('.topic-card');
-
-        topicCards.forEach(card => {
-            const title = card.querySelector('.topic-title')?.textContent.toLowerCase() || '';
-            const description = card.querySelector('.topic-description')?.textContent.toLowerCase() || '';
-            const relatedTopics = Array.from(card.querySelectorAll('.related-topics li'))
-                .map(li => li.textContent.toLowerCase())
-                .join(' ');
-
-            const content = `${title} ${description} ${relatedTopics}`;
-
-            if (content.includes(searchTerm)) {
-                card.style.display = 'block';
-                if (window.gsap) {
-                    gsap.to(card, {
-                        opacity: 1,
-                        y: 0,
-                        duration: 0.3
-                    });
-                } else {
-                    card.style.opacity = 1;
-                    card.style.transform = 'translateY(0)';
-                }
-            } else {
-                card.style.display = 'none';
-            }
-        });
-    }
-</script>
-
-<!-- Code injected by live-server -->
 </body>
 </html>

webseite/topic.php

@@ -31,18 +31,23 @@ if (!isset($topicData)) {
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
     <script src="https://cdn.tailwindcss.com"></script>
     <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+    <script src="assets/js/sidebar.js"></script>
 </head>
-<body>
+
+
+<body class="min-h-screen">
+
 <button class="menu-toggle fixed top-4 left-4 z-50 bg-white h-12 w-12 border-2 p-1 hover:border-[<?php echo($subjectData->color); ?>]">
     <i class="fas fa-bars"></i>
 </button>
+
 <!-- Left Sidebar -->
 <nav class="sidebar bg-[<?php echo($subjectData->color); ?>]">
     <div class="sidebar-header">
         <i class="fas fa-graduation-cap"></i>
         <h2><?php echo($subjectData->displayName); ?></h2>
     </div>
-    <a href="homepage.php" class="nav-link">
+    <a href="index.php" class="nav-link">
         <i class="fas fa-home"></i> Startseite
     </a>
     <a href="subject.php?subject=<?php echo($subjectData->id); ?>" class="nav-link">
@@ -54,143 +59,97 @@ if (!isset($topicData)) {
 </nav>
 
 <!-- Main Content -->
-<main class="main-content max-w-7xl">
+<main class="main-content">
+    <div class="max-w-7xl mx-auto mt-5">
+        <div class="mt-16"></div>
 
-    <div class="content-card">
-        <h1 class="content-title"><?php echo($topicData->displayName); ?></h1>
-        <p class="content-text">
-            <?php echo($topicData->description); ?>
-        </p>
-        <p class="content-text article-section">
-            <?php echo($topicData->article); ?>
-        </p>
-
-        <div class="exercise-section bg-[<?php echo($subjectData->color); ?>]">
-            <h3 style="margin-bottom: 1rem;">Übungen herunterladen:</h3>
-            <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
+        <div class="related-topics bg-gray-100 p-4 rounded-lg">
+            <h4>Verwandte Themen:</h4>
+            <ul class="flex flex-wrap gap-2">
                 <?php
-                foreach ($topicData->files as $fileName) {
+                foreach ($topicData->relatedTopics as $relatedTopicName) {
+                    $relatedTopic = $subjectData->topics[$relatedTopicName];
+                    if (!isset($relatedTopic)) {
+                        continue;
+                    }
                     ?>
-
-                    <a href='<?php echo("config/subjects/$subjectData->id/topics/$topicData->id/$fileName") ?>'
-                       target="_blank" download class="download-btn">
-                        <i class="fas fa-file-pdf"></i>
-                        <?php echo($fileName); ?>
-                    </a>
-
+                    <li onclick="event.stopPropagation();"
+                        class="border-[<?php echo($subjectData->color); ?>] border-2">
+                        <a href='<?php echo("topic.php?subject=$subjectData->id&topic=$relatedTopic->id") ?>'
+                           class="block">
+                            <?php echo($relatedTopic->displayName); ?>
+                        </a>
+                    </li>
                     <?php
                 }
                 ?>
+            </ul>
+        </div>
+
+        <div class="content-card mt-[8px]">
+            <h1 class="content-title"><?php echo($topicData->displayName); ?></h1>
+            <p class="content-text">
+                <?php echo($topicData->description); ?>
+            </p>
+            <p class="content-text article-section">
+                <?php echo($topicData->article); ?>
+            </p>
+
+            <div class="exercise-section bg-gray-100">
+                <h3 style="margin-bottom: 1rem;" class="text-[var(--primary-color)]">Übungen herunterladen:</h3>
+                <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
+                    <?php
+                    foreach ($topicData->files as $fileName) {
+                        ?>
+
+                        <a href='<?php echo("config/subjects/$subjectData->id/topics/$topicData->id/$fileName") ?>'
+                           target="_blank" download
+                           class="download-btn border-[<?php echo($subjectData->color); ?>] border-2">
+                            <i class="fas fa-file-pdf"></i>
+                            <?php echo($fileName); ?>
+                        </a>
+
+                        <?php
+                    }
+                    ?>
+                </div>
             </div>
         </div>
-    </div>
 
-    <div class="related-topics bg-gray-100 p-4 rounded-lg">
-        <h4>Verwandte Themen:</h4>
-        <ul class="flex flex-wrap gap-2">
-            <?php
-            foreach ($topicData->relatedTopics as $relatedTopicName) {
-                $relatedTopic = $subjectData->topics[$relatedTopicName];
-                if (!isset($relatedTopic)) {
-                    continue;
+        <div class="related-topics bg-gray-100 p-4 rounded-lg">
+            <h4>Verwandte Themen:</h4>
+            <ul class="flex flex-wrap gap-2">
+                <?php
+                foreach ($topicData->relatedTopics as $relatedTopicName) {
+                    $relatedTopic = $subjectData->topics[$relatedTopicName];
+                    if (!isset($relatedTopic)) {
+                        continue;
+                    }
+                    ?>
+                    <li onclick="event.stopPropagation();"
+                        class="border-[<?php echo($subjectData->color); ?>] border-2">
+                        <a href='<?php echo("topic.php?subject=$subjectData->id&topic=$relatedTopic->id") ?>'
+                           class="block">
+                            <?php echo($relatedTopic->displayName); ?>
+                        </a>
+                    </li>
+                    <?php
                 }
                 ?>
-                <li onclick="event.stopPropagation();" class="border-[<?php echo($subjectData->color); ?>] border-2">
-                    <a href='<?php echo("topic.php?subject=$subjectData->id&topic=$relatedTopic->id") ?>' class="block">
-                        <?php echo($relatedTopic->displayName); ?>
-                    </a>
-                </li>
-                <?php
-            }
-            ?>
-        </ul>
+            </ul>
+        </div>
     </div>
 </main>
-<script>
-    document.addEventListener('DOMContentLoaded', () => {
-        const menuToggle = document.querySelector('.menu-toggle');
-        const sidebar = document.querySelector('.sidebar');
 
-        // Function to handle sidebar toggle
-        function toggleSidebar() {
-            sidebar.classList.toggle('active');
+<footer class="sticky top-[100vh] lg:ms-[280px] w-full lg:w-auto bg-white/80 backdrop-blur-lg shadow-sm p-5">
+    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+        <div class="flex justify-between">
+            <p class="text-gray-600">&copy; Horst-Schlämmer-Gedächtnis-Gymnasium</p>
+            <p><a href="impressum.php"
+                  class="text-[var(--primary-color)] hover:text-[var(--accent-color)]">Impressum</a></p>
+        </div>
+    </div>
+</footer>
 
-            // Add overlay when sidebar is active on mobile/tablet
-            if (window.innerWidth <= 1024) {
-                if (sidebar.classList.contains('active')) {
-                    addOverlay();
-                } else {
-                    removeOverlay();
-                }
-            }
-        }
-
-        // Function to add overlay
-        function addOverlay() {
-            const overlay = document.createElement('div');
-            overlay.className = 'sidebar-overlay';
-            overlay.style.cssText = `
-                position: fixed;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                background: rgba(0, 0, 0, 0.5);
-                z-index: 45;
-                transition: opacity 0.3s ease;
-            `;
-            document.body.appendChild(overlay);
-
-            // Close sidebar when clicking overlay
-            overlay.addEventListener('click', () => {
-                sidebar.classList.remove('active');
-                removeOverlay();
-            });
-
-            // Fade in
-            requestAnimationFrame(() => {
-                overlay.style.opacity = '1';
-            });
-        }
-
-        // Function to remove overlay
-        function removeOverlay() {
-            const overlay = document.querySelector('.sidebar-overlay');
-            if (overlay) {
-                overlay.style.opacity = '0';
-                setTimeout(() => overlay.remove(), 300);
-            }
-        }
-
-        // Add click event to menu toggle
-        menuToggle.addEventListener('click', toggleSidebar);
-
-        // Handle window resize
-        let resizeTimer;
-        window.addEventListener('resize', () => {
-            clearTimeout(resizeTimer);
-            resizeTimer = setTimeout(() => {
-                if (window.innerWidth > 1024) {
-                    sidebar.classList.remove('active');
-                    removeOverlay();
-                }
-            }, 250);
-        });
-    });
-
-    // Add this right after your existing toggleSidebar function
-    function updateMenuVisibility() {
-        const menuToggle = document.querySelector('.menu-toggle');
-        if (window.innerWidth <= 768) { // Smartphone breakpoint
-            menuToggle.style.display = 'flex';
-        } else {
-            menuToggle.style.display = 'none';
-        }
-    }
-
-    // Add event listeners
-    window.addEventListener('resize', updateMenuVisibility);
-
-</script>
 </body>
 </html>