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

update styling of imprint and homepage

Browse Source
This commit is contained in:
Eric Blommel
2024-11-18 16:46:43 +01:00
parent a230554fea
commit 32fb286728
6 changed files with 523 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

266
webseite/homepage.php
View File

@@ -5,112 +5,28 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modernes Lernportal</title>
<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<link href="assets/css/styles.css" rel="stylesheet">
<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>
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
.card-hover {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.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);
}
.gradient-border {
position: relative;
background: linear-gradient(white, white) padding-box,
linear-gradient(45deg, #7C3AED, #F59E0B) border-box;
border: 4px solid transparent;
border-radius: 1rem;
}
.blob {
animation: blob 7s infinite;
filter: blur(40px);
}
@keyframes blob {
0%, 100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; }
33% { border-radius: 72% 28% 30% 70% / 53% 51% 49% 47%; }
66% { border-radius: 38% 62% 63% 37% / 46% 48% 52% 54%; }
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
/* Improved icon hover effect */
.w-12 {
transition: all 0.3s ease;
}
.card-hover:hover .w-12 {
transform: scale(1.1) rotate(-5deg);
}
/* Improved button hover effect */
.hover\:bg-purple-700:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}
/* Scroll to top button */
.scroll-top {
position: fixed;
bottom: 2rem;
right: 6rem; /* Move scroll-top button to the left of accessibility button */
background: linear-gradient(135deg, #7C3AED, #F59E0B);
color: white;
padding: 1rem;
border-radius: 50%;
cursor: pointer;
opacity: 0;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.scroll-top.visible {
opacity: 1;
}
.scroll-top:hover {
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
</style>
</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 class="blob absolute w-96 h-96 bg-sky-300/30 -top-48 -left-16"></div>
<div class="blob absolute w-96 h-96 bg-sky-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 -->
<a href="homepage.php" class="flex items-center">
<img src="assets/images/hsgg-logo.png" alt="HSGG Logo" class="h-10 mr-3">
<span class="text-2xl font-bold text-[var(--primary-color)]">HSGG</span>
</a>
</div>
</div>
</nav>
@@ -119,12 +35,10 @@
<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 class="text-5xl md:text-6xl font-bold text-gray-900 mb-6">
Willkommen beim <br><span
class="text-[var(--primary-color)]">Horst-Schlämmer-Gedächtnis-Gymnasium</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>
@@ -133,92 +47,35 @@
<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");
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);
// receive number of exercises for all topics of a subject
$numOfExcercises = 0;
foreach ($subject->topics as $topic) {
$numOfExcercises += count($topic->files);
}
?>
<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="rounded-2xl border-4 border-[<?php echo($subject->color); ?>] p-6 card-hover bg-white">
<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 class="w-12 h-12 rounded-lg bg-gray-100 flex items-center justify-center">
<i class="fas <?php echo($subject->icon); ?> text-2xl text-[<?php echo($subject->color); ?>]"></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="grid grid-cols-2 gap-4 mb-4">
<div class="text-center p-2 rounded-lg bg-gray-100">
<div class="font-bold text-[<?php echo($subject->color); ?>]"><?php echo(count($subject->topics)); ?></div>
<div class="text-sm text-gray-600">Themen</div>
</div>
<div class="text-center p-2 rounded-lg bg-gray-100">
<div class="font-bold text-[<?php echo($subject->color); ?>]"><?php echo($numOfExcercises); ?></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 text-sm"
style="background-color: <?php echo $colors['light']; ?>;
color: <?php echo $colors['primary']; ?>">
Bruchrechnung
</span>
</div>
</div>
</div>
@@ -231,78 +88,15 @@
</div>
<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">
<div class="flex justify-between">
<p class="text-gray-600">&copy; Horst-Schlämmer-Gedächtnis-Gymnasium</p>
<p><a href="impressum.php" class="text-purple-600 hover:text-purple-800">Impressum</a></p>
<p><a href="impressum.php"
class="text-[var(--primary-color)] hover:text-[var(--accent-color)]">Impressum</a></p>
</div>
</div>
</footer>
<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');
}
};
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
// 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
});
});
card.addEventListener('mouseleave', () => {
gsap.to(card.querySelector('.w-12'), {
rotate: 0,
scale: 1,
duration: 0.3
});
});
});
</script>
</body>
</html>