commit fa67426d72b0f3397addf51fea584a15c38e7361 Author: DylanBarnes Date: Wed May 6 13:40:47 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/assets/projektinfo.pdf b/assets/projektinfo.pdf new file mode 100644 index 0000000..e69de29 diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..7b07c3f --- /dev/null +++ b/css/style.css @@ -0,0 +1,863 @@ +/* ====================== RESET & BASICS ====================== */ + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + color: #1e293b; + line-height: 1.6; + background-color: #f8fafc; +} + +/* ====================== HEADER & NAVIGATION ====================== */ + +header { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); + position: sticky; + top: 0; + z-index: 100; +} + +.navbar { + padding: 0; +} + +.nav-container { + max-width: 1400px; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.5rem 2.5rem; +} + +.logo { + color: white; + font-size: 2rem; + font-weight: 900; + letter-spacing: 2px; + text-transform: uppercase; + display: flex; + align-items: center; + gap: 0.8rem; + background: linear-gradient(135deg, #fff 0%, #fbbf24 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.logo::before { + content: "✨"; + font-size: 2rem; + background: none; + -webkit-text-fill-color: unset; + color: #fbbf24; +} + +.nav-menu { + display: flex; + list-style: none; + gap: 1.5rem; + align-items: center; +} + +.nav-menu a { + text-decoration: none; + color: rgba(255, 255, 255, 0.9); + font-weight: 700; + transition: all 0.4s ease; + padding: 0.8rem 1.5rem; + border-radius: 10px; + position: relative; + font-size: 1rem; + letter-spacing: 0.5px; +} + +.nav-menu a::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + width: 0; + height: 2px; + background: linear-gradient(90deg, #fbbf24, #f59e0b); + transition: all 0.4s ease; + transform: translateX(-50%); +} + +.nav-menu a:hover { + color: white; + background: rgba(255, 255, 255, 0.2); +} + +.nav-menu a:hover::after { + width: 80%; +} + +.nav-menu a.active { + color: #fbbf24; + background: rgba(251, 191, 36, 0.2); +} + +.nav-menu a.active::after { + width: 80%; +} + +.btn-download { + background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%); + color: white; + padding: 0.8rem 1.5rem; + border-radius: 10px; + transition: all 0.4s ease; + font-weight: 700; + border: none; + cursor: pointer; + box-shadow: 0 8px 20px rgba(249, 115, 22, 0.4); + font-size: 0.95rem; + letter-spacing: 0.5px; +} + +.btn-download:hover { + background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); + transform: translateY(-4px); + box-shadow: 0 12px 30px rgba(249, 115, 22, 0.6); +} + +.hamburger { + display: none; + flex-direction: column; + cursor: pointer; + gap: 7px; +} + +.hamburger span { + width: 30px; + height: 3px; + background: white; + transition: all 0.4s ease; + border-radius: 3px; +} + +.nav-menu.active ~ .hamburger span:nth-child(1) { + transform: rotate(45deg) translate(10px, 10px); + background: #fbbf24; +} + +.nav-menu.active ~ .hamburger span:nth-child(2) { + opacity: 0; +} + +.nav-menu.active ~ .hamburger span:nth-child(3) { + transform: rotate(-45deg) translate(9px, -9px); + background: #fbbf24; +} + +/* ====================== MAIN CONTENT ====================== */ + +main { + min-height: calc(100vh - 200px); + padding: 3rem 2rem; + max-width: 1200px; + margin: 0 auto; +} + +/* ====================== HERO SECTION ====================== */ + +.hero { + text-align: center; + padding: 3rem 0; + background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%); + border-radius: 12px; + margin-bottom: 3rem; +} + +.hero h1 { + font-size: 3rem; + margin-bottom: 1rem; + color: #0f172a; + letter-spacing: -0.5px; +} + +.hero p { + font-size: 1.25rem; + color: #475569; + max-width: 600px; + margin: 0 auto; +} + +/* ====================== PAGE HEADER ====================== */ + +.page-header { + text-align: center; + margin-bottom: 3rem; + padding: 2rem; + background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%); + border-radius: 12px; + border-left: 4px solid #2563eb; +} + +.page-header h1 { + font-size: 2.5rem; + margin-bottom: 0.5rem; + color: #0f172a; +} + +.page-header p { + font-size: 1.1rem; + color: #64748b; +} + +/* ====================== SECTIONS ====================== */ + +.content-section { + margin-bottom: 3rem; + background: white; + padding: 2rem; + border-radius: 12px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); +} + +.content-section h2 { + font-size: 2rem; + margin-bottom: 1rem; + color: #0f172a; + border-bottom: 3px solid #2563eb; + padding-bottom: 0.5rem; +} + +.content-section h3 { + font-size: 1.3rem; + margin: 1.5rem 0 0.5rem 0; + color: #1e293b; +} + +.content-section p { + margin-bottom: 1rem; + color: #475569; +} + +.content-section ul, +.content-section ol { + margin-left: 2rem; + margin-bottom: 1rem; +} + +.content-section li { + margin-bottom: 0.8rem; + color: #475569; +} + +a { + color: #2563eb; + text-decoration: none; + transition: color 0.3s ease; +} + +a:hover { + color: #1e40af; + text-decoration: underline; +} + +/* ====================== FEATURE GRID ====================== */ + +.feature-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + margin-top: 2rem; +} + +.feature-card { + background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); + padding: 2rem; + border-radius: 10px; + border-left: 4px solid #2563eb; + transition: all 0.3s ease; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); +} + +.feature-card:hover { + transform: translateY(-5px); + box-shadow: 0 8px 16px rgba(37, 99, 235, 0.2); +} + +.feature-card h3 { + margin-bottom: 0.5rem; + color: #1e40af; +} + +.feature-card p { + color: #475569; + margin: 0; +} + +/* ====================== BUTTONS ====================== */ + +.button-group { + display: flex; + gap: 1rem; + justify-content: center; + flex-wrap: wrap; + margin-top: 2rem; +} + +.btn { + padding: 0.875rem 1.75rem; + border: none; + border-radius: 8px; + font-size: 1rem; + font-weight: 600; + text-decoration: none; + cursor: pointer; + transition: all 0.3s ease; + display: inline-block; + text-align: center; +} + +.btn-primary { + background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); + color: white; + box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4); +} + +.btn-secondary { + background: white; + color: #2563eb; + border: 2px solid #2563eb; +} + +.btn-secondary:hover { + background: #f0f9ff; +} + +.cta-section { + text-align: center; + background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); + color: white; + padding: 3rem; + border-radius: 12px; + margin: 3rem 0; +} + +.cta-section h2 { + color: white; + border: none; + margin-bottom: 1.5rem; +} + +/* ====================== TECH GRID ====================== */ + +.tech-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 2rem; + margin-top: 2rem; +} + +.tech-card { + background: white; + padding: 1.5rem; + border-radius: 10px; + border: 2px solid #e2e8f0; + transition: all 0.3s ease; +} + +.tech-card:hover { + border-color: #2563eb; + box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1); +} + +.tech-card h3 { + color: #2563eb; + margin-bottom: 1rem; +} + +.tech-card ul { + list-style: none; + margin-left: 0; +} + +.tech-card li { + padding: 0.5rem 0; +} + +.tech-card li:before { + content: "✓ "; + color: #10b981; + font-weight: bold; + margin-right: 0.5rem; +} + +/* ====================== TEAM GRID ====================== */ + +.team-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 2rem; + margin-top: 2rem; +} + +.team-member { + background: white; + padding: 2rem; + border-radius: 10px; + text-align: center; + border: 2px solid #e2e8f0; + transition: all 0.3s ease; +} + +.team-member:hover { + transform: translateY(-5px); + border-color: #2563eb; + box-shadow: 0 8px 16px rgba(37, 99, 235, 0.1); +} + +.member-avatar { + font-size: 3rem; + margin-bottom: 1rem; +} + +.team-member h3 { + color: #2563eb; + margin-bottom: 0.5rem; +} + +.team-member p { + color: #64748b; + margin: 0; +} + +/* ====================== VALUES LIST ====================== */ + +.values-list { + list-style: none; + margin-left: 0; +} + +.values-list li { + padding: 1rem; + margin-bottom: 1rem; + background: #f1f5f9; + border-radius: 8px; + border-left: 4px solid #2563eb; +} + +.values-list strong { + color: #2563eb; +} + +/* ====================== FEATURE LIST ====================== */ + +.feature-list { + list-style: none; + margin-left: 0; +} + +.feature-list li { + padding: 0.75rem 0; + padding-left: 2rem; + position: relative; +} + +.feature-list li:before { + content: "★"; + position: absolute; + left: 0; + color: #2563eb; + font-weight: bold; +} + +/* ====================== LEARNING GOALS ====================== */ + +.learning-goals { + counter-reset: item; + list-style: none; + margin-left: 0; +} + +.learning-goals li { + counter-increment: item; + margin-bottom: 1rem; + padding-left: 2.5rem; + position: relative; +} + +.learning-goals li:before { + content: counter(item); + position: absolute; + left: 0; + top: 0; + background: #2563eb; + color: white; + width: 2rem; + height: 2rem; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; +} + +/* ====================== CONTACT PAGE ====================== */ + +.contact-container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; + margin-top: 2rem; +} + +.contact-info { + background: white; + padding: 2rem; + border-radius: 10px; + border: 2px solid #e2e8f0; +} + +.info-item { + margin-bottom: 2rem; +} + +.info-item h3 { + color: #2563eb; + margin-bottom: 0.5rem; +} + +.info-item p { + color: #475569; +} + +/* ====================== CONTACT FORM ====================== */ + +.contact-form { + background: white; + padding: 2rem; + border-radius: 10px; + border: 2px solid #e2e8f0; +} + +.form-group { + margin-bottom: 1.5rem; +} + +.form-group label { + display: block; + margin-bottom: 0.5rem; + font-weight: 600; + color: #1e293b; +} + +.form-group input, +.form-group textarea { + width: 100%; + padding: 0.75rem; + border: 2px solid #e2e8f0; + border-radius: 6px; + font-size: 1rem; + font-family: inherit; + transition: all 0.3s ease; +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border-color: #2563eb; + box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); +} + +.form-group.checkbox { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.form-group.checkbox input { + width: auto; +} + +.form-group.checkbox label { + margin: 0; +} + +.error-message { + display: block; + color: #dc2626; + font-size: 0.875rem; + margin-top: 0.25rem; + min-height: 1.25rem; +} + +.form-group.error input, +.form-group.error textarea { + border-color: #dc2626; +} + +.form-message { + margin-top: 1.5rem; + padding: 1rem; + border-radius: 6px; + display: none; + text-align: center; + font-weight: 600; +} + +.form-message.success { + display: block; + background-color: #dcfce7; + color: #166534; + border: 1px solid #10b981; +} + +.form-message.error { + display: block; + background-color: #fee2e2; + color: #991b1b; + border: 1px solid #ef4444; +} + +/* ====================== LEGAL CONTENT ====================== */ + +.legal-content { + margin-top: 1.5rem; +} + +.legal-content h3 { + margin-top: 2rem; + margin-bottom: 1rem; + color: #2563eb; +} + +.legal-content p { + margin-bottom: 1rem; + text-align: justify; +} + +.legal-content ul { + margin-bottom: 1rem; +} + +/* ====================== FOOTER ====================== */ + +footer { + background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); + color: #cbd5e1; + margin-top: 4rem; +} + +.footer-content { + max-width: 1200px; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + padding: 2rem; +} + +.footer-section h3 { + color: white; + margin-bottom: 1rem; +} + +.footer-section a { + color: #93c5fd; +} + +.footer-section a:hover { + color: white; +} + +.footer-section ul { + list-style: none; + margin-left: 0; +} + +.footer-section li { + margin-bottom: 0.5rem; +} + +/* ====================== MEDIA QUERIES ====================== */ + +@media (max-width: 768px) { + .nav-menu { + gap: 0; + } + + .nav-menu a { + padding: 1rem; + font-size: 1rem; + border-radius: 0; + width: 100%; + display: block; + text-align: center; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + } + + .nav-menu a::after { + display: none; + } + + .hero h1 { + font-size: 2rem; + } + + .hero p { + font-size: 1rem; + } + + .page-header h1 { + font-size: 1.8rem; + } + + .contact-container { + grid-template-columns: 1fr; + } + + .button-group { + flex-direction: column; + } + + .btn { + width: 100%; + } + + .feature-grid, + .tech-grid, + .team-grid { + grid-template-columns: 1fr; + } + + .hamburger { + display: flex; + } + + .logo { + font-size: 1.3rem; + gap: 0.5rem; + } + + .logo::before { + font-size: 1.5rem; + } + + .nav-container { + padding: 1rem 1.5rem; + } + + .nav-menu { + position: fixed; + left: -100%; + top: 75px; + flex-direction: column; + background: linear-gradient(180deg, #667eea 0%, #764ba2 100%); + width: 100%; + text-align: center; + transition: 0.5s ease; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); + gap: 0; + z-index: 999; + } + + .nav-menu li { + padding: 0; + } + + .nav-menu li:last-child { + border-bottom: none; + } + + .nav-menu.active { + left: 0; + } + + .btn-download { + margin: 1rem; + width: calc(100% - 2rem); + } +} + +@media (max-width: 480px) { + main { + padding: 1.5rem 1rem; + } + + .hero { + padding: 2rem 1rem; + } + + .hero h1 { + font-size: 1.5rem; + } + + .page-header { + padding: 1.5rem 1rem; + } + + .page-header h1 { + font-size: 1.5rem; + } + + .content-section { + padding: 1.5rem 1rem; + } + + .nav-container { + padding: 1rem; + } + + .footer-content { + grid-template-columns: 1fr; + padding: 1.5rem 1rem; + } +} + +/* ====================== ANIMATIONS ====================== */ + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.content-section { + animation: fadeIn 0.5s ease-out; +} + +/* ====================== GALLERY ====================== */ + +.galerie { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 1.5rem; + margin-top: 2rem; +} + +.galerie img { + width: 100%; + height: auto; + border-radius: 8px; + cursor: pointer; + transition: transform 0.3s ease; +} + +.galerie img:hover { + transform: scale(1.05); +} \ No newline at end of file diff --git a/eis_projekt.html b/eis_projekt.html new file mode 100644 index 0000000..98ab04f --- /dev/null +++ b/eis_projekt.html @@ -0,0 +1,124 @@ + + + + + + + Projekt - EIS + + + + + + +
+ +
+ +
+ +
+

