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 +33 -64
2 changed files with 33 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4a458f1b19 - Show all commits

40
frontend/index.html
View File

@ -149,38 +149,33 @@
<div class="register__intro reveal">
<p class="section-label">Join the game</p>
<h2 class="section-title">Create your<br>account</h2>
<h2 class="section-title">Create your<br>lobby</h2>
<p class="register__desc">
Sign up to track your progress, compete on the leaderboard, and save your match history. Frontend-only for now — backend coming soon.
Create a private lobby to challenge friends or play solo.
</p>
</div>
<div class="register__card reveal reveal-delay-1">
<p class="card-title">Register</p>
<p class="card-title">Create a game</p>
<div class="form">
<form class="form">
<div class="field">
<label for="username">Username</label>
<input id="username" type="text" placeholder="e.g. mapmaster42" autocomplete="username" />
</div>
<div class="field">
<label for="email">Email address</label>
<input id="email" type="email" placeholder="you@example.com" autocomplete="email" />
<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="Min. 8 characters" autocomplete="new-password" />
<input id="password" type="password" placeholder="1234" autocomplete="new-password" />
</div>
<button type="button" class="btn btn--primary btn--full" id="reg-btn">
Create account
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">Already have an account? <a href="#" style="color:var(--sea);font-weight:600;">Log in</a></p>
</div>
<p class="form-footer"><a href="#" style="color:var(--sea);font-weight:600;">Join a game instead</a></p>
</form>
</div>
</div>
@ -188,28 +183,19 @@
</main>
<!-- ─── FOOTER ─── -->
<footer class="footer">
<div class="container footer__inner">
<div class="footer__left">
<a href="#hero" class="footer__brand">GeoDraw</a>
<p class="footer__sub">© 2026 · Browser geography game</p>
</div>
<div class="footer__center">
<p class="footer__label">Follow us</p>
<div class="socials">
<a href="#" class="social" aria-label="Facebook">f</a>
<a href="#" class="social" aria-label="YouTube">▶</a>
<a href="#" class="social" aria-label="LinkedIn">in</a>
<a href="#" class="social" aria-label="X / Twitter">𝕏</a>
</div>
<a href="#hero" class="footer__brand">GeoDraw</a>
<p class="footer__sub">Browser geography game</p>
</div>
<div class="footer__right">
<a href="#" class="footer__link">Impressum</a>
<a href="#" class="footer__link">Datenschutz</a>
</div>
</div>

37
frontend/scripts/index.js
View File

@ -1,29 +1,11 @@
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.");
});
}
document.getElementById("reg-btn")?.addEventListener("click", () => {
alert(
"Frontend draft only. Full script and 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(
const reveals = document.querySelectorAll(".reveal");
const io = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
@ -33,7 +15,8 @@ document.addEventListener("DOMContentLoaded", () => {
});
},
{ threshold: 0.12 },
);
);
reveals.forEach((el) => io.observe(el));
reveals.forEach((el) => {
io.observe(el);
});