diff --git a/cooking.jpg b/assets/cooking.jpg similarity index 100% rename from cooking.jpg rename to assets/cooking.jpg diff --git a/event-create.css b/css/event_create.css similarity index 100% rename from event-create.css rename to css/event_create.css diff --git a/css/event_overview_stylesheet.css b/css/event_overview.css similarity index 100% rename from css/event_overview_stylesheet.css rename to css/event_overview.css diff --git a/stylesheet.css b/css/landingpage.css similarity index 100% rename from stylesheet.css rename to css/landingpage.css diff --git a/css/login_signup.css b/css/login_signup.css new file mode 100644 index 0000000..f2d2e93 --- /dev/null +++ b/css/login_signup.css @@ -0,0 +1,323 @@ +/* Grundlegende Resets */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + background-color: #f5f5f5; + display: flex; + flex-direction: column; + min-height: 100vh; +} + +/* Header Styles */ +.header { + background-color: white; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + padding: 15px 30px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.header-logo { + font-size: 24px; + font-weight: bold; + color: #0084ff; + text-decoration: none; + letter-spacing: 1px; +} + +.header-buttons { + display: flex; + gap: 15px; + align-items: center; +} + +.header-btn { + padding: 10px 20px; + border: none; + border-radius: 4px; + font-size: 14px; + font-weight: bold; + cursor: pointer; + transition: all 0.3s ease; + text-decoration: none; + display: inline-block; +} + +.header-btn-secondary { + background-color: transparent; + color: #0084ff; + border: 2px solid #0084ff; +} + +.header-btn-secondary:hover { + background-color: #0084ff; + color: white; +} + +.header-btn-primary { + background-color: #0084ff; + color: white; +} + +.header-btn-primary:hover { + background-color: #0073e6; +} + +/* Main content wrapper */ +.main-content { + display: flex; + justify-content: center; + align-items: center; + flex: 1; + padding: 20px; +} + +.container { + background-color: white; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + max-width: 1000px; + width: 100%; + display: flex; + gap: 20px; + overflow: hidden; +} + +.image-section { + flex: 1; + background-color: #e8f4f8; + display: flex; + align-items: center; + justify-content: center; + min-height: 500px; +} + +.image-section img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.form-section { + flex: 1; + padding: 40px; + display: flex; + flex-direction: column; + justify-content: center; +} + +/* Formularelemente */ +h1 { + color: #333; + margin-bottom: 20px; + text-align: center; +} + +.info-box { + background-color: #e8f4f8; + border-left: 4px solid #0084ff; + padding: 15px; + margin-bottom: 30px; + border-radius: 4px; + font-size: 14px; + color: #333; + line-height: 1.5; +} + +.form-group { + margin-bottom: 20px; +} + +label { + display: block; + margin-bottom: 6px; + color: #333; + font-weight: bold; + font-size: 14px; +} + +input[type="text"], +input[type="email"], +input[type="password"] { + width: 100%; + padding: 12px; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 14px; + transition: border-color 0.3s ease; + font-family: Arial, sans-serif; +} + +input:focus { + outline: none; + border-color: #0084ff; + box-shadow: 0 0 5px rgba(0, 132, 255, 0.3); +} + +button { + width: 100%; + padding: 12px; + background-color: #0084ff; + color: white; + border: none; + border-radius: 4px; + font-size: 16px; + font-weight: bold; + cursor: pointer; + transition: background-color 0.3s ease; + margin-top: 10px; +} + +button:hover { + background-color: #0073e6; +} + +button:active { + background-color: #0063cc; +} + +/* Hilfstexte & Fehler */ +.signup-hint, .login-hint { + text-align: center; + margin-top: 20px; + color: #666; + font-size: 14px; +} + +.signup-hint a, .login-hint a { + color: #0084ff; + text-decoration: none; + font-weight: bold; + transition: color 0.3s ease; +} + +.signup-hint a:hover, .login-hint a:hover { + text-decoration: underline; +} + +.error-message { + color: #d32f2f; + font-size: 13px; + margin-top: 5px; + display: none; +} + +.form-group.has-error input { + border-color: #d32f2f; + box-shadow: 0 0 5px rgba(211, 47, 47, 0.3); +} + +.form-group.has-error .error-message { + display: block; +} + +/* Modal / Popup Styles */ +.modal { + display: none; + position: fixed; + z-index: 1000; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.4); + animation: fadeIn 0.3s ease; +} + +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +.modal.show { + display: flex; + justify-content: center; + align-items: center; +} + +.modal-content { + background-color: white; + padding: 40px; + border-radius: 8px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); + max-width: 500px; + width: 90%; + text-align: center; + animation: slideIn 0.3s ease; +} + +@keyframes slideIn { + from { transform: translateY(-50px); opacity: 0; } + to { transform: translateY(0); opacity: 1; } +} + +.modal-header { + position: relative; + margin-bottom: 20px; +} + +.modal-header h2 { + color: #0084ff; + font-size: 24px; +} + +.close-btn { + position: absolute; + right: 0; + top: 0; + font-size: 28px; + color: #999; + background: none; + border: none; + cursor: pointer; + width: 30px; + height: 30px; + display: flex; + align-items: center; + justify-content: center; +} + +.modal-body { + color: #333; + font-size: 16px; + line-height: 1.6; + margin-bottom: 30px; +} + +.modal-footer { + display: flex; + gap: 10px; + justify-content: center; +} + +/* Responsive Anpassungen */ +@media (max-width: 768px) { + .container { + flex-direction: column; + } + + .image-section { + min-height: 300px; + } + + .header { + flex-direction: column; + gap: 15px; + } + + .header-buttons { + width: 100%; + flex-direction: column; + } + + .header-btn { + width: 100%; + text-align: center; + } +} \ No newline at end of file diff --git a/css/stylesheet.css b/css/stylesheet.css deleted file mode 100644 index e69de29..0000000 diff --git a/event-create.html b/event_create.html similarity index 98% rename from event-create.html rename to event_create.html index da5d6b0..b011885 100644 --- a/event-create.html +++ b/event_create.html @@ -4,8 +4,7 @@ Event erstellen | Invité - - +
@@ -347,6 +346,6 @@

