Initial import
This commit is contained in:
8
.idea/.gitignore
generated
vendored
Normal file
8
.idea/.gitignore
generated
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
# Default ignored files
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# Editor-based HTTP Client requests
|
||||
/httpRequests/
|
||||
# Datasource local storage ignored files
|
||||
/dataSources/
|
||||
/dataSources.local.xml
|
||||
8
.idea/SWE.iml
generated
Normal file
8
.idea/SWE.iml
generated
Normal file
@@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="WEB_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$" />
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
8
.idea/modules.xml
generated
Normal file
8
.idea/modules.xml
generated
Normal file
@@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/SWE.iml" filepath="$PROJECT_DIR$/.idea/SWE.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
19
.idea/php.xml
generated
Normal file
19
.idea/php.xml
generated
Normal file
@@ -0,0 +1,19 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="MessDetectorOptionsConfiguration">
|
||||
<option name="transferred" value="true" />
|
||||
</component>
|
||||
<component name="PHPCSFixerOptionsConfiguration">
|
||||
<option name="transferred" value="true" />
|
||||
</component>
|
||||
<component name="PHPCodeSnifferOptionsConfiguration">
|
||||
<option name="highlightLevel" value="WARNING" />
|
||||
<option name="transferred" value="true" />
|
||||
</component>
|
||||
<component name="PhpStanOptionsConfiguration">
|
||||
<option name="transferred" value="true" />
|
||||
</component>
|
||||
<component name="PsalmOptionsConfiguration">
|
||||
<option name="transferred" value="true" />
|
||||
</component>
|
||||
</project>
|
||||
6
.idea/vcs.xml
generated
Normal file
6
.idea/vcs.xml
generated
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
||||
171
webseite/index.html
Normal file
171
webseite/index.html
Normal file
@@ -0,0 +1,171 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lernportal</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #f6f8ff 0%, #f1f5ff 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #2d3748;
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
animation: bounce 1s ease;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 2rem;
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.subject-card {
|
||||
background: white;
|
||||
border-radius: 24px;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 280px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.subject-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.subject-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 8px;
|
||||
background: var(--accent-color);
|
||||
}
|
||||
|
||||
.mathematik {
|
||||
--accent-color: #60A5FA;
|
||||
}
|
||||
|
||||
.englisch {
|
||||
--accent-color: #34D399;
|
||||
}
|
||||
|
||||
.deutsch {
|
||||
--accent-color: #F472B6;
|
||||
}
|
||||
|
||||
.physik {
|
||||
--accent-color: #A78BFA;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 3.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.subject-name {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #2d3748;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 1rem;
|
||||
color: #64748b;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.start-button {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
transition: opacity 0.2s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.start-button:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0% { transform: translateY(-20px); opacity: 0; }
|
||||
100% { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Wähle dein Lieblingsfach! 🚀</h1>
|
||||
<div class="container">
|
||||
<div class="subject-card mathematik">
|
||||
<div class="icon">🔢</div>
|
||||
<h2 class="subject-name">Mathematik</h2>
|
||||
<p class="description">Löse spannende Aufgaben und werde zum Mathe-Champion!</p>
|
||||
<a href="./mathe/mathe.html" class="start-button">Jetzt rechnen!</a>
|
||||
</div>
|
||||
|
||||
<div class="subject-card englisch">
|
||||
<div class="icon">📚</div>
|
||||
<h2 class="subject-name">Englisch</h2>
|
||||
<p class="description">Entdecke neue Wörter und verbessere dein Englisch!</p>
|
||||
<a href="#englisch" class="start-button">Los geht's!</a>
|
||||
</div>
|
||||
|
||||
<div class="subject-card deutsch">
|
||||
<div class="icon">✍️</div>
|
||||
<h2 class="subject-name">Deutsch</h2>
|
||||
<p class="description">Erkunde Geschichten und verbessere deine Sprache!</p>
|
||||
<a href="#deutsch" class="start-button">Start!</a>
|
||||
</div>
|
||||
|
||||
<div class="subject-card physik">
|
||||
<div class="icon">⚡</div>
|
||||
<h2 class="subject-name">Physik</h2>
|
||||
<p class="description">Entdecke die spannende Welt der Naturwissenschaften!</p>
|
||||
<a href="#physik" class="start-button">Experimentieren!</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
328
webseite/mathe/mathe.html
Normal file
328
webseite/mathe/mathe.html
Normal file
@@ -0,0 +1,328 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mathematik 5. Klasse</title>
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
/* Sidebar Styles */
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
height: 100vh;
|
||||
background: white;
|
||||
padding: 20px;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 250px;
|
||||
right: 0;
|
||||
padding: 20px;
|
||||
background: white;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
width: 100%;
|
||||
padding: 12px 20px;
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 25px;
|
||||
outline: none;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
background-color: #f0f0f0;
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.nav-link i {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
/* Main Content Styles */
|
||||
.main-content {
|
||||
margin-left: 250px;
|
||||
width: calc(100% - 250px);
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.topic-card {
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.topic-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.topic-icon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 15px;
|
||||
color: #4a90e2;
|
||||
}
|
||||
|
||||
.topic-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.topic-description {
|
||||
font-size: 0.9rem;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: #eee;
|
||||
border-radius: 4px;
|
||||
margin-top: 15px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 100%;
|
||||
background: #4a90e2;
|
||||
border-radius: 4px;
|
||||
width: 0%;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 900px) {
|
||||
.sidebar {
|
||||
transform: translateX(-250px);
|
||||
}
|
||||
|
||||
.sidebar.active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
z-index: 1001;
|
||||
background: white;
|
||||
border: none;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<button class="menu-toggle">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
|
||||
<nav class="sidebar">
|
||||
<h2 style="margin-bottom: 20px;">Navigation</h2>
|
||||
<a href="#" class="nav-link">
|
||||
<i class="fas fa-home"></i> Startseite
|
||||
</a>
|
||||
<a href="#" class="nav-link">
|
||||
<i class="fas fa-book"></i> Aufgaben
|
||||
</a>
|
||||
<a href="#" class="nav-link">
|
||||
<i class="fas fa-chart-line"></i> Fortschritt
|
||||
</a>
|
||||
<a href="#" class="nav-link">
|
||||
<i class="fas fa-question-circle"></i> Hilfe
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="search-container">
|
||||
<input type="text" class="search-box" placeholder="Themen durchsuchen...">
|
||||
</div>
|
||||
|
||||
<div class="main-content">
|
||||
<div class="container">
|
||||
<div class="topic-card">
|
||||
<i class="fas fa-calculator topic-icon"></i>
|
||||
<h3 class="topic-title">Grundrechenarten</h3>
|
||||
<p class="topic-description">Addition, Subtraktion, Multiplikation und Division mit natürlichen Zahlen</p>
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: 75%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="topic-card">
|
||||
<i class="fas fa-divide topic-icon"></i>
|
||||
<h3 class="topic-title">Bruchrechnung</h3>
|
||||
<p class="topic-description">Einführung in Brüche, Erweitern und Kürzen von Brüchen</p>
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: 45%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="topic-card">
|
||||
<i class="fas fa-ruler topic-icon"></i>
|
||||
<h3 class="topic-title">Geometrie</h3>
|
||||
<p class="topic-description">Grundformen, Flächen und Umfang von geometrischen Figuren</p>
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: 60%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="topic-card">
|
||||
<i class="fas fa-percentage topic-icon"></i>
|
||||
<h3 class="topic-title">Dezimalzahlen</h3>
|
||||
<p class="topic-description">Rechnen mit Dezimalzahlen und Stellenwertsystem</p>
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: 30%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="topic-card">
|
||||
<i class="fas fa-arrows-alt-h topic-icon"></i>
|
||||
<h3 class="topic-title">Längenmaße</h3>
|
||||
<p class="topic-description">Umrechnen von Längeneinheiten und praktische Anwendungen</p>
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: 55%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="topic-card">
|
||||
<i class="fas fa-balance-scale topic-icon"></i>
|
||||
<h3 class="topic-title">Gewichte</h3>
|
||||
<p class="topic-description">Gewichtseinheiten und deren Umrechnung</p>
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: 40%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="topic-card">
|
||||
<i class="fas fa-clock topic-icon"></i>
|
||||
<h3 class="topic-title">Zeitrechnung</h3>
|
||||
<p class="topic-description">Umgang mit Zeiteinheiten und Zeitspannen</p>
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: 85%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="topic-card">
|
||||
<i class="fas fa-square-root-alt topic-icon"></i>
|
||||
<h3 class="topic-title">Terme und Gleichungen</h3>
|
||||
<p class="topic-description">Erste Schritte mit mathematischen Ausdrücken</p>
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: 25%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const sidebar = document.querySelector('.sidebar');
|
||||
const menuToggle = document.querySelector('.menu-toggle');
|
||||
const searchContainer = document.querySelector('.search-container');
|
||||
let lastScroll = 0;
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
const currentScroll = window.pageYOffset;
|
||||
|
||||
if (currentScroll > lastScroll && currentScroll > 50) {
|
||||
searchContainer.style.transform = 'translateY(-100%)';
|
||||
} else {
|
||||
searchContainer.style.transform = 'translateY(0)';
|
||||
}
|
||||
lastScroll = currentScroll;
|
||||
});
|
||||
|
||||
menuToggle.addEventListener('click', () => {
|
||||
sidebar.classList.toggle('active');
|
||||
});
|
||||
|
||||
document.addEventListener('click', (e) => {
|
||||
if (window.innerWidth <= 900) {
|
||||
if (!sidebar.contains(e.target) && !menuToggle.contains(e.target)) {
|
||||
sidebar.classList.remove('active');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Animation for progress bars
|
||||
document.querySelectorAll('.topic-card').forEach(card => {
|
||||
card.addEventListener('mouseenter', () => {
|
||||
const progress = card.querySelector('.progress');
|
||||
const width = progress.style.width;
|
||||
progress.style.width = '0%';
|
||||
setTimeout(() => {
|
||||
progress.style.width = width;
|
||||
}, 50);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user