From db6919dddf39b0d7df9709dfaa4488eb2e239a46 Mon Sep 17 00:00:00 2001
From: Kelvi Yawo Jules Agbessi Awuklu <kelvi.awuklu@alumni.fh-aachen.de>
Date: Sat, 16 Nov 2024 22:34:39 +0100
Subject: [PATCH] Update file homepage.php

---
 webseite/homepage.php | 303 +++++++++++++++++++++++++-----------------
 1 file changed, 179 insertions(+), 124 deletions(-)
diff --git a/webseite/homepage.php b/webseite/homepage.php
index a7dbd14..2390e93 100644
--- a/webseite/homepage.php
+++ b/webseite/homepage.php
@@ -23,13 +23,13 @@
         .card-hover:hover {
             transform: translateY(-10px) scale(1.02);
             box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
-                        0 10px 10px -5px rgba(0, 0, 0, 0.04);
+            0 10px 10px -5px rgba(0, 0, 0, 0.04);
         }
 
         .gradient-border {
             position: relative;
             background: linear-gradient(white, white) padding-box,
-                       linear-gradient(45deg, #7C3AED, #F59E0B) border-box;
+            linear-gradient(45deg, #7C3AED, #F59E0B) border-box;
             border: 4px solid transparent;
             border-radius: 1rem;
         }
@@ -97,88 +97,143 @@
 </head>
 <body class="bg-gray-50">
 <!-- Animated background blobs -->
-    <div class="fixed inset-0 -z-10 overflow-hidden">
-        <div class="blob absolute w-96 h-96 bg-purple-300/30 -top-48 -left-16"></div>
-        <div class="blob absolute w-96 h-96 bg-amber-300/30 bottom-0 right-0"></div>
-    </div>
-
-    <!-- Navigation -->
-    <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">
-                <div class="flex items-center">
-                    <span class="text-2xl font-bold text-purple-600">Lern<span class="text-amber-500">Portal</span></span>
-                </div>
-                <!-- Add this accessibility controls -->
+<div class="fixed inset-0 -z-10 overflow-hidden">
+    <div class="blob absolute w-96 h-96 bg-purple-300/30 -top-48 -left-16"></div>
+    <div class="blob absolute w-96 h-96 bg-amber-300/30 bottom-0 right-0"></div>
+</div>
 
+<!-- Navigation -->
+<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">
+            <div class="flex items-center">
+                <span class="text-2xl font-bold text-purple-600">Lern<span class="text-amber-500">Portal</span></span>
             </div>
-        </div>
-    </nav>
+            <!-- Add this accessibility controls -->
 
-    <!-- Hero Section -->
-    <div class="pt-24 pb-16 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 pulse">
-                    Entdecke deine <span class="text-purple-600">Lernreise</span>
-                </h1>
-                <p class="text-xl text-gray-600 max-w-2xl mx-auto">
-                    Interaktives Lernen für die digitale Generation. Personalisierte Lernpfade, sofortiges Feedback und spielerische Elemente.
-                </p>
-            </div>
         </div>
     </div>
+</nav>
 
-    <!-- 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">
-        <!-- Mathematik -->
-        <?php
-            require_once ("classes/SubjectData.php");
-            $subjects = SubjectData::getAll();
+<!-- Hero Section -->
+<div class="pt-24 pb-16 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 pulse">
+                Entdecke deine <span class="text-purple-600">Lernreise</span>
+            </h1>
+            <p class="text-xl text-gray-600 max-w-2xl mx-auto">
+                Interaktives Lernen für die digitale Generation. Personalisierte Lernpfade, sofortiges Feedback und spielerische Elemente.
+            </p>
+        </div>
+    </div>
+</div>
 
-            foreach ($subjects as $subject) {
-                ?>
-                    <a href="subject.php?subject=<?php echo($subject->id); ?>" class="block">
-                        <div class="gradient-border p-6 card-hover bg-white">
-                            <div class="flex items-start space-x-4">
-                                <div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center">
-                                    <i class="fas <?php echo($subject->icon); ?> text-2xl text-purple-600"></i>
-                                </div>
-                                <div class="flex-1">
-                                    <h3 class="text-xl font-bold text-gray-900 mb-2"><?php echo($subject->displayName); ?></h3>
-                                    <p class="text-gray-600 mb-4"><?php echo($subject->description); ?></p>
-                                    <div class="grid grid-cols-3 gap-4 mb-4">
-                                        <div class="text-center p-2 rounded-lg bg-purple-50">
-                                            <div class="font-bold text-purple-600">150+</div>
-                                            <div class="text-sm text-gray-600">Übungen</div>
-                                        </div>
-                                        <div class="text-center p-2 rounded-lg bg-purple-50">
-                                            <div class="font-bold text-purple-600">12</div>
-                                            <div class="text-sm text-gray-600">Kapitel</div>
-                                        </div>
-                                        <div class="text-center p-2 rounded-lg bg-purple-50">
-                                            <div class="font-bold text-purple-600">4.8</div>
-                                            <div class="text-sm text-gray-600">Bewertung</div>
-                                        </div>
-                                    </div>
-                                    <div class="flex items-center space-x-2">
-                                        <span class="text-sm text-gray-500">Aktuelle Einheit:</span>
-                                        <span class="px-2 py-1 rounded-full bg-purple-100 text-purple-600 text-sm">Bruchrechnung</span>
-                                    </div>
-                                </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">
+    <!-- Mathematik -->
+    <?php
+    require_once ("classes/SubjectData.php");
+    $subjects = SubjectData::getAll();
+
+    // Function to generate color variants from base color
+    function generateColorVariants($baseColor) {
+        // Remove # if present
+        $baseColor = ltrim($baseColor, '#');
+
+        // Convert to RGB
+        $r = hexdec(substr($baseColor, 0, 2));
+        $g = hexdec(substr($baseColor, 2, 2));
+        $b = hexdec(substr($baseColor, 4, 2));
+
+        // Generate lighter variant for secondary
+        $secondary = sprintf("#%02x%02x%02x",
+            min(255, $r + 70),
+            min(255, $g + 70),
+            min(255, $b + 70)
+        );
+
+        // Generate very light variant for background
+        $light = sprintf("#%02x%02x%02x",
+            min(255, $r + 140),
+            min(255, $g + 140),
+            min(255, $b + 140)
+        );
+
+        return [
+            'primary' => '#' . $baseColor,
+            'secondary' => $secondary,
+            'light' => $light
+        ];
+    }
+
+    // Generate colors for each subject
+    foreach ($subjects as $subject) {
+        $colors = generateColorVariants($subject->color);
+        ?>
+        <a href="subject.php?subject=<?php echo($subject->id); ?>" class="block">
+            <div class="gradient-border p-6 card-hover" style="
+                    background: linear-gradient(145deg,
+            <?php echo $colors['light']; ?> 0%,
+                    white 100%
+                    );
+                    border: 2px solid <?php echo $colors['secondary']; ?>;
+                    border-radius: 1rem;
+                    box-shadow: 0 4px 6px -1px <?php echo $colors['light']; ?>,
+                    0 2px 4px -2px <?php echo $colors['secondary']; ?>;">
+                <div class="flex items-start space-x-4">
+                    <div class="w-12 h-12 rounded-lg flex items-center justify-center"
+                         style="background-color: rgba(<?php
+                         $hex = ltrim($colors['primary'], '#');
+                         $r = hexdec(substr($hex, 0, 2));
+                         $g = hexdec(substr($hex, 2, 2));
+                         $b = hexdec(substr($hex, 4, 2));
+                         echo "$r, $g, $b, 0.1";
+                         ?>)">
+                        <i class="fas <?php echo($subject->icon); ?> text-2xl"
+                           style="color: <?php echo $colors['primary']; ?>"></i>
+                    </div>
+                    <div class="flex-1">
+                        <h3 class="text-xl font-bold text-gray-900 mb-2"><?php echo($subject->displayName); ?></h3>
+                        <p class="text-gray-600 mb-4"><?php echo($subject->description); ?></p>
+                        <div class="grid grid-cols-3 gap-4 mb-4">
+                            <div class="text-center p-2 rounded-lg"
+                                 style="background-color: <?php echo $colors['light']; ?>">
+                                <div class="font-bold"
+                                     style="color: <?php echo $colors['primary']; ?>">150+</div>
+                                <div class="text-sm text-gray-600">Übungen</div>
+                            </div>
+                            <div class="text-center p-2 rounded-lg bg-purple-50">
+                                <div class="font-bold text-purple-600">12</div>
+                                <div class="text-sm text-gray-600">Kapitel</div>
+                            </div>
+                            <div class="text-center p-2 rounded-lg bg-purple-50">
+                                <div class="font-bold text-purple-600">4.8</div>
+                                <div class="text-sm text-gray-600">Bewertung</div>
                             </div>
                         </div>
-                    </a>
+                        <div class="flex items-center space-x-2">
+                            <span class="text-sm text-gray-500">Aktuelle Einheit:</span>
+                            <span class="px-2 py-1 rounded-full text-sm"
+                                  style="background-color: <?php echo $colors['light']; ?>;
+                                          color: <?php echo $colors['primary']; ?>">
+                                            Bruchrechnung
+                                        </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </a>
 
-                <?php
-            }
-        ?>
+        <?php
+    }
+    ?>
 
-    </div>
+</div>
 
-    <button class="scroll-top" onclick="scrollToTop()" id="scrollTop">
-        <i class="fas fa-arrow-up"></i>
-    </button>
+<button class="scroll-top" onclick="scrollToTop()" id="scrollTop">
+    <i class="fas fa-arrow-up"></i>
+</button>
 
 <footer class="fixed bottom-0 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">
@@ -189,65 +244,65 @@
     </div>
 </footer>
 
-    <script>
-        // Initialize GSAP animations
-        gsap.from(".gradient-border", {
-            duration: 0.8,
-            y: 60,
-            opacity: 0,
-            stagger: 0.2,
-            ease: "power3.out"
-        });
+<script>
+    // Initialize GSAP animations
+    gsap.from(".gradient-border", {
+        duration: 0.8,
+        y: 60,
+        opacity: 0,
+        stagger: 0.2,
+        ease: "power3.out"
+    });
 
-        // Add intersection observer for scroll animations
-        const observer = new IntersectionObserver((entries) => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    entry.target.style.transform = "translateY(0)";
-                    entry.target.style.opacity = "1";
-                }
-            });
-        }, { threshold: 0.1 });
-
-        document.querySelectorAll('.gradient-border').forEach((el) => {
-            observer.observe(el);
-        });
-
-        // Scroll to top functionality
-        window.onscroll = function() {
-            const scrollBtn = document.getElementById('scrollTop');
-            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
-                scrollBtn.classList.add('visible');
-            } else {
-                scrollBtn.classList.remove('visible');
+    // Add intersection observer for scroll animations
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.style.transform = "translateY(0)";
+                entry.target.style.opacity = "1";
             }