© Social Cooking

- + \ No newline at end of file diff --git a/event_detail.html b/event_detail.html index 22044dd..1b63324 100644 --- a/event_detail.html +++ b/event_detail.html @@ -4,7 +4,7 @@ Event-Detail - + @@ -22,7 +22,7 @@ - + diff --git a/event_overview.html b/event_overview.html index 0fdc248..15e5c48 100644 --- a/event_overview.html +++ b/event_overview.html @@ -4,7 +4,7 @@ Event-Overview - +
@@ -31,6 +31,6 @@
- + \ No newline at end of file diff --git a/landing-page.html b/index.html similarity index 95% rename from landing-page.html rename to index.html index 37e5dbb..2b8c444 100644 --- a/landing-page.html +++ b/index.html @@ -4,7 +4,7 @@ Social Cooking Wireframe - +
@@ -61,5 +61,6 @@
+ \ No newline at end of file diff --git a/event-create.js b/js/event_create.js similarity index 100% rename from event-create.js rename to js/event_create.js diff --git a/js/event_overview_script.js b/js/event_overview.js similarity index 100% rename from js/event_overview_script.js rename to js/event_overview.js diff --git a/js/javascript.js b/js/javascript.js deleted file mode 100644 index e69de29..0000000 diff --git a/javascript.js b/js/landingpage.js similarity index 100% rename from javascript.js rename to js/landingpage.js diff --git a/js/login.js b/js/login.js new file mode 100644 index 0000000..d916722 --- /dev/null +++ b/js/login.js @@ -0,0 +1,69 @@ +const loginForm = document.getElementById('loginForm'); +const emailInput = document.getElementById('email'); +const passwortInput = document.getElementById('passwort'); +const emailError = document.getElementById('emailError'); +const passwortError = document.getElementById('passwortError'); + +// Validierungsfunktion +function validateForm(event) { + event.preventDefault(); + + let isValid = true; + + // Email-Validierung + const emailValue = emailInput.value.trim(); + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + const emailGroup = emailInput.parentElement; + + if (!emailValue) { + emailGroup.classList.add('has-error'); + emailError.textContent = 'Bitte gib deine E-Mail Adresse ein.'; + isValid = false; + } else if (!emailRegex.test(emailValue)) { + emailGroup.classList.add('has-error'); + emailError.textContent = 'Bitte gib eine gültige E-Mail Adresse ein.'; + isValid = false; + } else { + emailGroup.classList.remove('has-error'); + } + + // Passwort-Validierung + const passwortValue = passwortInput.value; + const passwortGroup = passwortInput.parentElement; + + if (!passwortValue) { + passwortGroup.classList.add('has-error'); + passwortError.textContent = 'Bitte gib dein Passwort ein.'; + isValid = false; + } else if (passwortValue.length < 6) { + passwortGroup.classList.add('has-error'); + passwortError.textContent = 'Dein Passwort ist zu kurz. Bitte überprüfe dein Passwort.'; + isValid = false; + } else { + passwortGroup.classList.remove('has-error'); + } + + // Wenn alle Validierungen bestanden, Form absenden + if (isValid) { + alert('Login erfolgreich! (Dies ist eine Demo)'); + // Hier würde später die Anmeldung zum Backend gesendet + } +} + +// Fehlerbehandlung bei Input-Änderung (entfernt Fehler wenn Benutzer korrigiert) +emailInput.addEventListener('input', function() { + const emailGroup = this.parentElement; + if (this.value.trim()) { + emailGroup.classList.remove('has-error'); + } +}); + +passwortInput.addEventListener('input', function() { + const passwortGroup = this.parentElement; + if (this.value) { + passwortGroup.classList.remove('has-error'); + } +}); + +// Form Submit Event +loginForm.addEventListener('submit', validateForm); \ No newline at end of file diff --git a/js/signup.js b/js/signup.js new file mode 100644 index 0000000..eb5d1b8 --- /dev/null +++ b/js/signup.js @@ -0,0 +1,125 @@ +const signupForm = document.getElementById('signupForm'); +const vornameInput = document.getElementById('vorname'); +const nachnameInput = document.getElementById('nachname'); +const emailInput = document.getElementById('email'); +const passwortInput = document.getElementById('passwort'); +const welcomeModal = document.getElementById('welcomeModal'); + +// Funktion zum Öffnen des Welcome Modals +function openWelcomeModal() { + welcomeModal.classList.add('show'); + document.body.style.overflow = 'hidden'; +} + +// Funktion zum Schließen des Welcome Modals +function closeWelcomeModal() { + welcomeModal.classList.remove('show'); + document.body.style.overflow = 'auto'; +} + +// Validierungsfunktion +function validateForm(event) { + event.preventDefault(); + + let isValid = true; + + // Vorname-Validierung + const vornameValue = vornameInput.value.trim(); + const vornameGroup = vornameInput.parentElement; + + if (!vornameValue) { + vornameGroup.classList.add('has-error'); + isValid = false; + } else { + vornameGroup.classList.remove('has-error'); + } + + // Nachname-Validierung + const nachnameValue = nachnameInput.value.trim(); + const nachnameGroup = nachnameInput.parentElement; + + if (!nachnameValue) { + nachnameGroup.classList.add('has-error'); + isValid = false; + } else { + nachnameGroup.classList.remove('has-error'); + } + + // Email-Validierung + const emailValue = emailInput.value.trim(); + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + const emailGroup = emailInput.parentElement; + + if (!emailValue) { + emailGroup.classList.add('has-error'); + document.getElementById('emailError').textContent = 'Bitte gib deine E-Mail Adresse ein.'; + isValid = false; + } else if (!emailRegex.test(emailValue)) { + emailGroup.classList.add('has-error'); + document.getElementById('emailError').textContent = 'Bitte gib eine gültige E-Mail Adresse ein.'; + isValid = false; + } else { + emailGroup.classList.remove('has-error'); + } + + // Passwort-Validierung + const passwortValue = passwortInput.value; + const passwortGroup = passwortInput.parentElement; + + if (!passwortValue) { + passwortGroup.classList.add('has-error'); + document.getElementById('passwortError').textContent = 'Bitte gib ein Passwort ein.'; + isValid = false; + } else if (passwortValue.length < 8) { + passwortGroup.classList.add('has-error'); + document.getElementById('passwortError').textContent = 'Dein Passwort muss mindestens 8 Zeichen lang sein.'; + isValid = false; + } else { + passwortGroup.classList.remove('has-error'); + } + + // Wenn alle Validierungen bestanden, Modal anzeigen + if (isValid) { + openWelcomeModal(); + // Hier würde später die Registrierung zum Backend gesendet + } +} + +// Fehlerbehandlung bei Input-Änderung (entfernt Fehler wenn Benutzer korrigiert) +vornameInput.addEventListener('input', function() { + const vornameGroup = this.parentElement; + if (this.value.trim()) { + vornameGroup.classList.remove('has-error'); + } +}); + +nachnameInput.addEventListener('input', function() { + const nachnameGroup = this.parentElement; + if (this.value.trim()) { + nachnameGroup.classList.remove('has-error'); + } +}); + +emailInput.addEventListener('input', function() { + const emailGroup = this.parentElement; + if (this.value.trim()) { + emailGroup.classList.remove('has-error'); + } +}); + +passwortInput.addEventListener('input', function() { + const passwortGroup = this.parentElement; + if (this.value) { + passwortGroup.classList.remove('has-error'); + } +}); + +// Modal schließen wenn außerhalb geklickt wird +welcomeModal.addEventListener('click', function(event) { + if (event.target === welcomeModal) { + closeWelcomeModal(); + } +}); + +// Form Submit Event +signupForm.addEventListener('submit', validateForm); \ No newline at end of file diff --git a/kontakt.html b/kontakt.html deleted file mode 100644 index 87907ad..0000000 --- a/kontakt.html +++ /dev/null @@ -1,573 +0,0 @@ - - - - - - Kontaktseite - Invité - - - - - -
- -
- - Login -
-
- - -
-
-
- Social Cooking -
- -
-

