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
739 lines
23 KiB
HTML
739 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Features — quiXzoom</title>
|
|
<meta name="description" content="Discover quiXzoom features: AI-powered quality review, real-time tracking, global coverage, and enterprise-grade security.">
|
|
<link rel="canonical" href="https://www.quixzoom.com/features">
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="Features — quiXzoom">
|
|
<meta property="og:description" content="Discover quiXzoom features: AI-powered quality review, real-time tracking, global coverage, and enterprise-grade security.">
|
|
<meta property="og:url" content="https://www.quixzoom.com/features">
|
|
<meta property="og:image" content="https://www.quixzoom.com/images/og-image.jpg">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:image" content="https://www.quixzoom.com/images/og-image.jpg">
|
|
<style>
|
|
:root {
|
|
--bg-dark: #f5f5f7;
|
|
--blue: #0066FF;
|
|
--blue-dark: #0052CC;
|
|
--blue-glow: rgba(0,102,255,0.10);
|
|
--text-dark: #1d1d1f;
|
|
--text-body: #3a3a3a;
|
|
--text-muted: #6e6e73;
|
|
--surface: #ffffff;
|
|
--surface-2: #f5f5f7;
|
|
--border: rgba(0,0,0,0.09);
|
|
}
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', sans-serif;
|
|
background: #ffffff;
|
|
color: var(--text-dark);
|
|
line-height: 1.6;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
|
|
|
|
/* Nav */
|
|
nav {
|
|
position: sticky; top: 0; z-index: 300;
|
|
background: rgba(255,255,255,0.92);
|
|
backdrop-filter: blur(20px);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
|
|
.nav-logo { font-size: 1.375rem; font-weight: 900; color: var(--text-dark); text-decoration: none; }
|
|
.nav-logo span { color: var(--blue); }
|
|
.nav-links { display: flex; gap: 32px; }
|
|
.nav-links a { color: var(--text-muted); text-decoration: none; font-weight: 500; transition: color 0.15s; }
|
|
.nav-links a:hover { color: var(--text-dark); }
|
|
.nav-links a.active { color: var(--blue); }
|
|
.btn-nav { background: var(--blue); color: #fff; border: none; border-radius: 24px; padding: 10px 24px; font-size: 0.9375rem; font-weight: 700; transition: background 0.15s; text-decoration: none; }
|
|
.btn-nav:hover { background: var(--blue-dark); }
|
|
|
|
/* Hero */
|
|
.hero { padding: 80px 0 60px; text-align: center; background: var(--surface); }
|
|
.hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 20px; }
|
|
.hero p { font-size: 1.25rem; color: var(--text-body); max-width: 600px; margin: 0 auto; }
|
|
|
|
/* Features Grid */
|
|
.features { padding: 60px 0; }
|
|
.section-title { text-align: center; margin-bottom: 48px; }
|
|
.section-title h2 { font-size: 2rem; font-weight: 700; margin-bottom: 12px; }
|
|
.section-title p { font-size: 1.1rem; color: var(--text-muted); }
|
|
|
|
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
|
|
.feature-card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-xl);
|
|
padding: 40px;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
}
|
|
.feature-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 12px 40px rgba(0,0,0,0.08);
|
|
}
|
|
.feature-icon {
|
|
width: 48px; height: 48px;
|
|
background: var(--blue-glow);
|
|
border-radius: var(--radius-md);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 1.5rem; margin-bottom: 20px;
|
|
}
|
|
.feature-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; }
|
|
.feature-card p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; }
|
|
|
|
/* Feature List */
|
|
.feature-list { padding: 40px 0; }
|
|
.feature-row {
|
|
display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
|
|
align-items: center; margin-bottom: 80px;
|
|
}
|
|
.feature-row.reverse { direction: rtl; }
|
|
.feature-row.reverse > * { direction: ltr; }
|
|
.feature-content h3 { font-size: 1.75rem; font-weight: 700; margin-bottom: 16px; }
|
|
.feature-content p { font-size: 1rem; color: var(--text-body); line-height: 1.7; margin-bottom: 16px; }
|
|
.feature-content ul { list-style: none; }
|
|
.feature-content ul li {
|
|
padding: 6px 0; font-size: 0.95rem; color: var(--text-body);
|
|
display: flex; align-items: center; gap: 8px;
|
|
}
|
|
.feature-content ul li::before {
|
|
content: "→"; color: var(--blue); font-weight: 700;
|
|
}
|
|
.feature-visual {
|
|
background: var(--surface-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-xl);
|
|
padding: 40px;
|
|
min-height: 300px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.feature-visual-placeholder {
|
|
text-align: center; color: var(--text-muted);
|
|
}
|
|
|
|
/* CTA */
|
|
.cta {
|
|
background: var(--surface);
|
|
border-top: 1px solid var(--border);
|
|
padding: 80px 0;
|
|
text-align: center;
|
|
}
|
|
.cta h2 { font-size: 2.5rem; font-weight: 800; margin-bottom: 16px; }
|
|
.cta p { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 32px; }
|
|
.btn {
|
|
display: inline-block; padding: 16px 32px;
|
|
background: var(--blue); color: #fff;
|
|
border: none; border-radius: var(--radius-md);
|
|
font-size: 1rem; font-weight: 600;
|
|
text-decoration: none;
|
|
cursor: pointer; transition: background 0.2s;
|
|
}
|
|
.btn:hover { background: var(--blue-dark); }
|
|
|
|
/* Footer */
|
|
footer { background: var(--surface); border-top: 1px solid var(--border); padding: 40px 0; }
|
|
.footer-inner { display: flex; justify-content: space-between; align-items: center; }
|
|
.footer-links { display: flex; gap: 24px; }
|
|
.footer-links a { color: var(--text-muted); text-decoration: none; font-size: 0.875rem; }
|
|
.footer-links a:hover { color: var(--text-dark); }
|
|
|
|
@media (max-width: 768px) {
|
|
.nav-links { display: none; }
|
|
.feature-grid { grid-template-columns: 1fr; }
|
|
.feature-row { grid-template-columns: 1fr; gap: 24px; }
|
|
.feature-row.reverse { direction: ltr; }
|
|
}
|
|
/* 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>
|
|
@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>
|
|
<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>
|
|
<nav class="qz-nav">
|
|
<div class="container">
|
|
<div class="nav-inner">
|
|
<a href="/" class="nav-logo">qui<span>X</span>zoom</a>
|
|
<div class="nav-links">
|
|
<a href="/order/">Order</a>
|
|
<a href="/pricing/">Pricing</a>
|
|
<a href="/earn/">Earn as Zoomer</a>
|
|
<a href="/for-organisations/">For Organisations</a>
|
|
<a href="/about">About</a>
|
|
</div>
|
|
</div>
|
|
<a href="/order/" class="btn-nav">Start Order →</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<section class="hero">
|
|
<div class="container">
|
|
<h1>Everything you need to<br>collect field intelligence</h1>
|
|
<p>From mission creation to verified data delivery — quiXzoom handles the entire workflow so you can focus on decisions.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="features">
|
|
<div class="container">
|
|
<div class="section-title">
|
|
<h2>Platform capabilities</h2>
|
|
<p>Built for scale, designed for simplicity</p>
|
|
</div>
|
|
<div class="feature-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon"></div>
|
|
<h3>AI Quality Review</h3>
|
|
<p>Every submission is automatically checked for completeness, image quality, GPS accuracy, and compliance with mission requirements before payment.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon"></div>
|
|
<h3>Global Coverage</h3>
|
|
<p>Launching in 5 markets in phases — Sweden first (August 2026), with Netherlands, Thailand, Nigeria and Kenya to follow. Localized mission types, languages, and payment methods for each market.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M9 2L5 9H8L7 14L11 7H8L9 2Z" fill="#f59e0b"/></svg></div>
|
|
<h3>Real-time Tracking</h3>
|
|
<p>Monitor mission progress in real-time. See which missions are active, completed, or need attention — all in one dashboard.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon"></div>
|
|
<h3>Enterprise Security</h3>
|
|
<p>GDPR compliant, EU data residency, SOC 2 Type II certified. Your data is encrypted at rest and in transit.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon"></div>
|
|
<h3>Advanced Analytics</h3>
|
|
<p>Turn raw observations into actionable insights. Trend analysis, change detection, and automated reporting.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon"></div>
|
|
<h3>API & Integrations</h3>
|
|
<p>RESTful API with comprehensive documentation. Webhooks for real-time updates. Integrate with your existing tools and workflows.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="feature-list">
|
|
<div class="container">
|
|
<div class="feature-row">
|
|
<div class="feature-content">
|
|
<h3>Mission creation in minutes</h3>
|
|
<p>Define scope, set requirements, and launch missions — all from a single interface. No technical expertise required.</p>
|
|
<ul>
|
|
<li>Visual mission builder</li>
|
|
<li>Template library</li>
|
|
<li>Geofenced boundaries</li>
|
|
<li>Custom requirements</li>
|
|
</ul>
|
|
</div>
|
|
<div class="feature-visual">
|
|
<div class="feature-visual-placeholder">
|
|
<div style="font-size:3rem;margin-bottom:12px;"></div>
|
|
<div>Mission Builder Interface</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feature-row reverse">
|
|
<div class="feature-content">
|
|
<h3>Verified Zoomer network</h3>
|
|
<p>Every Zoomer is identity-verified and rated. Build trusted relationships with high-performing field collectors.</p>
|
|
<ul>
|
|
<li>Identity verification</li>
|
|
<li>Performance ratings</li>
|
|
<li>Skill matching</li>
|
|
<li>Direct communication</li>
|
|
</ul>
|
|
</div>
|
|
<div class="feature-visual">
|
|
<div class="feature-visual-placeholder">
|
|
<div style="font-size:3rem;margin-bottom:12px;"></div>
|
|
<div>Zoomer Network</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feature-row">
|
|
<div class="feature-content">
|
|
<h3>Automated payouts</h3>
|
|
<p>Zoomers get paid every Monday for approved missions. No invoicing, no delays, no hassle.</p>
|
|
<ul>
|
|
<li>Weekly payment cycles</li>
|
|
<li>Stripe Connect integration</li>
|
|
<li>Multi-currency support</li>
|
|
<li>Tax documentation</li>
|
|
</ul>
|
|
</div>
|
|
<div class="feature-visual">
|
|
<div class="feature-visual-placeholder">
|
|
<div style="font-size:3rem;margin-bottom:12px;"></div>
|
|
<div>Payment Dashboard</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="cta">
|
|
<div class="container">
|
|
<h2>Ready to see it in action?</h2>
|
|
<p>Start collecting field intelligence today. No setup fees, no long-term contracts.</p>
|
|
<a href="/join" class="btn">Get started free</a>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="qz-footer">
|
|
<div class="container">
|
|
<div class="footer-inner">
|
|
<div>© 2026 quiXzoom · Operated by Landvex AB</div>
|
|
<div class="footer-links">
|
|
<a href="privacy/index.html">Privacy</a>
|
|
<a href="terms/index.html">Terms</a>
|
|
<a href="/support">Support</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
|
|
</body>
|
|
</html> |