diff --git a/.gitignore b/.gitignore index 418fe5d..0029b67 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,4 @@ *.swp *~ .DS_Store - +venv/ diff --git a/app.py b/app.py new file mode 100644 index 0000000..d9ff89d --- /dev/null +++ b/app.py @@ -0,0 +1,10 @@ +from flask import Flask + +app = Flask(__name__) + +@app.route("/") +def hello(): + return "Willkommen in unserem Escape Room!" + +if __name__ == "__main__": + app.run(host="0.0.0.0", port=9006) # 90 + Raumnummer diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..64e2efb --- /dev/null +++ b/css/style.css @@ -0,0 +1,376 @@ +/* ================================ + EIS PROJEKT – STYLE (CLEAN) +================================ */ + +*, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --pink: #f9a8c9; + --rose: #e8679a; + --violet: #9b59b6; + --cream: #fff8f3; + --text: #2d1a2e; + --muted: #7a5c7e; +} + +/* ================================ + BASE +================================ */ + +body { + font-family: 'DM Sans', sans-serif; + background: var(--cream); + color: var(--text); + min-height: 100vh; + overflow-x: hidden; +} + +/* ================================ + NAVIGATION +================================ */ + +nav { + position: sticky; + top: 0; + z-index: 100; + background: rgba(255, 248, 243, 0.85); + backdrop-filter: blur(12px); + border-bottom: 1px solid rgba(232, 103, 154, 0.15); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 2.5rem; + height: 64px; +} + +.nav-logo { + font-family: 'Playfair Display', serif; + font-size: 1.3rem; + color: var(--rose); +} + +.nav-links { + display: flex; + gap: 2rem; + list-style: none; +} + +.nav-links a { + text-decoration: none; + font-size: 0.9rem; + font-weight: 500; + color: var(--muted); + transition: 0.2s; +} + +.nav-links a:hover { + color: var(--rose); +} + +/* ================================ + HERO +================================ */ + +.hero { + position: relative; + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + min-height: 88vh; + padding: 4rem 2.5rem; + gap: 3rem; +} + +.hero::before { + content: ''; + position: absolute; + inset: 0; + background: + radial-gradient(ellipse 70% 60% at 80% 50%, rgba(249,168,201,0.25), transparent), + radial-gradient(ellipse 50% 50% at 10% 80%, rgba(155,89,182,0.1), transparent); +} + +.hero-content { + position: relative; + z-index: 1; +} + +.hero-tag { + display: inline-flex; + font-size: 0.78rem; + padding: 6px 14px; + background: rgba(232,103,154,0.1); + border: 1px solid rgba(232,103,154,0.2); + border-radius: 100px; + color: var(--rose); + margin-bottom: 1rem; +} + +.hero h1 { + font-family: 'Playfair Display', serif; + font-size: 3rem; + line-height: 1.1; +} + +.hero h1 span { + background: linear-gradient(135deg, var(--rose), var(--violet)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.hero p { + color: var(--muted); + margin-top: 1rem; + max-width: 420px; +} + +/* ================================ + BUTTONS +================================ */ + +.btn-group { + margin-top: 2rem; + display: flex; + gap: 1rem; +} + +.btn-primary { + background: linear-gradient(135deg, var(--rose), var(--violet)); + color: white; + padding: 13px 26px; + border-radius: 50px; + text-decoration: none; +} + +.btn-ghost { + border: 1px solid rgba(232,103,154,0.4); + color: var(--rose); + padding: 13px 26px; + border-radius: 50px; + text-decoration: none; +} + +/* ================================ + HERO IMAGE +================================ */ + +.hero-visual { + display: flex; + justify-content: center; +} + +.img-frame { + position: relative; + max-width: 420px; +} + +.img-frame img { + width: 100%; + border-radius: 20px; +} + +.img-badge { + position: absolute; + bottom: -16px; + left: 24px; + background: white; + padding: 10px 18px; + border-radius: 14px; +} + +/* ================================ + SECTIONS +================================ */ + +section { + padding: 5rem 2.5rem; + max-width: 1100px; + margin: auto; +} + +.section-label { + font-size: 0.75rem; + color: var(--rose); + text-transform: uppercase; +} + +.section-title { + font-family: 'Playfair Display'; + margin: 1rem 0; +} + +.section-sub { + color: var(--muted); + max-width: 600px; +} + +/* ================================ + STATS +================================ */ + +.stats-row { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; + margin-top: 2rem; +} + +.stat-card { + background: white; + padding: 2rem; + border-radius: 20px; + text-align: center; +} + +.stat-num { + font-size: 2rem; + color: var(--rose); +} + +/* ================================ + GALLERY +================================ */ + +.gallery-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1rem; +} + +.gallery-card { + position: relative; + overflow: hidden; + border-radius: 16px; + background: #f0e8ef; +} + +.gallery-card img { + width: 100%; + height: 240px; + object-fit: cover; +} + +/* ================================ + CTA +================================ */ + +.info-strip { + background: linear-gradient(135deg, var(--rose), var(--violet)); + padding: 3rem; + border-radius: 24px; + display: flex; + justify-content: space-between; + color: white; +} + +/* ================================ + FOOTER +================================ */ + +footer { + text-align: center; + padding: 2rem; + background: var(--text); + color: white; +} + +/* ================================ + RESPONSIVE +================================ */ + +@media (max-width: 768px) { + .hero { + grid-template-columns: 1fr; + } + + .gallery-grid { + grid-template-columns: 1fr; + } + + .stats-row { + grid-template-columns: 1fr; + } +} + +input#punkteInput { + padding: 12px 16px; + border-radius: 12px; + border: 2px solid rgba(0,0,0,0.1); + margin: 15px 0; + width: 220px; + font-size: 1rem; +} + +#ergebnis { + margin-top: 15px; + font-weight: 600; +} + +.progress-container { + width: 100%; + max-width: 300px; + height: 14px; + background: #eee; + border-radius: 20px; + overflow: hidden; + margin-top: 15px; +} + +#progressBar { + height: 100%; + width: 0%; + transition: width 0.4s ease; + background: green; + border-radius: 20px; +} + +/* ================================ + DARK MODE (WICHTIG: AUSSERHALB MEDIA QUERY) +================================ */ + + +body.dark { + background-color: #1e293b; + color: #e2e8f0; + --cream: #120d14; + --text: #f5e9f2; + --muted: #c7b2c9; +} + +body.dark nav { + background-color: #0f172a; + border-color: #334155; +} + +body.dark a { + color: #60a5fa; +} + + + + + + + + + + + + +body.dark .stat-card, +body.dark .gallery-card { + background: #1b141d; +} + +body.dark .img-badge { + background: #1b141d; + color: var(--text); +} + +body.dark footer { + background: #0d0a10; +} \ No newline at end of file diff --git a/eis_projekt.html b/eis_projekt.html index d5fd461..c2fb688 100644 --- a/eis_projekt.html +++ b/eis_projekt.html @@ -7,7 +7,7 @@ Projekt – Studienprojekt 2026 - + @@ -15,14 +15,19 @@
@@ -161,5 +166,5 @@ - + \ No newline at end of file diff --git a/hallo.py b/hallo.py new file mode 100644 index 0000000..af3f144 --- /dev/null +++ b/hallo.py @@ -0,0 +1,2 @@ +print("Hallo Welt") +print(3 + 5) \ No newline at end of file diff --git a/impressum.html b/impressum.html index 390bc9b..33fb6ac 100644 --- a/impressum.html +++ b/impressum.html @@ -7,7 +7,7 @@ Impressum – Studienprojekt 2026 - + @@ -16,14 +16,19 @@
@@ -94,5 +99,5 @@ - + \ No newline at end of file diff --git a/index.html b/index.html index 33fe9e9..2b79e25 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ Eis Projekt - + @@ -13,15 +13,19 @@
@@ -109,5 +113,5 @@ - + \ No newline at end of file diff --git a/js/notenrechner.js b/js/notenrechner.js new file mode 100644 index 0000000..e45abed --- /dev/null +++ b/js/notenrechner.js @@ -0,0 +1,54 @@ +function berechneNote(p) { + if (p >= 90) return "sehr gut"; + if (p >= 75) return "gut"; + if (p >= 60) return "befriedigend"; + if (p >= 50) return "ausreichend"; + return "nicht bestanden"; +} + +function getFarbe(note) { + switch (note) { + case "sehr gut": + case "gut": + return "green"; + case "befriedigend": + return "orange"; + case "ausreichend": + return "orangered"; + default: + return "red"; + } +} + +document.addEventListener("DOMContentLoaded", () => { + const input = document.getElementById("punkteInput"); + const btn = document.getElementById("berechnenBtn"); + const output = document.getElementById("ergebnis"); + const bar = document.getElementById("progressBar"); + + btn.addEventListener("click", () => { + const wert = parseFloat(input.value); + + // VALIDIERUNG + const isValid = + !isNaN(wert) && wert >= 0 && wert <= 100; + + input.style.borderColor = isValid ? "" : "red"; + + if (!isValid) { + output.textContent = "Bitte gültige Punkte (0–100) eingeben!"; + output.style.color = "red"; + bar.style.width = "0%"; + return; + } + + const note = berechneNote(wert); + const farbe = getFarbe(note); + + output.textContent = `${wert}% = ${note}`; + output.style.color = farbe; + + bar.style.width = wert + "%"; + bar.style.background = farbe; + }); +}); \ No newline at end of file diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..6f36a1d --- /dev/null +++ b/js/script.js @@ -0,0 +1,20 @@ +document.addEventListener("DOMContentLoaded", () => { + const toggle = document.getElementById("dark-mode-toggle"); + + // gespeicherten Zustand laden + if (localStorage.getItem("darkMode") === "true") { + document.body.classList.add("dark"); + toggle.textContent = "Light Mode"; + } + + toggle.addEventListener("click", () => { + document.body.classList.toggle("dark"); + + const isDark = document.body.classList.contains("dark"); + + localStorage.setItem("darkMode", isDark); + + // Button Text ändern + toggle.textContent = isDark ? "Light Mode" : "Dark Mode"; + }); +}); \ No newline at end of file diff --git a/js/textanalyse.js b/js/textanalyse.js new file mode 100644 index 0000000..f3b55fc --- /dev/null +++ b/js/textanalyse.js @@ -0,0 +1,27 @@ +window.analyseText = function (text) { + const sauberesText = text.trim(); + + const zeichen = sauberesText.length; + const wörter = sauberesText.split(/\s+/).filter(Boolean).length; + const upper = sauberesText.toUpperCase(); + + return ` +Zeichen: ${zeichen} +Wörter: ${wörter} +Großbuchstaben: ${upper} + `; +}; + +window.startAnalyse = function () { + const text = prompt("Gib einen Text ein:"); + + if (typeof text !== "string" || text.trim() === "") { + alert("Fehler: Kein gültiger Text eingegeben!"); + return; + } + + const result = window.analyseText(text); + + console.log(result); + alert(result); +}; \ No newline at end of file diff --git a/kontakt.html b/kontakt.html index 049e65a..deb94a8 100644 --- a/kontakt.html +++ b/kontakt.html @@ -7,7 +7,7 @@ Kontakt – Studienprojekt 2026 - + @@ -15,16 +15,20 @@ @@ -114,5 +118,5 @@ - + \ No newline at end of file diff --git a/notenrechner.html b/notenrechner.html new file mode 100644 index 0000000..e489b61 --- /dev/null +++ b/notenrechner.html @@ -0,0 +1,59 @@ + + + + + + +Notenrechner – Studienprojekt 2026 + + + + + + + + + +
+
+
📊 DOM Notenrechner
+ +

Notenrechner

+ +

Punkte eingeben und Note direkt auf der Seite erhalten.

+ + + + + +

+ +
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/script.js b/script.js deleted file mode 100644 index 433f1d0..0000000 --- a/script.js +++ /dev/null @@ -1,20 +0,0 @@ -document.querySelector("form")?.addEventListener("submit", function (e) { - e.preventDefault(); - alert("Nachricht gesendet 💖"); -}); - -function toggleDarkMode() { - document.body.classList.toggle("dark"); - - if (document.body.classList.contains("dark")) { - localStorage.setItem("theme", "dark"); - } else { - localStorage.setItem("theme", "light"); - } -} - -window.addEventListener("load", () => { - if (localStorage.getItem("theme") === "dark") { - document.body.classList.add("dark"); - } -}); \ No newline at end of file diff --git a/style.css b/style.css deleted file mode 100644 index 86ba420..0000000 --- a/style.css +++ /dev/null @@ -1,514 +0,0 @@ -/* ================================ - EIS PROJEKT – style.css - ================================ */ - -*, *::before, *::after { - box-sizing: border-box; - margin: 0; - padding: 0; -} - -:root { - --pink: #f9a8c9; - --rose: #e8679a; - --violet: #9b59b6; - --cream: #fff8f3; - --text: #2d1a2e; - --muted: #7a5c7e; -} - -body { - font-family: 'DM Sans', sans-serif; - background: var(--cream); - color: var(--text); - min-height: 100vh; - overflow-x: hidden; -} - -/* ── NAVIGATION ── */ -nav { - position: sticky; - top: 0; - z-index: 100; - background: rgba(255, 248, 243, 0.85); - backdrop-filter: blur(12px); - border-bottom: 1px solid rgba(232, 103, 154, 0.15); - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 2.5rem; - height: 64px; -} - -.nav-logo { - font-family: 'Playfair Display', serif; - font-size: 1.3rem; - color: var(--rose); - letter-spacing: 0.02em; -} - -.nav-links { - display: flex; - gap: 2rem; - list-style: none; -} - -.nav-links a { - text-decoration: none; - font-size: 0.9rem; - font-weight: 500; - color: var(--muted); - letter-spacing: 0.04em; - transition: color 0.2s; -} - -.nav-links a:hover { - color: var(--rose); -} - -/* ── HERO ── */ -.hero { - position: relative; - display: grid; - grid-template-columns: 1fr 1fr; - align-items: center; - min-height: 88vh; - padding: 4rem 2.5rem; - gap: 3rem; - overflow: hidden; -} - -.hero::before { - content: ''; - position: absolute; - inset: 0; - background: - radial-gradient(ellipse 70% 60% at 80% 50%, rgba(249, 168, 201, 0.25) 0%, transparent 70%), - radial-gradient(ellipse 50% 50% at 10% 80%, rgba(155, 89, 182, 0.1) 0%, transparent 60%); - pointer-events: none; -} - -.hero-content { - position: relative; - z-index: 1; -} - -.hero-tag { - display: inline-flex; - align-items: center; - gap: 6px; - font-size: 0.78rem; - font-weight: 500; - letter-spacing: 0.1em; - text-transform: uppercase; - color: var(--rose); - background: rgba(232, 103, 154, 0.1); - padding: 6px 14px; - border-radius: 100px; - margin-bottom: 1.5rem; - border: 1px solid rgba(232, 103, 154, 0.2); -} - -.hero h1 { - font-family: 'Playfair Display', serif; - font-size: clamp(2.8rem, 5vw, 4.2rem); - line-height: 1.1; - margin-bottom: 1.5rem; - color: var(--text); -} - -.hero h1 span { - background: linear-gradient(135deg, var(--rose), var(--violet)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} - -.hero p { - font-size: 1.05rem; - line-height: 1.75; - color: var(--muted); - max-width: 420px; - margin-bottom: 2.5rem; -} - -.btn-group { - display: flex; - gap: 1rem; - flex-wrap: wrap; -} - -.btn-primary { - display: inline-flex; - align-items: center; - gap: 8px; - background: linear-gradient(135deg, var(--rose), var(--violet)); - color: white; - padding: 13px 26px; - border-radius: 50px; - font-size: 0.9rem; - font-weight: 500; - text-decoration: none; - transition: transform 0.2s, box-shadow 0.2s; - box-shadow: 0 4px 20px rgba(232, 103, 154, 0.35); -} - -.btn-primary:hover { - transform: translateY(-2px); - box-shadow: 0 6px 28px rgba(232, 103, 154, 0.45); -} - -.btn-ghost { - display: inline-flex; - align-items: center; - gap: 8px; - color: var(--rose); - padding: 13px 26px; - border-radius: 50px; - font-size: 0.9rem; - font-weight: 500; - text-decoration: none; - border: 1.5px solid rgba(232, 103, 154, 0.35); - transition: background 0.2s, border-color 0.2s; -} - -.btn-ghost:hover { - background: rgba(232, 103, 154, 0.07); - border-color: var(--rose); -} - -/* ── HERO IMAGE ── */ -.hero-visual { - position: relative; - z-index: 1; - display: flex; - align-items: center; - justify-content: center; -} - -.img-frame { - position: relative; - width: 100%; - max-width: 420px; -} - -.img-frame::before { - content: ''; - position: absolute; - top: -12px; - left: -12px; - right: 12px; - bottom: 12px; - border: 2px solid rgba(232, 103, 154, 0.25); - border-radius: 24px; - z-index: 0; -} - -.img-frame img { - position: relative; - z-index: 1; - width: 100%; - height: 360px; - object-fit: cover; - border-radius: 20px; - display: block; -} - -.img-badge { - position: absolute; - bottom: -16px; - left: 24px; - background: white; - border-radius: 14px; - padding: 10px 18px; - display: flex; - align-items: center; - gap: 10px; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); - z-index: 2; -} - -.badge-icon { - font-size: 1.5rem; -} - -.badge-text { - font-size: 0.8rem; - font-weight: 500; - color: var(--text); - line-height: 1.3; -} - -.badge-text span { - display: block; - font-size: 0.7rem; - color: var(--muted); -} - -/* ── SECTIONS ── */ -section { - padding: 5rem 2.5rem; - max-width: 1100px; - margin: 0 auto; -} - -.section-label { - font-size: 0.75rem; - font-weight: 500; - letter-spacing: 0.12em; - text-transform: uppercase; - color: var(--rose); - margin-bottom: 0.75rem; -} - -.section-title { - font-family: 'Playfair Display', serif; - font-size: clamp(1.8rem, 3vw, 2.4rem); - margin-bottom: 1rem; - color: var(--text); -} - -.section-sub { - font-size: 1rem; - color: var(--muted); - max-width: 560px; - line-height: 1.7; - margin-bottom: 3rem; -} - -/* ── STATS ── */ -.stats-row { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 1.5rem; - margin-top: 3rem; -} - -.stat-card { - text-align: center; - padding: 2rem 1.5rem; - border: 1px solid rgba(232, 103, 154, 0.18); - border-radius: 20px; - background: white; -} - -.stat-num { - font-family: 'Playfair Display', serif; - font-size: 2.5rem; - color: var(--rose); - display: block; - margin-bottom: 0.4rem; -} - -.stat-label { - font-size: 0.85rem; - color: var(--muted); -} - -/* ── GALLERY ── */ -.gallery-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 1.25rem; -} - -.gallery-col { - display: flex; - flex-direction: column; - gap: 1.25rem; -} - -.gallery-card { - border-radius: 16px; - overflow: hidden; - position: relative; - background: #f0e8ef; -} - -.gallery-card img { - width: 100%; - height: 240px; - object-fit: cover; - display: block; - transition: transform 0.4s ease; -} - -.gallery-card.tall img { - height: 360px; -} - -.gallery-col .gallery-card img { - height: 160px; -} - -.gallery-card:hover img { - transform: scale(1.04); -} - -.gallery-overlay { - position: absolute; - inset: 0; - background: linear-gradient(to top, rgba(45, 26, 46, 0.6) 0%, transparent 50%); - opacity: 0; - transition: opacity 0.3s; - display: flex; - align-items: flex-end; - padding: 1.25rem; -} - -.gallery-card:hover .gallery-overlay { - opacity: 1; -} - -.gallery-overlay-text { - color: white; - font-size: 0.85rem; - font-weight: 500; -} - -/* ── CTA STRIP ── */ -.cta-section { - padding-top: 0; -} - -.info-strip { - background: linear-gradient(135deg, var(--rose), var(--violet)); - border-radius: 24px; - padding: 3rem 3.5rem; - display: grid; - grid-template-columns: 1fr auto; - align-items: center; - gap: 2rem; -} - -.info-strip h3 { - font-family: 'Playfair Display', serif; - font-size: 1.8rem; - color: white; - margin-bottom: 0.5rem; -} - -.info-strip p { - color: rgba(255, 255, 255, 0.8); - font-size: 0.95rem; - line-height: 1.6; -} - -.btn-white { - display: inline-flex; - align-items: center; - gap: 8px; - background: white; - color: var(--rose); - padding: 13px 26px; - border-radius: 50px; - font-size: 0.9rem; - font-weight: 600; - text-decoration: none; - white-space: nowrap; - transition: transform 0.2s; -} - -.btn-white:hover { - transform: translateY(-2px); -} - -/* ── FOOTER ── */ -footer { - background: var(--text); - color: rgba(255, 255, 255, 0.65); - text-align: center; - padding: 2rem; - font-size: 0.85rem; - margin-top: 4rem; -} - -footer span { - color: var(--pink); -} - -/* ── RESPONSIVE ── */ -@media (max-width: 768px) { - .hero { - grid-template-columns: 1fr; - } - .hero-visual { - display: none; - } - .gallery-grid { - grid-template-columns: 1fr 1fr; - } - .info-strip { - grid-template-columns: 1fr; - } - .stats-row { - grid-template-columns: 1fr; - } - nav { - padding: 0 1.5rem; - } - .nav-links { - display: none; - } - section { - padding: 3rem 1.5rem; - } - - body.dark { - --cream: #120d14; - --text: #f5e9f2; - --muted: #c7b2c9; - - background: var(--cream); - color: var(--text); -} - -body.dark nav { - background: rgba(18, 13, 20, 0.85); - border-bottom: 1px solid rgba(255, 255, 255, 0.08); -} - -body.dark .stat-card, -body.dark .gallery-card { - background: #1b141d; - border-color: rgba(255, 255, 255, 0.08); -} - -body.dark .img-badge { - background: #1b141d; - color: var(--text); -} - -body.dark footer { - background: #0d0a10; -} - -body.dark { - --cream: #120d14; - --text: #f5e9f2; - --muted: #c7b2c9; - - background: var(--cream); - color: var(--text); -} - -body.dark nav { - background: rgba(18, 13, 20, 0.85); - border-bottom: 1px solid rgba(255, 255, 255, 0.08); -} - -body.dark .stat-card, -body.dark .gallery-card { - background: #1b141d; - border-color: rgba(255, 255, 255, 0.08); -} - -body.dark .img-badge { - background: #1b141d; - color: var(--text); -} - -body.dark footer { - background: #0d0a10; -} -} \ No newline at end of file diff --git a/textanalyse.html b/textanalyse.html new file mode 100644 index 0000000..e983da5 --- /dev/null +++ b/textanalyse.html @@ -0,0 +1,55 @@ + + + + + + +Textanalyse – Studienprojekt 2026 + + + + + + + + + +
+
+
📝 JavaScript Aufgabe
+ +

Textanalyse

+ +

+ Analysiere Texte: Zeichen, Wörter und Großschreibung. +

+ +
+ +
+
+
+ + + + + \ No newline at end of file diff --git a/ueber_uns.html b/ueber_uns.html index 917c648..b172086 100644 --- a/ueber_uns.html +++ b/ueber_uns.html @@ -7,7 +7,7 @@ Über uns – Studienprojekt 2026 - + + \ No newline at end of file