EIS Projekt

+

Entwicklung interaktiver Softwareanwendungen

+
+ +
+

Projektübersicht

+

Das EIS-Projekt ist ein umfassendes Lernprojekt zur Entwicklung interaktiver Web-Anwendungen. Ziel dieses Projekts ist es, Studierenden praktische Erfahrungen mit modernen Web-Technologien zu vermitteln.

+
+ +
+

Projektmerkmale

+
    +
  • Responsive Design für alle Geräte
    • +
  • Interaktive Benutzeroberfläche
    • +
  • Formularvalidierung mit JavaScript
    • +
  • Moderne CSS3-Styling
    • +
  • Suchmaschinenoptimierung (SEO)
    • +
  • Barrierefreier Zugang (Accessibility)
    • +
+
+ +
+

Technologie Stack

+
+
+

Frontend

+
    +
  • HTML5
    • +
  • CSS3
    • +
  • JavaScript (ES6+)
    • +
+
+
+

Design

+
    +
  • Responsive Layout
    • +
  • Mobile-First Approach
    • +
  • Moderne UI/UX
    • +
+
+
+

Tools

+
    +
  • Git für Versionskontrolle
    • +
  • VS Code als Editor
    • +
  • Browser Developer Tools
    • +
+
+
+
+ +
+

