Bernt
1a12fb870b
- New /developers/ page with API docs, SDKs, pricing, use cases - OpenAPI 3.0 spec for Orders, Missions, Photos, Analytics - Case study: Glasskiosken i Flatenbadet — complete ROI analysis - Updated /order/ with recurring missions and frequency dropdown
1266 lines
46 KiB
HTML
1266 lines
46 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="sv">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||
<title>Zoomer Onboarding — quiXzoom</title>
|
||
<style>
|
||
/* iOS 26 / Apple Native — Light Mode */
|
||
:root {
|
||
--bg: #f2f2f7;
|
||
--bg-card: #ffffff;
|
||
--separator: rgba(60,60,67,0.18);
|
||
--label: #000000;
|
||
--label-secondary: rgba(60,60,67,0.6);
|
||
--label-tertiary: rgba(60,60,67,0.3);
|
||
--tint: #007AFF;
|
||
--tint-dark: #0056CC;
|
||
--green: #34C759;
|
||
--red: #FF3B30;
|
||
--yellow: #FF9500;
|
||
--purple: #AF52DE;
|
||
--fill: rgba(120,120,128,0.12);
|
||
--fill-secondary: rgba(120,120,128,0.06);
|
||
--radius: 12px;
|
||
--radius-lg: 16px;
|
||
--radius-xl: 22px;
|
||
--font: -apple-system, "SF Pro Display", "Helvetica Neue", sans-serif;
|
||
--font-rounded: -apple-system, "SF Pro Rounded", sans-serif;
|
||
--safe-top: env(safe-area-inset-top, 0px);
|
||
--safe-bottom: env(safe-area-inset-bottom, 0px);
|
||
}
|
||
|
||
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
|
||
|
||
body {
|
||
font-family: var(--font);
|
||
background: var(--bg);
|
||
color: var(--label);
|
||
min-height: 100dvh;
|
||
padding-top: var(--safe-top);
|
||
padding-bottom: var(--safe-bottom);
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* Screen wrapper */
|
||
.screen {
|
||
display: none;
|
||
min-height: 100dvh;
|
||
flex-direction: column;
|
||
}
|
||
.screen.active { display: flex; }
|
||
|
||
/* Slide animation */
|
||
@keyframes slideInRight {
|
||
from { transform: translateX(100%); opacity: 0; }
|
||
to { transform: translateX(0); opacity: 1; }
|
||
}
|
||
@keyframes slideInLeft {
|
||
from { transform: translateX(-60%); opacity: 0; }
|
||
to { transform: translateX(0); opacity: 1; }
|
||
}
|
||
.screen.slide-in-right { animation: slideInRight 0.32s cubic-bezier(0.32,0.72,0,1) forwards; }
|
||
.screen.slide-in-left { animation: slideInLeft 0.32s cubic-bezier(0.32,0.72,0,1) forwards; }
|
||
|
||
/* Nav Bar */
|
||
.nav-bar {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
background: rgba(242,242,247,0.9);
|
||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
||
backdrop-filter: blur(20px) saturate(180%);
|
||
border-bottom: 0.5px solid var(--separator);
|
||
padding: calc(var(--safe-top) + 12px) 20px 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
.nav-back {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
color: var(--tint);
|
||
font-size: 17px;
|
||
font-weight: 400;
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
padding: 4px 0;
|
||
font-family: var(--font);
|
||
}
|
||
.nav-back:active { opacity: 0.6; }
|
||
.nav-back-arrow { font-size: 20px; line-height: 1; }
|
||
.nav-title-center {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 17px;
|
||
font-weight: 600;
|
||
letter-spacing: -0.4px;
|
||
color: var(--label);
|
||
}
|
||
.nav-spacer { width: 60px; }
|
||
|
||
/* Progress Indicator */
|
||
.progress-steps {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
padding: 12px 20px 8px;
|
||
}
|
||
.step-dot {
|
||
height: 4px;
|
||
border-radius: var(--radius-sm);
|
||
background: var(--fill);
|
||
transition: all 0.3s ease;
|
||
}
|
||
.step-dot.active { background: var(--tint); width: 20px; }
|
||
.step-dot.done { background: var(--green); width: 12px; }
|
||
.step-dot.pending { width: 8px; }
|
||
|
||
/* Hero Area */
|
||
.hero {
|
||
padding: 32px 28px 20px;
|
||
text-align: center;
|
||
}
|
||
.hero-icon {
|
||
width: 64px;
|
||
height: 64px;
|
||
margin: 0 auto 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: var(--radius-lg);
|
||
background: linear-gradient(135deg, var(--tint), #5AC8FA);
|
||
color: #fff;
|
||
}
|
||
.hero-icon svg {
|
||
width: 32px;
|
||
height: 32px;
|
||
}
|
||
.hero-title {
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
letter-spacing: -0.5px;
|
||
color: var(--label);
|
||
line-height: 1.2;
|
||
margin-bottom: 8px;
|
||
}
|
||
.hero-sub {
|
||
font-size: 16px;
|
||
color: var(--label-secondary);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* Content Area */
|
||
.content {
|
||
flex: 1;
|
||
padding: 0 16px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/* Card */
|
||
.card {
|
||
background: var(--bg-card);
|
||
border-radius: var(--radius-lg);
|
||
overflow: hidden;
|
||
margin-bottom: 16px;
|
||
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
||
}
|
||
|
||
/* Form fields */
|
||
.field-row {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
padding: 14px 16px;
|
||
border-bottom: 0.5px solid var(--separator);
|
||
}
|
||
.field-row:last-child { border-bottom: none; }
|
||
.field-label {
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
color: var(--label-secondary);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.4px;
|
||
}
|
||
.field-value {
|
||
font-size: 17px;
|
||
color: var(--label);
|
||
background: transparent;
|
||
border: none;
|
||
outline: none;
|
||
font-family: var(--font);
|
||
width: 100%;
|
||
padding: 0;
|
||
caret-color: var(--tint);
|
||
}
|
||
.field-value::placeholder { color: var(--label-tertiary); }
|
||
.field-value::-webkit-date-and-time-value { text-align: left; }
|
||
|
||
/* Toggle row */
|
||
.toggle-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 14px 16px;
|
||
border-bottom: 0.5px solid var(--separator);
|
||
}
|
||
.toggle-row:last-child { border-bottom: none; }
|
||
.toggle-label-group {}
|
||
.toggle-title { font-size: 17px; color: var(--label); }
|
||
.toggle-sub { font-size: 13px; color: var(--label-secondary); margin-top: 2px; }
|
||
.ios-toggle {
|
||
width: 51px;
|
||
height: 31px;
|
||
background: #e5e5ea;
|
||
border-radius: var(--radius-lg);
|
||
position: relative;
|
||
cursor: pointer;
|
||
transition: background 0.25s;
|
||
flex-shrink: 0;
|
||
-webkit-user-select: none;
|
||
user-select: none;
|
||
border: none;
|
||
padding: 0;
|
||
}
|
||
.ios-toggle.on { background: var(--green); }
|
||
.ios-toggle::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 2px; left: 2px;
|
||
width: 27px; height: 27px;
|
||
border-radius: var(--radius-full);
|
||
background: #fff;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.22);
|
||
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
}
|
||
.ios-toggle.on::after { transform: translateX(20px); }
|
||
|
||
/* Info row */
|
||
.info-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
padding: 14px 16px;
|
||
border-bottom: 0.5px solid var(--separator);
|
||
}
|
||
.info-row:last-child { border-bottom: none; }
|
||
.info-icon {
|
||
width: 36px; height: 36px;
|
||
border-radius: var(--radius-md);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 18px;
|
||
flex-shrink: 0;
|
||
}
|
||
.info-body { flex: 1; }
|
||
.info-title { font-size: 15px; font-weight: 500; color: var(--label); }
|
||
.info-sub { font-size: 13px; color: var(--label-secondary); margin-top: 2px; }
|
||
.info-chevron { color: var(--label-tertiary); font-size: 14px; }
|
||
|
||
/* Upload zone */
|
||
.upload-zone {
|
||
border: 2px dashed rgba(0,122,255,0.35);
|
||
border-radius: var(--radius);
|
||
padding: 32px 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8px;
|
||
cursor: pointer;
|
||
margin: 12px 16px;
|
||
background: rgba(0,122,255,0.04);
|
||
transition: all 0.15s;
|
||
}
|
||
.upload-zone:active { background: rgba(0,122,255,0.08); }
|
||
.upload-icon { font-size: 36px; }
|
||
.upload-title { font-size: 15px; font-weight: 600; color: var(--tint); }
|
||
.upload-sub { font-size: 13px; color: var(--label-secondary); }
|
||
|
||
/* Summary list */
|
||
.summary-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 13px 16px;
|
||
border-bottom: 0.5px solid var(--separator);
|
||
}
|
||
.summary-row:last-child { border-bottom: none; }
|
||
.summary-key { font-size: 15px; color: var(--label-secondary); }
|
||
.summary-val { font-size: 15px; font-weight: 500; color: var(--label); }
|
||
|
||
/* Mission card */
|
||
.mission-card {
|
||
background: var(--bg-card);
|
||
border-radius: var(--radius-lg);
|
||
overflow: hidden;
|
||
margin: 0 16px 12px;
|
||
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
||
}
|
||
.mission-header {
|
||
background: linear-gradient(135deg, #007AFF, #5AC8FA);
|
||
padding: 20px 16px;
|
||
color: #fff;
|
||
}
|
||
.mission-type { font-size: 12px; font-weight: 600; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.5px; }
|
||
.mission-title { font-size: 20px; font-weight: 700; letter-spacing: -0.4px; margin-top: 4px; }
|
||
.mission-loc { font-size: 14px; opacity: 0.85; margin-top: 4px; }
|
||
.mission-detail {
|
||
padding: 14px 16px;
|
||
border-bottom: 0.5px solid var(--separator);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.mission-detail:last-child { border-bottom: none; }
|
||
.mission-detail-key { font-size: 14px; color: var(--label-secondary); }
|
||
.mission-detail-val { font-size: 15px; font-weight: 600; color: var(--label); }
|
||
|
||
/* CTA / Primary Button */
|
||
.cta-area {
|
||
padding: 16px 16px calc(var(--safe-bottom) + 24px);
|
||
background: transparent;
|
||
}
|
||
.btn-primary {
|
||
width: 100%;
|
||
background: var(--tint);
|
||
color: #fff;
|
||
font-family: var(--font);
|
||
font-size: 17px;
|
||
font-weight: 600;
|
||
letter-spacing: -0.3px;
|
||
border: none;
|
||
border-radius: var(--radius-xl);
|
||
padding: 16px;
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
-webkit-user-select: none;
|
||
user-select: none;
|
||
}
|
||
.btn-primary:active { transform: scale(0.97); opacity: 0.9; }
|
||
.btn-primary.green { background: var(--green); }
|
||
.btn-primary.red { background: var(--red); }
|
||
|
||
.btn-secondary {
|
||
width: 100%;
|
||
background: transparent;
|
||
color: var(--tint);
|
||
font-family: var(--font);
|
||
font-size: 17px;
|
||
font-weight: 400;
|
||
border: none;
|
||
cursor: pointer;
|
||
padding: 12px 16px;
|
||
margin-top: 4px;
|
||
border-radius: var(--radius-xl);
|
||
transition: opacity 0.15s;
|
||
}
|
||
.btn-secondary:active { opacity: 0.5; }
|
||
|
||
/* BankID specific */
|
||
.bankid-frame {
|
||
margin: 12px 16px;
|
||
background: var(--bg-card);
|
||
border-radius: var(--radius-lg);
|
||
padding: 28px 20px;
|
||
text-align: center;
|
||
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
||
}
|
||
.bankid-logo {
|
||
width: 72px;
|
||
height: 72px;
|
||
background: linear-gradient(135deg, #235971, #4E9CC0);
|
||
border-radius: var(--radius-lg);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 36px;
|
||
margin: 0 auto 16px;
|
||
}
|
||
.bankid-title {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: var(--label);
|
||
margin-bottom: 6px;
|
||
}
|
||
.bankid-sub {
|
||
font-size: 14px;
|
||
color: var(--label-secondary);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* Spinner */
|
||
@keyframes spin { to { transform: rotate(360deg); } }
|
||
.spinner-inline {
|
||
display: inline-block;
|
||
width: 20px; height: 20px;
|
||
border: 2px solid rgba(255,255,255,0.4);
|
||
border-top-color: #fff;
|
||
border-radius: var(--radius-full);
|
||
animation: spin 0.7s linear infinite;
|
||
vertical-align: middle;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
/* Success screen */
|
||
@keyframes successPop {
|
||
0% { transform: scale(0.4); opacity: 0; }
|
||
70% { transform: scale(1.15); }
|
||
100% { transform: scale(1); opacity: 1; }
|
||
}
|
||
.success-icon-wrap {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin: 40px 0 20px;
|
||
}
|
||
.success-circle {
|
||
width: 96px; height: 96px;
|
||
border-radius: var(--radius-full);
|
||
background: var(--green);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 48px;
|
||
color: #fff;
|
||
animation: successPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
||
}
|
||
|
||
/* Equipment chips */
|
||
.chip-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
padding: 14px 16px;
|
||
}
|
||
.equip-chip {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
background: var(--fill);
|
||
border-radius: var(--radius);
|
||
padding: 10px 14px;
|
||
cursor: pointer;
|
||
border: 2px solid transparent;
|
||
transition: all 0.15s;
|
||
-webkit-user-select: none;
|
||
user-select: none;
|
||
}
|
||
.equip-chip.selected {
|
||
background: rgba(0,122,255,0.1);
|
||
border-color: var(--tint);
|
||
}
|
||
.equip-chip:active { opacity: 0.7; }
|
||
.equip-chip-icon { font-size: 22px; }
|
||
.equip-chip-label { font-size: 14px; font-weight: 500; color: var(--label); }
|
||
|
||
/* Section label */
|
||
.form-section-title {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.6px;
|
||
color: var(--label-secondary);
|
||
padding: 20px 20px 8px;
|
||
}
|
||
@media (max-width: 640px) {
|
||
.hero h1 { font-size: 2rem !important; }
|
||
.hero p { font-size: 1rem !important; }
|
||
.card { padding: 1.5rem !important; }
|
||
.grid { grid-template-columns: 1fr !important; }
|
||
.btn { padding: 0.75rem 1.5rem !important; font-size: 1rem !important; }
|
||
}
|
||
/* 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: 10px;
|
||
}
|
||
|
||
* { 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 24px; height: 56px;
|
||
background: rgba(255,255,255,0.92);
|
||
backdrop-filter: blur(16px);
|
||
border-bottom: 1px solid var(--qz-border);
|
||
}
|
||
|
||
.qz-nav-logo { font-size: 18px; font-weight: 700; color: #fff; text-decoration: none; }
|
||
.qz-nav-links { display: flex; gap: 24px; list-style: none; }
|
||
.qz-nav-links a { font-size: 14px; color: var(--qz-text-dim); text-decoration: none; transition: color 0.2s; }
|
||
.qz-nav-links a:hover { color: #fff; }
|
||
|
||
/* Buttons */
|
||
.qz-btn {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
padding: 12px 24px; border-radius: var(--qz-radius);
|
||
font-size: 15px; font-weight: 600; text-decoration: none;
|
||
transition: all 0.2s; cursor: pointer; border: none;
|
||
}
|
||
|
||
.qz-btn-primary {
|
||
background: var(--qz-blue); color: #fff;
|
||
}
|
||
.qz-btn-primary:hover {
|
||
background: var(--qz-blue-dark); transform: translateY(-1px);
|
||
}
|
||
|
||
.qz-btn-ghost {
|
||
background: transparent; color: var(--qz-text);
|
||
border: 1px 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: 1px solid var(--qz-border);
|
||
border-radius: var(--qz-radius);
|
||
padding: 24px;
|
||
transition: transform 0.2s, border-color 0.2s;
|
||
}
|
||
.qz-card:hover {
|
||
transform: translateY(-2px);
|
||
border-color: rgba(0,122,255,0.3);
|
||
}
|
||
|
||
/* Footer */
|
||
.qz-footer {
|
||
border-top: 1px solid var(--qz-border);
|
||
padding: 40px 24px;
|
||
text-align: center;
|
||
color: var(--qz-text-dim);
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* Banner */
|
||
.qz-banner {
|
||
background: #001E50;
|
||
color: rgba(255,255,255,0.55);
|
||
text-align: center;
|
||
padding: 10px;
|
||
font-size: 12px;
|
||
}
|
||
.qz-banner a { color: rgba(255,255,255,0.8); text-decoration: none; }
|
||
|
||
@media (max-width: 768px) {
|
||
.qz-nav-links { display: none; }
|
||
}
|
||
</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: 2rem !important; }
|
||
.hero p { font-size: 1rem !important; }
|
||
.card { padding: 1.5rem !important; }
|
||
.grid { grid-template-columns: 1fr !important; }
|
||
.btn { padding: 0.75rem 1.5rem !important; font-size: 1rem !important; }
|
||
}
|
||
/* 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: 10px;
|
||
}
|
||
|
||
* { 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 24px; height: 56px;
|
||
background: rgba(255,255,255,0.92);
|
||
backdrop-filter: blur(16px);
|
||
border-bottom: 1px solid var(--qz-border);
|
||
}
|
||
|
||
.qz-nav-logo { font-size: 18px; font-weight: 700; color: #fff; text-decoration: none; }
|
||
.qz-nav-links { display: flex; gap: 24px; list-style: none; }
|
||
.qz-nav-links a { font-size: 14px; color: var(--qz-text-dim); text-decoration: none; transition: color 0.2s; }
|
||
.qz-nav-links a:hover { color: #fff; }
|
||
|
||
/* Buttons */
|
||
.qz-btn {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
padding: 12px 24px; border-radius: var(--qz-radius);
|
||
font-size: 15px; font-weight: 600; text-decoration: none;
|
||
transition: all 0.2s; cursor: pointer; border: none;
|
||
}
|
||
|
||
.qz-btn-primary {
|
||
background: var(--qz-blue); color: #fff;
|
||
}
|
||
.qz-btn-primary:hover {
|
||
background: var(--qz-blue-dark); transform: translateY(-1px);
|
||
}
|
||
|
||
.qz-btn-ghost {
|
||
background: transparent; color: var(--qz-text);
|
||
border: 1px 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: 1px solid var(--qz-border);
|
||
border-radius: var(--qz-radius);
|
||
padding: 24px;
|
||
transition: transform 0.2s, border-color 0.2s;
|
||
}
|
||
.qz-card:hover {
|
||
transform: translateY(-2px);
|
||
border-color: rgba(0,122,255,0.3);
|
||
}
|
||
|
||
/* Footer */
|
||
.qz-footer {
|
||
border-top: 1px solid var(--qz-border);
|
||
padding: 40px 24px;
|
||
text-align: center;
|
||
color: var(--qz-text-dim);
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* Banner */
|
||
.qz-banner {
|
||
background: #001E50;
|
||
color: rgba(255,255,255,0.55);
|
||
text-align: center;
|
||
padding: 10px;
|
||
font-size: 12px;
|
||
}
|
||
.qz-banner a { color: rgba(255,255,255,0.8); text-decoration: none; }
|
||
|
||
@media (max-width: 768px) {
|
||
.qz-nav-links { display: none; }
|
||
}
|
||
</style>
|
||
<script src="i18n.js"></script>
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:title" content="Zoomer Onboarding — quiXzoom">
|
||
<meta property="og:description" content="quiXzoom — Earn per Mission. No Platform Fee.">
|
||
<meta property="og:url" content="https://www.quixzoom.com/zoomer-onboarding-flow.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 Zoomer onboarding — how to get started">
|
||
<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="Zoomer Onboarding — quiXzoom">
|
||
<script type="module" src="https://auth.quixzoom.com/site-auth-snippet.js"></script>
|
||
<link rel="alternate" hreflang="en" href="https://www.quixzoom.com/" />
|
||
<link rel="alternate" hreflang="sv" href="https://www.quixzoom.com/sv/" />
|
||
<link rel="alternate" hreflang="de" href="https://www.quixzoom.com/de/" />
|
||
<link rel="alternate" hreflang="fr" href="https://www.quixzoom.com/fr/" />
|
||
<link rel="alternate" hreflang="es" href="https://www.quixzoom.com/es/" />
|
||
<link rel="alternate" hreflang="it" href="https://www.quixzoom.com/it/" />
|
||
<link rel="alternate" hreflang="nl" href="https://www.quixzoom.com/nl/" />
|
||
<link rel="alternate" hreflang="x-default" href="https://www.quixzoom.com/" />
|
||
</head>
|
||
<body>
|
||
<h1 style="position:absolute;left:-9999px;">Zoomer Onboarding Flow</h1>
|
||
|
||
<!-- -->
|
||
<!-- SCREEN 1: Welcome -->
|
||
<div class="screen active" id="screen-1">
|
||
<div class="hero" style="padding-top: calc(var(--safe-top) + 48px)">
|
||
<div class="hero-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
||
</div>
|
||
<div class="hero-title">Become a Zoomer</div>
|
||
<div class="hero-sub">Earn money with your photography skills. Accept missions, deliver results, get paid fast.</div>
|
||
</div>
|
||
|
||
<div class="content">
|
||
<div class="card">
|
||
<div class="info-row">
|
||
<div class="info-icon" style="background:#007AFF22">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#007AFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
|
||
</div>
|
||
<div class="info-body">
|
||
<div class="info-title">Photograph missions</div>
|
||
<div class="info-sub">Shops, products, events in your city</div>
|
||
</div>
|
||
<span class="info-chevron">›</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<div class="info-icon" style="background:#34C75922">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#34C759" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
||
</div>
|
||
<div class="info-body">
|
||
<div class="info-title">Fast payout</div>
|
||
<div class="info-sub">Direct to your account via Stripe Connect</div>
|
||
</div>
|
||
<span class="info-chevron">›</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<div class="info-icon" style="background:#FF950022">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FF9500" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10z"/></svg>
|
||
</div>
|
||
<div class="info-body">
|
||
<div class="info-title">Your choice</div>
|
||
<div class="info-sub">Only accept missions that suit you</div>
|
||
</div>
|
||
<span class="info-chevron">›</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cta-area">
|
||
<button class="btn-primary" onclick="goTo(2)">Get started →</button>
|
||
<button class="btn-secondary" onclick="goTo(2)">I already have an account</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- -->
|
||
<!-- SCREEN 2: BankID Verification -->
|
||
<div class="screen" id="screen-2">
|
||
<div class="nav-bar">
|
||
<button class="nav-back" onclick="goBack(1)"><span class="nav-back-arrow">‹</span> Back</button>
|
||
<div class="nav-title-center">Identity</div>
|
||
<div class="nav-spacer"></div>
|
||
</div>
|
||
<div class="progress-steps" id="steps-2"></div>
|
||
|
||
<div class="content">
|
||
<div class="hero" style="padding-top:20px">
|
||
<div class="hero-icon" style="background: linear-gradient(135deg, #235971, #4E9CC0);">
|
||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
|
||
</div>
|
||
<div class="hero-title">Verify with BankID</div>
|
||
<div class="hero-sub">We need to verify your identity so you can receive payments.</div>
|
||
</div>
|
||
|
||
<div class="bankid-frame">
|
||
<div class="bankid-logo">
|
||
<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
|
||
</div>
|
||
<div class="bankid-title">Open the BankID app</div>
|
||
<div class="bankid-sub">Tap the button below to start BankID sign-in on this device.</div>
|
||
</div>
|
||
|
||
<div class="form-section-title">Your personal ID number</div>
|
||
<div class="card">
|
||
<div class="field-row">
|
||
<div class="field-label">Personal ID number</div>
|
||
<input class="field-value" type="tel" placeholder="YYYYMMDD-XXXX" maxlength="13" id="ssn-input" inputmode="numeric">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cta-area">
|
||
<button class="btn-primary" id="bankid-btn" onclick="startBankID()">Open BankID</button>
|
||
<button class="btn-secondary" onclick="goTo(3)">Simulate approved (demo)</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- -->
|
||
<!-- SCREEN 3: Profile Setup -->
|
||
<div class="screen" id="screen-3">
|
||
<div class="nav-bar">
|
||
<button class="nav-back" onclick="goBack(2)"><span class="nav-back-arrow">‹</span> Back</button>
|
||
<div class="nav-title-center">Your profile</div>
|
||
<div class="nav-spacer"></div>
|
||
</div>
|
||
<div class="progress-steps" id="steps-3"></div>
|
||
|
||
<div class="content">
|
||
<div class="hero" style="padding-top:20px">
|
||
<div class="hero-icon" style="background: linear-gradient(135deg, #AF52DE, #5856D6);">
|
||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||
</div>
|
||
<div class="hero-title">Tell us about yourself</div>
|
||
<div class="hero-sub">Clients see your profile when choosing a Zoomer for their missions.</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="field-row">
|
||
<div class="field-label">First name</div>
|
||
<input class="field-value" type="text" placeholder="Alex" id="fname">
|
||
</div>
|
||
<div class="field-row">
|
||
<div class="field-label">Last name</div>
|
||
<input class="field-value" type="text" placeholder="Smith" id="lname">
|
||
</div>
|
||
<div class="field-row">
|
||
<div class="field-label">Email address</div>
|
||
<input class="field-value" type="email" placeholder="alex@example.com" id="email">
|
||
</div>
|
||
<div class="field-row">
|
||
<div class="field-label">Mobile number</div>
|
||
<input class="field-value" type="tel" placeholder="+46 70 123 45 67" id="phone">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-section-title">About you</div>
|
||
<div class="card">
|
||
<div class="field-row">
|
||
<div class="field-label">Bio (optional)</div>
|
||
<input class="field-value" type="text" placeholder="Experienced photographer with a passion for urban environments…" id="bio">
|
||
</div>
|
||
<div class="field-row">
|
||
<div class="field-label">City</div>
|
||
<input class="field-value" type="text" placeholder="Stockholm" id="city">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cta-area">
|
||
<button class="btn-primary" onclick="goTo(4)">Continue →</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- -->
|
||
<!-- SCREEN 4: Equipment Declaration -->
|
||
<div class="screen" id="screen-4">
|
||
<div class="nav-bar">
|
||
<button class="nav-back" onclick="goBack(3)"><span class="nav-back-arrow">‹</span> Back</button>
|
||
<div class="nav-title-center">Your equipment</div>
|
||
<div class="nav-spacer"></div>
|
||
</div>
|
||
<div class="progress-steps" id="steps-4"></div>
|
||
|
||
<div class="content">
|
||
<div class="hero" style="padding-top:20px">
|
||
<div class="hero-icon" style="background: linear-gradient(135deg, #FF9500, #FFCC00);">
|
||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
|
||
</div>
|
||
<div class="hero-title">What equipment do you have?</div>
|
||
<div class="hero-sub">Select all equipment you can use on missions. More options means more missions.</div>
|
||
</div>
|
||
|
||
<div class="form-section-title">Camera</div>
|
||
<div class="card">
|
||
<div class="chip-grid">
|
||
<div class="equip-chip selected" onclick="toggleChip(this)">
|
||
<span class="equip-chip-icon">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
|
||
</span>
|
||
<span class="equip-chip-label">Smartphone</span>
|
||
</div>
|
||
<div class="equip-chip" onclick="toggleChip(this)">
|
||
<span class="equip-chip-icon">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
|
||
</span>
|
||
<span class="equip-chip-label">Mirrorless</span>
|
||
</div>
|
||
<div class="equip-chip" onclick="toggleChip(this)">
|
||
<span class="equip-chip-icon">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
|
||
</span>
|
||
<span class="equip-chip-label">DSLR</span>
|
||
</div>
|
||
<div class="equip-chip" onclick="toggleChip(this)">
|
||
<span class="equip-chip-icon">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
||
</span>
|
||
<span class="equip-chip-label">Drone</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-section-title">Accessories</div>
|
||
<div class="card">
|
||
<div class="chip-grid">
|
||
<div class="equip-chip" onclick="toggleChip(this)">
|
||
<span class="equip-chip-icon">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
|
||
</span>
|
||
<span class="equip-chip-label">Flash</span>
|
||
</div>
|
||
<div class="equip-chip" onclick="toggleChip(this)">
|
||
<span class="equip-chip-icon">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2"/><path d="M12 21v2"/><path d="M4.22 4.22l1.42 1.42"/><path d="M18.36 18.36l1.42 1.42"/><path d="M1 12h2"/><path d="M21 12h2"/><path d="M4.22 19.78l1.42-1.42"/><path d="M18.36 5.64l1.42-1.42"/></svg>
|
||
</span>
|
||
<span class="equip-chip-label">Lighting</span>
|
||
</div>
|
||
<div class="equip-chip" onclick="toggleChip(this)">
|
||
<span class="equip-chip-icon">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
||
</span>
|
||
<span class="equip-chip-label">Tripod</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-section-title">Settings</div>
|
||
<div class="card">
|
||
<div class="toggle-row">
|
||
<div class="toggle-label-group">
|
||
<div class="toggle-title">Available now</div>
|
||
<div class="toggle-sub">Show that you can take missions immediately</div>
|
||
</div>
|
||
<button class="ios-toggle on" onclick="this.classList.toggle('on')"></button>
|
||
</div>
|
||
<div class="toggle-row">
|
||
<div class="toggle-label-group">
|
||
<div class="toggle-title">Push notifications</div>
|
||
<div class="toggle-sub">Get notified about new missions nearby</div>
|
||
</div>
|
||
<button class="ios-toggle on" onclick="this.classList.toggle('on')"></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cta-area">
|
||
<button class="btn-primary" onclick="goTo(5)">Continue →</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- -->
|
||
<!-- SCREEN 5: KYC Document Upload -->
|
||
<div class="screen" id="screen-5">
|
||
<div class="nav-bar">
|
||
<button class="nav-back" onclick="goBack(4)"><span class="nav-back-arrow">‹</span> Back</button>
|
||
<div class="nav-title-center">ID verification</div>
|
||
<div class="nav-spacer"></div>
|
||
</div>
|
||
<div class="progress-steps" id="steps-5"></div>
|
||
|
||
<div class="content">
|
||
<div class="hero" style="padding-top:20px">
|
||
<div class="hero-icon" style="background: linear-gradient(135deg, #34C759, #30D158);">
|
||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
|
||
</div>
|
||
<div class="hero-title">Upload ID document</div>
|
||
<div class="hero-sub">Required by law to verify your identity and enable payouts.</div>
|
||
</div>
|
||
|
||
<div class="form-section-title">Accepted documents</div>
|
||
<div class="card">
|
||
<div class="info-row" onclick="markDoc('passport', this)" style="cursor:pointer">
|
||
<div class="info-icon" style="background:#007AFF22" id="doc-passport-icon">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#007AFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
|
||
</div>
|
||
<div class="info-body">
|
||
<div class="info-title">Passport</div>
|
||
<div class="info-sub">Valid passport with photo page</div>
|
||
</div>
|
||
<span class="info-chevron" id="doc-passport-check">›</span>
|
||
</div>
|
||
<div class="info-row" onclick="markDoc('id', this)" style="cursor:pointer">
|
||
<div class="info-icon" style="background:#AF52DE22" id="doc-id-icon">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#AF52DE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
|
||
</div>
|
||
<div class="info-body">
|
||
<div class="info-title">National ID card</div>
|
||
<div class="info-sub">Front and back</div>
|
||
</div>
|
||
<span class="info-chevron" id="doc-id-check">›</span>
|
||
</div>
|
||
<div class="info-row" onclick="markDoc('license', this)" style="cursor:pointer">
|
||
<div class="info-icon" style="background:#34C75922" id="doc-license-icon">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#34C759" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
|
||
</div>
|
||
<div class="info-body">
|
||
<div class="info-title">Driving licence</div>
|
||
<div class="info-sub">Valid driving licence</div>
|
||
</div>
|
||
<span class="info-chevron" id="doc-license-check">›</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="upload-zone" onclick="simulateUpload()">
|
||
<span class="upload-icon" id="upload-icon">
|
||
<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#007AFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
|
||
</span>
|
||
<span class="upload-title" id="upload-title">Choose file or take photo</span>
|
||
<span class="upload-sub" id="upload-sub">JPG, PNG or PDF · Max 10 MB</span>
|
||
</div>
|
||
|
||
<div class="form-section-title">Bank details</div>
|
||
<div class="card">
|
||
<div class="field-row">
|
||
<div class="field-label">Stripe Connect</div>
|
||
<input class="field-value" type="tel" placeholder="3300" inputmode="numeric">
|
||
</div>
|
||
<div class="field-row">
|
||
<div class="field-label">Account number</div>
|
||
<input class="field-value" type="tel" placeholder="123456789" inputmode="numeric">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cta-area">
|
||
<button class="btn-primary" onclick="goTo(6)">Submit →</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- -->
|
||
<!-- SCREEN 6: First Mission -->
|
||
<div class="screen" id="screen-6">
|
||
<div class="nav-bar">
|
||
<button class="nav-back" onclick="goBack(5)"><span class="nav-back-arrow">‹</span> Back</button>
|
||
<div class="nav-title-center">Your first mission</div>
|
||
<div class="nav-spacer"></div>
|
||
</div>
|
||
<div class="progress-steps" id="steps-6"></div>
|
||
|
||
<div class="content" style="padding:0">
|
||
<div class="hero" style="padding-top:20px">
|
||
<div class="hero-icon" style="background: linear-gradient(135deg, #FF3B30, #FF6B6B);">
|
||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>
|
||
</div>
|
||
<div class="hero-title">Ready for your first mission?</div>
|
||
<div class="hero-sub">We found a mission near you!</div>
|
||
</div>
|
||
|
||
<div class="mission-card">
|
||
<div class="mission-header">
|
||
<div class="mission-type">Store photography</div>
|
||
<div class="mission-title">H&M Flagship — Stockholm</div>
|
||
<div class="mission-loc">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:middle;margin-right:4px"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||
Drottninggatan 55, Stockholm · 1.2 km away
|
||
</div>
|
||
</div>
|
||
<div class="mission-detail">
|
||
<span class="mission-detail-key">Compensation</span>
|
||
<span class="mission-detail-val" style="color:var(--green)">380 kr</span>
|
||
</div>
|
||
<div class="mission-detail">
|
||
<span class="mission-detail-key">Time</span>
|
||
<span class="mission-detail-val">45–60 min</span>
|
||
</div>
|
||
<div class="mission-detail">
|
||
<span class="mission-detail-key">Number of photos</span>
|
||
<span class="mission-detail-val">12 photos</span>
|
||
</div>
|
||
<div class="mission-detail">
|
||
<span class="mission-detail-key">Deadline</span>
|
||
<span class="mission-detail-val">Today 18:00</span>
|
||
</div>
|
||
<div class="mission-detail">
|
||
<span class="mission-detail-key">Requirements</span>
|
||
<span class="mission-detail-val">Smartphone OK</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="padding: 0 16px 4px">
|
||
<div class="card">
|
||
<div class="summary-row">
|
||
<span class="summary-key">Client</span>
|
||
<span class="summary-val">H&M Sverige AB</span>
|
||
</div>
|
||
<div class="summary-row">
|
||
<span class="summary-key">Rating</span>
|
||
<span class="summary-val">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="#FF9500" stroke="#FF9500" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:middle;margin-right:4px"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
||
4.9 (47 missions)
|
||
</span>
|
||
</div>
|
||
<div class="summary-row">
|
||
<span class="summary-key">Payout</span>
|
||
<span class="summary-val">Within 24h of approval</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cta-area">
|
||
<button class="btn-primary green" onclick="goTo(7)">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:middle;margin-right:6px"><polyline points="20 6 9 17 4 12"/></svg>
|
||
Accept mission
|
||
</button>
|
||
<button class="btn-secondary" onclick="goTo(7)">View more missions</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- -->
|
||
<!-- SCREEN 7: Success -->
|
||
<div class="screen" id="screen-7">
|
||
<div class="nav-bar" style="justify-content:center">
|
||
<div class="nav-title-center" style="color:var(--green)">Welcome!</div>
|
||
</div>
|
||
|
||
<div class="content" style="display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:0">
|
||
<div class="success-icon-wrap">
|
||
<div class="success-circle">
|
||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="padding:0 28px 20px">
|
||
<div class="hero-title" style="margin-bottom:8px">You are now a Zoomer!</div>
|
||
<div class="hero-sub">Mission accepted. Head to the location and photograph according to the instructions.</div>
|
||
</div>
|
||
|
||
<div style="width:100%; padding:0 16px">
|
||
<div class="card">
|
||
<div class="summary-row">
|
||
<span class="summary-key">Status</span>
|
||
<span class="summary-val" style="color:var(--green);display:flex;align-items:center;gap:6px">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#34C759" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
Active Zoomer
|
||
</span>
|
||
</div>
|
||
<div class="summary-row">
|
||
<span class="summary-key">BankID</span>
|
||
<span class="summary-val" style="color:var(--green);display:flex;align-items:center;gap:6px">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#34C759" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
Verified
|
||
</span>
|
||
</div>
|
||
<div class="summary-row">
|
||
<span class="summary-key">KYC</span>
|
||
<span class="summary-val" style="color:var(--yellow);display:flex;align-items:center;gap:6px">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FF9500" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||
Review in progress
|
||
</span>
|
||
</div>
|
||
<div class="summary-row">
|
||
<span class="summary-key">First mission</span>
|
||
<span class="summary-val">H&M Stockholm</span>
|
||
</div>
|
||
<div class="summary-row">
|
||
<span class="summary-key">Expected earnings</span>
|
||
<span class="summary-val" style="color:var(--green)">380 kr</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="padding:24px 28px 0; color:var(--label-secondary); font-size:14px; line-height:1.6">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:middle;margin-right:4px"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
|
||
You will receive a confirmation email. Open the quiXzoom app to see details about your mission.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cta-area">
|
||
<button class="btn-primary" onclick="goTo(1)">Open the app →</button>
|
||
<button class="btn-secondary" onclick="goTo(1)">Restart demo</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// State
|
||
const TOTAL_STEPS = 6; // screens 2-7
|
||
let currentScreen = 1;
|
||
let bankIDTimer = null;
|
||
|
||
// Navigation
|
||
function goTo(n, direction = 'right') {
|
||
const curr = document.getElementById(`screen-${currentScreen}`);
|
||
const next = document.getElementById(`screen-${n}`);
|
||
if (!next) return;
|
||
|
||
curr.classList.remove('active', 'slide-in-right', 'slide-in-left');
|
||
curr.style.display = 'none';
|
||
|
||
next.style.display = 'flex';
|
||
next.classList.add('active', direction === 'right' ? 'slide-in-right' : 'slide-in-left');
|
||
currentScreen = n;
|
||
|
||
renderSteps(n);
|
||
window.scrollTo(0, 0);
|
||
}
|
||
|
||
function goBack(n) {
|
||
goTo(n, 'left');
|
||
}
|
||
|
||
// Step dots
|
||
function renderSteps(screenN) {
|
||
if (screenN < 2) return;
|
||
const step = screenN - 1; // step 1..6
|
||
const el = document.getElementById(`steps-${screenN}`);
|
||
if (!el) return;
|
||
el.innerHTML = Array.from({length: TOTAL_STEPS}, (_, i) => {
|
||
const s = i + 1;
|
||
const cls = s < step ? 'done' : s === step ? 'active' : 'pending';
|
||
return `<div class="step-dot ${cls}"></div>`;
|
||
}).join('');
|
||
}
|
||
|
||
// BankID simulation
|
||
function startBankID() {
|
||
const btn = document.getElementById('bankid-btn');
|
||
btn.innerHTML = '<span class="spinner-inline"></span>Waiting for BankID…';
|
||
btn.disabled = true;
|
||
btn.style.opacity = '0.7';
|
||
clearTimeout(bankIDTimer);
|
||
bankIDTimer = setTimeout(() => {
|
||
btn.innerHTML = 'Open BankID';
|
||
btn.disabled = false;
|
||
btn.style.opacity = '1';
|
||
goTo(3);
|
||
}, 2500);
|
||
}
|
||
|
||
// Equipment chip toggle
|
||
function toggleChip(el) {
|
||
el.classList.toggle('selected');
|
||
}
|
||
|
||
// Document selection
|
||
let selectedDoc = null;
|
||
function markDoc(type, row) {
|
||
['passport','id','license'].forEach(t => {
|
||
document.getElementById(`doc-${t}-check`).textContent = '›';
|
||
});
|
||
selectedDoc = type;
|
||
document.getElementById(`doc-${type}-check`).textContent = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8L6.5 11.5L13 4.5" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
|
||
}
|
||
|
||
// Upload simulation
|
||
function simulateUpload() {
|
||
const icon = document.getElementById('upload-icon');
|
||
const title = document.getElementById('upload-title');
|
||
const sub = document.getElementById('upload-sub');
|
||
icon.textContent = '<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>';
|
||
title.textContent = 'File uploaded';
|
||
sub.textContent = 'id_dokument.jpg · 2.4 MB';
|
||
}
|
||
|
||
// Init
|
||
renderSteps(1);
|
||
</script>
|
||
</body>
|
||
</html>
|