Safak/SWE
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Ui responsiveness #65

Merged
ka4299s merged 6 commits from UI-Responsiveness into dev 2024-11-17 17:40:58 +01:00
Conversation 12 Commits 6 Files Changed 49 +179 -124
1 changed files with 179 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit db6919dddf - Show all commits

97
webseite/homepage.php
View File

@@ -97,13 +97,13 @@
</head> </head>
<body class="bg-gray-50"> <body class="bg-gray-50">
<!-- Animated background blobs --> <!-- Animated background blobs -->
<div class="fixed inset-0 -z-10 overflow-hidden"> <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-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 class="blob absolute w-96 h-96 bg-amber-300/30 bottom-0 right-0"></div>
</div> </div>
<!-- Navigation --> <!-- Navigation -->
<nav class="fixed top-0 w-full bg-white/80 backdrop-blur-lg shadow-sm z-50"> <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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16"> <div class="flex justify-between h-16">
<div class="flex items-center"> <div class="flex items-center">
@@ -113,10 +113,10 @@
</div> </div>
</div> </div>
</nav> </nav>
<!-- Hero Section --> <!-- Hero Section -->
<div class="pt-24 pb-16 px-4"> <div class="pt-24 pb-16 px-4">
<div class="max-w-7xl mx-auto"> <div class="max-w-7xl mx-auto">
<div class="text-center"> <div class="text-center">
<h1 class="text-5xl md:text-6xl font-bold text-gray-900 mb-6 pulse"> <h1 class="text-5xl md:text-6xl font-bold text-gray-900 mb-6 pulse">
@@ -127,29 +127,80 @@
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<!-- Subject Grid --> <!-- 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 py-12 grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
<!-- Mathematik --> <!-- Mathematik -->
<?php <?php
require_once ("classes/SubjectData.php"); require_once ("classes/SubjectData.php");
$subjects = SubjectData::getAll(); $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) { foreach ($subjects as $subject) {
$colors = generateColorVariants($subject->color);
?> ?>
<a href="subject.php?subject=<?php echo($subject->id); ?>" class="block"> <a href="subject.php?subject=<?php echo($subject->id); ?>" class="block">
<div class="gradient-border p-6 card-hover bg-white"> <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="flex items-start space-x-4">
<div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center"> <div class="w-12 h-12 rounded-lg flex items-center justify-center"
<i class="fas <?php echo($subject->icon); ?> text-2xl text-purple-600"></i> 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>
<div class="flex-1"> <div class="flex-1">
<h3 class="text-xl font-bold text-gray-900 mb-2"><?php echo($subject->displayName); ?></h3> <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> <p class="text-gray-600 mb-4"><?php echo($subject->description); ?></p>
<div class="grid grid-cols-3 gap-4 mb-4"> <div class="grid grid-cols-3 gap-4 mb-4">
<div class="text-center p-2 rounded-lg bg-purple-50"> <div class="text-center p-2 rounded-lg"
<div class="font-bold text-purple-600">150+</div> 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 class="text-sm text-gray-600">Übungen</div>
</div> </div>
<div class="text-center p-2 rounded-lg bg-purple-50"> <div class="text-center p-2 rounded-lg bg-purple-50">
@@ -163,7 +214,11 @@
</div> </div>
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<span class="text-sm text-gray-500">Aktuelle Einheit:</span> <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> <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>
</div> </div>
@@ -174,11 +229,11 @@
} }
?> ?>
</div> </div>
<button class="scroll-top" onclick="scrollToTop()" id="scrollTop"> <button class="scroll-top" onclick="scrollToTop()" id="scrollTop">
<i class="fas fa-arrow-up"></i> <i class="fas fa-arrow-up"></i>
</button> </button>
<footer class="fixed bottom-0 w-full bg-white/80 backdrop-blur-lg shadow-sm p-5"> <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"> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
@@ -189,7 +244,7 @@
</div> </div>
</footer> </footer>
<script> <script>
// Initialize GSAP animations // Initialize GSAP animations
gsap.from(".gradient-border", { gsap.from(".gradient-border", {
duration: 0.8, duration: 0.8,
@@ -248,6 +303,6 @@
}); });
}); });
}); });
</script> </script>
</body> </body>
</html> </html>