Lernziele

+
    +
  1. Verständnis der Web-Standards und Best Practices
    2. +
  2. Fähigkeit zur Erstellung responsiver Websites
    3. +
  3. JavaScript für interaktive Funktionalität
    4. +
  4. Zusammenarbeit im Team und Versionskontrolle
    5. +
  5. Deployment und Hosting von Web-Anwendungen
    6. +
+
+ +
+ + + + + + + \ No newline at end of file diff --git a/img/favicon.png b/img/favicon.png new file mode 100644 index 0000000..e69de29 diff --git a/img/gruppenbild.jpg b/img/gruppenbild.jpg new file mode 100644 index 0000000..e69de29 diff --git a/img/logo.svg b/img/logo.svg new file mode 100644 index 0000000..e69de29 diff --git a/img/test.jpg b/img/test.jpg new file mode 100644 index 0000000..a96cd4b Binary files /dev/null and b/img/test.jpg differ diff --git a/img/test2.png b/img/test2.png new file mode 100644 index 0000000..1528563 Binary files /dev/null and b/img/test2.png differ diff --git a/impressum.html b/impressum.html new file mode 100644 index 0000000..ad43211 --- /dev/null +++ b/impressum.html @@ -0,0 +1,187 @@ + + + + + + + Impressum - EIS Projekt + + + + + + +
+ +
+ +
+ +
+

