commit e7fd08c6555d986fb141fc9c0d6e9b962ca94d0f Author: nis Date: Tue Feb 10 07:52:18 2026 +0000 Dateien nach "/" hochladen diff --git a/Screenshot1.png b/Screenshot1.png new file mode 100644 index 0000000..f11fd1e Binary files /dev/null and b/Screenshot1.png differ diff --git a/app.js b/app.js new file mode 100644 index 0000000..47b87fa --- /dev/null +++ b/app.js @@ -0,0 +1,56 @@ +const steps = Array.from(document.querySelectorAll(".step")); +const dots = Array.from(document.querySelectorAll(".dot")); +const progressBar = document.getElementById("progress-bar"); +const form = document.getElementById("lead-form"); +const toast = document.getElementById("toast"); + +let currentStep = 1; +const answers = {}; + +const updateProgress = () => { + const progress = ((currentStep - 1) / (steps.length - 1)) * 100; + progressBar.style.width = `${progress}%`; + dots.forEach((dot, index) => { + dot.classList.toggle("active", index < currentStep); + }); +}; + +const showStep = (step) => { + steps.forEach((section) => { + section.classList.remove("active", "fade-in"); + if (Number(section.dataset.step) === step) { + section.classList.add("active"); + requestAnimationFrame(() => section.classList.add("fade-in")); + } + }); + currentStep = step; + updateProgress(); +}; + +const handleOptionClick = (event) => { + const button = event.target.closest(".option"); + if (!button) return; + const step = Number(button.closest(".step").dataset.step); + const nextStep = Number(button.dataset.next); + const value = button.dataset.value; + answers[`step${step}`] = value; + showStep(nextStep); +}; + +form.addEventListener("click", handleOptionClick); + +form.addEventListener("submit", (event) => { + event.preventDefault(); + const data = new FormData(form); + answers.firstname = data.get("firstname"); + answers.email = data.get("email"); + + toast.classList.add("show"); + setTimeout(() => toast.classList.remove("show"), 2400); + + alert("Vielen Dank! Ihre Anfrage ist eingegangen."); + form.reset(); + showStep(1); +}); + +showStep(1); diff --git a/index.html b/index.html new file mode 100644 index 0000000..748a793 --- /dev/null +++ b/index.html @@ -0,0 +1,166 @@ + + + + + + MySyde Lead-Formular + + + + +
+
+
+
MySyde Intranet Software
+

Ihre individuelle Portal-Tour in 60 Sekunden

+

+ Beantworten Sie vier kurze Fragen und erhalten Sie eine Tour, die exakt + zu Ihrer Organisation passt. +

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

Für wie viele Köpfe planen Sie das Portal?

+
+ + + + +
+
+ +
+

Was ist die größte Hürde, die wir für Sie einreißen sollen?

+
+ + + + +
+
+ +
+

Mit welchen Systemen soll MySyde Hand in Hand arbeiten?

+
+ + + +
+
+ +
+
+
+

Fast geschafft! Wir bereiten Ihre individuelle Tour vor.

+

+ Geben Sie Ihre Kontaktdaten ein, damit wir die passende Demo + zusammenstellen konnen. +

+
+
+
+ + +
+ +

+ Mit dem Absenden akzeptieren Sie unsere Datenschutzhinweise. +

