2026-07-05 06:41:32 +00:00
<!DOCTYPE html>
< html lang = "sv" data-theme = "dark" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, viewport-fit=cover" >
< meta name = "apple-mobile-web-app-capable" content = "yes" >
< meta name = "apple-mobile-web-app-status-bar-style" content = "black-translucent" >
< title > App Store Guide — quiXzoom< / title >
< link rel = "stylesheet" >
< style >
* , * :: before , * :: after { box-sizing : border-box ; margin : 0 ; padding : 0 ; }
body {
font-family : var ( - - font - text ) ;
background : var ( - - grouped - background - primary ) ;
color : var ( - - label - primary ) ;
min-height : 100 dvh ;
padding-top : env ( safe - area - inset - top , 44 px ) ;
padding-bottom : calc ( env ( safe - area - inset - bottom , 34 px ) + 40 px ) ;
-webkit- font-smoothing : antialiased ;
}
. nav-bar {
position : sticky ; top : 0 ; z-index : 200 ;
display : flex ; align-items : center ; justify-content : space-between ;
height : 44 px ; padding : 0 16 px ;
background : var ( - - navbar - bg ) ;
backdrop-filter : saturate ( 180 % ) blur ( 20 px ) ;
-webkit- backdrop-filter : saturate ( 180 % ) blur ( 20 px ) ;
border-bottom : 0.5 px solid var ( - - separator ) ;
}
. nav-title { font-size : 17 px ; font-weight : 600 ; letter-spacing : -0.41 px ; }
. nav-badge {
font-size : 12 px ; font-weight : 600 ; padding : 4 px 10 px ;
background : rgba ( 10 , 132 , 255 , 0.15 ) ; color : var ( - - ios - blue ) ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - xl ) ;
2026-07-05 06:41:32 +00:00
}
/* Hero */
. hero {
padding : 28 px 20 px 24 px ;
text-align : center ;
background : linear-gradient ( 180 deg , rgba ( 10 , 132 , 255 , 0.08 ) 0 % , transparent 100 % ) ;
}
. hero-icon { font-size : 64 px ; margin-bottom : 12 px ; line-height : 1 ; }
. hero-title {
font-family : var ( - - font - display ) ;
font-size : 28 px ; font-weight : 800 ; letter-spacing : -0.5 px ;
margin-bottom : 8 px ;
}
. hero-sub { font-size : 15 px ; color : var ( - - label - secondary ) ; line-height : 1.5 ; }
/* Progress overview */
. progress-overview {
margin : 0 16 px 20 px ;
background : var ( - - background - secondary ) ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - lg ) ; overflow : hidden ;
2026-07-05 06:41:32 +00:00
border : 0.5 px solid var ( - - separator ) ;
padding : 16 px ;
}
. progress-label {
display : flex ; justify-content : space-between ; align-items : center ;
margin-bottom : 10 px ;
}
. progress-label-text { font-size : 14 px ; color : var ( - - label - secondary ) ; }
. progress-label-count { font-size : 14 px ; font-weight : 700 ; color : var ( - - ios - blue ) ; }
. progress-track {
2026-07-07 07:11:50 +00:00
height : 8 px ; background : var ( - - fill - secondary ) ; border-radius : var ( - - radius - sm ) ; overflow : hidden ;
2026-07-05 06:41:32 +00:00
}
. progress-fill {
2026-07-07 07:11:50 +00:00
height : 100 % ; border-radius : var ( - - radius - sm ) ;
2026-07-05 06:41:32 +00:00
background : linear-gradient ( 90 deg , var ( - - ios - blue ) , var ( - - ios - indigo ) ) ;
transition : width 0.8 s cubic-bezier ( 0.34 , 1.56 , 0.64 , 1 ) ;
}
. progress-chips {
display : flex ; gap : 8 px ; margin-top : 12 px ; flex-wrap : wrap ;
}
. progress-chip {
2026-07-07 07:11:50 +00:00
font-size : 12 px ; font-weight : 500 ; padding : 4 px 10 px ; border-radius : var ( - - radius - md ) ;
2026-07-05 06:41:32 +00:00
}
. chip-done { background : rgba ( 48 , 209 , 88 , 0.15 ) ; color : var ( - - ios - green ) ; }
. chip-todo { background : var ( - - fill - secondary ) ; color : var ( - - label - secondary ) ; }
/* Section */
. section { margin : 0 16 px 28 px ; }
. section-header {
font-size : 13 px ; font-weight : 600 ; color : var ( - - label - secondary ) ;
text-transform : uppercase ; letter-spacing : 0.5 px ;
padding : 0 4 px 10 px ;
}
/* Steps */
. steps-list { display : flex ; flex-direction : column ; gap : 0 ; }
. step-card {
background : var ( - - background - secondary ) ;
border-radius : 0 ; overflow : hidden ;
border : 0.5 px solid var ( - - separator ) ;
margin-bottom : -0.5 px ;
}
2026-07-07 07:11:50 +00:00
. step-card : first-child { border-radius : var ( - - radius - lg ) 14 px 0 0 ; }
2026-07-05 06:41:32 +00:00
. step-card : last-child { border-radius : 0 0 14 px 14 px ; margin-bottom : 0 ; }
2026-07-07 07:11:50 +00:00
. step-card : only-child { border-radius : var ( - - radius - lg ) ; }
2026-07-05 06:41:32 +00:00
. step-header {
display : flex ; align-items : center ; gap : 14 px ;
padding : 16 px ; cursor : pointer ;
}
. step-number {
2026-07-07 07:11:50 +00:00
width : 32 px ; height : 32 px ; border-radius : var ( - - radius - full ) ;
2026-07-05 06:41:32 +00:00
display : flex ; align-items : center ; justify-content : center ;
font-size : 14 px ; font-weight : 700 ; flex-shrink : 0 ;
}
. step-num-done { background : var ( - - ios - green ) ; color : #fff ; }
. step-num-todo { background : var ( - - fill - secondary ) ; color : var ( - - label - secondary ) ; }
. step-num-progress { background : var ( - - ios - blue ) ; color : #fff ; }
. step-info { flex : 1 ; }
. step-title { font-size : 16 px ; font-weight : 600 ; }
. step-desc { font-size : 13 px ; color : var ( - - label - secondary ) ; margin-top : 2 px ; }
. step-check { font-size : 18 px ; }
. step-body {
padding : 0 16 px 16 px 62 px ;
font-size : 14 px ; color : var ( - - label - secondary ) ;
line-height : 1.6 ;
display : none ;
}
. step-body . open { display : block ; }
. step-detail-row {
display : flex ; gap : 8 px ; margin-bottom : 8 px ; align-items : flex-start ;
}
2026-07-07 07:11:50 +00:00
. step-detail-dot { margin-top : 5 px ; width : 5 px ; height : 5 px ; border-radius : var ( - - radius - full ) ; background : var ( - - ios - blue ) ; flex-shrink : 0 ; }
2026-07-05 06:41:32 +00:00
. step-detail-text { flex : 1 ; color : var ( - - label - primary ) ; }
. step-code {
font-family : var ( - - font - mono ) ; font-size : 13 px ;
2026-07-07 07:11:50 +00:00
background : var ( - - fill - secondary ) ; padding : 2 px 7 px ; border-radius : var ( - - radius - sm ) ;
2026-07-05 06:41:32 +00:00
color : var ( - - ios - teal ) ;
}
. step-cta {
display : inline-flex ; align-items : center ; gap : 6 px ;
2026-07-07 07:11:50 +00:00
margin-top : 10 px ; padding : 9 px 16 px ; border-radius : var ( - - radius - md ) ;
2026-07-05 06:41:32 +00:00
background : rgba ( 10 , 132 , 255 , 0.12 ) ; color : var ( - - ios - blue ) ;
font-size : 14 px ; font-weight : 600 ; text-decoration : none ;
transition : opacity 0.12 s ;
}
. step-cta : active { opacity : 0.7 ; }
/* Legal checklist */
. legal-card {
background : var ( - - background - secondary ) ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - lg ) ; overflow : hidden ;
2026-07-05 06:41:32 +00:00
border : 0.5 px solid var ( - - separator ) ;
}
. legal-row {
display : flex ; align-items : center ; gap : 14 px ;
padding : 13 px 16 px ;
border-bottom : 0.5 px solid var ( - - separator ) ;
}
. legal-row : last-child { border-bottom : none ; }
. legal-icon { font-size : 20 px ; }
. legal-info { flex : 1 ; }
. legal-title { font-size : 15 px ; font-weight : 500 ; }
. legal-sub { font-size : 12 px ; color : var ( - - label - secondary ) ; margin-top : 2 px ; }
. legal-status { font-size : 16 px ; }
/* Screenshot guide */
. screenshot-grid {
display : grid ; grid-template-columns : 1 fr 1 fr 1 fr ; gap : 10 px ;
margin-top : 0 ;
}
. screenshot-card {
background : var ( - - background - secondary ) ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - md ) ; overflow : hidden ;
2026-07-05 06:41:32 +00:00
border : 0.5 px solid var ( - - separator ) ;
padding : 14 px 10 px ; text-align : center ;
}
. screenshot-icon { font-size : 28 px ; margin-bottom : 8 px ; }
. screenshot-size { font-size : 12 px ; font-weight : 700 ; color : var ( - - label - primary ) ; }
. screenshot-note { font-size : 11 px ; color : var ( - - label - secondary ) ; margin-top : 3 px ; }
/* Info card */
. info-card {
background : rgba ( 10 , 132 , 255 , 0.08 ) ;
border : 0.5 px solid rgba ( 10 , 132 , 255 , 0.2 ) ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - lg ) ; padding : 14 px 16 px ;
2026-07-05 06:41:32 +00:00
margin-top : 12 px ;
}
. info-card-title { font-size : 13 px ; font-weight : 600 ; color : var ( - - ios - blue ) ; margin-bottom : 4 px ; }
. info-card-body { font-size : 13 px ; color : var ( - - label - secondary ) ; line-height : 1.5 ; }
/* Warning card */
. warn-card {
background : rgba ( 255 , 159 , 10 , 0.08 ) ;
border : 0.5 px solid rgba ( 255 , 159 , 10 , 0.2 ) ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - lg ) ; padding : 14 px 16 px ;
2026-07-05 06:41:32 +00:00
margin : 16 px 16 px 8 px ;
}
. warn-card-title { font-size : 13 px ; font-weight : 600 ; color : var ( - - ios - orange ) ; margin-bottom : 4 px ; }
. warn-card-body { font-size : 13 px ; color : var ( - - label - secondary ) ; line-height : 1.5 ; }
@ 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 >
< meta property = "og:type" content = "website" >
< meta property = "og:title" content = "App Store Guide — quiXzoom" >
< meta property = "og:description" content = "quiXzoom — Earn per Mission. No Platform Fee." >
< meta property = "og:url" content = "https://www.quixzoom.com/app-store-guide.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 App Store guide — download on iOS and Android" >
< 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 = "App Store Guide — quiXzoom" >
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 >
<!-- Nav -->
< div class = "nav-bar" >
< span class = "nav-title" > App Store Guide< / span >
< span class = "nav-badge" > 3 / 9 klara< / span >
< / div >
<!-- Hero -->
< div class = "hero" >
2026-07-07 07:11:50 +00:00
< div class = "hero-icon" > < / div >
2026-07-05 06:41:32 +00:00
< div class = "hero-title" > App Store Submission< / div >
< div class = "hero-sub" > Steg-för-steg guide för quiXzoom< br > iOS App — augusti 2026< / div >
< / div >
<!-- Progress -->
< div class = "progress-overview" >
< div class = "progress-label" >
< span class = "progress-label-text" > Inlämningssteg slutförda< / span >
< span class = "progress-label-count" > 3 av 9< / span >
< / div >
< div class = "progress-track" >
< div class = "progress-fill" id = "progress-fill" style = "width:33%" > < / div >
< / div >
< div class = "progress-chips" >
2026-07-07 07:11:50 +00:00
< span class = "progress-chip chip-done" > < 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 > Privacy Policy< / span >
< span class = "progress-chip chip-done" > < 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 > Support URL< / span >
< span class = "progress-chip chip-done" > < 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 > Terms of Service< / span >
2026-07-05 06:41:32 +00:00
< span class = "progress-chip chip-todo" > ⏳ SwiftUI App< / span >
< span class = "progress-chip chip-todo" > ⏳ Screenshots< / span >
< span class = "progress-chip chip-todo" > ⏳ App Store Connect< / span >
< / div >
< / div >
<!-- Steps -->
< div class = "section" >
< div class = "section-header" > Inlämningssteg< / div >
< div class = "steps-list" >
<!-- Step 1 -->
< div class = "step-card" onclick = "toggle(1)" >
< div class = "step-header" >
< div class = "step-number step-num-todo" > 1< / div >
< div class = "step-info" >
< div class = "step-title" > App Store Connect konto< / div >
< div class = "step-desc" > Apple Developer Program · $99/år< / div >
< / div >
2026-07-07 07:11:50 +00:00
< span class = "step-check" > < svg width = "20" height = "20" viewBox = "0 0 20 20" fill = "none" > < path d = "M10 3L17 17H3L10 3Z" stroke = "#f59e0b" stroke-width = "2" / > < path d = "M10 8V12M10 14V14.5" stroke = "#f59e0b" stroke-width = "2" stroke-linecap = "round" / > < / svg > < / span >
2026-07-05 06:41:32 +00:00
< / div >
< div class = "step-body" id = "step-1" >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > Logga in på < strong > appstoreconnect.apple.com< / strong > med < span class = "step-code" > erik@hypbit.com< / span > < / div >
< / div >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > Verifiera att Apple Developer Program ($99/år) är aktivt — kan ta 24– < / div >
< / div >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > Navigera till "Apps" → klicka "+" → "New App"< / div >
< / div >
< a class = "step-cta" href = "https://appstoreconnect.apple.com" target = "_blank" >
2026-07-07 07:11:50 +00:00
Öppna App Store Connect
2026-07-05 06:41:32 +00:00
< / a >
< / div >
< / div >
<!-- Step 2 -->
< div class = "step-card" onclick = "toggle(2)" >
< div class = "step-header" >
< div class = "step-number step-num-todo" > 2< / div >
< div class = "step-info" >
< div class = "step-title" > App ID & Bundle ID< / div >
< div class = "step-desc" > Registrera unik identifierare< / div >
< / div >
2026-07-07 07:11:50 +00:00
< span class = "step-check" > < svg width = "20" height = "20" viewBox = "0 0 20 20" fill = "none" > < path d = "M10 3L17 17H3L10 3Z" stroke = "#f59e0b" stroke-width = "2" / > < path d = "M10 8V12M10 14V14.5" stroke = "#f59e0b" stroke-width = "2" stroke-linecap = "round" / > < / svg > < / span >
2026-07-05 06:41:32 +00:00
< / div >
< div class = "step-body" id = "step-2" >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > Gå till < strong > developer.apple.com/account< / strong > → Certificates, IDs & Profiles → Identifiers< / div >
< / div >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > Klicka "+" → App IDs → App → Continue< / div >
< / div >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > Bundle ID (Explicit): < span class = "step-code" > se.wavult.quixzoom< / span > < / div >
< / div >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > Capabilities att aktivera: Push Notifications, Sign in with Apple, Location Services< / div >
< / div >
< div class = "info-card" >
2026-07-07 07:11:50 +00:00
< div class = "info-card-title" > Bundle ID< / div >
2026-07-05 06:41:32 +00:00
< div class = "info-card-body" > Bundle ID är permanent och kan inte ändras efter publicering. Använd < code > se.wavult.quixzoom< / code > exakt.< / div >
< / div >
< / div >
< / div >
<!-- Step 3 -->
< div class = "step-card" onclick = "toggle(3)" >
< div class = "step-header" >
< div class = "step-number step-num-todo" > 3< / div >
< div class = "step-info" >
< div class = "step-title" > App Metadata< / div >
< div class = "step-desc" > Namn, kategori, beskrivning< / div >
< / div >
2026-07-07 07:11:50 +00:00
< span class = "step-check" > < svg width = "20" height = "20" viewBox = "0 0 20 20" fill = "none" > < path d = "M10 3L17 17H3L10 3Z" stroke = "#f59e0b" stroke-width = "2" / > < path d = "M10 8V12M10 14V14.5" stroke = "#f59e0b" stroke-width = "2" stroke-linecap = "round" / > < / svg > < / span >
2026-07-05 06:41:32 +00:00
< / div >
< div class = "step-body" id = "step-3" >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > App Name: < span class = "step-code" > quiXzoom< / span > < / div >
< / div >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > Subtitle (max 30 tecken): < span class = "step-code" > Drönartjänster på begäran< / span > < / div >
< / div >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > Primary Category: < strong > Business< / strong > < / div >
< / div >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > Secondary Category: < strong > Productivity< / strong > < / div >
< / div >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > Keywords (max 100 tecken): < span class = "step-code" > drönare, scanning, uppdrag, zoomer, fastighet, inspektiön< / span > < / div >
< / div >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > Description: Skriv en övertygande 4000-tecken beskrivning på svenska och engelska< / div >
< / div >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > What's New (v1.0): < span class = "step-code" > quiXzoom lanseras i Sverige! Ta drönarppdrag när det passar dig.< / span > < / div >
< / div >
< / div >
< / div >
<!-- Step 4 -->
< div class = "step-card" onclick = "toggle(4)" >
< div class = "step-header" >
< div class = "step-number step-num-todo" > 4< / div >
< div class = "step-info" >
< div class = "step-title" > Screenshots< / div >
< div class = "step-desc" > 3 storlekar krävda av Apple< / div >
< / div >
2026-07-07 07:11:50 +00:00
< span class = "step-check" > < svg width = "20" height = "20" viewBox = "0 0 20 20" fill = "none" > < path d = "M10 3L17 17H3L10 3Z" stroke = "#f59e0b" stroke-width = "2" / > < path d = "M10 8V12M10 14V14.5" stroke = "#f59e0b" stroke-width = "2" stroke-linecap = "round" / > < / svg > < / span >
2026-07-05 06:41:32 +00:00
< / div >
< div class = "step-body" id = "step-4" >
< div class = "screenshot-grid" >
< div class = "screenshot-card" >
2026-07-07 07:11:50 +00:00
< div class = "screenshot-icon" > < / div >
2026-07-05 06:41:32 +00:00
< div class = "screenshot-size" > 6.7"< / div >
< div class = "screenshot-note" > iPhone 15 Plus< br > 1290× < / div >
< / div >
< div class = "screenshot-card" >
2026-07-07 07:11:50 +00:00
< div class = "screenshot-icon" > < / div >
2026-07-05 06:41:32 +00:00
< div class = "screenshot-size" > 6.1"< / div >
< div class = "screenshot-note" > iPhone 15< br > 1179× < / div >
< / div >
< div class = "screenshot-card" >
2026-07-07 07:11:50 +00:00
< div class = "screenshot-icon" > < / div >
2026-07-05 06:41:32 +00:00
< div class = "screenshot-size" > iPad 12.9"< / div >
< div class = "screenshot-note" > iPad Pro< br > 2048× < / div >
< / div >
< / div >
< div class = "step-detail-row" style = "margin-top:14px" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > Minimum 3 screenshots, max 10 per enhet< / div >
< / div >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > Visa: Uppdragskarta, Zoomer-profil, Betalningsflöde, Onboarding< / div >
< / div >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > Verktyg: Figma + iPhone Simulator (Xcode), eller Rottenwood/AppLaunchpad< / div >
< / div >
< div class = "info-card" >
2026-07-07 07:11:50 +00:00
< div class = "info-card-title" > Pro tip< / div >
2026-07-05 06:41:32 +00:00
< div class = "info-card-body" > Lägg till device frames och svenska texter i bilderna. Localize screenshots till SV för bättre konvertering.< / div >
< / div >
< / div >
< / div >
<!-- Step 5 -->
< div class = "step-card" onclick = "toggle(5)" >
< div class = "step-header" >
< div class = "step-number step-num-todo" > 5< / div >
< div class = "step-info" >
< div class = "step-title" > App Review Information< / div >
< div class = "step-desc" > Kontaktinfo + demouppgifter< / div >
< / div >
2026-07-07 07:11:50 +00:00
< span class = "step-check" > < svg width = "20" height = "20" viewBox = "0 0 20 20" fill = "none" > < path d = "M10 3L17 17H3L10 3Z" stroke = "#f59e0b" stroke-width = "2" / > < path d = "M10 8V12M10 14V14.5" stroke = "#f59e0b" stroke-width = "2" stroke-linecap = "round" / > < / svg > < / span >
2026-07-05 06:41:32 +00:00
< / div >
< div class = "step-body" id = "step-5" >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > First Name / Last Name: < span class = "step-code" > Erik Svensson< / span > < / div >
< / div >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > Email: < span class = "step-code" > erik@hypbit.com< / span > < / div >
< / div >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > Phone: < span class = "step-code" > +46709123223< / span > < / div >
< / div >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > Demo Account: Skapa ett test-zoomer-konto med verifierad KYC för review-teamet< / div >
< / div >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > Review Notes: "quiXzoom is a gig economy platform for drone operators. Use the demo account to browse available missions. Location access is required for the mission map feature."< / div >
< / div >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > Attachment: Valfri — överväg att bifoga en kort video (MP4, max 2 min) som demonstrerar appen< / div >
< / div >
< / div >
< / div >
<!-- Step 6 -->
< div class = "step-card" onclick = "toggle(6)" >
< div class = "step-header" >
< div class = "step-number step-num-done" > 6< / div >
< div class = "step-info" >
< div class = "step-title" > Privacy Policy URL< / div >
< div class = "step-desc" > GDPR-kompatibel · live< / div >
< / div >
2026-07-07 07:11:50 +00:00
< span class = "step-check" > < 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 > < / span >
2026-07-05 06:41:32 +00:00
< / div >
< div class = "step-body" id = "step-6" >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
2026-07-07 07:11:50 +00:00
< div class = "step-detail-text" > URL: < span class = "step-code" > https://quixzoom.com/privacy< / span > < 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 > Live< / div >
2026-07-05 06:41:32 +00:00
< / div >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
2026-07-07 07:11:50 +00:00
< div class = "step-detail-text" > GDPR compliance: < 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 > Täcker datainsamling, behandling, raderingsrätt< / div >
2026-07-05 06:41:32 +00:00
< / div >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > Måste vara tillgänglig utan inloggning (publikt URL)< / div >
< / div >
< a class = "step-cta" href = "https://quixzoom.com/privacy" target = "_blank" >
2026-07-07 07:11:50 +00:00
Visa Privacy Policy
2026-07-05 06:41:32 +00:00
< / a >
< / div >
< / div >
<!-- Step 7 -->
< div class = "step-card" onclick = "toggle(7)" >
< div class = "step-header" >
< div class = "step-number step-num-done" > 7< / div >
< div class = "step-info" >
< div class = "step-title" > Support URL< / div >
< div class = "step-desc" > Kundservice · live< / div >
< / div >
2026-07-07 07:11:50 +00:00
< span class = "step-check" > < 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 > < / span >
2026-07-05 06:41:32 +00:00
< / div >
< div class = "step-body" id = "step-7" >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
2026-07-07 07:11:50 +00:00
< div class = "step-detail-text" > URL: < span class = "step-code" > https://quixzoom.com/support< / span > < 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 > Live< / div >
2026-07-05 06:41:32 +00:00
< / div >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > Email: < span class = "step-code" > support@quixzoom.com< / span > < / div >
< / div >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > Phone: < span class = "step-code" > +46 8 123 45 67< / span > < / div >
< / div >
< a class = "step-cta" href = "https://quixzoom.com/support" target = "_blank" >
2026-07-07 07:11:50 +00:00
Visa Support-sida
2026-07-05 06:41:32 +00:00
< / a >
< / div >
< / div >
<!-- Step 8 -->
< div class = "step-card" onclick = "toggle(8)" >
< div class = "step-header" >
< div class = "step-number step-num-todo" > 8< / div >
< div class = "step-info" >
< div class = "step-title" > Marketing URL< / div >
< div class = "step-desc" > Valfritt — produktsida< / div >
< / div >
< span class = "step-check" > ⏳< / span >
< / div >
< div class = "step-body" id = "step-8" >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > Valfri men rekommenderad — ökar trovärdighet hos Apple< / div >
< / div >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > Förslag: < span class = "step-code" > https://quixzoom.com< / span > (landningssida)< / div >
< / div >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > Alternativt: < span class = "step-code" > https://quixzoom.com/app< / span > — specifik nedladdningssida< / div >
< / div >
< / div >
< / div >
<!-- Step 9 -->
< div class = "step-card" onclick = "toggle(9)" >
< div class = "step-header" >
< div class = "step-number step-num-todo" > 9< / div >
< div class = "step-info" >
< div class = "step-title" > Submit for Review< / div >
< div class = "step-desc" > Sista steget · 1– < / div >
< / div >
< span class = "step-check" > ⏳< / span >
< / div >
< div class = "step-body" id = "step-9" >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > Kontrollera att alla tidigare steg är klara (grön check)< / div >
< / div >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > Klicka "Add for Review" → välj release type: < strong > Automatic release< / strong > < / div >
< / div >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > Genomsnittlig granskningstid: 24– < / div >
< / div >
< div class = "step-detail-row" >
< div class = "step-detail-dot" > < / div >
< div class = "step-detail-text" > Planera inlämning: < strong > senast 24 juli< / strong > för lansering 1 augusti< / div >
< / div >
< div class = "info-card" >
< div class = "info-card-title" > ⏱ Tidslinje< / div >
2026-07-07 07:11:50 +00:00
< div class = "info-card-body" > Lämna in senast 24 juli → App Review 2– – < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" > < path d = "M8 2L10 8L14 9L8 14L6 8L2 7L8 2Z" fill = "#666" / > < / svg > < / div >
2026-07-05 06:41:32 +00:00
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- Legal checklist -->
< div class = "section" >
< div class = "section-header" > Juridisk checklista< / div >
< div class = "legal-card" >
< div class = "legal-row" >
2026-07-07 07:11:50 +00:00
< span class = "legal-icon" > < / span >
2026-07-05 06:41:32 +00:00
< div class = "legal-info" >
< div class = "legal-title" > GDPR Compliance< / div >
< div class = "legal-sub" > Privacy policy live, dataskyddsombud< / div >
< / div >
2026-07-07 07:11:50 +00:00
< span class = "legal-status" > < 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 > < / span >
2026-07-05 06:41:32 +00:00
< / div >
< div class = "legal-row" >
2026-07-07 07:11:50 +00:00
< span class = "legal-icon" > < / span >
2026-07-05 06:41:32 +00:00
< div class = "legal-info" >
< div class = "legal-title" > DAC7 Rapportering< / div >
< div class = "legal-sub" > EU-direktiv för plattformsekonomin — pågår< / div >
< / div >
< span class = "legal-status" > ⏳< / span >
< / div >
< div class = "legal-row" >
2026-07-07 07:11:50 +00:00
< span class = "legal-icon" > < / span >
2026-07-05 06:41:32 +00:00
< div class = "legal-info" >
< div class = "legal-title" > Zoomer-avtal< / div >
< div class = "legal-sub" > Uppdragstagares villkor — behövs innan launch< / div >
< / div >
2026-07-07 07:11:50 +00:00
< span class = "legal-status" > < svg width = "20" height = "20" viewBox = "0 0 20 20" fill = "none" > < circle cx = "10" cy = "10" r = "9" stroke = "#ef4444" stroke-width = "2" / > < path d = "M7 7L13 13M13 7L7 13" stroke = "#ef4444" stroke-width = "2" stroke-linecap = "round" / > < / svg > < / span >
2026-07-05 06:41:32 +00:00
< / div >
< div class = "legal-row" >
2026-07-07 07:11:50 +00:00
< span class = "legal-icon" > < / span >
2026-07-05 06:41:32 +00:00
< div class = "legal-info" >
< div class = "legal-title" > SwiftUI App< / div >
< div class = "legal-sub" > Native iOS-app för App Store< / div >
< / div >
2026-07-07 07:11:50 +00:00
< span class = "legal-status" > < svg width = "20" height = "20" viewBox = "0 0 20 20" fill = "none" > < circle cx = "10" cy = "10" r = "9" stroke = "#ef4444" stroke-width = "2" / > < path d = "M7 7L13 13M13 7L7 13" stroke = "#ef4444" stroke-width = "2" stroke-linecap = "round" / > < / svg > < / span >
2026-07-05 06:41:32 +00:00
< / div >
< div class = "legal-row" >
2026-07-07 07:11:50 +00:00
< span class = "legal-icon" > < / span >
2026-07-05 06:41:32 +00:00
< div class = "legal-info" >
< div class = "legal-title" > Terms of Service< / div >
< div class = "legal-sub" > Användarvillkor live< / div >
< / div >
2026-07-07 07:11:50 +00:00
< span class = "legal-status" > < 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 > < / span >
2026-07-05 06:41:32 +00:00
< / div >
< div class = "legal-row" >
2026-07-07 07:11:50 +00:00
< span class = "legal-icon" > < / span >
2026-07-05 06:41:32 +00:00
< div class = "legal-info" >
< div class = "legal-title" > Drönartillstånd (LFV/Transportstyrelsen)< / div >
< div class = "legal-sub" > Zoomer ansvarar för eget tillstånd< / div >
< / div >
2026-07-07 07:11:50 +00:00
< span class = "legal-status" > < svg width = "20" height = "20" viewBox = "0 0 20 20" fill = "none" > < path d = "M10 3L17 17H3L10 3Z" stroke = "#f59e0b" stroke-width = "2" / > < path d = "M10 8V12M10 14V14.5" stroke = "#f59e0b" stroke-width = "2" stroke-linecap = "round" / > < / svg > < / span >
2026-07-05 06:41:32 +00:00
< / div >
< / div >
< / div >
<!-- Critical path warning -->
< div class = "warn-card" >
2026-07-07 07:11:50 +00:00
< div class = "warn-card-title" > < svg width = "20" height = "20" viewBox = "0 0 20 20" fill = "none" > < path d = "M10 3L17 17H3L10 3Z" stroke = "#f59e0b" stroke-width = "2" / > < path d = "M10 8V12M10 14V14.5" stroke = "#f59e0b" stroke-width = "2" stroke-linecap = "round" / > < / svg > Kritisk väg till 1 augusti< / div >
2026-07-05 06:41:32 +00:00
< div class = "warn-card-body" > SwiftUI-app måste vara klar senast < strong > 5 juni< / strong > för att hinna med screenshots, testning och App Review-processen. Det är den enda blockande faktorn för en lyckad launch.< / div >
< / div >
< div style = "height:32px" > < / div >
< script >
const openSteps = new Set ( ) ;
function toggle ( n ) {
const el = document . getElementById ( 'step-' + n ) ;
if ( ! el ) return ;
if ( openSteps . has ( n ) ) {
el . classList . remove ( 'open' ) ;
openSteps . delete ( n ) ;
} else {
el . classList . add ( 'open' ) ;
openSteps . add ( n ) ;
}
}
// Auto-open step 1 on load
toggle ( 1 ) ;
< / script >
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 ;
}
}
< / 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 >
