From 31af1460467389d63f2f4f780bfc7e9b0a509228 Mon Sep 17 00:00:00 2001
From: Eric Blommel <eric.blommel@alumni.fh-aachen.de>
Date: Mon, 18 Nov 2024 23:24:21 +0100
Subject: [PATCH] update styling of topic page

---
 webseite/assets/css/subject.css |  20 +-
 webseite/assets/css/topic.css   | 208 ++++++++++++++++
 webseite/subject.php            |  13 +-
 webseite/topic.php              | 420 +++++++++-----------------------
 4 files changed, 328 insertions(+), 333 deletions(-)
 create mode 100644 webseite/assets/css/topic.css

diff --git a/webseite/assets/css/subject.css b/webseite/assets/css/subject.css
index 6a8374c..fb9b0fe 100644
--- a/webseite/assets/css/subject.css
+++ b/webseite/assets/css/subject.css
@@ -7,7 +7,6 @@
 }
 
 body {
-    background-color: var(--bg-color);
     min-height: 100vh;
     display: flex;
     overflow-x: hidden;
@@ -47,6 +46,13 @@ body {
     transition: all 0.2s ease;
 }
 
+/* Active nav link style */
+.nav-link.active {
+    background: rgba(255, 255, 255, 0.15);
+    color: white;
+    font-weight: 600;
+}
+
 .nav-link:hover {
     background: rgba(255, 255, 255, 0.1);
     color: white;
@@ -63,7 +69,6 @@ body {
     top: 0;
     right: 0;
     padding: 1rem;
-    background: var(--card-bg);
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
     z-index: 40;
     display: flex;
@@ -81,7 +86,6 @@ body {
     outline: none;
     font-size: 1rem;
     transition: all 0.2s ease;
-    background: var(--bg-color);
 }
 
 .main-content {
@@ -102,7 +106,6 @@ body {
 }
 
 .topic-card {
-    background: var(--card-bg);
     border-radius: 20px;
     padding: 2rem;
     position: relative;
@@ -284,7 +287,6 @@ body {
     display: none;
     align-items: center;
     justify-content: center;
-    color: var(--text-primary);
     transition: all 0.3s ease;
 }
 
@@ -363,7 +365,6 @@ body {
 }
 
 .related-topics li {
-    background: white;
     padding: 0.5rem 1rem;
     border-radius: 20px;
     font-size: 0.9rem;
@@ -390,10 +391,3 @@ body {
     transform: translateY(-5px) scale(1.01);
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
 }
-
-/* Active nav link style */
-.nav-link.active {
-    background: rgba(255, 255, 255, 0.15);
-    color: white;
-    font-weight: 600;
-}
\ No newline at end of file
diff --git a/webseite/assets/css/topic.css b/webseite/assets/css/topic.css
new file mode 100644
index 0000000..5437597
--- /dev/null
+++ b/webseite/assets/css/topic.css
@@ -0,0 +1,208 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+body {
+    min-height: 100vh;
+    display: flex;
+    overflow-x: hidden;
+}
+
+/* Left Sidebar Styles */
+.sidebar {
+    width: 280px;
+    height: 100vh;
+    padding: 2rem;
+    position: fixed;
+    left: 0;
+    top: 0;
+    transition: transform 0.3s ease;
+    z-index: 50;
+}
+
+.sidebar-header {
+    color: white;
+    margin-bottom: 2rem;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.sidebar-header i {
+    font-size: 2rem;
+}
+
+.nav-link {
+    display: flex;
+    align-items: center;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.8);
+    text-decoration: none;
+    border-radius: 12px;
+    margin-bottom: 0.5rem;
+    transition: all 0.2s ease;
+}
+
+.nav-link:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    transform: translateX(5px);
+}
+
+.nav-link i {
+    margin-right: 1rem;
+    font-size: 1.25rem;
+}
+
+/* Main Content Styles */
+.main-content {
+    margin-left: 280px;
+    padding: 2rem;
+    flex: 1;
+}
+
+
+/* Content Card Styles */
+.content-card {
+    border-radius: 20px;
+    padding: 2rem;
+    margin-bottom: 2rem;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+
+.content-title {
+    font-size: 2rem;
+    margin-bottom: 1rem;
+}
+
+.content-text {
+    line-height: 1.7;
+    margin-bottom: 1.5rem;
+}
+
+/* Add these styles for the related-topics section */
+.related-topics {
+    padding: 1.25rem;
+    border-radius: 12px;
+}
+
+.related-topics h4 {
+    color: var(--primary-color);
+    margin-bottom: 1rem;
+    font-size: 1rem;
+}
+
+.related-topics ul {
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.related-topics li {
+    padding: 0.5rem 1rem;
+    border-radius: 20px;
+    font-size: 0.9rem;
+    transition: all 0.2s ease;
+    cursor: pointer;
+}
+
+.related-topics li:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.related-topics a {
+    color: inherit;
+    text-decoration: none;
+}
+
+/* Exercise Section Styles */
+.exercise-section {
+    padding: 1.5rem;
+    border-radius: 12px;
+    color: white;
+    margin-top: 2rem;
+    position: relative;
+    overflow: hidden;
+}
+
+.exercise-section::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1));
+    pointer-events: none;
+}
+
+.download-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    padding: 0.75rem 1.25rem;
+    border-radius: 10px;
+    text-decoration: none;
+    margin: 0.5rem;
+    backdrop-filter: blur(5px);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.download-btn:hover {
+    background: rgba(255, 255, 255, 0.2);
+    transform: translateY(-3px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+@media (max-width: 768px) {
+    .sidebar {
+        transform: translateX(-100%);
+    }
+
+    .sidebar.active {
+        transform: translateX(0);
+    }
+
+    .main-content {
+        margin-left: 0;
+    }
+}
+
+/* Active nav link style */
+.nav-link.active {
+    background: rgba(255, 255, 255, 0.15);
+    color: white;
+    font-weight: 600;
+}
+
+/* List style improvement */
+.content-text li {
+    position: relative;
+    padding-left: 1.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.content-text li::before {
+    content: '•';
+    position: absolute;
+    left: 0;
+    font-weight: bold;
+}
+
+.menu-toggle {
+    padding: 0.75rem;
+    border-radius: 10px;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+}
\ No newline at end of file
diff --git a/webseite/subject.php b/webseite/subject.php
index 26746d4..edc6cef 100644
--- a/webseite/subject.php
+++ b/webseite/subject.php
@@ -38,7 +38,7 @@ $topics = $subjectData->topics;
     <a href="homepage.php" class="nav-link">
         <i class="fas fa-home"></i> Startseite
     </a>
-    <a href="#" class="nav-link">
+    <a href="#" class="nav-link active">
         <i class="fas fa-book"></i> <?php echo($subjectData->displayName); ?> Übersicht
     </a>
 </nav>
@@ -126,8 +126,6 @@ $topics = $subjectData->topics;
     document.addEventListener('DOMContentLoaded', () => {
         const menuToggle = document.querySelector('.menu-toggle');
         const sidebar = document.querySelector('.sidebar');
-        const searchContainer = document.querySelector('.search-container');
-        const mainContent = document.querySelector('.main-content');
 
         // Function to handle sidebar toggle
         function toggleSidebar() {
@@ -194,14 +192,6 @@ $topics = $subjectData->topics;
                 }
             }, 250);
         });
-
-        // Handle escape key to close sidebar
-        document.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape' && sidebar.classList.contains('active')) {
-                sidebar.classList.remove('active');
-                removeOverlay();
-            }
-        });
     });
 
     // Add this right after your existing toggleSidebar function
