commit 9b04f70d011865b2b0b6a2fbdb2a69cb01b933cb Author: David Kertzscher Date: Wed May 6 13:39:29 2026 +0000 Erste Version der Website diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..85433ce --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +*.save +*.swp +*~ +.DS_Store diff --git a/README.md b/README.md new file mode 100644 index 0000000..9e2ef26 --- /dev/null +++ b/README.md @@ -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 diff --git a/assets/projektinfo.pdf b/assets/projektinfo.pdf new file mode 100644 index 0000000..80e976e --- /dev/null +++ b/assets/projektinfo.pdf @@ -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 diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..ac2a83f --- /dev/null +++ b/css/style.css @@ -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; + } +} diff --git a/eis_projekt.html b/eis_projekt.html new file mode 100644 index 0000000..ee20bf3 --- /dev/null +++ b/eis_projekt.html @@ -0,0 +1,174 @@ + + + + + + + Das Projekt – EIS + + + + +
+
+ + +
+
+ +
+
+

Das EIS-Projekt

+

Innovative Webentwicklung mit modernem Tech-Stack & magischem Design ✨

+
+ +
+

💻 Technologie-Stack

+
+
+

Frontend

+
    +
  • HTML5
    • +
  • CSS3 (Responsive Design)
    • +
  • JavaScript (ES6+)
    • +
  • DOM-Manipulation
    • +
+
+
+

Backend

+
    +
  • Python 3
    • +
  • Flask
    • +
  • RESTful APIs
    • +
  • SQL-Datenbanken
    • +
+
+
+

Infrastruktur

+
    +
  • Linux Server (Ubuntu)
    • +
  • SSH-Zugang
    • +
  • Dateiserver (public_html)
    • +
  • SFTP/SCP
    • +
+
+
+
+ +
+

📁 Projektstruktur

+

Die Website folgt einer klaren, wartbaren Verzeichnisstruktur:

+ 
~/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
+
+ +
+

🎨 Design-Prinzipien

+
    +
  • Responsives Design: Optimiert für Mobile, Tablet und Desktop
    • +
  • Semantisches HTML: Barrierefreiheit und SEO
    • +
  • Clean Code: Lesbare und wartbare Struktur
    • +
  • Konsistentes Styling: Zentralisierte CSS-Verwaltung
    • +
  • User Experience: Interaktive Elemente und angenehme Navigation
    • +
+
+ +
+

⚙️ Funktionen

+
+
+

Navigation

+

Einheitliche Navigation auf allen Seiten mit aktiv-Zustand

+
+
+

Responsive Layout

+

CSS Grid und Flexbox für flexible Layouts auf allen Geräten

+
+
+

Lightbox-Galerie

+

Interaktive Bildergalerie mit Modal-Ansicht (JavaScript)

+
+
+

Kontaktformular

+

Frontend-Validierung und Backend-Integration (kommend)

+
+
+
+ +
+

🌐 Deployment

+

Die Website ist live unter:

+
+

Live-URL: isa##.edumake.de

+

