Erste Version der Website
This commit is contained in:
commit
9b04f70d01
15 changed files with 1870 additions and 0 deletions
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
*.save
|
||||||
|
*.swp
|
||||||
|
*~
|
||||||
|
.DS_Store
|
||||||
181
README.md
Normal file
181
README.md
Normal file
|
|
@ -0,0 +1,181 @@
|
||||||
|
# EIS Projekt – Entwicklung interaktiver Softwareanwendungen
|
||||||
|
|
||||||
|
## 📋 Projektübersicht
|
||||||
|
|
||||||
|
Dies ist eine mehrseitige Website für die Lehrveranstaltung **„Entwicklung interaktiver Softwareanwendungen"** an der PH Weingarten.
|
||||||
|
|
||||||
|
**Dozenten:** Stefan Franke und Prof. Dr. Wolfgang Müller
|
||||||
|
|
||||||
|
## 🚀 Live-Zugang
|
||||||
|
|
||||||
|
Die Website ist unter folgender Adresse erreichbar:
|
||||||
|
```
|
||||||
|
https://isa##.edumake.de
|
||||||
|
```
|
||||||
|
(## wird durch Ihre Benutzernummer ersetzt)
|
||||||
|
|
||||||
|
## 📁 Projektstruktur
|
||||||
|
|
||||||
|
```
|
||||||
|
~/public_html/
|
||||||
|
├── index.html # Startseite
|
||||||
|
├── ueber_uns.html # Über uns & Dozenten
|
||||||
|
├── eis_projekt.html # Projektdetails
|
||||||
|
├── kontakt.html # Kontaktformular
|
||||||
|
├── impressum.html # Rechtliche Infos
|
||||||
|
├── css/
|
||||||
|
│ └── style.css # Zentrale Stylesheet
|
||||||
|
├── js/
|
||||||
|
│ └── script.js # JavaScript für Interaktivität
|
||||||
|
├── img/
|
||||||
|
│ ├── logo.svg # PH-Logo
|
||||||
|
│ └── favicon.svg # Browser-Icon
|
||||||
|
├── assets/
|
||||||
|
│ └── projektinfo.pdf # Downloadbereich
|
||||||
|
└── README.md # Diese Datei
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🛠️ Technologie-Stack
|
||||||
|
|
||||||
|
### Frontend
|
||||||
|
- **HTML5** – Semantisches Markup
|
||||||
|
- **CSS3** – Responsive Design mit Grid & Flexbox
|
||||||
|
- **JavaScript (ES6+)** – Interaktive Elemente
|
||||||
|
- Lightbox-Galerie
|
||||||
|
- Formularvalidierung
|
||||||
|
- Navigation-Highlighting
|
||||||
|
|
||||||
|
### Features
|
||||||
|
- ✅ Responsive Design (Mobile, Tablet, Desktop)
|
||||||
|
- ✅ Einheitliche Navigation
|
||||||
|
- ✅ Kontaktformular mit Validierung
|
||||||
|
- ✅ Bildergalerie mit Lightbox
|
||||||
|
- ✅ Download-Bereich
|
||||||
|
- ✅ Impressum & rechtliche Hinweise
|
||||||
|
- ✅ SEO-freundliches Markup
|
||||||
|
|
||||||
|
## 🖥️ SSH-Zugang
|
||||||
|
|
||||||
|
Verbindung zum Server:
|
||||||
|
```bash
|
||||||
|
ssh -p 2222 isa##@edumake.de
|
||||||
|
```
|
||||||
|
|
||||||
|
⚠️ **Wichtig:** Eduroam sperrt Port 2222 – verwenden Sie WLAN mbm oder Ihren mobilen Hotspot.
|
||||||
|
|
||||||
|
Navigationszum Projektverzeichnis:
|
||||||
|
```bash
|
||||||
|
cd ~/public_html
|
||||||
|
```
|
||||||
|
|
||||||
|
## 📝 Dateienverwaltung
|
||||||
|
|
||||||
|
### Dateien bearbeiten
|
||||||
|
Verwenden Sie einen Editor (nano, vi) oder SFTP:
|
||||||
|
```bash
|
||||||
|
nano index.html
|
||||||
|
```
|
||||||
|
|
||||||
|
### Änderungen hochladen (via SFTP)
|
||||||
|
```bash
|
||||||
|
sftp -P 2222 isa##@edumake.de
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🎨 CSS-Struktur
|
||||||
|
|
||||||
|
Die zentrale `css/style.css` ist in folgende Abschnitte unterteilt:
|
||||||
|
|
||||||
|
1. **Global Styles & Reset** – Box-model, Basis-Styling
|
||||||
|
2. **Typography** – Überschriften, Text, Links
|
||||||
|
3. **Header & Navigation** – Sticky Header, aktive Links
|
||||||
|
4. **Main Content** – Layout, Sections, Container
|
||||||
|
5. **Forms** – Input-Styling, Validierung
|
||||||
|
6. **Galerie & Lightbox** – Bilder und Modal-Fenster
|
||||||
|
7. **Responsive Design** – Media Queries
|
||||||
|
|
||||||
|
## 📱 Responsive Breakpoints
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* Tablet */
|
||||||
|
@media (max-width: 768px)
|
||||||
|
|
||||||
|
/* Mobile */
|
||||||
|
@media (max-width: 480px)
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🔧 JavaScript-Funktionen
|
||||||
|
|
||||||
|
### 1. Navigation-Highlighting
|
||||||
|
- Automatisches Markieren des aktiven Links basierend auf URL
|
||||||
|
|
||||||
|
### 2. Lightbox-Galerie
|
||||||
|
- Klick auf Bilder öffnet eine vergrößerte Ansicht
|
||||||
|
- ESC-Taste zum Schließen
|
||||||
|
- Overlay-Klick zum Schließen
|
||||||
|
|
||||||
|
### 3. Kontaktformular
|
||||||
|
- Email-Validierung
|
||||||
|
- Erfolgs-/Fehlermeldungen
|
||||||
|
- Automatisches Zurücksetzen nach Absenden
|
||||||
|
|
||||||
|
## 📚 Inhaltsseiten
|
||||||
|
|
||||||
|
### index.html
|
||||||
|
- Hero-Abschnitt mit Projekt-Übersicht
|
||||||
|
- Info-Karten mit Links zu anderen Seiten
|
||||||
|
- Updates-Liste
|
||||||
|
|
||||||
|
### ueber_uns.html
|
||||||
|
- Veranstaltungsinformationen
|
||||||
|
- Dozenten-Profile
|
||||||
|
- Projektstruktur (U1-U4+)
|
||||||
|
|
||||||
|
### eis_projekt.html
|
||||||
|
- Technologie-Stack
|
||||||
|
- Projektstruktur
|
||||||
|
- Design-Prinzipien
|
||||||
|
- Deployment-Infos
|
||||||
|
|
||||||
|
### kontakt.html
|
||||||
|
- Kontaktinformationen
|
||||||
|
- Kontaktformular
|
||||||
|
- FAQ-Sektion
|
||||||
|
|
||||||
|
### impressum.html
|
||||||
|
- Rechtliche Hinweise
|
||||||
|
- Datenschutzerklärung
|
||||||
|
- Haftungsausschluss
|
||||||
|
|
||||||
|
## 🚀 Entwicklungsschritte (Lernpfad)
|
||||||
|
|
||||||
|
| Unit | Thema | Inhalte |
|
||||||
|
|------|-------|---------|
|
||||||
|
| **U1** | Grundlagen | SSH, Linux, erste HTML-Seite |
|
||||||
|
| **U2** | Styling & Interaktion | CSS, JavaScript, Events |
|
||||||
|
| **U3** | Website-Architektur | Navigation, mehrere Seiten (aktuell) |
|
||||||
|
| **U4** | Backend-Integration | Python, Flask, APIs |
|
||||||
|
| **U5+** | Erweitert | Datenbanken, Authentifizierung |
|
||||||
|
|
||||||
|
## 🎯 Nächste Schritte
|
||||||
|
|
||||||
|
- [ ] Logo durch echte PH-Weingarten-Logo ersetzen
|
||||||
|
- [ ] Bilder hochladen und in Galerie einbinden
|
||||||
|
- [ ] Backend mit Flask entwickeln (U4)
|
||||||
|
- [ ] Formular-Backend-Integration
|
||||||
|
- [ ] Datenbank-Verbindung
|
||||||
|
- [ ] User-Authentifizierung
|
||||||
|
|
||||||
|
## 📧 Support
|
||||||
|
|
||||||
|
Bei Fragen oder Problemen kontaktieren Sie:
|
||||||
|
|
||||||
|
- **Stefan Franke:** stefan.franke@ph-weingarten.de
|
||||||
|
- **Prof. Dr. Wolfgang Müller:** wolfgang.mueller@ph-weingarten.de
|
||||||
|
|
||||||
|
## 📄 Lizenz
|
||||||
|
|
||||||
|
Dieses Projekt ist ein Lernprojekt der PH Weingarten und dient zu Ausbildungszwecken.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Zuletzt aktualisiert:** 22. April 2026
|
||||||
66
assets/projektinfo.pdf
Normal file
66
assets/projektinfo.pdf
Normal file
|
|
@ -0,0 +1,66 @@
|
||||||
|
%PDF-1.4
|
||||||
|
1 0 obj
|
||||||
|
<< /Type /Catalog /Pages 2 0 R >>
|
||||||
|
endobj
|
||||||
|
2 0 obj
|
||||||
|
<< /Type /Pages /Kids [3 0 R] /Count 1 >>
|
||||||
|
endobj
|
||||||
|
3 0 obj
|
||||||
|
<< /Type /Page /Parent 2 0 R /Resources 4 0 R /MediaBox [0 0 612 792] /Contents 5 0 R >>
|
||||||
|
endobj
|
||||||
|
4 0 obj
|
||||||
|
<< /Font << /F1 << /Type /Font /Subtype /Type1 /BaseFont /Helvetica >> >> >>
|
||||||
|
endobj
|
||||||
|
5 0 obj
|
||||||
|
<< /Length 500 >>
|
||||||
|
stream
|
||||||
|
BT
|
||||||
|
/F1 24 Tf
|
||||||
|
50 750 Td
|
||||||
|
(Projektinfo - EIS) Tj
|
||||||
|
ET
|
||||||
|
BT
|
||||||
|
/F1 12 Tf
|
||||||
|
50 700 Td
|
||||||
|
(Entwicklung interaktiver Softwareanwendungen) Tj
|
||||||
|
ET
|
||||||
|
BT
|
||||||
|
/F1 12 Tf
|
||||||
|
50 680 Td
|
||||||
|
(PH Weingarten) Tj
|
||||||
|
ET
|
||||||
|
BT
|
||||||
|
/F1 10 Tf
|
||||||
|
50 650 Td
|
||||||
|
(Diese Datei ist eine Platzhalter-PDF fuer das Projekt.) Tj
|
||||||
|
ET
|
||||||
|
BT
|
||||||
|
/F1 10 Tf
|
||||||
|
50 630 Td
|
||||||
|
(Sie kann durch echte Projektdokumentationen ersetzt werden.) Tj
|
||||||
|
ET
|
||||||
|
BT
|
||||||
|
/F1 10 Tf
|
||||||
|
50 600 Td
|
||||||
|
(Dozenten: Stefan Franke und Prof. Dr. Wolfgang Mueller) Tj
|
||||||
|
ET
|
||||||
|
BT
|
||||||
|
/F1 10 Tf
|
||||||
|
50 570 Td
|
||||||
|
(Erstellt: 22. April 2026) Tj
|
||||||
|
ET
|
||||||
|
endstream
|
||||||
|
endobj
|
||||||
|
xref
|
||||||
|
0 6
|
||||||
|
0000000000 65535 f
|
||||||
|
0000000009 00000 n
|
||||||
|
0000000058 00000 n
|
||||||
|
0000000115 00000 n
|
||||||
|
0000000217 00000 n
|
||||||
|
0000000323 00000 n
|
||||||
|
trailer
|
||||||
|
<< /Size 6 /Root 1 0 R >>
|
||||||
|
startxref
|
||||||
|
873
|
||||||
|
%%EOF
|
||||||
696
css/style.css
Normal file
696
css/style.css
Normal file
|
|
@ -0,0 +1,696 @@
|
||||||
|
/* ===========================
|
||||||
|
Global Styles & Reset
|
||||||
|
=========================== */
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
color: #6b3a5f;
|
||||||
|
line-height: 1.6;
|
||||||
|
background: linear-gradient(135deg, #fff5f9 0%, #ffe6f0 50%, #fff0f7 100%);
|
||||||
|
position: relative;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animated Background Flowers */
|
||||||
|
body::before {
|
||||||
|
content: '';
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Blumen-Animation im Hintergrund */
|
||||||
|
@keyframes float-flower {
|
||||||
|
0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.3; }
|
||||||
|
50% { transform: translateY(-30px) rotate(5deg); opacity: 0.5; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes drift {
|
||||||
|
0% { transform: translateX(0px); }
|
||||||
|
50% { transform: translateX(20px); }
|
||||||
|
100% { transform: translateX(0px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===========================
|
||||||
|
Typography
|
||||||
|
=========================== */
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #d946ef;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
color: #d946ef;
|
||||||
|
font-weight: 900;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 2rem;
|
||||||
|
color: #d946ef;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: #ff1493;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #ff1493;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #ff69b4;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===========================
|
||||||
|
Header & Navigation
|
||||||
|
=========================== */
|
||||||
|
|
||||||
|
header {
|
||||||
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 192, 203, 0.2) 100%);
|
||||||
|
border-bottom: 2px solid rgba(255, 105, 180, 0.3);
|
||||||
|
padding: 1.5rem 2rem;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
box-shadow: 0 4px 20px rgba(255, 20, 147, 0.1);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 1.5rem;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
background: linear-gradient(135deg, #ff1493 0%, #ff69b4 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo img {
|
||||||
|
height: 50px;
|
||||||
|
width: auto;
|
||||||
|
filter: drop-shadow(0 4px 8px rgba(255, 20, 147, 0.2));
|
||||||
|
animation: bounce-logo 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce-logo {
|
||||||
|
0%, 100% { transform: translateY(0); }
|
||||||
|
50% { transform: translateY(-5px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.2rem;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-text .institution {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: #ff69b4;
|
||||||
|
font-weight: 500;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-text .project {
|
||||||
|
font-size: 1rem;
|
||||||
|
background: linear-gradient(135deg, #ff1493 0%, #d946ef 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
gap: 1.5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
color: #ff1493;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
border-radius: 20px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 2px;
|
||||||
|
background: linear-gradient(90deg, #ff1493, #ff69b4);
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a:hover {
|
||||||
|
background: rgba(255, 105, 180, 0.1);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a:hover::after {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a.active {
|
||||||
|
background: linear-gradient(135deg, #ff1493, #ff69b4);
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
box-shadow: 0 4px 12px rgba(255, 20, 147, 0.3);
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===========================
|
||||||
|
Main Content
|
||||||
|
=========================== */
|
||||||
|
|
||||||
|
/* Main Content */
|
||||||
|
main {
|
||||||
|
max-width: 960px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem 1.5rem;
|
||||||
|
min-height: calc(100vh - 200px);
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===========================
|
||||||
|
Sections & Content
|
||||||
|
=========================== */
|
||||||
|
|
||||||
|
/* Sections & Content */
|
||||||
|
|
||||||
|
section {
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
padding: 2rem;
|
||||||
|
background: rgba(255, 255, 255, 0.85);
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 2px solid rgba(255, 105, 180, 0.2);
|
||||||
|
box-shadow: 0 8px 32px rgba(255, 20, 147, 0.08);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
position: relative;
|
||||||
|
animation: slideUp 0.6s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(30px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section::before {
|
||||||
|
content: '🌸';
|
||||||
|
position: absolute;
|
||||||
|
top: -20px;
|
||||||
|
right: 30px;
|
||||||
|
font-size: 2.5rem;
|
||||||
|
opacity: 0;
|
||||||
|
animation: float-flower 3s ease-in-out infinite;
|
||||||
|
animation-delay: 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
section:nth-child(even)::before {
|
||||||
|
content: '🌺';
|
||||||
|
animation-delay: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
section:nth-child(3n)::before {
|
||||||
|
content: '🌷';
|
||||||
|
animation-delay: 0.6s;
|
||||||
|
}
|
||||||
|
|
||||||
|
section h2 {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===========================
|
||||||
|
Footer
|
||||||
|
=========================== */
|
||||||
|
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
padding: 2.5rem 1.5rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #ff69b4;
|
||||||
|
border-top: 2px solid rgba(255, 105, 180, 0.3);
|
||||||
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 192, 203, 0.15) 100%);
|
||||||
|
margin-top: 4rem;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
footer p {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links {
|
||||||
|
margin-top: 1rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 1.5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links a {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===========================
|
||||||
|
Buttons & Links
|
||||||
|
=========================== */
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
background: linear-gradient(135deg, #ff1493 0%, #ff69b4 100%);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 25px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
text-decoration: none;
|
||||||
|
box-shadow: 0 4px 15px rgba(255, 20, 147, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover {
|
||||||
|
background: linear-gradient(135deg, #ff69b4 0%, #ffc0cb 100%);
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: 0 8px 25px rgba(255, 20, 147, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:active {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background: linear-gradient(135deg, #ffc0cb 0%, #ffe6f0 100%);
|
||||||
|
color: #d946ef;
|
||||||
|
box-shadow: 0 4px 15px rgba(255, 105, 180, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background: linear-gradient(135deg, #ff69b4 0%, #ffc0cb 100%);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-download {
|
||||||
|
background: linear-gradient(135deg, #d946ef 0%, #ff1493 100%);
|
||||||
|
box-shadow: 0 4px 15px rgba(217, 70, 239, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-download:hover {
|
||||||
|
background: linear-gradient(135deg, #ff1493 0%, #ff69b4 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===========================
|
||||||
|
Forms
|
||||||
|
=========================== */
|
||||||
|
|
||||||
|
form {
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #d946ef;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
textarea,
|
||||||
|
select {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.75rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
border: 2px solid rgba(255, 105, 180, 0.3);
|
||||||
|
border-radius: 15px;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 1rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus,
|
||||||
|
textarea:focus,
|
||||||
|
select:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #ff1493;
|
||||||
|
background: rgba(255, 255, 255, 1);
|
||||||
|
box-shadow: 0 0 0 3px rgba(255, 20, 147, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
resize: vertical;
|
||||||
|
min-height: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===========================
|
||||||
|
Galerie & Bilder
|
||||||
|
=========================== */
|
||||||
|
|
||||||
|
.galerie {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||||
|
gap: 1.5rem;
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.galerie img {
|
||||||
|
width: 100%;
|
||||||
|
height: 250px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border: 3px solid rgba(255, 105, 180, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.galerie img:hover {
|
||||||
|
transform: scale(1.08) rotate(2deg);
|
||||||
|
border-color: #ff1493;
|
||||||
|
box-shadow: 0 12px 28px rgba(255, 20, 147, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===========================
|
||||||
|
Lightbox Modal
|
||||||
|
=========================== */
|
||||||
|
|
||||||
|
.lightbox-overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.9);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 999;
|
||||||
|
animation: fadeIn 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightbox-overlay img {
|
||||||
|
max-width: 90vw;
|
||||||
|
max-height: 90vh;
|
||||||
|
object-fit: contain;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightbox-close {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 30px;
|
||||||
|
color: white;
|
||||||
|
font-size: 2rem;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightbox-close:hover {
|
||||||
|
color: #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===========================
|
||||||
|
Download Links & Files
|
||||||
|
=========================== */
|
||||||
|
|
||||||
|
.download-section {
|
||||||
|
background: linear-gradient(135deg, rgba(255, 192, 203, 0.2) 0%, rgba(255, 20, 147, 0.05) 100%);
|
||||||
|
border-left: 4px solid #ff1493;
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-radius: 15px;
|
||||||
|
margin: 1.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-section p {
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===========================
|
||||||
|
Impressum & Info
|
||||||
|
=========================== */
|
||||||
|
|
||||||
|
.impressum-section {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum-section h3 {
|
||||||
|
margin-top: 2rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum-section p {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===========================
|
||||||
|
Hero Section
|
||||||
|
=========================== */
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
background: linear-gradient(135deg, #ff1493 0%, #ff69b4 50%, #ffc0cb 100%);
|
||||||
|
color: white;
|
||||||
|
padding: 3rem 2rem;
|
||||||
|
border-radius: 25px;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
box-shadow: 0 12px 40px rgba(255, 20, 147, 0.25);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero::before {
|
||||||
|
content: '🌸 🌺 🌷';
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 20px;
|
||||||
|
font-size: 2rem;
|
||||||
|
opacity: 0.4;
|
||||||
|
animation: float-flower 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 {
|
||||||
|
color: white;
|
||||||
|
margin-top: 0;
|
||||||
|
text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 2.8rem;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero p {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
color: rgba(255, 255, 255, 0.95);
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===========================
|
||||||
|
Info Cards
|
||||||
|
=========================== */
|
||||||
|
|
||||||
|
.cards {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||||
|
gap: 1.5rem;
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 240, 247, 0.8) 100%);
|
||||||
|
border: 2px solid rgba(255, 105, 180, 0.2);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 1.5rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
box-shadow: 0 8px 20px rgba(255, 20, 147, 0.1);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -10px;
|
||||||
|
right: 20px;
|
||||||
|
font-size: 2rem;
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:nth-child(1)::before { content: '🌸'; }
|
||||||
|
.card:nth-child(2)::before { content: '🌺'; }
|
||||||
|
.card:nth-child(3)::before { content: '🌷'; }
|
||||||
|
|
||||||
|
.card:hover {
|
||||||
|
transform: translateY(-8px) scale(1.02);
|
||||||
|
box-shadow: 0 16px 36px rgba(255, 20, 147, 0.25);
|
||||||
|
border-color: #ff1493;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card h3 {
|
||||||
|
margin-top: 0;
|
||||||
|
color: #d946ef;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===========================
|
||||||
|
Responsive Design
|
||||||
|
=========================== */
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
h1 {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-container {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
width: 100%;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
display: block;
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
padding: 2rem 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.galerie {
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
h1 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
padding: 1rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.galerie {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.galerie img {
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
174
eis_projekt.html
Normal file
174
eis_projekt.html
Normal file
|
|
@ -0,0 +1,174 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="Das EIS-Projekt - Interaktive Softwareanwendungen">
|
||||||
|
<title>Das Projekt – EIS</title>
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
<link rel="icon" href="img/logo.png" type="image/png">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="header-container">
|
||||||
|
<div class="logo">
|
||||||
|
<img src="img/logo.png" alt="Logo">
|
||||||
|
<div class="logo-text">
|
||||||
|
<span class="institution">David & Karo</span>
|
||||||
|
<span class="project">EIS Projekt</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nav>
|
||||||
|
<a href="index.html">Start</a>
|
||||||
|
<a href="ueber_uns.html">Über uns</a>
|
||||||
|
<a href="eis_projekt.html" class="active">Projekt</a>
|
||||||
|
<a href="galerie.html">Galerie</a>
|
||||||
|
<a href="kontakt.html">Kontakt</a>
|
||||||
|
<a href="impressum.html">Impressum</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<h1>Das EIS-Projekt</h1>
|
||||||
|
<p>Innovative Webentwicklung mit modernem Tech-Stack & magischem Design ✨</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>💻 Technologie-Stack</h2>
|
||||||
|
<div class="cards">
|
||||||
|
<div class="card">
|
||||||
|
<h3>Frontend</h3>
|
||||||
|
<ul>
|
||||||
|
<li>HTML5</li>
|
||||||
|
<li>CSS3 (Responsive Design)</li>
|
||||||
|
<li>JavaScript (ES6+)</li>
|
||||||
|
<li>DOM-Manipulation</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>Backend</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Python 3</li>
|
||||||
|
<li>Flask</li>
|
||||||
|
<li>RESTful APIs</li>
|
||||||
|
<li>SQL-Datenbanken</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>Infrastruktur</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Linux Server (Ubuntu)</li>
|
||||||
|
<li>SSH-Zugang</li>
|
||||||
|
<li>Dateiserver (public_html)</li>
|
||||||
|
<li>SFTP/SCP</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>📁 Projektstruktur</h2>
|
||||||
|
<p>Die Website folgt einer klaren, wartbaren Verzeichnisstruktur:</p>
|
||||||
|
<pre><code>~/public_html/
|
||||||
|
├── index.html
|
||||||
|
├── kontakt.html
|
||||||
|
├── ueber_uns.html
|
||||||
|
├── eis_projekt.html
|
||||||
|
├── impressum.html
|
||||||
|
├── css/
|
||||||
|
│ └── style.css
|
||||||
|
├── js/
|
||||||
|
│ └── script.js
|
||||||
|
├── img/
|
||||||
|
│ ├── logo.svg
|
||||||
|
│ └── favicon.png
|
||||||
|
└── assets/
|
||||||
|
└── projektinfo.pdf</code></pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>🎨 Design-Prinzipien</h2>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Responsives Design:</strong> Optimiert für Mobile, Tablet und Desktop</li>
|
||||||
|
<li><strong>Semantisches HTML:</strong> Barrierefreiheit und SEO</li>
|
||||||
|
<li><strong>Clean Code:</strong> Lesbare und wartbare Struktur</li>
|
||||||
|
<li><strong>Konsistentes Styling:</strong> Zentralisierte CSS-Verwaltung</li>
|
||||||
|
<li><strong>User Experience:</strong> Interaktive Elemente und angenehme Navigation</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>⚙️ Funktionen</h2>
|
||||||
|
<div class="cards">
|
||||||
|
<div class="card">
|
||||||
|
<h3>Navigation</h3>
|
||||||
|
<p>Einheitliche Navigation auf allen Seiten mit aktiv-Zustand</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>Responsive Layout</h3>
|
||||||
|
<p>CSS Grid und Flexbox für flexible Layouts auf allen Geräten</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>Lightbox-Galerie</h3>
|
||||||
|
<p>Interaktive Bildergalerie mit Modal-Ansicht (JavaScript)</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>Kontaktformular</h3>
|
||||||
|
<p>Frontend-Validierung und Backend-Integration (kommend)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>🌐 Deployment</h2>
|
||||||
|
<p>Die Website ist live unter:</p>
|
||||||
|
<div class="download-section">
|
||||||
|
<p><strong>Live-URL:</strong> isa##.edumake.de</p>
|
||||||
|
<p><em>(## wird durch die Benutzernummer ersetzt)</em></p>
|
||||||
|
</div>
|
||||||
|
<p>Alle Änderungen im Verzeichnis sind sofort live – so geht moderne Web-Entwicklung! 🚀</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>📝 Projektressourcen</h2>
|
||||||
|
<p>Folgende Materialien unterstützen die Entwicklung:</p>
|
||||||
|
<div class="download-section">
|
||||||
|
<a href="assets/projektinfo.pdf" download class="btn btn-download">📄 Projektinfo herunterladen (PDF)</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>🚀 Entwicklungsschritte</h2>
|
||||||
|
<ol>
|
||||||
|
<li><strong>U1:</strong> Website-Struktur und erste HTML-Seite</li>
|
||||||
|
<li><strong>U2:</strong> Styling mit CSS und interaktive JavaScript-Elemente</li>
|
||||||
|
<li><strong>U3:</strong> Mehrseitige Website mit Navigation und Inhaltsstruktur (aktuell)</li>
|
||||||
|
<li><strong>U4:</strong> Backend mit Python und Flask hinzufügen</li>
|
||||||
|
<li><strong>U5+:</strong> Datenbankanbindung, APIs, erweiterte Funktionen</li>
|
||||||
|
</ol>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>📸 Bildergalerie</h2>
|
||||||
|
<p>Hier können später Screenshots und Bilder des Projekts eingefügt werden:</p>
|
||||||
|
<div class="galerie">
|
||||||
|
<!-- Bilder werden hier eingefügt, wenn verfügbar -->
|
||||||
|
<p style="grid-column: 1 / -1; color: #64748b;">Bildergalerie wird nach dem Hochladen von Bildern gefüllt.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>© 2026 – Made with 💕 & ✨ – David & Karo</p>
|
||||||
|
<div class="footer-links">
|
||||||
|
<a href="impressum.html">Impressum</a>
|
||||||
|
<a href="kontakt.html">Kontakt</a>
|
||||||
|
<a href="#">Datenschutz</a>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
86
galerie.html
Normal file
86
galerie.html
Normal file
|
|
@ -0,0 +1,86 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="Galerie - David & Karo Projekt">
|
||||||
|
<title>Galerie – EIS Projekt</title>
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
<link rel="icon" href="img/logo.png" type="image/png">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="header-container">
|
||||||
|
<div class="logo">
|
||||||
|
<img src="img/logo.png" alt="Logo">
|
||||||
|
<div class="logo-text">
|
||||||
|
<span class="institution">David & Karo</span>
|
||||||
|
<span class="project">EIS Projekt</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nav>
|
||||||
|
<a href="index.html">Start</a>
|
||||||
|
<a href="ueber_uns.html">Über uns</a>
|
||||||
|
<a href="eis_projekt.html">Projekt</a>
|
||||||
|
<a href="galerie.html" class="active">Galerie</a>
|
||||||
|
<a href="kontakt.html">Kontakt</a>
|
||||||
|
<a href="impressum.html">Impressum</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<h1>📸 Galerie</h1>
|
||||||
|
<p>Einblicke in unser Projekt – Bilder, Screenshots & Behind-the-Scenes 🌸</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>🖼️ Unser Team</h2>
|
||||||
|
<p>Hier findet ihr Bilder aus unserem Team und vom Projekt:</p>
|
||||||
|
<div class="galerie">
|
||||||
|
<img src="img/gruppenbild.jpg" alt="Team David & Karo" title="Klick zum Vergrößern">
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>📱 Projekt Screenshots</h2>
|
||||||
|
<p>Verschiedene Ansichten und Details des Projekts:</p>
|
||||||
|
<div class="galerie">
|
||||||
|
<!-- Screenshots können hier eingefügt werden, wenn vorhanden -->
|
||||||
|
<p style="grid-column: 1 / -1; color: #64748b; text-align: center;">Screenshots werden hier angezeigt, wenn verfügbar 📸</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>🎨 Design-Inspiration</h2>
|
||||||
|
<p>Die Ästhetik hinter unserem Projekt – Rosa, Pink, Blumen & Gen Z Vibes:</p>
|
||||||
|
<div class="galerie">
|
||||||
|
<!-- Design-Referenzen können hier eingefügt werden -->
|
||||||
|
<p style="grid-column: 1 / -1; color: #64748b; text-align: center;">Design-Inspirationen kommen bald! 🌸✨</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>💾 Downloads</h2>
|
||||||
|
<p>Wichtige Dateien und Dokumente zum Projekt:</p>
|
||||||
|
<div class="download-section">
|
||||||
|
<h3>📄 Projektinformationen</h3>
|
||||||
|
<p><a href="assets/projektinfo.pdf" download class="btn btn-download">📥 projektinfo.pdf herunterladen</a></p>
|
||||||
|
<p style="font-size: 0.9rem; color: #64748b; margin-top: 1rem;">PDF mit allen wichtigen Projektdetails, Struktur und Informationen</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>© 2026 – Made with 💕 & ✨ – David & Karo</p>
|
||||||
|
<div class="footer-links">
|
||||||
|
<a href="impressum.html">Impressum</a>
|
||||||
|
<a href="kontakt.html">Kontakt</a>
|
||||||
|
<a href="#">Datenschutz</a>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
4
img/favicon.svg
Normal file
4
img/favicon.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||||
|
<rect width="32" height="32" fill="#1e40af" rx="4"/>
|
||||||
|
<text x="16" y="24" font-size="20" font-weight="bold" fill="white" text-anchor="middle" font-family="Arial">E</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 242 B |
27
img/gruppenbild.jpg
Normal file
27
img/gruppenbild.jpg
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
|
||||||
|
<!-- Gradient Background -->
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#ff69b4;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#ffc0cb;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<rect width="800" height="600" fill="url(#grad)"/>
|
||||||
|
|
||||||
|
<!-- Title -->
|
||||||
|
<text x="400" y="250" font-size="60" font-weight="bold" text-anchor="middle" fill="white" font-family="Arial">
|
||||||
|
David & Karo
|
||||||
|
</text>
|
||||||
|
|
||||||
|
<!-- Subtitle -->
|
||||||
|
<text x="400" y="320" font-size="36" text-anchor="middle" fill="white" font-family="Arial">
|
||||||
|
🌸 Team Projekt 🌸
|
||||||
|
</text>
|
||||||
|
|
||||||
|
<!-- Flowers -->
|
||||||
|
<text x="150" y="150" font-size="80">🌸</text>
|
||||||
|
<text x="650" y="150" font-size="80">🌺</text>
|
||||||
|
<text x="100" y="500" font-size="80">🌷</text>
|
||||||
|
<text x="700" y="500" font-size="80">🌼</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 943 B |
BIN
img/logo.png
Normal file
BIN
img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
30
img/logo.svg
Normal file
30
img/logo.svg
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||||
|
<!-- Background circle -->
|
||||||
|
<circle cx="50" cy="50" r="48" fill="#1e40af" opacity="0.1" stroke="#1e40af" stroke-width="2"/>
|
||||||
|
|
||||||
|
<!-- University building/icon -->
|
||||||
|
<g transform="translate(50, 50)">
|
||||||
|
<!-- Main building shape -->
|
||||||
|
<rect x="-25" y="-15" width="50" height="30" fill="#1e40af"/>
|
||||||
|
|
||||||
|
<!-- Roof -->
|
||||||
|
<polygon points="-25,-15 0,-30 25,-15" fill="#2563eb"/>
|
||||||
|
|
||||||
|
<!-- Door -->
|
||||||
|
<rect x="-8" y="5" width="16" height="20" fill="#fbbf24"/>
|
||||||
|
<circle cx="-2" cy="15" r="2" fill="#1e40af"/>
|
||||||
|
|
||||||
|
<!-- Windows left -->
|
||||||
|
<rect x="-18" y="-8" width="6" height="6" fill="#93c5fd"/>
|
||||||
|
<rect x="-18" y="2" width="6" height="6" fill="#93c5fd"/>
|
||||||
|
|
||||||
|
<!-- Windows right -->
|
||||||
|
<rect x="12" y="-8" width="6" height="6" fill="#93c5fd"/>
|
||||||
|
<rect x="12" y="2" width="6" height="6" fill="#93c5fd"/>
|
||||||
|
|
||||||
|
<!-- Flag pole -->
|
||||||
|
<rect x="0" y="-28" width="2" height="10" fill="#64748b"/>
|
||||||
|
<!-- Flag -->
|
||||||
|
<rect x="2" y="-27" width="8" height="5" fill="#2563eb"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
116
impressum.html
Normal file
116
impressum.html
Normal file
|
|
@ -0,0 +1,116 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="Impressum - Entwicklung interaktiver Softwareanwendungen">
|
||||||
|
<title>Impressum – EIS Projekt</title>
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
<link rel="icon" href="img/logo.png" type="image/png">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="header-container">
|
||||||
|
<div class="logo">
|
||||||
|
<img src="img/logo.png" alt="Logo">
|
||||||
|
<div class="logo-text">
|
||||||
|
<span class="institution">David & Karo</span>
|
||||||
|
<span class="project">EIS Projekt</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nav>
|
||||||
|
<a href="index.html">Start</a>
|
||||||
|
<a href="ueber_uns.html">Über uns</a>
|
||||||
|
<a href="eis_projekt.html">Projekt</a>
|
||||||
|
<a href="galerie.html">Galerie</a>
|
||||||
|
<a href="kontakt.html">Kontakt</a>
|
||||||
|
<a href="impressum.html" class="active">Impressum</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<h1>Impressum</h1>
|
||||||
|
<p>Die rechtlichen Infos – kurz und knapp 📋</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="impressum-section">
|
||||||
|
<h2>Angaben gemäß § 5 TMG</h2>
|
||||||
|
<h3>Verantwortlich für den Inhalt</h3>
|
||||||
|
<p>
|
||||||
|
<strong>David & Karo</strong><br>
|
||||||
|
EIS Projekt
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>Projektleitung & Inhaltsverantwortung</h3>
|
||||||
|
<p>
|
||||||
|
<strong>David</strong><br>
|
||||||
|
Email: <a href="mailto:david.kertzscher@stud.ph-weingarten.de">david.kertzscher@stud.ph-weingarten.de</a>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>Karo</strong><br>
|
||||||
|
Email: <a href="mailto:karolina.kibler@stud.ph-weingarten.de">karolina.kibler@stud.ph-weingarten.de</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>Über das Projekt</h3>
|
||||||
|
<p>
|
||||||
|
Diese Website ist unser persönliches Projekt – ein Showcase für innovative Webentwicklung
|
||||||
|
mit modernen Technologien. Hier zeigen wir, was wir können und bauen coole digitale Lösungen.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>Haftungsausschluss</h3>
|
||||||
|
<p>
|
||||||
|
Die Inhalte dieser Website werden mit größtmöglicher Sorgfalt erstellt.
|
||||||
|
Allerdings können keine Garantien für die Vollständigkeit, Richtigkeit und Aktualität
|
||||||
|
dieser Inhalte übernommen werden. Die Nutzung der bereitgestellten Informationen erfolgt
|
||||||
|
auf eigenes Risiko.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>Urheberrecht</h3>
|
||||||
|
<p>
|
||||||
|
Die auf dieser Website präsentierten Inhalte und Werke sind urheberrechtlich geschützt.
|
||||||
|
Vervielfältigungen, Bearbeitungen, Verbreitungen und jede Art der Verwertung außerhalb
|
||||||
|
der Grenzen des Urheberrechts bedürfen der schriftlichen Zustimmung der Autoren.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>Links zu externen Websites</h3>
|
||||||
|
<p>
|
||||||
|
Diese Website enthält Links zu externen Websites. Da wir für die Inhalte dieser
|
||||||
|
Websites nicht verantwortlich sind, verweisen wir auf die Haftungsausschlüsse der
|
||||||
|
Betreiber. Der Verweis auf fremde Websites gilt nicht als Billigung deren Inhalte.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>Datenschutz</h3>
|
||||||
|
<p>
|
||||||
|
Die Nutzung unserer Website ist in der Regel ohne Angabe personenbezogener Daten möglich.
|
||||||
|
Soweit personenbezogene Daten erhoben werden, erfolgt dies auf freiwilliger Basis.
|
||||||
|
Diese Daten werden nicht an Dritte weitergegeben.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>Kontakt bei Fragen</h3>
|
||||||
|
<p>
|
||||||
|
Bei Fragen oder Anliegen erreicht ihr uns unter:<br>
|
||||||
|
<a href="mailto:david.kertzscher@stud.ph-weingarten.de">david.kertzscher@stud.ph-weingarten.de</a> oder
|
||||||
|
<a href="mailto:karolina.kibler@stud.ph-weingarten.de">karolina.kibler@stud.ph-weingarten.de</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>Zuletzt aktualisiert</h3>
|
||||||
|
<p>
|
||||||
|
<strong>22. April 2026</strong>
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>© 2026 – Made with 💕 & ✨ – David & Karo</p>
|
||||||
|
<div class="footer-links">
|
||||||
|
<a href="impressum.html">Impressum</a>
|
||||||
|
<a href="kontakt.html">Kontakt</a>
|
||||||
|
<a href="#">Datenschutz</a>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
87
index.html
Normal file
87
index.html
Normal file
|
|
@ -0,0 +1,87 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="Entwicklung interaktiver Softwareanwendungen - David & Karo">
|
||||||
|
<title>Startseite – EIS Projekt</title>
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
<link rel="icon" href="img/logo.png" type="image/png">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="header-container">
|
||||||
|
<div class="logo">
|
||||||
|
<img src="img/logo.png" alt="Logo">
|
||||||
|
<div class="logo-text">
|
||||||
|
<span class="institution">David & Karo</span>
|
||||||
|
<span class="project">EIS Projekt</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nav>
|
||||||
|
<a href="index.html" class="active">Start</a>
|
||||||
|
<a href="ueber_uns.html">Über uns</a>
|
||||||
|
<a href="eis_projekt.html">Projekt</a>
|
||||||
|
<a href="galerie.html">Galerie</a>
|
||||||
|
<a href="kontakt.html">Kontakt</a>
|
||||||
|
<a href="impressum.html">Impressum</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<h1>✨ Entwicklung interaktiver Softwareanwendungen ✨</h1>
|
||||||
|
<p>🌸 Ein Projekt von David & Karo – interaktiv, kreativ, magisch 🌸</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>💕 Willkommen! 👋</h2>
|
||||||
|
<p>Willkommen in unserem interaktiven Projekt! Hier kreieren wir coole Softwareanwendungen und haben dabei mega viel Spaß.</p>
|
||||||
|
<p>Bereit für was Geniales? Let's go! 💅✨</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>🌹 Projekt-Übersicht 🌹</h2>
|
||||||
|
<div class="cards">
|
||||||
|
<div class="card">
|
||||||
|
<h3>📚 Über uns</h3>
|
||||||
|
<p>Lernen Sie die Dozenten und das Projekt kennen. Ein Überblick über Ziele und Inhalte – stay updated! ✨</p>
|
||||||
|
<a href="ueber_uns.html" class="btn">Mehr erfahren</a>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>💻 Das EIS-Projekt</h3>
|
||||||
|
<p>Entdecken Sie die technischen Details und Implementierungsmagic. Wir bauen was Geniales! 🚀</p>
|
||||||
|
<a href="eis_projekt.html" class="btn">Zum Projekt</a>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>📧 Kontakt</h3>
|
||||||
|
<p>Fragen? Feedback? Wir freuen uns immer auf eure Messages – hit us up! 💕</p>
|
||||||
|
<a href="kontakt.html" class="btn btn-secondary">Schreiben Sie uns</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>🌺 Letzte Updates 🌺</h2>
|
||||||
|
<ul>
|
||||||
|
<li><strong>22.04.2026:</strong> Website mit Rosa/Pink-Design & Blumen-Vibes launched! 🌸✨</li>
|
||||||
|
<li><strong>22.04.2026:</strong> Gen Z-freundliche Navigation & Animationen implemented 💅</li>
|
||||||
|
<li><strong>22.04.2026:</strong> Alle Seiten ready to go – check them out! 🚀</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>© 2026 – Made with 💕 & ✨ – David & Karo</p>
|
||||||
|
<div class="footer-links">
|
||||||
|
<a href="impressum.html">Impressum</a>
|
||||||
|
<a href="kontakt.html">Kontakt</a>
|
||||||
|
<a href="#">Datenschutz</a>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
178
js/script.js
Normal file
178
js/script.js
Normal file
|
|
@ -0,0 +1,178 @@
|
||||||
|
// ===========================
|
||||||
|
// Active Navigation Highlighting
|
||||||
|
// ===========================
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
// Highlight active navigation link
|
||||||
|
const currentLocation = location.pathname.split('/').pop() || 'index.html';
|
||||||
|
const navLinks = document.querySelectorAll('nav a');
|
||||||
|
|
||||||
|
navLinks.forEach(link => {
|
||||||
|
const href = link.getAttribute('href');
|
||||||
|
if (href === currentLocation) {
|
||||||
|
link.classList.add('active');
|
||||||
|
} else {
|
||||||
|
link.classList.remove('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initialize lightbox gallery
|
||||||
|
initializeLightbox();
|
||||||
|
|
||||||
|
// Initialize contact form
|
||||||
|
initializeContactForm();
|
||||||
|
});
|
||||||
|
|
||||||
|
// ===========================
|
||||||
|
// Lightbox Gallery
|
||||||
|
// ===========================
|
||||||
|
|
||||||
|
function initializeLightbox() {
|
||||||
|
const galleryImages = document.querySelectorAll('.galerie img');
|
||||||
|
|
||||||
|
galleryImages.forEach(img => {
|
||||||
|
img.addEventListener('click', function() {
|
||||||
|
openLightbox(this.src);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function openLightbox(imageSrc) {
|
||||||
|
// Create overlay
|
||||||
|
const overlay = document.createElement('div');
|
||||||
|
overlay.className = 'lightbox-overlay';
|
||||||
|
|
||||||
|
// Create image container
|
||||||
|
const imgContainer = document.createElement('div');
|
||||||
|
imgContainer.style.position = 'relative';
|
||||||
|
|
||||||
|
// Create close button
|
||||||
|
const closeBtn = document.createElement('span');
|
||||||
|
closeBtn.className = 'lightbox-close';
|
||||||
|
closeBtn.innerHTML = '×';
|
||||||
|
closeBtn.addEventListener('click', function(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
overlay.remove();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Create large image
|
||||||
|
const img = document.createElement('img');
|
||||||
|
img.src = imageSrc;
|
||||||
|
|
||||||
|
imgContainer.appendChild(closeBtn);
|
||||||
|
imgContainer.appendChild(img);
|
||||||
|
overlay.appendChild(imgContainer);
|
||||||
|
|
||||||
|
// Close on overlay click
|
||||||
|
overlay.addEventListener('click', function() {
|
||||||
|
overlay.remove();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close on Escape key
|
||||||
|
document.addEventListener('keydown', function(e) {
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
overlay.remove();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.body.appendChild(overlay);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ===========================
|
||||||
|
// Contact Form Handling
|
||||||
|
// ===========================
|
||||||
|
|
||||||
|
function initializeContactForm() {
|
||||||
|
const form = document.getElementById('contactForm');
|
||||||
|
const formMessage = document.getElementById('formMessage');
|
||||||
|
|
||||||
|
if (!form) return;
|
||||||
|
|
||||||
|
form.addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Get form data
|
||||||
|
const name = document.getElementById('name').value.trim();
|
||||||
|
const email = document.getElementById('email').value.trim();
|
||||||
|
const subject = document.getElementById('subject').value.trim();
|
||||||
|
const message = document.getElementById('message').value.trim();
|
||||||
|
|
||||||
|
// Validate
|
||||||
|
if (!name || !email || !subject || !message) {
|
||||||
|
showFormMessage('Bitte füllen Sie alle Felder aus.', 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validate email format
|
||||||
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||||
|
if (!emailRegex.test(email)) {
|
||||||
|
showFormMessage('Bitte geben Sie eine gültige E-Mail-Adresse ein.', 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show success message (in production, this would send to a server)
|
||||||
|
showFormMessage(
|
||||||
|
'Vielen Dank! Ihre Nachricht wurde erfolgreich eingegeben. ' +
|
||||||
|
'(In einer produktiven Umgebung würde diese an den Server gesendet.)',
|
||||||
|
'success'
|
||||||
|
);
|
||||||
|
|
||||||
|
// Reset form
|
||||||
|
form.reset();
|
||||||
|
|
||||||
|
console.log('Form data:', { name, email, subject, message });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function showFormMessage(message, type) {
|
||||||
|
const formMessage = document.getElementById('formMessage');
|
||||||
|
if (!formMessage) return;
|
||||||
|
|
||||||
|
formMessage.textContent = message;
|
||||||
|
formMessage.style.padding = '1rem';
|
||||||
|
formMessage.style.marginTop = '1rem';
|
||||||
|
formMessage.style.borderRadius = '6px';
|
||||||
|
formMessage.style.borderLeft = '4px solid';
|
||||||
|
|
||||||
|
if (type === 'success') {
|
||||||
|
formMessage.style.background = '#dcfce7';
|
||||||
|
formMessage.style.color = '#166534';
|
||||||
|
formMessage.style.borderLeftColor = '#16a34a';
|
||||||
|
} else if (type === 'error') {
|
||||||
|
formMessage.style.background = '#fee2e2';
|
||||||
|
formMessage.style.color = '#991b1b';
|
||||||
|
formMessage.style.borderLeftColor = '#dc2626';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove message after 5 seconds
|
||||||
|
setTimeout(() => {
|
||||||
|
formMessage.textContent = '';
|
||||||
|
formMessage.style.background = '';
|
||||||
|
formMessage.style.color = '';
|
||||||
|
}, 5000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ===========================
|
||||||
|
// Smooth Scroll (Progressive Enhancement)
|
||||||
|
// ===========================
|
||||||
|
|
||||||
|
document.addEventListener('click', function(e) {
|
||||||
|
if (e.target.tagName === 'A' && e.target.getAttribute('href').startsWith('#')) {
|
||||||
|
e.preventDefault();
|
||||||
|
const targetId = e.target.getAttribute('href').substring(1);
|
||||||
|
const targetElement = document.getElementById(targetId);
|
||||||
|
|
||||||
|
if (targetElement) {
|
||||||
|
targetElement.scrollIntoView({ behavior: 'smooth' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// ===========================
|
||||||
|
// Utility: Log
|
||||||
|
// ===========================
|
||||||
|
|
||||||
|
console.log('✅ EIS Website erfolgreich geladen!');
|
||||||
|
console.log('📚 Veranstaltung: Entwicklung interaktiver Softwareanwendungen');
|
||||||
|
console.log('🏫 Institution: PH Weingarten');
|
||||||
|
console.log('👨🏫 Dozenten: Stefan Franke und Prof. Dr. Wolfgang Müller');
|
||||||
114
kontakt.html
Normal file
114
kontakt.html
Normal file
|
|
@ -0,0 +1,114 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="Kontakt - Entwicklung interaktiver Softwareanwendungen">
|
||||||
|
<title>Kontakt – EIS Projekt</title>
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
<link rel="icon" href="img/logo.png" type="image/png">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="header-container">
|
||||||
|
<div class="logo">
|
||||||
|
<img src="img/logo.png" alt="Logo">
|
||||||
|
<div class="logo-text">
|
||||||
|
<span class="institution">David & Karo</span>
|
||||||
|
<span class="project">EIS Projekt</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nav>
|
||||||
|
<a href="index.html">Start</a>
|
||||||
|
<a href="ueber_uns.html">Über uns</a>
|
||||||
|
<a href="eis_projekt.html">Projekt</a>
|
||||||
|
<a href="galerie.html">Galerie</a>
|
||||||
|
<a href="kontakt.html" class="active">Kontakt</a>
|
||||||
|
<a href="impressum.html">Impressum</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<h1>Kontakt</h1>
|
||||||
|
<p>Sag Bescheid! Wir freuen uns auf deine Nachricht! 💌</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>📧 Kontaktinfos</h2>
|
||||||
|
<div class="cards">
|
||||||
|
<div class="card">
|
||||||
|
<h3>David</h3>
|
||||||
|
<p><strong>Email:</strong> <a href="mailto:david.kertzscher@stud.ph-weingarten.de">david.kertzscher@stud.ph-weingarten.de</a></p>
|
||||||
|
<p><strong>Vibe:</strong> Full-Stack Magic ✨</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>Karo</h3>
|
||||||
|
<p><strong>Email:</strong> <a href="mailto:karolina.kibler@stud.ph-weingarten.de">karolina.kibler@stud.ph-weingarten.de</a></p>
|
||||||
|
<p><strong>Vibe:</strong> Creative Developer 💫</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>💬 Kontaktformular</h2>
|
||||||
|
<p>Senden Sie uns eine Nachricht über das folgende Formular:</p>
|
||||||
|
<form id="contactForm">
|
||||||
|
<label for="name">Ihr Name *</label>
|
||||||
|
<input type="text" id="name" name="name" required>
|
||||||
|
|
||||||
|
<label for="email">E-Mail-Adresse *</label>
|
||||||
|
<input type="email" id="email" name="email" required>
|
||||||
|
|
||||||
|
<label for="subject">Betreff *</label>
|
||||||
|
<input type="text" id="subject" name="subject" required>
|
||||||
|
|
||||||
|
<label for="message">Nachricht *</label>
|
||||||
|
<textarea id="message" name="message" required></textarea>
|
||||||
|
|
||||||
|
<button type="submit" class="btn">Nachricht senden</button>
|
||||||
|
</form>
|
||||||
|
<div id="formMessage"></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>📍 Wo ihr uns findet</h2>
|
||||||
|
<p>Wir sind meistens im Web zu finden, aber auch gerne bereit für Meetings in der echten Welt! 🌍</p>
|
||||||
|
<p>
|
||||||
|
<strong>Online-Vibes:</strong><br>
|
||||||
|
Discord, Telegram, oder einfach eine DM 💬
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>❓ Fragen?</h2>
|
||||||
|
<div class="cards">
|
||||||
|
<div class="card">
|
||||||
|
<h3>🎨 Design-Fragen</h3>
|
||||||
|
<p>Karo hat immer ein offenes Ohr für deine kreativen Ideen!</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>💻 Tech-Fragen</h3>
|
||||||
|
<p>David kann dir helfen, wenn es um Code und Technik geht!</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>🤝 Kooperationen</h3>
|
||||||
|
<p>Lass uns zusammenarbeiten! Wir lieben neue Projekte! 🚀</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>© 2026 – Made with 💕 & ✨ – David & Karo</p>
|
||||||
|
<div class="footer-links">
|
||||||
|
<a href="impressum.html">Impressum</a>
|
||||||
|
<a href="kontakt.html">Kontakt</a>
|
||||||
|
<a href="#">Datenschutz</a>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
107
ueber_uns.html
Normal file
107
ueber_uns.html
Normal file
|
|
@ -0,0 +1,107 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="Über uns - Entwicklung interaktiver Softwareanwendungen">
|
||||||
|
<title>Über uns – EIS Projekt</title>
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
<link rel="icon" href="img/logo.png" type="image/png">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="header-container">
|
||||||
|
<div class="logo">
|
||||||
|
<img src="img/logo.png" alt="Logo">
|
||||||
|
<div class="logo-text">
|
||||||
|
<span class="institution">David & Karo</span>
|
||||||
|
<span class="project">EIS Projekt</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nav>
|
||||||
|
<a href="index.html">Start</a>
|
||||||
|
<a href="ueber_uns.html" class="active">Über uns</a>
|
||||||
|
<a href="eis_projekt.html">Projekt</a>
|
||||||
|
<a href="galerie.html">Galerie</a>
|
||||||
|
<a href="kontakt.html">Kontakt</a>
|
||||||
|
<a href="impressum.html">Impressum</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<h1>Über uns</h1>
|
||||||
|
<p>David & Karo – zwei kreative Köpfe, ein großes Projekt 💕</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>💡 Das Projekt</h2>
|
||||||
|
<p><strong>Entwicklung interaktiver Softwareanwendungen</strong> – das ist unser ding! Wir bauen innovative digitale Lösungen mit modernen Technologien.</p>
|
||||||
|
<p>Unser Fokus:</p>
|
||||||
|
<ul>
|
||||||
|
<li>💻 Frontend-Magie mit HTML, CSS und JavaScript</li>
|
||||||
|
<li>📱 Responsive & mobile-first Design</li>
|
||||||
|
<li>⚡ Interaktive User Experiences</li>
|
||||||
|
<li>🚀 Backend-Power mit Python & Co.</li>
|
||||||
|
<li>🎯 Clean Code & Best Practices</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>👯♀️ Wer wir sind</h2>
|
||||||
|
<div class="cards">
|
||||||
|
<div class="card">
|
||||||
|
<h3>David</h3>
|
||||||
|
<p>Full-Stack Developer mit Leidenschaft für coole Interfaces und saubere Code-Architektur.</p>
|
||||||
|
<p><strong>Skills:</strong> JavaScript, Python, Design</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>Karo</h3>
|
||||||
|
<p>Creative Developer, die Kreativität mit Technik verbindet und magische Momente schafft.</p>
|
||||||
|
<p><strong>Skills:</strong> UX/UI, Frontend, Animation</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>🚀 Projektstruktur</h2>
|
||||||
|
<p>Unser Projekt wächst in mehreren Phasen:</p>
|
||||||
|
<div class="cards">
|
||||||
|
<div class="card">
|
||||||
|
<h3>Phase 1: Foundation</h3>
|
||||||
|
<p>Solide Basis mit HTML, CSS und erste JavaScript-Interaktionen</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>Phase 2: Styling & Magic</h3>
|
||||||
|
<p>Design-Verfeinerung, Animationen und coolere JS-Features</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>Phase 3: Full Stack</h3>
|
||||||
|
<p>Backend-Integration mit Python und Datenbanken</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>Phase 4+: Advanced</h3>
|
||||||
|
<p>APIs, Authentifizierung, erweiterte Funktionen</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>💡 Vision</h2>
|
||||||
|
<p>Wir glauben an innovativen Code, durchdachtes Design und die Kraft von Technologie, um Ideen zum Leben zu erwecken. Unser Ziel: Websites und Apps, die nicht nur funktionieren, sondern auch die User zum Lächeln bringen.</p>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>© 2026 – Made with 💕 & ✨ – David & Karo</p>
|
||||||
|
<div class="footer-links">
|
||||||
|
<a href="impressum.html">Impressum</a>
|
||||||
|
<a href="kontakt.html">Kontakt</a>
|
||||||
|
<a href="#">Datenschutz</a>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in a new issue