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

update styling of topic page

Browse Source
This commit is contained in:
Eric Blommel
2024-11-18 23:24:21 +01:00
parent 4d15af1803
commit 31af146046
4 changed files with 328 additions and 333 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
webseite/assets/css/subject.css
View File

@@ -7,7 +7,6 @@
}
body {
background-color: var(--bg-color);
min-height: 100vh;
display: flex;
overflow-x: hidden;
@@ -47,6 +46,13 @@ body {
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;
@@ -63,7 +69,6 @@ body {
top: 0;
right: 0;
padding: 1rem;
background: var(--card-bg);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
z-index: 40;
display: flex;
@@ -81,7 +86,6 @@ body {
outline: none;
font-size: 1rem;
transition: all 0.2s ease;
background: var(--bg-color);
}
.main-content {
@@ -102,7 +106,6 @@ body {
}
.topic-card {
background: var(--card-bg);
border-radius: 20px;
padding: 2rem;
position: relative;
@@ -284,7 +287,6 @@ body {
display: none;
align-items: center;
justify-content: center;
color: var(--text-primary);
transition: all 0.3s ease;
}
@@ -363,7 +365,6 @@ body {
}
.related-topics li {
background: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
@@ -390,10 +391,3 @@ body {
transform: translateY(-5px) scale(1.01);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
/* Active nav link style */
.nav-link.active {
background: rgba(255, 255, 255, 0.15);
color: white;
font-weight: 600;
}

208
webseite/assets/css/topic.css Normal file
View File

@@ -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;
}

13
webseite/subject.php
View File

@@ -38,7 +38,7 @@ $topics = $subjectData->topics;
<a href="homepage.php" class="nav-link">
<i class="fas fa-home"></i> Startseite
</a>
<a href="#" class="nav-link">
<a href="#" class="nav-link active">
<i class="fas fa-book"></i> <?php echo($subjectData->displayName); ?> Übersicht
</a>
</nav>
@@ -126,8 +126,6 @@ $topics = $subjectData->topics;
document.addEventListener('DOMContentLoaded', () => {
const menuToggle = document.querySelector('.menu-toggle');
const sidebar = document.querySelector('.sidebar');
const searchContainer = document.querySelector('.search-container');
const mainContent = document.querySelector('.main-content');
// Function to handle sidebar toggle
function toggleSidebar() {
@@ -194,14 +192,6 @@ $topics = $subjectData->topics;
}
}, 250);
});
// Handle escape key to close sidebar
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && sidebar.classList.contains('active')) {
sidebar.classList.remove('active');
removeOverlay();
}
});
});
// Add this right after your existing toggleSidebar function
@@ -215,7 +205,6 @@ $topics = $subjectData->topics;
}
// Add event listeners
window.addEventListener('load', updateMenuVisibility);
window.addEventListener('resize', updateMenuVisibility);
// Update search function with fallback animation

420
webseite/topic.php
View File