Impressum

+

Rechtliche Informationen und Angaben

+
+ +
+

Angaben zum Betreiber der Website

+ +
+

Inhaltlich Verantwortliche

+

+ Name: [Hier Namen der Studierenden einfügen]
+ E-Mail: info@beispiel.de
+ Telefon: +49 123 456789 +

+ +

Institution

+

+ Pädagogische Hochschule Weingarten
+ Kirchplatz 2
+ 88250 Weingarten
+ Deutschland
+ Telefon: +49 7351 509-0
+ Website: www.ph-weingarten.de +

+ +

Lehrveranstaltung

+

+ Diese Website ist ein Lernprojekt im Rahmen der Lehrveranstaltung
+ „Entwicklung interaktiver Softwareanwendungen (EIS)"
+ an der Pädagogischen Hochschule Weingarten. +

+
+
+ +
+

Datenschutzerklärung

+ +
+

1. Verantwortlicher für die Datenverarbeitung

+

+ Für diese Website verantwortlich ist die Pädagogische Hochschule Weingarten und die beteiligten Studierenden. +

+ +

2. Erfassung von Daten

+

+ Diese Website erfasst grundsätzlich keine persönlichen Daten automatisch. Eine Ausnahme gibt es beim Kontaktformular: Hier werden die eingegebenen Daten zur Bearbeitung Ihrer Anfrage verwendet. +

