891 lines
35 KiB
HTML
891 lines
35 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="sv">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8" />
|
|||
|
|
<link rel="canonical" href="https://www.quixzoom.com/sweden-launch.html">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|||
|
|
<title>quiXzoom Sverige — Launch 1 augusti 2026</title>
|
|||
|
|
<meta name="description" content="quiXzoom lanseras i Sverige 1 aug 2026. Bli zoomer, ta uppdrag och tjäna pengar per godkänt uppdrag. Fotografera infrastruktur och stadsmiljöer." />
|
|||
|
|
<style>
|
|||
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|||
|
|
|
|||
|
|
:root {
|
|||
|
|
--navy: #001E50;
|
|||
|
|
--cream: #FAF9F6;
|
|||
|
|
--amber: #C8763A;
|
|||
|
|
--amber2: #E8962A;
|
|||
|
|
--white: #FFFFFF;
|
|||
|
|
--text: #1A1A2E;
|
|||
|
|
--muted: #5A6070;
|
|||
|
|
--border: #E2E0DB;
|
|||
|
|
--green: #2D7A4F;
|
|||
|
|
--radius: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
html { scroll-behavior: smooth; }
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
|||
|
|
background: var(--cream);
|
|||
|
|
color: var(--text);
|
|||
|
|
line-height: 1.6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── Nav ──────────────────────────────────────────────────── */
|
|||
|
|
nav {
|
|||
|
|
background: var(--navy);
|
|||
|
|
padding: 0 2rem;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
height: 64px;
|
|||
|
|
position: sticky;
|
|||
|
|
top: 0;
|
|||
|
|
z-index: 100;
|
|||
|
|
}
|
|||
|
|
.nav-logo {
|
|||
|
|
font-size: 1.4rem;
|
|||
|
|
font-weight: 800;
|
|||
|
|
color: var(--white);
|
|||
|
|
letter-spacing: -0.02em;
|
|||
|
|
}
|
|||
|
|
.nav-logo span { color: var(--amber); }
|
|||
|
|
.nav-links { display: flex; gap: 2rem; }
|
|||
|
|
.nav-links a {
|
|||
|
|
color: rgba(255,255,255,0.8);
|
|||
|
|
text-decoration: none;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
transition: color 0.2s;
|
|||
|
|
}
|
|||
|
|
.nav-links a:hover { color: var(--white); }
|
|||
|
|
.nav-cta {
|
|||
|
|
background: var(--amber);
|
|||
|
|
color: var(--white);
|
|||
|
|
border: none;
|
|||
|
|
padding: 0.5rem 1.25rem;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
cursor: pointer;
|
|||
|
|
text-decoration: none;
|
|||
|
|
transition: background 0.2s;
|
|||
|
|
}
|
|||
|
|
.nav-cta:hover { background: var(--amber2); }
|
|||
|
|
|
|||
|
|
/* ── Hero ─────────────────────────────────────────────────── */
|
|||
|
|
.hero {
|
|||
|
|
background: var(--navy);
|
|||
|
|
color: var(--white);
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 5rem 2rem 4rem;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.hero::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
inset: 0;
|
|||
|
|
background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(200,118,58,0.15) 0%, transparent 70%);
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
.launch-badge {
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
background: rgba(200,118,58,0.2);
|
|||
|
|
border: 1px solid rgba(200,118,58,0.5);
|
|||
|
|
color: var(--amber);
|
|||
|
|
padding: 0.35rem 1rem;
|
|||
|
|
border-radius: 100px;
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
font-weight: 700;
|
|||
|
|
letter-spacing: 0.08em;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
margin-bottom: 1.5rem;
|
|||
|
|
}
|
|||
|
|
.launch-badge .dot {
|
|||
|
|
width: 7px; height: 7px;
|
|||
|
|
background: var(--amber);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
animation: pulse 1.5s ease-in-out infinite;
|
|||
|
|
}
|
|||
|
|
@keyframes pulse {
|
|||
|
|
0%, 100% { opacity: 1; }
|
|||
|
|
50% { opacity: 0.3; }
|
|||
|
|
}
|
|||
|
|
.hero h1 {
|
|||
|
|
font-size: clamp(2.4rem, 6vw, 4.2rem);
|
|||
|
|
font-weight: 900;
|
|||
|
|
line-height: 1.1;
|
|||
|
|
letter-spacing: -0.03em;
|
|||
|
|
margin-bottom: 1.25rem;
|
|||
|
|
}
|
|||
|
|
.hero h1 span { color: var(--amber); }
|
|||
|
|
.hero p.subtitle {
|
|||
|
|
font-size: 1.2rem;
|
|||
|
|
color: rgba(255,255,255,0.75);
|
|||
|
|
max-width: 600px;
|
|||
|
|
margin: 0 auto 2.5rem;
|
|||
|
|
}
|
|||
|
|
.hero-actions {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 1rem;
|
|||
|
|
justify-content: center;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
.btn-primary {
|
|||
|
|
background: var(--amber);
|
|||
|
|
color: var(--white);
|
|||
|
|
border: none;
|
|||
|
|
padding: 0.85rem 2rem;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
font-size: 1rem;
|
|||
|
|
font-weight: 700;
|
|||
|
|
cursor: pointer;
|
|||
|
|
text-decoration: none;
|
|||
|
|
transition: background 0.2s, transform 0.15s;
|
|||
|
|
}
|
|||
|
|
.btn-primary:hover { background: var(--amber2); transform: translateY(-1px); }
|
|||
|
|
.btn-outline {
|
|||
|
|
background: transparent;
|
|||
|
|
color: var(--white);
|
|||
|
|
border: 2px solid rgba(255,255,255,0.4);
|
|||
|
|
padding: 0.85rem 2rem;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
font-size: 1rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
cursor: pointer;
|
|||
|
|
text-decoration: none;
|
|||
|
|
transition: border-color 0.2s;
|
|||
|
|
}
|
|||
|
|
.btn-outline:hover { border-color: rgba(255,255,255,0.8); }
|
|||
|
|
|
|||
|
|
/* ── Countdown ────────────────────────────────────────────── */
|
|||
|
|
.countdown-section {
|
|||
|
|
background: var(--navy);
|
|||
|
|
padding-bottom: 4rem;
|
|||
|
|
}
|
|||
|
|
.countdown-container {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 1.5rem;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
padding-top: 1rem;
|
|||
|
|
}
|
|||
|
|
.countdown-unit {
|
|||
|
|
text-align: center;
|
|||
|
|
min-width: 90px;
|
|||
|
|
}
|
|||
|
|
.countdown-value {
|
|||
|
|
display: block;
|
|||
|
|
font-size: clamp(2.5rem, 6vw, 4rem);
|
|||
|
|
font-weight: 900;
|
|||
|
|
color: var(--white);
|
|||
|
|
line-height: 1;
|
|||
|
|
font-variant-numeric: tabular-nums;
|
|||
|
|
}
|
|||
|
|
.countdown-label {
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
color: rgba(255,255,255,0.75);
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
letter-spacing: 0.1em;
|
|||
|
|
margin-top: 0.4rem;
|
|||
|
|
}
|
|||
|
|
.countdown-divider {
|
|||
|
|
color: var(--amber);
|
|||
|
|
font-size: 3rem;
|
|||
|
|
font-weight: 300;
|
|||
|
|
opacity: 0.6;
|
|||
|
|
margin-top: 0.3rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── Section base ─────────────────────────────────────────── */
|
|||
|
|
section { padding: 5rem 2rem; }
|
|||
|
|
.container { max-width: 1100px; margin: 0 auto; }
|
|||
|
|
.section-tag {
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
font-weight: 700;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
letter-spacing: 0.12em;
|
|||
|
|
color: var(--amber);
|
|||
|
|
margin-bottom: 0.75rem;
|
|||
|
|
}
|
|||
|
|
h2 {
|
|||
|
|
font-size: clamp(1.8rem, 4vw, 2.8rem);
|
|||
|
|
font-weight: 800;
|
|||
|
|
letter-spacing: -0.02em;
|
|||
|
|
color: var(--navy);
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
line-height: 1.2;
|
|||
|
|
}
|
|||
|
|
.lead {
|
|||
|
|
font-size: 1.1rem;
|
|||
|
|
color: var(--muted);
|
|||
|
|
max-width: 600px;
|
|||
|
|
margin-bottom: 3rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── Stats strip ──────────────────────────────────────────── */
|
|||
|
|
.stats-strip {
|
|||
|
|
background: var(--white);
|
|||
|
|
border-top: 1px solid var(--border);
|
|||
|
|
border-bottom: 1px solid var(--border);
|
|||
|
|
padding: 2rem;
|
|||
|
|
}
|
|||
|
|
.stats-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|||
|
|
gap: 2rem;
|
|||
|
|
max-width: 900px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.stat-value {
|
|||
|
|
font-size: 2.2rem;
|
|||
|
|
font-weight: 900;
|
|||
|
|
color: var(--navy);
|
|||
|
|
letter-spacing: -0.02em;
|
|||
|
|
}
|
|||
|
|
.stat-label { font-size: 0.85rem; color: var(--muted); margin-top: 0.25rem; }
|
|||
|
|
|
|||
|
|
/* ── How it works ─────────────────────────────────────────── */
|
|||
|
|
.steps-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|||
|
|
gap: 2rem;
|
|||
|
|
}
|
|||
|
|
.step-card {
|
|||
|
|
background: var(--white);
|
|||
|
|
border: 1px solid var(--border);
|
|||
|
|
border-radius: var(--radius);
|
|||
|
|
padding: 2rem;
|
|||
|
|
}
|
|||
|
|
.step-number {
|
|||
|
|
width: 36px; height: 36px;
|
|||
|
|
background: var(--amber);
|
|||
|
|
color: var(--white);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-weight: 800;
|
|||
|
|
font-size: 1rem;
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
}
|
|||
|
|
.step-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--navy); }
|
|||
|
|
.step-card p { font-size: 0.9rem; color: var(--muted); line-height: 1.5; }
|
|||
|
|
|
|||
|
|
/* ── Cities ───────────────────────────────────────────────── */
|
|||
|
|
.cities-section { background: var(--navy); color: var(--white); }
|
|||
|
|
.cities-section h2 { color: var(--white); }
|
|||
|
|
.cities-section .lead { color: rgba(255,255,255,0.75); }
|
|||
|
|
.cities-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|||
|
|
gap: 1.25rem;
|
|||
|
|
}
|
|||
|
|
.city-card {
|
|||
|
|
background: rgba(255,255,255,0.06);
|
|||
|
|
border: 1px solid rgba(255,255,255,0.12);
|
|||
|
|
border-radius: var(--radius);
|
|||
|
|
padding: 1.5rem;
|
|||
|
|
transition: border-color 0.2s, background 0.2s;
|
|||
|
|
}
|
|||
|
|
.city-card:hover {
|
|||
|
|
background: rgba(255,255,255,0.1);
|
|||
|
|
border-color: rgba(200,118,58,0.5);
|
|||
|
|
}
|
|||
|
|
.city-icon { font-size: 2rem; margin-bottom: 0.75rem; }
|
|||
|
|
.city-name { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.25rem; }
|
|||
|
|
.city-missions { font-size: 0.8rem; color: rgba(255,255,255,0.75); }
|
|||
|
|
.city-live-badge {
|
|||
|
|
display: inline-block;
|
|||
|
|
background: rgba(45,122,79,0.3);
|
|||
|
|
border: 1px solid rgba(45,122,79,0.6);
|
|||
|
|
color: #6ECFA0;
|
|||
|
|
font-size: 0.68rem;
|
|||
|
|
font-weight: 700;
|
|||
|
|
padding: 0.15rem 0.5rem;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
margin-top: 0.5rem;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
letter-spacing: 0.06em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── Features ─────────────────────────────────────────────── */
|
|||
|
|
.features-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|||
|
|
gap: 1.5rem;
|
|||
|
|
}
|
|||
|
|
.feature-card {
|
|||
|
|
background: var(--white);
|
|||
|
|
border: 1px solid var(--border);
|
|||
|
|
border-radius: var(--radius);
|
|||
|
|
padding: 1.75rem;
|
|||
|
|
}
|
|||
|
|
.feature-icon {
|
|||
|
|
width: 44px; height: 44px;
|
|||
|
|
background: rgba(200,118,58,0.1);
|
|||
|
|
border-radius: 10px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 1.4rem;
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
}
|
|||
|
|
.feature-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--navy); }
|
|||
|
|
.feature-card p { font-size: 0.9rem; color: var(--muted); line-height: 1.5; }
|
|||
|
|
.feature-badge {
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.3rem;
|
|||
|
|
background: rgba(45,122,79,0.08);
|
|||
|
|
border: 1px solid rgba(45,122,79,0.3);
|
|||
|
|
color: var(--green);
|
|||
|
|
font-size: 0.72rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
padding: 0.2rem 0.6rem;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
margin-top: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── DAC7 + Skatt ─────────────────────────────────────────── */
|
|||
|
|
.compliance-section { background: #F4F2EE; }
|
|||
|
|
.compliance-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1fr 1fr;
|
|||
|
|
gap: 2rem;
|
|||
|
|
align-items: start;
|
|||
|
|
}
|
|||
|
|
@media (max-width: 700px) { .compliance-grid { grid-template-columns: 1fr; } }
|
|||
|
|
.compliance-box {
|
|||
|
|
background: var(--white);
|
|||
|
|
border: 1px solid var(--border);
|
|||
|
|
border-radius: var(--radius);
|
|||
|
|
padding: 2rem;
|
|||
|
|
}
|
|||
|
|
.compliance-box h3 { font-size: 1.05rem; font-weight: 700; color: var(--navy); margin-bottom: 1rem; }
|
|||
|
|
.compliance-list { list-style: none; }
|
|||
|
|
.compliance-list li {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
gap: 0.6rem;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
color: var(--muted);
|
|||
|
|
padding: 0.5rem 0;
|
|||
|
|
border-bottom: 1px solid var(--border);
|
|||
|
|
}
|
|||
|
|
.compliance-list li:last-child { border-bottom: none; }
|
|||
|
|
.compliance-list .check { color: var(--green); font-weight: 700; flex-shrink: 0; }
|
|||
|
|
|
|||
|
|
/* ── Earnings calculator ──────────────────────────────────── */
|
|||
|
|
.calculator-section { background: var(--white); }
|
|||
|
|
.calc-box {
|
|||
|
|
background: var(--cream);
|
|||
|
|
border: 1px solid var(--border);
|
|||
|
|
border-radius: var(--radius);
|
|||
|
|
padding: 2rem;
|
|||
|
|
max-width: 560px;
|
|||
|
|
}
|
|||
|
|
.calc-row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
}
|
|||
|
|
.calc-row label { font-size: 0.9rem; font-weight: 600; color: var(--navy); }
|
|||
|
|
.calc-row input[type="range"] { width: 200px; accent-color: var(--amber); }
|
|||
|
|
.calc-value { font-weight: 700; color: var(--amber); min-width: 80px; text-align: right; }
|
|||
|
|
.calc-result {
|
|||
|
|
background: var(--navy);
|
|||
|
|
color: var(--white);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 1.25rem 1.5rem;
|
|||
|
|
margin-top: 1.5rem;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.calc-result .amount { font-size: 1.8rem; font-weight: 900; }
|
|||
|
|
.calc-result .sub { font-size: 0.8rem; color: rgba(255,255,255,0.75); }
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* ── Registration / CTA ───────────────────────────────────── */
|
|||
|
|
.cta-section {
|
|||
|
|
background: var(--navy);
|
|||
|
|
color: var(--white);
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 5rem 2rem;
|
|||
|
|
}
|
|||
|
|
.cta-section h2 { color: var(--white); margin-bottom: 1rem; }
|
|||
|
|
.cta-section p { color: rgba(255,255,255,0.75); max-width: 520px; margin: 0 auto 2.5rem; font-size: 1.05rem; }
|
|||
|
|
.signup-form {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 0.75rem;
|
|||
|
|
max-width: 480px;
|
|||
|
|
margin: 0 auto 1.5rem;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
.signup-form input {
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 200px;
|
|||
|
|
padding: 0.85rem 1.1rem;
|
|||
|
|
border: 1.5px solid rgba(255,255,255,0.2);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
background: rgba(255,255,255,0.08);
|
|||
|
|
color: var(--white);
|
|||
|
|
font-size: 0.95rem;
|
|||
|
|
outline: none;
|
|||
|
|
transition: border-color 0.2s;
|
|||
|
|
}
|
|||
|
|
.signup-form input::placeholder { color: rgba(255,255,255,0.75); }
|
|||
|
|
.signup-form input:focus { border-color: var(--amber); }
|
|||
|
|
.waitlist-count {
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
color: rgba(255,255,255,0.75);
|
|||
|
|
margin-top: 0.5rem;
|
|||
|
|
}
|
|||
|
|
.waitlist-count strong { color: rgba(255,255,255,0.8); }
|
|||
|
|
.success-msg {
|
|||
|
|
display: none;
|
|||
|
|
background: rgba(45,122,79,0.2);
|
|||
|
|
border: 1px solid rgba(45,122,79,0.5);
|
|||
|
|
color: #6ECFA0;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 1rem 1.5rem;
|
|||
|
|
max-width: 480px;
|
|||
|
|
margin: 1rem auto 0;
|
|||
|
|
font-size: 0.95rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── Footer ───────────────────────────────────────────────── */
|
|||
|
|
footer {
|
|||
|
|
background: #000D22;
|
|||
|
|
color: rgba(255,255,255,0.75);
|
|||
|
|
padding: 2rem;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 0.82rem;
|
|||
|
|
}
|
|||
|
|
footer a { color: rgba(255,255,255,0.75); text-decoration: none; margin: 0 0.75rem; }
|
|||
|
|
footer a:hover { color: var(--white); }
|
|||
|
|
.footer-logo {
|
|||
|
|
font-size: 1.1rem;
|
|||
|
|
font-weight: 800;
|
|||
|
|
color: rgba(255,255,255,0.8);
|
|||
|
|
margin-bottom: 0.75rem;
|
|||
|
|
letter-spacing: -0.01em;
|
|||
|
|
}
|
|||
|
|
.footer-logo span { color: var(--amber); }
|
|||
|
|
|
|||
|
|
/* ── Responsive ───────────────────────────────────────────── */
|
|||
|
|
@media (max-width: 640px) {
|
|||
|
|
.nav-links { display: none; }
|
|||
|
|
.hero { padding: 3rem 1.5rem 3rem; }
|
|||
|
|
.countdown-container { gap: 1rem; }
|
|||
|
|
}
|
|||
|
|
</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; }
|
|||
|
|
</style>
|
|||
|
|
<meta property="og:type" content="website">
|
|||
|
|
<meta property="og:title" content="quiXzoom Sverige — Launch 1 augusti 2026">
|
|||
|
|
<meta property="og:description" content="quiXzoom lanseras i Sverige 1 aug 2026. Bli zoomer, ta uppdrag och tjäna pengar per godkänt uppdrag. Fotografera infrastruktur och stadsmiljöer.">
|
|||
|
|
<meta property="og:url" content="https://www.quixzoom.com/sweden-launch.html">
|
|||
|
|
<meta property="og:image" content="https://www.quixzoom.com/images/sweden-launch.jpg">
|
|||
|
|
<meta property="og:image:width" content="1200">
|
|||
|
|
<meta property="og:image:height" content="630">
|
|||
|
|
<meta property="og:image:alt" content="quiXzoom Sweden launch Stockholm August 2026">
|
|||
|
|
<meta name="twitter:card" content="summary_large_image">
|
|||
|
|
<meta name="twitter:image" content="https://www.quixzoom.com/images/sweden-launch.jpg">
|
|||
|
|
<meta name="twitter:title" content="quiXzoom Sverige — Launch 1 augusti 2026">
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<!-- ── Nav ──────────────────────────────────────────────────────────────── -->
|
|||
|
|
<nav>
|
|||
|
|
<div class="nav-logo">qui<span>X</span>zoom</div>
|
|||
|
|
<div class="nav-links">
|
|||
|
|
<a href="#how-it-works">Hur det fungerar</a>
|
|||
|
|
<a href="#cities">Städer</a>
|
|||
|
|
<a href="#earnings">Förtjänst</a>
|
|||
|
|
<a href="#compliance">Skatt & DAC7</a>
|
|||
|
|
</div>
|
|||
|
|
<a href="#register" class="nav-cta">Bli Zoomer</a>
|
|||
|
|
</nav>
|
|||
|
|
|
|||
|
|
<!-- ── Hero ─────────────────────────────────────────────────────────────── -->
|
|||
|
|
<header class="hero">
|
|||
|
|
<div class="launch-badge">
|
|||
|
|
<span class="dot"></span>
|
|||
|
|
Sverige-launch — 1 augusti 2026
|
|||
|
|
</div>
|
|||
|
|
<h1>Ta <span>foto- och videouppdrag</span><br>nära dig i Sverige</h1>
|
|||
|
|
<p class="subtitle">
|
|||
|
|
quiXzoom kopplar kreativa proffs med företag som behöver bilder, film och drönarvideo — utbetalning direkt via Stripe.
|
|||
|
|
</p>
|
|||
|
|
<div class="hero-actions">
|
|||
|
|
<a href="#register" class="btn-primary">Registrera dig som Zoomer</a>
|
|||
|
|
<a href="#how-it-works" class="btn-outline">Hur det fungerar</a>
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<!-- ── Countdown ─────────────────────────────────────────────────────────── -->
|
|||
|
|
<div class="countdown-section">
|
|||
|
|
<div class="countdown-container" id="countdown">
|
|||
|
|
<div class="countdown-unit">
|
|||
|
|
<span class="countdown-value" id="cd-days">24</span>
|
|||
|
|
<span class="countdown-label">Dagar</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="countdown-divider">:</div>
|
|||
|
|
<div class="countdown-unit">
|
|||
|
|
<span class="countdown-value" id="cd-hours">00</span>
|
|||
|
|
<span class="countdown-label">Timmar</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="countdown-divider">:</div>
|
|||
|
|
<div class="countdown-unit">
|
|||
|
|
<span class="countdown-value" id="cd-minutes">00</span>
|
|||
|
|
<span class="countdown-label">Minuter</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="countdown-divider">:</div>
|
|||
|
|
<div class="countdown-unit">
|
|||
|
|
<span class="countdown-value" id="cd-seconds">00</span>
|
|||
|
|
<span class="countdown-label">Sekunder</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ── Stats strip ────────────────────────────────────────────────────────── -->
|
|||
|
|
<div class="stats-strip">
|
|||
|
|
<div class="stats-grid">
|
|||
|
|
<div>
|
|||
|
|
<div class="stat-value">5</div>
|
|||
|
|
<div class="stat-label">Städer vid launch</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div class="stat-value" id="waitlist-stat">482</div>
|
|||
|
|
<div class="stat-label">Zoomers i kö</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div class="stat-value">85 %</div>
|
|||
|
|
<div class="stat-label">Av uppdragsersättningen till dig</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div class="stat-value">Stripe</div>
|
|||
|
|
<div class="stat-label">Direktutbetalning i SEK</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div class="stat-value">DAC7</div>
|
|||
|
|
<div class="stat-label">EU-kompatibel skattehantering</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ── How it works ───────────────────────────────────────────────────────── -->
|
|||
|
|
<section id="how-it-works" style="background: var(--cream);">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="section-tag">Hur det fungerar</div>
|
|||
|
|
<h2>Från anmälan till utbetalning<br>på tre steg</h2>
|
|||
|
|
<p class="lead">quiXzoom är byggt för svenska kreativa proffs — snabb onboarding, transparenta priser och Stripe Connect-utbetalning direkt efter godkänd leverans.</p>
|
|||
|
|
<div class="steps-grid">
|
|||
|
|
<div class="step-card">
|
|||
|
|
<div class="step-number">1</div>
|
|||
|
|
<h3>Registrera dig som Zoomer</h3>
|
|||
|
|
<p>Ladda upp foto-ID och selfie för verifiering. KYC-granskning tar under 24 timmar.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="step-card">
|
|||
|
|
<div class="step-number">2</div>
|
|||
|
|
<h3>Acceptera uppdrag nära dig</h3>
|
|||
|
|
<p>Bläddra bland foto-, video- och drönare-uppdrag på kartan. Filtrera på stad, typ och ersättning.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="step-card">
|
|||
|
|
<div class="step-number">3</div>
|
|||
|
|
<h3>Leverera & få betalt via Stripe</h3>
|
|||
|
|
<p>Ladda upp media, kunden godkänner — 85 % av uppdragsersättningen betalas ut direkt till ditt Stripe-nummer.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="step-card">
|
|||
|
|
<div class="step-number">4</div>
|
|||
|
|
<h3>quiXzoom sköter skatten</h3>
|
|||
|
|
<p>Vi hanterar DAC7-rapportering till Skatteverket och skickar dig ett skatteunderlag varje år.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- ── Cities ─────────────────────────────────────────────────────────────── -->
|
|||
|
|
<section id="cities" class="cities-section">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="section-tag" style="color: rgba(200,118,58,0.9);">Sverige-launch</div>
|
|||
|
|
<h2>Fem städer från dag ett</h2>
|
|||
|
|
<p class="lead">quiXzoom öppnar i Sveriges fem största städer den 1 augusti 2026 — med fler städer planerade under H2.</p>
|
|||
|
|
<div class="cities-grid">
|
|||
|
|
<div class="city-card">
|
|||
|
|
<div class="city-icon">🏙️</div>
|
|||
|
|
<div class="city-name">Stockholm</div>
|
|||
|
|
<div class="city-missions">89 aktiva zoomers • 312 uppdrag</div>
|
|||
|
|
<div class="city-live-badge">✓ Live 15 jun</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="city-card">
|
|||
|
|
<div class="city-icon">⚓</div>
|
|||
|
|
<div class="city-name">Göteborg</div>
|
|||
|
|
<div class="city-missions">41 aktiva zoomers • 148 uppdrag</div>
|
|||
|
|
<div class="city-live-badge">✓ Live 15 jun</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="city-card">
|
|||
|
|
<div class="city-icon">🌉</div>
|
|||
|
|
<div class="city-name">Malmö</div>
|
|||
|
|
<div class="city-missions">28 aktiva zoomers • 97 uppdrag</div>
|
|||
|
|
<div class="city-live-badge">✓ Live 15 jun</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="city-card">
|
|||
|
|
<div class="city-icon">🎓</div>
|
|||
|
|
<div class="city-name">Uppsala</div>
|
|||
|
|
<div class="city-missions">15 aktiva zoomers • 54 uppdrag</div>
|
|||
|
|
<div class="city-live-badge">✓ Live 15 jun</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="city-card">
|
|||
|
|
<div class="city-icon">⚙️</div>
|
|||
|
|
<div class="city-name">Västerås</div>
|
|||
|
|
<div class="city-missions">9 aktiva zoomers • 31 uppdrag</div>
|
|||
|
|
<div class="city-live-badge">✓ Live 15 jun</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- ── Features ───────────────────────────────────────────────────────────── -->
|
|||
|
|
<section style="background: var(--cream);">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="section-tag">Plattformen</div>
|
|||
|
|
<h2>Byggt för svenska kreativa</h2>
|
|||
|
|
<p class="lead">Allt du behöver för att driva din fotografi- eller videoverksamhet via quiXzoom — utan mellanhänder.</p>
|
|||
|
|
<div class="features-grid">
|
|||
|
|
<div class="feature-card">
|
|||
|
|
<div class="feature-icon">💸</div>
|
|||
|
|
<h3>Stripe Connect-utbetalning</h3>
|
|||
|
|
<p>Pengarna är hos dig inom minuter efter att kunden godkänt leveransen. Inga banköverföringar som tar dagar.</p>
|
|||
|
|
<span class="feature-badge">✓ Direktbetalning i SEK</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-card">
|
|||
|
|
<div class="feature-icon">🗺️</div>
|
|||
|
|
<h3>Uppdrag på kartan</h3>
|
|||
|
|
<p>Realtidskarta visar öppna uppdrag i din stad. Filtrera på typ, ersättning och tidpunkt.</p>
|
|||
|
|
<span class="feature-badge">✓ Livekarta med WebSocket</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-card">
|
|||
|
|
<div class="feature-icon">🤖</div>
|
|||
|
|
<h3>AI-matchning</h3>
|
|||
|
|
<p>Vi matchar dig med uppdrag baserat på din utrustning, rating och plats — maximala möjligheter, minimalt letande.</p>
|
|||
|
|
<span class="feature-badge">✓ Automatisk matching</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-card">
|
|||
|
|
<div class="feature-icon">🆔</div>
|
|||
|
|
<h3>Personnummer-KYC</h3>
|
|||
|
|
<p>Säker identitetsverifiering via Skatteverket SPAR. Krävs för alla svenska zoomers — skyddar både dig och kunden.</p>
|
|||
|
|
<span class="feature-badge">✓ SPAR-integrerat</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-card">
|
|||
|
|
<div class="feature-icon">📊</div>
|
|||
|
|
<h3>Skatteunderlag & DAC7</h3>
|
|||
|
|
<p>quiXzoom sköter automatisk DAC7-rapportering till Skatteverket. Du får ett klart årsunderlag för din deklaration.</p>
|
|||
|
|
<span class="feature-badge">✓ EU Direktiv 2021/514</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-card">
|
|||
|
|
<div class="feature-icon">⭐</div>
|
|||
|
|
<h3>Rating & badges</h3>
|
|||
|
|
<p>Bygg ditt rykte med omdömen och badges — Topp-zoomer, HD-expert, Drönarpilot. Högre rating = fler uppdrag.</p>
|
|||
|
|
<span class="feature-badge">✓ Viktad 30-dagarsrating</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- ── Earnings calculator ────────────────────────────────────────────────── -->
|
|||
|
|
<section id="earnings" class="calculator-section">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="section-tag">Förtjänst</div>
|
|||
|
|
<h2>Beräkna din månadsinkomst</h2>
|
|||
|
|
<p class="lead">De flesta zoomers tar 8–20 uppdrag per månad. Ju fler uppdrag — desto högre rating och fler topputdrag.</p>
|
|||
|
|
<div class="calc-box">
|
|||
|
|
<div class="calc-row">
|
|||
|
|
<label>Uppdrag per månad</label>
|
|||
|
|
<input type="range" id="missions-slider" min="1" max="40" value="12" oninput="updateCalc()" />
|
|||
|
|
<span class="calc-value" id="missions-val">12</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="calc-row">
|
|||
|
|
<label>Genomsnittlig ersättning</label>
|
|||
|
|
<input type="range" id="rate-slider" min="1000" max="10000" step="500" value="3500" oninput="updateCalc()" />
|
|||
|
|
<span class="calc-value" id="rate-val">3 500 kr</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="calc-result">
|
|||
|
|
<div>
|
|||
|
|
<div style="font-size:0.8rem;opacity:0.6;margin-bottom:0.25rem">Månadsförtjänst (85 %)</div>
|
|||
|
|
<div class="amount" id="monthly-result">35 700 kr</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="text-align:right">
|
|||
|
|
<div class="sub">Per uppdrag</div>
|
|||
|
|
<div style="font-size:1.2rem;font-weight:700" id="per-mission">2 975 kr</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stripe-note">
|
|||
|
|
<span class="stripe-logo">Stripe</span>
|
|||
|
|
Utbetalas direkt via Stripe Connect efter godkänd leverans
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- ── DAC7 & Compliance ───────────────────────────────────────────────────── -->
|
|||
|
|
<section id="compliance" class="compliance-section">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="section-tag">Skatt & Efterlevnad</div>
|
|||
|
|
<h2>Transparent skattehantering</h2>
|
|||
|
|
<p class="lead">quiXzoom är godkänd digital plattform enligt EU:s DAC7-direktiv. Vi rapporterar till Skatteverket — du slipper jobbet.</p>
|
|||
|
|
<div class="compliance-grid">
|
|||
|
|
<div class="compliance-box">
|
|||
|
|
<h3>DAC7 — EU Direktiv 2021/514</h3>
|
|||
|
|
<ul class="compliance-list">
|
|||
|
|
<li><span class="check">✓</span> Automatisk rapportering av zoomer-inkomster till Skatteverket</li>
|
|||
|
|
<li><span class="check">✓</span> Rapporteringströskel: >30 uppdrag ELLER >2 000 EUR per år</li>
|
|||
|
|
<li><span class="check">✓</span> Personnummer-verifiering via Skatteverket SPAR</li>
|
|||
|
|
<li><span class="check">✓</span> Årsrapport skickas senast 31 januari varje år</li>
|
|||
|
|
<li><span class="check">✓</span> Du får en kopia som skatteunderlag</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="compliance-box">
|
|||
|
|
<h3>Stripe Connect-utbetalningar</h3>
|
|||
|
|
<ul class="compliance-list">
|
|||
|
|
<li><span class="check">✓</span> Stripe Connect — säker utbetalning</li>
|
|||
|
|
<li><span class="check">✓</span> Kräver svenska mobilnummer (07X XXXXXXXX)</li>
|
|||
|
|
<li><span class="check">✓</span> Utbetalning i SEK — inga valutaomräkningar</li>
|
|||
|
|
<li><span class="check">✓</span> Minimibelopp: 100 SEK per utbetalning</li>
|
|||
|
|
<li><span class="check">✓</span> Transaktionslogg tillgänglig i appen</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- ── Registration CTA ───────────────────────────────────────────────────── -->
|
|||
|
|
<section id="register" class="cta-section">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="section-tag" style="color:rgba(200,118,58,0.9)">Sverige-launch 1 augusti 2026</div>
|
|||
|
|
<h2>Registrera dig som Zoomer idag</h2>
|
|||
|
|
<p>Gå med i de hundratals kreativa proffs som redan är i kö. Launch-zoomers får prioritets-matching och exklusiv launch-badge.</p>
|
|||
|
|
<form class="signup-form" id="waitlist-form" onsubmit="submitWaitlist(event)">
|
|||
|
|
<input type="text" id="wl-name" placeholder="Ditt namn" required autocomplete="name" />
|
|||
|
|
<input type="tel" id="wl-phone" placeholder="Telefonnummer" required autocomplete="phone" />
|
|||
|
|
<button type="submit" class="btn-primary">Anmäl mig</button>
|
|||
|
|
</form>
|
|||
|
|
<div class="waitlist-count">
|
|||
|
|
<strong id="waitlist-display">482</strong> zoomers i kö — bli nummer <strong id="waitlist-next">483</strong>
|
|||
|
|
</div>
|
|||
|
|
<div class="success-msg" id="success-msg">
|
|||
|
|
🎉 Välkommen i kön! Vi hör av oss senast 1 augusti med dina inloggningsuppgifter och instruktioner för KYC.
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- ── Footer ─────────────────────────────────────────────────────────────── -->
|
|||
|
|
<footer>
|
|||
|
|
<div class="footer-logo">qui<span>X</span>zoom Sverige</div>
|
|||
|
|
<div style="margin-bottom:0.75rem">
|
|||
|
|
<a href="/terms/">Användarvillkor</a>
|
|||
|
|
<a href="/privacy/">Integritetspolicy</a>
|
|||
|
|
<a href="/support">Support</a>
|
|||
|
|
<a href="/dac7-reporting.html">DAC7-rapportering</a>
|
|||
|
|
</div>
|
|||
|
|
<div>quiXzoom • Sverige • launch@quixzoom.se</div>
|
|||
|
|
<div style="margin-top:0.5rem">© 2026 quiXzoom • Sverige-launch 1 augusti 2026</div>
|
|||
|
|
</footer>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// ── Countdown till 1 augusti 2026 ───────────────────────────────────────────
|
|||
|
|
const LAUNCH = new Date('2026-06-15T08:00:00+02:00').getTime();
|
|||
|
|
|
|||
|
|
function updateCountdown() {
|
|||
|
|
const now = Date.now();
|
|||
|
|
const diff = Math.max(0, LAUNCH - now);
|
|||
|
|
const d = Math.floor(diff / 86400000);
|
|||
|
|
const h = Math.floor((diff % 86400000) / 3600000);
|
|||
|
|
const m = Math.floor((diff % 3600000) / 60000);
|
|||
|
|
const s = Math.floor((diff % 60000) / 1000);
|
|||
|
|
document.getElementById('cd-days').textContent = String(d).padStart(2, '0');
|
|||
|
|
document.getElementById('cd-hours').textContent = String(h).padStart(2, '0');
|
|||
|
|
document.getElementById('cd-minutes').textContent = String(m).padStart(2, '0');
|
|||
|
|
document.getElementById('cd-seconds').textContent = String(s).padStart(2, '0');
|
|||
|
|
}
|
|||
|
|
updateCountdown();
|
|||
|
|
setInterval(updateCountdown, 1000);
|
|||
|
|
|
|||
|
|
// ── Earnings calculator ───────────────────────────────────────────────────
|
|||
|
|
function updateCalc() {
|
|||
|
|
const missions = parseInt(document.getElementById('missions-slider').value, 10);
|
|||
|
|
const rate = parseInt(document.getElementById('rate-slider').value, 10);
|
|||
|
|
const gross = missions * rate;
|
|||
|
|
const net = Math.round(gross * 0.85);
|
|||
|
|
const perMission = Math.round(rate * 0.85);
|
|||
|
|
document.getElementById('missions-val').textContent = missions;
|
|||
|
|
document.getElementById('rate-val').textContent = rate.toLocaleString('sv-SE') + ' kr';
|
|||
|
|
document.getElementById('monthly-result').textContent = net.toLocaleString('sv-SE') + ' kr';
|
|||
|
|
document.getElementById('per-mission').textContent = perMission.toLocaleString('sv-SE') + ' kr';
|
|||
|
|
}
|
|||
|
|
updateCalc();
|
|||
|
|
|
|||
|
|
// ── Waitlist ──────────────────────────────────────────────────────────────
|
|||
|
|
let waitlistCount = 482;
|
|||
|
|
|
|||
|
|
async function loadWaitlist() {
|
|||
|
|
try {
|
|||
|
|
const r = await fetch('https://api.quixzoom.com/api/qz/waitlist/count');
|
|||
|
|
if (r.ok) {
|
|||
|
|
const d = await r.json();
|
|||
|
|
if (d.count) {
|
|||
|
|
waitlistCount = d.count;
|
|||
|
|
document.getElementById('waitlist-stat').textContent = waitlistCount;
|
|||
|
|
document.getElementById('waitlist-display').textContent = waitlistCount;
|
|||
|
|
document.getElementById('waitlist-next').textContent = waitlistCount + 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch {}
|
|||
|
|
}
|
|||
|
|
loadWaitlist();
|
|||
|
|
|
|||
|
|
function submitWaitlist(e) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
const name = document.getElementById('wl-name').value.trim();
|
|||
|
|
const phone = document.getElementById('wl-phone').value.trim();
|
|||
|
|
|
|||
|
|
if (!name || !phone) return;
|
|||
|
|
|
|||
|
|
waitlistCount++;
|
|||
|
|
document.getElementById('waitlist-stat').textContent = waitlistCount;
|
|||
|
|
document.getElementById('waitlist-display').textContent = waitlistCount;
|
|||
|
|
document.getElementById('waitlist-next').textContent = waitlistCount + 1;
|
|||
|
|
|
|||
|
|
document.getElementById('waitlist-form').style.display = 'none';
|
|||
|
|
document.getElementById('success-msg').style.display = 'block';
|
|||
|
|
|
|||
|
|
// Skicka till backend (best-effort)
|
|||
|
|
fetch('https://api.quixzoom.com/api/qz/waitlist', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({ name, phone, source: 'sweden-launch-page', city: 'SE' }),
|
|||
|
|
}).catch(() => {});
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|