702 lines
22 KiB
HTML
702 lines
22 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 fotografera som ett proffs</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;
|
||
|
|
}
|
||
|
|
|
||
|
|
* { 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: 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; }
|
||
|
|
|
||
|
|
.nav-links { display: flex; gap: 24px; }
|
||
|
|
.nav-links a { color: var(--qx-white); text-decoration: none; font-size: 0.9rem; }
|
||
|
|
|
||
|
|
/* Hero */
|
||
|
|
.hero {
|
||
|
|
background: linear-gradient(135deg, var(--qx-black) 0%, #1a1a2e 100%);
|
||
|
|
color: var(--qx-white);
|
||
|
|
padding: 80px 20px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero h1 { font-size: 3rem; margin-bottom: 1rem; }
|
||
|
|
.hero p { font-size: 1.25rem; color: #ccc; max-width: 600px; margin: 0 auto 2rem; }
|
||
|
|
|
||
|
|
.progress-bar {
|
||
|
|
max-width: 400px;
|
||
|
|
margin: 0 auto;
|
||
|
|
background: rgba(255,255,255,0.1);
|
||
|
|
border-radius: 10px;
|
||
|
|
padding: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress-fill {
|
||
|
|
background: var(--qx-green);
|
||
|
|
height: 8px;
|
||
|
|
border-radius: 6px;
|
||
|
|
width: 0%;
|
||
|
|
transition: width 0.5s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Course Grid */
|
||
|
|
.container { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }
|
||
|
|
|
||
|
|
.section-title {
|
||
|
|
font-size: 2rem;
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-subtitle {
|
||
|
|
color: var(--qx-text-muted);
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.course-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||
|
|
gap: 24px;
|
||
|
|
margin-bottom: 60px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.course-card {
|
||
|
|
background: var(--qx-white);
|
||
|
|
border-radius: 16px;
|
||
|
|
overflow: hidden;
|
||
|
|
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
|
||
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.course-card:hover {
|
||
|
|
transform: translateY(-4px);
|
||
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
|
||
|
|
}
|
||
|
|
|
||
|
|
.course-header {
|
||
|
|
padding: 24px;
|
||
|
|
color: var(--qx-white);
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.course-header.module-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
|
||
|
|
.course-header.module-2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
|
||
|
|
.course-header.module-3 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
|
||
|
|
.course-header.module-4 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
|
||
|
|
.course-header.module-5 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
|
||
|
|
.course-header.module-6 { background: linear-gradient(135deg, #30cfd0 0%, #330867 100%); }
|
||
|
|
|
||
|
|
.course-number {
|
||
|
|
font-size: 0.75rem;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 2px;
|
||
|
|
opacity: 0.8;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.course-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; }
|
||
|
|
.course-desc { font-size: 0.9rem; opacity: 0.9; }
|
||
|
|
|
||
|
|
.course-body { padding: 24px; }
|
||
|
|
|
||
|
|
.lesson-list {
|
||
|
|
list-style: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.lesson-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 12px 0;
|
||
|
|
border-bottom: 1px solid var(--qx-gray);
|
||
|
|
}
|
||
|
|
|
||
|
|
.lesson-item:last-child { border-bottom: none; }
|
||
|
|
|
||
|
|
.lesson-icon {
|
||
|
|
width: 32px;
|
||
|
|
height: 32px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: var(--qx-gray);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
margin-right: 12px;
|
||
|
|
font-size: 0.8rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.lesson-icon.completed { background: var(--qx-green); color: white; }
|
||
|
|
.lesson-icon.locked { background: #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-status {
|
||
|
|
font-size: 0.75rem;
|
||
|
|
padding: 4px 12px;
|
||
|
|
border-radius: 12px;
|
||
|
|
background: var(--qx-gray);
|
||
|
|
}
|
||
|
|
|
||
|
|
.lesson-status.done { background: var(--qx-green); color: white; }
|
||
|
|
|
||
|
|
/* Lesson Content Modal */
|
||
|
|
.modal {
|
||
|
|
display: none;
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: rgba(0,0,0,0.8);
|
||
|
|
z-index: 1000;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal.active { display: block; }
|
||
|
|
|
||
|
|
.modal-content {
|
||
|
|
background: white;
|
||
|
|
max-width: 800px;
|
||
|
|
margin: 40px auto;
|
||
|
|
border-radius: 16px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-header {
|
||
|
|
background: var(--qx-black);
|
||
|
|
color: white;
|
||
|
|
padding: 24px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-close {
|
||
|
|
background: none;
|
||
|
|
border: none;
|
||
|
|
color: white;
|
||
|
|
font-size: 1.5rem;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-body { padding: 32px; }
|
||
|
|
|
||
|
|
.lesson-content h2 { margin-bottom: 16px; }
|
||
|
|
.lesson-content p { margin-bottom: 16px; color: #333; }
|
||
|
|
|
||
|
|
.lesson-content .tip {
|
||
|
|
background: #e8f4fd;
|
||
|
|
border-left: 4px solid var(--qx-blue);
|
||
|
|
padding: 16px;
|
||
|
|
margin: 20px 0;
|
||
|
|
border-radius: 0 8px 8px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.lesson-content .warning {
|
||
|
|
background: #fff3cd;
|
||
|
|
border-left: 4px solid var(--qx-orange);
|
||
|
|
padding: 16px;
|
||
|
|
margin: 20px 0;
|
||
|
|
border-radius: 0 8px 8px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.lesson-content img {
|
||
|
|
max-width: 100%;
|
||
|
|
border-radius: 8px;
|
||
|
|
margin: 16px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.quiz-container {
|
||
|
|
background: var(--qx-gray);
|
||
|
|
padding: 24px;
|
||
|
|
border-radius: 12px;
|
||
|
|
margin: 24px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.quiz-question { font-weight: 600; margin-bottom: 16px; }
|
||
|
|
|
||
|
|
.quiz-options { list-style: none; }
|
||
|
|
.quiz-option {
|
||
|
|
padding: 12px 16px;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
background: white;
|
||
|
|
border-radius: 8px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.2s;
|
||
|
|
}
|
||
|
|
.quiz-option:hover { background: var(--qx-blue); color: white; }
|
||
|
|
.quiz-option.correct { background: var(--qx-green); color: white; }
|
||
|
|
.quiz-option.wrong { background: #ff4444; color: white; }
|
||
|
|
|
||
|
|
/* Footer */
|
||
|
|
.footer {
|
||
|
|
background: var(--qx-dark-gray);
|
||
|
|
color: white;
|
||
|
|
padding: 40px 20px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Responsive */
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.hero h1 { font-size: 2rem; }
|
||
|
|
.course-grid { grid-template-columns: 1fr; }
|
||
|
|
.nav-links { display: none; }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<header class="header">
|
||
|
|
<div class="header-content">
|
||
|
|
<div class="logo">quiXzoom Academy</div>
|
||
|
|
<nav class="nav-links">
|
||
|
|
<a href="/">Hem</a>
|
||
|
|
<a href="#courses">Utbildningar</a>
|
||
|
|
<a href="#progress">Min progress</a>
|
||
|
|
<a href="/app">Öppna app</a>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<section class="hero">
|
||
|
|
<h1>Bli en mästerlig Zoomer</h1>
|
||
|
|
<p>Lär dig fotografera, leverera kvalitet och maximera din inkomst. Gratis utbildning för alla Zoomers.</p>
|
||
|
|
<div class="progress-bar">
|
||
|
|
<div class="progress-fill" id="totalProgress"></div>
|
||
|
|
</div>
|
||
|
|
<p style="margin-top: 12px; font-size: 0.9rem; color: #999;">Din progress: <span id="progressText">0%</span></p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<h2 class="section-title" id="courses">Utbildningsmoduler</h2>
|
||
|
|
<p class="section-subtitle">6 moduler · 24 lektioner · ~3 timmar total tid</p>
|
||
|
|
|
||
|
|
<div class="course-grid">
|
||
|
|
<!-- Module 1 -->
|
||
|
|
<div class="course-card" onclick="openLesson('module1')">
|
||
|
|
<div class="course-header module-1">
|
||
|
|
<div class="course-number">Modul 01</div>
|
||
|
|
<div class="course-title">Kom igång</div>
|
||
|
|
<div class="course-desc">Från registrering till första utbetalning</div>
|
||
|
|
</div>
|
||
|
|
<div class="course-body">
|
||
|
|
<ul class="lesson-list">
|
||
|
|
<li class="lesson-item">
|
||
|
|
<div class="lesson-icon completed">✓</div>
|
||
|
|
<div class="lesson-info">
|
||
|
|
<div class="lesson-name">Välkommen till quiXzoom</div>
|
||
|
|
<div class="lesson-duration">5 min</div>
|
||
|
|
</div>
|
||
|
|
<span class="lesson-status done">Klar</span>
|
||
|
|
</li>
|
||
|
|
<li class="lesson-item">
|
||
|
|
<div class="lesson-icon">2</div>
|
||
|
|
<div class="lesson-info">
|
||
|
|
<div class="lesson-name">Skapa ditt konto</div>
|
||
|
|
<div class="lesson-duration">8 min</div>
|
||
|
|
</div>
|
||
|
|
<span class="lesson-status">Starta</span>
|
||
|
|
</li>
|
||
|
|
<li class="lesson-item">
|
||
|
|
<div class="lesson-icon locked">🔒</div>
|
||
|
|
<div class="lesson-info">
|
||
|
|
<div class="lesson-name">Hitta ditt första uppdrag</div>
|
||
|
|
<div class="lesson-duration">10 min</div>
|
||
|
|
</div>
|
||
|
|
<span class="lesson-status">Låst</span>
|
||
|
|
</li>
|
||
|
|
<li class="lesson-item">
|
||
|
|
<div class="lesson-icon locked">🔒</div>
|
||
|
|
<div class="lesson-info">
|
||
|
|
<div class="lesson-name">Ta dina första bilder</div>
|
||
|
|
<div class="lesson-duration">12 min</div>
|
||
|
|
</div>
|
||
|
|
<span class="lesson-status">Låst</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Module 2 -->
|
||
|
|
<div class="course-card" onclick="openLesson('module2')">
|
||
|
|
<div class="course-header module-2">
|
||
|
|
<div class="course-number">Modul 02</div>
|
||
|
|
<div class="course-title">Fotokvalitet</div>
|
||
|
|
<div class="course-desc">Så här tar du bilder som godkänns direkt</div>
|
||
|
|
</div>
|
||
|
|
<div class="course-body">
|
||
|
|
<ul class="lesson-list">
|
||
|
|
<li class="lesson-item">
|
||
|
|
<div class="lesson-icon">1</div>
|
||
|
|
<div class="lesson-info">
|
||
|
|
<div class="lesson-name">AI-granskning — vad tittar den på?</div>
|
||
|
|
<div class="lesson-duration">15 min</div>
|
||
|
|
</div>
|
||
|
|
<span class="lesson-status">Starta</span>
|
||
|
|
</li>
|
||
|
|
<li class="lesson-item">
|
||
|
|
<div class="lesson-icon locked">🔒</div>
|
||
|
|
<div class="lesson-info">
|
||
|
|
<div class="lesson-name">Ljus och exponering</div>
|
||
|
|
<div class="lesson-duration">12 min</div>
|
||
|
|
</div>
|
||
|
|
<span class="lesson-status">Låst</span>
|
||
|
|
</li>
|
||
|
|
<li class="lesson-item">
|
||
|
|
<div class="lesson-icon locked">🔒</div>
|
||
|
|
<div class="lesson-info">
|
||
|
|
<div class="lesson-name">Fokus och skärpa</div>
|
||
|
|
<div class="lesson-duration">10 min</div>
|
||
|
|
</div>
|
||
|
|
<span class="lesson-status">Låst</span>
|
||
|
|
</li>
|
||
|
|
<li class="lesson-item">
|
||
|
|
<div class="lesson-icon locked">🔒</div>
|
||
|
|
<div class="lesson-info">
|
||
|
|
<div class="lesson-name">Framing och komposition</div>
|
||
|
|
<div class="lesson-duration">15 min</div>
|
||
|
|
</div>
|
||
|
|
<span class="lesson-status">Låst</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Module 3 -->
|
||
|
|
<div class="course-card" onclick="openLesson('module3')">
|
||
|
|
<div class="course-header module-3">
|
||
|
|
<div class="course-number">Modul 03</div>
|
||
|
|
<div class="course-title">GPS och plats</div>
|
||
|
|
<div class="course-desc">Varför plats är viktigt och hur du optimerar det</div>
|
||
|
|
</div>
|
||
|
|
<div class="course-body">
|
||
|
|
<ul class="lesson-list">
|
||
|
|
<li class="lesson-item">
|
||
|
|
<div class="lesson-icon">1</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-status">Starta</span>
|
||
|
|
</li>
|
||
|
|
<li class="lesson-item">
|
||
|
|
<div class="lesson-icon 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-status">Låst</span>
|
||
|
|
</li>
|
||
|
|
<li class="lesson-item">
|
||
|
|
<div class="lesson-icon 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-status">Låst</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Module 4 -->
|
||
|
|
<div class="course-card" onclick="openLesson('module4')">
|
||
|
|
<div class="course-header module-4">
|
||
|
|
<div class="course-number">Modul 04</div>
|
||
|
|
<div class="course-title">Säkerhet och etik</div>
|
||
|
|
<div class="course-desc">Säker fotografering och etiska riktlinjer</div>
|
||
|
|
</div>
|
||
|
|
<div class="course-body">
|
||
|
|
<ul class="lesson-list">
|
||
|
|
<li class="lesson-item">
|
||
|
|
<div class="lesson-icon">1</div>
|
||
|
|
<div class="lesson-info">
|
||
|
|
<div class="lesson-name">Personlig säkerhet i fält</div>
|
||
|
|
<div class="lesson-duration">15 min</div>
|
||
|
|
</div>
|
||
|
|
<span class="lesson-status">Starta</span>
|
||
|
|
</li>
|
||
|
|
<li class="lesson-item">
|
||
|
|
<div class="lesson-icon 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-status">Låst</span>
|
||
|
|
</li>
|
||
|
|
<li class="lesson-item">
|
||
|
|
<div class="lesson-icon locked">🔒</div>
|
||
|
|
<div class="lesson-info">
|
||
|
|
<div class="lesson-name">Trafiksäkerhet</div>
|
||
|
|
<div class="lesson-duration">10 min</div>
|
||
|
|
</div>
|
||
|
|
<span class="lesson-status">Låst</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Module 5 -->
|
||
|
|
<div class="course-card" onclick="openLesson('module5')">
|
||
|
|
<div class="course-header module-5">
|
||
|
|
<div class="course-number">Modul 05</div>
|
||
|
|
<div class="course-title">Avancerade tekniker</div>
|
||
|
|
<div class="course-desc">Maximera kvalitet och effektivitet</div>
|
||
|
|
</div>
|
||
|
|
<div class="course-body">
|
||
|
|
<ul class="lesson-list">
|
||
|
|
<li class="lesson-item">
|
||
|
|
<div class="lesson-icon">1</div>
|
||
|
|
<div class="lesson-info">
|
||
|
|
<div class="lesson-name">Batch-fotografering</div>
|
||
|
|
<div class="lesson-duration">15 min</div>
|
||
|
|
</div>
|
||
|
|
<span class="lesson-status">Starta</span>
|
||
|
|
</li>
|
||
|
|
<li class="lesson-item">
|
||
|
|
<div class="lesson-icon 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-status">Låst</span>
|
||
|
|
</li>
|
||
|
|
<li class="lesson-item">
|
||
|
|
<div class="lesson-icon locked">🔒</div>
|
||
|
|
<div class="lesson-info">
|
||
|
|
<div class="lesson-name">Redigering och förbättring</div>
|
||
|
|
<div class="lesson-duration">12 min</div>
|
||
|
|
</div>
|
||
|
|
<span class="lesson-status">Låst</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Module 6 -->
|
||
|
|
<div class="course-card" onclick="openLesson('module6')">
|
||
|
|
<div class="course-header module-6">
|
||
|
|
<div class="course-number">Modul 06</div>
|
||
|
|
<div class="course-title">Maximera inkomsten</div>
|
||
|
|
<div class="course-desc">Strategier för att tjäna mer</div>
|
||
|
|
</div>
|
||
|
|
<div class="course-body">
|
||
|
|
<ul class="lesson-list">
|
||
|
|
<li class="lesson-item">
|
||
|
|
<div class="lesson-icon">1</div>
|
||
|
|
<div class="lesson-info">
|
||
|
|
<div class="lesson-name">Förstå utbetalningar</div>
|
||
|
|
<div class="lesson-duration">10 min</div>
|
||
|
|
</div>
|
||
|
|
<span class="lesson-status">Starta</span>
|
||
|
|
</li>
|
||
|
|
<li class="lesson-item">
|
||
|
|
<div class="lesson-icon locked">🔒</div>
|
||
|
|
<div class="lesson-info">
|
||
|
|
<div class="lesson-name">Planera din rutt effektivt</div>
|
||
|
|
<div class="lesson-duration">12 min</div>
|
||
|
|
</div>
|
||
|
|
<span class="lesson-status">Låst</span>
|
||
|
|
</li>
|
||
|
|
<li class="lesson-item">
|
||
|
|
<div class="lesson-icon locked">🔒</div>
|
||
|
|
<div class="lesson-info">
|
||
|
|
<div class="lesson-name">Bygg ditt rykte</div>
|
||
|
|
<div class="lesson-duration">8 min</div>
|
||
|
|
</div>
|
||
|
|
<span class="lesson-status">Låst</span>
|
||
|
|
</li>
|
||
|
|
<li class="lesson-item">
|
||
|
|
<div class="lesson-icon locked">🔒</div>
|
||
|
|
<div class="lesson-info">
|
||
|
|
<div class="lesson-name">Skatteoptimering</div>
|
||
|
|
<div class="lesson-duration">15 min</div>
|
||
|
|
</div>
|
||
|
|
<span class="lesson-status">Låst</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Lesson Modal -->
|
||
|
|
<div class="modal" id="lessonModal">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h2 id="modalTitle">Lektion</h2>
|
||
|
|
<button class="modal-close" onclick="closeLesson()">×</button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body" id="modalBody">
|
||
|
|
<!-- Content loaded dynamically -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<footer class="footer">
|
||
|
|
<p>© 2026 quiXzoom Academy — En del av <a href="https://aamos.systems" style="color: var(--qx-blue);">AAMOS</a></p>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Progress tracking
|
||
|
|
let completedLessons = JSON.parse(localStorage.getItem('academyProgress') || '[]');
|
||
|
|
|
||
|
|
function updateProgress() {
|
||
|
|
const totalLessons = 24;
|
||
|
|
const completed = completedLessons.length;
|
||
|
|
const percentage = Math.round((completed / totalLessons) * 100);
|
||
|
|
|
||
|
|
document.getElementById('totalProgress').style.width = percentage + '%';
|
||
|
|
document.getElementById('progressText').textContent = percentage + '%';
|
||
|
|
}
|
||
|
|
|
||
|
|
// Modal functions
|
||
|
|
function openLesson(module) {
|
||
|
|
const modal = document.getElementById('lessonModal');
|
||
|
|
const title = document.getElementById('modalTitle');
|
||
|
|
const body = document.getElementById('modalBody');
|
||
|
|
|
||
|
|
const lessons = {
|
||
|
|
module1: {
|
||
|
|
title: 'Modul 1: Kom igång',
|
||
|
|
content: `
|
||
|
|
<h2>Välkommen till quiXzoom!</h2>
|
||
|
|
<p>Som Zoomer är du en viktig del av vår crowdsourcing-plattform. Du fotograferar infrastruktur, fastigheter och miljöer — och får betalt för varje godkänt uppdrag.</p>
|
||
|
|
|
||
|
|
<div class="tip">
|
||
|
|
<strong>💡 Tips:</strong> De flesta Zoomers tjänar 150-500 kr per uppdrag. Aktiva Zoomers kan tjäna 8 000-15 000 kr per månad.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Vad du behöver</h3>
|
||
|
|
<ul>
|
||
|
|
<li>Smartphone med kamera (iPhone 12+ eller Android med 12MP+)</li>
|
||
|
|
<li>Bankkonto för utbetalningar</li>
|
||
|
|
<li>ID-handling för verifiering</li>
|
||
|
|
<li>Appen quiXzoom (iOS/Android)</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<div class="quiz-container">
|
||
|
|
<div class="quiz-question">Vad behöver du minst för att bli Zoomer?</div>
|
||
|
|
<ul class="quiz-options">
|
||
|
|
<li class="quiz-option" onclick="this.classList.add('correct')">Smartphone med kamera</li>
|
||
|
|
<li class="quiz-option" onclick="this.classList.add('wrong')">Professionell kamera</li>
|
||
|
|
<li class="quiz-option" onclick="this.classList.add('wrong')">Egen bil</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button onclick="completeLesson('m1l1')" style="background: var(--qx-green); color: white; border: none; padding: 12px 24px; border-radius: 8px; cursor: pointer; font-size: 1rem;">
|
||
|
|
Markera som klar ✓
|
||
|
|
</button>
|
||
|
|
`
|
||
|
|
},
|
||
|
|
module2: {
|
||
|
|
title: 'Modul 2: Fotokvalitet',
|
||
|
|
content: `
|
||
|
|
<h2>AI-granskning — vad tittar den på?</h2>
|
||
|
|
<p>quiXzoom använder AI för att granska alla bilder. Systemet kontrollerar:</p>
|
||
|
|
|
||
|
|
<ul>
|
||
|
|
<li><strong>Skärpa:</strong> Bilden måste vara i fokus</li>
|
||
|
|
<li><strong>Ljus:</strong> Varken för mörkt eller för ljust</li>
|
||
|
|
<li><strong>Framing:</strong> Objektet måste vara centrerat</li>
|
||
|
|
<li><strong>Metadata:</strong> GPS, timestamp, kamerainfo</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<div class="warning">
|
||
|
|
<strong>⚠️ Viktigt:</strong> Bilder som inte uppfyller kraven avvisas. Du kan alltid komplettera inom 48 timmar.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Exempel på godkänd vs avvisad bild</h3>
|
||
|
|
<p>[Här skulle det finnas exempelbilder]</p>
|
||
|
|
|
||
|
|
<div class="quiz-container">
|
||
|
|
<div class="quiz-question">Vad är viktigast för AI-granskningen?</div>
|
||
|
|
<ul class="quiz-options">
|
||
|
|
<li class="quiz-option" onclick="this.classList.add('wrong')">Filter och effekter</li>
|
||
|
|
<li class="quiz-option" onclick="this.classList.add('correct')">Skärpa och korrekt ljus</li>
|
||
|
|
<li class="quiz-option" onclick="this.classList.add('wrong')">Hög upplösning (4K+)</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button onclick="completeLesson('m2l1')" style="background: var(--qx-green); color: white; border: none; padding: 12px 24px; border-radius: 8px; cursor: pointer; font-size: 1rem;">
|
||
|
|
Markera som klar ✓
|
||
|
|
</button>
|
||
|
|
`
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const lesson = lessons[module] || { title: 'Kommer snart', content: '<p>Denna modul är under utveckling.</p>' };
|
||
|
|
|
||
|
|
title.textContent = lesson.title;
|
||
|
|
body.innerHTML = lesson.content;
|
||
|
|
modal.classList.add('active');
|
||
|
|
}
|
||
|
|
|
||
|
|
function closeLesson() {
|
||
|
|
document.getElementById('lessonModal').classList.remove('active');
|
||
|
|
}
|
||
|
|
|
||
|
|
function completeLesson(lessonId) {
|
||
|
|
if (!completedLessons.includes(lessonId)) {
|
||
|
|
completedLessons.push(lessonId);
|
||
|
|
localStorage.setItem('academyProgress', JSON.stringify(completedLessons));
|
||
|
|
updateProgress();
|
||
|
|
alert('✅ Lektion markerad som klar!');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Close modal on outside click
|
||
|
|
window.onclick = function(event) {
|
||
|
|
const modal = document.getElementById('lessonModal');
|
||
|
|
if (event.target === modal) {
|
||
|
|
closeLesson();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Initialize
|
||
|
|
updateProgress();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|