jakobluca/fs2026-Frontend-Semesterarbeit
2
2
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Draft: Main page view #1

Open
jakobluca wants to merge 3 commits from ivan into master
pull from: ivan
merge into: jakobluca:master
Conversation 0 Commits 3 Files Changed 5 +819 -519
5 changed files with 819 additions and 519 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit e485a0c398 - Show all commits

16
.vscode/settings.json vendored Normal file
View File

@ -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"
},
}

10
frontend/index.html
View File

@ -11,8 +11,6 @@
</head>
<body>
<div class="wrap">
<!-- ─── HEADER ─── -->
<header class="header">
<div class="container header__inner">
<a href="#hero" class="logo">
@ -35,8 +33,6 @@
</header>
<main>
<!-- ─── HERO ─── -->
<section class="hero" id="hero">
<div class="container hero__inner">
@ -88,8 +84,6 @@
</div>
</section>
<!-- ─── ABOUT ─── -->
<section class="about" id="about">
<div class="container about__inner">
@ -99,7 +93,7 @@
<p class="about__desc reveal reveal-delay-2">
GeoDraw is a competitive browser game built on memory and precision. You get a country name, sketch its outline, and the system calculates how close you were to the real border.
</p>
<!--
<div class="mini-globe-wrap reveal reveal-delay-3">
<div class="map-outline">
<svg viewBox="0 0 100 130" xmlns="http://www.w3.org/2000/svg">
@ -117,7 +111,7 @@
transform="translate(4,-2) scale(0.96) translate(-2,2)"/>
</svg>
</div>
</div> -->
</div>
</div>
<div class="about__right">

26
frontend/package.json
View File

@ -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"
}
"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"
}
}

65
frontend/scripts/index.js
View File

@ -1,36 +1,39 @@
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.");
});
}
// ── 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" });
});
});
// ── 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 },
);
// ── 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));
reveals.forEach((el) => io.observe(el));
});

1217
frontend/styles/index.css
View File

File diff suppressed because it is too large Load Diff