diff --git a/frontend/index.html b/frontend/index.html index a04e210..154d3a6 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,14 +1,228 @@ - + - - - - Document - - - -

Semesterarbeit

-

Test

- + + \ No newline at end of file diff --git a/frontend/scripts/index.js b/frontend/scripts/index.js index 4390b7a..0c8849e 100644 --- a/frontend/scripts/index.js +++ b/frontend/scripts/index.js @@ -1 +1,36 @@ -console.log('Loaded!') \ No newline at end of file +document.addEventListener("DOMContentLoaded", () => { + + // ── Register button + const regBtn = document.getElementById("reg-btn"); + if (regBtn) { + regBtn.addEventListener("click", () => { + alert("Frontend skeleton only. Backend will be connected later."); + }); + } + + // ── Smooth scroll for all anchor links + document.querySelectorAll('a[href^="#"]').forEach(link => { + link.addEventListener("click", e => { + const id = link.getAttribute("href").slice(1); + const target = document.getElementById(id); + if (!target) return; + e.preventDefault(); + const headerH = document.querySelector(".header").offsetHeight; + const top = target.getBoundingClientRect().top + window.scrollY - headerH - 16; + window.scrollTo({ top, behavior: "smooth" }); + }); + }); + + // ── Scroll reveal + const reveals = document.querySelectorAll(".reveal"); + const io = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add("visible"); + io.unobserve(entry.target); + } + }); + }, { threshold: 0.12 }); + + reveals.forEach(el => io.observe(el)); +}); \ No newline at end of file diff --git a/frontend/styles/index.css b/frontend/styles/index.css index d60afbd..bf85303 100644 --- a/frontend/styles/index.css +++ b/frontend/styles/index.css @@ -1,3 +1,721 @@ +:root { + --ink: #0b1f2a; + --ink-soft: #3d5563; + --ink-muted: #7a9aaa; + --sea: #1a7fc4; + --sea-light: #4faae0; + --sea-dim: rgba(26,127,196,.12); + --leaf: #41b869; + --leaf-dim: rgba(65,184,105,.13); + --cream: #f4f9f6; + --white: #ffffff; + --glass: rgba(255,255,255,.72); + --line: rgba(11,31,42,.09); + --shadow: 0 24px 60px rgba(11,31,42,.10); + --r-xl: 32px; + --r-lg: 22px; + --r-md: 14px; + --hh: 80px; +} + +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } +html { scroll-behavior: smooth; } + body { - background-color: blue; -} \ No newline at end of file + font-family: 'DM Sans', sans-serif; + color: var(--ink); + background: var(--cream); + overflow-x: hidden; + position: relative; +} + +body::before { + content: ''; + position: fixed; + inset: 0; + background: + radial-gradient(ellipse 60% 50% at 10% 0%, rgba(65,184,105,.12) 0%, transparent 60%), + radial-gradient(ellipse 50% 60% at 90% 100%, rgba(26,127,196,.12) 0%, transparent 60%); + pointer-events: none; + z-index: 0; +} + +body::after { + content: ''; + position: fixed; + inset: 0; + background-image: linear-gradient(var(--line) 1px, transparent 1px), + linear-gradient(90deg, var(--line) 1px, transparent 1px); + background-size: 60px 60px; + pointer-events: none; + z-index: 0; +} + +a { color: inherit; text-decoration: none; } +img, svg { display: block; max-width: 100%; } +button, input { font: inherit; } + +.wrap { + position: relative; + z-index: 1; +} + +.container { + width: 100%; + max-width: 1280px; + margin: 0 auto; + padding: 0 28px; +} + +/* ─── HEADER ─── */ +.header { + position: sticky; + top: 0; + z-index: 100; + height: var(--hh); + display: flex; + align-items: center; + backdrop-filter: blur(16px) saturate(1.4); + -webkit-backdrop-filter: blur(16px) saturate(1.4); + background: rgba(244,249,246,.82); + border-bottom: 1px solid var(--line); +} + +.header__inner { + display: flex; + align-items: center; + justify-content: space-between; + gap: 24px; +} + +.logo { + display: inline-flex; + align-items: center; + gap: 12px; +} + +.logo__mark { + width: 44px; + height: 44px; + border-radius: 50%; + background: linear-gradient(135deg, var(--sea) 0%, var(--leaf) 100%); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + position: relative; + overflow: hidden; +} + +.logo__mark svg { + width: 22px; + height: 22px; +} + +.logo__text { + font-family: 'Syne', sans-serif; + font-weight: 800; + font-size: 1.25rem; + letter-spacing: -.02em; +} + +.nav { + display: flex; + align-items: center; + gap: 4px; +} + +.nav__link { + padding: 9px 16px; + border-radius: 999px; + font-size: .92rem; + font-weight: 500; + color: var(--ink-soft); + transition: background .18s, color .18s; +} + +.nav__link:hover { + background: var(--sea-dim); + color: var(--sea); +} + +.nav__cta { + margin-left: 8px; + padding: 9px 20px; + border-radius: 999px; + font-size: .92rem; + font-weight: 600; + color: var(--white); + background: var(--ink); + transition: opacity .18s, transform .18s; +} + +.nav__cta:hover { opacity: .82; transform: translateY(-1px); } + +/* ─── HERO ─── */ +.hero { + min-height: calc(100vh - var(--hh)); + display: grid; + place-items: center; + padding: 80px 0 60px; +} + +.hero__inner { + display: grid; + grid-template-columns: 1fr minmax(320px, 500px); + gap: 64px; + align-items: center; +} + +.eyebrow { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 7px 14px 7px 10px; + border-radius: 999px; + border: 1px solid var(--leaf-dim); + background: rgba(65,184,105,.08); + color: #289149; + font-size: .82rem; + font-weight: 600; + letter-spacing: .04em; + text-transform: uppercase; + margin-bottom: 26px; +} + +.eyebrow__dot { + width: 7px; + height: 7px; + border-radius: 50%; + background: var(--leaf); + animation: pulse 2s ease-in-out infinite; +} + +@keyframes pulse { + 0%, 100% { transform: scale(1); opacity: 1; } + 50% { transform: scale(1.4); opacity: .7; } +} + +.hero__title { + font-family: 'Syne', sans-serif; + font-weight: 800; + font-size: clamp(3.6rem, 8vw, 7rem); + line-height: .92; + letter-spacing: -.04em; + margin-bottom: 24px; +} + +.hero__title em { + font-style: normal; + background: linear-gradient(135deg, var(--sea), var(--leaf)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.hero__desc { + font-size: 1.08rem; + line-height: 1.75; + color: var(--ink-soft); + max-width: 520px; + margin-bottom: 38px; +} + +.hero__actions { + display: flex; + align-items: center; + gap: 16px; + flex-wrap: wrap; +} + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + padding: 16px 30px; + border-radius: var(--r-lg); + font-family: 'DM Sans', sans-serif; + font-size: 1rem; + font-weight: 600; + border: none; + cursor: pointer; + transition: transform .2s, box-shadow .2s, opacity .2s; +} + +.btn:hover { transform: translateY(-2px); } + +.btn--primary { + color: var(--white); + background: linear-gradient(135deg, var(--sea) 0%, #159fd4 50%, var(--leaf) 100%); + background-size: 200% 200%; + box-shadow: 0 8px 24px rgba(26,127,196,.3); + animation: gradShift 4s ease infinite; +} + +@keyframes gradShift { + 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } +} + +.btn--primary:hover { box-shadow: 0 12px 32px rgba(26,127,196,.4); } + +.btn--ghost { + color: var(--ink-soft); + background: transparent; + border: 1.5px solid var(--line); +} + +.btn--ghost:hover { border-color: var(--ink-muted); color: var(--ink); } + +.btn--full { width: 100%; } + +/* Globe card */ +.globe-card { + background: var(--glass); + backdrop-filter: blur(12px); + border: 1px solid rgba(255,255,255,.8); + border-radius: var(--r-xl); + box-shadow: var(--shadow); + padding: 40px; + display: flex; + align-items: center; + justify-content: center; + min-height: 500px; + position: relative; + overflow: hidden; +} + +.globe-card::before { + content: ''; + position: absolute; + inset: 0; + border-radius: var(--r-xl); + background: radial-gradient(circle at 30% 25%, rgba(65,184,105,.18), transparent 50%), + radial-gradient(circle at 75% 75%, rgba(26,127,196,.15), transparent 50%); +} + +.globe { + position: relative; + z-index: 1; + width: min(100%, 380px); + aspect-ratio: 1; + border-radius: 50%; + background: radial-gradient(circle at 35% 30%, #70d0ff 0%, var(--sea) 30%, #0d4b80 65%, #072f52 100%); + box-shadow: + inset -20px -20px 40px rgba(0,0,0,.22), + inset 8px 8px 24px rgba(255,255,255,.08), + 0 30px 60px rgba(7,47,82,.28); +} + +.continent { + position: absolute; + background: #52c870; + border-radius: 46% 54% 58% 42%; +} + +.c1 { width: 30%; height: 22%; top: 18%; left: 12%; transform: rotate(-14deg); } +.c2 { width: 18%; height: 28%; top: 30%; left: 46%; transform: rotate(8deg); border-radius: 40% 60% 50% 50%; } +.c3 { width: 22%; height: 16%; top: 56%; right: 15%; transform: rotate(22deg); } +.c4 { width: 12%; height: 18%; top: 68%; left: 20%; transform: rotate(-6deg); border-radius: 50%; } + +.globe-line { + position: absolute; + border: 1px solid rgba(255,255,255,.12); + border-radius: 50%; + top: 50%; left: 50%; + transform: translate(-50%, -50%); +} + +.gl1 { width: 60%; height: 100%; } +.gl2 { width: 88%; height: 100%; } +.gl3 { width: 100%; height: 55%; top: 50%; } +.gl4 { width: 100%; height: 80%; top: 50%; } + +.globe-badge { + position: absolute; + z-index: 2; + background: var(--white); + border-radius: var(--r-md); + padding: 10px 14px; + box-shadow: 0 8px 24px rgba(11,31,42,.14); + font-size: .8rem; + font-weight: 600; + display: flex; + align-items: center; + gap: 8px; + animation: floatBadge 3s ease-in-out infinite; +} + +.gb--score { top: 14%; right: 6%; animation-delay: 0s; } +.gb--country { bottom: 14%; left: 4%; animation-delay: 1.2s; } + +@keyframes floatBadge { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-8px); } +} + +.gb__dot { + width: 8px; + height: 8px; + border-radius: 50%; +} + +.gb__dot--green { background: var(--leaf); } +.gb__dot--blue { background: var(--sea); } + +/* ─── ABOUT ─── */ +.about { + padding: 100px 0; +} + +.about__inner { + display: grid; + grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); + gap: 64px; + align-items: center; +} + +.section-label { + display: inline-block; + padding: 6px 14px; + border-radius: 999px; + background: var(--sea-dim); + color: var(--sea); + font-size: .82rem; + font-weight: 600; + letter-spacing: .04em; + text-transform: uppercase; + margin-bottom: 20px; +} + +.section-title { + font-family: 'Syne', sans-serif; + font-weight: 800; + font-size: clamp(2.4rem, 4.5vw, 4rem); + line-height: 1.04; + letter-spacing: -.03em; + margin-bottom: 20px; +} + +.about__desc { + font-size: 1.05rem; + line-height: 1.75; + color: var(--ink-soft); + margin-bottom: 36px; +} + +/* Steps */ +.steps { display: grid; gap: 16px; } + +.step { + display: grid; + grid-template-columns: 64px 1fr; + gap: 20px; + align-items: center; + background: var(--glass); + backdrop-filter: blur(10px); + border: 1px solid rgba(255,255,255,.8); + border-radius: var(--r-lg); + padding: 22px 26px; + box-shadow: 0 4px 20px rgba(11,31,42,.06); + transition: transform .2s, box-shadow .2s; +} + +.step:hover { + transform: translateX(6px); + box-shadow: 0 8px 28px rgba(11,31,42,.1); +} + +.step__num { + width: 56px; + height: 56px; + border-radius: 16px; + background: linear-gradient(135deg, var(--sea), var(--leaf)); + color: var(--white); + font-family: 'Syne', sans-serif; + font-weight: 800; + font-size: 1rem; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.step__title { + font-family: 'Syne', sans-serif; + font-weight: 700; + font-size: 1rem; + margin-bottom: 4px; +} + +.step__text { + font-size: .9rem; + color: var(--ink-soft); + line-height: 1.5; +} + +/* ─── REGISTER ─── */ +.register { + padding: 100px 0; +} + +.register__inner { + display: grid; + grid-template-columns: 1fr minmax(320px, 560px); + gap: 64px; + align-items: center; +} + +.register__desc { + font-size: 1.05rem; + line-height: 1.75; + color: var(--ink-soft); + margin-top: 16px; +} + +.register__card { + background: var(--white); + border: 1px solid var(--line); + border-radius: var(--r-xl); + padding: 44px; + box-shadow: var(--shadow); +} + +.card-title { + font-family: 'Syne', sans-serif; + font-weight: 800; + font-size: 1.5rem; + letter-spacing: -.02em; + margin-bottom: 30px; +} + +.form { display: grid; gap: 20px; } + +.field { display: grid; gap: 8px; } + +.field label { + font-size: .86rem; + font-weight: 600; + color: var(--ink-soft); + letter-spacing: .02em; +} + +.field input { + width: 100%; + height: 54px; + padding: 0 18px; + border: 1.5px solid var(--line); + border-radius: var(--r-md); + background: var(--cream); + color: var(--ink); + font-size: .98rem; + transition: border-color .18s, box-shadow .18s; +} + +.field input::placeholder { color: var(--ink-muted); } + +.field input:focus { + outline: none; + border-color: var(--sea-light); + box-shadow: 0 0 0 3px rgba(26,127,196,.12); + background: var(--white); +} + +.form-footer { + margin-top: 8px; + font-size: .84rem; + color: var(--ink-muted); + text-align: center; +} + +.mini-globe-wrap { + background: var(--glass); + backdrop-filter: blur(10px); + border: 1px solid rgba(255,255,255,.8); + border-radius: var(--r-xl); + box-shadow: var(--shadow); + padding: 32px; + display: flex; + align-items: center; + justify-content: center; + aspect-ratio: 1; + max-width: 340px; + position: relative; + overflow: hidden; + } + + .mini-globe-wrap::before { + content: ''; + position: absolute; + inset: 0; + border-radius: var(--r-xl); + background: radial-gradient(circle at 60% 40%, rgba(26,127,196,.1), transparent 50%); + } + +/* ─── FOOTER ─── */ +.footer { + border-top: 1px solid var(--line); + background: rgba(255,255,255,.5); + backdrop-filter: blur(12px); + padding: 40px 0; +} + +.footer__inner { + display: grid; + grid-template-columns: 1fr auto 1fr; + align-items: center; + gap: 24px; +} + +.footer__brand { + font-family: 'Syne', sans-serif; + font-weight: 800; + font-size: 1.5rem; + letter-spacing: -.02em; +} + +.footer__sub { + font-size: .86rem; + color: var(--ink-muted); + margin-top: 4px; +} + +.footer__center { text-align: center; } + +.socials { + display: flex; + justify-content: center; + gap: 10px; + margin-top: 10px; +} + +.social { + width: 42px; + height: 42px; + border-radius: 50%; + border: 1px solid var(--line); + background: var(--white); + display: flex; + align-items: center; + justify-content: center; + font-size: .9rem; + font-weight: 700; + color: var(--ink-soft); + transition: transform .18s, color .18s, background .18s; +} + +.social:hover { transform: translateY(-2px); color: var(--sea); background: var(--sea-dim); } + +.footer__label { + font-size: .7rem; + font-weight: 700; + letter-spacing: .1em; + text-transform: uppercase; + color: var(--ink-muted); + margin-bottom: 10px; +} + +.footer__right { + justify-self: end; + display: flex; + gap: 22px; + flex-wrap: wrap; + justify-content: flex-end; +} + +.footer__link { + font-size: .9rem; + color: var(--ink-muted); + transition: color .18s; +} + +.footer__link:hover { color: var(--ink); } + +/* ─── RESPONSIVE ─── */ +@media (max-width: 960px) { + .hero__inner, + .about__inner, + .register__inner { grid-template-columns: 1fr; gap: 40px; } + + .globe-card { min-height: 360px; } + + .footer__inner { grid-template-columns: 1fr; } + .footer__center, .footer__right { justify-self: start; text-align: left; } + .socials { justify-content: flex-start; } + .footer__right { justify-content: flex-start; } + .mini-globe-wrap { max-width: 260px; } +} + +@media (max-width: 680px) { + .container { padding: 0 18px; } + .hero { padding: 50px 0 40px; } + .about, .register { padding: 70px 0; } + .nav__link { display: none; } + .register__card { padding: 28px 22px; } + .globe-card { padding: 24px; min-height: 280px; } + + .header { height: auto; padding: 14px 0; } + :root { --hh: 64px; } +} + +@media (max-width: 420px) { + .hero__title { font-size: 3rem; } + .section-title { font-size: 2.2rem; } + .btn { padding: 14px 22px; font-size: .95rem; } +} + +@media (max-width: 360px) { + :root { + --r-xl: 22px; + --r-lg: 16px; + } + + .container { padding: 0 14px; } + + .logo__mark { width: 36px; height: 36px; } + .logo__text { font-size: 1.05rem; } + .nav__cta { padding: 8px 14px; font-size: .84rem; margin-left: 0; } + + .hero { padding: 36px 0 32px; min-height: auto; } + .hero__title { font-size: 2.6rem; letter-spacing: -.03em; } + .hero__desc { font-size: .95rem; margin-bottom: 28px; } + + .globe-card { padding: 16px; min-height: 240px; } + .globe-badge { padding: 7px 10px; font-size: .72rem; } + + .about, .register { padding: 52px 0; } + .section-title { font-size: 2rem; } + .about__desc { font-size: .95rem; } + + .step { padding: 16px 18px; gap: 14px; } + .step__num { width: 46px; height: 46px; font-size: .88rem; border-radius: 12px; } + + .register__card { padding: 22px 16px; border-radius: var(--r-lg); } + .card-title { font-size: 1.25rem; margin-bottom: 22px; } + .field input { height: 48px; font-size: .92rem; } + .btn--full { padding: 14px 18px; font-size: .95rem; } + + .footer { padding: 30px 0; } + .footer__brand { font-size: 1.25rem; } + .social { width: 36px; height: 36px; font-size: .8rem; } + .socials { gap: 8px; } + .footer__right { gap: 14px; } +} + +/* ─── SCROLL REVEAL ─── */ +.reveal { + opacity: 0; + transform: translateY(28px); + transition: opacity .6s ease, transform .6s ease; +} + +.reveal.visible { + opacity: 1; + transform: translateY(0); +} + +.reveal-delay-1 { transition-delay: .1s; } +.reveal-delay-2 { transition-delay: .2s; } +.reveal-delay-3 { transition-delay: .32s; } \ No newline at end of file