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

Update file homepage.php

Browse Source
This commit is contained in:
Kelvi Yawo Jules Agbessi Awuklu
2024-11-16 22:34:39 +01:00
parent a813cda944
commit db6919dddf
1 changed files with 179 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

303
webseite/homepage.php
View File

@@ -23,13 +23,13 @@
.card-hover:hover { .card-hover:hover {
transform: translateY(-10px) scale(1.02); transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 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 { .gradient-border {
position: relative; position: relative;
background: linear-gradient(white, white) padding-box, 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: 4px solid transparent;
border-radius: 1rem; border-radius: 1rem;
} }
@@ -97,88 +97,143 @@
</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 -->
<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 -->
<!-- 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>
</div> <!-- Add this accessibility controls -->
</nav>
<!-- 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>
</div> </div>
</nav>
<!-- Subject Grid --> <!-- Hero Section -->
<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="pt-24 pb-16 px-4">
<!-- Mathematik --> <div class="max-w-7xl mx-auto">
<?php <div class="text-center">
require_once ("classes/SubjectData.php"); <h1 class="text-5xl md:text-6xl font-bold text-gray-900 mb-6 pulse">
$subjects = SubjectData::getAll(); 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) { <!-- 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">
<a href="subject.php?subject=<?php echo($subject->id); ?>" class="block"> <!-- Mathematik -->
<div class="gradient-border p-6 card-hover bg-white"> <?php
<div class="flex items-start space-x-4"> require_once ("classes/SubjectData.php");
<div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center"> $subjects = SubjectData::getAll();
<i class="fas <?php echo($subject->icon); ?> text-2xl text-purple-600"></i>
</div> // Function to generate color variants from base color
<div class="flex-1"> function generateColorVariants($baseColor) {
<h3 class="text-xl font-bold text-gray-900 mb-2"><?php echo($subject->displayName); ?></h3> // Remove # if present
<p class="text-gray-600 mb-4"><?php echo($subject->description); ?></p> $baseColor = ltrim($baseColor, '#');
<div class="grid grid-cols-3 gap-4 mb-4">
<div class="text-center p-2 rounded-lg bg-purple-50"> // Convert to RGB
<div class="font-bold text-purple-600">150+</div> $r = hexdec(substr($baseColor, 0, 2));
<div class="text-sm text-gray-600">Übungen</div> $g = hexdec(substr($baseColor, 2, 2));
</div> $b = hexdec(substr($baseColor, 4, 2));
<div class="text-center p-2 rounded-lg bg-purple-50">
<div class="font-bold text-purple-600">12</div> // Generate lighter variant for secondary
<div class="text-sm text-gray-600">Kapitel</div> $secondary = sprintf("#%02x%02x%02x",
</div> min(255, $r + 70),
<div class="text-center p-2 rounded-lg bg-purple-50"> min(255, $g + 70),
<div class="font-bold text-purple-600">4.8</div> min(255, $b + 70)
<div class="text-sm text-gray-600">Bewertung</div> );
</div>
</div> // Generate very light variant for background
<div class="flex items-center space-x-2"> $light = sprintf("#%02x%02x%02x",
<span class="text-sm text-gray-500">Aktuelle Einheit:</span> min(255, $r + 140),
<span class="px-2 py-1 rounded-full bg-purple-100 text-purple-600 text-sm">Bruchrechnung</span> min(255, $g + 140),
</div> min(255, $b + 140)
</div> );
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>
</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"> <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,65 +244,65 @@
</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,
y: 60, y: 60,
opacity: 0, opacity: 0,
stagger: 0.2, stagger: 0.2,
ease: "power3.out" ease: "power3.out"
}); });
// Add intersection observer for scroll animations // Add intersection observer for scroll animations
const observer = new IntersectionObserver((entries) => { const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => { entries.forEach(entry => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
entry.target.style.transform = "translateY(0)"; entry.target.style.transform = "translateY(0)";
entry.target.style.opacity = "1"; 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');
} }
}; });
}, { threshold: 0.1 });
function scrollToTop() { document.querySelectorAll('.gradient-border').forEach((el) => {
window.scrollTo({ observer.observe(el);
top: 0, });
behavior: 'smooth'
}); // 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 function scrollToTop() {
document.querySelectorAll('.gradient-border').forEach(card => { window.scrollTo({
card.addEventListener('mouseenter', () => { top: 0,
gsap.to(card.querySelector('.w-12'), { behavior: 'smooth'
rotate: -10, });
scale: 1.2, }
duration: 0.3
});
});
card.addEventListener('mouseleave', () => { // Add hover effects for subject cards
gsap.to(card.querySelector('.w-12'), { document.querySelectorAll('.gradient-border').forEach(card => {
rotate: 0, card.addEventListener('mouseenter', () => {
scale: 1, gsap.to(card.querySelector('.w-12'), {
duration: 0.3 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> </body>
</html> </html>