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

Merge branch 'dev' into 'main'

Browse Source 
dev -> prod

See merge request eb2342s/swe-b1-a!14
This commit was merged in pull request #74.
This commit is contained in:
Eric Blommel
2024-11-20 13:59:37 +01:00
parent 9b50bc3347 dbc166ea0a
commit 193f7a56b0
91 changed files with 2795 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.idea/.gitignore generated vendored Normal file
View 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
View 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
View 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>

20
.idea/php.xml generated Normal file
View File

@@ -0,0 +1,20 @@
<?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="PhpProjectSharedConfiguration" php_language_level="8.0" />
<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
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>

154
README.md
View File

@@ -1,93 +1,127 @@
# SWE-B1-A
# Projektbeschreibung
Dieses Projekt ist eine PHP-Webseite, die Schülerinnen und Schülern ermöglicht, Hausaufgaben und Übungsblätter herunterzuladen. Die Webseite ist unabhängig von einem bestimmten Webserver und kann mit jedem Server konfiguriert werden, der PHP unterstützt.
## Anforderungen
## Getting started
Um die Webseite auszuführen, benötigen Sie:
To make it easy for you to get started with GitLab, here's a list of recommended next steps.
- **Webserver**: Jeder Webserver, der PHP unterstützt (z. B. Apache, Nginx, IIS).
- **PHP**: Version 7.4 oder höher.
- **Dateisystem**: Schreibzugriff auf das Verzeichnis, in dem die Webseite gehostet wird.
Already a pro? Just edit this README.md and make it your own. Want to make it easy? [Use the template at the bottom](#editing-this-readme)!
## Einrichtung
## Add your files
### 1. Projektdateien bereitstellen
- Extrahieren Sie die Projektdateien aus dem Ordner `webseite` aus dem bereitgestellten Archiv.
- Platzieren Sie die Dateien in einem Verzeichnis, das der Webserver bedienen kann.
- [ ] [Create](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files
- [ ] [Add files using the command line](https://docs.gitlab.com/ee/gitlab-basics/add-file.html#add-a-file-using-the-command-line) or push an existing Git repository with the following command:
### 2. PHP aktivieren
```
cd existing_repo
git remote add origin https://git.fh-aachen.de/eb2342s/swe-b1-a.git
git branch -M main
git push -uf origin main
```
#### a) Apache
- Stellen Sie sicher, dass das Modul `mod_php` aktiviert ist.
- Überprüfen Sie die Apache-Konfigurationsdatei (z. B. `httpd.conf`), und stellen Sie sicher, dass PHP korrekt eingebunden ist:
## Integrate with your tools
```apache
LoadModule php_module modules/libphp.so
AddType application/x-httpd-php .php
```
- [ ] [Set up project integrations](https://git.fh-aachen.de/eb2342s/swe-b1-a/-/settings/integrations)
#### b) Nginx
- Stellen Sie sicher, dass PHP-FPM installiert und aktiviert ist.
- Fügen Sie in der Nginx-Konfigurationsdatei (`nginx.conf`) einen Block für PHP-Dateien hinzu:
## Collaborate with your team
```nginx
location ~ \.php$ {
include fastcgi_params;
fastcgi_pass 127.0.0.1:9000;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
}
```
- [ ] [Invite team members and collaborators](https://docs.gitlab.com/ee/user/project/members/)
- [ ] [Create a new merge request](https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html)
- [ ] [Automatically close issues from merge requests](https://docs.gitlab.com/ee/user/project/issues/managing_issues.html#closing-issues-automatically)
- [ ] [Enable merge request approvals](https://docs.gitlab.com/ee/user/project/merge_requests/approvals/)
- [ ] [Set auto-merge](https://docs.gitlab.com/ee/user/project/merge_requests/merge_when_pipeline_succeeds.html)
#### c) IIS (Windows)
- Installieren Sie PHP mit dem Microsoft Web Platform Installer.
- Stellen Sie sicher, dass die Handlerzuordnung für `.php`-Dateien auf den PHP-Interpreter verweist.
## Test and Deploy
### 3. Webseite konfigurieren
Use the built-in continuous integration in GitLab.
#### Projektdateien ins Webserver-Verzeichnis kopieren:
- Platzieren Sie den gesamten Inhalt des Ordners `webseite` mit dem Quellcode der Webseite in das Hauptverzeichnis Ihres Webservers:
- **Apache**: Kopieren Sie die Dateien in das `htdocs`-Verzeichnis (z. B. `C:\xampp\htdocs\mein-projekt`).
- **Nginx**: Platzieren Sie die Dateien im Root-Verzeichnis, das in Ihrer Konfiguration definiert ist (z. B. `/usr/share/nginx/html`).
- **IIS**: Legen Sie die Dateien in das Verzeichnis der zugehörigen IIS-Site (z. B. `C:\inetpub\wwwroot`).
- [ ] [Get started with GitLab CI/CD](https://docs.gitlab.com/ee/ci/quick_start/index.html)
- [ ] [Analyze your code for known vulnerabilities with Static Application Security Testing (SAST)](https://docs.gitlab.com/ee/user/application_security/sast/)
- [ ] [Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy](https://docs.gitlab.com/ee/topics/autodevops/requirements.html)
- [ ] [Use pull-based deployments for improved Kubernetes management](https://docs.gitlab.com/ee/user/clusters/agent/)
- [ ] [Set up protected environments](https://docs.gitlab.com/ee/ci/environments/protected_environments.html)
#### Caching aktivieren (empfohlen):
***
- **Apache**: Aktivieren Sie das Modul `mod_expires` und fügen Sie folgende Regeln zur `.htaccess`-Datei im Projektordner hinzu:
# Editing this README
```apache
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html "access plus 1 hour"
ExpiresByType image/gif "access plus 1 week"
ExpiresByType image/jpeg "access plus 1 week"
ExpiresByType image/png "access plus 1 week"
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType application/javascript "access plus 1 week"
</IfModule>
```
When you're ready to make this README your own, just edit this file and use the handy template below (or feel free to structure it however you want - this is just a starting point!). Thanks to [makeareadme.com](https://www.makeareadme.com/) for this template.
- **Nginx**: Fügen Sie der Nginx-Konfigurationsdatei folgendes hinzu:
## Suggestions for a good README
```nginx
location ~* \.(jpg|jpeg|png|gif|css|js|ico|html)$ {
expires 7d;
add_header Cache-Control "public, max-age=604800";
}
```
Every project is different, so consider which of these sections apply to yours. The sections used in the template are suggestions for most open source projects. Also keep in mind that while a README can be too long and detailed, too long is better than too short. If you think your README is too long, consider utilizing another form of documentation rather than cutting out information.
### 4. Berechtigungen setzen
## Name
Choose a self-explaining name for your project.
- Stellen Sie sicher, dass der Webserver die erforderlichen Berechtigungen für das Verzeichnis hat, in dem die Webseite liegt:
## Description
Let people know what your project can do specifically. Provide context and add a link to any reference visitors might be unfamiliar with. A list of Features or a Background subsection can also be added here. If there are alternatives to your project, this is a good place to list differentiating factors.
**Linux**:
```bash
chmod -R 755 /pfad/zum/webverzeichnis
chown -R www-data:www-data /pfad/zum/webverzeichnis
```
## Badges
On some READMEs, you may see small images that convey metadata, such as whether or not all the tests are passing for the project. You can use Shields to add some to your README. Many services also have instructions for adding a badge.
**Windows**:
- Überprüfen Sie die Sicherheitseinstellungen des Ordners und geben Sie dem Benutzerkonto des Webservers (z. B. `IUSR`) Lese- und Ausführungsrechte.
## Visuals
Depending on what you are making, it can be a good idea to include screenshots or even a video (you'll frequently see GIFs rather than actual videos). Tools like ttygif can help, but check out Asciinema for a more sophisticated method.
### 5. Webseite aufrufen
## Installation
Within a particular ecosystem, there may be a common way of installing things, such as using Yarn, NuGet, or Homebrew. However, consider the possibility that whoever is reading your README is a novice and would like more guidance. Listing specific steps helps remove ambiguity and gets people to using your project as quickly as possible. If it only runs in a specific context like a particular programming language version or operating system or has dependencies that have to be installed manually, also add a Requirements subsection.
- **Domain oder IP-Adresse öffnen**:
- Rufen Sie die Webseite mit dem zugewiesenen Domainnamen oder der IP-Adresse auf. Beispiel:
- `http://localhost`
- `http://ihre-domain.de`
## Usage
Use examples liberally, and show the expected output if you can. It's helpful to have inline the smallest example of usage that you can demonstrate, while providing links to more sophisticated examples if they are too long to reasonably include in the README.
- **Indexseite testen**:
- Die Startseite der Webseite sollte automatisch geladen werden (z. B. `index.php`).
## Support
Tell people where they can go to for help. It can be any combination of an issue tracker, a chat room, an email address, etc.
## Fehlerbehebung
## Roadmap
If you have ideas for releases in the future, it is a good idea to list them in the README.
- **500 Internal Server Error**:
- Überprüfen Sie die PHP-Fehlerprotokolle, um die genaue Ursache zu finden.
- **404 Not Found**:
- Stellen Sie sicher, dass die Dateien im richtigen Verzeichnis liegen und die Datei `index.php` vorhanden ist.
- **PHP-Funktionalität überprüfen**:
- Erstellen Sie eine Datei namens `info.php` mit folgendem Inhalt:
## Contributing
State if you are open to contributions and what your requirements are for accepting them.
```php
<?php
phpinfo();
?>
```
- Rufen Sie die Datei im Browser auf, um zu überprüfen, ob PHP korrekt funktioniert.
For people who want to make changes to your project, it's helpful to have some documentation on how to get started. Perhaps there is a script that they should run or some environment variables that they need to set. Make these steps explicit. These instructions could also be useful to your future self.
## Zusätzliche Hinweise
You can also document commands to lint the code or run tests. These steps help to ensure high code quality and reduce the likelihood that the changes inadvertently break something. Having instructions for running tests is especially helpful if it requires external setup, such as starting a Selenium server for testing in a browser.
- Diese Anleitung ist bewusst allgemein gehalten, um mit verschiedenen Serverumgebungen kompatibel zu sein.
- Für die Bereitstellung in einer Produktionsumgebung sollten zusätzliche Sicherheitsmaßnahmen getroffen werden (z. B. HTTPS, Rechteverwaltung, Zugriffsbeschränkungen).
- Wir empfehlen, relativ aggressives Caching zu aktivieren, um unnötige Last durch ausgeführtes PHP zu verhindern.
## Authors and acknowledgment
Show your appreciation to those who have contributed to the project.
## Kontakt
## License
For open source projects, say how it is licensed.
## Project status
If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers.
Falls Sie Fragen oder Probleme haben, wenden Sie sich bitte an das Entwicklerteam.

97
webseite/assets/css/styles.css Normal file
View File

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

389
webseite/assets/css/subject.css Normal file
View File

@@ -0,0 +1,389 @@
/* Subject page styles */
/* 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 */
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
body {
min-height: 100vh;
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: 1.5rem;
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 2px 4px 6px 2px 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;
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;
}
.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 */
}
.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 {
color: var(--primary-color);
margin-bottom: 1rem;
font-size: 1rem;
}
.download-links {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.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);
}

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

@@ -0,0 +1,220 @@
/* 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 */
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
body {
min-height: 100vh;
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;
width: calc(100% - 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);*/
box-shadow: 2px 4px 6px 2px 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: 1024px) {
.sidebar {
transform: translateX(-100%);
}
.sidebar.active {
transform: translateX(0);
}
.main-content {
margin-left: 0;
width: 100%;
padding: 1rem;
}
}
/* 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;
}

BIN
webseite/assets/images/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
webseite/assets/images/hsgg-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

384
webseite/assets/images/hsgg-logo.svg Normal file
View File

@@ -0,0 +1,384 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 850 850" style="enable-background:new 0 0 850 850;" xml:space="preserve">
<style type="text/css">
.st0{fill:#5467A3;}
.st1{fill:#323966;}
.st2{fill:#FDFDFE;}
</style>
<g id="Ji6Evg.tif">
<g>
<path class="st0" d="M114.62,469.92c-4.94-13-9.84-25.56-14.47-38.21c-1.98-5.41-3.62-10.96-5.04-16.54
c-4-15.8-13.67-27.17-27.23-35.58c-5.26-3.27-10.74-6.15-16.41-8.64c-1.37-0.6-2.67-1.67-4.58-1.02c0.04,2.19,1.78,3.32,3.08,4.62
c9.53,9.6,18.74,19.47,26.29,30.74c1.66,2.48,5.17,5.56,3.35,8.03c-1.91,2.59-5.59-0.43-8.4-1.19
c-13.67-3.69-25.9-10.3-36.31-19.83c-8.85-8.1-15.19-18.06-18.64-29.67c-3.07-10.34-4.16-20.94-3.7-31.7
c0.07-1.68,0.36-3.36,0.67-5.01c0.57-3.01,2.41-2.66,3.77-0.9c6.55,8.49,16.18,11.89,25.5,15.8c6.75,2.83,13.77,5.18,19.87,9.24
c6.81,4.54,13.6,9.32,18.6,15.94c2.29,3.04,4.02,6.53,6.61,9.41c0.56,0.62,0.93,1.65,1.85,1.43c1.34-0.32,0.91-1.63,0.79-2.49
c-1.44-10.15-3.39-20.25-4.31-30.44c-0.91-10.22-5.52-18.9-11.49-26.39c-4.53-5.69-9.42-12.3-18.37-14.07
c2.5,5.55,6.23,9.53,9.01,14.09c3.47,5.67,6.32,11.63,9.22,17.57c0.43,0.89,1.02,1.88,0.3,2.76c-0.83,1.02-2.09,0.78-3.14,0.36
c-23.52-9.51-42.91-23.45-49.51-49.57c-3.12-12.36-1.42-24.88,3.03-36.88c1.03-2.77,2.23-5.48,3.56-8.12
c1.28-2.54,3.27-2.59,4.24-0.01c7.3,19.36,23.16,30.6,39.14,41.77c6.47,4.53,12.39,9.69,17.35,15.91
c0.83,1.05,1.68,2.55,3.32,2.22c1.96-0.4,1.84-2.3,2.07-3.77c2.58-16.35,3.31-32.52-5.36-47.58c-3.53-6.14-8.08-11.49-13.3-16.26
c-0.78-0.71-1.62-1.97-2.83-1.02c-0.96,0.76-0.15,1.88,0.19,2.73c3.32,8.38,6.45,16.82,8.74,25.54c0.96,3.67,1.87,7.36,2.79,11.05
c0.28,1.14,0.39,2.31-0.79,3.01c-1,0.59-1.9,0.09-2.67-0.61c-11.67-10.7-22.81-21.86-28.76-36.97c-5.9-15-4.62-29.71,2.31-44.14
c3-6.24,6.36-12.23,10.41-17.84c0.66-0.91,1.43-1.94,2.69-1.75c1.23,0.18,1.27,1.4,1.34,2.36c1.42,18.5,12.32,32.19,23.24,45.87
c5.2,6.52,9.75,13.42,12.7,21.3c0.52,1.38,0.91,3.54,2.58,3.5c1.94-0.04,2.16-2.31,2.66-3.85c5.15-15.82,8.29-31.84,4.79-48.53
c-1.52-7.23-3.89-14.09-8.4-20.04c-0.72-0.95-1.64-2.45-2.98-1.82c-1.45,0.68-0.52,2.23-0.31,3.41
c1.55,8.44,3.21,16.86,3.62,25.45c0.06,1.33,0.61,3.01-1,3.8c-1.52,0.74-2.63-0.42-3.73-1.29c-18.24-14.44-25.1-35.82-14.78-57.85
c3.93-8.38,9.28-15.71,15.63-22.37c0.77-0.8,1.58-1.81,2.84-1.47c1.18,0.31,1.17,1.47,1.16,2.46
c-0.18,13.26,5.59,24.48,12.16,35.42c5.9,9.82,11.16,19.88,12.29,31.56c0.12,1.24,0.37,2.82,1.85,2.97
c1.3,0.13,1.61-1.43,2.06-2.39c6-12.74,12.25-25.47,14.55-39.48c1.65-10.02,1.98-20.25-3.21-29.7c-0.68-1.24-1.36-3.11-2.77-2.77
c-1.69,0.41-0.87,2.44-0.8,3.69c0.38,7.2-0.39,14.35-0.85,21.51c-0.09,1.4-0.12,3.02-1.64,3.62c-1.85,0.74-2.41-1.16-3.17-2.15
c-12.39-16.18-13.01-36.26-2-53.18c2.54-3.89,5.33-7.61,8.85-10.71c0.84-0.74,1.64-1.75,2.89-1.39c1.42,0.41,1.09,1.79,1.2,2.86
c0.88,8.68,3.49,16.8,8.07,24.22c3.26,5.28,6.17,10.74,8.86,16.32c0.5,1.04,0.72,2.81,2.33,2.61c1.56-0.2,1.98-1.73,2.36-3.15
c2.66-9.92,7.09-18.94,14.19-26.42c10.08-10.62,23.28-14.17,37.22-15.81c6.15-0.72,12.34-0.9,18.54-0.85
c2.54,0.02,4.36,0.76,3.28,3.75c-5.87,16.33-13.27,31.66-27.35,42.79c-7.73,6.11-16.56,9.38-26.12,11.01
c-1.12,0.19-2.36,0.41-3.12-0.65c-0.93-1.27-0.06-2.44,0.62-3.48c5.07-7.78,10.61-15.22,16.44-22.44c0.96-1.18,2.1-2.27,2.22-4.29
c-2.7,0.02-4.54,1.49-6.35,2.94c-20.83,16.6-34.11,38.23-42.06,63.39c-0.39,1.25-1.56,2.88-0.06,3.75
c1.02,0.59,2.24-0.77,3.16-1.63c15.47-14.37,34.34-18.95,54.77-19.16c3.23-0.03,4.42,1.42,3.68,4.47
c-5.04,20.69-15.05,37.74-34.9,47.57c-7.54,3.74-15.57,4.33-23.78,3.83c-1.42-0.09-2.94-0.47-3.56-1.9
c-0.81-1.88,0.59-3.21,1.68-4.43c5.91-6.61,12.54-12.43,19.55-17.85c1.66-1.28,3.28-2.6,4.89-3.94c0.74-0.61,1.8-1.28,1.29-2.38
c-0.62-1.34-2.02-0.85-3-0.58c-5.42,1.47-10.5,3.71-15.36,6.6c-19.96,11.89-32.48,29.8-41.44,50.68
c-7.67,17.89-11.75,36.6-13.21,55.95c-0.08,1.06-0.01,2.14-0.01,3.4c3.17-1.37,3.29-4.44,4.58-6.63
c6.93-11.83,16.89-20.66,27.47-29.02c14.12-11.16,30.27-17.5,47.73-20.92c4.26-0.83,5.29,0.24,4.92,4.59
c-1.1,12.92-2.97,25.72-7.09,38.05c-5,14.95-12.13,28.82-23.04,40.36c-9.65,10.2-21.11,17.66-35.15,20.48
c-3.38,0.68-4.35-0.8-3.43-5.34c1.98-9.75,5.65-18.85,10.7-27.41c5.81-9.84,12.84-18.79,19.95-27.68
c0.86-1.08,2.76-2.36,1.34-3.82c-1.11-1.14-2.54,0.3-3.71,1.05c-16.43,10.53-31.27,22.66-39.5,41.03
c-5.04,11.24-7.75,23.17-9.26,35.35c-1.78,14.35-1.51,28.66,1.72,42.81c2.76,12.09,6.95,23.68,13.02,34.52
c0.59,1.05,1.01,3.11,2.81,2.57c1.48-0.45,0.88-2.19,0.93-3.38c1.52-39.22,20.77-66.72,55.42-84.06c0.25-0.13,0.5-0.27,0.77-0.34
c1.96-0.52,4.05-2.67,5.85-1.06c1.82,1.63-0.04,3.94-0.44,5.93c-1.93,9.58-2.07,19.19-1.14,28.92
c1.38,14.41,5.06,28.56,4.71,43.15c-0.33,13.96-5.55,25.43-17.32,33.42c-4.45,3.02-9.38,5.13-14.57,6.57
c-2.86,0.79-4.41,0.02-4.85-3.28c-1.93-14.49,0.32-28.61,3.48-42.66c1.67-7.41,3.92-14.67,6.44-21.85
c0.41-1.16,0.86-2.38-0.28-3.75c-3.23,1.95-5.33,4.95-7.23,7.97c-9.88,15.67-16.57,32.41-18.17,51.15
c-0.89,10.38-0.4,20.46,1.96,30.56c1.14,4.87,3.14,9.37,5.65,13.57c14.93,24.97,33.64,46.78,55.68,65.74
c1.12,0.96,2.15,2.24,4.46,1.84c-2.02-4.58-4-8.98-5.92-13.41c-5.67-13.11-7.96-26.83-8.05-41.11
c-0.14-22.7,6.49-43.19,18.98-61.94c0.86-1.3,1.4-3.44,3.57-3.08c2.14,0.35,1.41,2.47,1.82,3.83
c3.62,11.87,10.01,22.27,16.93,32.41c6.73,9.87,14.52,19.05,19.73,29.9c5.18,10.76,6.97,22.11,5.66,34.05
c-1.22,11.12-4.94,21.3-10.38,30.96c-1.95,3.47-3.02,3.64-5.37,0.5c-6.47-8.65-10.84-18.36-14.58-28.45
c-4.71-12.74-7.17-26-9.83-39.23c-0.27-1.35-0.71-2.67-1.27-4.78c-2.6,11.36-2.28,21.96-1.59,32.66
c0.72,11.25,3.32,21.96,7.6,32.28c6.97,16.82,18.4,30.14,32.9,40.93c17.31,12.87,37.01,20.65,57.38,27.02
c1.17,0.37,2.63,1.24,3.48-0.05c0.98-1.48-0.49-2.69-1.38-3.63c-4.07-4.31-7.53-9.03-10.77-14.02
c-12.88-19.87-16.72-41.69-15.01-64.93c0.87-11.84,2.97-23.41,6.09-34.83c0.36-1.32,0.18-3.03,1.93-3.43
c1.98-0.46,2.12,1.49,2.81,2.57c9.1,14.36,21.57,25.5,34.53,36.18c9.44,7.78,19.1,15.36,25.53,26.09
c10.16,16.95,6.92,32.33-4.4,46.84c-1.97,2.53-3.55,1.19-5.15-0.52c-6.67-7.11-12.22-15.06-17.35-23.31
c-6.17-9.92-11.84-20.11-16.83-30.69c-0.55-1.16-0.92-3.56-2.9-2.84c-1.5,0.54-0.67,2.51-0.61,3.84
c0.73,15.2,3.95,29.92,10.56,43.56c4.58,9.44,10.93,17.81,19.16,24.79c15.08,12.78,33.14,18.05,51.85,21.96
c9.09,1.9,18.17,3.76,27.08,6.43c2.77,0.83,5.55,0.85,8.32,0.02c11.33-3.41,22.95-5.55,34.49-8.05
c18.89-4.1,36.32-11.4,50.08-25.35c5.16-5.23,9.9-11.48,12.9-18.13c5.54-12.26,10.46-24.97,10.63-38.8
c0.04-3.63,1.48-7.17,0.67-11.01c-2.17,0.02-2.39,1.85-3.01,3.07c-6.45,12.68-13.12,25.23-21.1,37.03
c-4.18,6.18-8.64,12.14-13.7,17.64c-2,2.18-3.5,2.24-5.45-0.12c-13.4-16.2-12.81-37.22,0.83-53.25
c9.86-11.59,22.48-19.96,33.41-30.28c8.23-7.77,15.89-15.92,22.01-25.46c0.65-1.01,0.93-2.58,2.62-2.27
c1.62,0.3,1.46,1.82,1.8,3.01c4.7,16.48,7.23,33.25,6.59,50.42c-0.88,23.79-8.95,44.73-24.91,62.53c-1.23,1.37-3.69,2.98-2.58,4.8
c1.26,2.08,3.6,0.12,5.31-0.43c21.42-6.86,42.05-15.38,59.72-29.74c20.99-17.07,32.9-39.08,36.01-66.02
c0.94-8.17,0.65-16.3,0.76-24.46c0.05-3.29-0.78-6.39-2.63-9.59c-1.06,5.07-2.14,10.14-3.18,15.22
c-4,19.42-10.29,37.96-21.26,54.66c-2.95,4.49-4.31,4.41-6.77-0.47c-6.85-13.6-10.49-27.8-10.01-43.28
c0.38-12.45,5.25-22.86,11.75-32.78c5.86-8.94,12.85-17.19,18.26-26.38c5.03-8.54,11.99-16.4,12.4-27.14
c0.05-1.41,0.99-2.61,2.23-2.67c1.47-0.07,2.31,1.44,3.1,2.56c5.23,7.5,8.99,15.76,12.13,24.28c11.31,30.65,9.76,60.62-5.12,89.8
c-0.62,1.21-1.61,2.34-1.32,4.19c1.84,0.23,3-1,4.2-2.04c21.31-18.47,39.66-39.5,54.25-63.68c8.06-13.35,10.27-27.97,9.1-43.42
c-1.49-19.58-7.95-37.31-18.47-53.69c-1.86-2.89-3.8-5.81-7.54-7.72c0.47,5.15,2.41,9.35,3.76,13.67
c5.39,17.38,7.99,35.09,6.83,53.3c-0.3,4.69-1.14,5.36-5.75,4.27c-18.82-4.45-31.13-19.94-31.57-39.34
c-0.29-12.76,2.45-25.17,4-37.71c1.56-12.65,2.28-25.23-1.11-37.71c-0.37-1.35-0.91-2.94,0.28-3.99c1.13-1.01,2.37,0.14,3.49,0.61
c28.81,12.17,47.4,33.52,56.17,63.38c1.93,6.56,2.64,13.51,2.88,20.43c0.05,1.48-0.37,3.1,0.79,4.44
c1.59,0.15,1.76-1.24,2.22-2.11c10.68-20.28,17.21-41.73,15.88-64.81c-1.18-20.63-4.72-40.82-16.53-58.6
c-8.47-12.74-20.42-21.54-32.96-29.71c-0.74-0.48-1.7-1.48-2.62-0.56c-1.06,1.06-0.11,2.05,0.55,2.95
c5.25,7.12,10.84,13.99,15.77,21.37c6.4,9.58,11.31,19.77,14.06,30.97c0.07,0.27,0.18,0.54,0.24,0.81c1.6,7.3,0.43,8.57-6.62,6.67
c-13.76-3.7-24.77-11.61-34.05-22.26c-14.82-17.02-21.81-37.5-26.19-59.09c-1.14-5.63-1.47-11.44-1.91-17.18
c-0.38-5.01,0.64-5.69,5.54-4.71c20.53,4.1,38.79,12.91,55.03,26.12c8.21,6.67,14.49,14.84,20.06,23.69
c0.71,1.13,0.83,3.58,2.97,2.75c1.54-0.6,0.89-2.55,0.72-3.83c-2.43-18.04-6.26-35.68-13.61-52.5
c-6.7-15.33-15.61-29.08-28.28-39.98c-8.41-7.23-17.66-13.49-28.71-16.29c-1.15-0.29-2.66-1.17-3.29,0.36
c-0.47,1.15,0.98,1.88,1.86,2.5c8.39,5.97,16.23,12.57,23.22,20.15c0.76,0.83,1.59,1.61,2.28,2.5c0.93,1.22,2.17,2.49,1.53,4.16
c-0.75,1.94-2.69,1.74-4.34,1.84c-21.89,1.31-37.36-9.01-48.48-26.99c-4.7-7.59-7.79-15.85-9.62-24.63
c-0.74-3.54,0.55-4.82,3.77-4.75c20.17,0.45,39.08,4.58,54.52,18.79c0.82,0.75,1.65,1.89,2.87,1.17c1.32-0.78,0.46-2.01,0.14-3.02
c-3.07-9.7-6.87-19.1-12.25-27.75c-7.92-12.75-16.53-24.95-28.72-34.11c-0.67-0.51-1.26-1.17-1.99-1.56
c-0.8-0.42-1.71-1.42-2.63-0.51c-0.93,0.92-0.09,1.81,0.49,2.59c2.93,3.94,5.69,8.02,9.19,11.51c3.19,3.19,5.47,6.96,7.18,11.13
c1.28,3.14,0.17,4.27-2.93,3.88c-9.7-1.22-18.51-4.74-26.19-10.77c-14.08-11.04-21.49-26.43-27.4-42.75
c-0.82-2.26-0.36-4.05,2.44-4.1c14.7-0.24,29.27,0.55,42.92,6.83c14.31,6.58,22.18,18.52,27.06,32.91
c0.78,2.31,0.58,6.04,3.27,6.24c2.39,0.18,2.57-3.51,3.58-5.57c3.66-7.46,8.62-14.21,11.77-21.93c1.93-4.73,3.22-9.59,3.32-14.73
c0.03-1.51-0.2-3.46,1.56-3.99c1.48-0.44,2.37,1.24,3.34,2.19c11.04,10.88,17.57,23.64,16.27,39.58
c-0.79,9.73-4.88,18.11-10.79,25.69c-1.77,2.27-2.81,0.44-3.15-0.96c-0.69-2.85-1.19-5.8-1.31-8.72
c-0.22-5.21-0.07-10.43-0.13-15.64c-0.01-0.89,0.5-2.23-0.83-2.49c-1.02-0.2-1.75,0.76-2.27,1.62c-2.4,3.92-3.79,8.3-4.21,12.75
c-1.1,11.95,0.53,23.48,6.05,34.4c2.75,5.44,4.62,11.32,6.89,17.01c0.31,0.78,0.44,1.67,0.91,2.33c1.06,1.51,1.11,4.59,3.46,4.12
c2.13-0.43,1.7-3.23,1.9-5.12c0.99-9.42,5.47-17.43,10.11-25.39c5.67-9.73,11.58-19.35,13.24-30.84c0.41-2.82,0.18-5.62,0.4-8.42
c0.08-1.01,0.22-2.05,1.36-2.38c0.99-0.29,1.51,0.59,2.07,1.17c13.03,13.56,23.05,28.45,21.68,48.49
c-0.74,10.81-5.94,19.51-12.88,27.31c-2.6,2.93-5.78,5.34-8.73,7.95c-0.68,0.6-1.27,1.73-2.46,1.02
c-0.97-0.58-0.98-1.64-1.01-2.64c-0.16-6.24,1.32-12.29,2.07-18.42c0.36-2.93,1-5.82,1.5-8.73c0.19-1.15,1.24-2.63-0.52-3.24
c-1.52-0.52-2.11,1-2.81,2.03c-4.49,6.68-6.9,14.12-8.06,22.01c-2.2,14.98,0.47,29.41,4.95,43.63c0.49,1.55,0.72,3.79,2.64,3.93
c2.11,0.15,2.2-2.19,2.81-3.67c4.08-9.89,10.61-18.18,17.19-26.43c8.24-10.31,15.49-21.11,17.72-34.51
c0.14-0.83,0.27-1.67,0.38-2.5c0.28-2-0.61-5.03,1.72-5.53c2.11-0.46,3.01,2.53,4.19,4.19c6.15,8.66,11.09,17.9,13.66,28.33
c3.48,14.11,1.32,27.31-5.71,39.9c-6.27,11.25-15.26,20.14-24.52,28.82c-1.01,0.95-2.26,2.3-3.62,1.58
c-1.66-0.87-1.01-2.86-0.66-4.22c2.94-11.28,4.28-23.04,10.11-33.47c0.63-1.13,2.35-2.83,0.6-4.03c-1.35-0.92-2.46,0.84-3.43,1.8
c-12.11,11.95-17.96,26.65-18.68,43.47c-0.28,6.73,2.05,13.2,2.48,19.9c0.16,2.47,2.11,2.11,3.24,0.66
c10.31-13.25,25.3-20.82,37.77-31.44c8.04-6.85,14.44-14.94,18.84-24.58c0.35-0.77,0.53-1.64,1.01-2.31c0.7-1,1.33-2.38,2.82-2.2
c1.27,0.16,1.58,1.49,2.05,2.48c3.39,7.16,5.86,14.59,7.01,22.47c2.98,20.32-3.23,37.29-17.83,51.61
c-9.13,8.95-19.78,15.24-31.48,20.01c-1.37,0.56-2.95,1.91-4.2,0.35c-1.07-1.33-0.12-2.97,0.6-4.35
c4.56-8.73,8.85-17.61,14.97-25.43c1.08-1.38,2.27-2.76,2.75-5.03c-5.44,0.98-8.95,4.6-12.32,7.96
c-10.19,10.18-15.93,22.75-18.13,36.88c-1.28,8.19-1.7,16.5-3.35,24.65c-0.27,1.33-0.04,2.77-0.04,4.12
c1.16,0.26,1.88-0.16,2.3-0.96c9.55-18.04,25.65-27.81,43.9-34.89c9.99-3.88,19.95-7.84,27.23-16.29
c0.61-0.71,1.44-1.57,2.53-0.99c1.27,0.68,1.41,2.04,1.49,3.3c0.56,8.18,0.39,16.37-0.94,24.44
c-2.48,14.98-8.84,28.24-19.69,38.91c-11.05,10.87-24.51,17.82-39.42,21.86c-2.28,0.62-5.28,3.21-6.95,1
c-1.81-2.39,1.26-4.9,2.63-7.01c7.53-11.63,16.85-21.78,26.61-31.55c2.49-2.5,2.48-2.51,3.41-5.07c-2.01-0.75-3.55,0.57-5.15,1.28
c-12.58,5.59-24.24,12.47-33.08,23.4c-4.71,5.82-7.66,12.49-9.51,19.62c-4.4,16.96-11.27,33.01-17.51,49.3
c-0.76,1.97-2.92,4.75-0.89,5.99c1.62,0.99,2.96-2.41,4.15-3.93c4.91-6.34,10.17-12.26,15.96-17.88
c13.27-12.9,29.23-20.2,46.77-24.8c6.93-1.82,13.86-3.63,20.45-6.6c3.41-1.53,6.2-3.83,9.2-5.9c0.93-0.64,1.84-1.44,3.06-0.86
c1.33,0.63,1,1.94,0.92,2.99c-1.03,12.65-2.87,25.11-7.64,37.02c-3.02,7.53-6.88,14.55-12.06,20.71
c-9.43,11.23-21.68,17.99-35.7,21.97c-7.63,2.17-15.38,3.24-23.21,3.97c-1.35,0.13-3.09,0.64-3.71-1.05
c-0.51-1.4,0.9-2.25,1.88-3.01c8.37-6.48,15.85-13.93,23.2-21.52c4.03-4.16,7.45-8.8,10.64-13.6c0.74-1.12,1.9-2.54,0.78-3.83
c-1.21-1.4-2.61-0.05-3.81,0.5c-11.86,5.45-22.33,13.06-32.24,21.42c-14.16,11.94-26.43,25.65-37.33,40.61
c-0.75,1.02-1.49,2.06-2.11,3.15c-0.45,0.8-1.39,1.72-0.48,2.63c0.82,0.83,1.84,0.23,2.73-0.19c5.73-2.67,11.36-5.59,17.21-7.97
c12.9-5.25,26.24-8.46,40.3-7.52c14.78,0.99,27.41,6.79,38,17.14c2.16,2.11,2.34,3.86-0.72,5.06
c-11.87,4.64-21.35,12.94-31.35,20.43c-12.57,9.41-25.46,18.16-41.32,21.07c-12.3,2.26-24.35,1.27-36.14-2.91
c-1.28-0.45-3.02-0.59-3.26-2.27c-0.27-1.84,1.59-2.19,2.72-2.81c16.4-9.04,33.15-17.36,50.5-24.46c2.13-0.87,4.55-1.38,6.15-3.93
c-5.24-1.25-10.06,0-14.78,0.66c-36.64,5.07-66.31,22.1-88.26,52.12c-0.79,1.08-2.3,2.43-1.3,3.68c1.14,1.42,2.56-0.16,3.69-0.77
c13.33-7.28,27.59-11.5,42.74-11.65c19.38-0.18,36.71,6.1,51.83,18.31c4.06,3.28,7.95,6.75,11.36,10.7
c1.51,1.75,2.71,3.9-1.04,4.4c-13.54,1.79-25.36,8.22-37.44,13.85c-13.17,6.14-26.42,11.96-40.85,14.41
c-15.56,2.64-30.53,0.56-44.87-6.01c-1.37-0.63-3.13-1.14-3.17-3.01c-0.04-1.82,1.8-1.98,2.98-2.55
c22.62-11.07,46.07-19.54,71.21-22.7c1.25-0.16,2.48-0.5,3.7-0.82c0.34-0.09,0.61-0.42,1.11-0.79c-2.46-2.07-5.4-2.19-8.02-2.32
c-28.8-1.48-56.11,4.2-80.86,19.2c-11.15,6.75-21.57,14.77-32.71,21.63c-1.27,0.78-3.41,1.5-2.7,3.16
c0.64,1.5,2.81,0.67,4.24,0.43c15.68-2.67,31.32-3.11,46.84,0.94c17.77,4.64,32.64,14.01,45.1,27.48
c2.84,3.08,6.22,5.66,8.66,9.15c1.31,1.87,0.74,3.01-1.39,3.09c-21.99,0.86-42.11,9.63-63.09,14.75
c-6.6,1.61-13.37,2.52-19.99,4.04c-8.64,1.98-17.34,2.87-26.19,2.64c-16.35-0.42-30.86-5.59-43.15-16.56
c-0.88-0.78-2.53-1.24-1.8-2.89c0.64-1.45,2.14-1.12,3.37-1.11c13.09,0.05,26.17,0.29,39.24-0.75c14.59-1.16,29.09-2.83,43.26-6.7
c1.34-0.37,3.25-0.43,2.91-2.28c-0.3-1.6-2.15-0.98-3.29-0.89c-20.85,1.72-41.57-0.63-62.35-1.65c-19-0.93-37.97-0.27-56.83,2.52
c-15.85,2.35-31.68,4.82-47.2,8.92c-0.54,0.14-1.13,0.16-1.65,0.36c-1.28,0.5-3,0.67-3.13,2.4c-0.12,1.6,1.52,1.86,2.59,2.38
c9.63,4.72,18.73,10.31,27.32,16.72c14.44,10.78,26.69,23.69,37.09,38.37c2.05,2.9,1.32,4.28-2.41,4.3
c-14.22,0.07-28.44,0-42.67,0.07c-2.69,0.01-3.94-1.12-4.86-3.62c-8.47-23.21-26.62-36.61-47.79-46.9
c-1.6-0.78-3.31-0.73-4.91,0.06c-18.95,9.23-35.66,20.96-45.09,40.76c-0.24,0.51-0.66,0.98-0.75,1.51
c-1.18,7.14-5.58,8.63-12.3,8.32c-12.08-0.55-24.21-0.15-36.32-0.17c-1.37,0-3.03,0.39-3.87-1.05c-0.99-1.7,0.54-2.84,1.4-4.05
c16.52-23.32,37.55-41.34,63.15-54.03c1.3-0.65,3.32-1.06,3.04-2.99c-0.26-1.78-2.22-1.2-3.46-1.67
c-11.73-4.43-24.27-4.88-36.39-7.34c-23.87-4.85-48.02-6.22-72.39-4.53c-17.11,1.19-34.25,2.47-51.44,1.83
c-2.38-0.09-4.76-0.49-7.14-0.51c-1.21-0.01-3.19-0.95-3.46,1.13c-0.2,1.57,1.53,1.66,2.75,2c8.56,2.37,17.28,3.84,26.06,5.01
c17.76,2.36,35.6,2.79,53.48,2.49c1.27-0.02,2.53-0.03,3.8-0.01c1.13,0.02,2.38-0.01,2.79,1.35c0.37,1.21-0.73,1.66-1.45,2.3
c-11.92,10.61-25.91,16.14-41.79,16.85c-18.67,0.83-36.58-3.33-54.37-8.37c-13.93-3.95-27.66-8.66-41.91-11.44
c-4.43-0.86-8.88-1.4-13.39-1.47c-1.14-0.02-2.38-0.06-2.9-1.28c-0.51-1.21,0.31-2.11,1.06-3c15.39-18.21,33.7-31.9,57.61-36.59
c13.25-2.6,26.59-1.99,39.9-0.19c2.17,0.29,5.65,1.57,6.2-0.13c0.95-2.92-2.92-2.45-4.62-3.56c-8.7-5.68-17.47-11.23-25.85-17.41
c-11.26-8.3-24.31-12.63-37.49-17.14c-14.26-4.88-28.63-6.45-43.35-6.49c-4.72-0.01-9.75-0.04-14.38,2.82
c2.86,2.1,5.94,1.84,8.74,2.24c24.25,3.41,47.23,10.8,69.02,21.93c3.73,1.9,3.92,3.7,0.13,5.8c-5.76,3.2-12.06,5.32-18.54,6.23
c-9.92,1.38-20.11,1.25-29.84-0.23c-10.4-1.59-20.47-5.47-30.03-10.44c-7.52-3.9-14.97-8.06-23.23-10.49
c-4.88-1.43-8.93-5.03-14.15-5.88c-2.2-0.35-4.3-1.27-6.59-1.32c-1.26-0.03-2.65-0.1-3.15-1.59c-0.42-1.25,0.58-2.03,1.2-2.97
c3.26-4.94,7.83-8.61,12.23-12.38c5.61-4.8,11.94-8.49,18.97-10.97c17.86-6.31,35.81-6.89,54.21-2.27
c7.12,1.78,13.35,5.01,19.68,8.3c1.6,0.83,3.11,1.92,5.04,2.07c-4.22-12.25-25.46-30.84-45.55-42.19
c-19.07-10.77-39.27-15.3-60.74-15.81c4.4,3.95,9.91,5.35,14.99,7.6c14.43,6.39,28.53,13.42,42.38,20.96
c1.18,0.64,2.86,0.97,2.66,2.84c-0.2,1.87-1.99,1.83-3.21,2.24c-21.81,7.38-42.33,4.27-61.82-7.61
c-7.83-4.77-15.03-10.39-22.29-15.93c-7.4-5.65-14.92-10.99-23.48-14.8c-3.93-1.75-4.13-2.84-1.12-5.7
c13.57-12.91,29.85-18.05,48.33-16.45c16.12,1.4,30.83,7.3,45.13,14.47c1.41,0.71,3.21,2.62,4.45,1.25
c1.51-1.67-0.71-3.33-1.67-4.71c-9.52-13.69-21.01-25.64-32.8-37.38c-10.57-10.53-22.74-18.64-35.65-25.82
c-0.73-0.41-1.54-0.69-2.28-1.09c-1.67-0.91-3.75-1.73-5.03-0.22c-1.2,1.41,0.31,3.28,1.24,4.55c3.49,4.82,6.7,9.86,10.92,14.12
c4.27,4.3,8.59,8.54,12.79,12.89c3.15,3.27,7.7,4.58,10.76,7.98c0.74,0.83,1.99,1.34,1.55,2.68c-0.47,1.42-1.86,1.06-2.91,1.01
c-19.72-0.97-37.97-5.89-53.1-19.48c-12.57-11.28-18.93-25.78-22.61-41.9c-1.64-7.18-2.18-14.44-3-21.7
c-0.12-1.07-0.53-2.34,0.66-3.08c1.16-0.72,2.2-0.07,3.06,0.69c9.29,8.15,21.12,10.25,32.45,13.36c17,4.66,32.03,12.39,44.9,24.77
c6.15,5.91,11.1,12.65,16.66,18.96C111.47,468.52,112.18,470.04,114.62,469.92z"/>
<path class="st0" d="M426.57,153.1c61.53,0,123.07,0,184.6,0c9.27,0,9.29,0,9.28,9.33c-0.04,69.05-0.06,138.11-0.16,207.16
c-0.02,14.66-2.1,29.05-5.4,43.37c-3.01,13.09-7.41,25.54-13.56,37.42c-11.21,21.68-27.62,38.88-46.51,53.89
c-22.12,17.58-45.96,32.82-68.46,49.89c-13.35,10.13-26.42,20.61-37.62,33.15c-5.53,6.19-10.15,17.17-5.15,25.64
c1.89,3.2,4.7,5.58,6.82,8.56c11,15.39,5.19,38.59-14.22,45.62c-14.13,5.12-27.38-1.05-34.4-11.64
c-7.83-11.81-6.81-25.78,2.65-36.66c8.81-10.14,8.45-21.7-0.77-31.63c-15.8-17.01-34.14-30.94-52.91-44.41
c-20.19-14.49-40.91-28.25-59.99-44.25c-29.7-24.92-48.5-56.18-55.05-94.55c-2.66-15.56-3.78-31.26-3.77-47.05
c0.03-65.11,0.01-130.21,0.01-195.32c0-7.94,0.57-8.5,8.75-8.5C302.66,153.1,364.62,153.1,426.57,153.1z M426.55,156.52
c-61.67,0-123.34,0-185.01,0c-6.65,0-6.82,0.18-6.82,6.95c0,61.44-0.06,122.88,0.03,184.32c0.03,18.92,0.43,37.81,3.97,56.54
c2.13,11.3,5.15,22.24,9.44,32.86c10.69,26.51,29.04,47.08,50.95,64.67c14.54,11.68,29.93,22.26,45.26,32.9
c17.06,11.85,33.62,24.36,49.05,38.28c5.61,5.06,11.43,10.09,15.3,16.79c5.79,10.01,8.01,19.63-1.63,29.72
c-7.78,8.14-10.07,18.35-6.3,28.47c6.42,17.2,25.42,22.56,39.98,13.8c14.73-8.86,17.14-29.25,5.17-41.53
c-6.66-6.83-8.41-14.53-5.35-23.57c3.02-8.91,9.63-14.85,16.11-21.14c19.32-18.79,41.78-33.49,63.38-49.29
c16.52-12.09,33.51-23.5,48.45-37.68c10.67-10.13,19.96-21.38,27.32-33.96c9.69-16.54,15.43-34.59,18.58-53.62
c2.74-16.57,3.51-33.26,3.64-49.89c0.48-61.58,0.19-123.16,0.18-184.74c0-1.54-0.25-3.08-0.27-4.62
c-0.05-4.34-2.23-5.36-6.41-5.35C549.89,156.57,488.22,156.52,426.55,156.52z"/>
<path class="st1" d="M426.55,156.52c61.67,0,123.34,0.04,185.01-0.09c4.18-0.01,6.36,1.02,6.41,5.35
c0.02,1.54,0.27,3.08,0.27,4.62c0.01,61.58,0.3,123.16-0.18,184.74c-0.13,16.63-0.9,33.32-3.64,49.89
c-3.14,19.03-8.89,37.08-18.58,53.62c-7.37,12.58-16.65,23.83-27.32,33.96c-14.94,14.18-31.92,25.59-48.45,37.68
c-21.6,15.8-44.06,30.5-63.38,49.29c-6.47,6.3-13.09,12.23-16.11,21.14c-3.06,9.03-1.31,16.74,5.35,23.57
c11.96,12.28,9.55,32.68-5.17,41.53c-14.56,8.76-33.57,3.4-39.98-13.8c-3.78-10.12-1.48-20.33,6.3-28.47
c9.64-10.09,7.42-19.71,1.63-29.72c-3.87-6.7-9.7-11.73-15.3-16.79c-15.43-13.92-31.99-26.43-49.05-38.28
c-15.32-10.64-30.71-21.23-45.26-32.9c-21.91-17.59-40.25-38.16-50.95-64.67c-4.28-10.62-7.3-21.56-9.44-32.86
c-3.53-18.73-3.94-37.62-3.97-56.54c-0.09-61.44-0.03-122.88-0.03-184.32c0-6.77,0.17-6.95,6.82-6.95
C303.21,156.52,364.88,156.52,426.55,156.52z M582.29,458.86l0.07-0.1c2.03,0.16,2.26-0.9,1.69-2.5c1.52-2.42,3.05-4.83,4.57-7.25
c1.58,0,1.89-0.77,1.25-2.1c0.43-0.99,0.85-1.99,1.28-2.98c1.63-0.01,1.89-0.81,1.24-2.14c0.15-0.41,0.31-0.83,0.46-1.24
c1.61-0.03,1.92-0.81,1.25-2.16c0.42-0.98,0.83-1.96,1.25-2.93c2.7-0.73,2.73-2.56,1.95-4.72c1.35-4.05,2.71-8.09,4.06-12.14
c1.72-0.2,1.85-1.01,0.86-2.25c0.3-1.78,0.6-3.56,0.9-5.33c1.7-0.24,1.81-1.07,0.83-2.28c0.33-2.04,0.67-4.09,1-6.13
c1.62-0.32,1.6-1.18,0.75-2.31c0.07-0.64,0.14-1.27,0.21-1.91c1.7-0.69,1.85-1.54,0.27-2.58c0.15-1.68,0.3-3.36,0.45-5.05
c2.39-0.97,1.49-2.49,0.68-4.01c0.01-0.37,0.02-0.73,0.04-1.1c2.55-1.25,1.7-3.03,0.77-4.83c0.15-7.68,0.3-15.35,0.45-23.03
c1.78-0.76,1.24-2.36,1.24-3.67c0.02-60.18,0.02-120.35,0-180.53c0-1.28,0.65-2.94-1.27-3.6c-0.2-1.01-0.4-2.03-0.59-3.04
c-0.15-4.37-3.57-2.74-5.62-2.74c-117.46-0.08-234.93-0.07-352.39-0.07c-1.27,0-2.56-0.12-3.79,0.12
c-2.09,0.41-2.56,1.62-1.84,4.11c0.01,36.78,0.03,73.55,0.03,110.33c0,29.17,0,58.33-0.01,87.5c-0.3,0.26-0.86,0.52-0.87,0.8
c-0.11,5.54-0.25,11.09-0.15,16.63c0.02,1.26,0.53,2.82,2.41,2.85c0.1,1.14,0.2,2.27,0.3,3.41c-1.64,1.02-1.56,1.89,0.24,2.6
c0.18,1.67,0.37,3.34,0.55,5.01c-0.3,0.26-0.87,0.54-0.87,0.79c0.19,7.74,2.11,15.13,4.62,22.39c0.07,0.21,0.99,0.12,1.51,0.17
c-0.04,0.5-0.08,1.01-0.12,1.51c-0.11-0.04-0.23-0.11-0.34-0.1c-0.11,0.01-0.2,0.11-0.3,0.18c0.21-0.03,0.42-0.06,0.63-0.09
l0.26-0.07l0.24,0.14c-1.59,1.91-0.45,3.84,0.2,5.57c4.56,12.12,10.35,23.57,18.05,34.08c7.27,9.92,15.59,18.92,24.85,26.82
c18,15.36,37.64,28.61,56.9,42.31c20.34,14.47,40.47,29.18,57.76,47.37c0.84,0.88,1.45,2.67,3.33,1.76l0.17,0.2
c-0.51,0.58-0.77,1.37-0.25,1.9c4.02,4.14,6.77,9.22,10.33,13.7c0.75,0.95,2.03,2.01,3.25,1.25c1.42-0.88,3.37-1.86,2.32-4.25
c-0.04-0.23,0.05-0.41,0.26-0.52c1.33,0.38,1.98-0.41,2.71-1.37c2.69-3.52,5.43-7,8.22-10.44c0.84-1.03,1.47-2.02,1.01-3.39
c2.72-3.46,5.87-6.5,9.24-9.33c1.51,0.25,2.97,0.43,2.2-1.93l0.16-0.13c3.09,0.47,4.18-1.26,4.37-3.98
c0.49-0.94,1.25-1.55,2.24-1.91c3.12,0.53,4.27-1.22,4.58-3.95c0.1-0.21,0.27-0.3,0.5-0.27c1,0.66,1.82,0.29,2.64-0.39
c6.75-5.62,13.92-10.69,20.87-16.06c1.74-1.35,4.95-1.92,4.74-5.23c0.09-0.22,0.25-0.31,0.49-0.28c1.84,1.13,2.93-0.54,4.06-1.32
c11.49-7.94,22.93-15.96,34.33-24.05c1.27-0.9,2.99-1.83,2.51-3.98c0.1-0.21,0.27-0.3,0.5-0.27c2.26,0.72,3.42-0.06,3.38-2.48
l0.13-0.11c2.38,0.8,3.35-0.16,3.2-2.55c0.33-0.23,0.66-0.47,0.99-0.7c1.67,0.52,2.77,0.28,2.4-1.85
c0.32-0.24,0.63-0.47,0.95-0.71c2.17,0.73,2.99-0.18,2.8-2.31c0.46-0.36,0.92-0.71,1.38-1.07c2.32,0.62,3.42-0.26,3.32-2.66
c1.74-1.62,3.48-3.24,5.22-4.86c3.16,0.19,4.57-1.52,4.85-4.46c2.35-1.86,4.52-3.91,6.28-6.35c2.17,0.28,2.98-0.63,2.41-2.75
c0.89-1.05,1.77-2.11,2.66-3.16c1.53,0.25,2.03-0.41,1.65-1.86c0.86-1.07,1.71-2.15,2.57-3.22c1.65,0.21,2.09-0.5,1.51-1.98
c-0.04-0.23,0.04-0.4,0.26-0.49C582.43,460.91,582.92,460.29,582.29,458.86z"/>
<path class="st2" d="M558.72,485.05c-1.74,1.62-3.48,3.24-5.22,4.86c-1.67,0.19-2.84,1-3.32,2.66c-0.46,0.36-0.92,0.71-1.38,1.07
c-1.51,0.07-2.48,0.79-2.8,2.31c-0.32,0.24-0.63,0.47-0.95,0.71c-1.25,0.02-2.13,0.54-2.4,1.85c-0.33,0.23-0.66,0.47-0.99,0.7
c-1.51,0.28-2.84,0.8-3.21,2.54c0,0-0.13,0.11-0.13,0.11c-1.72,0.02-2.84,0.85-3.38,2.48c-0.23-0.03-0.4,0.06-0.5,0.27
c-1.33-0.24-1.96,0.88-2.87,1.46c-5.98,3.82-11.45,8.32-17.64,11.92c-7.45,4.33-14.11,9.97-20.39,15.96
c-0.23-0.03-0.4,0.07-0.49,0.28c-7.05,3.45-12.73,8.86-18.93,13.51c-3.29,2.46-7.14,4.4-9.32,8.17c-0.23-0.03-0.4,0.06-0.5,0.27
c-2.23,0.5-3.65,1.94-4.58,3.95c-0.98,0.36-1.75,0.97-2.24,1.91c-2.11,0.61-3.55,1.96-4.37,3.98c0,0-0.16,0.13-0.16,0.13
c-1.26,0.03-1.92,0.76-2.2,1.93c-3.37,2.82-6.51,5.87-9.23,9.33c-4.92,4.32-9.21,9.14-11.94,15.19c-0.21,0.11-0.29,0.29-0.25,0.52
c-2.69,2.81-4.38,1.18-6.11-1.24c-2.88-4.03-5.13-8.61-9.54-11.36c0,0-0.17-0.2-0.17-0.2c-0.07-2.27-1.99-3.3-3.29-4.67
c-10.96-11.58-23.26-21.64-35.92-31.28c-22.6-17.22-46.54-32.59-68.83-50.21c-22.23-17.57-40.3-38.35-50.18-65.45
c-0.78-2.14-0.46-4.89-2.87-6.31l-0.24-0.14c0,0-0.26,0.07-0.26,0.07c0,0,0.02,0.01,0.02,0.01c0.04-0.5,0.08-1.01,0.12-1.51
c0.35-3.44-1.26-6.54-1.99-9.74c-1.04-4.54-1.21-9.32-3.26-13.62c-0.18-1.67-0.37-3.34-0.55-5.01c0.63-0.93,0.66-1.81-0.24-2.6
c-0.1-1.14-0.2-2.27-0.3-3.41c-0.19-4.31-0.29-8.62-0.6-12.92c-0.18-2.45,0.62-5.03-0.79-7.35c0-29.17,0.01-58.33,0.01-87.5
c-0.01-36.78-0.02-73.55-0.03-110.33c1.66-2.58,4.28-2.16,6.76-2.16c116.75,0,233.49,0,350.24-0.02c2.26,0,4.45,0.2,6.63,0.76
c0.2,1.01,0.4,2.03,0.59,3.04c-0.96,1.57-0.52,3.3-0.52,4.95c-0.02,59.45-0.03,118.91,0,178.36c0,1.49-0.52,3.1,0.56,4.48
c-0.15,7.68-0.3,15.35-0.44,23.03c-1.46,1.42-1.47,3.06-0.77,4.83c-0.01,0.37-0.02,0.73-0.03,1.1c-1.36,1.14-1.31,2.52-0.69,4
c-0.15,1.68-0.3,3.36-0.45,5.05c-1.04,0.76-1.08,1.63-0.27,2.58c-0.07,0.64-0.14,1.27-0.2,1.91c-1,0.52-1.35,1.26-0.76,2.31
c-0.33,2.04-0.67,4.09-0.99,6.13c-0.98,0.5-1.35,1.23-0.84,2.28c-0.3,1.78-0.6,3.56-0.9,5.34c-0.89,0.51-1.31,1.21-0.86,2.25
c-1.35,4.05-2.71,8.09-4.06,12.14c-1.52,1.21-1.85,2.92-1.95,4.72c-0.42,0.98-0.83,1.96-1.25,2.93c-1.08,0.33-1.56,1.02-1.25,2.16
c-0.15,0.41-0.31,0.83-0.46,1.24c-0.99,0.38-1.56,1-1.24,2.14c-0.43,0.99-0.85,1.99-1.27,2.98c-1.11,0.28-1.51,0.99-1.26,2.1
c-1.52,2.42-3.05,4.83-4.57,7.25c-1.41,0.26-1.77,1.24-1.7,2.5c0,0-0.07,0.1-0.07,0.1c-1.12,0.16-1.53,0.83-1.39,1.91
c-0.21,0.1-0.3,0.26-0.25,0.49c-0.98,0.3-1.63,0.84-1.51,1.98c-0.86,1.07-1.71,2.15-2.56,3.22c-1.14,0.09-1.73,0.67-1.65,1.86
c-0.89,1.05-1.77,2.11-2.66,3.16c-1.52,0.29-2.32,1.21-2.41,2.75c-1.77,2.44-3.93,4.49-6.28,6.35
C561.21,481.27,559.62,482.78,558.72,485.05z M494.1,201.4c-1.48-0.02-2.96-0.05-4.45-0.07c-0.42-0.33-0.83-0.94-1.27-0.96
c-10.18-0.57-20.34-1.87-30.56-0.8c-1.42-0.11-2.84-0.23-4.25-0.34c-9.53-2.68-16.13-9.13-21.8-16.84
c-5.38-7.31-5.49-7.32-10.71-0.03c-8.04,11.24-18.12,17.41-32.71,17.07c-19.09-0.45-38.16,1.57-57.14,3.82
c-1.8,0.21-5.1-0.72-5.06,1.37c0.04,2.49,3.38,2.12,5.48,2.3c19.32,1.62,38.63,3.6,58.05,3.49c11.41-0.06,20.91,3.59,27.95,12.86
c1.95,2.58,4,5.08,5.97,7.65c1.94,2.53,3.76,2.57,5.66-0.06c1.48-2.05,2.99-4.09,4.6-6.04c6.44-7.78,13.49-14.1,24.66-14.07
c11.09,0.03,22.18-0.87,33.27-1.43c1.59-0.08,3.45,0.53,4.63-1.23c0.37,0.03,0.74,0.06,1.12,0.09c9.24,0.22,18.42-0.31,27.51-2.03
c0.89-0.17,2.23-0.17,1.97-1.6c-0.23-1.25-1.51-1.01-2.43-1.12c-4.6-0.55-9.19-1.42-13.8-1.5
C505.22,201.84,499.7,200.14,494.1,201.4z M426.21,428.78c50.12,0,100.24,0,150.36-0.01c5.15,0,5.9-0.62,5.9-5.32
c0.02-57.21,0.02-114.41,0-171.62c0-4.75-0.84-5.51-5.79-5.54c-6.76-0.04-13.52-0.11-20.27,0.02c-3.12,0.06-4.36-1.28-4.31-4.26
c0.05-3.38,0.03-6.76-0.01-10.14c-0.06-5.16-1.01-6.33-6.03-6.56c-17.15-0.79-34.28-1.07-51.34,1.64
c-24.34,3.86-46.95,11.55-65.46,28.67c-2,1.85-3.74,2-5.82-0.03c-2.31-2.24-4.83-4.32-7.43-6.22
c-16.85-12.33-35.95-18.79-56.39-22.13c-17.63-2.88-35.3-2.72-53.01-1.92c-4.79,0.22-5.71,1.38-5.77,6.35
c-0.04,3.24-0.08,6.48,0,9.72c0.08,3.34-1.37,4.92-4.8,4.87c-6.05-0.09-12.11-0.02-18.16-0.02c-7.55,0.01-7.57,0.03-7.57,7.5
c0,56.08,0,112.16,0,168.23c0,6.74,0.01,6.76,6.84,6.76C326.81,428.78,376.51,428.78,426.21,428.78z M493.54,493.03
c0.25,2.03-1.11,2.97-2.09,4.07c-7.31,8.21-13.74,17.08-19.54,26.42c-0.66,1.06-1.68,2.21-0.95,3.47
c0.78,1.35,2.34,0.83,3.47,0.54c2.84-0.73,5.74-1.45,8.41-2.63c10.31-4.58,17.92-12.33,24.85-21.04c5.79-7.28,10.18-16,19.4-20.07
c1.96-0.87,1.75-2.57,0.3-4.16c-2.91-3.2-6.29-5.65-10.5-6.75c-9.07-2.37-17.63-0.47-25.68,3.78c-2.98,1.58-4.95,1.48-7.47-0.78
c-4.18-3.77-9.01-4.77-14.48-2.55c-7.43,3.01-12.22,8.77-16.55,15.11c-1.4,2.05-3.82,4.16-2.09,6.73
c1.79,2.66,4.96,2.12,7.78,1.65c0.69-0.12,1.36-0.42,2.05-0.46c2.16-0.14,4.92-3.22,6-1.08c1.11,2.2-2.34,4.07-4.16,5.63
c-4.17,3.57-8.97,5.51-14.39,2.94c-4.96-2.36-6.79-6.72-7.17-12.02c-0.5-6.97,2.18-12.93,5.38-18.8
c3.2-5.87,3.82-11.88,1.45-18.29c-3.37-9.11-12.33-15.19-22.39-14.79c-9.22,0.37-17.46,7.48-20.2,16.5
c-2.14,7.03-0.23,13.04,3.1,18.94c2.99,5.28,4.75,10.86,4.17,16.94c-0.49,5.17-2.46,9.58-7.64,11.73c-5.34,2.21-9.89,0.42-14-3.09
c-0.85-0.73-1.68-1.51-2.4-2.38c-0.86-1.03-2.74-2.03-1.88-3.4c0.9-1.44,2.53-0.18,3.78,0.33c3.18,1.3,6.35,2.16,9.84,1.12
c3.13-0.93,3.72-2.69,2.14-5.38c-3.76-6.38-8.41-11.99-14.6-16.14c-6.45-4.33-12.87-4.02-18.62,1.05c-2.1,1.85-3.88,2.29-6.4,0.87
c-4.06-2.3-8.44-3.91-13.06-4.63c-8.91-1.39-17.12-0.2-23.57,6.95c-2.03,2.25-2,3.93,1,5.1c3.67,1.42,6.45,4.01,8.86,6.98
c4.77,5.9,9.3,12,14.14,17.84c7.36,8.87,16.31,15.45,27.73,18.13c1.46,0.34,3.39,1.04,4.37-0.32c1.05-1.44-0.46-2.86-1.27-4.13
c-3.7-5.81-7.57-11.49-11.76-16.98c-3.2-4.2-7.29-7.73-9.95-12.67c3.01-0.95,4.98,0.68,6.87,1.93
c6.88,4.52,12.63,10.29,17.81,16.65c9.93,12.19,18.21,25.74,30.09,36.33c8.25,7.35,13.06,8.04,22.34,2.38
c1.3-0.8,2.44-1.88,3.6-2.89c8.23-7.19,14.65-15.92,21.07-24.65c7.01-9.54,14.17-18.93,23.78-26.08
C487.22,495,489.86,492.89,493.54,493.03z"/>
<path class="st0" d="M607.92,166.95c-2.17-0.56-4.37-0.76-6.63-0.76c-116.75,0.02-233.49,0.02-350.24,0.02
c-2.48,0-5.1-0.42-6.76,2.16c-0.72-2.49-0.25-3.7,1.84-4.11c1.22-0.24,2.52-0.12,3.79-0.12c117.46,0,234.93-0.01,352.39,0.07
C604.35,164.22,607.77,162.58,607.92,166.95z"/>
<path class="st0" d="M252.42,422.41c2.41,1.42,2.09,4.17,2.87,6.31c9.88,27.1,27.95,47.87,50.18,65.45
c22.29,17.63,46.24,33,68.83,50.21c12.65,9.64,24.95,19.7,35.92,31.28c1.3,1.37,3.22,2.4,3.29,4.67
c-1.88,0.91-2.49-0.88-3.33-1.77c-17.3-18.19-37.43-32.9-57.76-47.37c-19.26-13.71-38.91-26.95-56.9-42.31
c-9.26-7.9-17.58-16.9-24.85-26.82c-7.7-10.51-13.49-21.96-18.05-34.08C251.97,426.25,250.83,424.32,252.42,422.41z"/>
<path class="st0" d="M608.55,357.79c-1.08-1.38-0.56-2.99-0.56-4.48c-0.03-59.45-0.03-118.91,0-178.36c0-1.65-0.44-3.39,0.52-4.95
c1.93,0.66,1.27,2.32,1.27,3.6c0.03,60.18,0.03,120.35,0,180.53C609.79,355.43,610.33,357.03,608.55,357.79z"/>
<path class="st0" d="M493.54,533.96c6.28-5.99,12.94-11.63,20.39-15.96c6.19-3.6,11.66-8.1,17.64-11.92
c0.91-0.58,1.54-1.7,2.87-1.46c0.48,2.15-1.24,3.07-2.51,3.98c-11.39,8.08-22.84,16.1-34.33,24.05
C496.47,533.42,495.38,535.09,493.54,533.96z"/>
<path class="st0" d="M464.8,555.92c2.18-3.77,6.03-5.71,9.32-8.17c6.2-4.65,11.88-10.06,18.93-13.51c0.21,3.31-3,3.88-4.74,5.23
c-6.94,5.37-14.11,10.44-20.87,16.06C466.62,556.22,465.8,556.58,464.8,555.92z"/>
<path class="st0" d="M413.69,580.53c4.41,2.75,6.66,7.33,9.54,11.36c1.73,2.42,3.41,4.05,6.11,1.24c1.05,2.39-0.9,3.36-2.32,4.25
c-1.22,0.76-2.5-0.3-3.25-1.25c-3.55-4.48-6.31-9.56-10.33-13.7C412.92,581.91,413.18,581.11,413.69,580.53z"/>
<path class="st0" d="M246.8,397.49c2.05,4.3,2.23,9.08,3.26,13.62c0.73,3.2,2.35,6.3,1.99,9.74c-0.52-0.05-1.44,0.03-1.51-0.17
c-2.51-7.26-4.43-14.65-4.62-22.39C245.93,398.03,246.5,397.75,246.8,397.49z"/>
<path class="st0" d="M244.32,366.2c1.41,2.32,0.62,4.9,0.79,7.35c0.31,4.3,0.41,8.61,0.6,12.92c-1.89-0.02-2.39-1.59-2.41-2.85
c-0.1-5.54,0.04-11.08,0.15-16.63C243.45,366.73,244.01,366.47,244.32,366.2z"/>
<path class="st0" d="M429.58,592.62c2.73-6.05,7.02-10.87,11.94-15.19c0.46,1.37-0.17,2.35-1.01,3.39
c-2.79,3.44-5.53,6.92-8.22,10.44C431.57,592.2,430.91,593,429.58,592.62z"/>
<path class="st0" d="M558.72,485.05c0.9-2.27,2.5-3.78,4.85-4.46C563.29,483.53,561.87,485.24,558.72,485.05z"/>
<path class="st0" d="M453.12,566.04c0.82-2.03,2.26-3.38,4.37-3.98C457.3,564.78,456.21,566.51,453.12,566.04z"/>
<path class="st0" d="M459.73,560.15c0.93-2.01,2.35-3.45,4.58-3.95C464,558.93,462.84,560.68,459.73,560.15z"/>
<path class="st0" d="M607.34,385.65c-0.7-1.76-0.69-3.41,0.77-4.83C609.04,382.62,609.88,384.4,607.34,385.65z"/>
<path class="st0" d="M595.34,435.46c0.1-1.8,0.43-3.51,1.95-4.72C598.07,432.9,598.04,434.73,595.34,435.46z"/>
<path class="st0" d="M534.93,504.35c0.54-1.63,1.67-2.46,3.38-2.48C538.35,504.29,537.19,505.07,534.93,504.35z"/>
<path class="st0" d="M606.62,390.75c-0.63-1.48-0.67-2.86,0.69-4C608.1,388.26,609.01,389.79,606.62,390.75z"/>
<path class="st0" d="M550.18,492.57c0.49-1.67,1.66-2.47,3.32-2.66C553.6,492.31,552.5,493.2,550.18,492.57z"/>
<path class="st0" d="M538.45,501.76c0.36-1.74,1.69-2.26,3.21-2.54C541.8,501.6,540.82,502.56,538.45,501.76z"/>
<path class="st0" d="M569.85,474.24c0.09-1.54,0.89-2.46,2.41-2.75C572.83,473.61,572.02,474.52,569.85,474.24z"/>
<path class="st0" d="M546,495.96c0.31-1.52,1.29-2.24,2.8-2.31C548.99,495.77,548.17,496.69,546,495.96z"/>
<path class="st0" d="M605.9,398.38c-0.81-0.96-0.77-1.82,0.27-2.58C607.75,396.84,607.6,397.69,605.9,398.38z"/>
<path class="st0" d="M246.01,389.88c0.89,0.79,0.86,1.67,0.24,2.6C244.45,391.77,244.37,390.91,246.01,389.88z"/>
<path class="st0" d="M450.76,568.1c0.28-1.16,0.94-1.89,2.2-1.93C453.73,568.53,452.27,568.35,450.76,568.1z"/>
<path class="st0" d="M582.36,458.76c-0.07-1.27,0.29-2.24,1.7-2.5C584.62,457.86,584.39,458.92,582.36,458.76z"/>
<path class="st0" d="M542.65,498.51c0.27-1.31,1.15-1.82,2.4-1.85C545.42,498.8,544.32,499.03,542.65,498.51z"/>
<path class="st0" d="M574.92,468.33c-0.08-1.18,0.51-1.76,1.65-1.86C576.96,467.92,576.45,468.58,574.92,468.33z"/>
<path class="st0" d="M579.13,463.25c-0.12-1.14,0.53-1.68,1.51-1.98C581.22,462.75,580.78,463.46,579.13,463.25z"/>
<path class="st0" d="M580.9,460.77c-0.14-1.08,0.27-1.75,1.39-1.91C582.92,460.29,582.43,460.91,580.9,460.77z"/>
<path class="st0" d="M588.62,449.01c-0.26-1.11,0.14-1.82,1.26-2.1C590.51,448.24,590.2,449,588.62,449.01z"/>
<path class="st0" d="M591.15,443.93c-0.32-1.14,0.25-1.76,1.24-2.14C593.04,443.12,592.78,443.92,591.15,443.93z"/>
<path class="st0" d="M601.35,418.59c-0.45-1.03-0.03-1.73,0.86-2.25C603.2,417.58,603.07,418.39,601.35,418.59z"/>
<path class="st0" d="M603.11,411.01c-0.51-1.05-0.14-1.78,0.84-2.28C604.92,409.94,604.81,410.77,603.11,411.01z"/>
<path class="st0" d="M604.94,402.6c-0.59-1.05-0.25-1.79,0.76-2.31C606.54,401.41,606.56,402.27,604.94,402.6z"/>
<path class="st0" d="M592.85,440.55c-0.31-1.14,0.17-1.83,1.25-2.16C594.77,439.74,594.46,440.52,592.85,440.55z"/>
<path class="st0" d="M251.94,422.36c0,0-0.02-0.01-0.02-0.01c-0.21,0.03-0.42,0.06-0.63,0.09c0.1-0.06,0.2-0.16,0.3-0.18
C251.71,422.25,251.82,422.32,251.94,422.36z"/>
<path class="st1" d="M426.21,428.78c-49.7,0-99.39,0-149.09,0c-6.83,0-6.84-0.02-6.84-6.76c0-56.08,0-112.16,0-168.23
c0-7.47,0.02-7.49,7.57-7.5c6.05-0.01,12.11-0.08,18.16,0.02c3.43,0.05,4.88-1.52,4.8-4.87c-0.07-3.24-0.04-6.48,0-9.72
c0.07-4.97,0.98-6.13,5.77-6.35c17.72-0.8,35.39-0.96,53.01,1.92c20.44,3.34,39.54,9.8,56.39,22.13c2.6,1.91,5.12,3.98,7.43,6.22
c2.09,2.02,3.83,1.88,5.82,0.03c18.51-17.12,41.13-24.82,65.46-28.67c17.06-2.7,34.19-2.43,51.34-1.64
c5.02,0.23,5.97,1.4,6.03,6.56c0.04,3.38,0.06,6.76,0.01,10.14c-0.05,2.98,1.19,4.32,4.31,4.26c6.75-0.14,13.51-0.07,20.27-0.02
c4.95,0.03,5.79,0.79,5.79,5.54c0.02,57.21,0.02,114.41,0,171.62c0,4.69-0.75,5.32-5.9,5.32
C526.44,428.78,476.32,428.78,426.21,428.78z M312.31,306.26c0,21.27,0.02,42.54-0.02,63.8c0,2.92,0.29,5.73,4.01,5.57
c4.95-0.2,9.78,1.11,14.69,0.85c8.89-0.48,17.69,0.81,26.39,1.99c20.1,2.72,39.47,8.27,57.6,17.68c4.72,2.45,5.72,1.84,5.72-3.31
c0.01-39.16-0.01-78.31,0.03-117.47c0-3.57-1.14-6.37-3.65-9.04c-9.81-10.43-22.19-16.55-35.34-21.27
c-20.23-7.27-41.34-8.46-62.58-8.39c-5.6,0.02-6.86,1.32-6.86,7.04C312.3,264.57,312.31,285.42,312.31,306.26z M539.92,306.43
c0-21.41-0.05-42.83,0.05-64.24c0.02-3.96-1.49-5.56-5.49-5.55c-12.91,0.03-25.74,0.55-38.57,2.43
c-20.38,2.98-39.14,9.76-55.46,22.48c-3.82,2.98-8.26,5.84-8.24,11.97c0.11,39.87,0.05,79.73,0.07,119.6
c0,4.77,1.04,5.44,5.21,3.29c7.25-3.76,14.7-7.03,22.41-9.72c24.15-8.43,49.31-9.98,74.55-10.93c5.31-0.2,5.47-0.19,5.47-5.51
C539.93,348.97,539.92,327.7,539.92,306.43z"/>
<path class="st0" d="M493.54,493.03c-3.68-0.15-6.32,1.96-8.99,3.95c-9.62,7.15-16.77,16.54-23.78,26.08
c-6.42,8.73-12.85,17.46-21.07,24.65c-1.16,1.01-2.3,2.1-3.6,2.89c-9.28,5.66-14.1,4.97-22.34-2.38
c-11.89-10.6-20.16-24.14-30.09-36.33c-5.18-6.36-10.93-12.13-17.81-16.65c-1.9-1.24-3.86-2.87-6.87-1.93
c2.66,4.94,6.75,8.47,9.95,12.67c4.18,5.49,8.06,11.17,11.76,16.98c0.81,1.28,2.32,2.69,1.27,4.13c-0.99,1.36-2.91,0.66-4.37,0.32
c-11.43-2.68-20.38-9.25-27.73-18.13c-4.84-5.84-9.37-11.94-14.14-17.84c-2.4-2.97-5.19-5.56-8.86-6.98c-3-1.16-3.03-2.85-1-5.1
c6.45-7.16,14.66-8.35,23.57-6.95c4.61,0.72,9,2.33,13.06,4.63c2.51,1.42,4.3,0.99,6.4-0.87c5.75-5.07,12.16-5.38,18.62-1.05
c6.2,4.16,10.84,9.76,14.6,16.14c1.59,2.69,1,4.45-2.14,5.38c-3.48,1.04-6.66,0.18-9.84-1.12c-1.25-0.51-2.88-1.77-3.78-0.33
c-0.86,1.37,1.02,2.37,1.88,3.4c0.72,0.86,1.54,1.65,2.4,2.38c4.11,3.51,8.67,5.3,14,3.09c5.18-2.14,7.15-6.56,7.64-11.73
c0.58-6.09-1.18-11.66-4.17-16.94c-3.33-5.9-5.24-11.91-3.1-18.94c2.74-9.01,10.98-16.13,20.2-16.5
c10.05-0.4,19.01,5.67,22.39,14.79c2.37,6.41,1.76,12.42-1.45,18.29c-3.2,5.87-5.88,11.83-5.38,18.8
c0.38,5.3,2.21,9.66,7.17,12.02c5.42,2.57,10.22,0.63,14.39-2.94c1.82-1.56,5.27-3.43,4.16-5.63c-1.08-2.14-3.84,0.94-6,1.08
c-0.69,0.04-1.36,0.35-2.05,0.46c-2.82,0.47-5.99,1.01-7.78-1.65c-1.73-2.57,0.69-4.68,2.09-6.73c4.33-6.34,9.12-12.1,16.55-15.11
c5.47-2.21,10.3-1.21,14.48,2.55c2.52,2.27,4.49,2.36,7.47,0.78c8.04-4.26,16.6-6.15,25.68-3.78c4.2,1.1,7.59,3.55,10.5,6.75
c1.45,1.6,1.66,3.3-0.3,4.16c-9.22,4.07-13.61,12.78-19.4,20.07c-6.93,8.71-14.54,16.46-24.85,21.04
c-2.67,1.19-5.56,1.9-8.41,2.63c-1.13,0.29-2.69,0.81-3.47-0.54c-0.73-1.26,0.29-2.41,0.95-3.47c5.8-9.34,12.22-18.21,19.54-26.42
C492.43,496,493.79,495.06,493.54,493.03z"/>
<path class="st1" d="M497.53,208.18c-0.37-0.03-0.74-0.06-1.12-0.09c-0.78-0.27-1.56-0.73-2.35-0.75
c-12.51-0.35-25.01,0.23-37.48,1.07c-2.67,0.18-5.55,0.31-8.23,1.47c-7.62,3.3-13.08,9-17.76,15.58
c-3.82,5.37-3.76,5.42-7.88,0.58c-1.18-1.39-2.24-2.88-3.49-4.21c-5.18-5.55-10.14-11.65-18.3-12.7
c-9.73-1.26-19.53-1.95-29.37-1.76c-6.06,0.11-12.05-0.39-17.97-1.59c-2.01-0.41-4.32,0.6-6.67-1.29c1.11-0.34,1.6-0.62,2.1-0.62
c13.62-0.11,27.12-2.33,40.78-1.95c6.22,0.17,12.67-0.28,18.3-3.76c6.34-3.91,10.96-9.53,15.26-15.46
c2.49-3.42,3.14-3.4,5.76,0.02c5.14,6.71,10.37,13.37,18.44,16.85c1.98,0.85,4.12,2.06,6-0.32c1.42,0.11,2.84,0.23,4.25,0.34
c0.25,2.52,2.23,1.62,3.56,1.68c5.99,0.28,11.98-0.11,17.99,0.71c3.31,0.46,6.95,1.11,10.27-0.63c1.48,0.02,2.96,0.05,4.45,0.07
c0.68,2.45,2.73,1.42,4.23,1.57c4.88,0.5,9.78,0.87,14.67,1.29c0,0.35,0,0.7,0,1.05c-3.94,0.37-7.89,0.71-11.82,1.14
C499.79,206.59,497.87,205.77,497.53,208.18z"/>
<path class="st0" d="M453.57,199.24c-1.87,2.38-4.02,1.17-6,0.32c-8.08-3.48-13.3-10.14-18.44-16.85
c-2.62-3.42-3.28-3.44-5.76-0.02c-4.3,5.92-8.92,11.55-15.26,15.46c-5.63,3.47-12.08,3.93-18.3,3.76
c-13.67-0.38-27.17,1.83-40.78,1.95c-0.5,0-0.99,0.29-2.1,0.62c2.35,1.89,4.67,0.89,6.67,1.29c5.93,1.2,11.92,1.71,17.97,1.59
c9.83-0.18,19.63,0.51,29.37,1.76c8.16,1.05,13.11,7.15,18.3,12.7c1.24,1.33,2.3,2.82,3.49,4.21c4.12,4.84,4.06,4.79,7.88-0.58
c4.68-6.58,10.14-12.28,17.76-15.58c2.68-1.16,5.55-1.28,8.23-1.47c12.47-0.84,24.97-1.43,37.48-1.07
c0.79,0.02,1.57,0.49,2.35,0.75c-1.18,1.77-3.04,1.16-4.63,1.24c-11.09,0.56-22.18,1.46-33.27,1.43
c-11.17-0.03-18.22,6.29-24.66,14.07c-1.61,1.95-3.12,3.99-4.6,6.04c-1.9,2.63-3.72,2.59-5.66,0.06
c-1.96-2.57-4.01-5.07-5.97-7.65c-7.03-9.27-16.54-12.93-27.95-12.86c-19.42,0.11-38.73-1.87-58.05-3.49
c-2.11-0.18-5.45,0.19-5.48-2.3c-0.03-2.08,3.27-1.15,5.06-1.37c18.98-2.25,38.05-4.27,57.14-3.82
c14.59,0.34,24.67-5.83,32.71-17.07c5.22-7.3,5.32-7.29,10.71,0.03C437.45,190.1,444.05,196.55,453.57,199.24z"/>
<path class="st0" d="M497.53,208.18c0.33-2.41,2.26-1.59,3.64-1.74c3.94-0.42,7.88-0.76,11.82-1.14c0-0.35,0-0.7,0-1.05
c-4.89-0.42-9.79-0.79-14.67-1.29c-1.5-0.15-3.54,0.88-4.23-1.57c5.6-1.27,11.12,0.43,16.69,0.53c4.61,0.08,9.21,0.95,13.8,1.5
c0.92,0.11,2.2-0.13,2.43,1.12c0.27,1.43-1.08,1.43-1.97,1.6C515.96,207.87,506.77,208.4,497.53,208.18z"/>
<path class="st0" d="M489.65,201.33c-3.32,1.74-6.96,1.09-10.27,0.63c-6.01-0.83-12-0.43-17.99-0.71
c-1.33-0.06-3.31,0.84-3.56-1.68c10.22-1.08,20.38,0.22,30.56,0.8C488.82,200.4,489.23,201,489.65,201.33z"/>
<path class="st0" d="M312.31,306.26c0-20.85-0.01-41.69,0-62.54c0-5.72,1.26-7.03,6.86-7.04c21.24-0.06,42.35,1.13,62.58,8.39
c13.14,4.72,25.52,10.83,35.34,21.27c2.51,2.67,3.65,5.46,3.65,9.04c-0.04,39.16-0.02,78.31-0.03,117.47
c0,5.15-1.01,5.76-5.72,3.31c-18.13-9.41-37.5-14.97-57.6-17.68c-8.7-1.18-17.5-2.46-26.39-1.99c-4.91,0.26-9.74-1.05-14.69-0.85
c-3.72,0.15-4.01-2.65-4.01-5.57C312.32,348.8,312.31,327.53,312.31,306.26z"/>
<path class="st0" d="M539.92,306.43c0,21.27,0.01,42.54,0,63.82c0,5.31-0.16,5.31-5.47,5.51c-25.24,0.95-50.4,2.5-74.55,10.93
c-7.71,2.69-15.16,5.97-22.41,9.72c-4.17,2.16-5.2,1.48-5.21-3.29c-0.02-39.87,0.04-79.73-0.07-119.6
c-0.02-6.13,4.42-9,8.24-11.97c16.32-12.71,35.08-19.49,55.46-22.48c12.82-1.88,25.66-2.4,38.57-2.43
c3.99-0.01,5.5,1.59,5.49,5.55C539.87,263.6,539.92,285.02,539.92,306.43z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

31
webseite/assets/js/search.js Normal file
View File

@@ -0,0 +1,31 @@
// Update search function with fallback animation
function handleSearch() {
const searchTerm = document.getElementById('searchInput').value.toLowerCase();
const topicCards = document.querySelectorAll('.topic-card');
topicCards.forEach(card => {
const title = card.querySelector('.topic-title')?.textContent.toLowerCase() || '';
const description = card.querySelector('.topic-description')?.textContent.toLowerCase() || '';
const relatedTopics = Array.from(card.querySelectorAll('.related-topics li'))
.map(li => li.textContent.toLowerCase())
.join(' ');
const content = `${title} ${description} ${relatedTopics}`;
if (content.includes(searchTerm)) {
card.style.display = 'block';
if (window.gsap) {
gsap.to(card, {
opacity: 1,
y: 0,
duration: 0.3
});
} else {
card.style.opacity = 1;
card.style.transform = 'translateY(0)';
}
} else {
card.style.display = 'none';
}
});
}

83
webseite/assets/js/sidebar.js Normal file
View File

@@ -0,0 +1,83 @@
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 <= 1024) { // Smartphone breakpoint
menuToggle.style.display = 'flex';
} else {
menuToggle.style.display = 'none';
}
}
// Add event listeners
window.addEventListener('resize', updateMenuVisibility);

121
webseite/classes/SubjectData.php Normal file
View File

@@ -0,0 +1,121 @@
<?php
require_once("Util.php");
require_once("TopicData.php");
/**
* Stellt alle relevanten Daten für ein einzeles Fach bereit
*
*/
class SubjectData
{
/**
* @var string Ein eindeutiger Bezeichner für das Fach, darf nur A-Z, a-Z, 0-9 sowie _ und - enthalten
*/
public string $id;
/**
* @var string Der für User angezeigte Name des Faches, nur reiner Text
*/
public string $displayName;
/**
* @var string Eine kurze Beschreibung des Faches, z.B. für den Text auf der Startseite, kann HTML enthalten
*/
public string $description;
/**
* @var string Themenfarbe des Faches, entweder als hexcode oder CSS-Klasse, noch nicht spezifiziert
*/
public string $color;
/**
* @var string Icon des Faches als Font-Awesome CSS-Klasse
*/
public string $icon;
/**
* @var array Alle Themen des Faches als TopicData Objekt
* @see TopicData
*/
public array $topics;
/**
* Gibt alle Fächer als SubjectData Objekt zurück
* @return array Alle Fächer als SubjectData
*/
public static function getAll(): array
{
$result = array();
$subjectDirectory = "config/subjects";
$subjectNames = scandir($subjectDirectory);
usort($subjectNames, function ($a, $b) {
return strcmp($a, $b);
});
foreach ($subjectNames as $subjectName) {
if ($subjectName == "." || $subjectName == "..") {
continue;
}
$subjectData = SubjectData::fromName($subjectName);
if (!isset($subjectData)) {
continue;
}
$result[$subjectData->id] = $subjectData;
}
return $result;
}
/**
* Lädt ein Fach über eine gegebene ID
* @param $subjectId string Die eindeutige ID des Faches
* @return SubjectData|null Das Fach zu der ID oder null, wenn kein entsprechendes Fach gefunden wurde
*/
public static function fromName(string $subjectId): SubjectData|null
{
$result = new SubjectData();
$subjectId = Util::removeIllegalCharacters($subjectId);
$subjectDirectory = "config/subjects/$subjectId";
$filename = "$subjectDirectory/properties.json";
$data = Util::parseJsonFromFile($filename);
if (!isset($data)) {
return null;
}
$result->id = $subjectId;
if (isset($data->displayName)) {
$result->displayName = $data->displayName;
} else {
return null;
}
if (isset($data->description)) {
$result->description = $data->description;
} else {
return null;
}
if (isset($data->color)) {
$result->color = $data->color;
} else {
return null;
}
if (isset($data->icon)) {
$result->icon = $data->icon;
} else {
return null;
}
$result->topics = TopicData::getAll($subjectId);
return $result;
}
}

140
webseite/classes/TopicData.php Normal file
View File

@@ -0,0 +1,140 @@
<?php
require_once("Util.php");
class TopicData
{
/**
* @var string Innerhalb des zugehörigen Faches eindeutige ID, darf nur A-Z, a-z, 0-9 sowie - und _ enthalten
*/
public string $id;
/**
* @var string Die eindeutige ID des zugehörigen Faches
*/
public string $subjectId;
/**
* @var string Der für User angezeigt Name des Themas, darf nur reinen Text enthalten
*/
public string $displayName;
/**
* @var string Das Icon des Themas als Font-Awesome CSS-Klasse
*/
public string $icon;
/**
* @var string Eine kurze Beschreibung des Themas, z.B. für die Fachübersichtsseite, darf HTML enthalten
*/
public string $description;
/**
* @var array Die IDs aller verwandten Themen als String
*/
public array $relatedTopics;
/**
* @var array Die Dateinamen (Datei.pdf) aller downloadbarer Dateien zu diesem Thema als String
*/
public array $files;
/**
* @var string Der gesamte Erklärungstext zum Thema, enthält fertiges HTML und LATEX Formelsyntax für MathJax https://docs.mathjax.org/en/latest/basic/mathematics.html
*/
public string $article;
/**
* Gibt alle Themen zu einem gegebenen Fach zurück
* @param $subjectId string Die ID des Faches
* @return array Alle zugehörigen Themen als TopicData Objekte
*/
public static function getAll(string $subjectId): array
{
$result = array();
$topicDirectory = "config/subjects/$subjectId/topics";
$topicNames = scandir($topicDirectory);
usort($topicNames, function ($a, $b) {
return strcmp($a, $b);
});
foreach ($topicNames as $topicName) {
if ($topicName == "." || $topicName == "..") {
continue;
}
$topicData = TopicData::fromName($subjectId, $topicName);
if (!isset($topicData)) {
continue;
}
$result[$topicData->id] = $topicData;
}
return $result;
}
/**
* Gibt Themendaten zu einem bestimmten Thema eines Faches zurück
* @param $subjectId string Die ID des Faches
* @param $topicId string Die ID des Themas
* @return TopicData|null Die Themendaten oder null, wenn das Thema nicht existiert
*/
public static function fromName(string $subjectId, string $topicId): TopicData|null
{
$result = new TopicData();
$subjectId = Util::removeIllegalCharacters($subjectId);
$topicId = Util::removeIllegalCharacters($topicId);
$topicsDirectory = "config/subjects/$subjectId/topics";
$topicDataDirectory = "$topicsDirectory/$topicId";
$data = Util::parseJsonFromFile("$topicDataDirectory/properties.json");
if (!isset($data)) {
return null;
}
$result->id = $topicId;
$result->subjectId = $subjectId;
if (isset($data->displayName)) {
$result->displayName = $data->displayName;
} else {
return null;
}
if (isset($data->icon)) {
$result->icon = $data->icon;
} else {
return null;
}
if (isset($data->description)) {
$result->description = $data->description;
} else {
return null;
}
if (isset($data->relatedTopics)) {
$result->relatedTopics = $data->relatedTopics;
} else {
$result->relatedTopics = array();
}
if (isset($data->files)) {
$result->files = $data->files;
} else {
$result->files = array();
}
$article = Util::readFileContent("$topicDataDirectory/article.html");
if (!isset($article)) {
$article = "Kein Erklärtext vorhanden";
}
$article = str_replace('$TOPICPATH', $topicDataDirectory, $article);
$result->article = $article;
return $result;
}
}

49
webseite/classes/Util.php Normal file
View File

@@ -0,0 +1,49 @@
<?php
/**
* Hilfsmethoden für verschiedene Aufgaben
*/
class Util
{
/**
* Entfernt alle Zeichen außer A-Z, a-z, 0-9 sowie - und _
* @param string $string Eingabe mit möglicherweise ungültigen Zeichen
* @return string Eingabestring mit allen ungültigen Zeichen entfernt
*/
static function removeIllegalCharacters(string $string): string
{
return preg_replace("/[^a-zA-Z0-9_-]/", "", $string);
}
static function readFileContent(string $filename): string|null
{
if (!file_exists($filename)) {
return null;
}
$file = fopen($filename, "r");
if (!$file) {
return null;
}
$fileContent = fread($file, filesize($filename));
if (!$fileContent) {
return null;
}
fclose($file);
return $fileContent;
}
/**
* Öffnet eine Datei und gibt JSON-Inhalte als Array zurück
* @param string $filename Dateipfad
* @return mixed Array mit Key-Value Paaren
*/
static function parseJsonFromFile(string $filename): mixed
{
$content = self::readFileContent($filename);
if (!isset($content)) {
return null;
}
return json_decode($content);
}
}

6
webseite/config/subjects/deutsch/properties.json Normal file
View File

@@ -0,0 +1,6 @@
{
"displayName": "Deutsch",
"description": "Deutsch ist rot",
"color": "#ef4444",
"icon": "fa-book"
}

46
webseite/config/subjects/deutsch/topics/adverbiale-bestimmung/article.html Normal file
View File

@@ -0,0 +1,46 @@
Adverbiale Bestimmungen sind ein wichtiger Teil eines Satzes, weil sie uns zusätzliche Informationen geben. Sie erklären, wann, wo, wie oder warum etwas passiert. Ohne adverbiale Bestimmungen wären viele Sätze unvollständig oder weniger genau. Sie sind also sehr hilfreich, um unsere Sprache klarer und lebendiger zu machen.
<br><br>
<strong>Arten von adverbialen Bestimmungen</strong>
<br><br>
Es gibt vier Hauptarten von adverbialen Bestimmungen. Lass uns jede genauer anschauen:
<br><br>
1. Adverbiale Bestimmung der Zeit (Temporal)<br>
Diese Art von adverbialer Bestimmung gibt an, wann etwas passiert. Sie beantwortet die Frage "Wann?". <br>
- Beispiel: Morgen gehe ich schwimmen. <br>
- Hier gibt "morgen" an, wann das Schwimmen stattfindet. <br>
<br>
2. Adverbiale Bestimmung des Ortes (Lokal) <br>
Diese adverbiale Bestimmung sagt uns, wo etwas geschieht. Sie beantwortet die Frage "Wo?". <br>
- Beispiel: Der Hund bellt im Garten. <br>
- "im Garten" zeigt, an welchem Ort der Hund bellt. <br>
<br>
3. Adverbiale Bestimmung der Art und Weise (Modal) <br>
Diese Art gibt an, wie etwas passiert. Sie beantwortet die Frage "Wie?". <br>
- Beispiel: Der Hund bellt laut. <br>
- "laut" gibt an, auf welche Weise der Hund bellt. <br>
<br>
4. Adverbiale Bestimmung des Grundes (Kausal) <br>
Diese adverbiale Bestimmung erklärt, warum etwas passiert. Sie beantwortet die Frage "Warum?". <br>
- Beispiel: Der Hund bellt wegen des Lärms. <br>
- "wegen des Lärms" gibt den Grund an, warum der Hund bellt. <br>
<br>
<strong>Wie erkennt man adverbiale Bestimmungen?</strong> <br>
<br>
Eine einfache Methode, um adverbiale Bestimmungen zu erkennen, ist, die Fragen "Wann?", "Wo?", "Wie?" oder "Warum?" zu stellen. Wenn eine Wortgruppe diese Fragen beantwortet, handelt es sich wahrscheinlich um eine adverbiale Bestimmung. Ein weiterer Hinweis ist, dass adverbiale Bestimmungen oft im Satz verschoben werden können, ohne dass der Satz unverständlich wird.
<br><br>
<strong>Beispiele für das Erkennen von adverbialen Bestimmungen</strong> <br><br>
- Der Lehrer erklärt am Morgen die Hausaufgaben. ("am Morgen" ist die adverbiale Bestimmung der Zeit, weil sie sagt, wann etwas passiert.)
<br>
- Die Katze schläft auf dem Sofa. ("auf dem Sofa" ist die adverbiale Bestimmung des Ortes, weil sie angibt, wo etwas passiert.)
<br>
- Der Junge rennt schnell zur Schule. ("schnell" ist die adverbiale Bestimmung der Art und Weise, weil sie beschreibt, wie er rennt.)
<br>
- Wegen des Regens bleiben wir zu Hause. ("wegen des Regens" ist die adverbiale Bestimmung des Grundes, weil sie erklärt, warum etwas passiert.)
<br><br>
<strong>Zusammenfassung</strong> <br><br>
Adverbiale Bestimmungen machen unsere Sätze detaillierter und genauer. Sie geben uns mehr Informationen darüber, wann, wo, wie oder warum etwas geschieht. Die vier Hauptarten der adverbialen Bestimmungen sind Zeit, Ort, Art und Weise und Grund. Wenn du die passenden Fragen stellst, kannst du adverbiale Bestimmungen leicht erkennen und deine eigenen Sätze damit besser machen!

BIN
webseite/config/subjects/deutsch/topics/adverbiale-bestimmung/exercise1.pdf Normal file
View File

Binary file not shown.

BIN
webseite/config/subjects/deutsch/topics/adverbiale-bestimmung/image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

11
webseite/config/subjects/deutsch/topics/adverbiale-bestimmung/properties.json Normal file
View File

@@ -0,0 +1,11 @@
{
"displayName": "Adverbiale Bestimmung",
"icon": "fa-map-pin",
"description": "Adverbiale Bestimmungen sind Satzteile, die zusätzliche Informationen über Umstände wie Zeit, Ort, Grund oder Art und Weise geben und dadurch die Handlung des Satzes genauer beschreiben.",
"relatedTopics": [
"wortarten", "vier-faelle"
],
"files": [
"exercise1.pdf"
]
}

28
webseite/config/subjects/deutsch/topics/geschichten-erzaehlen/article.html Normal file
View File

@@ -0,0 +1,28 @@
<img alt="Ein Bild" src="$TOPICPATH/img.png">
<br>
<strong>Geschichten Erzählen: Warum sie so wichtig sind</strong>
<br><br>
Hast du schon mal eine spannende Geschichte gehört und konntest es kaum erwarten zu erfahren, wie sie endet? Geschichten zu erzählen ist etwas, das Menschen schon seit vielen tausend Jahren machen. Aber warum erzählen wir überhaupt Geschichten, und was macht sie so besonders?
<br><br>
Geschichten zu erzählen ist eine der ältesten Arten, wie Menschen miteinander reden. Schon früher, als es keine Bücher oder das Internet gab, haben sich die Leute am Lagerfeuer versammelt und erzählt, was sie erlebt haben. Geschichten halfen ihnen, ihr Wissen weiterzugeben, sich gegenseitig zu unterhalten und über ihre Gefühle zu sprechen. Das ist auch heute noch so: Geschichten verbinden uns und lassen uns Neues lernen.
<br><br>
In Geschichten geht es oft um Helden, Abenteuer oder Probleme, die gelöst werden müssen. Dabei gibt es viele spannende, lustige oder traurige Momente, die uns neugierig machen. Geschichten können uns zum Lachen bringen, uns Angst machen oder uns Mut geben. Manchmal lernen wir sogar etwas Neues über die Welt oder uns selbst.
<br><br>
Um eine gute Geschichte zu erzählen, braucht man ein paar wichtige Bausteine. Erstmal braucht man eine Hauptfigur, auch Protagonist genannt. Diese Figur erlebt Abenteuer oder muss Probleme lösen. Eine Geschichte hat auch einen Anfang, der uns die Hauptfigur vorstellt, einen spannenden Mittelteil, in dem die Herausforderungen beschrieben werden, und ein Ende, in dem alles aufgelöst wird. Vielleicht hast du schon mal gemerkt, dass eine Geschichte besonders spannend wird, wenn es einen großen Konflikt oder ein Problem gibt, das gelöst werden muss.
<br><br>
Hier sind ein paar Beispiele für gute Geschichten:
<br><br>
1. Rotkäppchen: In dieser klassischen Märchengeschichte geht es um ein kleines Mädchen, das seine Großmutter besuchen möchte. Auf dem Weg trifft sie den bösen Wolf, der versucht, sie und ihre Großmutter zu täuschen. Das Abenteuer von Rotkäppchen zeigt, wie Mut und Klugheit helfen können, schwierige Situationen zu meistern.
<br><br>
2. Harry Potter: Harry ist ein Junge, der erfährt, dass er ein Zauberer ist. Er erlebt viele Abenteuer in der Zauberschule Hogwarts und muss gegen den bösen Zauberer Voldemort kämpfen. Diese Geschichte zeigt, wie wichtig Freundschaft, Mut und das Gute im Leben sind.
<br><br>
3. Der kleine Prinz: In dieser Geschichte geht es um einen kleinen Jungen, der von einem fernen Planeten kommt und viele seltsame Charaktere trifft. Der kleine Prinz lehrt uns, wie wichtig Freundschaft, Liebe und Verständnis sind.
<br><br>
4. Deine eigene Geschichte: Stell dir vor, du hast einen Tag, an dem du ein spannendes Abenteuer erlebst. Zum Beispiel könntest du dich verlaufen und dabei neue Orte entdecken. Diese kleinen Erlebnisse können in einer Geschichte spannend erzählt werden, indem du beschreibst, wie du dich gefühlt hast und welche besonderen Dinge du gesehen hast.
<br><br>
Du kannst auch selbst Geschichten erzählen! Das kann etwas sein, das du selbst erlebt hast, oder etwas, das du dir ausgedacht hast. Wichtig ist, dass du die Zuhörer mit deinen Worten mitnimmst. Verwende viele Details, beschreibe, wie sich die Figuren fühlen, und lass sie miteinander reden. So wird deine Geschichte lebendig und spannend.
<br><br>
Also, worauf wartest du noch? Fang an, deine eigenen Geschichten zu erzählen und lass andere an deinen Ideen und Abenteuern teilhaben. Geschichten haben die Macht, uns zu verändern, uns zu trösten und uns zu unterhalten – und das ist das Schöne daran!

BIN
webseite/config/subjects/deutsch/topics/geschichten-erzaehlen/exercise1.pdf Normal file
View File

Binary file not shown.

BIN
webseite/config/subjects/deutsch/topics/geschichten-erzaehlen/exercise2.pdf Normal file
View File

Binary file not shown.

BIN
webseite/config/subjects/deutsch/topics/geschichten-erzaehlen/exercise3.pdf Normal file
View File

Binary file not shown.

BIN
webseite/config/subjects/deutsch/topics/geschichten-erzaehlen/image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
webseite/config/subjects/deutsch/topics/geschichten-erzaehlen/img.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 788 KiB

11
webseite/config/subjects/deutsch/topics/geschichten-erzaehlen/properties.json Normal file
View File

@@ -0,0 +1,11 @@
{
"displayName": "Geschichten erzählen",
"icon": "fa-feather-pointed",
"description": "Das Thema \"Geschichten erzählen\" umfasst das kreative Gestalten und Vermitteln von Erlebnissen oder Fantasien durch eine spannende Handlung, interessante Charaktere und lebendige Beschreibungen, um die Zuhörer oder Leser zu fesseln.",
"relatedTopics": [
"satzglieder", "personalpronomen"
],
"files": [
"exercise1.pdf", "exercise2.pdf", "exercise3.pdf"
]
}

50
webseite/config/subjects/deutsch/topics/personalpronomen/article.html Normal file
View File

@@ -0,0 +1,50 @@
<img alt="Ein Bild" src="$TOPICPATH/img.png">
<br>
Personalpronomen sind Wörter, die wir anstelle von Namen oder anderen Nomen verwenden. Sie helfen uns, Sätze kürzer und einfacher zu machen, ohne immer wieder die gleichen Wörter zu wiederholen. Personalpronomen können Dinge, Personen oder Tiere ersetzen und machen unsere Sprache verständlicher und natürlicher. Lass uns anschauen, welche Personalpronomen es gibt und wie man sie benutzt.
<br><br>
<strong>Beispiele für Personalpronomen</strong>
<br><br>
Es gibt verschiedene Personalpronomen, je nachdem, wer oder was gemeint ist. Hier sind die wichtigsten Personalpronomen im Deutschen:
<br><br>
- Ich: Wenn man über sich selbst spricht. Beispiel: Ich gehe heute ins Kino. <br>
- Du: Wenn man jemanden direkt anspricht. Beispiel: Du hast eine schöne Jacke. <br>
- Er/ Sie/ Es: Wenn man über eine andere Person, ein Tier oder eine Sache spricht. Beispiel: Er liest ein Buch, sie spielt im Garten, es regnet gerade.
<br>
- Wir: Wenn man über sich und andere Personen zusammen spricht. Beispiel: Wir gehen später Eis essen. <br>
- Ihr: Wenn man mehrere Personen direkt anspricht. Beispiel: Ihr habt gute Arbeit geleistet. <br>
- Sie: Wenn man über mehrere Personen spricht oder wenn man jemanden höflich anspricht. Beispiel: Sie spielen heute Fußball, oder: Sie (höflich) haben eine Frage gestellt.
<br><br>
<strong>Wann benutzt man Personalpronomen?</strong>
<br><br>
Personalpronomen benutzen wir, damit wir nicht ständig die gleichen Namen oder Nomen wiederholen müssen. Stell dir vor, du erzählst eine Geschichte über deinen Freund Max. Ohne Personalpronomen würde das so klingen:
<br>
- Max geht zur Schule. Max hat heute seine Lieblingshose an. Max freut sich auf den Sportunterricht.
<br><br>
Das ist ziemlich wiederholend, oder? Mit Personalpronomen klingt es viel besser:
<br>
- Max geht zur Schule. Er hat heute seine Lieblingshose an. Er freut sich auf den Sportunterricht.
<br><br>
<strong>Übersicht der Personalpronomen</strong>
<br>
Hier sind die Personalpronomen für die verschiedenen Personen:
<br>
- 1. Person Singular: ich <br>
- 2. Person Singular: du <br>
- 3. Person Singular: er, sie, es <br>
- 1. Person Plural: wir <br>
- 2. Person Plural: ihr <br>
- 3. Person Plural: sie <br>
- Höflichkeitsform: Sie (immer großgeschrieben)
<br><br>
<strong>Beispiele in Sätzen</strong>
<br><br>
- Ich mag Schokolade. <br>
- Du bist mein bester Freund. <br>
- Er spielt gerne Fußball, während sie lieber tanzt. <br>
- Wir machen zusammen Hausaufgaben. <br>
- Ihr seid heute sehr leise. <br>
- Sie (Plural) haben viel Spaß im Park. <br>
- Sie (Höflichkeitsform) sind sehr nett.
<br><br>
Personalpronomen sind sehr hilfreich, weil sie die Sprache lebendiger machen und dafür sorgen, dass wir nicht immer wieder das gleiche Wort benutzen müssen. Wenn du die Personalpronomen gut kennst, kannst du Sätze abwechslungsreicher und verständlicher gestalten!

BIN
webseite/config/subjects/deutsch/topics/personalpronomen/exercise1.pdf Normal file
View File

Binary file not shown.

BIN
webseite/config/subjects/deutsch/topics/personalpronomen/image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
webseite/config/subjects/deutsch/topics/personalpronomen/img.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 130 KiB

11
webseite/config/subjects/deutsch/topics/personalpronomen/properties.json Normal file
View File

@@ -0,0 +1,11 @@
{
"displayName": "Personalpronomen",
"icon": "fa-person",
"description": "Personalpronomen sind Wörter, die anstelle von Personen oder Dingen verwendet werden, wie zum Beispiel \"ich\", \"du\", \"er\", \"sie\" oder \"es\", um Wiederholungen zu vermeiden und Sätze flüssiger zu gestalten.",
"relatedTopics": [
"wortarten", "geschichten-erzaehlen"
],
"files": [
"exercise1.pdf"
]
}

51
webseite/config/subjects/deutsch/topics/satzglieder/article.html Normal file
View File

@@ -0,0 +1,51 @@
Sätze bestehen aus verschiedenen Teilen, die man Satzglieder nennt. Satzglieder sind Gruppen von Wörtern, die im Satz zusammengehören und eine bestimmte Funktion haben. Sie lassen sich im Satz verschieben, ohne dass der Sinn verloren geht. Die wichtigsten Satzglieder sind Subjekt, Prädikat, Objekt und adverbiale Bestimmungen. Lass uns die Satzglieder genauer anschauen und mit Beispielen verstehen, wie sie funktionieren.
<br><br>
1. <strong>Subjekt</strong> <br>
Das Subjekt ist derjenige oder dasjenige, das etwas tut oder von dem etwas ausgesagt wird. Es steht im Nominativ und beantwortet die Frage "Wer oder was?".
<br>
- Beispiel: Der Hund bellt. <br>
- Hier ist "der Hund" das Subjekt, weil es die Handlung (bellen) ausführt. <br>
<br>
2. <strong>Prädikat</strong> <br>
Das Prädikat ist das Satzglied, das sagt, was passiert oder was getan wird. Es besteht meistens aus einem Verb. <br>
- Beispiel: Der Hund bellt. <br>
- "bellt" ist hier das Prädikat, weil es die Handlung beschreibt. <br>
<br>
3. <strong>Objekt</strong> <br>
Das Objekt ist das Satzglied, das angibt, auf wen oder was sich die Handlung bezieht. Es gibt verschiedene Arten von Objekten, zum Beispiel:
<br>
- Akkusativobjekt (Wen-Fall): Es beantwortet die Frage "Wen oder was?". <br>
- Beispiel: Der Hund jagt die Katze. <br>
- "die Katze" ist das Akkusativobjekt, weil es das Ziel der Handlung ist. <br>
- Dativobjekt (Wem-Fall): Es beantwortet die Frage "Wem?". <br>
- Beispiel: Ich gebe dem Kind einen Ball. <br>
- "dem Kind" ist das Dativobjekt, weil es angibt, wem etwas gegeben wird. <br>
<br>
4. <strong>Adverbiale Bestimmungen</strong> <br>
Adverbiale Bestimmungen geben uns zusätzliche Informationen darüber, wann, wo, wie oder warum etwas passiert. Es gibt verschiedene Arten von adverbialen Bestimmungen:
<br>
- Zeit (Wann?): Beispiel: Morgen gehe ich schwimmen. <br>
- Ort (Wo?): Beispiel: Der Hund bellt im Garten. <br>
- Art und Weise (Wie?): Beispiel: Der Hund bellt laut. <br>
- Grund (Warum?): Beispiel: Der Hund bellt wegen des Lärms. <br>
<br>
<strong>Wie erkenne ich Satzglieder?</strong> <br>
<br>
Satzglieder lassen sich im Satz verschieben. Das bedeutet, dass wir die Reihenfolge der Satzglieder ändern können, ohne dass der Satz unverständlich wird. Zum Beispiel:
<br>
- Der Hund bellt laut im Garten. <br>
- Laut im Garten bellt der Hund. <br>
- Im Garten bellt der Hund laut. <br>
<br>
Alle diese Varianten sind möglich, weil die Satzglieder ihre Bedeutung behalten, auch wenn sie die Position wechseln. Das Verschieben hilft uns, die Satzglieder zu erkennen.
<br><br>
<strong>Zusammenfassung der Satzglieder</strong> <br>
- Subjekt: Wer oder was tut etwas? (z.B. Der Lehrer erklärt den Stoff.) <br>
- Prädikat: Was passiert oder wird getan? (z.B. Der Lehrer erklärt den Stoff.) <br>
- Objekt: Auf wen oder was bezieht sich die Handlung? (z.B. Der Lehrer erklärt den Schülern den Stoff.) <br>
- Adverbiale Bestimmungen: Wann, wo, wie oder warum passiert etwas? (z.B. Der Lehrer erklärt den Stoff am Vormittag.)
<br><br>
Wenn du die verschiedenen Satzglieder kennst, kannst du Sätze besser verstehen und auch selbst klarere Sätze bilden. Satzglieder helfen uns, die Struktur eines Satzes zu erkennen und unsere Sprache vielseitig und genau zu gestalten!

BIN
webseite/config/subjects/deutsch/topics/satzglieder/exercise1.pdf Normal file
View File

Binary file not shown.

BIN
webseite/config/subjects/deutsch/topics/satzglieder/image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

11
webseite/config/subjects/deutsch/topics/satzglieder/properties.json Normal file
View File

@@ -0,0 +1,11 @@
{
"displayName": "Satzglieder",
"icon": "fa-link",
"description": "Satzglieder sind die Bausteine eines Satzes, die jeweils eine bestimmte Funktion erfüllen, wie Subjekt, Prädikat, Objekt oder adverbiale Bestimmung, und sich gemeinsam verschieben lassen, ohne die grammatische Korrektheit des Satzes zu verändern.",
"relatedTopics": [
"wortarten", "vier-faelle"
],
"files": [
"exercise1.pdf"
]
}

36
webseite/config/subjects/deutsch/topics/vier-faelle/article.html Normal file
View File

@@ -0,0 +1,36 @@
Im Deutschen gibt es vier Fälle, die man auch "Kasus" nennt. Sie helfen uns zu verstehen, welche Rolle ein Nomen oder Pronomen im Satz hat. Die vier Fälle sind Nominativ, Genitiv, Dativ und Akkusativ. Lass uns jeden Fall einzeln anschauen und mit einfachen Beispielen verstehen, wie sie funktionieren.
<br><br>
1. <strong>Nominativ (Wer-Fall)</strong> <br>
Der Nominativ ist der Fall des Subjekts, also die Person oder Sache, die etwas tut. Du kannst die Frage "Wer oder was?" stellen, um den Nominativ zu finden.
<br>
- Beispiel: Der Hund bellt. <br>
- Hier ist "der Hund" das Subjekt, das etwas tut. Deshalb steht es im Nominativ.
<br><br>
2. <strong>Genitiv (Wessen-Fall)</strong> <br>
Der Genitiv zeigt, wem etwas gehört. Du kannst die Frage "Wessen?" stellen, um den Genitiv zu finden. <br>
- Beispiel: Das ist das Haus des Mannes. <br>
- Hier zeigt "des Mannes", dass das Haus dem Mann gehört.
<br><br>
3. <strong>Dativ (Wem-Fall)</strong> <br>
Der Dativ beschreibt, wem etwas gegeben wird oder für wen etwas passiert. Du stellst die Frage "Wem?". <br>
- Beispiel: Ich gebe dem Kind einen Ball. <br>
- Hier steht "dem Kind" im Dativ, weil es zeigt, wem der Ball gegeben wird.
<br><br>
4. <strong>Akkusativ (Wen-Fall)</strong> <br>
Der Akkusativ ist der Fall des direkten Objekts, also das, worauf sich die Handlung bezieht. Du stellst die Frage "Wen oder was?".
<br>
- Beispiel: Der Hund sieht die Katze. <br>
- Hier ist "die Katze" das direkte Objekt, weil sie das ist, was gesehen wird.
<br><br>
<strong>Zusammenfassung der Fälle mit Fragen</strong>
<br><br>
- Nominativ (Wer oder was?): Das Subjekt des Satzes. <br>
- Beispiel: Der Lehrer erklärt den Stoff. <br>
- Genitiv (Wessen?): Zeigt Besitz oder Zugehörigkeit. <br>
- Beispiel: Das Fahrrad des Jungen ist neu. <br>
- Dativ (Wem?): Das indirekte Objekt, das von der Handlung betroffen ist. <br>
- Beispiel: Sie schenkt dem Freund ein Buch. <br>
- Akkusativ (Wen oder was?): Das direkte Objekt der Handlung. <br>
- Beispiel: Der Junge spielt den Ball.
<br><br>
Diese vier Fälle helfen uns dabei, Sätze richtig zu bilden und zu verstehen, wie die verschiedenen Teile eines Satzes zusammengehören. Wenn du die Fragen zu jedem Fall im Kopf behältst, kannst du ganz leicht erkennen, welcher Fall verwendet werden muss!

BIN
webseite/config/subjects/deutsch/topics/vier-faelle/exercise1.pdf Normal file
View File

Binary file not shown.

BIN
webseite/config/subjects/deutsch/topics/vier-faelle/exercise2.pdf Normal file
View File

Binary file not shown.

BIN
webseite/config/subjects/deutsch/topics/vier-faelle/image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

11
webseite/config/subjects/deutsch/topics/vier-faelle/properties.json Normal file
View File

@@ -0,0 +1,11 @@
{
"displayName": "Vier Fälle",
"icon": "fa-4",
"description": "Die vier Fälle im Deutschen - Nominativ, Genitiv, Dativ und Akkusativ - beschreiben die verschiedenen grammatischen Funktionen eines Nomens oder Pronomens im Satz, wie Subjekt, Besitz, indirektes Objekt oder direktes Objekt.",
"relatedTopics": [
"satzglieder"
],
"files": [
"exercise1.pdf", "exercise2.pdf"
]
}

33
webseite/config/subjects/deutsch/topics/wortarten/article.html Normal file
View File

@@ -0,0 +1,33 @@
<img alt="Ein Bild" src="$TOPICPATH/img.png">
<br>
Wenn wir sprechen oder schreiben, benutzen wir verschiedene Arten von Wörtern, die unterschiedliche Aufgaben haben. Diese Arten von Wörtern nennt man Wortarten. Jede Wortart hilft uns, Sätze zu bilden und unsere Gedanken klar auszudrücken. Lass uns die wichtigsten Wortarten anschauen, die wir im Deutschen verwenden.
<br><br>
1. <strong>Nomen (Namenwörter)</strong>
Nomen sind Wörter, die Dinge, Personen, Tiere oder Orte benennen. Zum Beispiel: "Haus", "Hund", "Schule" oder "Freundin". Man erkennt Nomen daran, dass sie großgeschrieben werden. Sie sind die Hauptfiguren in einem Satz, weil sie das Thema angeben, worüber wir sprechen. Ein Beispiel: "Der Hund läuft schnell." Hier ist "Hund" das Nomen.
<br><br>
2. <strong>Verben (Tunwörter)</strong>
Verben sind Wörter, die eine Handlung oder einen Zustand beschreiben. Sie zeigen, was jemand tut oder was passiert. Beispiele sind: "laufen", "essen", "schlafen" oder "denken". Verben sind wichtig, denn sie bringen Bewegung in den Satz. Ein Beispiel: "Die Katze schläft auf dem Sofa." Hier ist "schläft" das Verb.
<br><br>
3. <strong>Adjektive (Eigenschaftswörter)</strong>
Adjektive beschreiben, wie etwas ist. Sie geben mehr Informationen über ein Nomen. Zum Beispiel: "groß", "schnell", "fröhlich" oder "lecker". Adjektive helfen uns, uns Dinge besser vorzustellen, weil sie Details liefern. Ein Beispiel: "Das große Haus steht am Ende der Straße." Hier beschreibt "groß" das Haus.
<br><br>
4. <strong>Pronomen (Fürwörter)</strong>
Pronomen ersetzen Nomen, damit wir nicht immer das gleiche Wort wiederholen müssen. Beispiele sind: "ich", "du", "er", "sie", "es", "wir" oder "mein". Sie machen unsere Sätze abwechslungsreicher und verständlicher. Ein Beispiel: "Anna ist meine Freundin. Sie ist sehr nett." Hier ersetzt "sie" das Nomen "Anna".
<br><br>
5. <strong>Artikel (Begleiter)</strong>
Artikel sind kleine Wörter, die vor einem Nomen stehen und uns sagen, ob wir über etwas Bestimmtes oder etwas Allgemeines sprechen. Zum Beispiel: "der", "die", "das", "ein", "eine". Artikel helfen uns zu verstehen, worum es genau geht. Ein Beispiel: "Das Auto ist rot." Hier ist "das" der Artikel, der das Nomen "Auto" begleitet.
<br><br>
6. <strong>Adverbien (Umstandswörter)</strong>
Adverbien geben mehr Informationen über ein Verb, ein Adjektiv oder ein anderes Adverb. Sie erklären zum Beispiel, wann, wo oder wie etwas passiert. Beispiele sind: "heute", "draußen", "schnell" oder "sehr". Adverbien machen Sätze lebendiger und genauer. Ein Beispiel: "Der Junge rennt schnell." Hier erklärt "schnell", wie der Junge rennt.
<br><br>
7. <strong>Präpositionen (Verhältniswörter)</strong>
Präpositionen zeigen die Beziehung zwischen Dingen. Sie sagen uns, wo etwas ist oder in welchem Verhältnis etwas steht. Zum Beispiel: "auf", "unter", "neben", "vor" oder "hinter". Diese Wörter helfen uns zu verstehen, wo etwas ist. Ein Beispiel: "Der Ball liegt unter dem Tisch." Hier zeigt "unter" die Position des Balls an.
<br><br>
8. <strong>Konjunktionen (Bindewörter)</strong>
Konjunktionen verbinden Wörter oder Sätze miteinander. Beispiele sind: "und", "oder", "weil", "aber". Sie helfen uns, längere Sätze zu bilden und unsere Gedanken miteinander zu verbinden. Ein Beispiel: "Ich mag Äpfel und Bananen." Hier verbindet "und" die beiden Nomen "Äpfel" und "Bananen".
<br><br>
9. <strong>Interjektionen (Ausrufewörter)</strong>
Interjektionen sind kurze Ausrufe, die unsere Gefühle ausdrücken. Zum Beispiel: "Oh!", "Aua!", "Wow!" oder "Hey!". Sie bringen Emotionen in unsere Sprache und machen sie lebendiger. Ein Beispiel: "Wow! Das war ein tolles Spiel!" Hier drückt "Wow!" Begeisterung aus.
<br><br>
Jede Wortart hat ihre eigene Aufgabe, und zusammen bilden sie die Sprache, die wir jeden Tag benutzen. Wenn wir die verschiedenen Wortarten kennen, können wir bessere Sätze bilden und uns klarer ausdrücken. Also, wenn du das nächste Mal einen Satz schreibst, schau mal, welche Wortarten du benutzt hast – sie sind die Bausteine, die alles zusammenhalten!

BIN
webseite/config/subjects/deutsch/topics/wortarten/exercise1.pdf Normal file
View File

Binary file not shown.

BIN
webseite/config/subjects/deutsch/topics/wortarten/image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
webseite/config/subjects/deutsch/topics/wortarten/img.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 297 KiB

11
webseite/config/subjects/deutsch/topics/wortarten/properties.json Normal file
View File

@@ -0,0 +1,11 @@
{
"displayName": "Wortarten",
"icon": "fa-sitemap",
"description": "Wortarten sind Kategorien, in die Wörter anhand ihrer grammatischen Funktion und Bedeutung eingeteilt werden, wie zum Beispiel Nomen, Verben, Adjektive und Adverbien.",
"relatedTopics": [
"satzglieder", "adverbiale-bestimmung", "personalpronomen"
],
"files": [
"exercise1.pdf"
]
}

6
webseite/config/subjects/englisch/properties.json Normal file
View File

@@ -0,0 +1,6 @@
{
"displayName": "Englisch",
"description": "He she it das s muss mit!",
"color": "#17B750",
"icon": "fa-language"
}

9
webseite/config/subjects/englisch/topics/LoremIpsum/article.html Normal file
View File

@@ -0,0 +1,9 @@
<img alt="Ein Bild" src="$TOPICPATH/img.png">
<br>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<br><br>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
<br><br>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
<br>
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer

BIN
webseite/config/subjects/englisch/topics/LoremIpsum/exercise1.pdf Normal file
View File

Binary file not shown.

BIN
webseite/config/subjects/englisch/topics/LoremIpsum/image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
webseite/config/subjects/englisch/topics/LoremIpsum/img.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 297 KiB

11
webseite/config/subjects/englisch/topics/LoremIpsum/properties.json Normal file
View File

@@ -0,0 +1,11 @@
{
"displayName": "Lorem Ipsum",
"icon": "fa-sitemap",
"description": "Lorem Ipsum",
"relatedTopics": [
],
"files": [
"exercise1.pdf"
]
}

6
webseite/config/subjects/mathe/properties.json Normal file
View File

@@ -0,0 +1,6 @@
{
"displayName": "Mathe",
"description": "Mathe ist blau",
"color": "#3b82f6",
"icon": "fa-square-root-alt"
}

46
webseite/config/subjects/mathe/topics/bruchrechnung/article.html Normal file
View File

@@ -0,0 +1,46 @@
Brüche werden verwendet, um Anteile an einem Ganzen darzustellen. So kann es vorkommen, dass nur ein Teil einer Pizza gegessen wird oder nur ein Teil einer Flasche getrunken wird. In der Mathematik wird ein solcher Anteil durch einen Bruch dargestellt. In der folgenden Grafik wird gezeigt, wie 3 von 7 Kästchen gelb markiert werden, und wie der entsprechende Bruch dargestellt wird.
<br><br> Ein Bruch setzt sich aus einem Zähler, einem Bruchstrich und einem Nenner zusammen. Der Zähler wird über dem Bruchstrich geschrieben, der Nenner darunter.
<br><br>
$$
\begin{array}{c@{\quad}l}
3 & \text{Zahler} \\
- & \text{Bruchstrich} \\
7 & \text{Nenner} \\
\end{array}
$$
<strong>Brüche addieren und subtrahieren</strong> <br><br> Brüche mit gleichen Nennern (= gleichnamige Brüche) werden addiert, indem die Zähler addiert und der Nenner beibehalten wird. So werden aus 2 von 6 Stücken plus 3 von 6 Stücken insgesamt 5 von 6 Stücken.
$$
\frac{2}{6} + \frac{3}{6} = \frac{5}{6}
$$
<br><br>
Zur Subtraktion gleichnamiger Brüche werden die Zähler subtrahiert und der Nenner beibehalten. Wenn von 5 von 6 Stücken 3 von 6 Stücke weggenommen werden, bleiben 2 der 6 Stücke übrig.
$$
\frac{5}{6} - \frac{3}{6} = \frac{2}{6}
$$
<br><br>
<strong>Brüche multiplizieren und dividieren</strong>
<br><br>
Brüche werden multipliziert, indem die Zähler und Nenner jeweils miteinander multipliziert werden: Zähler mal Zähler und Nenner mal Nenner. Beim Bruchrechnen mit der Grundrechenart Multiplikation spielt es keine Rolle, ob die Nenner gleich oder verschieden sind.
$$
\frac{2}{9} \cdot \frac{5}{9} = \frac{10}{81}
$$
Bei der Multiplikation von Brüchen mit unterschiedlichen Nennern (= ungleichnamige Brüche) werden ebenfalls die Zähler und Nenner jeweils miteinander multipliziert. Im Gegensatz zur Addition müssen die Brüche dabei nicht auf einen gemeinsamen Nenner gebracht werden.
$$
\frac{4}{5} \cdot \frac{2}{3} = \frac{8}{15}
$$
Die Division von Brüchen basiert auf der Multiplikation von Brüchen. Um zwei Brüche zu dividieren, wird aus der Division eine Multiplikation gemacht. Das Geteiltzeichen wird durch ein Malzeichen ersetzt. Dafür wird beim zweiten Bruch der Zähler und der Nenner vertauscht.
$$
\frac{5}{8} : \frac{4}{7} = \frac{5}{8} \cdot \frac{7}{4} = \frac{35}{32}
$$

BIN
webseite/config/subjects/mathe/topics/bruchrechnung/exercise1.pdf Normal file
View File

Binary file not shown.

BIN
webseite/config/subjects/mathe/topics/bruchrechnung/exercise2.pdf Normal file
View File

Binary file not shown.

BIN
webseite/config/subjects/mathe/topics/bruchrechnung/image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

11
webseite/config/subjects/mathe/topics/bruchrechnung/properties.json Normal file
View File

@@ -0,0 +1,11 @@
{
"displayName": "Bruchrechnung",
"icon": "fa-chart-pie",
"description": "Die Bruchrechnung ist ein Teil der Mathematik, der das Rechnen mit Brüchen beinhaltet, also das Teilen eines Ganzen in gleich große Teile, und umfasst Operationen wie Addition, Subtraktion, Multiplikation und Division von Brüchen.",
"relatedTopics": [
"schriftliches-multiplizieren", "schriftliches-dividieren", "punkt-vor-strichrechnung", "rechnen-mit-klammern"
],
"files": [
"exercise1.pdf", "exercise2.pdf"
]
}

33
webseite/config/subjects/mathe/topics/punkt-vor-strichrechnung/article.html Normal file
View File

@@ -0,0 +1,33 @@
Diese Regel besagt, dass zuerst Multiplikationen und Divisionen und danach Additionen oder Subtraktionen durchgeführt werden. Anhand eines Beispiels wird nun gezeigt, wie diese Regel angewendet wird (und wie Fehler dabei passieren können).
<br><br>
a) 5 + 2 · 4 = 5 + 8 = 13 (richtige Lösung) <br>
b) 5 + 2 · 4 = 7 · 4 = 28 (falsche Lösung) <br>
<br>
<strong>Erklärung: </strong><br>
In beiden Fällen wird das Ergebnis der Aufgabe 5 + 2 · 4 gesucht. Im Fall a) wurde die Aufgabe richtig gelöst, indem zuerst die Multiplikation berechnet wurde. Das ergibt 2 · 4 = 8. Anschließend wurde 5 + 8 = 13 gerechnet. Wie zu sehen ist, wurde erst die Multiplikation ausgeführt, bevor die beiden Zahlen addiert wurden. Im Fall b) wurde jedoch ein Fehler gemacht, da hier erst addiert und dann multipliziert wurde. Das Ergebnis wurde dadurch falsch berechnet
<br><br>
<strong>Noch eine kleine Anmerkung:</strong> <br>
Links des "=" muss immer dasselbe stehen wie rechts des "=". Wenn so gerechnet wird, wie es in den Beispielen gezeigt wird, passiert das automatisch. Dies wird hier erwähnt, weil es in einem späteren Kapitel – in den sogenannten Gleichungen mit Unbekannten – noch genauer besprochen wird. Zu diesem Zeitpunkt sollte jedoch einfach versucht werden, den Beispielen zu folgen und das Konzept in den Übungsaufgaben selbst anzuwenden.
<br><br>
Das vorherige Beispiel sollte noch einmal durchgegangen werden. Anschließend folgen eine Reihe weiterer Beispiele. Jedes sollte genau angesehen werden, um die Berechnung zu verfolgen.
<br><br>
Auch hier gilt: Zuerst Multiplikation oder Division, danach Addition oder Subtraktion.
<br><br>
Aufgabe: 8 · 3 + 2 = ? <br>
Lösung: 8 · 3 + 2 = 24 + 2 = 26 <br> <br>
Aufgabe: 2 + 3 · 4 = ? <br>
Lösung: 2 + 3 · 4 = 2 + 12 = 14 <br> <br>
Aufgabe: 6 : 3 + 2 = ? <br>
Lösung: 6 : 3 + 2 = 2 + 2 = 4 <br> <br>
Aufgabe: 5 - 8 : 4 = ? <br>
Lösung: 5 - 8 : 4 = 5 - 2 = 3 <br> <br>
Aufgabe: 5 · 3 + 8 : 4 = ? <br>
Lösung: 5 · 3 + 8 : 4 = 15 + 2 = 17 <br> <br>
<strong>Erläuterungen:</strong> <br>
In den ersten vier Beispielen wurde konsequent die Punkt-vor-Strich-Regel beachtet. Es wurde zuerst multipliziert oder dividiert und danach addiert oder subtrahiert. Beim letzten Beispiel mussten sowohl eine Multiplikation als auch eine Division durchgeführt werden. Es spielt dabei keine Rolle, in welcher Reihenfolge diese beiden Operationen ausgeführt werden – wichtig ist nur, dass die Addition aufgrund der Punkt-vor-Strich-Regel am Ende berechnet wird. Das bedeutet also, dass erst 5 · 3 sowie 8 : 4 berechnet werden müssen und danach die beiden Ergebnisse addiert werden.
<br><br>

BIN
webseite/config/subjects/mathe/topics/punkt-vor-strichrechnung/exercise1.pdf Normal file
View File

Binary file not shown.

BIN
webseite/config/subjects/mathe/topics/punkt-vor-strichrechnung/image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

11
webseite/config/subjects/mathe/topics/punkt-vor-strichrechnung/properties.json Normal file
View File

@@ -0,0 +1,11 @@
{
"displayName": "Punkt- vor Strichrechnung",
"icon": "fa-plus-minus",
"description": "Die Regel \"Punkt vor Strichrechnung\" besagt, dass bei mathematischen Berechnungen Multiplikation und Division immer vor Addition und Subtraktion ausgeführt werden müssen, um das richtige Ergebnis zu erhalten.",
"relatedTopics": [
"rechnen-mit-klammern", "bruchrechnung"
],
"files": [
"exercise1.pdf"
]
}

91
webseite/config/subjects/mathe/topics/rechnen-mit-einheiten/article.html Normal file
View File

@@ -0,0 +1,91 @@
Stell dir vor, du möchtest eine Reise planen und musst wissen, wie weit es von deinem Zuhause bis zur Schule ist. Dafür benutzt du Kilometer oder Meter, um die Entfernung zu messen. Diese Dinge nennen wir Einheiten – sie helfen uns, Längen, Gewichte und Zeiten zu verstehen und zu vergleichen. Ohne Einheiten wüssten wir nicht, wie groß, schwer oder lang etwas ist. Das wäre ziemlich unpraktisch, wenn wir miteinander sprechen wollen!
<br><br>
Einheiten erleichtern unseren Alltag, egal ob wir einkaufen, kochen, reisen oder Sport machen. Das Rechnen mit Einheiten ist wichtig, damit wir bessere Entscheidungen treffen und genaue Informationen geben können. In den nächsten Kapiteln schauen wir uns die verschiedenen Einheiten genauer an und lernen, wie man sie richtig umrechnet.
<br><br>
<strong>Länge</strong>
<br><br>
Wichtige Einheiten für Längen <br>
- Meter (m): Das ist die Basiseinheit für Längen. Meter ist die Grundlage, auf der alle anderen Längeneinheiten aufbauen.
<br>
- Zentimeter (cm): 1 Meter sind 100 Zentimeter. Zentimeter benutzt man oft für kleinere Sachen, wie Bücher, Blätter oder die Höhe eines Stuhls.
<br>
- Kilometer (km): 1 Kilometer sind 1000 Meter. Kilometer werden verwendet, um große Entfernungen zu messen, wie von einer Stadt zur nächsten oder für eine lange Wanderung.
<br><br>
Wenn du Längen messen möchtest, wie den Weg zur Schule oder die Länge deines Zimmers, benutzt du oft Meter oder Zentimeter. Für größere Strecken, wie von einer Stadt zur nächsten, benutzt man Kilometer. Es gibt auch noch Millimeter, die noch kleiner sind: 1 Meter hat 1000 Millimeter. Millimeter werden verwendet, wenn man ganz genau messen muss, wie zum Beispiel die Dicke von Papier oder die Größe kleiner Bauteile.
<br>
<img alt="Ein Bild" src="$TOPICPATH/laengen.png">
<br>
Umrechnen von Längeneinheiten <br>
- Von Kilometern zu Metern: Multipliziere die Kilometerzahl mit 1000. <br>
- Beispiel: 3 km = 3 × 1000 m = 3000 m <br>
- Von Metern zu Zentimetern: Multipliziere die Meterzahl mit 100. <br>
- Beispiel: 5 m = 5 × 100 cm = 500 cm <br>
- Von Zentimetern zu Metern: Teile die Zentimeter durch 100. <br>
- Beispiel: 200 cm = 200 ÷ 100 m = 2 m <br>
<br>
Beim Umrechnen von Längen ist es wichtig zu wissen, wann man multiplizieren und wann man dividieren muss. Das hilft dir, die richtige Einheit zu verwenden. Manchmal hilft es auch, sich die Umrechnungszahlen wie 1000 oder 100 auf kleine Notizzettel zu schreiben, damit man sie sich besser merken kann. So machst du keine Fehler beim Rechnen.
<br><br>
Es kann auch nützlich sein, dir vorzustellen, wie lang die Einheiten wirklich sind. Ein Kilometer ist ungefähr so lang wie 10 Fußballfelder hintereinander, während ein Meter ungefähr so lang ist wie ein großer Tisch. Das gibt dir ein besseres Gefühl für die verschiedenen Längen.
<br><br><br>
<strong>Gewicht</strong>
<br><br>
Wichtige Einheiten für Gewicht <br>
- Gramm (g): Das ist die Basiseinheit für Gewicht. Gramm werden oft für leichtere Dinge verwendet, wie Lebensmittel oder Briefe.
<br>
- Kilogramm (kg): 1 Kilogramm sind 1000 Gramm. Man verwendet Kilogramm, um das Gewicht von Menschen oder größeren Dingen anzugeben.
<br>
- Tonne (t): 1 Tonne sind 1000 Kilogramm. Tonnen benutzt man, wenn etwas sehr schwer ist, wie Lastwagen, große Möbel oder sogar Elefanten.
<br>
Mit Gewicht misst man, wie schwer etwas ist. Zum Beispiel wiegst du vielleicht 35 Kilogramm, während ein Apfel ungefähr 200 Gramm wiegt. Auch beim Backen ist das Gewicht sehr wichtig, damit du die richtige Menge an Zutaten verwendest. Wenn du zum Beispiel zu viel Mehl nimmst, wird dein Teig zu trocken.
<br>
<img alt="Ein Bild" src="$TOPICPATH/gewichte.png">
<br>
Umrechnen von Gewichtseinheiten <br>
- Von Kilogramm zu Gramm: Multipliziere die Kilogrammzahl mit 1000. <br>
- Beispiel: 4 kg = 4 × 1000 g = 4000 g <br>
- Von Gramm zu Kilogramm: Teile die Gramm durch 1000. <br>
- Beispiel: 2500 g = 2500 ÷ 1000 kg = 2,5 kg <br>
- Von Tonnen zu Kilogramm: Multipliziere die Zahl der Tonnen mit 1000. <br>
- Beispiel: 2 t = 2 × 1000 kg = 2000 kg <br>
<br>
Auch beim Backen oder Kochen ist es wichtig, die richtigen Gewichtseinheiten zu kennen. So kannst du die genaue Menge an Zutaten abwiegen, die du brauchst. Wenn du zum Beispiel Kuchen backen möchtest, ist es entscheidend, dass du das richtige Verhältnis von Mehl, Zucker und Butter verwendest, damit der Kuchen lecker und saftig wird.
<br>
Wenn du mit sehr großen oder sehr kleinen Gewichten rechnest, hilft es manchmal, sich vorzustellen, wie viel diese wiegen. Ein Gramm wiegt ungefähr so viel wie eine Büroklammer, ein Kilogramm so viel wie eine volle Wasserflasche, und eine Tonne entspricht ungefähr dem Gewicht eines kleinen Autos.
<br><br><br>
<strong>Zeit</strong>
<br><br>
Wichtige Einheiten für Zeit <br>
- Sekunden (s): Das ist die Basiseinheit für Zeit. Sekunden nutzt man, um kurze Zeitspannen zu messen, wie das Zähneputzen oder die Dauer eines kurzen Laufs.
<br>
- Minuten (min): 1 Minute sind 60 Sekunden. Minuten werden oft verwendet, um Dinge wie das Kochen eines Eies oder die Dauer eines Telefonats zu messen.
<br>
- Stunden (h): 1 Stunde sind 60 Minuten. Stunden braucht man für längere Zeiträume, wie zum Beispiel den Schulunterricht oder das Schlafen.
<br>
<br>
Zeit hilft uns, unseren Tag zu planen und zu verstehen, wie lange etwas dauert. Zum Beispiel dauert es vielleicht 45 Minuten, bis du zur Schule kommst, oder eine Stunde, um einen Kuchen zu backen. Um den Tag zu organisieren, ist es wichtig, die verschiedenen Zeiteinheiten zu verstehen. Ein Tag hat 24 Stunden, und eine Woche besteht aus 7 Tagen.
<br>
<img alt="Ein Bild" src="$TOPICPATH/zeit.png">
<br>
Umrechnen von Zeiteinheiten <br>
- Von Stunden zu Minuten: Multipliziere die Stundenzahl mit 60. <br>
- Beispiel: 2 h = 2 × 60 min = 120 min <br>
- Von Minuten zu Sekunden: Multipliziere die Minuten mit 60. <br>
- Beispiel: 5 min = 5 × 60 s = 300 s <br>
- Von Sekunden zu Minuten: Teile die Sekunden durch 60. <br>
- Beispiel: 180 s = 180 ÷ 60 min = 3 min <br>
<br>
Es ist hilfreich, die Zeit richtig umzurechnen, damit du genau planen kannst, wie lange etwas dauert. Wenn du weißt, wie viele Minuten oder Sekunden du für eine Aufgabe brauchst, kannst du deinen Tag besser einteilen und die Zeit effizient nutzen.
<br>
Es kann auch praktisch sein, eine Uhr oder einen Timer zu benutzen, um die Zeit zu messen. So weißt du genau, wie lange du für verschiedene Aktivitäten brauchst und kannst besser einschätzen, wie lange du für deine Hausaufgaben oder andere Aufgaben benötigst.
<br><br>
Mit ein bisschen Übung wirst du immer besser darin, Längen, Gewichte oder Zeiten ganz leicht umzurechnen. Je öfter du übst, desto sicherer wirst du und kannst auch schwierige Aufgaben meistern. Rechnen mit Einheiten ist eine wichtige Grundlage für viele Bereiche, wie Naturwissenschaften oder alltägliche Dinge. Viel Spaß beim Üben!

BIN
webseite/config/subjects/mathe/topics/rechnen-mit-einheiten/exercise1.pdf Normal file
View File

Binary file not shown.

BIN
webseite/config/subjects/mathe/topics/rechnen-mit-einheiten/exercise2.pdf Normal file
View File

Binary file not shown.

BIN
webseite/config/subjects/mathe/topics/rechnen-mit-einheiten/gewichte.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

BIN
webseite/config/subjects/mathe/topics/rechnen-mit-einheiten/image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
webseite/config/subjects/mathe/topics/rechnen-mit-einheiten/laengen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 159 KiB

11
webseite/config/subjects/mathe/topics/rechnen-mit-einheiten/properties.json Normal file
View File

@@ -0,0 +1,11 @@
{
"displayName": "Rechnen mit Einheiten",
"icon": "fa-clock",
"description": "Rechnen mit Einheiten bedeutet, Größen mit verschiedenen Maßeinheiten wie Meter, Kilogramm oder Liter rechnerisch zu verarbeiten, dabei die Einheiten korrekt umzurechnen und sicherzustellen, dass das Ergebnis in der richtigen Einheit angegeben wird.",
"relatedTopics": [
"schriftliches-dividieren", "bruchrechnung"
],
"files": [
"exercise1.pdf", "exercise2.pdf"
]
}

BIN
webseite/config/subjects/mathe/topics/rechnen-mit-einheiten/zeit.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

43
webseite/config/subjects/mathe/topics/rechnen-mit-klammern/article.html Normal file
View File

@@ -0,0 +1,43 @@
Wie wird es gemacht, wenn bei einer Aufgabe zunächst eine Addition ausgeführt werden soll und danach eine Multiplikation? Die Antwort lautet: Es wird eine Klammer gesetzt. Die mathematische Regel lautet dann ganz einfach "Eine Klammer wird zuerst berechnet". Um bei den ganzen Klammern, Punkt vor Strich usw. nicht durcheinander zu kommen, folgt hier noch einmal ein kurzer Leitfaden:
<br><br>
1. Wenn eine Klammer in der Aufgabe vorhanden ist, wird diese zuerst berechnet <br>
2. Danach werden Multiplikation und Division ausgeführt <br>
3. Als letztes folgen Addition und Subtraktion <br>
<br>
Der Leitfaden von oben sollte gemerkt werden, um dann die folgenden Beispiele zu verstehen:
<br><br>
Aufgabe: (2 + 3) · 5 = ? <br>
Lösung: (2 + 3) · 5 = 5 · 5 = 25 <br><br>
Aufgabe: 8 · (3 + 4) = ? <br>
Lösung: 8 · (3 + 4) = 8 · 7 = 56 <br><br>
Aufgabe: 2 · (1 + 2) + 5 = ? <br>
Lösung: 2 · (1 + 2) + 5 = 2 · 3 + 5 = 6 + 5 = 11 <br><br>
Aufgabe: 3 · (8 + 2) : 10 + 1 = ? <br>
Lösung: 3 · (8 + 2) : 10 + 1 = 3 · 10 : 10 + 1 = 30 : 10 + 1 = 3 + 1 = 4 <br><br>
<strong>Erklärungen: </strong> <br>
Gerade die beiden letzten Aufgaben könnten abschreckend wirken. Es wird jedoch mit den ersten beiden Aufgaben begonnen: In beiden Fällen wurde zunächst die Klammer berechnet. Das Ergebnis wurde dann mit der dahinter oder davor stehenden Zahl multipliziert. Bei der dritten Aufgabe wurde zuerst die Klammer berechnet, dann die Multiplikation und schließlich die Addition ausgeführt.
<br><br>
Kommen wir zur letzten Aufgabe: Auch hier wurde zunächst die Klammer berechnet. Mit dem Ergebnis der Klammer konnte dann entweder als erstes multipliziert oder dividiert werden, das ist mathematisch gleichgültig. In meinem Rechenweg wurde zunächst multipliziert, dann dividiert, und schließlich addiert. Die Aufgabe sollte noch einmal Stück für Stück durchgegangen werden, um Klarheit zu erhalten.
<br><br>
<strong>Priorität bei Klammern / mehrere Klammern</strong> <br>
Eine kleine Schwierigkeit muss zu guter Letzt noch angesprochen werden: Was passiert bei mehreren Klammern und verschachtelten Klammern? Dazu folgen zunächst zwei kleine Beispiele samt Lösungen, danach die Erklärung.
<br><br>
Aufgabe: (5 + 3) + (1 + 2) = ? <br>
Lösung: (5 + 3) + (1 + 2) = 8 + 3 = 11 <br><br>
Aufgabe: ((3 + 4) + 2) + 1 = ? <br>
Lösung: [( 3 + 4 ) + 2 ] + 1 = (7 + 2) + 1 = 10 <br><br>
<strong>Erklärung: </strong> <br>
Im ersten Beispiel gibt es zwei Klammern. Welche davon zuerst berechnet wird, ist vollkommen egal. Beide Klammern werden einzeln ausgerechnet und die Ergebnisse anschließend addiert. Kommen wir zum zweiten Beispiel: Hier gibt es zwei ineinander verschachtelte Klammern. Die Rechenregel dabei lautet ganz einfach: Immer zuerst die innere Klammer berechnen.
<br><br>
Zur besseren Übersicht bei verschachtelten Klammern sehen diese meist etwas unterschiedlich aus: Die innere Klammer wird üblicherweise mit "(" und ")" gekennzeichnet, während die äußere Klammer mit "[" und "]" versehen wird. Natürlich gilt wie immer: Um die Rechenregeln wirklich zu beherrschen, sollten die Übungsaufgaben bearbeitet werden.
<br><br>

BIN
webseite/config/subjects/mathe/topics/rechnen-mit-klammern/exercise1.pdf Normal file
View File

Binary file not shown.

BIN
webseite/config/subjects/mathe/topics/rechnen-mit-klammern/image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

11
webseite/config/subjects/mathe/topics/rechnen-mit-klammern/properties.json Normal file
View File

@@ -0,0 +1,11 @@
{
"displayName": "Rechnen mit Klammern",
"icon": "fa-code",
"description": "Beim Rechnen mit Klammern werden die Rechenoperationen innerhalb der Klammern zuerst ausgeführt, bevor die restlichen Berechnungen im Ausdruck vorgenommen werden, um die korrekte Reihenfolge der Rechenschritte einzuhalten.",
"relatedTopics": [
"punkt-vor-strichrechnung", "bruchrechnung"
],
"files": [
"exercise1.pdf"
]
}

24
webseite/config/subjects/mathe/topics/schriftliches-dividieren/article.html Normal file
View File

@@ -0,0 +1,24 @@
$$
\begin{array}{r@{}r@{}r@{}r}
& 8 & 4 & 0 & : & 4 & = & 2&1&0 \\
\hline
- & 8 & & \\ % Erste Subtraktion
& 0 & 4 & \\ % Nächste Zahl runterziehen
- & & 4 & \\ % Zweite Subtraktion
& & 0 & 0 \\ % Letzte Zahl runterziehen
- & & & 0 & \\ % Letzte Subtraktion
& & & 0 & % Endergebnis null
\end{array}
$$
<br><br>
1. Die vorderste Stelle des Dividenden wird genommen, das heißt, die 8. Nun wird geprüft, wie oft der Divisor - also die 4 - in die 8 passt. Dies passt 2 Mal. Daher wird die 2 in das Ergebnis (auch Quotient genannt) geschrieben. <br><br>
2. Im nächsten Schritt wird zurückmultipliziert. Die 2 aus dem Ergebnis wird mit dem Divisor multipliziert: 2 · 4 = 8. Diese 8 wird vorne unter die andere 8 notiert. <br><br>
3. Im dritten Rechenschritt wird eine Subtraktion durchgeführt. Es wird 8 - 8 = 0 gerechnet, und diese 0 wird unter dem Strich notiert. <br><br>
4. Als nächstes wird die nächste Stelle der Zahl heruntergezogen. In diesem Beispiel ist dies die 4. <br><br>
5. Die zuvor durchgeführten Rechenschritte beginnen nun von vorne. Wie oft passt der Divisor (4) in die 04? Dies passt genau 1 Mal, weshalb eine 1 in das Ergebnis geschrieben wird. <br><br>
6. Erneut wird multipliziert. Die neue 1 aus dem Ergebnis wird mit dem Divisor (4) multipliziert, und man erhält 1 · 4 = 4. Diese 4 wird unter die 04 notiert. Es ist darauf zu achten, dass die letzte Stelle jeweils untereinander steht. <br><br>
7. Als nächstes wird subtrahiert: 04 - 4 = 0. Anschließend wird die letzte Stelle der Zahl 840 nach unten gezogen, das heißt, die 0. <br><br>
8. Wie oft passt die 0 in die 0? Dies passt 0 Mal. Alternativ lässt sich sagen: 0 : 4 = 0. Diese 0 wird ebenfalls in das Ergebnis geschrieben. <br><br>
9. Nun wird wieder zurückmultipliziert: 0 · 4 = 0. Bei der Subtraktion bleibt nichts übrig, und es gibt keine weiteren Stellen mehr. <br><br>
10. Das Endergebnis lautet somit: 840 : 4 = 210. <br><br>

BIN
webseite/config/subjects/mathe/topics/schriftliches-dividieren/exercise1.pdf Normal file
View File

Binary file not shown.

BIN
webseite/config/subjects/mathe/topics/schriftliches-dividieren/exercise2.pdf Normal file
View File

Binary file not shown.

BIN
webseite/config/subjects/mathe/topics/schriftliches-dividieren/exercise3.pdf Normal file
View File

Binary file not shown.

BIN
webseite/config/subjects/mathe/topics/schriftliches-dividieren/exercise4.pdf Normal file
View File

Binary file not shown.

BIN
webseite/config/subjects/mathe/topics/schriftliches-dividieren/image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

11
webseite/config/subjects/mathe/topics/schriftliches-dividieren/properties.json Normal file
View File

@@ -0,0 +1,11 @@
{
"displayName": "Schriftliches Dividieren",
"icon": "fa-divide",
"description": "Schriftliches Dividieren ist eine Methode zur schrittweisen Aufteilung einer Zahl durch eine andere, wobei man die Teilschritte nacheinander schriftlich notiert, um das Ergebnis systematisch zu berechnen.",
"relatedTopics": [
"schriftliches-multiplizieren"
],
"files": [
"exercise1.pdf", "exercise2.pdf", "exercise3.pdf", "exercise4.pdf"
]
}

36
webseite/config/subjects/mathe/topics/schriftliches-multiplizieren/article.html Normal file
View File

@@ -0,0 +1,36 @@
Kommen wir nun zur schriftlichen Multiplikation: Das Ziel dieses Artikels ist es, Multiplikationsaufgaben wie zum Beispiel 12 · 30 zu lösen. Die Aufgabe wird hier zunächst vorgerechnet – gefolgt von einem zweiten Beispiel – und die Vorgehensweise wird anschließend unterhalb der Rechnung erläutert.
<br><br>
$$
\begin{array}{r@{}r@{}r@{}r}
& 1 & 2 & \times & 3 & 2 & \\ \hline % mal 32
& & & 3 & 6 \\ % 12 * 2 = 36
+ &&&& 2 & 4 \\ \hline % 12 * 3 mit Zehnerstelle = 240
&&& 3 & 8 & 4 % Ergebnis
\end{array}
$$
<br><br>
So wird es gemacht.
<br><br>
1. Die beiden Zahlen werden nebeneinander geschrieben und das Multiplikationszeichen dazwischen gesetzt. Darunter wird ein Strich gezogen. <br>
2. Danach wird die erste Zahl mit der ersten Stelle des zweiten Faktors multipliziert. Auf gut Deutsch: 12 · 3 = 36. Die 36 wird unter der 3 notiert. <br>
3. Dasselbe wird für die zweite Stelle durchgeführt: 12 · 2 = 24. Diese Zahl wird unter der 2 geschrieben.<br>
4. Anschließend wird schriftlich addiert. Stelle für Stelle wird von rechts nach links addiert: 4 + 0 = 4; 6 + 2 = 8; 3 + 0 = 3.<br>
Das Ergebnis ist somit 12 · 32 = 384.<br>
<br> <br> Ein weiteres Beispiel <br>
$$
\begin{array}{r@{}r@{}r@{}r@{}r@{}r}
2 & 8 & 4 & 6 & 8 & \times & 1 & 6 \\ \hline % mal 16
&& \textcolor{red}{2} & \textcolor{red}{8} & \textcolor{red}{4} & \textcolor{red}{6} & \textcolor{red}{8} \\ % 28468 * 6 (Einerstelle)
+ && \textcolor{green}{1} & \textcolor{green}{7} & \textcolor{green}{0} & \textcolor{green}{8} & \textcolor{green}{0} & \textcolor{green}{8} \\ \hline % 28468 * 10 (Zehnerstelle)
&& 4 & 5 & 5 & 4 & 8 & 8 % Ergebnis
\end{array}
$$
<br>
1. Es wird 28468 · 1 mit der bekannten Rechenweise aus den vorherigen Beispielen berechnet, und das Ergebnis wird so notiert, dass die letzte Stelle unter der 1 steht. <br>
2. Es wird 28468 · 6 ebenfalls mit der bekannten Rechenweise berechnet, und das Ergebnis wird so eingetragen, dass die letzte Stelle unter der 6 steht. <br>
3. Es wird eine schriftliche Addition durchgeführt (0 + 8 = 8, 8 + 0 = 8 usw.). Die übereinander stehenden Stellen werden jeweils addiert. <br><br>

BIN
webseite/config/subjects/mathe/topics/schriftliches-multiplizieren/exercise1.pdf Normal file
View File

Binary file not shown.

BIN
webseite/config/subjects/mathe/topics/schriftliches-multiplizieren/image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

11
webseite/config/subjects/mathe/topics/schriftliches-multiplizieren/properties.json Normal file
View File

@@ -0,0 +1,11 @@
{
"displayName": "Schriftliches Multiplizieren",
"icon": "fa-x",
"description": "Schriftliches Multiplizieren ist eine Rechenmethode, bei der zwei Zahlen schrittweise multipliziert werden, indem man die einzelnen Stellen der Zahlen nacheinander verrechnet, die Teilergebnisse notiert und am Ende addiert, um das Gesamtergebnis zu erhalten.",
"relatedTopics": [
"schriftliches-dividieren"
],
"files": [
"exercise1.pdf"
]
}

48
webseite/impressum.php Normal file
View File

@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Impressum</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link href="assets/css/styles.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
</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-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">
<a href="index.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>
<div class="content mt-24 max-w-7xl mx-[16px] xl:mx-auto">
<h1 class="text-3xl font-bold text-gray-900 mb-6">Impressum</h1>
<p class="text-gray-600 mb-4">Angaben gemäß § 5 TMG:</p>
<p class="text-gray-600 mb-4">
Horst-Schlämmer-Gedächtnis-Gymnasium<br>
Schätzeleinstraße 31<br>
41515 Grevenbroich<br>
Telefon: 01234 / 567890<br>
E-Mail: info@hsg-gymnasium.de
</p>
<p class="text-gray-600 mb-4">Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV:</p>
<p class="text-gray-600">
Max Mustermann<br>
Schätzeleinstraße 31<br>
41515 Grevenbroich
</p>
</div>
</body>
</html>

104
webseite/index.php Normal file
View File

@@ -0,0 +1,104 @@
<!DOCTYPE html>
<!--Homepage-->
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HSGG 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">
<link href="assets/css/styles.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>
</head>
<body class="bg-gray-50 min-h-screen">
<!-- Animated background blobs -->
<div class="fixed inset-0 -z-10 overflow-hidden">
<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">
<a href="index.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>
<!-- Hero Section -->
<div class="hidden md:block pt-24 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">
Willkommen beim <br><span
class="text-[var(--primary-color)]">Horst-Schlämmer-Gedächtnis-Gymnasium</span>
</h1>
</div>
</div>
</div>
<!-- Subject Grid -->
<div class="max-w-7xl mx-auto px-4 pt-20 grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
<!-- Mathematik -->
<?php
require_once("classes/SubjectData.php");
$subjects = SubjectData::getAll();
foreach ($subjects as $subject) {
// 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="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 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-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>
</div>
</div>
</div>
</a>
<?php
}
?>
</div>
<footer class="sticky top-[100vh] 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-[var(--primary-color)] hover:text-[var(--accent-color)]">Impressum</a></p>
</div>
</div>
</footer>
</body>
</html>

143
webseite/subject.php Normal file
View File

@@ -0,0 +1,143 @@
<!DOCTYPE html>
<?php
require_once("classes/SubjectData.php");
require_once("classes/TopicData.php");
if (!isset($_GET["subject"])) {
die("Ungültige Seite");
}
$subjectData = SubjectData::fromName($_GET["subject"]);
if (!isset($subjectData)) {
die("Ungültige Seite");
}
$topics = $subjectData->topics;
?>
<html lang="de">
<!--topics-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo($subjectData->displayName); ?> 5. Klasse</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link href="assets/css/subject.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>
<script src="assets/js/sidebar.js"></script>
<script src="assets/js/search.js"></script>
</head>
<body class="min-h-screen">
<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>
</div>
<a href="index.php" class="nav-link">
<i class="fas fa-home"></i> Startseite
</a>
<a href="#" class="nav-link active">
<i class="fas fa-book"></i> <?php echo($subjectData->displayName); ?> Übersicht
</a>
</nav>
<div class="search-container bg-white">
<button class="menu-toggle h-12 w-12 border-2 p-1 hover:border-[<?php echo($subjectData->color); ?>]">
<i class="fas fa-bars"></i>
</button>
<input type="text" class="search-box p-3 border-2 w-full focus:border-[<?php echo($subjectData->color); ?>]"
id="searchInput" placeholder="Suche nach Themen, Übungen oder Hilfe..."
oninput="handleSearch()">
</div>
<div class="main-content">
<div class="max-w-7xl mx-auto px-4 py-12 grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-8 mb-8">
<?php
foreach ($topics as $topicData) {
?>
<div class="topic-card"
onclick="window.location.href='topic.php?subject=<?php echo($topicData->subjectId); ?>&topic=<?php echo($topicData->id); ?>'"
style="cursor: pointer;">
<div class="topic-header">
<i class="fas <?php echo($topicData->icon); ?> topic-icon text-[<?php echo($subjectData->color); ?>]"></i>
<h3 class="topic-title"><?php echo($topicData->displayName); ?></h3>
</div>
<div class="topic-content">
<p class="topic-description">
<?php echo($topicData->description); ?>
</p>
<!--
<div class="related-topics bg-gray-100">
<h4>Verwandte Themen:</h4>
<ul>
<?php
foreach ($topicData->relatedTopics as $relatedTopicName) {
$relatedTopic = $subjectData->topics[$relatedTopicName];
if (!isset($relatedTopicName)) {
continue;
}
?>
<li onclick="event.stopPropagation();" class="border-[<?php echo($subjectData->color); ?>] border-2">
<a href='<?php echo("topic.php?subject=$subjectData->id&topic=$relatedTopic->id") ?>'>
<?php echo($relatedTopic->displayName); ?>
</a>
</li>
<?php
}
?>
</ul>
</div>-->
</div>
<div class="download-section bg-gray-100 p-[20px] rounded-[20px]">
<h4>Übungen herunterladen:</h4>
<div class="download-links">
<?php
foreach ($topicData->files as $fileName) {
?>
<a onclick="event.stopPropagation();"
href="<?php echo("config/subjects/$subjectData->id/topics/$topicData->id/$fileName") ?>"
target="_blank" download
class="download-btn border-2 border-[<?php echo($subjectData->color); ?>]">
<i class="fas fa-file-pdf"></i>
<?php echo($fileName); ?>
</a>
<?php
}
?>
</div>
</div>
</div>
<?php
}
?>
</div>
</div>
<footer class="sticky top-[100vh] lg:ms-[280px] w-full lg:w-auto 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-[var(--primary-color)] hover:text-[var(--accent-color)]">Impressum</a></p>
</div>
</div>
</footer>
</body>
</html>

155
webseite/topic.php Normal file
View File

@@ -0,0 +1,155 @@
<!DOCTYPE html>
<?php
require_once("classes/SubjectData.php");
require_once("classes/TopicData.php");
if (!isset($_GET["subject"])) {
die("Ungültige Seite");
}
$subjectData = SubjectData::fromName($_GET["subject"]);
if (!isset($subjectData)) {
die("Ungültige Seite");
}
if (!isset($_GET["topic"])) {
die("Ungültige Seite");
}
$topicData = TopicData::fromName($_GET["subject"], $_GET["topic"]);
if (!isset($topicData)) {
die("Ungültige Seite");
}
?>
<html lang="de">
<head>
<meta charset="UTF-8">
<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>
<script src="assets/js/sidebar.js"></script>
</head>
<body class="min-h-screen">
<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 bg-[<?php echo($subjectData->color); ?>]">
<div class="sidebar-header">
<i class="fas fa-graduation-cap"></i>
<h2><?php echo($subjectData->displayName); ?></h2>
</div>
<a href="index.php" class="nav-link">
<i class="fas fa-home"></i> Startseite
</a>
<a href="subject.php?subject=<?php echo($subjectData->id); ?>" class="nav-link">
<i class="fas fa-book"></i> <?php echo($subjectData->displayName); ?> Übersicht
</a>
<a href="#" class="nav-link active">
<i class="fas fa-calculator"></i> <?php echo($topicData->displayName); ?>
</a>
</nav>
<!-- Main Content -->
<main class="main-content">
<div class="max-w-7xl mx-auto mt-5">
<div class="mt-16"></div>
<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)) {
continue;
}
?>
<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
}
?>
</ul>
</div>
<div class="content-card mt-[8px]">
<h1 class="content-title"><?php echo($topicData->displayName); ?></h1>
<p class="content-text">
<?php echo($topicData->description); ?>
</p>
<p class="content-text article-section">
<?php echo($topicData->article); ?>
</p>
<div class="exercise-section bg-gray-100">
<h3 style="margin-bottom: 1rem;" class="text-[var(--primary-color)]">Ü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 border-[<?php echo($subjectData->color); ?>] border-2">
<i class="fas fa-file-pdf"></i>
<?php echo($fileName); ?>
</a>
<?php
}
?>
</div>
</div>
</div>
<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)) {
continue;
}
?>
<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
}
?>
</ul>
</div>
</div>
</main>
<footer class="sticky top-[100vh] lg:ms-[280px] w-full lg:w-auto 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-[var(--primary-color)] hover:text-[var(--accent-color)]">Impressum</a></p>
</div>
</div>
</footer>
</body>
</html>