Bernt
aee0f09db8
- Datafabrik: Dockerfile fix, agentorkestrering fungerar - Vision: Identify-modell, FAISS, OCR alla testade - API: Alla 7 integrationstester passerade - Upplösare: Entitetsupplösning verifierad
506 lines
18 KiB
HTML
506 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 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 {
|
|
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 {
|
|
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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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);
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.lesson-item:hover { background: var(--qx-gray); margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
|
|
|
|
.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-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; }
|
|
|
|
.footer {
|
|
background: var(--qx-dark-gray);
|
|
color: white;
|
|
padding: 40px 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.hero h1 { font-size: 2rem; }
|
|
.course-grid { grid-template-columns: 1fr; }
|
|
}
|
|
</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="#" onclick="alert('Logga in för att se din progress'); return false;">Min progress</a>
|
|
<a href="#" onclick="alert('Logga in för att starta utbildningar'); return false;" style="background: var(--qx-blue); padding: 8px 16px; border-radius: 8px;">Logga in</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="hero">
|
|
<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="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 · 21 lektioner · ~3.5 timmar total tid</p>
|
|
|
|
<div class="course-grid">
|
|
<!-- Module 1 -->
|
|
<div class="course-card">
|
|
<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" onclick="alert('Logga in för att starta lektionen'); return false;">
|
|
<div class="lesson-icon" id="m1l1-icon">1</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-status" id="m1l1-status">Starta</span>
|
|
</li>
|
|
<li class="lesson-item" onclick="alert('Logga in för att starta lektionen'); return false;">
|
|
<div class="lesson-icon" id="m1l2-icon">2</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Skapa ditt konto</div>
|
|
<div class="lesson-duration">8 min · Video + Quiz</div>
|
|
</div>
|
|
<span class="lesson-status" id="m1l2-status">Starta</span>
|
|
</li>
|
|
<li class="lesson-item" onclick="alert('Logga in för att starta lektionen'); return false;">
|
|
<div class="lesson-icon" id="m1l3-icon">3</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Hitta ditt första uppdrag</div>
|
|
<div class="lesson-duration">10 min · Interaktiv guide</div>
|
|
</div>
|
|
<span class="lesson-status" id="m1l3-status">Starta</span>
|
|
</li>
|
|
<li class="lesson-item" onclick="alert('Logga in för att starta lektionen'); return false;">
|
|
<div class="lesson-icon" id="m1l4-icon">4</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Ta dina första bilder</div>
|
|
<div class="lesson-duration">12 min · Praktisk övning</div>
|
|
</div>
|
|
<span class="lesson-status" id="m1l4-status">Starta</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Module 2 -->
|
|
<div class="course-card">
|
|
<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" onclick="alert('Logga in för att starta lektionen'); return false;">
|
|
<div class="lesson-icon" id="m2l1-icon">1</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">AI-granskning</div>
|
|
<div class="lesson-duration">15 min · Video</div>
|
|
</div>
|
|
<span class="lesson-status" id="m2l1-status">Starta</span>
|
|
</li>
|
|
<li class="lesson-item" onclick="alert('Logga in för att starta lektionen'); return false;">
|
|
<div class="lesson-icon" id="m2l2-icon">2</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-status" id="m2l2-status">Starta</span>
|
|
</li>
|
|
<li class="lesson-item" onclick="alert('Logga in för att starta lektionen'); return false;">
|
|
<div class="lesson-icon" id="m2l3-icon">3</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-status" id="m2l3-status">Starta</span>
|
|
</li>
|
|
<li class="lesson-item" onclick="alert('Logga in för att starta lektionen'); return false;">
|
|
<div class="lesson-icon" id="m2l4-icon">4</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-status" id="m2l4-status">Starta</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Module 3 -->
|
|
<div class="course-card">
|
|
<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" onclick="alert('Logga in för att starta lektionen'); return false;">
|
|
<div class="lesson-icon" id="m3l1-icon">1</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">GPS-accuracy</div>
|
|
<div class="lesson-duration">10 min · Läsa</div>
|
|
</div>
|
|
<span class="lesson-status" id="m3l1-status">Starta</span>
|
|
</li>
|
|
<li class="lesson-item" onclick="alert('Logga in för att starta lektionen'); return false;">
|
|
<div class="lesson-icon" id="m3l2-icon">2</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Bästa praxis</div>
|
|
<div class="lesson-duration">8 min · Läsa</div>
|
|
</div>
|
|
<span class="lesson-status" id="m3l2-status">Starta</span>
|
|
</li>
|
|
<li class="lesson-item" onclick="alert('Logga in för att starta lektionen'); return false;">
|
|
<div class="lesson-icon" id="m3l3-icon">3</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Vanliga GPS-fel</div>
|
|
<div class="lesson-duration">12 min · Quiz</div>
|
|
</div>
|
|
<span class="lesson-status" id="m3l3-status">Starta</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Module 4 -->
|
|
<div class="course-card">
|
|
<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" onclick="alert('Logga in för att starta lektionen'); return false;">
|
|
<div class="lesson-icon" id="m4l1-icon">1</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Personlig säkerhet</div>
|
|
<div class="lesson-duration">15 min · Video</div>
|
|
</div>
|
|
<span class="lesson-status" id="m4l1-status">Starta</span>
|
|
</li>
|
|
<li class="lesson-item" onclick="alert('Logga in för att starta lektionen'); return false;">
|
|
<div class="lesson-icon" id="m4l2-icon">2</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Integritet och GDPR</div>
|
|
<div class="lesson-duration">12 min · Läsa</div>
|
|
</div>
|
|
<span class="lesson-status" id="m4l2-status">Starta</span>
|
|
</li>
|
|
<li class="lesson-item" onclick="alert('Logga in för att starta lektionen'); return false;">
|
|
<div class="lesson-icon" id="m4l3-icon">3</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Trafiksäkerhet</div>
|
|
<div class="lesson-duration">10 min · Quiz</div>
|
|
</div>
|
|
<span class="lesson-status" id="m4l3-status">Starta</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Module 5 -->
|
|
<div class="course-card">
|
|
<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" onclick="alert('Logga in för att starta lektionen'); return false;">
|
|
<div class="lesson-icon" id="m5l1-icon">1</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Batch-fotografering</div>
|
|
<div class="lesson-duration">15 min · Praktiskt</div>
|
|
</div>
|
|
<span class="lesson-status" id="m5l1-status">Starta</span>
|
|
</li>
|
|
<li class="lesson-item" onclick="alert('Logga in för att starta lektionen'); return false;">
|
|
<div class="lesson-icon" id="m5l2-icon">2</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Metadata och EXIF</div>
|
|
<div class="lesson-duration">10 min · Läsa</div>
|
|
</div>
|
|
<span class="lesson-status" id="m5l2-status">Starta</span>
|
|
</li>
|
|
<li class="lesson-item" onclick="alert('Logga in för att starta lektionen'); return false;">
|
|
<div class="lesson-icon" id="m5l3-icon">3</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Redigering</div>
|
|
<div class="lesson-duration">12 min · Video</div>
|
|
</div>
|
|
<span class="lesson-status" id="m5l3-status">Starta</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Module 6 -->
|
|
<div class="course-card">
|
|
<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" onclick="alert('Logga in för att starta lektionen'); return false;">
|
|
<div class="lesson-icon" id="m6l1-icon">1</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Förstå utbetalningar</div>
|
|
<div class="lesson-duration">10 min · Läsa</div>
|
|
</div>
|
|
<span class="lesson-status" id="m6l1-status">Starta</span>
|
|
</li>
|
|
<li class="lesson-item" onclick="alert('Logga in för att starta lektionen'); return false;">
|
|
<div class="lesson-icon" id="m6l2-icon">2</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Planera din rutt</div>
|
|
<div class="lesson-duration">12 min · Interaktiv</div>
|
|
</div>
|
|
<span class="lesson-status" id="m6l2-status">Starta</span>
|
|
</li>
|
|
<li class="lesson-item" onclick="alert('Logga in för att starta lektionen'); return false;">
|
|
<div class="lesson-icon" id="m6l3-icon">3</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Bygg ditt rykte</div>
|
|
<div class="lesson-duration">8 min · Läsa</div>
|
|
</div>
|
|
<span class="lesson-status" id="m6l3-status">Starta</span>
|
|
</li>
|
|
<li class="lesson-item" onclick="alert('Logga in för att starta lektionen'); return false;">
|
|
<div class="lesson-icon" id="m6l4-icon">4</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Skatteoptimering</div>
|
|
<div class="lesson-duration">15 min · Video</div>
|
|
</div>
|
|
<span class="lesson-status" id="m6l4-status">Starta</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="footer">
|
|
<p>© 2026 quiXzoom Academy — En del av <a href="https://landvex.com" style="color: var(--qx-blue);">LandveX</a></p>
|
|
</footer>
|
|
|
|
<script>
|
|
// Progress tracking
|
|
const totalLessons = 21;
|
|
let completedLessons = JSON.parse(localStorage.getItem('academyProgress') || '[]');
|
|
|
|
function updateProgress() {
|
|
const completed = completedLessons.length;
|
|
const percentage = Math.round((completed / totalLessons) * 100);
|
|
|
|
document.getElementById('totalProgress').style.width = percentage + '%';
|
|
document.getElementById('progressText').textContent = percentage + '%';
|
|
|
|
// Update lesson statuses
|
|
const allLessons = ['m1l1','m1l2','m1l3','m1l4','m2l1','m2l2','m2l3','m2l4','m3l1','m3l2','m3l3','m4l1','m4l2','m4l3','m5l1','m5l2','m5l3','m6l1','m6l2','m6l3','m6l4'];
|
|
|
|
allLessons.forEach(lessonId => {
|
|
const icon = document.getElementById(lessonId + '-icon');
|
|
const status = document.getElementById(lessonId + '-status');
|
|
|
|
if (icon && status) {
|
|
if (completedLessons.includes(lessonId)) {
|
|
icon.textContent = '✓';
|
|
icon.classList.add('completed');
|
|
status.textContent = 'Klar';
|
|
status.classList.add('done');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
updateProgress();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|