429 lines
18 KiB
HTML
429 lines
18 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="sv">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>quiXzoom Academy — Lär dig tjäna</title>
|
||
|
|
<meta name="description" content="quiXzoom Academy lär dig allt du behöver veta för att bli en framgångsrik Zoomer. Från fotobasics till avancerade tekniker.">
|
||
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||
|
|
<style>
|
||
|
|
:root{--ink:#0A0A0A;--text-secondary:#6E6E73;--surface:#F5F5F7;--card:#FFFFFF;--blue:#0066FF}
|
||
|
|
*{box-sizing:border-box;margin:0;padding:0}
|
||
|
|
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--surface);color:var(--ink);line-height:1.6}
|
||
|
|
|
||
|
|
/* Compact Navigation */
|
||
|
|
.nav{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;background:rgba(255,255,255,0.95);backdrop-filter:blur(20px);position:sticky;top:0;z-index:100;border-bottom:1px solid rgba(0,0,0,0.06);height:56px}
|
||
|
|
.nav-brand{display:flex;align-items:center;gap:8px}
|
||
|
|
.nav-logo{font-size:18px;font-weight:800;color:var(--ink);text-decoration:none;letter-spacing:-0.3px}
|
||
|
|
.nav-logo span{color:var(--blue)}
|
||
|
|
.nav-links{display:flex;align-items:center;gap:4px}
|
||
|
|
.nav-link{padding:8px 14px;color:var(--text-secondary);text-decoration:none;font-size:13px;font-weight:500;border-radius:8px;transition:all 0.2s;white-space:nowrap}
|
||
|
|
.nav-link:hover{color:var(--ink);background:rgba(0,0,0,0.04)}
|
||
|
|
.nav-link.active{color:var(--blue);background:rgba(0,102,255,0.08)}
|
||
|
|
.nav-btn{padding:8px 18px;background:var(--blue);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;white-space:nowrap}
|
||
|
|
.nav-btn:hover{background:#0052CC}
|
||
|
|
.nav-user{display:flex;align-items:center;gap:10px}
|
||
|
|
.nav-user-id{color:var(--text-secondary);font-size:11px;font-family:'SF Mono',monospace;background:rgba(0,0,0,0.04);padding:4px 10px;border-radius:6px}
|
||
|
|
.nav-logout{padding:6px 12px;background:transparent;color:var(--text-secondary);border:1px solid rgba(0,0,0,0.1);border-radius:6px;font-size:12px;cursor:pointer;transition:all 0.2s}
|
||
|
|
.nav-logout:hover{background:rgba(239,68,68,0.1);color:#ef4444;border-color:rgba(239,68,68,0.2)}
|
||
|
|
|
||
|
|
.container{max-width:800px;margin:0 auto;padding:24px}
|
||
|
|
.hero{text-align:center;padding:60px 24px 40px}
|
||
|
|
.hero h1{font-size:42px;font-weight:800;margin-bottom:16px;letter-spacing:-0.5px}
|
||
|
|
.hero p{font-size:18px;color:var(--text-secondary);max-width:500px;margin:0 auto}
|
||
|
|
.modules{display:grid;gap:16px;padding:0 24px 60px}
|
||
|
|
.module{background:var(--card);border-radius:16px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.06);border:1px solid rgba(0,0,0,0.06)}
|
||
|
|
.module-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
|
||
|
|
.module-number{width:40px;height:40px;border-radius:12px;background:var(--blue);color:white;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}
|
||
|
|
.module-title{font-size:20px;font-weight:700}
|
||
|
|
.lessons{display:grid;gap:8px}
|
||
|
|
.lesson{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;background:var(--surface);text-decoration:none;color:var(--ink);transition:all 0.2s}
|
||
|
|
.lesson:hover{background:#E8E8ED}
|
||
|
|
.lesson-number{width:28px;height:28px;border-radius:8px;background:rgba(0,102,255,0.1);color:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;flex-shrink:0}
|
||
|
|
.lesson-title{font-weight:500;font-size:15px}
|
||
|
|
.lesson-arrow{margin-left:auto;color:var(--text-secondary);font-size:18px}
|
||
|
|
.progress-bar{height:4px;background:rgba(0,0,0,0.06);border-radius:2px;margin-top:16px;overflow:hidden}
|
||
|
|
.progress-fill{height:100%;background:var(--blue);border-radius:2px;transition:width 0.3s}
|
||
|
|
.footer{text-align:center;padding:40px 24px;color:var(--text-secondary);font-size:14px;border-top:1px solid rgba(0,0,0,0.06)}
|
||
|
|
|
||
|
|
/* Login Modal */
|
||
|
|
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;z-index:10000;padding:20px}
|
||
|
|
.modal-overlay.active{display:flex}
|
||
|
|
.modal{background:#fff;border-radius:20px;width:100%;max-width:380px;padding:32px;position:relative;box-shadow:0 25px 50px rgba(0,0,0,0.25)}
|
||
|
|
.modal-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--text-secondary);font-size:24px;cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all 0.2s}
|
||
|
|
.modal-close:hover{background:rgba(0,0,0,0.05)}
|
||
|
|
.modal-header{text-align:center;margin-bottom:28px}
|
||
|
|
.modal-header h2{font-size:22px;font-weight:700;margin:0 0 6px 0}
|
||
|
|
.modal-header p{color:var(--text-secondary);font-size:14px;margin:0}
|
||
|
|
.form-group{margin-bottom:18px}
|
||
|
|
.form-group label{display:block;color:var(--ink);font-size:12px;font-weight:600;margin-bottom:6px;text-transform:uppercase;letter-spacing:0.5px}
|
||
|
|
.form-group input{width:100%;padding:14px 16px;background:#F5F5F7;border:1px solid transparent;border-radius:12px;color:var(--ink);font-size:16px;transition:all 0.2s;box-sizing:border-box}
|
||
|
|
.form-group input:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(0,102,255,0.1)}
|
||
|
|
.form-group input::placeholder{color:#999}
|
||
|
|
.form-group small{display:block;color:var(--text-secondary);font-size:11px;margin-top:6px}
|
||
|
|
.btn-primary{width:100%;padding:16px;background:var(--blue);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.2s}
|
||
|
|
.btn-primary:hover{background:#0052CC}
|
||
|
|
.modal-footer{text-align:center;margin-top:24px;padding-top:20px;border-top:1px solid rgba(0,0,0,0.06)}
|
||
|
|
.modal-footer p{color:var(--text-secondary);font-size:14px;margin:0}
|
||
|
|
.modal-footer a{color:var(--blue);text-decoration:none;font-weight:600}
|
||
|
|
|
||
|
|
@media(max-width:640px){
|
||
|
|
.hero h1{font-size:32px}
|
||
|
|
.hero{padding:40px 24px 30px}
|
||
|
|
.nav{height:52px;padding:8px 16px}
|
||
|
|
.nav-link{padding:6px 10px;font-size:12px}
|
||
|
|
.nav-btn{padding:6px 14px;font-size:12px}
|
||
|
|
.modal{padding:24px}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- Compact Navigation -->
|
||
|
|
<nav class="nav">
|
||
|
|
<div class="nav-brand">
|
||
|
|
<a href="/" class="nav-logo">qui<span>X</span>zoom</a>
|
||
|
|
</div>
|
||
|
|
<div class="nav-links" id="nav-links">
|
||
|
|
<a href="/" class="nav-link">Hem</a>
|
||
|
|
<a href="/academy/" class="nav-link active">Akademi</a>
|
||
|
|
<button class="nav-btn" id="login-btn">Logga in</button>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<!-- Hero -->
|
||
|
|
<div class="hero">
|
||
|
|
<h1>quiXzoom Academy</h1>
|
||
|
|
<p>Bemästra färdigheterna för att bli en topputbildad Zoomer. Från fotobasics till avancerade fälttekniker.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Modules -->
|
||
|
|
<div class="container">
|
||
|
|
<div class="modules">
|
||
|
|
<!-- Modul 1 -->
|
||
|
|
<div class="module">
|
||
|
|
<div class="module-header">
|
||
|
|
<div class="module-number">1</div>
|
||
|
|
<div class="module-title">Komma igång</div>
|
||
|
|
</div>
|
||
|
|
<div class="lessons">
|
||
|
|
<a href="module1/m1l1/" class="lesson">
|
||
|
|
<div class="lesson-number">1</div>
|
||
|
|
<div class="lesson-title">Välkommen till quiXzoom</div>
|
||
|
|
<div class="lesson-arrow">→</div>
|
||
|
|
</a>
|
||
|
|
<a href="module1/m1l2/" class="lesson">
|
||
|
|
<div class="lesson-number">2</div>
|
||
|
|
<div class="lesson-title">Ditt första uppdrag</div>
|
||
|
|
<div class="lesson-arrow">→</div>
|
||
|
|
</a>
|
||
|
|
<a href="module1/m1l3/" class="lesson">
|
||
|
|
<div class="lesson-number">3</div>
|
||
|
|
<div class="lesson-title">Fotobasics</div>
|
||
|
|
<div class="lesson-arrow">→</div>
|
||
|
|
</a>
|
||
|
|
<a href="module1/m1l4/" class="lesson">
|
||
|
|
<div class="lesson-number">4</div>
|
||
|
|
<div class="lesson-title">Skicka in ditt arbete</div>
|
||
|
|
<div class="lesson-arrow">→</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="progress-bar"><div class="progress-fill" style="width:0%"></div></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Modul 2 -->
|
||
|
|
<div class="module">
|
||
|
|
<div class="module-header">
|
||
|
|
<div class="module-number">2</div>
|
||
|
|
<div class="module-title">Fotokvalitet</div>
|
||
|
|
</div>
|
||
|
|
<div class="lessons">
|
||
|
|
<a href="module2/m2l1/" class="lesson">
|
||
|
|
<div class="lesson-number">1</div>
|
||
|
|
<div class="lesson-title">Ljus & Vinklar</div>
|
||
|
|
<div class="lesson-arrow">→</div>
|
||
|
|
</a>
|
||
|
|
<a href="module2/m2l2/" class="lesson">
|
||
|
|
<div class="lesson-number">2</div>
|
||
|
|
<div class="lesson-title">Kompositionsregler</div>
|
||
|
|
<div class="lesson-arrow">→</div>
|
||
|
|
</a>
|
||
|
|
<a href="module2/m2l3/" class="lesson">
|
||
|
|
<div class="lesson-number">3</div>
|
||
|
|
<div class="lesson-title">Fokus & Klarhet</div>
|
||
|
|
<div class="lesson-arrow">→</div>
|
||
|
|
</a>
|
||
|
|
<a href="module2/m2l4/" class="lesson">
|
||
|
|
<div class="lesson-number">4</div>
|
||
|
|
<div class="lesson-title">Vanliga misstag</div>
|
||
|
|
<div class="lesson-arrow">→</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="progress-bar"><div class="progress-fill" style="width:0%"></div></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Modul 3 -->
|
||
|
|
<div class="module">
|
||
|
|
<div class="module-header">
|
||
|
|
<div class="module-number">3</div>
|
||
|
|
<div class="module-title">Uppdragstyper</div>
|
||
|
|
</div>
|
||
|
|
<div class="lessons">
|
||
|
|
<a href="module3/m3l1/" class="lesson">
|
||
|
|
<div class="lesson-number">1</div>
|
||
|
|
<div class="lesson-title">Infrastruktur</div>
|
||
|
|
<div class="lesson-arrow">→</div>
|
||
|
|
</a>
|
||
|
|
<a href="module3/m3l2/" class="lesson">
|
||
|
|
<div class="lesson-number">2</div>
|
||
|
|
<div class="lesson-title">Fastigheter</div>
|
||
|
|
<div class="lesson-arrow">→</div>
|
||
|
|
</a>
|
||
|
|
<a href="module3/m3l3/" class="lesson">
|
||
|
|
<div class="lesson-number">3</div>
|
||
|
|
<div class="lesson-title">Kommersiellt & Detaljhandel</div>
|
||
|
|
<div class="lesson-arrow">→</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="progress-bar"><div class="progress-fill" style="width:0%"></div></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Modul 4 -->
|
||
|
|
<div class="module">
|
||
|
|
<div class="module-header">
|
||
|
|
<div class="module-number">4</div>
|
||
|
|
<div class="module-title">Avancerade tekniker</div>
|
||
|
|
</div>
|
||
|
|
<div class="lessons">
|
||
|
|
<a href="module4/m4l1/" class="lesson">
|
||
|
|
<div class="lesson-number">1</div>
|
||
|
|
<div class="lesson-title">GPS & Platsdata</div>
|
||
|
|
<div class="lesson-arrow">→</div>
|
||
|
|
</a>
|
||
|
|
<a href="module4/m4l2/" class="lesson">
|
||
|
|
<div class="lesson-number">2</div>
|
||
|
|
<div class="lesson-title">Flera vinklar</div>
|
||
|
|
<div class="lesson-arrow">→</div>
|
||
|
|
</a>
|
||
|
|
<a href="module4/m4l3/" class="lesson">
|
||
|
|
<div class="lesson-number">3</div>
|
||
|
|
<div class="lesson-title">Dokumentationsstandarder</div>
|
||
|
|
<div class="lesson-arrow">→</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="progress-bar"><div class="progress-fill" style="width:0%"></div></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Modul 5 -->
|
||
|
|
<div class="module">
|
||
|
|
<div class="module-header">
|
||
|
|
<div class="module-number">5</div>
|
||
|
|
<div class="module-title">Tjäna mer</div>
|
||
|
|
</div>
|
||
|
|
<div class="lessons">
|
||
|
|
<a href="module5/m5l1/" class="lesson">
|
||
|
|
<div class="lesson-number">1</div>
|
||
|
|
<div class="lesson-title">Uppdragsval</div>
|
||
|
|
<div class="lesson-arrow">→</div>
|
||
|
|
</a>
|
||
|
|
<a href="module5/m5l2/" class="lesson">
|
||
|
|
<div class="lesson-number">2</div>
|
||
|
|
<div class="lesson-title">Effektivitetstips</div>
|
||
|
|
<div class="lesson-arrow">→</div>
|
||
|
|
</a>
|
||
|
|
<a href="module5/m5l3/" class="lesson">
|
||
|
|
<div class="lesson-number">3</div>
|
||
|
|
<div class="lesson-title">Bygga rykte</div>
|
||
|
|
<div class="lesson-arrow">→</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="progress-bar"><div class="progress-fill" style="width:0%"></div></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Modul 6 -->
|
||
|
|
<div class="module">
|
||
|
|
<div class="module-header">
|
||
|
|
<div class="module-number">6</div>
|
||
|
|
<div class="module-title">Pro Zoomer</div>
|
||
|
|
</div>
|
||
|
|
<div class="lessons">
|
||
|
|
<a href="module6/m6l1/" class="lesson">
|
||
|
|
<div class="lesson-number">1</div>
|
||
|
|
<div class="lesson-title">Kvalitetssäkring</div>
|
||
|
|
<div class="lesson-arrow">→</div>
|
||
|
|
</a>
|
||
|
|
<a href="module6/m6l2/" class="lesson">
|
||
|
|
<div class="lesson-number">2</div>
|
||
|
|
<div class="lesson-title">Felsökning</div>
|
||
|
|
<div class="lesson-arrow">→</div>
|
||
|
|
</a>
|
||
|
|
<a href="module6/m6l3/" class="lesson">
|
||
|
|
<div class="lesson-number">3</div>
|
||
|
|
<div class="lesson-title">Säkerhet & Etik</div>
|
||
|
|
<div class="lesson-arrow">→</div>
|
||
|
|
</a>
|
||
|
|
<a href="module6/m6l4/" class="lesson">
|
||
|
|
<div class="lesson-number">4</div>
|
||
|
|
<div class="lesson-title">Examination</div>
|
||
|
|
<div class="lesson-arrow">→</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="progress-bar"><div class="progress-fill" style="width:0%"></div></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Footer -->
|
||
|
|
<div class="footer">
|
||
|
|
<p>quiXzoom Academy — Lär. Tjäna. Väx.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Login Modal -->
|
||
|
|
<div class="modal-overlay" id="login-modal">
|
||
|
|
<div class="modal">
|
||
|
|
<button class="modal-close" id="modal-close">×</button>
|
||
|
|
<div class="modal-header">
|
||
|
|
<h2>Zoomer-inloggning</h2>
|
||
|
|
<p>Ange ditt Zoomers ID</p>
|
||
|
|
</div>
|
||
|
|
<form id="login-form">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="zoomers-id">Zoomers ID</label>
|
||
|
|
<input type="text" id="zoomers-id" placeholder="SE-VG-GOT-1990-M-0001" required>
|
||
|
|
<small>Format: CC-RR-CCC-YYYY-G-NNNN</small>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="zoomers-pin">PIN</label>
|
||
|
|
<input type="password" id="zoomers-pin" placeholder="Ange din PIN" minlength="4" required>
|
||
|
|
</div>
|
||
|
|
<button type="submit" class="btn-primary">Logga in</button>
|
||
|
|
</form>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<p>Ny Zoomer? <a href="/register">Registrera dig här</a></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Zoomers ID Authentication
|
||
|
|
const ZoomersAuth = {
|
||
|
|
validateId(id) {
|
||
|
|
return /^[A-Z]{2}-[A-Z]{2,3}-[A-Z]{3}-\d{4}-[MFNX]-\d{4}$/.test(id);
|
||
|
|
},
|
||
|
|
|
||
|
|
parseId(id) {
|
||
|
|
const parts = id.split('-');
|
||
|
|
return {
|
||
|
|
country: parts[0],
|
||
|
|
region: parts[1],
|
||
|
|
city: parts[2],
|
||
|
|
birthYear: parts[3],
|
||
|
|
gender: parts[4],
|
||
|
|
number: parts[5]
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
async login(zoomersId, pin) {
|
||
|
|
// TODO: Replace with real API call
|
||
|
|
return new Promise((resolve) => {
|
||
|
|
setTimeout(() => {
|
||
|
|
if (this.validateId(zoomersId) && pin.length >= 4) {
|
||
|
|
const parsed = this.parseId(zoomersId);
|
||
|
|
resolve({
|
||
|
|
success: true,
|
||
|
|
zoomersId: zoomersId,
|
||
|
|
profile: parsed
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
resolve({ success: false, error: 'Ogiltigt Zoomers ID eller PIN' });
|
||
|
|
}
|
||
|
|
}, 500);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// UI State
|
||
|
|
let currentUser = null;
|
||
|
|
|
||
|
|
// DOM Elements
|
||
|
|
const loginModal = document.getElementById('login-modal');
|
||
|
|
const loginBtn = document.getElementById('login-btn');
|
||
|
|
const modalClose = document.getElementById('modal-close');
|
||
|
|
const loginForm = document.getElementById('login-form');
|
||
|
|
const navLinks = document.getElementById('nav-links');
|
||
|
|
|
||
|
|
// Show modal
|
||
|
|
loginBtn.addEventListener('click', () => {
|
||
|
|
loginModal.classList.add('active');
|
||
|
|
});
|
||
|
|
|
||
|
|
// Close modal
|
||
|
|
modalClose.addEventListener('click', () => {
|
||
|
|
loginModal.classList.remove('active');
|
||
|
|
});
|
||
|
|
|
||
|
|
// Close on overlay click
|
||
|
|
loginModal.addEventListener('click', (e) => {
|
||
|
|
if (e.target === loginModal) {
|
||
|
|
loginModal.classList.remove('active');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Handle login
|
||
|
|
loginForm.addEventListener('submit', async (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
const zoomersId = document.getElementById('zoomers-id').value.toUpperCase();
|
||
|
|
const pin = document.getElementById('zoomers-pin').value;
|
||
|
|
|
||
|
|
const result = await ZoomersAuth.login(zoomersId, pin);
|
||
|
|
|
||
|
|
if (result.success) {
|
||
|
|
currentUser = result;
|
||
|
|
updateNavForUser();
|
||
|
|
loginModal.classList.remove('active');
|
||
|
|
localStorage.setItem('zoomersUser', JSON.stringify(result));
|
||
|
|
} else {
|
||
|
|
alert(result.error);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Update nav for logged in user
|
||
|
|
function updateNavForUser() {
|
||
|
|
if (!currentUser) return;
|
||
|
|
|
||
|
|
navLinks.innerHTML = `
|
||
|
|
<a href="/" class="nav-link">Hem</a>
|
||
|
|
<a href="/academy/" class="nav-link active">Akademi</a>
|
||
|
|
<a href="/progress" class="nav-link">Framsteg</a>
|
||
|
|
<div class="nav-user">
|
||
|
|
<span class="nav-user-id">${currentUser.zoomersId}</span>
|
||
|
|
<button class="nav-logout" id="logout-btn">Logga ut</button>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
|
||
|
|
document.getElementById('logout-btn').addEventListener('click', logout);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Logout
|
||
|
|
function logout() {
|
||
|
|
currentUser = null;
|
||
|
|
localStorage.removeItem('zoomersUser');
|
||
|
|
navLinks.innerHTML = `
|
||
|
|
<a href="/" class="nav-link">Hem</a>
|
||
|
|
<a href="/academy/" class="nav-link active">Akademi</a>
|
||
|
|
<button class="nav-btn" id="login-btn">Logga in</button>
|
||
|
|
`;
|
||
|
|
document.getElementById('login-btn').addEventListener('click', () => {
|
||
|
|
loginModal.classList.add('active');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Check for saved session
|
||
|
|
const savedUser = localStorage.getItem('zoomersUser');
|
||
|
|
if (savedUser) {
|
||
|
|
currentUser = JSON.parse(savedUser);
|
||
|
|
updateNavForUser();
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|