@@ -1,21 +1,21 @@
<!DOCTYPE html>
<?php
require_once ("classes/SubjectData.php");
require_once ("classes/TopicData.php");
require_once("classes/SubjectData.php");
require_once("classes/TopicData.php");
if(!isset($_GET["subject"])) {
if (!isset($_GET["subject"])) {
die("Ungültige Seite");
}
$subjectData = SubjectData::fromName($_GET["subject"]);
if(!isset($subjectData)) {
if (!isset($subjectData)) {
die("Ungültige Seite");
}
if(!isset($_GET["topic"])) {
if (!isset($_GET["topic"])) {
die("Ungültige Seite");
}
$topicData = TopicData::fromName($_GET["subject"], $_GET["topic"]);
if(!isset($topicData)) {
if (!isset($topicData)) {
die("Ungültige Seite");
}
@@ -27,292 +27,17 @@ if(!isset($topicData)) {
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo($topicData->displayName); ?> - <?php echo($subjectData->displayName); ?></title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link href="assets/css/topic.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
:root {
--primary: #7C3AED;
--primary-light: #9F67FF;
--primary-dark: #6D28D9;
--bg-color: #F4F7FE;
--card-bg: #ffffff;
--text-primary: #1E293B;
--text-secondary: #64748B;
--accent: #F59E0B;
}
body {
background-color: var(--bg-color);
min-height: 100vh;
display: flex;
overflow-x: hidden;
}
/* Left Sidebar Styles */
.sidebar {
width: 280px;
height: 100vh;
background: var(--primary);
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;
margin-right: 300px;
padding: 2rem;
flex: 1;
}
.search-container {
position: sticky;
top: 0;
background: var(--card-bg);
padding: 1rem;
border-radius: 12px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
margin-bottom: 2rem;
z-index: 40;
}
.search-box {
width: 100%;
padding: 0.75rem 1rem;
border: 2px solid #E2E8F0;
border-radius: 12px;
outline: none;
font-size: 1rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.search-box:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
}
/* Content Card Styles */
.content-card {
background: var(--card-bg);
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-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
.content-title {
font-size: 2rem;
color: var(--text-primary);
margin-bottom: 1rem;
}
.content-text {
color: var(--text-secondary);
line-height: 1.7;
margin-bottom: 1.5rem;
}
/* Right Sidebar Styles */
.right-sidebar {
width: 300px;
height: 100vh;
position: fixed;
right: 0;
top: 0;
padding: 2rem;
background: var(--card-bg);
border-left: 1px solid rgba(0, 0, 0, 0.1);
}
.related-topics {
background: rgba(124, 58, 237, 0.05);
padding: 1.25rem;
border-radius: 12px;
margin-bottom: 1.5rem;
}
.related-topics h3 {
color: var(--primary);
margin-bottom: 1rem;
}
.topic-tag {
display: inline-block;
padding: 0.5rem 1rem;
background: white;
border-radius: 20px;
margin: 0.25rem;
font-size: 0.9rem;
color: var(--text-secondary);
border: 1px solid rgba(124, 58, 237, 0.2);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
.topic-tag:hover {
background: var(--primary);
color: white;
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}
/* Exercise Section Styles */
.exercise-section {
background: linear-gradient(135deg, var(--primary-light), var(--primary));
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);
}
/* Responsive Design */
@media (max-width: 1200px) {
.right-sidebar {
display: none;
}
.main-content {
margin-right: 0;
}
}
@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: '•';
color: var(--primary);
position: absolute;
left: 0;
font-weight: bold;
}
/* Add this CSS to your existing styles */
mark {
background-color: rgba(124, 58, 237, 0.2);
color: inherit;
padding: 0 2px;
border-radius: 2px;
transition: background-color 0.3s ease;
}
mark:hover {
background-color: rgba(124, 58, 237, 0.4);
}
</style>
</head>
<body>
<button class="menu-toggle fixed top-4 left-4 z-50 bg-white h-12 w-12 border-2 p-1 hover:border-[<?php echo($subjectData->color); ?>]">
<i class="fas fa-bars"></i>
</button>
<!-- Left Sidebar -->
<nav class="sidebar">
<nav class="sidebar bg-[<?php echo($subjectData->color); ?>]">
<div class="sidebar-header">
<i class="fas fa-graduation-cap"></i>
<h2><?php echo($subjectData->displayName); ?></h2>
@@ -329,10 +54,7 @@ if(!isset($topicData)) {
</nav>
<!-- Main Content -->
<main class="main-content">
<div class="search-container">
<input type="text" class="search-box" id="searchInput" placeholder="Suche nach Themen, Übungen oder Hilfe..." oninput="handleContentSearch()">
</div>
<main class="main-content max-w-7xl">
<div class="content-card">
<h1 class="content-title"><?php echo($topicData->displayName); ?></h1>
@@ -343,14 +65,15 @@ if(!isset($topicData)) {
<?php echo($topicData->article); ?>
</p>
<div class="exercise-section">
<div class="exercise-section bg-[<?php echo($subjectData->color); ?>]">
<h3 style="margin-bottom: 1rem;">Übungen herunterladen:</h3>
<div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
<?php
foreach ($topicData->files as $fileName) {
?>
<a href='<?php echo("config/subjects/$subjectData->id/topics/$topicData->id/$fileName")?>' target="_blank" download class="download-btn">
<a href='<?php echo("config/subjects/$subjectData->id/topics/$topicData->id/$fileName") ?>'
target="_blank" download class="download-btn">
<i class="fas fa-file-pdf"></i>
<?php echo($fileName); ?>
</a>
@@ -361,32 +84,113 @@ if(!isset($topicData)) {
</div>
</div>
</div>
</main>
<!-- Right Sidebar -->
<aside class="right-sidebar">
<div class="related-topics">
<h3>Verwandte Themen</h3>
<div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
<div class="related-topics bg-gray-100 p-4 rounded-lg">
<h4>Verwandte Themen:</h4>
<ul class="flex flex-wrap gap-2">
<?php
foreach ($topicData->relatedTopics as $relatedTopicName) {
$relatedTopic = $subjectData->topics[$relatedTopicName];
if(!isset($relatedTopic)) {
if (!isset($relatedTopic)) {
continue;
}
?>
<a href='<?php echo("topic.php?subject=$subjectData->id&topic=$relatedTopic->id") ?>'>
<span class="topic-tag"><?php echo($relatedTopic->displayName); ?></span>
</a>
<li onclick="event.stopPropagation();" class="border-[<?php echo($subjectData->color); ?>] border-2">
<a href='<?php echo("topic.php?subject=$subjectData->id&topic=$relatedTopic->id") ?>' class="block">
<?php echo($relatedTopic->displayName); ?>
</a>
</li>
<?php
}
?>
</div>
</ul>
</div>
</aside>
</main>
<script>
document.addEventListener('DOMContentLoaded', () => {
const menuToggle = document.querySelector('.menu-toggle');
const sidebar = document.querySelector('.sidebar');
// Function to handle sidebar toggle
function toggleSidebar() {
sidebar.classList.toggle('active');
// Add overlay when sidebar is active on mobile/tablet
if (window.innerWidth <= 1024) {
if (sidebar.classList.contains('active')) {
addOverlay();
} else {
removeOverlay();
}
}
}
// Function to add overlay
function addOverlay() {
const overlay = document.createElement('div');
overlay.className = 'sidebar-overlay';
overlay.style.cssText = `
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 45;
transition: opacity 0.3s ease;
`;
document.body.appendChild(overlay);
// Close sidebar when clicking overlay
overlay.addEventListener('click', () => {
sidebar.classList.remove('active');
removeOverlay();
});
// Fade in
requestAnimationFrame(() => {
overlay.style.opacity = '1';
});
}
// Function to remove overlay
function removeOverlay() {
const overlay = document.querySelector('.sidebar-overlay');
if (overlay) {
overlay.style.opacity = '0';
setTimeout(() => overlay.remove(), 300);
}
}
// Add click event to menu toggle
menuToggle.addEventListener('click', toggleSidebar);
// Handle window resize
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
if (window.innerWidth > 1024) {
sidebar.classList.remove('active');
removeOverlay();
}
}, 250);
});
});
// Add this right after your existing toggleSidebar function
function updateMenuVisibility() {
const menuToggle = document.querySelector('.menu-toggle');
if (window.innerWidth <= 768) { // Smartphone breakpoint
menuToggle.style.display = 'flex';
} else {
menuToggle.style.display = 'none';
}
}
// Add event listeners
window.addEventListener('resize', updateMenuVisibility);
</script>
</body>
</html>