+ +

3. Kontaktformular

+

+ Bei Nutzung des Kontaktformulars werden Ihre Angaben (Name, E-Mail, Nachricht) erfasst und zur Beantwortung Ihrer Anfrage verarbeitet. Die Daten werden nicht an Dritte weitergegeben und nur für die Dauer der notwendigen Bearbeitung gespeichert. +

+ +

4. Server-Logdateien

+

+ Der Anbieter erhebt und speichert automatisch Informationen in den so genannten Server-Log-Dateien, die Ihr Browser übermittelt (z.B. IP-Adresse, Browsertyp, Zugriffsdatum und -uhrzeit). Diese Informationen werden verwendet, um die Funktionsfähigkeit der Website sicherzustellen. +

+ +

5. Externe Inhalte

+

+ Diese Website können externe Inhalte enthalten (z.B. PDF-Downloads). Mit dem Zugriff auf diese Inhalte können Daten an den jeweiligen Anbieter übermittelt werden. +

+ +

6. Ihre Rechte

+

+ Sie haben das Recht, jederzeit Auskunft über Ihre gespeicherten Daten zu erhalten sowie diese zu korrigieren oder löschen zu lassen. Kontaktieren Sie uns hierzu über die angegebene E-Mail-Adresse. +

+ +

7. Sicherheit

+

+ Wir treffen technische und organisatorische Maßnahmen, um Ihre Daten vor Missbrauch zu schützen. Diese Website nutzt eine sichere HTTPS-Verbindung, falls verfügbar. +

+
+
+ +
+

Urheberrecht und Lizenzen

+ +
+

Inhalte

+

+ Alle Inhalte dieser Website (Texte, Bilder, Grafiken, Layout) sind, sofern nicht anders gekennzeichnet, Eigentum der Studierenden und der Pädagogischen Hochschule Weingarten. Eine Vervielfältigung, Bearbeitung oder Verbreitung dieser Inhalte ist ohne ausdrückliche schriftliche Zustimmung nicht gestattet. +

+ +

Verwendete Technologien

+

+ Diese Website nutzt folgende Technologien und Standards: +

+
    +
  • HTML5
    • +
  • CSS3
    • +
  • JavaScript (unter Einhaltung von Web-Standards)
    • +
+
+
+ +
+

Haftungsausschluss

+ +
+

Haftung für Inhalte

+

+ Obwohl die Inhalte dieser Website mit Sorgfalt erstellt wurden, können wir für deren Richtigkeit, Vollständigkeit und Aktualität keine Gewähr übernehmen. Die Nutzung der Website erfolgt auf eigene Gefahr des Benutzers. +

