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" >
< title > quiXzoom — Photo Gallery & App Screenshots< / title >
< meta name = "description" content = "quiXzoom photo gallery — see how Zoomers capture missions in cities around the world. Real field data collection, real earnings." >
< link rel = "canonical" href = "https://www.quixzoom.com/images.html" >
< link rel = "icon" type = "image/svg+xml" href = "/favicon.svg" >
< link rel = "icon" type = "image/png" sizes = "32x32" href = "/favicon-32x32.png" >
< link rel = "apple-touch-icon" sizes = "192x192" href = "/apple-touch-icon.png" >
< meta property = "og:type" content = "website" >
< meta property = "og:title" content = "quiXzoom — Photo Gallery & App Screenshots" >
< meta property = "og:description" content = "See quiXzoom in action — Zoomers earn money photographing infrastructure, storefronts and urban environments near them." >
< meta property = "og:url" content = "https://www.quixzoom.com/images.html" >
< meta property = "og:image" content = "https://www.quixzoom.com/images/og-image.jpg" >
< meta property = "og:image:width" content = "1200" >
< meta property = "og:image:height" content = "630" >
< meta property = "og:image:alt" content = "quiXzoom — Collect Reality. Get Paid." >
< meta name = "twitter:card" content = "summary_large_image" >
< meta name = "twitter:title" content = "quiXzoom Photo Gallery" >
< meta name = "twitter:image" content = "https://www.quixzoom.com/images/og-image.jpg" >
< script type = "application/ld+json" >
{
"@context" : "https://schema.org" ,
"@type" : "ImageGallery" ,
"name" : "quiXzoom Photo Gallery" ,
"description" : "quiXzoom field intelligence platform — photos showing Zoomers earning money by photographing infrastructure and urban environments" ,
"url" : "https://www.quixzoom.com/images.html" ,
"publisher" : {
"@type" : "Organization" ,
"name" : "quiXzoom" ,
"url" : "https://www.quixzoom.com" ,
"logo" : "https://www.quixzoom.com/favicon-512x512.png"
} ,
"image" : [
{
"@type" : "ImageObject" ,
"url" : "https://www.quixzoom.com/images/hero-zoomer-city.jpg" ,
"name" : "quiXzoom Zoomer capturing city infrastructure" ,
"description" : "A quiXzoom Zoomer uses their iPhone to photograph urban infrastructure for a field data mission" ,
"width" : 1200 , "height" : 630 ,
"representativeOfPage" : true ,
"keywords" : "quiXzoom, quixzoom, QuiXzoom, zoomer, field data, mission"
} ,
{
"@type" : "ImageObject" ,
"url" : "https://www.quixzoom.com/images/mission-map.jpg" ,
"name" : "quiXzoom mission map — available missions near you" ,
"description" : "The quiXzoom app shows available photo missions on a map — tap a mission, photograph it, get paid" ,
"width" : 1200 , "height" : 630 ,
"keywords" : "quiXzoom app, quixzoom map, missions, earn money"
} ,
{
"@type" : "ImageObject" ,
"url" : "https://www.quixzoom.com/images/zoomer-earnings.jpg" ,
"name" : "quiXzoom earnings dashboard" ,
"description" : "quiXzoom Zoomers see their earnings in real-time — paid per approved mission, no platform fee" ,
"width" : 1200 , "height" : 630 ,
"keywords" : "quiXzoom earnings, quixzoom pay, get paid per photo"
} ,
{
"@type" : "ImageObject" ,
"url" : "https://www.quixzoom.com/images/infrastructure-scan.jpg" ,
"name" : "quiXzoom infrastructure scanning" ,
"description" : "quiXzoom field intelligence — scanning urban infrastructure, roads and buildings for commercial data buyers" ,
"width" : 1200 , "height" : 630 ,
"keywords" : "quiXzoom infrastructure, field intelligence, quixzoom scanning"
} ,
{
"@type" : "ImageObject" ,
"url" : "https://www.quixzoom.com/images/app-screenshot.jpg" ,
"name" : "quiXzoom app screenshot — iPhone" ,
"description" : "quiXzoom iOS app — browse missions, submit photos, track earnings. Available on iPhone." ,
"width" : 1200 , "height" : 630 ,
"keywords" : "quiXzoom app, quixzoom iOS, quixzoom iPhone"
} ,
{
"@type" : "ImageObject" ,
"url" : "https://www.quixzoom.com/images/sweden-launch.jpg" ,
"name" : "quiXzoom Sweden launch — Stockholm" ,
"description" : "quiXzoom launches in Sweden August 2026 — starting in Stockholm, with 5 markets in phased rollout" ,
"width" : 1200 , "height" : 630 ,
"keywords" : "quiXzoom Sweden, quiXzoom Sverige, quixzoom Stockholm, launch 2026"
} ,
{
"@type" : "ImageObject" ,
"url" : "https://www.quixzoom.com/images/quixzoom-team.jpg" ,
"name" : "quiXzoom global network of Zoomers" ,
"description" : "quiXzoom — a global network of independent Zoomers collecting verified field data across cities worldwide" ,
"width" : 1200 , "height" : 630 ,
"keywords" : "quiXzoom network, quixzoom global, field intelligence platform"
} ,
{
"@type" : "ImageObject" ,
"url" : "https://www.quixzoom.com/images/og-image.jpg" ,
"name" : "quiXzoom — Collect Reality. Get Paid." ,
"description" : "quiXzoom is a field intelligence platform where Zoomers earn money photographing real-world infrastructure on demand" ,
"width" : 1200 , "height" : 630 ,
"representativeOfPage" : true ,
"keywords" : "quiXzoom, quixzoom, quickzoom, quix zoom, field data collection, earn money"
}
]
}
< / script >
< style >
* , * :: before , * :: after { box-sizing : border-box ; margin : 0 ; padding : 0 ; }
html { font-size : 16 px ; }
body {
font-family : - apple-system , BlinkMacSystemFont , "SF Pro Display" , "Helvetica Neue" , sans-serif ;
background : #ffffff ;
color : #1d1d1f ;
}
/* NAV */
nav {
position : sticky ; top : 0 ; z-index : 100 ;
background : rgba ( 255 , 255 , 255 , 0.92 ) ;
backdrop-filter : blur ( 20 px ) ;
border-bottom : 1 px solid #1a1a1a ;
padding : 0 24 px ;
height : 56 px ;
display : flex ; align-items : center ; justify-content : space-between ;
}
. logo { font-size : 18 px ; font-weight : 700 ; color : #1d1d1f ; text-decoration : none ; letter-spacing : -0.3 px ; }
. logo span { color : #0071e3 ; }
. nav-cta {
background : #0071e3 ; color : #fff ;
2026-07-07 07:11:50 +00:00
padding : 8 px 18 px ; border-radius : var ( - - radius - xl ) ;
2026-07-05 06:41:32 +00:00
font-size : 14 px ; font-weight : 600 ;
text-decoration : none ;
}
/* HERO */
. hero {
background : linear-gradient ( 135 deg , #f5f5f7 0 % , #e8f0fe 100 % ) ;
padding : 60 px 24 px 40 px ;
text-align : center ;
}
. hero h1 {
font-size : clamp ( 28 px , 5 vw , 48 px ) ;
font-weight : 700 ;
letter-spacing : -0.5 px ;
color : #1d1d1f ;
margin-bottom : 12 px ;
}
. hero h1 span { color : #0071e3 ; }
. hero p {
font-size : 17 px ;
color : #6e6e73 ;
max-width : 520 px ;
margin : 0 auto ;
line-height : 1.6 ;
}
/* GRID */
. gallery {
max-width : 1200 px ;
margin : 0 auto ;
padding : 48 px 24 px ;
display : grid ;
grid-template-columns : repeat ( auto - fill , minmax ( 340 px , 1 fr ) ) ;
gap : 24 px ;
}
. card {
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - lg ) ;
2026-07-05 06:41:32 +00:00
overflow : hidden ;
background : #fff ;
box-shadow : 0 2 px 12 px rgba ( 0 , 0 , 0 , 0.08 ) ;
transition : transform 0.2 s , box-shadow 0.2 s ;
}
. card : hover {
transform : translateY ( -4 px ) ;
box-shadow : 0 8 px 32 px rgba ( 0 , 0 , 0 , 0.12 ) ;
}
. card img {
width : 100 % ;
height : 220 px ;
object-fit : cover ;
display : block ;
}
. card-body { padding : 16 px 20 px 20 px ; }
. card-body h2 {
font-size : 15 px ;
font-weight : 600 ;
color : #1d1d1f ;
margin-bottom : 6 px ;
}
. card-body p {
font-size : 13 px ;
color : #6e6e73 ;
line-height : 1.5 ;
}
. tag {
display : inline-block ;
background : #e8f0fe ;
color : #0071e3 ;
font-size : 11 px ;
font-weight : 600 ;
padding : 3 px 10 px ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - xl ) ;
2026-07-05 06:41:32 +00:00
margin-top : 10 px ;
}
/* FEATURED */
. featured {
max-width : 1200 px ;
margin : 0 auto 0 ;
padding : 0 24 px ;
}
. featured img {
width : 100 % ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - xl ) ;
2026-07-05 06:41:32 +00:00
box-shadow : 0 4 px 24 px rgba ( 0 , 0 , 0 , 0.10 ) ;
}
/* SEO TEXT */
. seo-section {
background : #f5f5f7 ;
padding : 48 px 24 px ;
text-align : center ;
}
. seo-section h2 {
font-size : 22 px ; font-weight : 700 ;
color : #1d1d1f ; margin-bottom : 12 px ;
}
. seo-section p {
font-size : 15 px ; color : #6e6e73 ;
max-width : 680 px ; margin : 0 auto 16 px ;
line-height : 1.7 ;
}
. alt-names {
display : flex ; flex-wrap : wrap ;
gap : 8 px ; justify-content : center ;
margin-top : 16 px ;
}
. alt-names span {
background : #fff ; border : 1 px solid #d2d2d7 ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - xl ) ; padding : 5 px 14 px ;
2026-07-05 06:41:32 +00:00
font-size : 13 px ; color : #3a3a3c ;
}
/* FOOTER */
footer {
background : #1d1d1f ; color : #a1a1a6 ;
padding : 32 px 24 px ;
text-align : center ;
font-size : 13 px ;
}
footer a { color : #0071e3 ; text-decoration : none ; }
@ 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 ; }
2026-07-14 15:27:33 +00:00
}
/* QUIXZOOM STANDARD — Dark Theme */
: root {
--qz-bg : #0a0a0a ;
--qz-surface : #111111 ;
--qz-surface-2 : #1a1a1a ;
--qz-border : rgba ( 255 , 255 , 255 , 0.08 ) ;
--qz-text : #e8e8e8 ;
--qz-text-dim : #a0a0a0 ;
--qz-text-muted : #6b6b6b ;
--qz-blue : #007AFF ;
--qz-blue-dark : #0056CC ;
--qz-radius : 10 px ;
}
* { margin : 0 ; padding : 0 ; box-sizing : border-box ; }
body {
font-family : - apple-system , BlinkMacSystemFont , 'Inter' , sans-serif ;
background : var ( - - qz - bg ) ;
color : var ( - - qz - text ) ;
line-height : 1.6 ;
-webkit- font-smoothing : antialiased ;
}
/* Navigation */
. qz-nav {
position : fixed ; top : 0 ; left : 0 ; right : 0 ; z-index : 100 ;
display : flex ; align-items : center ; justify-content : space-between ;
padding : 0 24 px ; height : 56 px ;
background : rgba ( 255 , 255 , 255 , 0.92 ) ;
backdrop-filter : blur ( 16 px ) ;
border-bottom : 1 px solid var ( - - qz - border ) ;
}
. qz-nav-logo { font-size : 18 px ; font-weight : 700 ; color : #fff ; text-decoration : none ; }
. qz-nav-links { display : flex ; gap : 24 px ; list-style : none ; }
. qz-nav-links a { font-size : 14 px ; color : var ( - - qz - text - dim ) ; text-decoration : none ; transition : color 0.2 s ; }
. qz-nav-links a : hover { color : #fff ; }
/* Buttons */
. qz-btn {
display : inline-flex ; align-items : center ; gap : 6 px ;
padding : 12 px 24 px ; border-radius : var ( - - qz - radius ) ;
font-size : 15 px ; font-weight : 600 ; text-decoration : none ;
transition : all 0.2 s ; cursor : pointer ; border : none ;
}
. qz-btn-primary {
background : var ( - - qz - blue ) ; color : #fff ;
}
. qz-btn-primary : hover {
background : var ( - - qz - blue - dark ) ; transform : translateY ( -1 px ) ;
}
. qz-btn-ghost {
background : transparent ; color : var ( - - qz - text ) ;
border : 1 px solid var ( - - qz - border ) ;
}
. qz-btn-ghost : hover {
border-color : var ( - - qz - blue ) ; color : var ( - - qz - blue ) ;
}
/* Cards */
. qz-card {
background : var ( - - qz - surface ) ;
border : 1 px solid var ( - - qz - border ) ;
border-radius : var ( - - qz - radius ) ;
padding : 24 px ;
transition : transform 0.2 s , border-color 0.2 s ;
}
. qz-card : hover {
transform : translateY ( -2 px ) ;
border-color : rgba ( 0 , 122 , 255 , 0.3 ) ;
}
/* Footer */
. qz-footer {
border-top : 1 px solid var ( - - qz - border ) ;
padding : 40 px 24 px ;
text-align : center ;
color : var ( - - qz - text - dim ) ;
font-size : 14 px ;
}
/* Banner */
. qz-banner {
background : #001E50 ;
color : rgba ( 255 , 255 , 255 , 0.55 ) ;
text-align : center ;
padding : 10 px ;
font-size : 12 px ;
}
. qz-banner a { color : rgba ( 255 , 255 , 255 , 0.8 ) ; text-decoration : none ; }
@ media ( max-width : 768px ) {
. qz-nav-links { display : none ; }
2026-07-05 06:41:32 +00:00
}
< / style >
2026-07-14 09:58:53 +00:00
< script type = "module" src = "https://auth.quixzoom.com/site-auth-snippet.js" > < / script >
2026-07-05 06:41:32 +00:00
< / head >
< body >
2026-07-14 15:27:33 +00:00
< nav class = "qz-nav" >
2026-07-05 06:41:32 +00:00
< a href = "https://www.quixzoom.com/" class = "logo" > qui< span > X< / span > zoom< / a >
< a href = "https://www.quixzoom.com/join.html" class = "nav-cta" > Join as Zoomer< / a >
< / nav >
<!-- Featured hero image -->
< div class = "hero" >
< h1 > qui< span > X< / span > zoom in Action< / h1 >
< p > Real Zoomers. Real missions. Real earnings. See how quiXzoom turns your phone into an income source.< / p >
< / div >
< div class = "featured" >
< img loading = "lazy" loading = "lazy" loading = "lazy"
src = "/images/hero-zoomer-city.jpg"
alt = "quiXzoom Zoomer photographing urban infrastructure with iPhone for a paid field data mission"
title = "quiXzoom — Capture the World. Get Paid."
width = "1200" height = "630"
loading = "eager"
>
< / div >
<!-- Gallery grid -->
< div class = "gallery" >
< div class = "card" >
< img loading = "lazy" loading = "lazy" loading = "lazy" src = "/images/mission-map.jpg"
alt = "quiXzoom app mission map showing available paid photo missions near you"
title = "quiXzoom — Mission Map"
width = "800" height = "420" loading = "lazy" >
< div class = "card-body" >
< h2 > Mission Map< / h2 >
< p > Open the quiXzoom app and see paid missions available near you — right now.< / p >
< span class = "tag" > quiXzoom App< / span >
< / div >
< / div >
< div class = "card" >
< img loading = "lazy" loading = "lazy" loading = "lazy" src = "/images/zoomer-earnings.jpg"
alt = "quiXzoom Zoomer earnings dashboard — get paid per approved photo mission"
title = "quiXzoom — Earn Per Mission"
width = "800" height = "420" loading = "lazy" >
< div class = "card-body" >
< h2 > Earn Per Mission< / h2 >
< p > Every approved submission earns you money — paid directly to your bank account. No platform fee.< / p >
< span class = "tag" > Earnings< / span >
< / div >
< / div >
< div class = "card" >
< img loading = "lazy" loading = "lazy" loading = "lazy" src = "/images/infrastructure-scan.jpg"
alt = "quiXzoom field intelligence — scanning roads, buildings and infrastructure with iPhone"
title = "quiXzoom — Field Intelligence"
width = "800" height = "420" loading = "lazy" >
< div class = "card-body" >
< h2 > Field Intelligence< / h2 >
< p > From broken signage to road damage — quiXzoom Zoomers document the real world for commercial buyers.< / p >
< span class = "tag" > Infrastructure< / span >
< / div >
< / div >
< div class = "card" >
< img loading = "lazy" loading = "lazy" loading = "lazy" src = "/images/app-screenshot.jpg"
alt = "quiXzoom iOS app screenshot — browse missions, submit photos, track earnings on iPhone"
title = "quiXzoom iOS App"
width = "800" height = "420" loading = "lazy" >
< div class = "card-body" >
< h2 > quiXzoom App< / h2 >
< p > Available on iPhone. Browse missions near you, photograph, submit — done in minutes.< / p >
< span class = "tag" > iOS App< / span >
< / div >
< / div >
< div class = "card" >
< img loading = "lazy" loading = "lazy" loading = "lazy" src = "/images/sweden-launch.jpg"
alt = "quiXzoom Sweden launch — Stockholm August 2026, 5 markets in phased rollout"
title = "quiXzoom Sweden Launch"
width = "800" height = "420" loading = "lazy" >
< div class = "card-body" >
< h2 > Launching Sweden — August 2026< / h2 >
< p > quiXzoom starts in Stockholm and expands across Sweden before going international.< / p >
< span class = "tag" > quiXzoom Sverige< / span >
< / div >
< / div >
< div class = "card" >
< img loading = "lazy" loading = "lazy" loading = "lazy" src = "/images/quixzoom-team.jpg"
alt = "quiXzoom global network — thousands of Zoomers collecting verified field data worldwide"
title = "quiXzoom Global Network"
width = "800" height = "420" loading = "lazy" >
< div class = "card-body" >
< h2 > Global Network< / h2 >
< p > quiXzoom is building the world's largest network of verified field data collectors.< / p >
< span class = "tag" > Network< / span >
< / div >
< / div >
< / div >
<!-- SEO section -->
< div class = "seo-section" >
< h2 > About quiXzoom< / h2 >
< p >
< strong > quiXzoom< / strong > (also searched as quixzoom, QuiXzoom, QUIXZOOM, quix zoom, quick zoom, quickzoom)
is a field intelligence platform where independent contractors called < strong > Zoomers< / strong >
earn money by photographing infrastructure, storefronts, roads and urban environments on demand.
Launching in Sweden in August 2026.
< / p >
< p >
quiXzoom is operated by < strong > Landvex AB< / strong > (org.nr 559141-7042), the global control intelligence company.
quiXzoom powers the field data collection layer of the Landvex intelligence infrastructure.
< / p >
< div class = "alt-names" >
< span > quiXzoom< / span >
< span > quixzoom< / span >
< span > QuiXzoom< / span >
< span > QUIXZOOM< / span >
< span > quix zoom< / span >
< span > quick zoom app< / span >
< span > quickzoom< / span >
< span > quizoom< / span >
< span > quiXzoom Sverige< / span >
< span > quiXzoom Sweden< / span >
< span > field intelligence platform< / span >
< span > earn per mission app< / span >
< / div >
< / div >
2026-07-14 15:27:33 +00:00
< footer class = "qz-footer" >
2026-07-05 06:41:32 +00:00
< p > © 2026 quiXzoom · Operated by Landvex AB · < a href = "/privacy.html" > Privacy< / a > · < a href = "/terms.html" > Terms< / a > · < a href = "https://www.quixzoom.com/" > quixzoom.com< / a > < / p >
< / footer >
2026-07-14 09:58:53 +00:00
<!-- quiXzoom Mina Sidor - Universal Header Component -->
<!-- Injicera detta i <head> på alla quiXzoom - sajter -->
< style >
. qz-auth-bar {
position : fixed ;
top : 0 ;
left : 0 ;
right : 0 ;
height : 48 px ;
background : #0A0A0A ;
border-bottom : 1 px solid rgba ( 255 , 255 , 255 , 0.1 ) ;
display : flex ;
align-items : center ;
justify-content : space-between ;
padding : 0 20 px ;
z-index : 9999 ;
font-family : - apple-system , BlinkMacSystemFont , 'SF Pro Display' , 'Segoe UI' , Roboto , sans-serif ;
}
. qz-auth-bar . qz-logo {
font-size : 18 px ;
font-weight : 700 ;
color : #fff ;
text-decoration : none ;
letter-spacing : -0.5 px ;
}
. qz-auth-bar . qz-logo span {
color : #007AFF ;
}
. qz-auth-bar . qz-nav {
display : flex ;
gap : 8 px ;
align-items : center ;
}
. qz-auth-bar . qz-btn {
padding : 8 px 16 px ;
border-radius : 8 px ;
font-size : 14 px ;
font-weight : 500 ;
cursor : pointer ;
transition : all 0.2 s ;
border : none ;
text-decoration : none ;
}
. qz-auth-bar . qz-btn-primary {
background : #007AFF ;
color : white ;
}
. qz-auth-bar . qz-btn-primary : hover {
background : #0056CC ;
}
. qz-auth-bar . qz-btn-ghost {
background : transparent ;
color : rgba ( 255 , 255 , 255 , 0.8 ) ;
}
. qz-auth-bar . qz-btn-ghost : hover {
background : rgba ( 255 , 255 , 255 , 0.1 ) ;
color : white ;
}
. qz-auth-bar . qz-user {
display : flex ;
align-items : center ;
gap : 8 px ;
color : white ;
font-size : 14 px ;
}
. qz-auth-bar . qz-avatar {
width : 32 px ;
height : 32 px ;
border-radius : 50 % ;
background : #007AFF ;
display : flex ;
align-items : center ;
justify-content : center ;
font-weight : 600 ;
font-size : 14 px ;
}
. qz-auth-bar . qz-dropdown {
position : relative ;
}
. qz-auth-bar . qz-dropdown-menu {
position : absolute ;
top : 40 px ;
right : 0 ;
background : #1C1C1E ;
border : 1 px solid rgba ( 255 , 255 , 255 , 0.1 ) ;
border-radius : 12 px ;
padding : 8 px ;
min-width : 200 px ;
display : none ;
box-shadow : 0 8 px 32 px rgba ( 0 , 0 , 0 , 0.4 ) ;
}
. qz-auth-bar . qz-dropdown-menu . active {
display : block ;
}
. qz-auth-bar . qz-dropdown-item {
padding : 10 px 12 px ;
border-radius : 8 px ;
color : white ;
text-decoration : none ;
display : flex ;
align-items : center ;
gap : 10 px ;
font-size : 14 px ;
transition : background 0.2 s ;
}
. qz-auth-bar . qz-dropdown-item : hover {
background : rgba ( 255 , 255 , 255 , 0.1 ) ;
}
. qz-auth-bar . qz-dropdown-divider {
height : 1 px ;
background : rgba ( 255 , 255 , 255 , 0.1 ) ;
margin : 8 px 0 ;
}
. qz-auth-bar . qz-balance {
background : rgba ( 0 , 122 , 255 , 0.15 ) ;
color : #007AFF ;
padding : 4 px 10 px ;
border-radius : 6 px ;
font-size : 13 px ;
font-weight : 600 ;
}
@ media ( max-width : 640px ) {
. qz-auth-bar . qz-nav . qz-btn-ghost : not ( . qz-user ) {
display : none ;
}
}
2026-07-14 15:27:33 +00:00
/* QUIXZOOM STANDARD — Dark Theme */
: root {
--qz-bg : #0a0a0a ;
--qz-surface : #111111 ;
--qz-surface-2 : #1a1a1a ;
--qz-border : rgba ( 255 , 255 , 255 , 0.08 ) ;
--qz-text : #e8e8e8 ;
--qz-text-dim : #a0a0a0 ;
--qz-text-muted : #6b6b6b ;
--qz-blue : #007AFF ;
--qz-blue-dark : #0056CC ;
--qz-radius : 10 px ;
}
* { margin : 0 ; padding : 0 ; box-sizing : border-box ; }
body {
font-family : - apple-system , BlinkMacSystemFont , 'Inter' , sans-serif ;
background : var ( - - qz - bg ) ;
color : var ( - - qz - text ) ;
line-height : 1.6 ;
-webkit- font-smoothing : antialiased ;
}
/* Navigation */
. qz-nav {
position : fixed ; top : 0 ; left : 0 ; right : 0 ; z-index : 100 ;
display : flex ; align-items : center ; justify-content : space-between ;
padding : 0 24 px ; height : 56 px ;
background : rgba ( 255 , 255 , 255 , 0.92 ) ;
backdrop-filter : blur ( 16 px ) ;
border-bottom : 1 px solid var ( - - qz - border ) ;
}
. qz-nav-logo { font-size : 18 px ; font-weight : 700 ; color : #fff ; text-decoration : none ; }
. qz-nav-links { display : flex ; gap : 24 px ; list-style : none ; }
. qz-nav-links a { font-size : 14 px ; color : var ( - - qz - text - dim ) ; text-decoration : none ; transition : color 0.2 s ; }
. qz-nav-links a : hover { color : #fff ; }
/* Buttons */
. qz-btn {
display : inline-flex ; align-items : center ; gap : 6 px ;
padding : 12 px 24 px ; border-radius : var ( - - qz - radius ) ;
font-size : 15 px ; font-weight : 600 ; text-decoration : none ;
transition : all 0.2 s ; cursor : pointer ; border : none ;
}
. qz-btn-primary {
background : var ( - - qz - blue ) ; color : #fff ;
}
. qz-btn-primary : hover {
background : var ( - - qz - blue - dark ) ; transform : translateY ( -1 px ) ;
}
. qz-btn-ghost {
background : transparent ; color : var ( - - qz - text ) ;
border : 1 px solid var ( - - qz - border ) ;
}
. qz-btn-ghost : hover {
border-color : var ( - - qz - blue ) ; color : var ( - - qz - blue ) ;
}
/* Cards */
. qz-card {
background : var ( - - qz - surface ) ;
border : 1 px solid var ( - - qz - border ) ;
border-radius : var ( - - qz - radius ) ;
padding : 24 px ;
transition : transform 0.2 s , border-color 0.2 s ;
}
. qz-card : hover {
transform : translateY ( -2 px ) ;
border-color : rgba ( 0 , 122 , 255 , 0.3 ) ;
}
/* Footer */
. qz-footer {
border-top : 1 px solid var ( - - qz - border ) ;
padding : 40 px 24 px ;
text-align : center ;
color : var ( - - qz - text - dim ) ;
font-size : 14 px ;
}
/* Banner */
. qz-banner {
background : #001E50 ;
color : rgba ( 255 , 255 , 255 , 0.55 ) ;
text-align : center ;
padding : 10 px ;
font-size : 12 px ;
}
. qz-banner a { color : rgba ( 255 , 255 , 255 , 0.8 ) ; text-decoration : none ; }
@ media ( max-width : 768px ) {
. qz-nav-links { display : none ; }
}
2026-07-14 09:58:53 +00:00
< / style >
< div id = "qz-auth-bar" class = "qz-auth-bar" >
< a href = "https://quixzoom.com" class = "qz-logo" > qui< span > X< / span > zoom< / a >
< div class = "qz-nav" >
< div id = "qz-auth-guest" >
< a href = "https://app.quixzoom.com/login" class = "qz-btn qz-btn-ghost" > Logga in< / a >
< a href = "https://app.quixzoom.com/register" class = "qz-btn qz-btn-primary" > Bli Zoomer< / a >
< / div >
< div id = "qz-auth-user" style = "display:none;" >
< span class = "qz-balance" id = "qz-balance" > $0.00< / span >
< div class = "qz-dropdown" >
< button class = "qz-btn qz-btn-ghost qz-user" onclick = "qzToggleDropdown()" >
< div class = "qz-avatar" id = "qz-avatar" > E< / div >
< span id = "qz-user-name" > Erik< / span >
< svg width = "12" height = "12" viewBox = "0 0 12 12" fill = "none" > < path d = "M2.5 4.5L6 8L9.5 4.5" stroke = "currentColor" stroke-width = "1.5" stroke-linecap = "round" stroke-linejoin = "round" / > < / svg >
< / button >
< div class = "qz-dropdown-menu" id = "qz-dropdown-menu" >
< a href = "https://app.quixzoom.com/dashboard" class = "qz-dropdown-item" >
< svg width = "16" height = "16" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" > < rect x = "3" y = "3" width = "7" height = "7" rx = "1" / > < rect x = "14" y = "3" width = "7" height = "7" rx = "1" / > < rect x = "14" y = "14" width = "7" height = "7" rx = "1" / > < rect x = "3" y = "14" width = "7" height = "7" rx = "1" / > < / svg >
Dashboard
< / a >
< a href = "https://app.quixzoom.com/wallet" class = "qz-dropdown-item" >
< svg width = "16" height = "16" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" > < path d = "M21 12V7H5a2 2 0 0 1 0-4h14v4" / > < path d = "M3 5v14a2 2 0 0 0 2 2h16v-5" / > < path d = "M18 12a2 2 0 0 0 0 4h4v-4h-4z" / > < / svg >
Plånbok
< / a >
< a href = "https://app.quixzoom.com/missions" class = "qz-dropdown-item" >
< svg width = "16" height = "16" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" > < path d = "M12 2L2 7l10 5 10-5-10-5z" / > < path d = "M2 17l10 5 10-5" / > < path d = "M2 12l10 5 10-5" / > < / svg >
Mina uppdrag
< / a >
< div class = "qz-dropdown-divider" > < / div >
< a href = "https://app.quixzoom.com/settings" class = "qz-dropdown-item" >
< svg width = "16" height = "16" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" > < circle cx = "12" cy = "12" r = "3" / > < path d = "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.67 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.67 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.67a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" / > < / svg >
Inställningar
< / a >
< a href = "#" onclick = "qzLogout(); return false;" class = "qz-dropdown-item" >
< svg width = "16" height = "16" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" > < path d = "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" / > < polyline points = "16 17 21 12 16 7" / > < line x1 = "21" y1 = "12" x2 = "9" y2 = "12" / > < / svg >
Logga ut
< / a >
< / div >
< / div >
< / div >
< / div >
< / div >
< script >
( function ( ) {
const SSO _BASE = 'https://auth.quixzoom.com' ;
const APP _BASE = 'https://app.quixzoom.com' ;
// Check auth status
async function qzCheckAuth ( ) {
try {
const res = await fetch ( SSO _BASE + '/auth/check' , {
credentials : 'include' ,
} ) ;
if ( res . ok ) {
const data = await res . json ( ) ;
if ( data . authenticated ) {
document . getElementById ( 'qz-auth-guest' ) . style . display = 'none' ;
document . getElementById ( 'qz-auth-user' ) . style . display = 'flex' ;
document . getElementById ( 'qz-user-name' ) . textContent = data . user . name || data . user . email ;
document . getElementById ( 'qz-avatar' ) . textContent = ( data . user . name || data . user . email ) [ 0 ] . toUpperCase ( ) ;
if ( data . user . balance !== undefined ) {
document . getElementById ( 'qz-balance' ) . textContent = '$' + data . user . balance . toFixed ( 2 ) ;
}
}
}
} catch ( e ) {
// Silent fail - show guest state
}
}
// Toggle dropdown
window . qzToggleDropdown = function ( ) {
document . getElementById ( 'qz-dropdown-menu' ) . classList . toggle ( 'active' ) ;
} ;
// Close dropdown on outside click
document . addEventListener ( 'click' , function ( e ) {
if ( ! e . target . closest ( '.qz-dropdown' ) ) {
document . getElementById ( 'qz-dropdown-menu' ) . classList . remove ( 'active' ) ;
}
} ) ;
// Logout
window . qzLogout = async function ( ) {
try {
await fetch ( SSO _BASE + '/auth/logout' , {
method : 'POST' ,
credentials : 'include' ,
} ) ;
} catch ( e ) { }
document . cookie = 'qz_access_token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; domain=.quixzoom.com; path=/;' ;
document . cookie = 'qz_refresh_token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; domain=.quixzoom.com; path=/;' ;
window . location . reload ( ) ;
} ;
// Init
qzCheckAuth ( ) ;
} ) ( ) ;
< / script >
2026-07-05 06:41:32 +00:00
< / body >
< / html >
