Bernt
1a12fb870b
- New /developers/ page with API docs, SDKs, pricing, use cases - OpenAPI 3.0 spec for Orders, Missions, Photos, Analytics - Case study: Glasskiosken i Flatenbadet — complete ROI analysis - Updated /order/ with recurring missions and frequency dropdown
1109 lines
40 KiB
HTML
1109 lines
40 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: var(--radius-sm);
|
||
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: var(--radius-full);
|
||
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: var(--radius-md);
|
||
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: var(--radius-md);
|
||
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: var(--radius-full);
|
||
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: var(--radius-sm);
|
||
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: var(--radius-md);
|
||
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: var(--radius-sm);
|
||
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: var(--radius-md);
|
||
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: var(--radius-md);
|
||
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: var(--radius-md);
|
||
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; }
|
||
}
|
||
/* QUIXZOOM STANDARD — Dark Theme */
|
||
:root {
|
||
--qz-bg: #0a0a0a;
|
||
--qz-surface: #111111;
|
||
--qz-surface-2: #1a1a1a;
|
||
--qz-border: rgba(255,255,255,0.08);
|
||
--qz-text: #e8e8e8;
|
||
--qz-text-dim: #a0a0a0;
|
||
--qz-text-muted: #6b6b6b;
|
||
--qz-blue: #007AFF;
|
||
--qz-blue-dark: #0056CC;
|
||
--qz-radius: 10px;
|
||
}
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
|
||
background: var(--qz-bg);
|
||
color: var(--qz-text);
|
||
line-height: 1.6;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
/* Navigation */
|
||
.qz-nav {
|
||
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: 0 24px; height: 56px;
|
||
background: rgba(255,255,255,0.92);
|
||
backdrop-filter: blur(16px);
|
||
border-bottom: 1px solid var(--qz-border);
|
||
}
|
||
|
||
.qz-nav-logo { font-size: 18px; font-weight: 700; color: #fff; text-decoration: none; }
|
||
.qz-nav-links { display: flex; gap: 24px; list-style: none; }
|
||
.qz-nav-links a { font-size: 14px; color: var(--qz-text-dim); text-decoration: none; transition: color 0.2s; }
|
||
.qz-nav-links a:hover { color: #fff; }
|
||
|
||
/* Buttons */
|
||
.qz-btn {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
padding: 12px 24px; border-radius: var(--qz-radius);
|
||
font-size: 15px; font-weight: 600; text-decoration: none;
|
||
transition: all 0.2s; cursor: pointer; border: none;
|
||
}
|
||
|
||
.qz-btn-primary {
|
||
background: var(--qz-blue); color: #fff;
|
||
}
|
||
.qz-btn-primary:hover {
|
||
background: var(--qz-blue-dark); transform: translateY(-1px);
|
||
}
|
||
|
||
.qz-btn-ghost {
|
||
background: transparent; color: var(--qz-text);
|
||
border: 1px solid var(--qz-border);
|
||
}
|
||
.qz-btn-ghost:hover {
|
||
border-color: var(--qz-blue); color: var(--qz-blue);
|
||
}
|
||
|
||
/* Cards */
|
||
.qz-card {
|
||
background: var(--qz-surface);
|
||
border: 1px solid var(--qz-border);
|
||
border-radius: var(--qz-radius);
|
||
padding: 24px;
|
||
transition: transform 0.2s, border-color 0.2s;
|
||
}
|
||
.qz-card:hover {
|
||
transform: translateY(-2px);
|
||
border-color: rgba(0,122,255,0.3);
|
||
}
|
||
|
||
/* Footer */
|
||
.qz-footer {
|
||
border-top: 1px solid var(--qz-border);
|
||
padding: 40px 24px;
|
||
text-align: center;
|
||
color: var(--qz-text-dim);
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* Banner */
|
||
.qz-banner {
|
||
background: #001E50;
|
||
color: rgba(255,255,255,0.55);
|
||
text-align: center;
|
||
padding: 10px;
|
||
font-size: 12px;
|
||
}
|
||
.qz-banner a { color: rgba(255,255,255,0.8); text-decoration: none; }
|
||
|
||
@media (max-width: 768px) {
|
||
.qz-nav-links { display: none; }
|
||
}
|
||
</style>
|
||
|
||
<style id="wcag-contrast-enforcement">
|
||
/* AAMOS GLOBAL CONTRAST ENFORCEMENT — WCAG AA (4.5:1 minimum) */
|
||
/* Regel: Ingen text under 70% opacity. Aldrig. */
|
||
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
|
||
/* Fix common low-contrast patterns */
|
||
[style*="rgba(60,60,67,0.4)"] { color: rgba(60,60,67,0.65) !important; }
|
||
[style*="rgba(60,60,67,0.3)"] { color: rgba(60,60,67,0.65) !important; }
|
||
[style*="rgba(255,255,255,0.4)"] { color: rgba(255,255,255,0.72) !important; }
|
||
[style*="rgba(255,255,255,0.3)"] { color: rgba(255,255,255,0.72) !important; }
|
||
[style*="opacity: 0.4"] { opacity: 0.72 !important; }
|
||
[style*="opacity: 0.3"] { opacity: 0.72 !important; }
|
||
/* QUIXZOOM STANDARD — Dark Theme */
|
||
:root {
|
||
--qz-bg: #0a0a0a;
|
||
--qz-surface: #111111;
|
||
--qz-surface-2: #1a1a1a;
|
||
--qz-border: rgba(255,255,255,0.08);
|
||
--qz-text: #e8e8e8;
|
||
--qz-text-dim: #a0a0a0;
|
||
--qz-text-muted: #6b6b6b;
|
||
--qz-blue: #007AFF;
|
||
--qz-blue-dark: #0056CC;
|
||
--qz-radius: 10px;
|
||
}
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
|
||
background: var(--qz-bg);
|
||
color: var(--qz-text);
|
||
line-height: 1.6;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
/* Navigation */
|
||
.qz-nav {
|
||
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: 0 24px; height: 56px;
|
||
background: rgba(255,255,255,0.92);
|
||
backdrop-filter: blur(16px);
|
||
border-bottom: 1px solid var(--qz-border);
|
||
}
|
||
|
||
.qz-nav-logo { font-size: 18px; font-weight: 700; color: #fff; text-decoration: none; }
|
||
.qz-nav-links { display: flex; gap: 24px; list-style: none; }
|
||
.qz-nav-links a { font-size: 14px; color: var(--qz-text-dim); text-decoration: none; transition: color 0.2s; }
|
||
.qz-nav-links a:hover { color: #fff; }
|
||
|
||
/* Buttons */
|
||
.qz-btn {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
padding: 12px 24px; border-radius: var(--qz-radius);
|
||
font-size: 15px; font-weight: 600; text-decoration: none;
|
||
transition: all 0.2s; cursor: pointer; border: none;
|
||
}
|
||
|
||
.qz-btn-primary {
|
||
background: var(--qz-blue); color: #fff;
|
||
}
|
||
.qz-btn-primary:hover {
|
||
background: var(--qz-blue-dark); transform: translateY(-1px);
|
||
}
|
||
|
||
.qz-btn-ghost {
|
||
background: transparent; color: var(--qz-text);
|
||
border: 1px solid var(--qz-border);
|
||
}
|
||
.qz-btn-ghost:hover {
|
||
border-color: var(--qz-blue); color: var(--qz-blue);
|
||
}
|
||
|
||
/* Cards */
|
||
.qz-card {
|
||
background: var(--qz-surface);
|
||
border: 1px solid var(--qz-border);
|
||
border-radius: var(--qz-radius);
|
||
padding: 24px;
|
||
transition: transform 0.2s, border-color 0.2s;
|
||
}
|
||
.qz-card:hover {
|
||
transform: translateY(-2px);
|
||
border-color: rgba(0,122,255,0.3);
|
||
}
|
||
|
||
/* Footer */
|
||
.qz-footer {
|
||
border-top: 1px solid var(--qz-border);
|
||
padding: 40px 24px;
|
||
text-align: center;
|
||
color: var(--qz-text-dim);
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* Banner */
|
||
.qz-banner {
|
||
background: #001E50;
|
||
color: rgba(255,255,255,0.55);
|
||
text-align: center;
|
||
padding: 10px;
|
||
font-size: 12px;
|
||
}
|
||
.qz-banner a { color: rgba(255,255,255,0.8); text-decoration: none; }
|
||
|
||
@media (max-width: 768px) {
|
||
.qz-nav-links { display: none; }
|
||
}
|
||
</style>
|
||
<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">
|
||
<script type="module" src="https://auth.quixzoom.com/site-auth-snippet.js"></script>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Nav -->
|
||
<nav class="qz-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="qz-nav" 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"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8L6.5 11.5L13 4.5" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> 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"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8L6.5 11.5L13 4.5" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> 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"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8L6.5 11.5L13 4.5" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> 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"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8L6.5 11.5L13 4.5" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> Live 15 jun</div>
|
||
</div>
|
||
<div class="city-card">
|
||
<div class="city-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="3" stroke="#666" stroke-width="1.5"/><path d="M8 2V4M8 12V14M2 8H4M12 8H14M4.3 4.3L5.7 5.7M10.3 10.3L11.7 11.7M4.3 11.7L5.7 10.3M10.3 5.7L11.7 4.3" stroke="#666" stroke-width="1.5" stroke-linecap="round"/></svg></div>
|
||
<div class="city-name">Västerås</div>
|
||
<div class="city-missions">9 aktiva zoomers • 31 uppdrag</div>
|
||
<div class="city-live-badge"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8L6.5 11.5L13 4.5" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> 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"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8L6.5 11.5L13 4.5" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> 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"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8L6.5 11.5L13 4.5" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> 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"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8L6.5 11.5L13 4.5" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> 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"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8L6.5 11.5L13 4.5" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> 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"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8L6.5 11.5L13 4.5" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> 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"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8L6.5 11.5L13 4.5" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> 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"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8L6.5 11.5L13 4.5" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> Automatisk rapportering av zoomer-inkomster till Skatteverket</li>
|
||
<li><span class="check"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8L6.5 11.5L13 4.5" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> Rapporteringströskel: >30 uppdrag ELLER >2 000 USD per år</li>
|
||
<li><span class="check"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8L6.5 11.5L13 4.5" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> Personnummer-verifiering via Skatteverket SPAR</li>
|
||
<li><span class="check"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8L6.5 11.5L13 4.5" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> Årsrapport skickas senast 31 januari varje år</li>
|
||
<li><span class="check"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8L6.5 11.5L13 4.5" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></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"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8L6.5 11.5L13 4.5" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> Stripe Connect — säker utbetalning</li>
|
||
<li><span class="check"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8L6.5 11.5L13 4.5" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> Kräver svenska mobilnummer (07X XXXXXXXX)</li>
|
||
<li><span class="check"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8L6.5 11.5L13 4.5" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> Utbetalning i SEK — inga valutaomräkningar</li>
|
||
<li><span class="check"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8L6.5 11.5L13 4.5" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> Minimibelopp: 100 SEK per utbetalning</li>
|
||
<li><span class="check"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8L6.5 11.5L13 4.5" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></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" inputmode="tel" />
|
||
<button type="submit" class="btn-primary" id="wl-btn">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 class="qz-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();
|
||
|
||
// Load saved phone
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const savedPhone = localStorage.getItem('qx_phone');
|
||
if (savedPhone) {
|
||
document.getElementById('wl-phone').value = savedPhone;
|
||
}
|
||
});
|
||
|
||
async function submitWaitlist(e) {
|
||
e.preventDefault();
|
||
const name = document.getElementById('wl-name').value.trim();
|
||
const phone = document.getElementById('wl-phone').value.trim();
|
||
const btn = document.getElementById('wl-btn');
|
||
|
||
if (!name || !phone) return;
|
||
|
||
// Save phone for next time
|
||
localStorage.setItem('qx_phone', phone);
|
||
localStorage.setItem('qx_name', name);
|
||
|
||
btn.disabled = true;
|
||
btn.textContent = 'Skickar...';
|
||
|
||
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';
|
||
|
||
// Send to backend + email
|
||
try {
|
||
await 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', timestamp: new Date().toISOString() }),
|
||
});
|
||
} catch(e) {
|
||
// Fallback: email
|
||
const subject = `Ny Zoomer-registrering: ${name}`;
|
||
const body = `Ny registrering från sweden-launch:\n\nNamn: ${name}\nTelefon: ${phone}\nKälla: sweden-launch.html\nTid: ${new Date().toLocaleString('sv-SE')}`;
|
||
fetch(`mailto:hello@quixzoom.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`).catch(()=>{});
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|