+ +

Externe Links

+

+ Für den Inhalt extern verlinkter Seiten sind ausschließlich deren Betreiber verantwortlich. Wir sind nicht haftbar für den Inhalt von externen Websites. +

+ +

Lernprojekt

+

+ Diese Website ist ein Lernprojekt und dient zu Bildungszwecken. Sie wird zu Demonstrationszwecken bereitgestellt und ist möglicherweise nicht für den kommerziellen Einsatz bestimmt. +

+
+
+ +
+

Kontakt für Rechtsfragen

+

+ Bei Fragen zu dieser Impressum oder zum Datenschutz kontaktieren Sie bitte:
+ info@beispiel.de +

+
+ +
+ + + + + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..69b1131 --- /dev/null +++ b/index.html @@ -0,0 +1,94 @@ + + + + + + + Startseite - EIS Projekt + + + + + + +
+ +
+ +
+ +
+

Willkommen auf unserer Website!

+

Ein interaktives Lernprojekt im Bereich der Web-Entwicklung

+
+ +
+

Über dieses Projekt

+

Diese Website ist ein Lernprojekt im Rahmen der Lehrveranstaltung „Entwicklung interaktiver Softwareanwendungen" an der PH Weingarten. Hier präsentieren wir alles Wichtige über unser Projekt und unser Team.

+ +
+
+

🎓 Bildung

+

Erstellung von modernen, interaktiven Web-Anwendungen

+
+
+

💻 Technologie

+

HTML5, CSS3, und JavaScript für ein beeindruckendes Nutzererlebnis

+
+
+

🤝 Zusammenarbeit

+

Teamarbeit und kreative Problemlösungen

+
+
+
+ +
+

Erkunde unser Projekt