Erstelle deinen Account

- -
- Hinweis: Sichtbar auf der Plattform ist nur der Vorname, erst einer Anmeldung zum Event ist der Nachname für die Teilnehmenden sichtbar. -
- -
-
- - -
Bitte gib deinen Vornamen ein.
-
- -
- - -
Bitte gib deinen Nachnamen ein.
-
- -
- - -
Bitte gib eine gültige E-Mail Adresse ein.
-
- -
- - -
Dein Passwort muss mindestens 8 Zeichen lang sein.
-
- - - - -
-
-
-
- - - - - - - diff --git a/login.html b/login.html index 4cdbcdd..fe624e4 100644 --- a/login.html +++ b/login.html @@ -4,241 +4,7 @@ Login - Social Cooking - - + @@ -246,7 +12,7 @@
- Anmeldung + Anmeldung
@@ -254,7 +20,7 @@
- Social Cooking + Social Cooking
@@ -276,83 +42,12 @@
- - + diff --git a/signup.html b/signup.html new file mode 100644 index 0000000..db2098b --- /dev/null +++ b/signup.html @@ -0,0 +1,85 @@ + + + + + + Kontaktseite - Invité + + + + +
+ +
+ + Login +
+
+ + +
+
+
+ Social Cooking +
+ +
+

Erstelle deinen Account

+ +
+ Hinweis: Sichtbar auf der Plattform ist nur der Vorname, erst einer Anmeldung zum Event ist der Nachname für die Teilnehmenden sichtbar. +
+ +
+
+ + +
Bitte gib deinen Vornamen ein.
+
+ +
+ + +
Bitte gib deinen Nachnamen ein.
+
+ +
+ + +
Bitte gib eine gültige E-Mail Adresse ein.
+
+ +
+ + +
Dein Passwort muss mindestens 8 Zeichen lang sein.
+
+ + + + +
+
+
+
+ + + + + +