Bernt
6989a98d75
- Arkitektur: docs/auth/passwordless-architecture.md - Backend: iom/quixzoom-auth-service/ (FastAPI + Redis) - Webb: quixzoom-market-pages/se/login/ (QR-kod + polling) - App: iom/quixzoom-app/src/features/auth/ (push + deep links) Flöde: QR-kod → app-godkännande → webb-inloggad
671 lines
32 KiB
HTML
671 lines
32 KiB
HTML
<!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: 100dvh;
|
||
padding-top: env(safe-area-inset-top, 44px);
|
||
padding-bottom: calc(env(safe-area-inset-bottom, 34px) + 40px);
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
.nav-bar {
|
||
position: sticky; top: 0; z-index: 200;
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
height: 44px; padding: 0 16px;
|
||
background: var(--navbar-bg);
|
||
backdrop-filter: saturate(180%) blur(20px);
|
||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||
border-bottom: 0.5px solid var(--separator);
|
||
}
|
||
.nav-title { font-size: 17px; font-weight: 600; letter-spacing: -0.41px; }
|
||
.nav-badge {
|
||
font-size: 12px; font-weight: 600; padding: 4px 10px;
|
||
background: rgba(10,132,255,0.15); color: var(--ios-blue);
|
||
border-radius: var(--radius-xl);
|
||
}
|
||
|
||
/* Hero */
|
||
.hero {
|
||
padding: 28px 20px 24px;
|
||
text-align: center;
|
||
background: linear-gradient(180deg, rgba(10,132,255,0.08) 0%, transparent 100%);
|
||
}
|
||
.hero-icon { font-size: 64px; margin-bottom: 12px; line-height: 1; }
|
||
.hero-title {
|
||
font-family: var(--font-display);
|
||
font-size: 28px; font-weight: 800; letter-spacing: -0.5px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.hero-sub { font-size: 15px; color: var(--label-secondary); line-height: 1.5; }
|
||
|
||
/* Progress overview */
|
||
.progress-overview {
|
||
margin: 0 16px 20px;
|
||
background: var(--background-secondary);
|
||
border-radius: var(--radius-lg); overflow: hidden;
|
||
border: 0.5px solid var(--separator);
|
||
padding: 16px;
|
||
}
|
||
.progress-label {
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
.progress-label-text { font-size: 14px; color: var(--label-secondary); }
|
||
.progress-label-count { font-size: 14px; font-weight: 700; color: var(--ios-blue); }
|
||
.progress-track {
|
||
height: 8px; background: var(--fill-secondary); border-radius: var(--radius-sm); overflow: hidden;
|
||
}
|
||
.progress-fill {
|
||
height: 100%; border-radius: var(--radius-sm);
|
||
background: linear-gradient(90deg, var(--ios-blue), var(--ios-indigo));
|
||
transition: width 0.8s cubic-bezier(0.34,1.56,0.64,1);
|
||
}
|
||
.progress-chips {
|
||
display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap;
|
||
}
|
||
.progress-chip {
|
||
font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: var(--radius-md);
|
||
}
|
||
.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 16px 28px; }
|
||
.section-header {
|
||
font-size: 13px; font-weight: 600; color: var(--label-secondary);
|
||
text-transform: uppercase; letter-spacing: 0.5px;
|
||
padding: 0 4px 10px;
|
||
}
|
||
|
||
/* Steps */
|
||
.steps-list { display: flex; flex-direction: column; gap: 0; }
|
||
.step-card {
|
||
background: var(--background-secondary);
|
||
border-radius: 0; overflow: hidden;
|
||
border: 0.5px solid var(--separator);
|
||
margin-bottom: -0.5px;
|
||
}
|
||
.step-card:first-child { border-radius: var(--radius-lg) 14px 0 0; }
|
||
.step-card:last-child { border-radius: 0 0 14px 14px; margin-bottom: 0; }
|
||
.step-card:only-child { border-radius: var(--radius-lg); }
|
||
|
||
.step-header {
|
||
display: flex; align-items: center; gap: 14px;
|
||
padding: 16px; cursor: pointer;
|
||
}
|
||
.step-number {
|
||
width: 32px; height: 32px; border-radius: var(--radius-full);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 14px; 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: 16px; font-weight: 600; }
|
||
.step-desc { font-size: 13px; color: var(--label-secondary); margin-top: 2px; }
|
||
.step-check { font-size: 18px; }
|
||
|
||
.step-body {
|
||
padding: 0 16px 16px 62px;
|
||
font-size: 14px; color: var(--label-secondary);
|
||
line-height: 1.6;
|
||
display: none;
|
||
}
|
||
.step-body.open { display: block; }
|
||
|
||
.step-detail-row {
|
||
display: flex; gap: 8px; margin-bottom: 8px; align-items: flex-start;
|
||
}
|
||
.step-detail-dot { margin-top: 5px; width: 5px; height: 5px; border-radius: var(--radius-full); background: var(--ios-blue); flex-shrink: 0; }
|
||
.step-detail-text { flex: 1; color: var(--label-primary); }
|
||
.step-code {
|
||
font-family: var(--font-mono); font-size: 13px;
|
||
background: var(--fill-secondary); padding: 2px 7px; border-radius: var(--radius-sm);
|
||
color: var(--ios-teal);
|
||
}
|
||
|
||
.step-cta {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
margin-top: 10px; padding: 9px 16px; border-radius: var(--radius-md);
|
||
background: rgba(10,132,255,0.12); color: var(--ios-blue);
|
||
font-size: 14px; font-weight: 600; text-decoration: none;
|
||
transition: opacity 0.12s;
|
||
}
|
||
.step-cta:active { opacity: 0.7; }
|
||
|
||
/* Legal checklist */
|
||
.legal-card {
|
||
background: var(--background-secondary);
|
||
border-radius: var(--radius-lg); overflow: hidden;
|
||
border: 0.5px solid var(--separator);
|
||
}
|
||
.legal-row {
|
||
display: flex; align-items: center; gap: 14px;
|
||
padding: 13px 16px;
|
||
border-bottom: 0.5px solid var(--separator);
|
||
}
|
||
.legal-row:last-child { border-bottom: none; }
|
||
.legal-icon { font-size: 20px; }
|
||
.legal-info { flex: 1; }
|
||
.legal-title { font-size: 15px; font-weight: 500; }
|
||
.legal-sub { font-size: 12px; color: var(--label-secondary); margin-top: 2px; }
|
||
.legal-status { font-size: 16px; }
|
||
|
||
/* Screenshot guide */
|
||
.screenshot-grid {
|
||
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
|
||
margin-top: 0;
|
||
}
|
||
.screenshot-card {
|
||
background: var(--background-secondary);
|
||
border-radius: var(--radius-md); overflow: hidden;
|
||
border: 0.5px solid var(--separator);
|
||
padding: 14px 10px; text-align: center;
|
||
}
|
||
.screenshot-icon { font-size: 28px; margin-bottom: 8px; }
|
||
.screenshot-size { font-size: 12px; font-weight: 700; color: var(--label-primary); }
|
||
.screenshot-note { font-size: 11px; color: var(--label-secondary); margin-top: 3px; }
|
||
|
||
/* Info card */
|
||
.info-card {
|
||
background: rgba(10,132,255,0.08);
|
||
border: 0.5px solid rgba(10,132,255,0.2);
|
||
border-radius: var(--radius-lg); padding: 14px 16px;
|
||
margin-top: 12px;
|
||
}
|
||
.info-card-title { font-size: 13px; font-weight: 600; color: var(--ios-blue); margin-bottom: 4px; }
|
||
.info-card-body { font-size: 13px; color: var(--label-secondary); line-height: 1.5; }
|
||
|
||
/* Warning card */
|
||
.warn-card {
|
||
background: rgba(255,159,10,0.08);
|
||
border: 0.5px solid rgba(255,159,10,0.2);
|
||
border-radius: var(--radius-lg); padding: 14px 16px;
|
||
margin: 16px 16px 8px;
|
||
}
|
||
.warn-card-title { font-size: 13px; font-weight: 600; color: var(--ios-orange); margin-bottom: 4px; }
|
||
.warn-card-body { font-size: 13px; color: var(--label-secondary); line-height: 1.5; }
|
||
@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>
|
||
<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">
|
||
</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">
|
||
<div class="hero-icon"></div>
|
||
<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">
|
||
<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>
|
||
<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>
|
||
<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>
|
||
</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–48h att aktivera om nytt</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">
|
||
Öppna App Store Connect
|
||
</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>
|
||
<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>
|
||
</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">
|
||
<div class="info-card-title"> Bundle ID</div>
|
||
<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>
|
||
<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>
|
||
</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>
|
||
<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>
|
||
</div>
|
||
<div class="step-body" id="step-4">
|
||
<div class="screenshot-grid">
|
||
<div class="screenshot-card">
|
||
<div class="screenshot-icon"></div>
|
||
<div class="screenshot-size">6.7"</div>
|
||
<div class="screenshot-note">iPhone 15 Plus<br>1290×2796</div>
|
||
</div>
|
||
<div class="screenshot-card">
|
||
<div class="screenshot-icon"></div>
|
||
<div class="screenshot-size">6.1"</div>
|
||
<div class="screenshot-note">iPhone 15<br>1179×2556</div>
|
||
</div>
|
||
<div class="screenshot-card">
|
||
<div class="screenshot-icon"></div>
|
||
<div class="screenshot-size">iPad 12.9"</div>
|
||
<div class="screenshot-note">iPad Pro<br>2048×2732</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">
|
||
<div class="info-card-title"> Pro tip</div>
|
||
<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>
|
||
<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>
|
||
</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>
|
||
<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>
|
||
</div>
|
||
<div class="step-body" id="step-6">
|
||
<div class="step-detail-row">
|
||
<div class="step-detail-dot"></div>
|
||
<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>
|
||
</div>
|
||
<div class="step-detail-row">
|
||
<div class="step-detail-dot"></div>
|
||
<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>
|
||
</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">
|
||
Visa Privacy Policy
|
||
</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>
|
||
<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>
|
||
</div>
|
||
<div class="step-body" id="step-7">
|
||
<div class="step-detail-row">
|
||
<div class="step-detail-dot"></div>
|
||
<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>
|
||
</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">
|
||
Visa Support-sida
|
||
</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–7 dagar väntetid</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–48h (kan vara upp till 7 dagar v1.0)</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>
|
||
<div class="info-card-body">Lämna in senast 24 juli → App Review 2–5 dagar → Klar 30–31 juli → Launch Day 1 augusti <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>
|
||
</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">
|
||
<span class="legal-icon"></span>
|
||
<div class="legal-info">
|
||
<div class="legal-title">GDPR Compliance</div>
|
||
<div class="legal-sub">Privacy policy live, dataskyddsombud</div>
|
||
</div>
|
||
<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>
|
||
</div>
|
||
<div class="legal-row">
|
||
<span class="legal-icon"></span>
|
||
<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">
|
||
<span class="legal-icon"></span>
|
||
<div class="legal-info">
|
||
<div class="legal-title">Zoomer-avtal</div>
|
||
<div class="legal-sub">Uppdragstagares villkor — behövs innan launch</div>
|
||
</div>
|
||
<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>
|
||
</div>
|
||
<div class="legal-row">
|
||
<span class="legal-icon"></span>
|
||
<div class="legal-info">
|
||
<div class="legal-title">SwiftUI App</div>
|
||
<div class="legal-sub">Native iOS-app för App Store</div>
|
||
</div>
|
||
<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>
|
||
</div>
|
||
<div class="legal-row">
|
||
<span class="legal-icon"></span>
|
||
<div class="legal-info">
|
||
<div class="legal-title">Terms of Service</div>
|
||
<div class="legal-sub">Användarvillkor live</div>
|
||
</div>
|
||
<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>
|
||
</div>
|
||
<div class="legal-row">
|
||
<span class="legal-icon"></span>
|
||
<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>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Critical path warning -->
|
||
<div class="warn-card">
|
||
<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>
|
||
<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>
|
||
</body>
|
||
</html>
|