Update file homepage.php
This commit is contained in:
Kelvi Yawo Jules Agbessi Awuklu
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user