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

remove unused snippets and adjust call to action

Browse Source
This commit is contained in:
Luca Jakob 2026-04-12 19:06:35 +02:00
parent e485a0c398
commit 4a458f1b19
2 changed files with 33 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>

57
frontend/scripts/index.js
View File

@ -1,39 +1,22 @@
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 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));
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);
}); });