2026-07-05 06:41:32 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, viewport-fit=cover" >
< title > Become a Zoomer — quiXzoom< / title >
< link rel = "stylesheet" >
< style >
* , * :: before , * :: after { box-sizing : border-box ; margin : 0 ; padding : 0 ; }
body {
font-family : var ( - - font - text , - apple - system , BlinkMacSystemFont , "SF Pro Text" , sans-serif ) ;
background : var ( - - bg - primary , #000 ) ;
color : var ( - - label - primary , #fff ) ;
min-height : 100 dvh ;
padding-top : env ( safe - area - inset - top , 44 px ) ;
padding-bottom : env ( safe - area - inset - bottom , 34 px ) ;
-webkit- font-smoothing : antialiased ;
}
2026-07-07 07:11:50 +00:00
/* Nav Bar */
2026-07-05 06:41:32 +00:00
. nav-bar {
position : sticky ;
top : 0 ;
z-index : 100 ;
display : flex ;
align-items : center ;
justify-content : center ;
height : 44 px ;
padding : 0 16 px ;
background : rgba ( 242 , 242 , 247 , 0.82 ) ;
backdrop-filter : saturate ( 180 % ) blur ( 20 px ) ;
-webkit- backdrop-filter : saturate ( 180 % ) blur ( 20 px ) ;
border-bottom : 0.5 px solid rgba ( 255 , 255 , 255 , 0.12 ) ;
}
. nav-bar . nav-logo {
font-family : var ( - - font - display , - apple - system , BlinkMacSystemFont , "SF Pro Display" , sans-serif ) ;
font-size : 17 px ;
font-weight : 600 ;
letter-spacing : -0.41 px ;
background : linear-gradient ( 135 deg , #007AFF 0 % , #5856D6 100 % ) ;
-webkit- background-clip : text ;
-webkit- text-fill-color : transparent ;
background-clip : text ;
}
2026-07-07 07:11:50 +00:00
/* Hero */
2026-07-05 06:41:32 +00:00
. hero {
padding : 48 px 20 px 32 px ;
text-align : center ;
}
. hero-badge {
display : inline-block ;
background : rgba ( 0 , 122 , 255 , 0.15 ) ;
border : 0.5 px solid rgba ( 0 , 122 , 255 , 0.4 ) ;
color : #007AFF ;
font-size : 13 px ;
font-weight : 600 ;
letter-spacing : 0.06 em ;
text-transform : uppercase ;
padding : 5 px 14 px ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - xl ) ;
2026-07-05 06:41:32 +00:00
margin-bottom : 20 px ;
}
. hero h1 {
font-family : var ( - - font - display , - apple - system , BlinkMacSystemFont , "SF Pro Display" , sans-serif ) ;
font-size : 34 px ;
font-weight : 700 ;
line-height : 1.12 ;
letter-spacing : -0.8 px ;
margin-bottom : 16 px ;
}
. hero h1 . accent {
background : linear-gradient ( 135 deg , #007AFF 0 % , #5856D6 50 % , #AF52DE 100 % ) ;
-webkit- background-clip : text ;
-webkit- text-fill-color : transparent ;
background-clip : text ;
}
. hero p {
font-size : 17 px ;
line-height : 1.5 ;
color : rgba ( 60 , 60 , 67 , 0.7 ) ;
max-width : 340 px ;
margin : 0 auto 28 px ;
}
2026-07-07 07:11:50 +00:00
/* Earnings Banner */
2026-07-05 06:41:32 +00:00
. earnings-card {
margin : 0 20 px 32 px ;
background : linear-gradient ( 135 deg , rgba ( 52 , 199 , 89 , 0.15 ) 0 % , rgba ( 0 , 122 , 255 , 0.10 ) 100 % ) ;
border : 0.5 px solid rgba ( 52 , 199 , 89 , 0.3 ) ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - lg ) ;
2026-07-05 06:41:32 +00:00
padding : 20 px ;
text-align : center ;
}
. earnings-card . amount {
font-family : var ( - - font - display , - apple - system , "SF Pro Display" , sans-serif ) ;
font-size : 42 px ;
font-weight : 700 ;
letter-spacing : -1 px ;
color : #34C759 ;
}
. earnings-card . amount-label {
font-size : 13 px ;
color : rgba ( 255 , 255 , 255 , 0.75 ) ;
margin-top : 4 px ;
}
2026-07-07 07:11:50 +00:00
/* 3-Step How It Works */
2026-07-05 06:41:32 +00:00
. section-title {
font-family : var ( - - font - display , - apple - system , "SF Pro Display" , sans-serif ) ;
font-size : 22 px ;
font-weight : 700 ;
letter-spacing : -0.4 px ;
padding : 0 20 px ;
margin-bottom : 16 px ;
}
. steps {
padding : 0 20 px ;
display : flex ;
flex-direction : column ;
gap : 12 px ;
margin-bottom : 36 px ;
}
. step-card {
display : flex ;
align-items : flex-start ;
gap : 16 px ;
background : rgba ( 255 , 255 , 255 , 0.06 ) ;
border : 0.5 px solid rgba ( 255 , 255 , 255 , 0.1 ) ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - lg ) ;
2026-07-05 06:41:32 +00:00
padding : 18 px 16 px ;
transition : background 0.2 s ;
}
. step-card : active {
background : rgba ( 255 , 255 , 255 , 0.1 ) ;
}
. step-icon {
width : 44 px ;
height : 44 px ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - md ) ;
2026-07-05 06:41:32 +00:00
display : flex ;
align-items : center ;
justify-content : center ;
font-size : 22 px ;
flex-shrink : 0 ;
}
. step-icon . blue { background : rgba ( 0 , 122 , 255 , 0.18 ) ; }
. step-icon . green { background : rgba ( 52 , 199 , 89 , 0.18 ) ; }
. step-icon . purple { background : rgba ( 88 , 86 , 214 , 0.18 ) ; }
. step-content . step-num {
font-size : 12 px ;
font-weight : 600 ;
letter-spacing : 0.06 em ;
text-transform : uppercase ;
color : rgba ( 255 , 255 , 255 , 0.75 ) ;
margin-bottom : 4 px ;
}
. step-content . step-title {
font-size : 17 px ;
font-weight : 600 ;
letter-spacing : -0.3 px ;
margin-bottom : 4 px ;
}
. step-content . step-desc {
font-size : 15 px ;
color : rgba ( 255 , 255 , 255 , 0.75 ) ;
line-height : 1.4 ;
}
2026-07-07 07:11:50 +00:00
/* Live Missions */
2026-07-05 06:41:32 +00:00
. missions-section {
margin-bottom : 36 px ;
}
. missions-header {
display : flex ;
align-items : center ;
justify-content : space-between ;
padding : 0 20 px ;
margin-bottom : 12 px ;
}
. live-dot {
display : flex ;
align-items : center ;
gap : 6 px ;
font-size : 13 px ;
color : rgba ( 60 , 60 , 67 , 0.5 ) ;
}
. live-dot :: before {
content : '' ;
width : 8 px ;
height : 8 px ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - full ) ;
2026-07-05 06:41:32 +00:00
background : #34C759 ;
animation : pulse 2 s infinite ;
}
@ keyframes pulse {
0 % , 100 % { opacity : 1 ; transform : scale ( 1 ) ; }
50 % { opacity : 0.5 ; transform : scale ( 0.85 ) ; }
}
. missions-scroll {
display : flex ;
gap : 12 px ;
overflow-x : auto ;
padding : 0 20 px 4 px ;
scrollbar-width : none ;
-webkit- overflow-scrolling : touch ;
}
. missions-scroll :: -webkit-scrollbar { display : none ; }
. mission-card {
flex : 0 0 260 px ;
background : rgba ( 255 , 255 , 255 , 0.07 ) ;
border : 0.5 px solid rgba ( 255 , 255 , 255 , 0.1 ) ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - lg ) ;
2026-07-05 06:41:32 +00:00
padding : 16 px ;
}
. mission-type-badge {
display : inline-flex ;
align-items : center ;
gap : 5 px ;
font-size : 12 px ;
font-weight : 600 ;
padding : 3 px 10 px ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - md ) ;
2026-07-05 06:41:32 +00:00
margin-bottom : 10 px ;
}
. mission-type-badge . facade { background : rgba ( 88 , 86 , 214 , 0.2 ) ; color : #5856D6 ; }
. mission-type-badge . roof { background : rgba ( 255 , 149 , 0 , 0.2 ) ; color : #FF9500 ; }
. mission-type-badge . road { background : rgba ( 90 , 200 , 250 , 0.2 ) ; color : #5AC8FA ; }
. mission-type-badge . water { background : rgba ( 255 , 45 , 85 , 0.2 ) ; color : #FF2D55 ; }
. mission-card h3 {
font-size : 15 px ;
font-weight : 600 ;
letter-spacing : -0.2 px ;
margin-bottom : 6 px ;
line-height : 1.3 ;
}
. mission-card . mission-meta {
font-size : 13 px ;
color : rgba ( 60 , 60 , 67 , 0.5 ) ;
margin-bottom : 12 px ;
}
. mission-reward {
font-size : 22 px ;
font-weight : 700 ;
color : #34C759 ;
letter-spacing : -0.4 px ;
}
. mission-reward span {
font-size : 14 px ;
font-weight : 500 ;
color : rgba ( 52 , 199 , 89 , 0.7 ) ;
}
2026-07-07 07:11:50 +00:00
/* CTA Buttons */
2026-07-05 06:41:32 +00:00
. cta-section {
padding : 0 20 px ;
margin-bottom : 40 px ;
}
. btn-primary {
display : flex ;
align-items : center ;
justify-content : center ;
width : 100 % ;
height : 56 px ;
background : #007AFF ;
color : #fff ;
border : none ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - lg ) ;
2026-07-05 06:41:32 +00:00
font-family : var ( - - font - text , - apple - system , sans-serif ) ;
font-size : 17 px ;
font-weight : 600 ;
letter-spacing : -0.2 px ;
cursor : pointer ;
text-decoration : none ;
transition : opacity 0.15 s ;
margin-bottom : 12 px ;
}
. btn-primary : active { opacity : 0.8 ; }
. btn-secondary {
display : flex ;
align-items : center ;
justify-content : center ;
width : 100 % ;
height : 50 px ;
background : rgba ( 255 , 255 , 255 , 0.08 ) ;
color : rgba ( 255 , 255 , 255 , 0.85 ) ;
border : 0.5 px solid rgba ( 255 , 255 , 255 , 0.15 ) ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - lg ) ;
2026-07-05 06:41:32 +00:00
font-size : 16 px ;
font-weight : 500 ;
cursor : pointer ;
text-decoration : none ;
transition : background 0.15 s ;
}
. btn-secondary : active { background : rgba ( 255 , 255 , 255 , 0.14 ) ; }
2026-07-07 07:11:50 +00:00
/* Stats Strip */
2026-07-05 06:41:32 +00:00
. stats-strip {
display : grid ;
grid-template-columns : repeat ( 3 , 1 fr ) ;
gap : 1 px ;
background : rgba ( 255 , 255 , 255 , 0.08 ) ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - lg ) ;
2026-07-05 06:41:32 +00:00
margin : 0 20 px 36 px ;
overflow : hidden ;
border : 0.5 px solid rgba ( 255 , 255 , 255 , 0.1 ) ;
}
. stat {
background : rgba ( 255 , 255 , 255 , 0.04 ) ;
padding : 16 px 12 px ;
text-align : center ;
}
. stat-value {
font-family : var ( - - font - display , - apple - system , "SF Pro Display" , sans-serif ) ;
font-size : 22 px ;
font-weight : 700 ;
letter-spacing : -0.4 px ;
margin-bottom : 4 px ;
}
. stat-label {
font-size : 12 px ;
color : rgba ( 255 , 255 , 255 , 0.75 ) ;
}
2026-07-07 07:11:50 +00:00
/* FAQ / Trust */
2026-07-05 06:41:32 +00:00
. trust-section {
padding : 0 20 px ;
margin-bottom : 48 px ;
}
. trust-item {
display : flex ;
align-items : center ;
gap : 12 px ;
padding : 14 px 0 ;
border-bottom : 0.5 px solid rgba ( 255 , 255 , 255 , 0.08 ) ;
font-size : 15 px ;
color : rgba ( 255 , 255 , 255 , 0.75 ) ;
}
. trust-item : last-child { border-bottom : none ; }
. trust-icon {
width : 32 px ;
height : 32 px ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - md ) ;
2026-07-05 06:41:32 +00:00
display : flex ;
align-items : center ;
justify-content : center ;
font-size : 16 px ;
flex-shrink : 0 ;
background : rgba ( 52 , 199 , 89 , 0.15 ) ;
}
2026-07-07 07:11:50 +00:00
/* Loading state for missions */
2026-07-05 06:41:32 +00:00
. missions-loading {
padding : 0 20 px ;
color : rgba ( 255 , 255 , 255 , 0.75 ) ;
font-size : 15 px ;
}
@ media ( max-width : 640px ) {
. hero h1 { font-size : 2 rem !important ; }
. hero p { font-size : 1 rem !important ; }
. card { padding : 1.5 rem !important ; }
. grid { grid-template-columns : 1 fr !important ; }
. btn { padding : 0.75 rem 1.5 rem !important ; font-size : 1 rem !important ; }
}
< / style >
< style id = "wcag-contrast-enforcement" >
/* AAMOS GLOBAL CONTRAST ENFORCEMENT — WCAG AA (4.5:1 minimum) */
/* Regel: Ingen text under 70% opacity. Aldrig. */
body { -webkit- font-smoothing : antialiased ; -moz- osx-font-smoothing : grayscale ; }
/* Fix common low-contrast patterns */
[ style * = "rgba(60,60,67,0.4)" ] { color : rgba ( 60 , 60 , 67 , 0.65 ) !important ; }
[ style * = "rgba(60,60,67,0.3)" ] { color : rgba ( 60 , 60 , 67 , 0.65 ) !important ; }
[ style * = "rgba(255,255,255,0.4)" ] { color : rgba ( 255 , 255 , 255 , 0.72 ) !important ; }
[ style * = "rgba(255,255,255,0.3)" ] { color : rgba ( 255 , 255 , 255 , 0.72 ) !important ; }
[ style * = "opacity: 0.4" ] { opacity : 0.72 !important ; }
[ style * = "opacity: 0.3" ] { opacity : 0.72 !important ; }
@ media ( max-width : 640px ) {
. hero h1 { font-size : 2 rem !important ; }
. hero p { font-size : 1 rem !important ; }
. card { padding : 1.5 rem !important ; }
. grid { grid-template-columns : 1 fr !important ; }
. btn { padding : 0.75 rem 1.5 rem !important ; font-size : 1 rem !important ; }
}
< / style >
< script src = "i18n.js" > < / script >
< meta property = "og:type" content = "website" >
< meta property = "og:title" content = "Become a Zoomer — quiXzoom" >
< meta property = "og:description" content = "quiXzoom — Earn per Mission. No Platform Fee." >
< meta property = "og:url" content = "https://www.quixzoom.com/zoomer-start.html" >
< meta property = "og:image" content = "https://www.quixzoom.com/images/app-screenshot.jpg" >
< meta property = "og:image:width" content = "1200" >
< meta property = "og:image:height" content = "630" >
< meta property = "og:image:alt" content = "quiXzoom — start earning as a Zoomer today" >
< meta name = "twitter:card" content = "summary_large_image" >
< meta name = "twitter:image" content = "https://www.quixzoom.com/images/app-screenshot.jpg" >
< meta name = "twitter:title" content = "Become a Zoomer — quiXzoom" >
< / head >
< body >
<!-- Nav Bar -->
< div class = "nav-bar" >
< span class = "nav-logo" > quiXzoom< / span >
< / div >
<!-- Hero -->
< section class = "hero" >
2026-07-07 07:11:50 +00:00
< div class = "hero-badge" > Launching August 2026< / div >
2026-07-05 06:41:32 +00:00
< h1 > Earn money on< br > < span class = "accent" > what you see around you< / span > < / h1 >
< p > Take photo missions near you. Get paid fast. No boss, no invoicing.< / p >
< / section >
<!-- Earnings Banner -->
< div class = "earnings-card" >
< div class = "amount" > 900 – < / div >
< div class = "amount-label" > per mission · paid out within 48h< / div >
< / div >
<!-- Stats -->
< div class = "stats-strip" >
< div class = "stat" >
< div class = "stat-value" id = "stat-missions" > 4< / div >
< div class = "stat-label" > Open missions< / div >
< / div >
< div class = "stat" >
< div class = "stat-value" > 48h< / div >
< div class = "stat-label" > Payout time< / div >
< / div >
< div class = "stat" >
< div class = "stat-value" > 2 100< / div >
< div class = "stat-label" > Avg per mission< / div >
< / div >
< / div >
<!-- How It Works -->
< p class = "section-title" > How it works< / p >
< div class = "steps" >
< div class = "step-card" >
2026-07-07 07:11:50 +00:00
< div class = "step-icon blue" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" > < circle cx = "7" cy = "7" r = "5" stroke = "#666" stroke-width = "2" / > < path d = "M11 11L14 14" stroke = "#666" stroke-width = "2" stroke-linecap = "round" / > < / svg > < / div >
2026-07-05 06:41:32 +00:00
< div class = "step-content" >
< div class = "step-num" > Step 1< / div >
< div class = "step-title" > Find missions near you< / div >
< div class = "step-desc" > Open the map and find missions in your area — facade scans, roof photos, road inspections.< / div >
< / div >
< / div >
< div class = "step-card" >
2026-07-07 07:11:50 +00:00
< div class = "step-icon green" > < / div >
2026-07-05 06:41:32 +00:00
< div class = "step-content" >
< div class = "step-num" > Step 2< / div >
< div class = "step-title" > Complete the mission< / div >
< div class = "step-desc" > Head over, take the photos as briefed. Upload directly from the app. Usually 15– < / div >
< / div >
< / div >
< div class = "step-card" >
2026-07-07 07:11:50 +00:00
< div class = "step-icon purple" > < / div >
2026-07-05 06:41:32 +00:00
< div class = "step-content" >
< div class = "step-num" > Step 3< / div >
< div class = "step-title" > Get paid< / div >
< div class = "step-desc" > When the mission is approved, your payment is released immediately. No middlemen.< / div >
< / div >
< / div >
< / div >
<!-- Live Missions -->
< div class = "missions-section" >
< div class = "missions-header" >
< p class = "section-title" style = "padding:0;margin:0" > Live missions< / p >
< div class = "live-dot" > Live< / div >
< / div >
< div class = "missions-scroll" id = "missions-container" >
< div class = "mission-card" style = "opacity:0.5;text-align:center;padding:24px" >
2026-07-07 07:11:50 +00:00
< div style = "font-size:24px;margin-bottom:8px" > < / div >
2026-07-05 06:41:32 +00:00
< div style = "font-size:14px;color:#aaa" > Loading missions near you...< / div >
< / div >
< / div >
< / div >
<!-- Trust signals -->
< div class = "trust-section" >
< p class = "section-title" style = "padding:0;margin-bottom:12px" > Always included< / p >
< div class = "trust-item" >
2026-07-07 07:11:50 +00:00
< div class = "trust-icon" > < svg width = "20" height = "20" viewBox = "0 0 20 20" fill = "none" > < circle cx = "10" cy = "10" r = "9" stroke = "#22c55e" stroke-width = "2" / > < path d = "M6 10L9 13L14 7" stroke = "#22c55e" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" / > < / svg > < / div >
2026-07-05 06:41:32 +00:00
Clear brief — you know exactly what to do
< / div >
< div class = "trust-item" >
2026-07-07 07:11:50 +00:00
< div class = "trust-icon" > < / div >
2026-07-05 06:41:32 +00:00
Secure payout via Stripe Connect
< / div >
< div class = "trust-item" >
2026-07-07 07:11:50 +00:00
< div class = "trust-icon" > < / div >
2026-07-05 06:41:32 +00:00
No special gear — a smartphone is enough
< / div >
< div class = "trust-item" >
2026-07-07 07:11:50 +00:00
< div class = "trust-icon" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" > < path d = "M9 2L5 9H8L7 14L11 7H8L9 2Z" fill = "#f59e0b" / > < / svg > < / div >
2026-07-05 06:41:32 +00:00
Approval and payment within 48 hours
< / div >
< div class = "trust-item" >
2026-07-07 07:11:50 +00:00
< div class = "trust-icon" > < / div >
2026-07-05 06:41:32 +00:00
Choose which missions you take
< / div >
< / div >
<!-- CTA -->
< div class = "cta-section" >
< a href = "/join" class = "btn-primary" >
Register as a Zoomer →
< / a >
< a href = "/map" class = "btn-secondary" >
View missions on map
< / a >
< / div >
< script >
const API _BASE = 'https://api.quixzoom.com/api/qz' ;
function missionEmoji ( t ) {
2026-07-07 07:11:50 +00:00
if ( /elledn|kabel|transfor/i . test ( t ) ) return '<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M9 2L5 9H8L7 14L11 7H8L9 2Z" fill="#f59e0b"/></svg>' ;
if ( /vag|potthal|trottoar/i . test ( t ) ) return '' ;
if ( /kanal|bro/i . test ( t ) ) return '' ;
if ( /gatuliv|neon/i . test ( t ) ) return '' ;
return '' ;
2026-07-05 06:41:32 +00:00
}
function renderMissions ( missions ) {
const c = document . getElementById ( 'missions-container' ) ;
2026-07-07 07:11:50 +00:00
if ( ! missions . length ) { c . innerHTML = '<div style="text-align:center;padding:24px;color:#aaa;font-size:14px"> No missions near you right now</div>' ; return ; }
2026-07-05 06:41:32 +00:00
c . innerHTML = missions . slice ( 0 , 6 ) . map ( m => {
const d = m . distance _meters < 1000 ? Math . round ( m . distance _meters ) + 'm' : ( m . distance _meters / 1000 ) . toFixed ( 1 ) + 'km' ;
return '<div class="mission-card" onclick="location.href=\'' / zoomer - onboarding - flow \ '" style="cursor:pointer">'
+ '<div class="mission-type-badge road">' + missionEmoji ( m . title ) + ' ' + ( m . area _name || 'Mission' ) + '</div>'
+ '<h3>' + m . title + '</h3>'
2026-07-07 07:11:50 +00:00
+ '<div class="mission-meta"> ' + d + ' away · ' + ( m . required _photos || 1 ) + ' photo</div>'
2026-07-05 06:41:32 +00:00
+ '<div class="mission-reward">' + m . reward _credits + ' cr<span> on approval</span></div>'
+ '</div>' ;
} ) . join ( '' ) ;
const el = document . getElementById ( 'stat-missions' ) ;
if ( el && missions . length > 0 ) el . textContent = missions . length + '+' ;
}
function load ( lat , lng ) {
const url = lat ? ` ${ API _BASE } /missions?lat= ${ lat } &lng= ${ lng } &radius=15&limit=20 ` : ` ${ API _BASE } /missions?lat=59.33&lng=18.07&radius=15&limit=20 ` ;
fetch ( url ) . then ( r => r . json ( ) ) . then ( d => renderMissions ( d . missions || [ ] ) ) . catch ( ( ) => { } ) ;
}
if ( navigator . geolocation ) { navigator . geolocation . getCurrentPosition ( p => load ( p . coords . latitude , p . coords . longitude ) , ( ) => load ( null , null ) , { timeout : 5000 } ) ; }
else load ( null , null ) ;
< / script >
< / body >
< / html >
