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

Compare commits

base: jakobluca:master
Branches Tags
jakobluca:master
jakobluca:ivan
..
compare: jakobluca:ivan
Branches Tags
jakobluca:ivan
jakobluca:master

3 Commits
master ... ivan

Author SHA1 Message Date
LucaJakob
4a458f1b19 remove unused snippets and adjust call to action 2026-04-12 19:06:35 +02:00
LucaJakob
e485a0c398 run Biome formatter 2026-04-12 18:56:15 +02:00
Szabo Ivan
a028fa741d FirstDraftOfMainPage 2026-04-10 20:40:10 +02:00
5 changed files with 1264 additions and 28 deletions
Show Stats Expand all files Collapse all files

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

204
frontend/index.html
View File

@ -1,14 +1,208 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<title>GeoDraw</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;700;800&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/index.css" />
</head>
<body>
<h1>Semesterarbeit</h1>
<p>Test</p>
<script type="text/javascript" src="scripts/index.js" />
<div class="wrap">
<header class="header">
<div class="container header__inner">
<a href="#hero" class="logo">
<div class="logo__mark">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="9" stroke="white" stroke-width="1.6"/>
<path d="M3 12 Q8 8 12 12 Q16 16 21 12" stroke="white" stroke-width="1.4" fill="none"/>
<path d="M12 3 Q14 8 12 12 Q10 16 12 21" stroke="white" stroke-width="1.4" fill="none"/>
</svg>
</div>
<span class="logo__text">GeoDraw</span>
</a>
<nav class="nav">
<a href="#hero" class="nav__link">Play</a>
<a href="#about" class="nav__link">How to play</a>
<a href="#register" class="nav__cta">Login / Register</a>
</nav>
</div>
</header>
<main>
<section class="hero" id="hero">
<div class="container hero__inner">
<div class="hero__content">
<div class="eyebrow reveal">
<span class="eyebrow__dot"></span>
Browser geography game
</div>
<h1 class="hero__title reveal reveal-delay-1">
Draw.<br><em>Compare.</em><br>Win.
</h1>
<p class="hero__desc reveal reveal-delay-2">
GeoDraw challenges you to sketch country borders from memory. The more accurate your drawing, the higher your score. Compete with players worldwide.
</p>
<div class="hero__actions reveal reveal-delay-3">
<a href="#register" class="btn btn--primary">
Start Playing
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
</a>
<a href="#about" class="btn btn--ghost">How it works</a>
</div>
</div>
<div class="globe-card reveal reveal-delay-1">
<div class="globe">
<div class="continent c1"></div>
<div class="continent c2"></div>
<div class="continent c3"></div>
<div class="continent c4"></div>
<div class="globe-line gl1"></div>
<div class="globe-line gl2"></div>
<div class="globe-line gl3"></div>
<div class="globe-line gl4"></div>
</div>
<div class="globe-badge gb--score">
<span class="gb__dot gb__dot--green"></span>
<span>Score: 94%</span>
</div>
<div class="globe-badge gb--country">
<span class="gb__dot gb__dot--blue"></span>
<span>Norway — Round 3</span>
</div>
</div>
</div>
</section>
<section class="about" id="about">
<div class="container about__inner">
<div class="about__left">
<p class="section-label reveal">About the game</p>
<h2 class="section-title reveal reveal-delay-1">What it is &<br>How to play</h2>
<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">
<path d="M50 4 L78 14 L90 34 L82 56 L88 82 L62 110 L36 100 L16 76 L18 46 Z"
fill="rgba(26,127,196,.12)"
stroke="var(--sea)"
stroke-width="2.5"
stroke-linejoin="round"/>
<path d="M50 4 L78 14 L90 34 L82 56 L88 82 L62 110 L36 100 L16 76 L18 46 Z"
fill="none"
stroke="var(--leaf)"
stroke-width="1.5"
stroke-dasharray="5 4"
stroke-linejoin="round"
transform="translate(4,-2) scale(0.96) translate(-2,2)"/>
</svg>
</div>
</div>
</div>
<div class="about__right">
<div class="steps">
<div class="step reveal">
<div class="step__num">01</div>
<div class="step__body">
<p class="step__title">Get a country</p>
<p class="step__text">Each round you receive a random country name from around the world.</p>
</div>
</div>
<div class="step reveal reveal-delay-1">
<div class="step__num">02</div>
<div class="step__body">
<p class="step__title">Draw from memory</p>
<p class="step__text">Sketch the country's border on a blank canvas — no hints, pure memory.</p>
</div>
</div>
<div class="step reveal reveal-delay-2">
<div class="step__num">03</div>
<div class="step__body">
<p class="step__title">Compare & score</p>
<p class="step__text">Your drawing is overlaid on the real border and scored by accuracy percentage.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ─── REGISTER ─── -->
<section class="register" id="register">
<div class="container register__inner">
<div class="register__intro reveal">
<p class="section-label">Join the game</p>
<h2 class="section-title">Create your<br>lobby</h2>
<p class="register__desc">
Create a private lobby to challenge friends or play solo.
</p>
</div>
<div class="register__card reveal reveal-delay-1">
<p class="card-title">Create a game</p>
<form class="form">
<div class="field">
<label for="username">Lobby name</label>
<input id="username" type="text" placeholder="myLobby" />
</div>
<div class="field">
<label for="password">Password</label>
<input id="password" type="password" placeholder="1234" autocomplete="new-password" />
</div>
<button type="button" class="btn btn--primary btn--full" id="reg-btn">
Create game
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<p class="form-footer"><a href="#" style="color:var(--sea);font-weight:600;">Join a game instead</a></p>
</form>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container footer__inner">
<div class="footer__left">
</div>
<div class="footer__center">
<a href="#hero" class="footer__brand">GeoDraw</a>
<p class="footer__sub">Browser geography game</p>
</div>
<div class="footer__right">
</div>
</div>
</footer>
</div><!-- /wrap -->
<script src="scripts/index.js"></script>
</body>
</html>

6
frontend/package.json
View File

@ -6,7 +6,11 @@
"author": "",
"type": "commonjs",
"main": "index.js",
"scripts": {},
"scripts": {
"format": "biome format --write",
"lint": "biome lint",
"lint:fix": "biome lint --write"
},
"devDependencies": {
"@biomejs/biome": "2.3.14"
}

23
frontend/scripts/index.js
View File

@ -1 +1,22 @@
console.log('Loaded!')
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);
});

1005
frontend/styles/index.css
View File

File diff suppressed because it is too large Load Diff