+
+ Zum Projekt → + Kontaktiere uns → +
+
+ +
+ + + + + + + \ No newline at end of file diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..2ad6be3 --- /dev/null +++ b/js/script.js @@ -0,0 +1,285 @@ +// ====================== MOBILE MENU TOGGLE ====================== + +document.addEventListener('DOMContentLoaded', () => { + const hamburger = document.querySelector('.hamburger'); + const navMenu = document.querySelector('.nav-menu'); + + if (hamburger) { + hamburger.addEventListener('click', () => { + navMenu.classList.toggle('active'); + }); + + // Close menu when a link is clicked + document.querySelectorAll('.nav-menu a').forEach(link => { + link.addEventListener('click', () => { + navMenu.classList.remove('active'); + }); + }); + } +}); + +// ====================== ACTIVE NAV HIGHLIGHTING ====================== + +document.addEventListener('DOMContentLoaded', () => { + const currentLocation = location.pathname; + const navLinks = document.querySelectorAll('.nav-menu a'); + + navLinks.forEach(link => { + if (link.getAttribute('href') === currentLocation) { + link.classList.add('active'); + } else { + link.classList.remove('active'); + } + }); +}); + +// ====================== CONTACT FORM VALIDATION ====================== + +const contactForm = document.getElementById('contactForm'); + +if (contactForm) { + contactForm.addEventListener('submit', (e) => { + e.preventDefault(); + + // Clear previous errors + clearErrors(); + + // Get form values + 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(); + const privacy = document.getElementById('privacy').checked; + + let isValid = true; + + // Validate name + if (name === '') { + showError('name', 'Bitte gib deinen Namen ein'); + isValid = false; + } else if (name.length < 2) { + showError('name', 'Der Name muss mindestens 2 Zeichen lang sein'); + isValid = false; + } + + // Validate email + if (email === '') { + showError('email', 'Bitte gib deine E-Mail ein'); + isValid = false; + } else if (!isValidEmail(email)) { + showError('email', 'Bitte gib eine gültige E-Mail ein'); + isValid = false; + } + + // Validate subject + if (subject === '') { + showError('subject', 'Bitte gib einen Betreff ein'); + isValid = false; + } else if (subject.length < 3) { + showError('subject', 'Der Betreff muss mindestens 3 Zeichen lang sein'); + isValid = false; + } + + // Validate message + if (message === '') { + showError('message', 'Bitte gib eine Nachricht ein'); + isValid = false; + } else if (message.length < 10) { + showError('message', 'Die Nachricht muss mindestens 10 Zeichen lang sein'); + isValid = false; + } + + // Validate privacy checkbox + if (!privacy) { + showError('privacy', 'Bitte akzeptiere die Datenschutzerklärung'); + isValid = false; + } + + // Submit form if valid + if (isValid) { + submitForm(); + } + }); +} + +function showError(fieldId, message) { + const field = document.getElementById(fieldId); + const errorElement = document.getElementById(fieldId + 'Error'); + + if (field && errorElement) { + field.parentElement.classList.add('error'); + errorElement.textContent = message; + } +} + +function clearErrors() { + const formGroups = document.querySelectorAll('.form-group'); + formGroups.forEach(group => { + group.classList.remove('error'); + const errorMessage = group.querySelector('.error-message'); + if (errorMessage) { + errorMessage.textContent = ''; + } + }); +} + +function isValidEmail(email) { + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + return emailRegex.test(email); +} + +function submitForm() { + const form = document.getElementById('contactForm'); + const formMessage = document.getElementById('formMessage'); + + // Show success message + formMessage.classList.remove('error'); + formMessage.classList.add('success'); + formMessage.textContent = '✓ Deine Nachricht wurde erfolgreich versendet! Wir werden uns bald mit dir in Verbindung setzen.'; + + // Reset form + form.reset(); + + // Hide message after 5 seconds + setTimeout(() => { + formMessage.classList.remove('success'); + formMessage.textContent = ''; + }, 5000); + + // Note: In a real application, you would send this data to a server + console.log('Form submitted:', { + name: document.getElementById('name').value, + email: document.getElementById('email').value, + phone: document.getElementById('phone').value, + subject: document.getElementById('subject').value, + message: document.getElementById('message').value + }); +} + +// ====================== GALLERY LIGHTBOX ====================== + +document.querySelectorAll('.galerie img').forEach(img => { + img.addEventListener('click', () => { + const overlay = document.createElement('div'); + overlay.style.cssText = + 'position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;' + + 'align-items:center;justify-content:center;cursor:pointer;z-index:999'; + + const big = document.createElement('img'); + big.src = img.src; + big.style.maxWidth = '90vw'; + big.style.maxHeight = '90vh'; + big.style.borderRadius = '8px'; + big.style.boxShadow = '0 20px 60px rgba(0,0,0,.3)'; + + // Close button + const closeBtn = document.createElement('button'); + closeBtn.innerHTML = '✕'; + closeBtn.style.cssText = + 'position:absolute;top:20px;right:20px;background:white;border:none;' + + 'width:40px;height:40px;border-radius:50%;font-size:24px;cursor:pointer;' + + 'font-weight:bold;color:#333;transition:all 0.3s ease;'; + + closeBtn.addEventListener('mouseover', () => { + closeBtn.style.background = '#f0f0f0'; + closeBtn.style.transform = 'scale(1.1)'; + }); + + closeBtn.addEventListener('mouseout', () => { + closeBtn.style.background = 'white'; + closeBtn.style.transform = 'scale(1)'; + }); + + closeBtn.addEventListener('click', (e) => { + e.stopPropagation(); + overlay.remove(); + }); + + overlay.appendChild(big); + overlay.appendChild(closeBtn); + + overlay.addEventListener('click', () => overlay.remove()); + + // Close on Escape key + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape') { + overlay.remove(); + } + }); + + document.body.appendChild(overlay); + }); +}); + +// ====================== SMOOTH SCROLL FOR ANCHOR LINKS ====================== + +document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + if (target) { + target.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + } + }); +}); + +// ====================== ADD ACTIVE CLASS TO NAV ON SCROLL ====================== + +window.addEventListener('scroll', () => { + const nav = document.querySelector('.navbar'); + if (window.scrollY > 100) { + nav.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)'; + } else { + nav.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.1)'; + } +}); + +// ====================== PHONE NUMBER FORMATTING (optional) ====================== + +const phoneInput = document.getElementById('phone'); +if (phoneInput) { + phoneInput.addEventListener('input', (e) => { + let value = e.target.value.replace(/\D/g, ''); + if (value.length > 0) { + if (value.length <= 4) { + value = value; + } else if (value.length <= 7) { + value = value.slice(0, 4) + ' ' + value.slice(4); + } else { + value = value.slice(0, 4) + ' ' + value.slice(4, 7) + ' ' + value.slice(7, 11); + } + } + e.target.value = value; + }); +} + +// ====================== INTERSECTION OBSERVER FOR ANIMATIONS ====================== + +const observerOptions = { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' +}; + +const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateY(0)'; + } + }); +}, observerOptions); + +document.querySelectorAll('.content-section').forEach(section => { + section.style.opacity = '0'; + section.style.transform = 'translateY(20px)'; + section.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; + observer.observe(section); +}); + +// ====================== UTILITY: CONSOLE MESSAGE ====================== + +console.log('%c🎉 Welcome to EIS Project!', 'color: #2563eb; font-size: 20px; font-weight: bold;'); +console.log('%cThis website is a learning project for interactive software development at PH Weingarten.', 'color: #475569; font-size: 14px;'); \ No newline at end of file diff --git a/kontakt.html b/kontakt.html new file mode 100644 index 0000000..7b588e5 --- /dev/null +++ b/kontakt.html @@ -0,0 +1,136 @@ + + + + + + + Kontakt - EIS Projekt + + + + + + +
+ +
+ +
+ +
+