-        };
+        });
+    }, { threshold: 0.1 });
 
-        function scrollToTop() {
-            window.scrollTo({
-                top: 0,
-                behavior: 'smooth'
-            });
+    document.querySelectorAll('.gradient-border').forEach((el) => {
+        observer.observe(el);
+    });
+
+    // Scroll to top functionality
+    window.onscroll = function() {
+        const scrollBtn = document.getElementById('scrollTop');
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            scrollBtn.classList.add('visible');
+        } else {
+            scrollBtn.classList.remove('visible');
         }
+    };
 
-        // Add hover effects for subject cards
-        document.querySelectorAll('.gradient-border').forEach(card => {
-            card.addEventListener('mouseenter', () => {
-                gsap.to(card.querySelector('.w-12'), {
-                    rotate: -10,
-                    scale: 1.2,
-                    duration: 0.3
-                });
-            });
+    function scrollToTop() {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+    }
 
-            card.addEventListener('mouseleave', () => {
-                gsap.to(card.querySelector('.w-12'), {
-                    rotate: 0,
-                    scale: 1,
-                    duration: 0.3
-                });
+    // Add hover effects for subject cards
+    document.querySelectorAll('.gradient-border').forEach(card => {
+        card.addEventListener('mouseenter', () => {
+            gsap.to(card.querySelector('.w-12'), {
+                rotate: -10,
+                scale: 1.2,
+                duration: 0.3
             });
         });
-    </script>
+
+        card.addEventListener('mouseleave', () => {
+            gsap.to(card.querySelector('.w-12'), {
+                rotate: 0,
+                scale: 1,
+                duration: 0.3
+            });
+        });
+    });
+</script>
 </body>
 </html>