+
+
+
+ + +
+
+
+ +
Vielen Dank! Wir melden uns in Kurze.
+ + + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..e93523b --- /dev/null +++ b/styles.css @@ -0,0 +1,395 @@ +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"); + +:root { + --accent: #6cbbbc; + --accent-soft: rgba(108, 187, 188, 0.16); + --text: #333333; + --muted: #6b7280; + --bg: #f6f8fc; + --card: #ffffff; + --border: #d6dce8; + --shadow: 0 18px 45px rgba(16, 24, 40, 0.08); + --radius: 18px; + font-family: "Inter", "Helvetica Neue", Arial, sans-serif; +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; + background: var(--bg); + color: var(--text); +} + +.page { + min-height: 100vh; + display: grid; + place-items: center; + padding: 24px 16px 32px; +} + +.card { + width: min(1080px, 100%); + background: var(--card); + border-radius: var(--radius); + box-shadow: var(--shadow); + padding: 24px 26px; + border: 1px solid rgba(0, 0, 0, 0.04); +} + +.card-header { + display: grid; + gap: 8px; + margin-bottom: 12px; +} + +.brand { + font-weight: 600; + color: var(--accent); + text-transform: uppercase; + letter-spacing: 0.08em; + font-size: 12px; +} + +h1 { + font-size: 24px; + margin: 0; +} + +h2 { + font-size: 18px; + margin: 0 0 10px; +} + +p { + margin: 0; + color: var(--muted); + line-height: 1.5; +} + +.card-body { + display: grid; + grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); + gap: 22px; + align-items: start; +} + +.form-side { + padding-right: 8px; +} + +.progress { + position: relative; + margin: 12px 0 16px; +} + +.progress-bar { + display: block; + height: 6px; + border-radius: 999px; + background: linear-gradient(90deg, var(--accent), #3aa5a6); + width: 0; + transition: width 300ms ease; +} + +.progress::before { + content: ""; + position: absolute; + inset: 0; + height: 6px; + border-radius: 999px; + background: #e2e8f3; + z-index: 0; +} + +.progress-bar { + position: relative; + z-index: 1; +} + +.progress-steps { + margin-top: 10px; + display: flex; + justify-content: space-between; +} + +.dot { + width: 10px; + height: 10px; + border-radius: 50%; + background: #cbd5e1; +} + +.dot.active { + background: var(--accent); +} + +.step { + display: none; + opacity: 0; + transform: translateY(8px); + transition: opacity 220ms ease, transform 220ms ease; +} + +.step.active { + display: block; +} + +.step.fade-in { + opacity: 1; + transform: translateY(0); +} + +.option-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 16px; +} + +.option-grid.three { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.option { + border: 1px solid var(--border); + background: #ffffff; + border-radius: 14px; + padding: 12px 14px; + display: flex; + gap: 14px; + align-items: center; + font-weight: 500; + color: var(--text); + cursor: pointer; + transition: all 180ms ease; + text-align: left; +} + +.option i { + font-size: 20px; + color: var(--accent); +} + +.option:hover, +.option:focus { + border-color: var(--accent); + background: var(--accent-soft); + outline: none; +} + +.input-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 16px; + margin-bottom: 12px; +} + +label { + font-size: 14px; + display: grid; + gap: 8px; + color: var(--text); +} + +input { + border: 1px solid var(--border); + border-radius: 12px; + padding: 12px 14px; + font-size: 14px; + transition: border-color 150ms ease, box-shadow 150ms ease; +} + +input:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 3px rgba(0, 74, 153, 0.16); +} + +.primary-btn { + width: 100%; + background: var(--accent); + color: #ffffff; + border: none; + border-radius: 12px; + padding: 14px 20px; + font-weight: 600; + font-size: 15px; + cursor: pointer; + transition: transform 150ms ease, box-shadow 150ms ease; +} + +.primary-btn:hover { + transform: translateY(-1px); + box-shadow: 0 12px 24px rgba(108, 187, 188, 0.22); +} + +.footnote { + font-size: 12px; + margin-top: 10px; + color: var(--muted); +} + +.reward { + margin-bottom: 12px; + padding: 12px 14px; + border-radius: 14px; + background: #eef7f7; + border: 1px solid #d7ecec; +} + +.preview-side { + background: linear-gradient(160deg, #ffffff 0%, #f2f7f7 100%); + border-radius: 16px; + padding: 18px; + border: 1px solid rgba(0, 0, 0, 0.04); + position: relative; + overflow: hidden; +} + +.preview-header { + display: grid; + gap: 8px; + margin-bottom: 14px; +} + +.preview-header h3 { + margin: 0; + font-size: 18px; + color: var(--text); +} + +.pill { + width: fit-content; + padding: 6px 10px; + border-radius: 999px; + background: var(--accent-soft); + color: #2d6f70; + font-weight: 600; + font-size: 12px; +} + +.laptop { + position: relative; + margin-top: 6px; +} + +.laptop-screen { + border-radius: 18px; + background: #0f1118; + padding: 12px; + box-shadow: 0 20px 40px rgba(15, 17, 24, 0.2); + position: relative; + overflow: hidden; +} + +.laptop-screen img { + width: 100%; + height: auto; + display: block; + border-radius: 10px; + filter: blur(1.6px) saturate(0.9); + transform: scale(1.01); +} + +.pixel-overlay { + position: absolute; + inset: 12px; + border-radius: 10px; + background-image: repeating-linear-gradient( + 90deg, + rgba(0, 0, 0, 0.06), + rgba(0, 0, 0, 0.06) 2px, + transparent 2px, + transparent 4px + ), + repeating-linear-gradient( + 0deg, + rgba(0, 0, 0, 0.05), + rgba(0, 0, 0, 0.05) 2px, + transparent 2px, + transparent 4px + ); + mix-blend-mode: multiply; + opacity: 0.25; + pointer-events: none; +} + +.cta-glow { + position: absolute; + right: 18px; + bottom: 18px; + padding: 8px 12px; + border-radius: 999px; + background: rgba(108, 187, 188, 0.9); + color: #ffffff; + font-size: 12px; + font-weight: 600; + box-shadow: 0 12px 24px rgba(108, 187, 188, 0.35); +} + +.laptop-base { + height: 16px; + margin: 10px auto 0; + width: 80%; + border-radius: 0 0 18px 18px; + background: linear-gradient(90deg, #cfd4da, #e5e8ec); + box-shadow: 0 6px 18px rgba(15, 17, 24, 0.1); +} + +.toast { + position: fixed; + left: 50%; + bottom: 28px; + transform: translateX(-50%); + background: #111827; + color: #ffffff; + padding: 14px 22px; + border-radius: 999px; + box-shadow: 0 12px 24px rgba(17, 24, 39, 0.2); + opacity: 0; + pointer-events: none; + transition: opacity 180ms ease, transform 180ms ease; +} + +.toast.show { + opacity: 1; + transform: translateX(-50%) translateY(-6px); +} + +@media (max-width: 900px) { + .card { + padding: 24px; + } + + .card-body { + grid-template-columns: 1fr; + } + + .preview-side { + display: none; + } + + .option-grid { + grid-template-columns: 1fr; + } + + .option-grid.three { + grid-template-columns: 1fr; + } + + .input-grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 600px) { + h1 { + font-size: 22px; + } + + h2 { + font-size: 18px; + } +}