Kontaktiere uns

+

Wir freuen uns auf deine Nachricht

+
+ +
+
+
+

Kontaktinformationen

+ +
+

📧 E-Mail

+

info@beispiel.de

+
+ +
+

📱 Telefon

+

+49 123 456789

+
+ +
+

📍 Adresse

+

Pädagogische Hochschule Weingarten
Kirchplatz 2
88250 Weingarten
Deutschland

+
+ +
+

⏰ Öffnungszeiten

+

Montag - Freitag: 8:00 - 17:00 Uhr
Samstag & Sonntag: Geschlossen

+
+
+ +
+

Nachricht senden

+ +
+ + + +
+ +
+ + + +
+ +
+ + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ + +
+
+
+
+ +
+ + + + + + + \ No newline at end of file diff --git a/ueber_uns.html b/ueber_uns.html new file mode 100644 index 0000000..332b8e8 --- /dev/null +++ b/ueber_uns.html @@ -0,0 +1,118 @@ + + + + + + + Über uns - EIS Projekt + + + + + + +
+ +
+ +
+ +
+

Über uns

+

Lerne unser Team kennen

+
+ +
+

Wer wir sind

+

Wir sind eine Gruppe von Studierenden an der Pädagogischen Hochschule Weingarten, die gemeinsam dieses Projekt entwickelt haben. Unser Team bringt vielfältige Fähigkeiten und Perspektiven mit, um dieses innovative Lernprojekt zu realisieren.

+
+ +
+

Das Team

+
+
+
👤
+

Teamleiter/in

+

Koordination und Projektmanagement

+
+
+
💻
+

Frontend-Entwickler/in

+

Gestaltung und Benutzeroberfläche

+
+
+
🎨
+

Designer/in

+

Visuelles Design und UX

+
+
+
✍️
+

Content Creator

+

Inhalte und Dokumentation

+
+
+
+ +
+

Unsere Mission

+

Unsere Mission ist es, eine ansprechende und funktionale Website zu entwickeln, die nicht nur den Anforderungen des Projekts entspricht, sondern auch Best Practices im Web-Design und der Softwareentwicklung demonstriert.

+
+ +
+

Unsere Werte

+
    +
  • Qualität: Wir streben nach höchster Qualität in allem, was wir tun
    • +
  • Zusammenarbeit: Teamarbeit ist das Fundament unseres Erfolgs
    • +
  • Innovation: Wir sind ständig auf der Suche nach neuen Ideen und Technologien
    • +
  • Lernen: Kontinuierliches Lernen ist ein wichtiger Teil unserer Kultur
    • +
  • Benutzerorientierung: Der Nutzer steht im Zentrum unserer Überlegungen
    • +
+
+ +
+

Universität

+

Dieses Projekt ist Teil der Lehrveranstaltung „Entwicklung interaktiver Softwareanwendungen" an der Pädagogischen Hochschule Weingarten. Die PH Weingarten ist eine anerkannte Institution für Lehrerbildung und Forschung.

+
+ +
+ + + + + + + \ No newline at end of file