@@ -215,7 +205,6 @@ $topics = $subjectData->topics;
     }
 
     // Add event listeners
-    window.addEventListener('load', updateMenuVisibility);
     window.addEventListener('resize', updateMenuVisibility);
 
     // Update search function with fallback animation
diff --git a/webseite/topic.php b/webseite/topic.php
index 922dda5..46e7f80 100644
--- a/webseite/topic.php
+++ b/webseite/topic.php
@@ -1,21 +1,21 @@
 <!DOCTYPE html>
 
 <?php
-require_once ("classes/SubjectData.php");
-require_once ("classes/TopicData.php");
+require_once("classes/SubjectData.php");
+require_once("classes/TopicData.php");
 
-if(!isset($_GET["subject"])) {
+if (!isset($_GET["subject"])) {
     die("Ungültige Seite");
 }
 $subjectData = SubjectData::fromName($_GET["subject"]);
-if(!isset($subjectData)) {
+if (!isset($subjectData)) {
     die("Ungültige Seite");
 }
-if(!isset($_GET["topic"])) {
+if (!isset($_GET["topic"])) {
     die("Ungültige Seite");
 }
 $topicData = TopicData::fromName($_GET["subject"], $_GET["topic"]);
-if(!isset($topicData)) {
+if (!isset($topicData)) {
     die("Ungültige Seite");
 }
 
@@ -27,292 +27,17 @@ if(!isset($topicData)) {
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title><?php echo($topicData->displayName); ?> - <?php echo($subjectData->displayName); ?></title>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <link href="assets/css/topic.css" rel="stylesheet">
     <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>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-        }
-
-        :root {
-            --primary: #7C3AED;
-            --primary-light: #9F67FF;
-            --primary-dark: #6D28D9;
-            --bg-color: #F4F7FE;
-            --card-bg: #ffffff;
-            --text-primary: #1E293B;
-            --text-secondary: #64748B;
-            --accent: #F59E0B;
-        }
-
-        body {
-            background-color: var(--bg-color);
-            min-height: 100vh;
-            display: flex;
-            overflow-x: hidden;
-        }
-
-        /* Left Sidebar Styles */
-        .sidebar {
-            width: 280px;
-            height: 100vh;
-            background: var(--primary);
-            padding: 2rem;
-            position: fixed;
-            left: 0;
-            top: 0;
-            transition: transform 0.3s ease;
-            z-index: 50;
-        }
-
-        .sidebar-header {
-            color: white;
-            margin-bottom: 2rem;
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-        }
-
-        .sidebar-header i {
-            font-size: 2rem;
-        }
-
-        .nav-link {
-            display: flex;
-            align-items: center;
-            padding: 1rem;
-            color: rgba(255, 255, 255, 0.8);
-            text-decoration: none;
-            border-radius: 12px;
-            margin-bottom: 0.5rem;
-            transition: all 0.2s ease;
-        }
-
-        .nav-link:hover {
-            background: rgba(255, 255, 255, 0.1);
-            color: white;
-            transform: translateX(5px);
-        }
-
-        .nav-link i {
-            margin-right: 1rem;
-            font-size: 1.25rem;
-        }
-
-        /* Main Content Styles */
-        .main-content {
-            margin-left: 280px;
-            margin-right: 300px;
-            padding: 2rem;
-            flex: 1;
-        }
-
-        .search-container {
-            position: sticky;
-            top: 0;
-            background: var(--card-bg);
-            padding: 1rem;
-            border-radius: 12px;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-            margin-bottom: 2rem;
-            z-index: 40;
-        }
-
-        .search-box {
-            width: 100%;
-            padding: 0.75rem 1rem;
-            border: 2px solid #E2E8F0;
-            border-radius: 12px;
-            outline: none;
-            font-size: 1rem;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-        }
-
-        .search-box:focus {
-            border-color: var(--primary);
-            box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
-        }
-
-        /* Content Card Styles */
-        .content-card {
-            background: var(--card-bg);
-            border-radius: 20px;
-            padding: 2rem;
-            margin-bottom: 2rem;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-
-        .content-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
-        }
-
-        .content-title {
-            font-size: 2rem;
-            color: var(--text-primary);
-            margin-bottom: 1rem;
-        }
-
-        .content-text {
-            color: var(--text-secondary);
-            line-height: 1.7;
-            margin-bottom: 1.5rem;
-        }
-
-        /* Right Sidebar Styles */
-        .right-sidebar {
-            width: 300px;
-            height: 100vh;
-            position: fixed;
-            right: 0;
-            top: 0;
-            padding: 2rem;
-            background: var(--card-bg);
-            border-left: 1px solid rgba(0, 0, 0, 0.1);
-        }
-
-        .related-topics {
-            background: rgba(124, 58, 237, 0.05);
-            padding: 1.25rem;
-            border-radius: 12px;
-            margin-bottom: 1.5rem;
-        }
-
-        .related-topics h3 {
-            color: var(--primary);
-            margin-bottom: 1rem;
-        }
-
-        .topic-tag {
-            display: inline-block;
-            padding: 0.5rem 1rem;
-            background: white;
-            border-radius: 20px;
-            margin: 0.25rem;
-            font-size: 0.9rem;
-            color: var(--text-secondary);
-            border: 1px solid rgba(124, 58, 237, 0.2);
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            cursor: pointer;
-        }
-
-        .topic-tag:hover {
-            background: var(--primary);
-            color: white;
-            transform: translateY(-3px);
-            box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
-        }
-
-        /* Exercise Section Styles */
-        .exercise-section {
-            background: linear-gradient(135deg, var(--primary-light), var(--primary));
-            padding: 1.5rem;
-            border-radius: 12px;
-            color: white;
-            margin-top: 2rem;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .exercise-section::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1));
-            pointer-events: none;
-        }
-
-        .download-btn {
-            display: inline-flex;
-            align-items: center;
-            gap: 0.5rem;
-            background: rgba(255, 255, 255, 0.1);
-            color: white;
-            padding: 0.75rem 1.25rem;
-            border-radius: 10px;
-            text-decoration: none;
-            margin: 0.5rem;
-            backdrop-filter: blur(5px);
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-
-        .download-btn:hover {
-            background: rgba(255, 255, 255, 0.2);
-            transform: translateY(-3px);
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-        }
-
-        /* Responsive Design */
-        @media (max-width: 1200px) {
-            .right-sidebar {
-                display: none;
-            }
-            .main-content {
-                margin-right: 0;
-            }
-        }
-
-        @media (max-width: 768px) {
-            .sidebar {
-                transform: translateX(-100%);
-            }
-            .sidebar.active {
-                transform: translateX(0);
-            }
-            .main-content {
-                margin-left: 0;
-            }
-        }
-
-        /* Active nav link style */
-        .nav-link.active {
-            background: rgba(255, 255, 255, 0.15);
-            color: white;
-            font-weight: 600;
-        }
-
-        /* List style improvement */
-        .content-text li {
-            position: relative;
-            padding-left: 1.5rem;
-            margin-bottom: 0.5rem;
-        }
-
-        .content-text li::before {
-            content: '•';
-            color: var(--primary);
-            position: absolute;
-            left: 0;
-            font-weight: bold;
-        }
-
-        /* Add this CSS to your existing styles */
-         mark {
-             background-color: rgba(124, 58, 237, 0.2);
-             color: inherit;
-             padding: 0 2px;
-             border-radius: 2px;
-             transition: background-color 0.3s ease;
-         }
-
-        mark:hover {
-            background-color: rgba(124, 58, 237, 0.4);
-        }
-    </style>
 </head>
 <body>
+<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">
+<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>
@@ -329,10 +54,7 @@ if(!isset($topicData)) {
 </nav>
 
 <!-- Main Content -->
-<main class="main-content">
-    <div class="search-container">
-        <input type="text" class="search-box" id="searchInput" placeholder="Suche nach Themen, Übungen oder Hilfe..." oninput="handleContentSearch()">
-    </div>
+<main class="main-content max-w-7xl">
 
     <div class="content-card">
         <h1 class="content-title"><?php echo($topicData->displayName); ?></h1>
@@ -343,14 +65,15 @@ if(!isset($topicData)) {
             <?php echo($topicData->article); ?>
         </p>
 
-        <div class="exercise-section">
+        <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;">
                 <?php
                 foreach ($topicData->files as $fileName) {
                     ?>
 
-                    <a href='<?php echo("config/subjects/$subjectData->id/topics/$topicData->id/$fileName")?>' target="_blank" download class="download-btn">
+                    <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>
@@ -361,32 +84,113 @@ if(!isset($topicData)) {
             </div>
         </div>
     </div>
-</main>
 
-<!-- Right Sidebar -->
-<aside class="right-sidebar">
-    <div class="related-topics">
-        <h3>Verwandte Themen</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->relatedTopics as $relatedTopicName) {
                 $relatedTopic = $subjectData->topics[$relatedTopicName];
-                if(!isset($relatedTopic)) {
+                if (!isset($relatedTopic)) {
                     continue;
                 }
-
                 ?>
-
-                <a href='<?php echo("topic.php?subject=$subjectData->id&topic=$relatedTopic->id") ?>'>
-                    <span class="topic-tag"><?php echo($relatedTopic->displayName); ?></span>
-                </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
             }
             ?>
-        </div>
+        </ul>
     </div>
-</aside>
+</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');
+
+            // 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>