Bernt
aee0f09db8
- Datafabrik: Dockerfile fix, agentorkestrering fungerar - Vision: Identify-modell, FAISS, OCR alla testade - API: Alla 7 integrationstester passerade - Upplösare: Entitetsupplösning verifierad
991 lines
39 KiB
HTML
991 lines
39 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: 2px;
|
||
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-emoji {
|
||
font-size: 64px;
|
||
line-height: 1;
|
||
margin-bottom: 16px;
|
||
display: block;
|
||
}
|
||
.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: 16px;
|
||
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: 50%;
|
||
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: 10px;
|
||
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: 18px;
|
||
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: 50%;
|
||
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: 50%;
|
||
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; }
|
||
}
|
||
</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; }
|
||
}
|
||
</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">
|
||
</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)">
|
||
<span class="hero-emoji">⚡</span>
|
||
<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">📸</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">💰</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">🗺️</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">
|
||
<span class="hero-emoji">🏦</span>
|
||
<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">🔐</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">
|
||
<span class="hero-emoji">👤</span>
|
||
<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">
|
||
<span class="hero-emoji">📷</span>
|
||
<div class="hero-title">What equipment do you have?</div>
|
||
<div class="hero-sub">Select all equipment you can use on missions. More options → 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">📱</span>
|
||
<span class="equip-chip-label">Smartphone</span>
|
||
</div>
|
||
<div class="equip-chip" onclick="toggleChip(this)">
|
||
<span class="equip-chip-icon">📸</span>
|
||
<span class="equip-chip-label">Mirrorless</span>
|
||
</div>
|
||
<div class="equip-chip" onclick="toggleChip(this)">
|
||
<span class="equip-chip-icon">🎥</span>
|
||
<span class="equip-chip-label">DSLR</span>
|
||
</div>
|
||
<div class="equip-chip" onclick="toggleChip(this)">
|
||
<span class="equip-chip-icon">🚁</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">🕯️</span>
|
||
<span class="equip-chip-label">Flash</span>
|
||
</div>
|
||
<div class="equip-chip" onclick="toggleChip(this)">
|
||
<span class="equip-chip-icon">🔦</span>
|
||
<span class="equip-chip-label">Lighting</span>
|
||
</div>
|
||
<div class="equip-chip" onclick="toggleChip(this)">
|
||
<span class="equip-chip-icon">📐</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">
|
||
<span class="hero-emoji">🪪</span>
|
||
<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">📘</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">🪪</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">🚗</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">📎</span>
|
||
<span class="upload-title" id="upload-title">Choose file or take photo</span>
|
||
<span class="upload-sub" id="upload-sub">JPG, PNG eller 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">
|
||
<span class="hero-emoji">🎯</span>
|
||
<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">📍 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">⭐ 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)">✓ 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">✓</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)">✓ Active Zoomer</span>
|
||
</div>
|
||
<div class="summary-row">
|
||
<span class="summary-key">BankID</span>
|
||
<span class="summary-val" style="color:var(--green)">✓ Verifierad</span>
|
||
</div>
|
||
<div class="summary-row">
|
||
<span class="summary-key">KYC</span>
|
||
<span class="summary-val" style="color:var(--yellow)">⏳ 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">
|
||
📲 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 = '✓';
|
||
}
|
||
|
||
// ── Upload simulation ──────────────────────────────────────────────────
|
||
function simulateUpload() {
|
||
const icon = document.getElementById('upload-icon');
|
||
const title = document.getElementById('upload-title');
|
||
const sub = document.getElementById('upload-sub');
|
||
icon.textContent = '✅';
|
||
title.textContent = 'File uploaded';
|
||
sub.textContent = 'id_dokument.jpg · 2.4 MB';
|
||
}
|
||
|
||
// ── Init ──────────────────────────────────────────────────────────────
|
||
renderSteps(1);
|
||
</script>
|
||
</body>
|
||
</html>
|