Files
boc/quixzoom-landing-fixed/privacy.html
T
Bernt 1a12fb870b dev-api: add developer portal, OpenAPI spec, and Flatenbadet case study
- 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
2026-07-14 15:27:33 +00:00

772 lines
32 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="canonical" href="https://www.quixzoom.com/privacy.html">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>Privacy Policy quiXzoom</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<meta name="description" content="quiXzoom Privacy Policy — how we collect, use, and protect your personal data.">
<style>
:root {
--bg: #F2F2F7;
--surface: #FFFFFF;
--surface2: #F2F2F7;
--label: #000000;
--label2: #3C3C43;
--label3: rgba(60,60,67,0.65);
--separator: rgba(60,60,67,0.29);
--accent: #0066FF;
--font: -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif;
--font-display: -apple-system, "SF Pro Display", "Helvetica Neue", sans-serif;
--radius-lg: 16px;
--radius-sm: 10px;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #000000;
--surface: #1C1C1E;
--surface2: #2C2C2E;
--label: #FFFFFF;
--label2: #EBEBF5;
--label3: rgba(235,235,245,0.65);
--separator: rgba(84,84,88,0.65);
}
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }
body {
font-family: var(--font);
background: var(--bg);
color: var(--label);
padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env(safe-area-inset-bottom, 40px) env(safe-area-inset-left, 20px);
max-width: 680px;
margin: 0 auto;
}
header { padding: 32px 0 24px; text-align: center; }
header .logo { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.5px; color: var(--accent); }
header h1 { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--label); margin-top: 6px; }
header p { font-size: 13px; color: var(--label3); margin-top: 4px; }
.card { background: var(--surface); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 12px; }
.card-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--label); margin-bottom: 12px; }
p, li { font-size: 15px; line-height: 1.6; color: var(--label2); }
ul { padding-left: 20px; margin-top: 8px; }
li { margin-bottom: 6px; }
.row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 0.5px solid var(--separator); }
.row:last-child { border-bottom: none; }
.row-icon { width: 36px; height: 36px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.blue { background: rgba(0,102,255,0.12); }
.green { background: rgba(52,199,89,0.12); }
.orange { background: rgba(255,149,0,0.12); }
.red { background: rgba(255,59,48,0.12); }
.purple { background: rgba(175,82,222,0.12); }
.teal { background: rgba(50,173,230,0.12); }
.row-content { flex: 1; }
.row-label { font-size: 15px; font-weight: 600; color: var(--label); }
.row-sub { font-size: 13px; color: var(--label3); margin-top: 2px; line-height: 1.5; }
a { color: var(--accent); text-decoration: none; }
footer { text-align: center; padding: 24px 0 8px; font-size: 13px; color: var(--label3); }
@media (max-width: 640px) {
.hero h1 { font-size: 2rem !important; }
.hero p { font-size: 1rem !important; }
.card { padding: 1.5rem !important; }
.grid { grid-template-columns: 1fr !important; }
.btn { padding: 0.75rem 1.5rem !important; font-size: 1rem !important; }
}
/* QUIXZOOM STANDARD — Dark Theme */
:root {
--qz-bg: #0a0a0a;
--qz-surface: #111111;
--qz-surface-2: #1a1a1a;
--qz-border: rgba(255,255,255,0.08);
--qz-text: #e8e8e8;
--qz-text-dim: #a0a0a0;
--qz-text-muted: #6b6b6b;
--qz-blue: #007AFF;
--qz-blue-dark: #0056CC;
--qz-radius: 10px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
background: var(--qz-bg);
color: var(--qz-text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* Navigation */
.qz-nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 0 24px; height: 56px;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--qz-border);
}
.qz-nav-logo { font-size: 18px; font-weight: 700; color: #fff; text-decoration: none; }
.qz-nav-links { display: flex; gap: 24px; list-style: none; }
.qz-nav-links a { font-size: 14px; color: var(--qz-text-dim); text-decoration: none; transition: color 0.2s; }
.qz-nav-links a:hover { color: #fff; }
/* Buttons */
.qz-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 12px 24px; border-radius: var(--qz-radius);
font-size: 15px; font-weight: 600; text-decoration: none;
transition: all 0.2s; cursor: pointer; border: none;
}
.qz-btn-primary {
background: var(--qz-blue); color: #fff;
}
.qz-btn-primary:hover {
background: var(--qz-blue-dark); transform: translateY(-1px);
}
.qz-btn-ghost {
background: transparent; color: var(--qz-text);
border: 1px solid var(--qz-border);
}
.qz-btn-ghost:hover {
border-color: var(--qz-blue); color: var(--qz-blue);
}
/* Cards */
.qz-card {
background: var(--qz-surface);
border: 1px solid var(--qz-border);
border-radius: var(--qz-radius);
padding: 24px;
transition: transform 0.2s, border-color 0.2s;
}
.qz-card:hover {
transform: translateY(-2px);
border-color: rgba(0,122,255,0.3);
}
/* Footer */
.qz-footer {
border-top: 1px solid var(--qz-border);
padding: 40px 24px;
text-align: center;
color: var(--qz-text-dim);
font-size: 14px;
}
/* Banner */
.qz-banner {
background: #001E50;
color: rgba(255,255,255,0.55);
text-align: center;
padding: 10px;
font-size: 12px;
}
.qz-banner a { color: rgba(255,255,255,0.8); text-decoration: none; }
@media (max-width: 768px) {
.qz-nav-links { display: none; }
}
</style>
<meta property="og:type" content="website">
<meta property="og:title" content="Privacy Policy quiXzoom">
<meta property="og:description" content="quiXzoom — Earn per Mission. No Platform Fee.">
<meta property="og:url" content="https://www.quixzoom.com/privacy.html">
<meta property="og:image" content="https://www.quixzoom.com/images/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="quiXzoom Privacy Policy">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://www.quixzoom.com/images/og-image.jpg">
<meta name="twitter:title" content="Privacy Policy quiXzoom">
<script type="module" src="https://auth.quixzoom.com/site-auth-snippet.js"></script>
<link rel="alternate" hreflang="en" href="https://www.quixzoom.com/" />
<link rel="alternate" hreflang="sv" href="https://www.quixzoom.com/sv/" />
<link rel="alternate" hreflang="de" href="https://www.quixzoom.com/de/" />
<link rel="alternate" hreflang="fr" href="https://www.quixzoom.com/fr/" />
<link rel="alternate" hreflang="es" href="https://www.quixzoom.com/es/" />
<link rel="alternate" hreflang="it" href="https://www.quixzoom.com/it/" />
<link rel="alternate" hreflang="nl" href="https://www.quixzoom.com/nl/" />
<link rel="alternate" hreflang="x-default" href="https://www.quixzoom.com/" />
</head>
<body>
<header class="qz-nav">
<div class="logo">quiXzoom</div>
<h1>Privacy Policy</h1>
<p>Last updated: 18 June 2026 &nbsp;·&nbsp; Version 1.1</p>
</header>
<div class="card">
<div class="card-title">Introduction</div>
<p>quiXzoom ("we", "us") is a crowdsourced field data collection platform operated by Landvex AB, org. no. 559141-7042, registered in Sweden. This policy explains how we collect, use and protect your personal data in accordance with GDPR (EU 2016/679) and applicable national law.</p>
<p style="margin-top:10px;">By using the app you accept this policy. If you do not accept it, do not use the service.</p>
</div>
<div class="card">
<div class="card-title">Data Controller</div>
<div class="row">
<div class="row-icon blue">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0066ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9M15 21V9"/></svg>
</div>
<div class="row-content">
<div class="row-label">Landvex AB</div>
<div class="row-sub">Data Protection contact: <a href="mailto:privacy@quixzoom.com">privacy@quixzoom.com</a><br>Address: Landvex AB, Tyresö, Sweden</div>
</div>
</div>
</div>
<div class="card">
<div class="card-title">What data do we collect?</div>
<div class="row">
<div class="row-icon blue">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0066ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
</div>
<div class="row-content">
<div class="row-label">Account data</div>
<div class="row-sub">Name, email address, phone number, bank account number (for payouts), identity document (KYC — stored encrypted).</div>
</div>
</div>
<div class="row">
<div class="row-icon green">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#34c759" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
</div>
<div class="row-content">
<div class="row-label">Location data</div>
<div class="row-sub">GPS coordinates at mission acceptance, check-in and image upload. We do not collect background location outside active missions.</div>
</div>
</div>
<div class="row">
<div class="row-icon orange">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ff9500" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
</div>
<div class="row-content">
<div class="row-label">Images and media</div>
<div class="row-sub">Photos uploaded as part of a mission. Images may contain EXIF metadata (camera, date, coordinates) which we retain for quality verification.</div>
</div>
</div>
<div class="row">
<div class="row-icon purple">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#af52de" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
</div>
<div class="row-content">
<div class="row-label">Device information</div>
<div class="row-sub">Device model, OS version, app version, push notification token. Never IDFA/IDFV without explicit consent.</div>
</div>
</div>
<div class="row">
<div class="row-icon teal">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#32ade6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
</div>
<div class="row-content">
<div class="row-label">Payment data</div>
<div class="row-sub">Payout history, mission earnings (in local currency), tax documentation. Card details are never handled directly by us.</div>
</div>
</div>
</div>
<div class="card">
<div class="card-title">How do we use your data?</div>
<div class="row">
<div class="row-icon blue">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0066ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
</div>
<div class="row-content">
<div class="row-label">Performance of contract (Art. 6.1b GDPR)</div>
<div class="row-sub">Match Zoomers with missions, verify submissions, process payouts, generate tax documentation.</div>
</div>
</div>
<div class="row">
<div class="row-icon green">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#34c759" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
</div>
<div class="row-content">
<div class="row-label">Legal obligation (Art. 6.1c GDPR)</div>
<div class="row-sub">Accounting law (7 years), AML/KYC requirements, statutory tax reporting obligations.</div>
</div>
</div>
<div class="row">
<div class="row-icon orange">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ff9500" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
</div>
<div class="row-content">
<div class="row-label">Legitimate interest (Art. 6.1f GDPR)</div>
<div class="row-sub">Fraud prevention, platform integrity, push notifications about nearby missions.</div>
</div>
</div>
<div class="row">
<div class="row-icon purple">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#af52de" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</div>
<div class="row-content">
<div class="row-label">Consent (Art. 6.1a GDPR)</div>
<div class="row-sub">Marketing via email/SMS, analytics cookies (if accepted via cookie banner).</div>
</div>
</div>
</div>
<div class="card">
<div class="card-title">Image processing and AI</div>
<p>Images you upload are used to build structured field intelligence datasets. They are processed by Landvex AB's AI infrastructure — no third-party model is trained on your images. Images are stored in the EU (Stockholm, eu-north-1) and deleted after 5 years unless the client requests longer retention.</p>
<p style="margin-top:10px;">We never sell your images to third parties. Clients (e.g. insurance companies, municipalities) who commissioned a mission receive access to the delivered intelligence output, not to your raw camera images.</p>
<p style="margin-top:10px;">Anonymised observation data (imagery de-identified from your personal data) is licensed to Landvex for the production of intelligence products. This is covered by a Data Processing Agreement. Your identity is never disclosed to any client or intelligence recipient.</p>
</div>
<div class="card">
<div class="card-title">Cookies</div>
<div class="row">
<div class="row-icon green">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#34c759" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
</div>
<div class="row-content">
<div class="row-label">Necessary cookies</div>
<div class="row-sub">Session ID, CSRF token. Cannot be disabled — required for the app to function.</div>
</div>
</div>
<div class="row">
<div class="row-icon blue">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0066ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
</div>
<div class="row-content">
<div class="row-label">Analytics cookies (requires consent)</div>
<div class="row-sub">Anonymised app usage via Landvex Analytics (no data to Google Analytics). Stored in EU, max 13 months.</div>
</div>
</div>
</div>
<div class="card">
<div class="card-title">Zoomer relationship</div>
<p>Zoomers are engaged as independent contractors, not employees. We are the data controller for data collected through the app. You are responsible for not photographing individuals or private property outside the scope of the mission without authorisation.</p>
<p style="margin-top:10px;">Income from quiXzoom is taxable. We report earnings to relevant tax authorities for payouts that exceed applicable reporting thresholds in your country.</p>
</div>
<div class="card">
<div class="card-title">Your rights</div>
<div class="row">
<div class="row-icon blue">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0066ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
</div>
<div class="row-content">
<div class="row-label">Access</div>
<div class="row-sub">Request a copy of all data we hold about you.</div>
</div>
</div>
<div class="row">
<div class="row-icon green">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#34c759" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
</div>
<div class="row-content">
<div class="row-label">Rectification</div>
<div class="row-sub">Correct inaccurate data directly in the app under Settings → Profile.</div>
</div>
</div>
<div class="row">
<div class="row-icon red">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ff3b30" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>
</div>
<div class="row-content">
<div class="row-label">Erasure ("right to be forgotten")</div>
<div class="row-sub">Request account deletion. Note: data required for accounting is retained for 7 years by law.</div>
</div>
</div>
<div class="row">
<div class="row-icon orange">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ff9500" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="8 17 12 21 16 17"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29"/></svg>
</div>
<div class="row-content">
<div class="row-label">Data portability</div>
<div class="row-sub">Export your missions and payment history in machine-readable format (JSON/CSV).</div>
</div>
</div>
<div class="row">
<div class="row-icon purple">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#af52de" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg>
</div>
<div class="row-content">
<div class="row-label">Objection and restriction</div>
<div class="row-sub">Object to processing based on legitimate interest. Restrict processing during a dispute.</div>
</div>
</div>
<p style="margin-top:12px; font-size:13px; color:var(--label3);">Send requests to <a href="mailto:privacy@quixzoom.com">privacy@quixzoom.com</a>. We respond within 30 days. You have the right to lodge a complaint with your national supervisory authority.</p>
</div>
<div class="card">
<div class="card-title">Data storage and security</div>
<ul>
<li>All data stored in the EU (AWS eu-north-1, Stockholm).</li>
<li>Encryption at rest (AES-256) and in transit (TLS 1.3).</li>
<li>Account data deleted within 90 days of account closure.</li>
<li>Payment and tax data retained for 7 years (accounting law).</li>
<li>Images linked to completed missions retained for 5 years.</li>
</ul>
</div>
<div class="card">
<div class="card-title">Third-party providers</div>
<p>We share data with a minimal number of trusted partners, all operating under GDPR-compliant data processing agreements:</p>
<ul style="margin-top:8px;">
<li><strong>AWS</strong> — cloud infrastructure (EU region)</li>
<li><strong>Stripe</strong> — Zoomer payouts via Stripe Connect</li>
<li><strong>Tax authorities</strong> — statutory reporting</li>
</ul>
<p style="margin-top:10px;">We never sell, rent or trade your data with advertisers.</p>
</div>
<div class="card">
<div class="card-title">Contact</div>
<div class="row">
<div class="row-icon blue">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0066ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
</div>
<div class="row-content">
<div class="row-label">Data protection enquiries</div>
<div class="row-sub"><a href="mailto:privacy@quixzoom.com">privacy@quixzoom.com</a></div>
</div>
</div>
<div class="row">
<div class="row-icon green">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#34c759" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
</div>
<div class="row-content">
<div class="row-label">Support</div>
<div class="row-sub"><a href="/support">quixzoom.com/support</a></div>
</div>
</div>
</div>
<footer class="qz-footer">
<p>© 2026 Landvex AB · <a href="terms/index.html">Terms of Service</a> · <a href="privacy/index.html">Privacy Policy</a></p>
<p style="margin-top:4px;">quiXzoom is a trademark of Landvex AB</p>
</footer>
<!-- quiXzoom Mina Sidor - Universal Header Component -->
<!-- Injicera detta i <head> på alla quiXzoom-sajter -->
<style>
.qz-auth-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 48px;
background: #0A0A0A;
border-bottom: 1px solid rgba(255,255,255,0.1);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
z-index: 9999;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
}
.qz-auth-bar .qz-logo {
font-size: 18px;
font-weight: 700;
color: #fff;
text-decoration: none;
letter-spacing: -0.5px;
}
.qz-auth-bar .qz-logo span {
color: #007AFF;
}
.qz-auth-bar .qz-nav {
display: flex;
gap: 8px;
align-items: center;
}
.qz-auth-bar .qz-btn {
padding: 8px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
border: none;
text-decoration: none;
}
.qz-auth-bar .qz-btn-primary {
background: #007AFF;
color: white;
}
.qz-auth-bar .qz-btn-primary:hover {
background: #0056CC;
}
.qz-auth-bar .qz-btn-ghost {
background: transparent;
color: rgba(255,255,255,0.8);
}
.qz-auth-bar .qz-btn-ghost:hover {
background: rgba(255,255,255,0.1);
color: white;
}
.qz-auth-bar .qz-user {
display: flex;
align-items: center;
gap: 8px;
color: white;
font-size: 14px;
}
.qz-auth-bar .qz-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: #007AFF;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
}
.qz-auth-bar .qz-dropdown {
position: relative;
}
.qz-auth-bar .qz-dropdown-menu {
position: absolute;
top: 40px;
right: 0;
background: #1C1C1E;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px;
padding: 8px;
min-width: 200px;
display: none;
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.qz-auth-bar .qz-dropdown-menu.active {
display: block;
}
.qz-auth-bar .qz-dropdown-item {
padding: 10px 12px;
border-radius: 8px;
color: white;
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
transition: background 0.2s;
}
.qz-auth-bar .qz-dropdown-item:hover {
background: rgba(255,255,255,0.1);
}
.qz-auth-bar .qz-dropdown-divider {
height: 1px;
background: rgba(255,255,255,0.1);
margin: 8px 0;
}
.qz-auth-bar .qz-balance {
background: rgba(0,122,255,0.15);
color: #007AFF;
padding: 4px 10px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
}
@media (max-width: 640px) {
.qz-auth-bar .qz-nav .qz-btn-ghost:not(.qz-user) {
display: none;
}
}
/* 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>
<div id="qz-auth-bar" class="qz-auth-bar">
<a href="https://quixzoom.com" class="qz-logo">qui<span>X</span>zoom</a>
<div class="qz-nav">
<div id="qz-auth-guest">
<a href="https://app.quixzoom.com/login" class="qz-btn qz-btn-ghost">Logga in</a>
<a href="https://app.quixzoom.com/register" class="qz-btn qz-btn-primary">Bli Zoomer</a>
</div>
<div id="qz-auth-user" style="display:none;">
<span class="qz-balance" id="qz-balance">$0.00</span>
<div class="qz-dropdown">
<button class="qz-btn qz-btn-ghost qz-user" onclick="qzToggleDropdown()">
<div class="qz-avatar" id="qz-avatar">E</div>
<span id="qz-user-name">Erik</span>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2.5 4.5L6 8L9.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<div class="qz-dropdown-menu" id="qz-dropdown-menu">
<a href="https://app.quixzoom.com/dashboard" class="qz-dropdown-item">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/></svg>
Dashboard
</a>
<a href="https://app.quixzoom.com/wallet" class="qz-dropdown-item">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12V7H5a2 2 0 0 1 0-4h14v4"/><path d="M3 5v14a2 2 0 0 0 2 2h16v-5"/><path d="M18 12a2 2 0 0 0 0 4h4v-4h-4z"/></svg>
Plånbok
</a>
<a href="https://app.quixzoom.com/missions" class="qz-dropdown-item">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
Mina uppdrag
</a>
<div class="qz-dropdown-divider"></div>
<a href="https://app.quixzoom.com/settings" class="qz-dropdown-item">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.67 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.67 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.67a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
Inställningar
</a>
<a href="#" onclick="qzLogout(); return false;" class="qz-dropdown-item">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
Logga ut
</a>
</div>
</div>
</div>
</div>
</div>
<script>
(function() {
const SSO_BASE = 'https://auth.quixzoom.com';
const APP_BASE = 'https://app.quixzoom.com';
// Check auth status
async function qzCheckAuth() {
try {
const res = await fetch(SSO_BASE + '/auth/check', {
credentials: 'include',
});
if (res.ok) {
const data = await res.json();
if (data.authenticated) {
document.getElementById('qz-auth-guest').style.display = 'none';
document.getElementById('qz-auth-user').style.display = 'flex';
document.getElementById('qz-user-name').textContent = data.user.name || data.user.email;
document.getElementById('qz-avatar').textContent = (data.user.name || data.user.email)[0].toUpperCase();
if (data.user.balance !== undefined) {
document.getElementById('qz-balance').textContent = '$' + data.user.balance.toFixed(2);
}
}
}
} catch (e) {
// Silent fail - show guest state
}
}
// Toggle dropdown
window.qzToggleDropdown = function() {
document.getElementById('qz-dropdown-menu').classList.toggle('active');
};
// Close dropdown on outside click
document.addEventListener('click', function(e) {
if (!e.target.closest('.qz-dropdown')) {
document.getElementById('qz-dropdown-menu').classList.remove('active');
}
});
// Logout
window.qzLogout = async function() {
try {
await fetch(SSO_BASE + '/auth/logout', {
method: 'POST',
credentials: 'include',
});
} catch (e) {}
document.cookie = 'qz_access_token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; domain=.quixzoom.com; path=/;';
document.cookie = 'qz_refresh_token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; domain=.quixzoom.com; path=/;';
window.location.reload();
};
// Init
qzCheckAuth();
})();
</script>
</body>
</html>