Bernt
aee0f09db8
- Datafabrik: Dockerfile fix, agentorkestrering fungerar - Vision: Identify-modell, FAISS, OCR alla testade - API: Alla 7 integrationstester passerade - Upplösare: Entitetsupplösning verifierad
899 lines
26 KiB
HTML
899 lines
26 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 — Pedagogisk utbildning för Zoomers</title>
|
|
<style>
|
|
:root {
|
|
--qx-black: #0a0a0a;
|
|
--qx-white: #ffffff;
|
|
--qx-blue: #0066FF;
|
|
--qx-green: #00C853;
|
|
--qx-gray: #F5F5F7;
|
|
--qx-dark-gray: #1a1a1a;
|
|
--qx-text-muted: #6e6e73;
|
|
--qx-purple: #7B61FF;
|
|
--qx-orange: #FF6B35;
|
|
--qx-yellow: #FFD600;
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
|
|
color: var(--qx-black);
|
|
background: var(--qx-white);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Header */
|
|
.header {
|
|
background: var(--qx-black);
|
|
color: var(--qx-white);
|
|
padding: 16px 20px;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.header-content {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo { font-size: 1.5rem; font-weight: 700; }
|
|
.logo span { color: var(--qx-blue); }
|
|
|
|
.nav-links { display: flex; gap: 24px; align-items: center; }
|
|
.nav-links a {
|
|
color: var(--qx-white);
|
|
text-decoration: none;
|
|
font-size: 0.9rem;
|
|
opacity: 0.8;
|
|
transition: opacity 0.2s;
|
|
}
|
|
.nav-links a:hover { opacity: 1; }
|
|
|
|
.progress-mini {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.progress-bar-mini {
|
|
width: 100px;
|
|
height: 6px;
|
|
background: rgba(255,255,255,0.2);
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-fill-mini {
|
|
background: var(--qx-green);
|
|
height: 100%;
|
|
width: 0%;
|
|
transition: width 0.5s ease;
|
|
}
|
|
|
|
/* Hero */
|
|
.hero {
|
|
background: linear-gradient(135deg, var(--qx-black) 0%, #1a1a2e 50%, #16213e 100%);
|
|
color: var(--qx-white);
|
|
padding: 80px 20px;
|
|
text-align: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: radial-gradient(circle, rgba(0,102,255,0.1) 0%, transparent 70%);
|
|
animation: pulse 4s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { transform: scale(1); opacity: 0.5; }
|
|
50% { transform: scale(1.1); opacity: 0.8; }
|
|
}
|
|
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 3.5rem;
|
|
margin-bottom: 1rem;
|
|
background: linear-gradient(135deg, #fff 0%, var(--qx-blue) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 1.25rem;
|
|
color: #ccc;
|
|
max-width: 600px;
|
|
margin: 0 auto 2rem;
|
|
}
|
|
|
|
.hero-stats {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 40px;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.stat-item {
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
color: var(--qx-blue);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.875rem;
|
|
color: #999;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* Course Path */
|
|
.path-container {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
padding: 60px 20px;
|
|
}
|
|
|
|
.path-title {
|
|
text-align: center;
|
|
font-size: 2rem;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.path-subtitle {
|
|
text-align: center;
|
|
color: var(--qx-text-muted);
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
/* Module Cards */
|
|
.module-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
|
|
.module-card {
|
|
background: var(--qx-white);
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
|
|
transition: all 0.3s;
|
|
border: 2px solid transparent;
|
|
}
|
|
|
|
.module-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 12px 32px rgba(0,0,0,0.12);
|
|
border-color: var(--qx-blue);
|
|
}
|
|
|
|
.module-card.completed {
|
|
border-color: var(--qx-green);
|
|
}
|
|
|
|
.module-header {
|
|
padding: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.module-icon {
|
|
width: 64px;
|
|
height: 64px;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.75rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.module-icon.m1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
|
|
.module-icon.m2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
|
|
.module-icon.m3 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
|
|
.module-icon.m4 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
|
|
.module-icon.m5 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
|
|
.module-icon.m6 { background: linear-gradient(135deg, #30cfd0 0%, #330867 100%); }
|
|
|
|
.module-info { flex: 1; }
|
|
|
|
.module-number {
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
color: var(--qx-text-muted);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.module-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.module-desc {
|
|
color: var(--qx-text-muted);
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.module-meta {
|
|
display: flex;
|
|
gap: 16px;
|
|
margin-top: 12px;
|
|
font-size: 0.85rem;
|
|
color: var(--qx-text-muted);
|
|
}
|
|
|
|
.module-status {
|
|
padding: 8px 20px;
|
|
border-radius: 20px;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.module-status.locked {
|
|
background: var(--qx-gray);
|
|
color: var(--qx-text-muted);
|
|
}
|
|
|
|
.module-status.start {
|
|
background: var(--qx-blue);
|
|
color: white;
|
|
}
|
|
|
|
.module-status.done {
|
|
background: var(--qx-green);
|
|
color: white;
|
|
}
|
|
|
|
/* Lesson List (expandable) */
|
|
.lesson-list {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.5s ease;
|
|
background: var(--qx-gray);
|
|
}
|
|
|
|
.lesson-list.expanded {
|
|
max-height: 2000px;
|
|
}
|
|
|
|
.lesson-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 16px 32px;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.lesson-item:hover {
|
|
background: rgba(0,102,255,0.05);
|
|
}
|
|
|
|
.lesson-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.lesson-check {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
border: 2px solid #ddd;
|
|
margin-right: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.75rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.lesson-check.completed {
|
|
background: var(--qx-green);
|
|
border-color: var(--qx-green);
|
|
color: white;
|
|
}
|
|
|
|
.lesson-check.locked {
|
|
background: #eee;
|
|
border-color: #ddd;
|
|
color: #999;
|
|
}
|
|
|
|
.lesson-info { flex: 1; }
|
|
|
|
.lesson-name {
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.lesson-duration {
|
|
font-size: 0.8rem;
|
|
color: var(--qx-text-muted);
|
|
}
|
|
|
|
.lesson-type {
|
|
font-size: 0.75rem;
|
|
padding: 4px 12px;
|
|
border-radius: 12px;
|
|
background: white;
|
|
color: var(--qx-text-muted);
|
|
}
|
|
|
|
/* Certificate Section */
|
|
.certificate-section {
|
|
background: linear-gradient(135deg, var(--qx-dark-gray) 0%, var(--qx-black) 100%);
|
|
color: white;
|
|
padding: 80px 20px;
|
|
text-align: center;
|
|
margin-top: 60px;
|
|
}
|
|
|
|
.certificate-preview {
|
|
max-width: 600px;
|
|
margin: 40px auto;
|
|
background: white;
|
|
color: var(--qx-black);
|
|
padding: 40px;
|
|
border-radius: 16px;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.cert-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--qx-blue);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.cert-subtitle {
|
|
color: var(--qx-text-muted);
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.cert-name {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
margin: 24px 0;
|
|
border-bottom: 2px solid var(--qx-blue);
|
|
padding-bottom: 16px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.cert-date {
|
|
color: var(--qx-text-muted);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Footer */
|
|
.footer {
|
|
background: var(--qx-black);
|
|
color: white;
|
|
padding: 40px 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.footer a {
|
|
color: var(--qx-blue);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.hero h1 { font-size: 2rem; }
|
|
.hero-stats { flex-direction: column; gap: 20px; }
|
|
.module-header { flex-direction: column; text-align: center; }
|
|
.nav-links { display: none; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="header">
|
|
<div class="header-content">
|
|
<div class="logo">quiXzoom <span>Academy</span></div>
|
|
<nav class="nav-links">
|
|
<a href="/">Hem</a>
|
|
<a href="#modules">Utbildningar</a>
|
|
<a href="#certificate">Certifikat</a>
|
|
<div class="progress-mini">
|
|
<div class="progress-bar-mini">
|
|
<div class="progress-fill-mini" id="headerProgress"></div>
|
|
</div>
|
|
<span id="headerProgressText">0%</span>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="hero">
|
|
<div class="hero-content">
|
|
<h1>Bli en mästerlig Zoomer</h1>
|
|
<p>Pedagogisk utbildning utvecklad av experter. Lär dig fotografera, leverera kvalitet och maximera din inkomst.</p>
|
|
<div class="hero-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-number">6</div>
|
|
<div class="stat-label">Moduler</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number">24</div>
|
|
<div class="stat-label">Lektioner</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number">3h</div>
|
|
<div class="stat-label">Total tid</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number">100%</div>
|
|
<div class="stat-label">Gratis</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="path-container" id="modules">
|
|
<h2 class="path-title">Din utbildningsväg</h2>
|
|
<p class="path-subtitle">Gå igenom modulerna i ordning och tjäna ditt certifikat</p>
|
|
|
|
<div class="module-list">
|
|
<!-- Module 1 -->
|
|
<div class="module-card" id="module1">
|
|
<div class="module-header" onclick="toggleModule('module1')">
|
|
<div class="module-icon m1">🚀</div>
|
|
<div class="module-info">
|
|
<div class="module-number">Modul 01</div>
|
|
<div class="module-title">Kom igång</div>
|
|
<div class="module-desc">Från registrering till första utbetalning</div>
|
|
<div class="module-meta">
|
|
<span>⏱️ 35 min</span>
|
|
<span>📚 4 lektioner</span>
|
|
<span>🎯 Nybörjare</span>
|
|
</div>
|
|
</div>
|
|
<div class="module-status start" id="status1">Starta</div>
|
|
</div>
|
|
<div class="lesson-list" id="lessons1">
|
|
<div class="lesson-item" onclick="openLesson('m1l1')">
|
|
<div class="lesson-check completed">✓</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Välkommen till quiXzoom</div>
|
|
<div class="lesson-duration">5 min · Introduktion</div>
|
|
</div>
|
|
<span class="lesson-type">📖 Läsa</span>
|
|
</div>
|
|
<div class="lesson-item" onclick="openLesson('m1l2')">
|
|
<div class="lesson-check">2</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Skapa ditt konto och verifiera identitet</div>
|
|
<div class="lesson-duration">8 min · Video + Quiz</div>
|
|
</div>
|
|
<span class="lesson-type">▶️ Video</span>
|
|
</div>
|
|
<div class="lesson-item" onclick="openLesson('m1l3')">
|
|
<div class="lesson-check locked">🔒</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Hitta och acceptera ditt första uppdrag</div>
|
|
<div class="lesson-duration">10 min · Interaktiv guide</div>
|
|
</div>
|
|
<span class="lesson-type">🎮 Interaktiv</span>
|
|
</div>
|
|
<div class="lesson-item" onclick="openLesson('m1l4')">
|
|
<div class="lesson-check locked">🔒</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Ta dina första bilder och skicka in</div>
|
|
<div class="lesson-duration">12 min · Praktisk övning</div>
|
|
</div>
|
|
<span class="lesson-type">📸 Praktiskt</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Module 2 -->
|
|
<div class="module-card" id="module2">
|
|
<div class="module-header" onclick="toggleModule('module2')">
|
|
<div class="module-icon m2">📸</div>
|
|
<div class="module-info">
|
|
<div class="module-number">Modul 02</div>
|
|
<div class="module-title">Fotokvalitet</div>
|
|
<div class="module-desc">Så här tar du bilder som godkänns direkt av AI</div>
|
|
<div class="module-meta">
|
|
<span>⏱️ 52 min</span>
|
|
<span>📚 4 lektioner</span>
|
|
<span>🎯 Nybörjare</span>
|
|
</div>
|
|
</div>
|
|
<div class="module-status locked" id="status2">Låst</div>
|
|
</div>
|
|
<div class="lesson-list" id="lessons2">
|
|
<div class="lesson-item">
|
|
<div class="lesson-check locked">🔒</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">AI-granskning — vad tittar den på?</div>
|
|
<div class="lesson-duration">15 min · Video</div>
|
|
</div>
|
|
<span class="lesson-type">▶️ Video</span>
|
|
</div>
|
|
<div class="lesson-item">
|
|
<div class="lesson-check locked">🔒</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Ljus och exponering</div>
|
|
<div class="lesson-duration">12 min · Bildexempel</div>
|
|
</div>
|
|
<span class="lesson-type">📸 Bilder</span>
|
|
</div>
|
|
<div class="lesson-item">
|
|
<div class="lesson-check locked">🔒</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Fokus och skärpa</div>
|
|
<div class="lesson-duration">10 min · Quiz</div>
|
|
</div>
|
|
<span class="lesson-type">❓ Quiz</span>
|
|
</div>
|
|
<div class="lesson-item">
|
|
<div class="lesson-check locked">🔒</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Framing och komposition</div>
|
|
<div class="lesson-duration">15 min · Praktiskt</div>
|
|
</div>
|
|
<span class="lesson-type">📸 Praktiskt</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Module 3 -->
|
|
<div class="module-card" id="module3">
|
|
<div class="module-header" onclick="toggleModule('module3')">
|
|
<div class="module-icon m3">📍</div>
|
|
<div class="module-info">
|
|
<div class="module-number">Modul 03</div>
|
|
<div class="module-title">GPS och plats</div>
|
|
<div class="module-desc">Varför plats är viktigt och hur du optimerar det</div>
|
|
<div class="module-meta">
|
|
<span>⏱️ 30 min</span>
|
|
<span>📚 3 lektioner</span>
|
|
<span>🎯 Medel</span>
|
|
</div>
|
|
</div>
|
|
<div class="module-status locked" id="status3">Låst</div>
|
|
</div>
|
|
<div class="lesson-list" id="lessons3">
|
|
<div class="lesson-item">
|
|
<div class="lesson-check locked">🔒</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">GPS-accuracy — så fungerar det</div>
|
|
<div class="lesson-duration">10 min</div>
|
|
</div>
|
|
<span class="lesson-type">📖 Läsa</span>
|
|
</div>
|
|
<div class="lesson-item">
|
|
<div class="lesson-check locked">🔒</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Bästa praxis för platsdata</div>
|
|
<div class="lesson-duration">8 min</div>
|
|
</div>
|
|
<span class="lesson-type">📖 Läsa</span>
|
|
</div>
|
|
<div class="lesson-item">
|
|
<div class="lesson-check locked">🔒</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Vanliga GPS-fel och hur du undviker dem</div>
|
|
<div class="lesson-duration">12 min</div>
|
|
</div>
|
|
<span class="lesson-type">❓ Quiz</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Module 4 -->
|
|
<div class="module-card" id="module4">
|
|
<div class="module-header" onclick="toggleModule('module4')">
|
|
<div class="module-icon m4">🛡️</div>
|
|
<div class="module-info">
|
|
<div class="module-number">Modul 04</div>
|
|
<div class="module-title">Säkerhet och etik</div>
|
|
<div class="module-desc">Säker fotografering och etiska riktlinjer</div>
|
|
<div class="module-meta">
|
|
<span>⏱️ 37 min</span>
|
|
<span>📚 3 lektioner</span>
|
|
<span>🎯 Medel</span>
|
|
</div>
|
|
</div>
|
|
<div class="module-status locked" id="status4">Låst</div>
|
|
</div>
|
|
<div class="lesson-list" id="lessons4">
|
|
<div class="lesson-item">
|
|
<div class="lesson-check locked">🔒</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Personlig säkerhet i fält</div>
|
|
<div class="lesson-duration">15 min · Video</div>
|
|
</div>
|
|
<span class="lesson-type">▶️ Video</span>
|
|
</div>
|
|
<div class="lesson-item">
|
|
<div class="lesson-check locked">🔒</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Integritet och GDPR</div>
|
|
<div class="lesson-duration">12 min</div>
|
|
</div>
|
|
<span class="lesson-type">📖 Läsa</span>
|
|
</div>
|
|
<div class="lesson-item">
|
|
<div class="lesson-check locked">🔒</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Trafiksäkerhet</div>
|
|
<div class="lesson-duration">10 min · Quiz</div>
|
|
</div>
|
|
<span class="lesson-type">❓ Quiz</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Module 5 -->
|
|
<div class="module-card" id="module5">
|
|
<div class="module-header" onclick="toggleModule('module5')">
|
|
<div class="module-icon m5">⚡</div>
|
|
<div class="module-info">
|
|
<div class="module-number">Modul 05</div>
|
|
<div class="module-title">Avancerade tekniker</div>
|
|
<div class="module-desc">Maximera kvalitet och effektivitet</div>
|
|
<div class="module-meta">
|
|
<span>⏱️ 37 min</span>
|
|
<span>📚 3 lektioner</span>
|
|
<span>🎯 Avancerad</span>
|
|
</div>
|
|
</div>
|
|
<div class="module-status locked" id="status5">Låst</div>
|
|
</div>
|
|
<div class="lesson-list" id="lessons5">
|
|
<div class="lesson-item">
|
|
<div class="lesson-check locked">🔒</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Batch-fotografering</div>
|
|
<div class="lesson-duration">15 min · Praktiskt</div>
|
|
</div>
|
|
<span class="lesson-type">📸 Praktiskt</span>
|
|
</div>
|
|
<div class="lesson-item">
|
|
<div class="lesson-check locked">🔒</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Metadata och EXIF</div>
|
|
<div class="lesson-duration">10 min</div>
|
|
</div>
|
|
<span class="lesson-type">📖 Läsa</span>
|
|
</div>
|
|
<div class="lesson-item">
|
|
<div class="lesson-check locked">🔒</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Redigering och förbättring</div>
|
|
<div class="lesson-duration">12 min · Video</div>
|
|
</div>
|
|
<span class="lesson-type">▶️ Video</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Module 6 -->
|
|
<div class="module-card" id="module6">
|
|
<div class="module-header" onclick="toggleModule('module6')">
|
|
<div class="module-icon m6">💰</div>
|
|
<div class="module-info">
|
|
<div class="module-number">Modul 06</div>
|
|
<div class="module-title">Maximera inkomsten</div>
|
|
<div class="module-desc">Strategier för att tjäna mer som Zoomer</div>
|
|
<div class="module-meta">
|
|
<span>⏱️ 45 min</span>
|
|
<span>📚 4 lektioner</span>
|
|
<span>🎯 Avancerad</span>
|
|
</div>
|
|
</div>
|
|
<div class="module-status locked" id="status6">Låst</div>
|
|
</div>
|
|
<div class="lesson-list" id="lessons6">
|
|
<div class="lesson-item">
|
|
<div class="lesson-check locked">🔒</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Förstå utbetalningar och nivåer</div>
|
|
<div class="lesson-duration">10 min</div>
|
|
</div>
|
|
<span class="lesson-type">📖 Läsa</span>
|
|
</div>
|
|
<div class="lesson-item">
|
|
<div class="lesson-check locked">🔒</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Planera din rutt effektivt</div>
|
|
<div class="lesson-duration">12 min · Interaktiv karta</div>
|
|
</div>
|
|
<span class="lesson-type">🎮 Interaktiv</span>
|
|
</div>
|
|
<div class="lesson-item">
|
|
<div class="lesson-check locked">🔒</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Bygg ditt rykte och få fler uppdrag</div>
|
|
<div class="lesson-duration">8 min</div>
|
|
</div>
|
|
<span class="lesson-type">📖 Läsa</span>
|
|
</div>
|
|
<div class="lesson-item">
|
|
<div class="lesson-check locked">🔒</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Skatteoptimering för Zoomers</div>
|
|
<div class="lesson-duration">15 min · Video</div>
|
|
</div>
|
|
<span class="lesson-type">▶️ Video</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Certificate Section -->
|
|
<section class="certificate-section" id="certificate">
|
|
<h2 style="font-size: 2.5rem; margin-bottom: 1rem;">Ditt certifikat väntar</h2>
|
|
<p style="color: #999; max-width: 500px; margin: 0 auto 40px;">Genomför alla 6 moduler och få ett officiellt quiXzoom-certifikat som du kan lägga till din profil.</p>
|
|
|
|
<div class="certificate-preview">
|
|
<div class="cert-title">CERTIFIKAT</div>
|
|
<div class="cert-subtitle">quiXzoom Academy</div>
|
|
<div style="font-size: 1rem; color: var(--qx-text-muted); margin: 16px 0;">Härmed intygas att</div>
|
|
<div class="cert-name" id="certName">Ditt Namn</div>
|
|
<div style="font-size: 1rem; color: var(--qx-text-muted); margin: 16px 0;">har framgångsrikt genomfört</div>
|
|
<div style="font-size: 1.25rem; font-weight: 600;">Zoomer Utbildningsprogram</div>
|
|
<div style="margin-top: 24px; padding-top: 24px; border-top: 1px solid #eee;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<div class="cert-date" id="certDate">Datum: 2026-07-03</div>
|
|
<div style="text-align: right;">
|
|
<div style="font-family: cursive; font-size: 1.5rem; color: var(--qx-blue);">quiXzoom</div>
|
|
<div style="font-size: 0.75rem; color: var(--qx-text-muted);">Verifierat certifikat</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p style="color: #666; margin-top: 40px; font-size: 0.9rem;">Certifikatet genereras automatiskt när du slutfört alla moduler.</p>
|
|
</section>
|
|
|
|
<footer class="footer">
|
|
<p>© 2026 quiXzoom Academy — En del av <a href="https://aamos.systems">AAMOS</a></p>
|
|
<p style="margin-top: 8px; font-size: 0.85rem; color: #666;">Utbildningen uppdateras kontinuerligt baserat på feedback från Zoomers och kunder.</p>
|
|
</footer>
|
|
|
|
<script>
|
|
// Progress tracking
|
|
const totalLessons = 24;
|
|
let completedLessons = JSON.parse(localStorage.getItem('academyProgress') || '[]');
|
|
let currentModule = parseInt(localStorage.getItem('academyCurrentModule') || '1');
|
|
|
|
function updateProgress() {
|
|
const completed = completedLessons.length;
|
|
const percentage = Math.round((completed / totalLessons) * 100);
|
|
|
|
document.getElementById('headerProgress').style.width = percentage + '%';
|
|
document.getElementById('headerProgressText').textContent = percentage + '%';
|
|
|
|
// Update certificate name if logged in
|
|
const userName = localStorage.getItem('zoomerName') || 'Ditt Namn';
|
|
document.getElementById('certName').textContent = userName;
|
|
|
|
// Update module statuses
|
|
updateModuleStatuses();
|
|
}
|
|
|
|
function updateModuleStatuses() {
|
|
const modules = [
|
|
{ id: 'module1', lessons: ['m1l1', 'm1l2', 'm1l3', 'm1l4'], first: 'm1l1' },
|
|
{ id: 'module2', lessons: ['m2l1', 'm2l2', 'm2l3', 'm2l4'], first: 'm2l1' },
|
|
{ id: 'module3', lessons: ['m3l1', 'm3l2', 'm3l3'], first: 'm3l1' },
|
|
{ id: 'module4', lessons: ['m4l1', 'm4l2', 'm4l3'], first: 'm4l1' },
|
|
{ id: 'module5', lessons: ['m5l1', 'm5l2', 'm5l3'], first: 'm5l1' },
|
|
{ id: 'module6', lessons: ['m6l1', 'm6l2', 'm6l3', 'm6l4'], first: 'm6l1' }
|
|
];
|
|
|
|
modules.forEach((module, index) => {
|
|
const moduleNum = index + 1;
|
|
const statusEl = document.getElementById('status' + moduleNum);
|
|
const cardEl = document.getElementById(module.id);
|
|
|
|
const moduleCompleted = module.lessons.every(l => completedLessons.includes(l));
|
|
const moduleStarted = module.lessons.some(l => completedLessons.includes(l));
|
|
const isUnlocked = moduleNum === 1 || modules[index - 1].lessons.every(l => completedLessons.includes(l));
|
|
|
|
if (moduleCompleted) {
|
|
statusEl.textContent = '✓ Klar';
|
|
statusEl.className = 'module-status done';
|
|
cardEl.classList.add('completed');
|
|
} else if (moduleStarted && isUnlocked) {
|
|
statusEl.textContent = 'Fortsätt';
|
|
statusEl.className = 'module-status start';
|
|
} else if (isUnlocked) {
|
|
statusEl.textContent = 'Starta';
|
|
statusEl.className = 'module-status start';
|
|
} else {
|
|
statusEl.textContent = 'Låst';
|
|
statusEl.className = 'module-status locked';
|
|
}
|
|
|
|
// Update lesson checks
|
|
module.lessons.forEach((lessonId, lessonIndex) => {
|
|
const lessonEl = document.querySelector(`#lessons${moduleNum} .lesson-item:nth-child(${lessonIndex + 1}) .lesson-check`);
|
|
if (lessonEl) {
|
|
if (completedLessons.includes(lessonId)) {
|
|
lessonEl.textContent = '✓';
|
|
lessonEl.className = 'lesson-check completed';
|
|
} else if (isUnlocked) {
|
|
lessonEl.textContent = lessonIndex + 1;
|
|
lessonEl.className = 'lesson-check';
|
|
} else {
|
|
lessonEl.textContent = '🔒';
|
|
lessonEl.className = 'lesson-check locked';
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function toggleModule(moduleId) {
|
|
const lessonsEl = document.getElementById('lessons' + moduleId.replace('module', ''));
|
|
lessonsEl.classList.toggle('expanded');
|
|
}
|
|
|
|
function openLesson(lessonId) {
|
|
// Check if lesson is unlocked
|
|
const moduleNum = parseInt(lessonId.charAt(1));
|
|
const modules = [
|
|
{ lessons: ['m1l1', 'm1l2', 'm1l3', 'm1l4'] },
|
|
{ lessons: ['m2l1', 'm2l2', 'm2l3', 'm2l4'] },
|
|
{ lessons: ['m3l1', 'm3l2', 'm3l3'] },
|
|
{ lessons: ['m4l1', 'm4l2', 'm4l3'] },
|
|
{ lessons: ['m5l1', 'm5l2', 'm5l3'] },
|
|
{ lessons: ['m6l1', 'm6l2', 'm6l3', 'm6l4'] }
|
|
];
|
|
|
|
const isUnlocked = moduleNum === 1 || modules[moduleNum - 2].lessons.every(l => completedLessons.includes(l));
|
|
|
|
if (!isUnlocked) {
|
|
alert('🔒 Denna lektion är låst. Genomför föregående modul först.');
|
|
return;
|
|
}
|
|
|
|
// Navigate to lesson page
|
|
window.location.href = `/academy/module${moduleNum}/${lessonId}`;
|
|
}
|
|
|
|
// Initialize
|
|
updateProgress();
|
|
|
|
// Auto-expand first module if not started
|
|
if (completedLessons.length === 0) {
|
|
document.getElementById('lessons1').classList.add('expanded');
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|