2026-07-05 06:41:32 +00:00
<!DOCTYPE html>
< html lang = "sv" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Välkommen till quiXzoom — quiXzoom Academy< / 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' , sans-serif ;
color : var ( - - qx - black ) ;
background : var ( - - qx - white ) ;
line-height : 1.6 ;
}
. progress-container {
position : sticky ;
top : 0 ;
background : white ;
padding : 12 px 20 px ;
border-bottom : 1 px solid var ( - - qx - gray ) ;
z-index : 100 ;
}
. progress-bar {
max-width : 600 px ;
margin : 0 auto ;
background : var ( - - qx - gray ) ;
border-radius : 10 px ;
height : 8 px ;
overflow : hidden ;
}
. progress-fill {
background : var ( - - qx - green ) ;
height : 100 % ;
width : 0 % ;
transition : width 0.5 s ease ;
}
. lesson-container {
max-width : 800 px ;
margin : 0 auto ;
padding : 40 px 20 px ;
}
. lesson-header {
margin-bottom : 48 px ;
}
. lesson-module {
color : var ( - - qx - blue ) ;
font-size : 0.875 rem ;
text-transform : uppercase ;
letter-spacing : 2 px ;
margin-bottom : 8 px ;
}
. lesson-title {
font-size : 2.5 rem ;
margin-bottom : 16 px ;
line-height : 1.2 ;
}
. lesson-meta {
color : var ( - - qx - text - muted ) ;
font-size : 0.9 rem ;
display : flex ;
gap : 16 px ;
}
. svg-illustration {
width : 100 % ;
border-radius : 16 px ;
margin : 32 px 0 ;
box-shadow : 0 4 px 16 px rgba ( 0 , 0 , 0 , 0.1 ) ;
}
. content-block {
margin-bottom : 48 px ;
}
. content-block h2 {
font-size : 1.75 rem ;
margin-bottom : 20 px ;
}
. content-block p {
margin-bottom : 16 px ;
color : #333 ;
font-size : 1.05 rem ;
}
. content-block ul {
margin-left : 24 px ;
margin-bottom : 16 px ;
}
. content-block li {
margin-bottom : 12 px ;
}
. tip-box {
background : #e8f4fd ;
border-left : 4 px solid var ( - - qx - blue ) ;
padding : 24 px ;
margin : 24 px 0 ;
border-radius : 0 12 px 12 px 0 ;
}
. tip-box strong {
color : var ( - - qx - blue ) ;
display : block ;
margin-bottom : 8 px ;
}
. warning-box {
background : #fff3cd ;
border-left : 4 px solid var ( - - qx - orange ) ;
padding : 24 px ;
margin : 24 px 0 ;
border-radius : 0 12 px 12 px 0 ;
}
. warning-box strong {
color : var ( - - qx - orange ) ;
display : block ;
margin-bottom : 8 px ;
}
. example-box {
background : var ( - - qx - gray ) ;
padding : 24 px ;
border-radius : 12 px ;
margin : 24 px 0 ;
}
. quiz-container {
background : var ( - - qx - gray ) ;
padding : 32 px ;
border-radius : 16 px ;
margin : 32 px 0 ;
}
. quiz-question {
font-size : 1.25 rem ;
font-weight : 600 ;
margin-bottom : 24 px ;
}
. quiz-options {
list-style : none ;
}
. quiz-option {
background : white ;
padding : 16 px 20 px ;
margin-bottom : 12 px ;
border-radius : 12 px ;
cursor : pointer ;
transition : all 0.2 s ;
border : 2 px solid transparent ;
display : flex ;
align-items : center ;
gap : 12 px ;
}
. quiz-option : hover {
border-color : var ( - - qx - blue ) ;
transform : translateX ( 4 px ) ;
}
. quiz-option . correct {
background : var ( - - qx - green ) ;
color : white ;
border-color : var ( - - qx - green ) ;
}
. quiz-option . wrong {
background : #ff4444 ;
color : white ;
border-color : #ff4444 ;
}
. quiz-option . disabled {
pointer-events : none ;
opacity : 0.7 ;
}
. quiz-letter {
width : 32 px ;
height : 32 px ;
border-radius : 50 % ;
background : var ( - - qx - gray ) ;
display : flex ;
align-items : center ;
justify-content : center ;
font-weight : 600 ;
flex-shrink : 0 ;
}
. quiz-feedback {
margin-top : 20 px ;
padding : 20 px ;
border-radius : 12 px ;
display : none ;
font-size : 1 rem ;
}
. quiz-feedback . show {
display : block ;
}
. lesson-nav {
display : flex ;
justify-content : space-between ;
margin-top : 60 px ;
padding-top : 40 px ;
border-top : 2 px solid var ( - - qx - gray ) ;
}
. nav-btn {
padding : 14 px 28 px ;
border-radius : 10 px ;
text-decoration : none ;
font-weight : 600 ;
transition : all 0.2 s ;
display : inline-flex ;
align-items : center ;
gap : 8 px ;
}
. nav-btn . prev {
background : var ( - - qx - gray ) ;
color : var ( - - qx - black ) ;
}
. nav-btn . next {
background : var ( - - qx - blue ) ;
color : white ;
}
. complete-btn {
display : block ;
width : 100 % ;
max-width : 400 px ;
margin : 48 px auto ;
padding : 18 px 32 px ;
background : var ( - - qx - green ) ;
color : white ;
border : none ;
border-radius : 12 px ;
font-size : 1.1 rem ;
font-weight : 600 ;
cursor : pointer ;
transition : all 0.2 s ;
}
. complete-btn : hover {
transform : translateY ( -2 px ) ;
box-shadow : 0 4 px 16 px rgba ( 0 , 200 , 83 , 0.3 ) ;
}
. complete-btn . completed {
background : var ( - - qx - gray ) ;
color : var ( - - qx - text - muted ) ;
cursor : default ;
}
@ media ( max-width : 768px ) {
. lesson-title { font-size : 1.75 rem ; }
}
< / style >
< / head >
< body >
< div class = "progress-container" >
< div class = "progress-bar" >
< div class = "progress-fill" id = "lessonProgress" style = "width: 0%" > < / div >
< / div >
< / div >
< div class = "lesson-container" >
< header class = "lesson-header" >
< div class = "lesson-module" > Kom igång — Från registrering till första utbetalning< / div >
< h1 class = "lesson-title" > Välkommen till quiXzoom< / h1 >
< div class = "lesson-meta" >
< span > ⏱️ 5 min< / span >
< span > 🎯 Nybörjare< / span >
< span > 📚 Introduktion< / span >
< / div >
< / header >
< svg class = "svg-illustration" viewBox = "0 0 800 400" xmlns = "http://www.w3.org/2000/svg" >
< defs > < linearGradient id = "g1" x1 = "0%" y1 = "0%" x2 = "100%" y2 = "100%" > < stop offset = "0%" style = "stop-color:#667eea" / > < stop offset = "100%" style = "stop-color:#764ba2" / > < / linearGradient > < / defs >
< rect width = "800" height = "400" fill = "url(#g1)" / >
< circle cx = "400" cy = "200" r = "120" fill = "rgba(255,255,255,0.1)" / >
< text x = "400" y = "180" text-anchor = "middle" font-size = "80" fill = "white" > 📸< / text >
< text x = "400" y = "280" text-anchor = "middle" font-size = "24" fill = "white" font-weight = "bold" > Välkommen till quiXzoom< / text >
< text x = "400" y = "310" text-anchor = "middle" font-size = "16" fill = "rgba(255,255,255,0.8)" > Bli en mästerlig Zoomer< / text >
< / svg >
< div class = "content-block" >
< 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 >
< div class = "tip-box" >
< strong > 💡 Tips< / strong >
2026-07-07 07:11:50 +00:00
< p > • De flesta Zoomers tjänar 1-5 USD per uppdrag< / p >
< p > • Aktiva Zoomers kan tjäna $50-200 per month per månad< / p >
2026-07-05 06:41:32 +00:00
< / div >
< div class = "content-block" >
< h2 > Vad du behöver< / h2 >
< 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 >
< / ul >
< / div >
< 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 = "checkAnswer(this, False)" >
< span class = "quiz-letter" > A< / span >
< span > Professionell kamera och stativ< / span >
< / li >
< li class = "quiz-option" onclick = "checkAnswer(this, True)" >
< span class = "quiz-letter" > B< / span >
< span > Smartphone med kamera och svenskt bankkonto< / span >
< / li >
< li class = "quiz-option" onclick = "checkAnswer(this, False)" >
< span class = "quiz-letter" > C< / span >
< span > Egen bil och körkort< / span >
< / li >
< / ul >
< div class = "quiz-feedback" id = "quizFeedback" > < / div >
< / div >
< button class = "complete-btn" id = "completeBtn" onclick = "completeLesson()" >
✅ Markera lektion som klar
< / button >
< nav class = "lesson-nav" >
< a href = "/academy" class = "nav-btn prev" > ← Tillbaka till Academy< / a >
< a href = "/academy/module1/m1l2" class = "nav-btn next" > Nästa: Skapa ditt konto och verifiera identitet →< / a >
< / nav >
< / div >
< script >
const lessonId = 'm1l1' ;
let completedLessons = JSON . parse ( localStorage . getItem ( 'academyProgress' ) || '[]' ) ;
function checkAnswer ( element , isCorrect ) {
const options = document . querySelectorAll ( '.quiz-option' ) ;
const feedback = document . getElementById ( 'quizFeedback' ) ;
options . forEach ( opt => opt . classList . add ( 'disabled' ) ) ;
if ( isCorrect ) {
element . classList . add ( 'correct' ) ;
feedback . innerHTML = '<strong>✅ Rätt!</strong> Bra jobbat!' ;
feedback . style . background = '#d4edda' ;
feedback . style . color = '#155724' ;
} else {
element . classList . add ( 'wrong' ) ;
feedback . innerHTML = '<strong>❌ Inte riktigt.</strong> Tänk igenom svaret en gång till.' ;
feedback . style . background = '#f8d7da' ;
feedback . style . color = '#721c24' ;
}
feedback . classList . add ( 'show' ) ;
}
function completeLesson ( ) {
if ( ! completedLessons . includes ( lessonId ) ) {
completedLessons . push ( lessonId ) ;
localStorage . setItem ( 'academyProgress' , JSON . stringify ( completedLessons ) ) ;
const btn = document . getElementById ( 'completeBtn' ) ;
btn . textContent = '✅ Lektion klar!' ;
btn . classList . add ( 'completed' ) ;
btn . disabled = true ;
btn . style . transform = 'scale(1.05)' ;
setTimeout ( ( ) => btn . style . transform = 'scale(1)' , 200 ) ;
}
}
if ( completedLessons . includes ( lessonId ) ) {
const btn = document . getElementById ( 'completeBtn' ) ;
btn . textContent = '✅ Lektion klar!' ;
btn . classList . add ( 'completed' ) ;
btn . disabled = true ;
}
< / script >
< / body >
< / html >
