diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..154da2e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,16 @@ +{ + "editor.defaultFormatter": "biomejs.biome", + "biome.enabled": true, + "biome.requireConfiguration": true, + "biome.configurationPath": "./frontend/biome.json", + "biome.lsp.bin": { + "linux-x64": "./frontend/node_modules/@biomejs/cli-linux-x64/biome", + "linux-x64-musl": "./frontend/node_modules/@biomejs/cli-linux-x64-musl/biome", + "cli-linux-arm64": "./frontend/node_modules/@biomejs/cli-linux-arm64/biome", + "linux-arm64-musl": "./frontend/node_modules/@biomejs/cli-linux-arm64-musl/biome", + "win32-x64": "./frontend/node_modules/@biomejs/cli-win32-x64/biome.exe", + "win32-arm64": "./frontend/node_modules/@biomejs/cli-win32-arm64/biome.exe", + "darwin-x64": "./frontend/node_modules/@biomejs/cli-darwin-x64/biome" + }, + +} \ No newline at end of file diff --git a/frontend/index.html b/frontend/index.html index a04e210..20b97e2 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,14 +1,208 @@ - + - - - - Document - - - -

Semesterarbeit

-

Test

- + + \ No newline at end of file diff --git a/frontend/package.json b/frontend/package.json index 8753144..013e86a 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,13 +1,17 @@ { - "name": "fs2026-frontend", - "version": "1.0.0", - "description": "", - "license": "ISC", - "author": "", - "type": "commonjs", - "main": "index.js", - "scripts": {}, - "devDependencies": { - "@biomejs/biome": "2.3.14" - } -} \ No newline at end of file + "name": "fs2026-frontend", + "version": "1.0.0", + "description": "", + "license": "ISC", + "author": "", + "type": "commonjs", + "main": "index.js", + "scripts": { + "format": "biome format --write", + "lint": "biome lint", + "lint:fix": "biome lint --write" + }, + "devDependencies": { + "@biomejs/biome": "2.3.14" + } +} diff --git a/frontend/scripts/index.js b/frontend/scripts/index.js index 4390b7a..db97c41 100644 --- a/frontend/scripts/index.js +++ b/frontend/scripts/index.js @@ -1 +1,22 @@ -console.log('Loaded!') \ No newline at end of file +document.getElementById("reg-btn")?.addEventListener("click", () => { + alert( + "Frontend draft only. Full script and backend will be connected later.", + ); +}); + +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); +}); diff --git a/frontend/styles/index.css b/frontend/styles/index.css index d60afbd..00656e3 100644 --- a/frontend/styles/index.css +++ b/frontend/styles/index.css @@ -1,3 +1,1004 @@ +:root { + --ink: #0b1f2a; + --ink-soft: #3d5563; + --ink-muted: #7a9aaa; + --sea: #1a7fc4; + --sea-light: #4faae0; + --sea-dim: rgba(26, 127, 196, 0.12); + --leaf: #41b869; + --leaf-dim: rgba(65, 184, 105, 0.13); + --cream: #f4f9f6; + --white: #ffffff; + --glass: rgba(255, 255, 255, 0.72); + --line: rgba(11, 31, 42, 0.09); + --shadow: 0 24px 60px rgba(11, 31, 42, 0.1); + --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, 0.12) 0%, + transparent 60% + ), + radial-gradient( + ellipse 50% 60% at 90% 100%, + rgba(26, 127, 196, 0.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, 0.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: -0.02em; +} + +.nav { + display: flex; + align-items: center; + gap: 4px; +} + +.nav__link { + padding: 9px 16px; + border-radius: 999px; + font-size: 0.92rem; + font-weight: 500; + color: var(--ink-soft); + transition: + background 0.18s, + color 0.18s; +} + +.nav__link:hover { + background: var(--sea-dim); + color: var(--sea); +} + +.nav__cta { + margin-left: 8px; + padding: 9px 20px; + border-radius: 999px; + font-size: 0.92rem; + font-weight: 600; + color: var(--white); + background: var(--ink); + transition: + opacity 0.18s, + transform 0.18s; +} + +.nav__cta:hover { + opacity: 0.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, 0.08); + color: #289149; + font-size: 0.82rem; + font-weight: 600; + letter-spacing: 0.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: 0.7; + } +} + +.hero__title { + font-family: "Syne", sans-serif; + font-weight: 800; + font-size: clamp(3.6rem, 8vw, 7rem); + line-height: 0.92; + letter-spacing: -0.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 0.2s, + box-shadow 0.2s, + opacity 0.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, 0.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, 0.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, 0.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, 0.18), + transparent 50% + ), + radial-gradient( + circle at 75% 75%, + rgba(26, 127, 196, 0.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, 0.22), + inset 8px 8px 24px rgba(255, 255, 255, 0.08), + 0 30px 60px rgba(7, 47, 82, 0.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, 0.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, 0.14); + font-size: 0.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, 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: 0.82rem; + font-weight: 600; + letter-spacing: 0.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: -0.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, 0.8); + border-radius: var(--r-lg); + padding: 22px 26px; + box-shadow: 0 4px 20px rgba(11, 31, 42, 0.06); + transition: + transform 0.2s, + box-shadow 0.2s; +} + +.step:hover { + transform: translateX(6px); + box-shadow: 0 8px 28px rgba(11, 31, 42, 0.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: 0.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: -0.02em; + margin-bottom: 30px; +} + +.form { + display: grid; + gap: 20px; +} + +.field { + display: grid; + gap: 8px; +} + +.field label { + font-size: 0.86rem; + font-weight: 600; + color: var(--ink-soft); + letter-spacing: 0.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: 0.98rem; + transition: + border-color 0.18s, + box-shadow 0.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, 0.12); + background: var(--white); +} + +.form-footer { + margin-top: 8px; + font-size: 0.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, 0.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, 0.1), + transparent 50% + ); +} + +/* ─── FOOTER ─── */ +.footer { + border-top: 1px solid var(--line); + background: rgba(255, 255, 255, 0.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: -0.02em; +} + +.footer__sub { + font-size: 0.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: 0.9rem; + font-weight: 700; + color: var(--ink-soft); + transition: + transform 0.18s, + color 0.18s, + background 0.18s; +} + +.social:hover { + transform: translateY(-2px); + color: var(--sea); + background: var(--sea-dim); +} + +.footer__label { + font-size: 0.7rem; + font-weight: 700; + letter-spacing: 0.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: 0.9rem; + color: var(--ink-muted); + transition: color 0.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: 0.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: 0.84rem; + margin-left: 0; + } + + .hero { + padding: 36px 0 32px; + min-height: auto; + } + .hero__title { + font-size: 2.6rem; + letter-spacing: -0.03em; + } + .hero__desc { + font-size: 0.95rem; + margin-bottom: 28px; + } + + .globe-card { + padding: 16px; + min-height: 240px; + } + .globe-badge { + padding: 7px 10px; + font-size: 0.72rem; + } + + .about, + .register { + padding: 52px 0; + } + .section-title { + font-size: 2rem; + } + .about__desc { + font-size: 0.95rem; + } + + .step { + padding: 16px 18px; + gap: 14px; + } + .step__num { + width: 46px; + height: 46px; + font-size: 0.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: 0.92rem; + } + .btn--full { + padding: 14px 18px; + font-size: 0.95rem; + } + + .footer { + padding: 30px 0; + } + .footer__brand { + font-size: 1.25rem; + } + .social { + width: 36px; + height: 36px; + font-size: 0.8rem; + } + .socials { + gap: 8px; + } + .footer__right { + gap: 14px; + } +} + +/* ─── SCROLL REVEAL ─── */ +.reveal { + opacity: 0; + transform: translateY(28px); + transition: + opacity 0.6s ease, + transform 0.6s ease; +} + +.reveal.visible { + opacity: 1; + transform: translateY(0); +} + +.reveal-delay-1 { + transition-delay: 0.1s; +} +.reveal-delay-2 { + transition-delay: 0.2s; +} +.reveal-delay-3 { + transition-delay: 0.32s; +}