(## wird durch die Benutzernummer ersetzt)

+
+

Alle Änderungen im Verzeichnis sind sofort live – so geht moderne Web-Entwicklung! 🚀

+
+ +
+

📝 Projektressourcen

+

Folgende Materialien unterstützen die Entwicklung:

+
+ 📄 Projektinfo herunterladen (PDF) +
+
+ +
+

🚀 Entwicklungsschritte

+
    +
  1. U1: Website-Struktur und erste HTML-Seite
    2. +
  2. U2: Styling mit CSS und interaktive JavaScript-Elemente
    3. +
  3. U3: Mehrseitige Website mit Navigation und Inhaltsstruktur (aktuell)
    4. +
  4. U4: Backend mit Python und Flask hinzufügen
    5. +
  5. U5+: Datenbankanbindung, APIs, erweiterte Funktionen
    6. +
+
+ +
+

📸 Bildergalerie

+

Hier können später Screenshots und Bilder des Projekts eingefügt werden:

+
+ +

Bildergalerie wird nach dem Hochladen von Bildern gefüllt.

+
+
+
+ + + + + + diff --git a/galerie.html b/galerie.html new file mode 100644 index 0000000..d076ae8 --- /dev/null +++ b/galerie.html @@ -0,0 +1,86 @@ + + + + + + + Galerie – EIS Projekt + + + + +
+
+ + +
+
+ +
+
+

📸 Galerie

+

Einblicke in unser Projekt – Bilder, Screenshots & Behind-the-Scenes 🌸

+
+ +
+

🖼️ Unser Team

+

Hier findet ihr Bilder aus unserem Team und vom Projekt:

+
+ Team David & Karo +
+
+ +
+

📱 Projekt Screenshots

+

Verschiedene Ansichten und Details des Projekts:

+
+ +

Screenshots werden hier angezeigt, wenn verfügbar 📸

+
+
+ +
+

🎨 Design-Inspiration

+

Die Ästhetik hinter unserem Projekt – Rosa, Pink, Blumen & Gen Z Vibes:

+
+ +

Design-Inspirationen kommen bald! 🌸✨

+
+
+ +
+

💾 Downloads

+

Wichtige Dateien und Dokumente zum Projekt:

+
+

📄 Projektinformationen

+

📥 projektinfo.pdf herunterladen

+

PDF mit allen wichtigen Projektdetails, Struktur und Informationen

+
+
+
+ + + + + + diff --git a/img/favicon.svg b/img/favicon.svg new file mode 100644 index 0000000..aca7b6f --- /dev/null +++ b/img/favicon.svg @@ -0,0 +1,4 @@ + + + E + diff --git a/img/gruppenbild.jpg b/img/gruppenbild.jpg new file mode 100644 index 0000000..55878fa --- /dev/null +++ b/img/gruppenbild.jpg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + David & Karo + + + + + 🌸 Team Projekt 🌸 + + + + 🌸 + 🌺 + 🌷 + 🌼 + diff --git a/img/logo.png b/img/logo.png new file mode 100644 index 0000000..9cbc26d Binary files /dev/null and b/img/logo.png differ diff --git a/img/logo.svg b/img/logo.svg new file mode 100644 index 0000000..a5d58c6 --- /dev/null +++ b/img/logo.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/impressum.html b/impressum.html new file mode 100644 index 0000000..c66331b --- /dev/null +++ b/impressum.html @@ -0,0 +1,116 @@ + + + + + + + Impressum – EIS Projekt + + + + +
+
+ + +
+
+ +
+
+

Impressum

+

Die rechtlichen Infos – kurz und knapp 📋

+
+ +
+

Angaben gemäß § 5 TMG

+

Verantwortlich für den Inhalt

+

+ David & Karo
+ EIS Projekt +

+ +

Projektleitung & Inhaltsverantwortung

+

+ David
+ Email: david.kertzscher@stud.ph-weingarten.de +

+

+ Karo
+ Email: karolina.kibler@stud.ph-weingarten.de +

+ +

Über das Projekt

+

+ 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. +

+ +

Haftungsausschluss

+

+ 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. +

+ +

Urheberrecht

+

+ 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. +

+ +

Links zu externen Websites

+

+ 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. +

+ +

Datenschutz

+

+ 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. +

+ +

Kontakt bei Fragen

+

+ Bei Fragen oder Anliegen erreicht ihr uns unter:
+ david.kertzscher@stud.ph-weingarten.de oder + karolina.kibler@stud.ph-weingarten.de +

+ +

Zuletzt aktualisiert

+

+ 22. April 2026 +

+
+
+ + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..efef8a8 --- /dev/null +++ b/index.html @@ -0,0 +1,87 @@ + + + + + + + Startseite – EIS Projekt + + + + +
+
+ + +
+
+ +
+
+

✨ Entwicklung interaktiver Softwareanwendungen ✨

+

🌸 Ein Projekt von David & Karo – interaktiv, kreativ, magisch 🌸

+
+ +
+

💕 Willkommen! 👋

+

Willkommen in unserem interaktiven Projekt! Hier kreieren wir coole Softwareanwendungen und haben dabei mega viel Spaß.

+

Bereit für was Geniales? Let's go! 💅✨

+
+ +
+

🌹 Projekt-Übersicht 🌹

+
+
+

📚 Über uns

+

Lernen Sie die Dozenten und das Projekt kennen. Ein Überblick über Ziele und Inhalte – stay updated! ✨

+ Mehr erfahren +
+
+

💻 Das EIS-Projekt

+

Entdecken Sie die technischen Details und Implementierungsmagic. Wir bauen was Geniales! 🚀

+ Zum Projekt +
+
+

📧 Kontakt

+

Fragen? Feedback? Wir freuen uns immer auf eure Messages – hit us up! 💕

+ Schreiben Sie uns +
+
+
+ +
+

🌺 Letzte Updates 🌺

+
    +
  • 22.04.2026: Website mit Rosa/Pink-Design & Blumen-Vibes launched! 🌸✨
    • +
  • 22.04.2026: Gen Z-freundliche Navigation & Animationen implemented 💅
    • +
  • 22.04.2026: Alle Seiten ready to go – check them out! 🚀
    • +
+
+
+ + + + + + + diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..109734d --- /dev/null +++ b/js/script.js @@ -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'); diff --git a/kontakt.html b/kontakt.html new file mode 100644 index 0000000..af7e9b2 --- /dev/null +++ b/kontakt.html @@ -0,0 +1,114 @@ + + + + + + + Kontakt – EIS Projekt + + + + +
+
+ + +
+
+ +
+
+

Kontakt

+

Sag Bescheid! Wir freuen uns auf deine Nachricht! 💌

+
+ +
+

📧 Kontaktinfos

+
+
+

David

+

Email: david.kertzscher@stud.ph-weingarten.de

+

Vibe: Full-Stack Magic ✨

+
+
+

Karo

+

Email: karolina.kibler@stud.ph-weingarten.de

+

Vibe: Creative Developer 💫

+
+
+
+ +
+

💬 Kontaktformular

+

Senden Sie uns eine Nachricht über das folgende Formular:

+
+ + + + + + + + + + + + + +
+
+
+ +
+

📍 Wo ihr uns findet

+

Wir sind meistens im Web zu finden, aber auch gerne bereit für Meetings in der echten Welt! 🌍

+

+ Online-Vibes:
+ Discord, Telegram, oder einfach eine DM 💬 +

+
+ +
+

❓ Fragen?

+
+
+

🎨 Design-Fragen

+

Karo hat immer ein offenes Ohr für deine kreativen Ideen!

+
+
+

💻 Tech-Fragen

+

David kann dir helfen, wenn es um Code und Technik geht!

+
+
+

🤝 Kooperationen

+

Lass uns zusammenarbeiten! Wir lieben neue Projekte! 🚀

+
+
+
+
+ + + + + + diff --git a/ueber_uns.html b/ueber_uns.html new file mode 100644 index 0000000..b821232 --- /dev/null +++ b/ueber_uns.html @@ -0,0 +1,107 @@ + + + + + + + Über uns – EIS Projekt + + + + +
+
+ + +
+
+ +
+
+

Über uns

+

David & Karo – zwei kreative Köpfe, ein großes Projekt 💕

+
+ +
+

💡 Das Projekt

+

Entwicklung interaktiver Softwareanwendungen – das ist unser ding! Wir bauen innovative digitale Lösungen mit modernen Technologien.

+

Unser Fokus:

+
    +
  • 💻 Frontend-Magie mit HTML, CSS und JavaScript
    • +
  • 📱 Responsive & mobile-first Design
    • +
  • ⚡ Interaktive User Experiences
    • +
  • 🚀 Backend-Power mit Python & Co.
    • +
  • 🎯 Clean Code & Best Practices
    • +
+
+ +
+

👯‍♀️ Wer wir sind

+
+
+

David

+

Full-Stack Developer mit Leidenschaft für coole Interfaces und saubere Code-Architektur.

+

Skills: JavaScript, Python, Design

+
+
+

Karo

+

Creative Developer, die Kreativität mit Technik verbindet und magische Momente schafft.

+

Skills: UX/UI, Frontend, Animation

+
+
+
+ +
+

🚀 Projektstruktur

+

Unser Projekt wächst in mehreren Phasen:

+
+
+

Phase 1: Foundation

+

Solide Basis mit HTML, CSS und erste JavaScript-Interaktionen

+
+
+

Phase 2: Styling & Magic

+

Design-Verfeinerung, Animationen und coolere JS-Features

+
+
+

Phase 3: Full Stack

+

Backend-Integration mit Python und Datenbanken

+
+
+

Phase 4+: Advanced

+

APIs, Authentifizierung, erweiterte Funktionen

+
+
+
+ +
+

💡 Vision

+

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.

+
+
+ + + + + +