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"> <div class="register__intro reveal">
<p class="section-label">Join the game</p> <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"> <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> </p>
</div> </div>
<div class="register__card reveal reveal-delay-1"> <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"> <div class="field">
<label for="username">Username</label> <label for="username">Lobby name</label>
<input id="username" type="text" placeholder="e.g. mapmaster42" autocomplete="username" /> <input id="username" type="text" placeholder="myLobby" />
</div>
<div class="field">
<label for="email">Email address</label>
<input id="email" type="email" placeholder="you@example.com" autocomplete="email" />
</div> </div>
<div class="field"> <div class="field">
<label for="password">Password</label> <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> </div>
<button type="button" class="btn btn--primary btn--full" id="reg-btn"> <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> <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> </button>
<p class="form-footer">Already have an account? <a href="#" style="color:var(--sea);font-weight:600;">Log in</a></p> <p class="form-footer"><a href="#" style="color:var(--sea);font-weight:600;">Join a game instead</a></p>
</div> </form>
</div> </div>
</div> </div>
@ -188,28 +183,19 @@
</main> </main>
<!-- ─── FOOTER ─── -->
<footer class="footer"> <footer class="footer">
<div class="container footer__inner"> <div class="container footer__inner">
<div class="footer__left"> <div class="footer__left">
<a href="#hero" class="footer__brand">GeoDraw</a>
<p class="footer__sub">© 2026 · Browser geography game</p>
</div> </div>
<div class="footer__center"> <div class="footer__center">
<p class="footer__label">Follow us</p> <a href="#hero" class="footer__brand">GeoDraw</a>
<div class="socials"> <p class="footer__sub">Browser geography game</p>
<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>
</div> </div>
<div class="footer__right"> <div class="footer__right">
<a href="#" class="footer__link">Impressum</a>
<a href="#" class="footer__link">Datenschutz</a>
</div> </div>
</div> </div>

29
frontend/scripts/index.js
View File

@ -1,27 +1,9 @@
document.addEventListener("DOMContentLoaded", () => { document.getElementById("reg-btn")?.addEventListener("click", () => {
// ── Register button alert(
const regBtn = document.getElementById("reg-btn"); "Frontend draft only. Full script and backend will be connected later.",
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 reveals = document.querySelectorAll(".reveal");
const io = new IntersectionObserver( const io = new IntersectionObserver(
(entries) => { (entries) => {
@ -35,5 +17,6 @@ document.addEventListener("DOMContentLoaded", () => {
{ threshold: 0.12 }, { threshold: 0.12 },
); );
reveals.forEach((el) => io.observe(el)); reveals.forEach((el) => {
io.observe(el);
}); });