Bernt
aee0f09db8
- Datafabrik: Dockerfile fix, agentorkestrering fungerar - Vision: Identify-modell, FAISS, OCR alla testade - API: Alla 7 integrationstester passerade - Upplösare: Entitetsupplösning verifierad
504 lines
18 KiB
HTML
504 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>quiXzoom Academy — Learn to Photograph Like a Pro</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; align-items: center; }
|
|
.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="/">Home</a>
|
|
<a href="#courses">Courses</a>
|
|
<a href="#" onclick="alert('Log in to see your progress'); return false;">My Progress</a>
|
|
<a href="#" onclick="alert('Log in to start courses'); return false;" style="background: var(--qx-blue); padding: 8px 16px; border-radius: 8px;">Log In</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="hero">
|
|
<h1>Become a Master Zoomer</h1>
|
|
<p>Professional training developed by experts. Learn to photograph, deliver quality, and maximize your income.</p>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="totalProgress"></div>
|
|
</div>
|
|
<p style="margin-top: 12px; font-size: 0.9rem; color: #999;">Your progress: <span id="progressText">0%</span></p>
|
|
</section>
|
|
|
|
<div class="container">
|
|
<h2 class="section-title" id="courses">Training Modules</h2>
|
|
<p class="section-subtitle">6 modules · 21 lessons · ~3.5 hours total time</p>
|
|
|
|
<div class="course-grid">
|
|
<!-- Module 1 -->
|
|
<div class="course-card">
|
|
<div class="course-header module-1">
|
|
<div class="course-number">Module 01</div>
|
|
<div class="course-title">Getting Started</div>
|
|
<div class="course-desc">From registration to first payout</div>
|
|
</div>
|
|
<div class="course-body">
|
|
<ul class="lesson-list">
|
|
<li class="lesson-item" onclick="alert('Log in to start the lesson'); return false;">
|
|
<div class="lesson-icon" id="m1l1-icon">1</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Welcome to quiXzoom</div>
|
|
<div class="lesson-duration">5 min · Introduction</div>
|
|
</div>
|
|
<span class="lesson-status" id="m1l1-status">Start</span>
|
|
</li>
|
|
<li class="lesson-item" onclick="alert('Log in to start the lesson'); return false;">
|
|
<div class="lesson-icon" id="m1l2-icon">2</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Create Your Account</div>
|
|
<div class="lesson-duration">8 min · Video + Quiz</div>
|
|
</div>
|
|
<span class="lesson-status" id="m1l2-status">Start</span>
|
|
</li>
|
|
<li class="lesson-item" onclick="alert('Log in to start the lesson'); return false;">
|
|
<div class="lesson-icon" id="m1l3-icon">3</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Find Your First Mission</div>
|
|
<div class="lesson-duration">10 min · Interactive Guide</div>
|
|
</div>
|
|
<span class="lesson-status" id="m1l3-status">Start</span>
|
|
</li>
|
|
<li class="lesson-item" onclick="alert('Log in to start the lesson'); return false;">
|
|
<div class="lesson-icon" id="m1l4-icon">4</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Take Your First Photos</div>
|
|
<div class="lesson-duration">12 min · Practical Exercise</div>
|
|
</div>
|
|
<span class="lesson-status" id="m1l4-status">Start</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Module 2 -->
|
|
<div class="course-card">
|
|
<div class="course-header module-2">
|
|
<div class="course-number">Module 02</div>
|
|
<div class="course-title">Photo Quality</div>
|
|
<div class="course-desc">How to take photos that pass AI review</div>
|
|
</div>
|
|
<div class="course-body">
|
|
<ul class="lesson-list">
|
|
<li class="lesson-item" onclick="alert('Log in to start the lesson'); return false;">
|
|
<div class="lesson-icon" id="m2l1-icon">1</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">AI Review - What It Checks</div>
|
|
<div class="lesson-duration">15 min · Video</div>
|
|
</div>
|
|
<span class="lesson-status" id="m2l1-status">Start</span>
|
|
</li>
|
|
<li class="lesson-item" onclick="alert('Log in to start the lesson'); return false;">
|
|
<div class="lesson-icon" id="m2l2-icon">2</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Light and Exposure</div>
|
|
<div class="lesson-duration">12 min · Photo Examples</div>
|
|
</div>
|
|
<span class="lesson-status" id="m2l2-status">Start</span>
|
|
</li>
|
|
<li class="lesson-item" onclick="alert('Log in to start the lesson'); return false;">
|
|
<div class="lesson-icon" id="m2l3-icon">3</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Focus and Sharpness</div>
|
|
<div class="lesson-duration">10 min · Quiz</div>
|
|
</div>
|
|
<span class="lesson-status" id="m2l3-status">Start</span>
|
|
</li>
|
|
<li class="lesson-item" onclick="alert('Log in to start the lesson'); return false;">
|
|
<div class="lesson-icon" id="m2l4-icon">4</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Framing and Composition</div>
|
|
<div class="lesson-duration">15 min · Practical</div>
|
|
</div>
|
|
<span class="lesson-status" id="m2l4-status">Start</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Module 3 -->
|
|
<div class="course-card">
|
|
<div class="course-header module-3">
|
|
<div class="course-number">Module 03</div>
|
|
<div class="course-title">GPS and Location</div>
|
|
<div class="course-desc">Why location matters and how to optimize it</div>
|
|
</div>
|
|
<div class="course-body">
|
|
<ul class="lesson-list">
|
|
<li class="lesson-item" onclick="alert('Log in to start the lesson'); return false;">
|
|
<div class="lesson-icon" id="m3l1-icon">1</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">GPS Accuracy - How It Works</div>
|
|
<div class="lesson-duration">10 min · Reading</div>
|
|
</div>
|
|
<span class="lesson-status" id="m3l1-status">Start</span>
|
|
</li>
|
|
<li class="lesson-item" onclick="alert('Log in to start the lesson'); return false;">
|
|
<div class="lesson-icon" id="m3l2-icon">2</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Best Practices for Location Data</div>
|
|
<div class="lesson-duration">8 min · Reading</div>
|
|
</div>
|
|
<span class="lesson-status" id="m3l2-status">Start</span>
|
|
</li>
|
|
<li class="lesson-item" onclick="alert('Log in to start the lesson'); return false;">
|
|
<div class="lesson-icon" id="m3l3-icon">3</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Common GPS Errors</div>
|
|
<div class="lesson-duration">12 min · Quiz</div>
|
|
</div>
|
|
<span class="lesson-status" id="m3l3-status">Start</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Module 4 -->
|
|
<div class="course-card">
|
|
<div class="course-header module-4">
|
|
<div class="course-number">Module 04</div>
|
|
<div class="course-title">Safety and Ethics</div>
|
|
<div class="course-desc">Safe photography and ethical guidelines</div>
|
|
</div>
|
|
<div class="course-body">
|
|
<ul class="lesson-list">
|
|
<li class="lesson-item" onclick="alert('Log in to start the lesson'); return false;">
|
|
<div class="lesson-icon" id="m4l1-icon">1</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Personal Safety in the Field</div>
|
|
<div class="lesson-duration">15 min · Video</div>
|
|
</div>
|
|
<span class="lesson-status" id="m4l1-status">Start</span>
|
|
</li>
|
|
<li class="lesson-item" onclick="alert('Log in to start the lesson'); return false;">
|
|
<div class="lesson-icon" id="m4l2-icon">2</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Privacy and GDPR</div>
|
|
<div class="lesson-duration">12 min · Reading</div>
|
|
</div>
|
|
<span class="lesson-status" id="m4l2-status">Start</span>
|
|
</li>
|
|
<li class="lesson-item" onclick="alert('Log in to start the lesson'); return false;">
|
|
<div class="lesson-icon" id="m4l3-icon">3</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Traffic Safety</div>
|
|
<div class="lesson-duration">10 min · Quiz</div>
|
|
</div>
|
|
<span class="lesson-status" id="m4l3-status">Start</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Module 5 -->
|
|
<div class="course-card">
|
|
<div class="course-header module-5">
|
|
<div class="course-number">Module 05</div>
|
|
<div class="course-title">Advanced Techniques</div>
|
|
<div class="course-desc">Maximize quality and efficiency</div>
|
|
</div>
|
|
<div class="course-body">
|
|
<ul class="lesson-list">
|
|
<li class="lesson-item" onclick="alert('Log in to start the lesson'); return false;">
|
|
<div class="lesson-icon" id="m5l1-icon">1</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Batch Photography</div>
|
|
<div class="lesson-duration">15 min · Practical</div>
|
|
</div>
|
|
<span class="lesson-status" id="m5l1-status">Start</span>
|
|
</li>
|
|
<li class="lesson-item" onclick="alert('Log in to start the lesson'); return false;">
|
|
<div class="lesson-icon" id="m5l2-icon">2</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Metadata and EXIF</div>
|
|
<div class="lesson-duration">10 min · Reading</div>
|
|
</div>
|
|
<span class="lesson-status" id="m5l2-status">Start</span>
|
|
</li>
|
|
<li class="lesson-item" onclick="alert('Log in to start the lesson'); return false;">
|
|
<div class="lesson-icon" id="m5l3-icon">3</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Editing and Enhancement</div>
|
|
<div class="lesson-duration">12 min · Video</div>
|
|
</div>
|
|
<span class="lesson-status" id="m5l3-status">Start</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Module 6 -->
|
|
<div class="course-card">
|
|
<div class="course-header module-6">
|
|
<div class="course-number">Module 06</div>
|
|
<div class="course-title">Maximize Earnings</div>
|
|
<div class="course-desc">Strategies to earn more</div>
|
|
</div>
|
|
<div class="course-body">
|
|
<ul class="lesson-list">
|
|
<li class="lesson-item" onclick="alert('Log in to start the lesson'); return false;">
|
|
<div class="lesson-icon" id="m6l1-icon">1</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Understanding Payouts and Levels</div>
|
|
<div class="lesson-duration">10 min · Reading</div>
|
|
</div>
|
|
<span class="lesson-status" id="m6l1-status">Start</span>
|
|
</li>
|
|
<li class="lesson-item" onclick="alert('Log in to start the lesson'); return false;">
|
|
<div class="lesson-icon" id="m6l2-icon">2</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Plan Your Route Efficiently</div>
|
|
<div class="lesson-duration">12 min · Interactive</div>
|
|
</div>
|
|
<span class="lesson-status" id="m6l2-status">Start</span>
|
|
</li>
|
|
<li class="lesson-item" onclick="alert('Log in to start the lesson'); return false;">
|
|
<div class="lesson-icon" id="m6l3-icon">3</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Build Your Reputation</div>
|
|
<div class="lesson-duration">8 min · Reading</div>
|
|
</div>
|
|
<span class="lesson-status" id="m6l3-status">Start</span>
|
|
</li>
|
|
<li class="lesson-item" onclick="alert('Log in to start the lesson'); return false;">
|
|
<div class="lesson-icon" id="m6l4-icon">4</div>
|
|
<div class="lesson-info">
|
|
<div class="lesson-name">Tax Optimization for Zoomers</div>
|
|
<div class="lesson-duration">15 min · Video</div>
|
|
</div>
|
|
<span class="lesson-status" id="m6l4-status">Start</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="footer">
|
|
<p>© 2026 quiXzoom Academy — Part of <a href="https://landvex.com" style="color: var(--qx-blue);">LandveX</a></p>
|
|
</footer>
|
|
|
|
<script>
|
|
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 + '%';
|
|
|
|
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 = 'Done';
|
|
status.classList.add('done');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
updateProgress();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|