diff --git a/webseite/assets/css/styles.css b/webseite/assets/css/styles.css new file mode 100644 index 0000000..49ff3b8 --- /dev/null +++ b/webseite/assets/css/styles.css @@ -0,0 +1,97 @@ +/* styles.css */ + +/* Corporate Design Colors */ +:root { + --primary-color: #5265A0; /* HSGG Blau */ + --secondary-color: #323966; /* Dunkel Blau */ + --background-color: #F3F4F6; /* Gray-50 */ + --text-color: #1F2937; /* Gray-900 */ + --accent-color: #62a1f4; /* Green */ +} + +@tailwind base; +@tailwind components; +@tailwind utilities; + +/* Keyframes and animations */ +@keyframes float { + 0%, 100% { + transform: translateY(0px); + } + 50% { + transform: translateY(-20px); + } +} + +@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%; + } +} + +@keyframes pulse { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.05); + } + 100% { + transform: scale(1); + } +} + +/* General styles */ +.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(-5px) 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(60px); /* Increased blur value */ + background: var(--accent-color); /* Ensure background color is set */ + padding: 50px; +} + +.pulse { + animation: pulse 2s infinite; +} + +.scroll-top.visible { + opacity: 1; +} + +.scroll-top:hover { + transform: translateY(-3px); + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); +} + +/* Imprint page styles */ +.content { + margin: auto; + padding: 2rem; + background: white; + border-radius: 1rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); +} \ No newline at end of file diff --git a/webseite/assets/css/subject.css b/webseite/assets/css/subject.css new file mode 100644 index 0000000..fb9b0fe --- /dev/null +++ b/webseite/assets/css/subject.css @@ -0,0 +1,393 @@ +/* Subject page styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; +} + +body { + min-height: 100vh; + display: flex; + overflow-x: hidden; +} + +.sidebar { + width: 280px; + height: 100vh; + padding: 2rem; + position: fixed; + left: 0; + top: 0; + transition: transform 0.3s ease; + z-index: 50; +} + +.sidebar-header { + color: white; + margin-bottom: 2rem; + display: flex; + align-items: center; + gap: 1rem; +} + +.sidebar-header i { + font-size: 2rem; +} + +.nav-link { + display: flex; + align-items: center; + padding: 1rem; + color: rgba(255, 255, 255, 0.8); + text-decoration: none; + border-radius: 12px; + margin-bottom: 0.5rem; + transition: all 0.2s ease; +} + +/* Active nav link style */ +.nav-link.active { + background: rgba(255, 255, 255, 0.15); + color: white; + font-weight: 600; +} + +.nav-link:hover { + background: rgba(255, 255, 255, 0.1); + color: white; + transform: translateX(5px); +} + +.nav-link i { + margin-right: 1rem; + font-size: 1.25rem; +} + +.search-container { + position: fixed; + top: 0; + right: 0; + padding: 1rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + z-index: 40; + display: flex; + align-items: center; + gap: 1rem; + transition: all 0.3s ease; + width: auto; +} + +.search-box { + flex: 1; + padding: 0.75rem 1rem; + border: 2px solid #E2E8F0; + border-radius: 12px; + outline: none; + font-size: 1rem; + transition: all 0.2s ease; +} + +.main-content { + margin-left: 280px; + width: calc(100% - 280px); + padding-top: 5rem; + transition: margin-left 0.3s ease; +} + +.container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); /* Back to original 380px for desktop */ + gap: 2rem; /* Back to original 2rem gap */ + padding: 2rem; + max-width: 1600px; + margin: 0 auto; + width: 100%; +} + +.topic-card { + border-radius: 20px; + padding: 2rem; + position: relative; + overflow: hidden; + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + transform: translateY(0); + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), + box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.topic-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 5px; + transform: scaleX(0); + transform-origin: left; +} + +.topic-card:hover { + transform: translateY(-5px); + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), + 0 10px 10px -5px rgba(0, 0, 0, 0.04); +} + +.topic-card:hover::before { + transform: scaleX(1); +} + +.topic-header { + display: flex; + align-items: center; + margin-bottom: 1.5rem; + position: relative; +} + +.topic-icon { + font-size: 2.5rem; + margin-right: 1rem; +} + + +.topic-title { + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 0.5rem; +} + +.topic-description { + font-size: 1rem; + line-height: 1.7; + margin-bottom: 1.5rem; +} + +.related-topics { + margin: 0; +} + +.download-section { + margin-top: auto; +} + +.progress-container { + margin-top: 1.5rem; +} + +.download-section h4 { + margin-bottom: 1rem; + font-size: 1rem; +} + +.download-links { + display: flex; + gap: 1rem; + flex-wrap: wrap; +} + +.download-btn { + padding: 0.75rem 1.25rem; + border-radius: 10px; + text-decoration: none; + font-size: 0.9rem; + transition: all 0.2s ease; + backdrop-filter: blur(5px); + flex: 1; + min-width: 120px; + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + transform: translateY(0); /* Set initial transform state */ + transition: all 0.2s ease; +} + +.download-btn:hover { + transform: translateY(-2px); +} + +@media (min-width: 1025px) { + .menu-toggle { + display: none; + } + + .sidebar { + transform: translateX(0); + } + + .search-container { + left: 280px; /* Sidebar width */ + width: calc(100% - 280px); + } + + .main-content { + margin-left: 280px; + width: calc(100% - 280px); + } +} + +@media (max-width: 1024px) { + .search-container { + width: 100%; + } + .menu-toggle { + display: flex !important; + } + + .sidebar { + transform: translateX(-100%); + } + + .sidebar.active { + transform: translateX(0); + } + + .main-content { + margin-left: 0; + width: 100%; + } + +} + +@media (max-width: 480px) { + .search-container { + padding: 0.75rem; + } + + .search-box { + font-size: 0.9rem; + padding: 0.5rem 0.75rem; + } + + .download-links { + flex-direction: column; + } + + .download-btn { + width: 100%; + } + + .container { + padding: 0.5rem; + } + + .topic-card { + margin: 0 0.5rem; + } +} + +.menu-toggle { + padding: 0.75rem; + border-radius: 10px; + cursor: pointer; + display: none; + align-items: center; + justify-content: center; + transition: all 0.3s ease; +} + +/* Add floating animation for icons */ +@keyframes float { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-10px); } +} + +.theme-toggle:hover { + transform: rotate(45deg); +} + +/* Update animation keyframes */ +@keyframes cardAppear { + 0% { + opacity: 0; + transform: translateY(20px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.download-section h4 { + margin-bottom: 1rem; + font-size: 1rem; +} + +.download-links { + display: flex; + gap: 1rem; + flex-wrap: wrap; +} + +.download-btn { + color: white; + padding: 0.75rem 1.25rem; + border-radius: 10px; + text-decoration: none; + font-size: 0.9rem; + transition: all 0.2s ease; + backdrop-filter: blur(5px); + flex: 1; + min-width: 120px; + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; +} + +.download-btn:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +/* Add these styles for the related-topics section */ +.related-topics { + padding: 1.25rem; + border-radius: 12px; + margin-bottom: 1.5rem; +} + +.related-topics h4 { + color: var(--primary-color); + margin-bottom: 1rem; + font-size: 1rem; +} + +.related-topics ul { + list-style: none; + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +.related-topics li { + padding: 0.5rem 1rem; + border-radius: 20px; + font-size: 0.9rem; + transition: all 0.2s ease; + cursor: pointer; +} + +.related-topics li:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +.related-topics a { + color: inherit; + text-decoration: none; +} + +/* Improved topic card hover */ +.topic-card { + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); +} + +.topic-card:hover { + transform: translateY(-5px) scale(1.01); + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); +} diff --git a/webseite/assets/css/topic.css b/webseite/assets/css/topic.css new file mode 100644 index 0000000..5437597 --- /dev/null +++ b/webseite/assets/css/topic.css @@ -0,0 +1,208 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; +} + +body { + min-height: 100vh; + display: flex; + overflow-x: hidden; +} + +/* Left Sidebar Styles */ +.sidebar { + width: 280px; + height: 100vh; + padding: 2rem; + position: fixed; + left: 0; + top: 0; + transition: transform 0.3s ease; + z-index: 50; +} + +.sidebar-header { + color: white; + margin-bottom: 2rem; + display: flex; + align-items: center; + gap: 1rem; +} + +.sidebar-header i { + font-size: 2rem; +} + +.nav-link { + display: flex; + align-items: center; + padding: 1rem; + color: rgba(255, 255, 255, 0.8); + text-decoration: none; + border-radius: 12px; + margin-bottom: 0.5rem; + transition: all 0.2s ease; +} + +.nav-link:hover { + background: rgba(255, 255, 255, 0.1); + color: white; + transform: translateX(5px); +} + +.nav-link i { + margin-right: 1rem; + font-size: 1.25rem; +} + +/* Main Content Styles */ +.main-content { + margin-left: 280px; + padding: 2rem; + flex: 1; +} + + +/* Content Card Styles */ +.content-card { + border-radius: 20px; + padding: 2rem; + margin-bottom: 2rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); +} + + +.content-title { + font-size: 2rem; + margin-bottom: 1rem; +} + +.content-text { + line-height: 1.7; + margin-bottom: 1.5rem; +} + +/* Add these styles for the related-topics section */ +.related-topics { + padding: 1.25rem; + border-radius: 12px; +} + +.related-topics h4 { + color: var(--primary-color); + margin-bottom: 1rem; + font-size: 1rem; +} + +.related-topics ul { + list-style: none; + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +.related-topics li { + padding: 0.5rem 1rem; + border-radius: 20px; + font-size: 0.9rem; + transition: all 0.2s ease; + cursor: pointer; +} + +.related-topics li:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +.related-topics a { + color: inherit; + text-decoration: none; +} + +/* Exercise Section Styles */ +.exercise-section { + padding: 1.5rem; + border-radius: 12px; + color: white; + margin-top: 2rem; + position: relative; + overflow: hidden; +} + +.exercise-section::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1)); + pointer-events: none; +} + +.download-btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + background: rgba(255, 255, 255, 0.1); + color: white; + padding: 0.75rem 1.25rem; + border-radius: 10px; + text-decoration: none; + margin: 0.5rem; + backdrop-filter: blur(5px); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.download-btn:hover { + background: rgba(255, 255, 255, 0.2); + transform: translateY(-3px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); +} + +@media (max-width: 768px) { + .sidebar { + transform: translateX(-100%); + } + + .sidebar.active { + transform: translateX(0); + } + + .main-content { + margin-left: 0; + } +} + +/* Active nav link style */ +.nav-link.active { + background: rgba(255, 255, 255, 0.15); + color: white; + font-weight: 600; +} + +/* List style improvement */ +.content-text li { + position: relative; + padding-left: 1.5rem; + margin-bottom: 0.5rem; +} + +.content-text li::before { + content: '•'; + position: absolute; + left: 0; + font-weight: bold; +} + +.menu-toggle { + padding: 0.75rem; + border-radius: 10px; + cursor: pointer; + align-items: center; + justify-content: center; + transition: all 0.3s ease; +} \ No newline at end of file diff --git a/webseite/assets/images/favicon.ico b/webseite/assets/images/favicon.ico new file mode 100644 index 0000000..b72daea Binary files /dev/null and b/webseite/assets/images/favicon.ico differ diff --git a/webseite/assets/images/hsgg-logo.png b/webseite/assets/images/hsgg-logo.png new file mode 100644 index 0000000..db5151d Binary files /dev/null and b/webseite/assets/images/hsgg-logo.png differ diff --git a/webseite/assets/images/hsgg-logo.svg b/webseite/assets/images/hsgg-logo.svg new file mode 100644 index 0000000..9803603 --- /dev/null +++ b/webseite/assets/images/hsgg-logo.svg @@ -0,0 +1,384 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/webseite/config/subjects/deutsch/properties.json b/webseite/config/subjects/deutsch/properties.json index 98b5b63..08c572e 100644 --- a/webseite/config/subjects/deutsch/properties.json +++ b/webseite/config/subjects/deutsch/properties.json @@ -1,7 +1,7 @@ { "displayName": "Deutsch", - "description": "Deutsch ist blau", - "color": "#FF0000", + "description": "Deutsch ist rot", + "color": "#ef4444", "buttonText": "Erfahre von einem ungeheuren Ungeziefer", "icon": "fa-book" } \ No newline at end of file diff --git a/webseite/config/subjects/mathe/properties.json b/webseite/config/subjects/mathe/properties.json index f755597..c1adc41 100644 --- a/webseite/config/subjects/mathe/properties.json +++ b/webseite/config/subjects/mathe/properties.json @@ -1,7 +1,7 @@ { "displayName": "Mathe", - "description": "Mathe ist gelb", - "color": "#60A5FA", + "description": "Mathe ist blau", + "color": "#3b82f6", "buttonText": "Jetzt rechnen!", "icon": "fa-square-root-alt" } \ No newline at end of file diff --git a/webseite/homepage.php b/webseite/homepage.php index 2390e93..3f9679b 100644 --- a/webseite/homepage.php +++ b/webseite/homepage.php @@ -4,113 +4,29 @@ - Modernes Lernportal + HSGG Lernportal + + -
-
-
+
+
@@ -119,12 +35,10 @@
-

- Entdecke deine Lernreise +

+ Willkommen beim
Horst-Schlämmer-Gedächtnis-Gymnasium

-

- Interaktives Lernen für die digitale Generation. Personalisierte Lernpfade, sofortiges Feedback und spielerische Elemente. -

@@ -133,92 +47,35 @@
'#' . $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); + } + ?> -
+
-
)"> - +
+

displayName); ?>

description); ?>

-
-
-
150+
+
+
+
topics)); ?>
+
Themen
+
+
+
Übungen
-
-
12
-
Kapitel
-
-
-
4.8
-
Bewertung
-
-
-
- Aktuelle Einheit: - - Bruchrechnung -
@@ -231,78 +88,15 @@
- - - diff --git a/webseite/impressum.php b/webseite/impressum.php index bb30aea..6f78e40 100644 --- a/webseite/impressum.php +++ b/webseite/impressum.php @@ -5,30 +5,29 @@ Impressum + - + +
+
+
+
+ -
+

Impressum

Angaben gemäß § 5 TMG:

diff --git a/webseite/subject.php b/webseite/subject.php index 47c8333..edc6cef 100644 --- a/webseite/subject.php +++ b/webseite/subject.php @@ -1,14 +1,14 @@ topics; @@ -19,590 +19,36 @@ $topics = $subjectData->topics; - <?php echo($subjectData->displayName); ?> 5. Klasse - Modern + <?php echo($subjectData->displayName); ?> 5. Klasse + + + - - -