Bernt
48ea61cdcc
- Product documentation in docs/products/ - Updated MEMORY.md with product info - quiXzoom Auth Core as AAMOS Identity product
750 lines
34 KiB
HTML
750 lines
34 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="{{LANG}}">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>{{TITLE}}</title>
|
||
<meta name="description" content="{{META_DESC}}">
|
||
<link rel="canonical" href="https://quixzoom.asia/{{LANG_CODE}}/">
|
||
<!-- hreflang tags -->
|
||
<link rel="alternate" hreflang="zh-CN" href="https://quixzoom.asia/zh-cn/">
|
||
<link rel="alternate" hreflang="zh-TW" href="https://quixzoom.asia/zh-tw/">
|
||
<link rel="alternate" hreflang="ja" href="https://quixzoom.asia/ja/">
|
||
<link rel="alternate" hreflang="ko" href="https://quixzoom.asia/ko/">
|
||
<link rel="alternate" hreflang="th" href="https://quixzoom.asia/th/">
|
||
<link rel="alternate" hreflang="vi" href="https://quixzoom.asia/vi/">
|
||
<link rel="alternate" hreflang="id" href="https://quixzoom.asia/id/">
|
||
<link rel="alternate" hreflang="ms" href="https://quixzoom.asia/ms/">
|
||
<link rel="alternate" hreflang="hi" href="https://quixzoom.asia/hi/">
|
||
<link rel="alternate" hreflang="en" href="https://www.quixzoom.com/">
|
||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||
<style>
|
||
:root {
|
||
--bg: #FFFFFF;
|
||
--bg-off: #F7F7F5;
|
||
--text: #1a1a1a;
|
||
--text-body: #3a3a3a;
|
||
--text-muted: #6B6B6B;
|
||
--blue: #0066FF;
|
||
--blue-dark: #0052CC;
|
||
--blue-pale: rgba(0,102,255,.07);
|
||
--green: #00C853;
|
||
--radius: 16px;
|
||
--radius-lg: 24px;
|
||
--shadow: 0 16px 48px rgba(0,0,0,.14);
|
||
}
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
html { scroll-behavior: smooth; }
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
font-size: 1rem; line-height: 1.65; color: var(--text-body);
|
||
background: var(--bg); -webkit-font-smoothing: antialiased;
|
||
}
|
||
.container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
|
||
h1 { font-size: clamp(2.75rem, 6vw, 5rem); font-weight: 900; letter-spacing: -.05em; line-height: 1; color: var(--text); }
|
||
h2 { font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.1; color: var(--text); }
|
||
h3 { font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; color: var(--text); }
|
||
|
||
/* Nav */
|
||
nav { position: sticky; top: 0; z-index: 300; background: var(--bg-off); border-bottom: 1px solid rgba(58,58,58,.06); }
|
||
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 32px; }
|
||
.nav-logo { font-size: 1.375rem; font-weight: 900; color: var(--text); letter-spacing: -.04em; text-decoration: none; }
|
||
.nav-logo .x { color: var(--blue); }
|
||
.nav-links { display: flex; align-items: center; gap: 32px; flex: 1; justify-content: center; }
|
||
.nav-links a { color: rgba(58,58,58,.75); font-size: 1rem; font-weight: 500; transition: color .15s; text-decoration: none; }
|
||
.nav-links a:hover { color: var(--text); }
|
||
.btn-nav { background: var(--blue); color: #fff; border: none; border-radius: var(--radius-lg); padding: 10px 24px; font-size: 1rem; font-weight: 700; transition: background .15s; white-space: nowrap; cursor: pointer; }
|
||
.btn-nav:hover { background: var(--blue-dark); }
|
||
|
||
/* Hero */
|
||
#hero { background: var(--bg-off); min-height: calc(100vh - 68px); display: flex; align-items: center; padding: 80px 0 96px; }
|
||
.hero-layout { display: grid; grid-template-columns: 1fr 420px; gap: 64px; align-items: center; }
|
||
.hero-inner { max-width: 560px; }
|
||
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(58,58,58,.07); border: 1px solid rgba(58,58,58,.12); border-radius: 100px; padding: 8px 18px; font-size: .875rem; font-weight: 600; color: rgba(58,58,58,.88); margin-bottom: 36px; }
|
||
.hero-h1 { color: var(--text); margin-bottom: 28px; }
|
||
.hero-h1 em { font-style: normal; color: var(--blue); }
|
||
.hero-sub { font-size: clamp(1.0625rem, 2vw, 1.25rem); color: rgba(58,58,58,.82); max-width: 640px; line-height: 1.6; margin-bottom: 44px; }
|
||
.wl-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
|
||
.wl-input { flex: 1; min-width: 280px; background: #fff; color: var(--text); border: 2.5px solid #fff; border-radius: var(--radius-lg); padding: 18px 28px; font-size: 1rem; outline: none; transition: border-color .15s, box-shadow .15s; }
|
||
.wl-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,102,255,.18); }
|
||
.wl-submit { background: var(--blue); color: #fff; border: none; border-radius: var(--radius-lg); padding: 18px 36px; font-size: 1rem; font-weight: 800; cursor: pointer; transition: background .15s; white-space: nowrap; }
|
||
.wl-submit:hover { background: var(--blue-dark); }
|
||
.wl-trust { font-size: .875rem; color: rgba(58,58,58,.65); margin-bottom: 20px; }
|
||
.hero-stats-pill { display: flex; gap: 24px; margin-top: 32px; flex-wrap: wrap; }
|
||
.hstat { text-align: left; }
|
||
.hstat-num { font-size: 1.5rem; font-weight: 900; color: var(--text); letter-spacing: -.04em; line-height: 1; }
|
||
.hstat-lbl { font-size: .75rem; color: rgba(58,58,58,.75); margin-top: 2px; }
|
||
|
||
/* Stats */
|
||
#stats { background: var(--blue); padding: 56px 0; }
|
||
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
|
||
.stat-item { text-align: center; padding: 20px 16px; position: relative; }
|
||
.stat-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background: rgba(255,255,255,.25); }
|
||
.stat-value { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; color: #fff; letter-spacing: -.04em; line-height: 1; display: block; margin-bottom: 8px; }
|
||
.stat-label { font-size: .9rem; color: rgba(255,255,255,.82); font-weight: 500; }
|
||
|
||
/* Sections */
|
||
.section-pad { padding: 96px 0; }
|
||
.section-header { text-align: center; margin-bottom: 64px; }
|
||
.section-header h2 { color: var(--text); margin-bottom: 16px; }
|
||
.section-header p { font-size: 1.125rem; color: var(--text-muted); max-width: 580px; margin: 0 auto; }
|
||
|
||
/* How it works */
|
||
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
|
||
.step-card { background: var(--bg-off); border-radius: var(--radius); padding: 40px 36px; }
|
||
.step-number { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--blue); color: #fff; border-radius: 50%; font-size: 1.375rem; font-weight: 900; margin-bottom: 24px; }
|
||
.step-card h3 { color: var(--text); margin-bottom: 12px; }
|
||
.step-card p { color: var(--text-muted); font-size: .9625rem; line-height: 1.6; }
|
||
|
||
/* Missions */
|
||
.missions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
|
||
.mission-card { background: var(--bg); border: 1.5px solid #E8E8E8; border-radius: var(--radius); padding: 32px 28px; }
|
||
.mission-card:hover { border-color: rgba(0,102,255,.25); }
|
||
.mission-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: var(--bg-off); border-radius: 14px; margin-bottom: 20px; color: var(--blue); }
|
||
.mission-card h3 { color: var(--text); margin-bottom: 10px; font-size: 1.125rem; }
|
||
.mission-card p { color: var(--text-muted); font-size: .9rem; line-height: 1.55; margin-bottom: 18px; }
|
||
.mission-chip { display: inline-block; background: var(--blue-pale); color: var(--blue); border-radius: 100px; padding: 5px 14px; font-size: .875rem; font-weight: 700; }
|
||
|
||
/* Earnings */
|
||
.earnings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 48px; }
|
||
.tier-card { background: var(--bg-off); border: 2px solid #E8E8E8; border-radius: var(--radius); padding: 36px 28px; text-align: center; }
|
||
.tier-card.featured { background: var(--bg-off); border-color: var(--blue); transform: scale(1.03); }
|
||
.tier-card h3 { font-size: 1.5rem; font-weight: 900; margin-bottom: 4px; }
|
||
.tier-missions { font-size: .9rem; color: var(--text-muted); margin-bottom: 20px; font-weight: 500; }
|
||
.tier-features { text-align: left; list-style: none; }
|
||
.tier-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 1rem; color: var(--text-body); padding: 6px 0; }
|
||
.tier-features li::before { content: '✓'; display: block; width: 18px; height: 18px; min-width: 18px; background: var(--green); color: #fff; border-radius: 50%; text-align: center; line-height: 18px; font-size: .75rem; margin-top: 2px; }
|
||
|
||
/* Landvex Authorization */
|
||
#landvex { background: var(--bg-off); }
|
||
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
|
||
.auth-visual { background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%); border-radius: var(--radius); padding: 48px; color: #fff; }
|
||
.auth-visual h3 { color: #fff; margin-bottom: 16px; }
|
||
.auth-visual p { color: rgba(255,255,255,.85); line-height: 1.6; margin-bottom: 24px; }
|
||
.auth-benefits { list-style: none; }
|
||
.auth-benefits li { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: rgba(255,255,255,.9); }
|
||
.auth-benefits li::before { content: '★'; color: #FFD700; }
|
||
.auth-steps { display: flex; flex-direction: column; gap: 20px; }
|
||
.auth-step { display: flex; gap: 16px; align-items: flex-start; }
|
||
.auth-step-num { width: 36px; height: 36px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
|
||
.auth-step h4 { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
|
||
.auth-step p { font-size: .875rem; color: var(--text-muted); line-height: 1.5; }
|
||
|
||
/* FAQ */
|
||
.faq-list { max-width: 760px; margin: 0 auto; }
|
||
.faq-item { border: 1.5px solid #E8E8E8; border-radius: 14px; margin-bottom: 12px; overflow: hidden; }
|
||
.faq-item summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; font-size: 1rem; font-weight: 700; color: var(--text); list-style: none; gap: 16px; }
|
||
.faq-item summary::-webkit-details-marker { display: none; }
|
||
.faq-item summary::after { content: '+'; font-size: 1.5rem; color: var(--blue); transition: transform .15s; }
|
||
.faq-item[open] summary::after { content: '−'; }
|
||
.faq-answer { padding: 0 28px 24px; font-size: .9625rem; color: var(--text-body); line-height: 1.7; }
|
||
|
||
/* Footer */
|
||
footer { background: var(--bg-off); border-top: 1px solid rgba(58,58,58,.07); padding: 64px 0 40px; }
|
||
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; }
|
||
.footer-brand .nav-logo { display: block; margin-bottom: 14px; font-size: 1.5rem; }
|
||
.footer-tagline { color: rgba(58,58,58,.75); font-size: .9rem; line-height: 1.55; margin-bottom: 20px; }
|
||
.footer-col h4 { color: var(--text); font-size: .875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 18px; }
|
||
.footer-col ul { list-style: none; }
|
||
.footer-col ul li { margin-bottom: 10px; }
|
||
.footer-col ul li a { color: rgba(58,58,58,.75); font-size: .9rem; text-decoration: none; transition: color .15s; }
|
||
.footer-col ul li a:hover { color: var(--text); }
|
||
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 32px; border-top: 1px solid rgba(58,58,58,.07); }
|
||
.footer-copyright { color: rgba(58,58,58,.6); font-size: .875rem; }
|
||
.lang-switcher { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
|
||
.lang-switcher a { color: rgba(58,58,58,.75); font-size: .875rem; font-weight: 600; padding: 4px 8px; border-radius: 8px; text-decoration: none; transition: color .15s, background .15s; }
|
||
.lang-switcher a:hover { color: var(--text); background: rgba(58,58,58,.07); }
|
||
.lang-switcher a.active { color: var(--text); background: rgba(0,102,255,.25); }
|
||
|
||
/* Responsive */
|
||
@media(max-width: 960px) {
|
||
.hero-layout { grid-template-columns: 1fr; gap: 40px; }
|
||
.auth-grid { grid-template-columns: 1fr; }
|
||
.footer-inner { grid-template-columns: 1fr 1fr; }
|
||
}
|
||
@media(max-width: 768px) {
|
||
.steps-grid, .missions-grid, .earnings-grid { grid-template-columns: 1fr; }
|
||
.stats-grid { grid-template-columns: repeat(2, 1fr); }
|
||
.nav-links { display: none; }
|
||
.footer-inner { grid-template-columns: 1fr; }
|
||
.footer-bottom { flex-direction: column; align-items: flex-start; }
|
||
}
|
||
@media(max-width: 600px) {
|
||
.wl-row { flex-direction: column; align-items: stretch; }
|
||
.wl-input { min-width: 0; }
|
||
.hero-stats-pill { flex-wrap: wrap; gap: 16px 24px; }
|
||
}
|
||
</style>
|
||
<script type="module" src="https://auth.quixzoom.com/site-auth-snippet.js"></script>
|
||
</head>
|
||
<body>
|
||
<a href="#main-content" style="position:absolute;top:-100px;left:16px;background:var(--blue);color:#fff;padding:10px 20px;border-radius:0 0 8px 8px;font-weight:700;font-size:.9rem;z-index:9999;" onfocus="this.style.top='0'" onblur="this.style.top='-100px'">Skip to main content</a>
|
||
|
||
<nav>
|
||
<div class="container">
|
||
<div class="nav-inner">
|
||
<a href="/" class="nav-logo">qui<span class="x">X</span>zoom</a>
|
||
<div class="nav-links">
|
||
<a href="#how">{{NAV_HOW}}</a>
|
||
<a href="#missions">{{NAV_MISSIONS}}</a>
|
||
<a href="#earnings">{{NAV_EARNINGS}}</a>
|
||
<a href="#landvex">{{NAV_LANDVEX}}</a>
|
||
<a href="#faq">{{NAV_FAQ}}</a>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:10px;flex-shrink:0">
|
||
<button class="btn-nav" onclick="document.getElementById('wl-email').focus();document.getElementById('wl-email').scrollIntoView({behavior:'smooth'})">{{CTA_START}}</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<main id="main-content">
|
||
<!-- HERO -->
|
||
<section id="hero">
|
||
<div class="container">
|
||
<div class="hero-layout">
|
||
<div class="hero-inner">
|
||
<div class="hero-badge">{{HERO_BADGE}}</div>
|
||
<h1 class="hero-h1">{{HERO_H1}}<br><em>{{HERO_H1_EMPH}}</em></h1>
|
||
<p class="hero-sub">{{HERO_SUB}}</p>
|
||
<form onsubmit="event.preventDefault();" novalidate>
|
||
<div class="wl-row">
|
||
<input type="email" id="wl-email" class="wl-input" placeholder="{{EMAIL_PLACEHOLDER}}" required autocomplete="email">
|
||
<button type="submit" class="wl-submit">{{CTA_START}} →</button>
|
||
</div>
|
||
</form>
|
||
<p class="wl-trust">{{TRUST_LINE}}</p>
|
||
<div class="hero-stats-pill">
|
||
<div class="hstat">
|
||
<div class="hstat-num">{{STAT1_NUM}}</div>
|
||
<div class="hstat-lbl">{{STAT1_LBL}}</div>
|
||
</div>
|
||
<div class="hstat">
|
||
<div class="hstat-num">{{STAT2_NUM}}</div>
|
||
<div class="hstat-lbl">{{STAT2_LBL}}</div>
|
||
</div>
|
||
<div class="hstat">
|
||
<div class="hstat-num">{{STAT3_NUM}}</div>
|
||
<div class="hstat-lbl">{{STAT3_LBL}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hero-visual" style="display:flex;justify-content:center;align-items:center;">
|
||
<div style="width:240px;height:480px;background:var(--bg-off);border-radius:36px;border:2px solid rgba(58,58,58,.12);box-shadow:0 40px 80px rgba(0,0,0,.6);position:relative;overflow:hidden;">
|
||
<div style="position:absolute;top:0;left:50%;transform:translateX(-50%);width:80px;height:24px;background:var(--bg-off);border-radius:0 0 16px 16px;z-index:10;"></div>
|
||
<div style="position:absolute;inset:0;background:linear-gradient(160deg,#1a2535 0%,#1e3a2f 40%,#162030 100%);border-radius:34px;overflow:hidden;display:flex;flex-direction:column;">
|
||
<div style="height:40px;background:#f5f5f5;display:flex;align-items:flex-end;justify-content:space-between;padding:0 16px 6px;">
|
||
<span style="color:rgba(58,58,58,.9);font-size:.65rem;font-weight:700;">09:41</span>
|
||
</div>
|
||
<div style="flex:1;position:relative;overflow:hidden;">
|
||
<div style="position:absolute;bottom:0;left:0;right:0;background:#fff;border-radius:20px 20px 0 0;padding:16px;box-shadow:0 -4px 24px rgba(0,0,0,.3);">
|
||
<div style="font-size:.7rem;font-weight:800;color:var(--text);margin-bottom:2px;">{{PHONE_MISSION}}</div>
|
||
<div style="font-size:.6rem;color:#3d3d3d;margin-bottom:8px;">{{PHONE_ADDR}}</div>
|
||
<div style="display:flex;justify-content:space-between;align-items:center;">
|
||
<div>
|
||
<div style="font-size:.85rem;font-weight:900;color:#0066FF;">{{PHONE_REWARD}}</div>
|
||
<div style="font-size:.58rem;color:#4a4a4a;margin-top:4px;">{{PHONE_META}}</div>
|
||
</div>
|
||
<button style="background:#0066FF;color:#fff;border:none;border-radius:12px;padding:6px 12px;font-size:.6rem;font-weight:700;">Claim →</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- STATS -->
|
||
<section id="stats">
|
||
<div class="container">
|
||
<div class="stats-grid">
|
||
<div class="stat-item">
|
||
<span class="stat-value">{{STATS_1_VAL}}</span>
|
||
<span class="stat-label">{{STATS_1_LBL}}</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-value">{{STATS_2_VAL}}</span>
|
||
<span class="stat-label">{{STATS_2_LBL}}</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-value">{{STATS_3_VAL}}</span>
|
||
<span class="stat-label">{{STATS_3_LBL}}</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-value">{{STATS_4_VAL}}</span>
|
||
<span class="stat-label">{{STATS_4_LBL}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- HOW IT WORKS -->
|
||
<section id="how" class="section-pad">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2>{{HOW_TITLE}}</h2>
|
||
<p>{{HOW_SUB}}</p>
|
||
</div>
|
||
<div class="steps-grid">
|
||
<div class="step-card">
|
||
<div class="step-number">1</div>
|
||
<h3>{{STEP1_TITLE}}</h3>
|
||
<p>{{STEP1_DESC}}</p>
|
||
</div>
|
||
<div class="step-card">
|
||
<div class="step-number">2</div>
|
||
<h3>{{STEP2_TITLE}}</h3>
|
||
<p>{{STEP2_DESC}}</p>
|
||
</div>
|
||
<div class="step-card">
|
||
<div class="step-number">3</div>
|
||
<h3>{{STEP3_TITLE}}</h3>
|
||
<p>{{STEP3_DESC}}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- MISSIONS -->
|
||
<section id="missions" class="section-pad" style="background:var(--bg-off);">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2>{{MISSIONS_TITLE}}</h2>
|
||
<p>{{MISSIONS_SUB}}</p>
|
||
</div>
|
||
<div class="missions-grid">
|
||
<div class="mission-card">
|
||
<div class="mission-icon">📷</div>
|
||
<h3>{{M1_TITLE}}</h3>
|
||
<p>{{M1_DESC}}</p>
|
||
<span class="mission-chip">{{M1_CHIP}}</span>
|
||
</div>
|
||
<div class="mission-card">
|
||
<div class="mission-icon">🏢</div>
|
||
<h3>{{M2_TITLE}}</h3>
|
||
<p>{{M2_DESC}}</p>
|
||
<span class="mission-chip">{{M2_CHIP}}</span>
|
||
</div>
|
||
<div class="mission-card">
|
||
<div class="mission-icon">🛣️</div>
|
||
<h3>{{M3_TITLE}}</h3>
|
||
<p>{{M3_DESC}}</p>
|
||
<span class="mission-chip">{{M3_CHIP}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- EARNINGS -->
|
||
<section id="earnings" class="section-pad">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2>{{EARNINGS_TITLE}}</h2>
|
||
<p>{{EARNINGS_SUB}}</p>
|
||
</div>
|
||
<div class="earnings-grid">
|
||
<div class="tier-card">
|
||
<h3>{{TIER1_NAME}}</h3>
|
||
<div class="tier-missions">{{TIER1_MISSIONS}}</div>
|
||
<ul class="tier-features">
|
||
<li>{{TIER1_F1}}</li>
|
||
<li>{{TIER1_F2}}</li>
|
||
<li>{{TIER1_F3}}</li>
|
||
</ul>
|
||
</div>
|
||
<div class="tier-card featured">
|
||
<h3>{{TIER2_NAME}}</h3>
|
||
<div class="tier-missions">{{TIER2_MISSIONS}}</div>
|
||
<ul class="tier-features">
|
||
<li>{{TIER2_F1}}</li>
|
||
<li>{{TIER2_F2}}</li>
|
||
<li>{{TIER2_F3}}</li>
|
||
</ul>
|
||
</div>
|
||
<div class="tier-card">
|
||
<h3>{{TIER3_NAME}}</h3>
|
||
<div class="tier-missions">{{TIER3_MISSIONS}}</div>
|
||
<ul class="tier-features">
|
||
<li>{{TIER3_F1}}</li>
|
||
<li>{{TIER3_F2}}</li>
|
||
<li>{{TIER3_F3}}</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- LANDVEX AUTHORIZATION -->
|
||
<section id="landvex" class="section-pad">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2>{{AUTH_TITLE}}</h2>
|
||
<p>{{AUTH_SUB}}</p>
|
||
</div>
|
||
<div class="auth-grid">
|
||
<div class="auth-visual">
|
||
<h3>{{AUTH_VISUAL_TITLE}}</h3>
|
||
<p>{{AUTH_VISUAL_DESC}}</p>
|
||
<ul class="auth-benefits">
|
||
<li>{{AUTH_B1}}</li>
|
||
<li>{{AUTH_B2}}</li>
|
||
<li>{{AUTH_B3}}</li>
|
||
<li>{{AUTH_B4}}</li>
|
||
</ul>
|
||
</div>
|
||
<div class="auth-steps">
|
||
<div class="auth-step">
|
||
<div class="auth-step-num">1</div>
|
||
<div>
|
||
<h4>{{AUTH_S1_TITLE}}</h4>
|
||
<p>{{AUTH_S1_DESC}}</p>
|
||
</div>
|
||
</div>
|
||
<div class="auth-step">
|
||
<div class="auth-step-num">2</div>
|
||
<div>
|
||
<h4>{{AUTH_S2_TITLE}}</h4>
|
||
<p>{{AUTH_S2_DESC}}</p>
|
||
</div>
|
||
</div>
|
||
<div class="auth-step">
|
||
<div class="auth-step-num">3</div>
|
||
<div>
|
||
<h4>{{AUTH_S3_TITLE}}</h4>
|
||
<p>{{AUTH_S3_DESC}}</p>
|
||
</div>
|
||
</div>
|
||
<div class="auth-step">
|
||
<div class="auth-step-num">4</div>
|
||
<div>
|
||
<h4>{{AUTH_S4_TITLE}}</h4>
|
||
<p>{{AUTH_S4_DESC}}</p>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:8px;">
|
||
<a href="https://www.quixzoom.com/authorization" class="btn-nav" style="display:inline-block;text-decoration:none;">{{AUTH_CTA}}</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FAQ -->
|
||
<section id="faq" class="section-pad" style="background:var(--bg);">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2>{{FAQ_TITLE}}</h2>
|
||
<p>{{FAQ_SUB}}</p>
|
||
</div>
|
||
<div class="faq-list">
|
||
<details class="faq-item">
|
||
<summary>{{FAQ_Q1}}</summary>
|
||
<div class="faq-answer">{{FAQ_A1}}</div>
|
||
</details>
|
||
<details class="faq-item">
|
||
<summary>{{FAQ_Q2}}</summary>
|
||
<div class="faq-answer">{{FAQ_A2}}</div>
|
||
</details>
|
||
<details class="faq-item">
|
||
<summary>{{FAQ_Q3}}</summary>
|
||
<div class="faq-answer">{{FAQ_A3}}</div>
|
||
</details>
|
||
<details class="faq-item">
|
||
<summary>{{FAQ_Q4}}</summary>
|
||
<div class="faq-answer">{{FAQ_A4}}</div>
|
||
</details>
|
||
<details class="faq-item">
|
||
<summary>{{FAQ_Q5}}</summary>
|
||
<div class="faq-answer">{{FAQ_A5}}</div>
|
||
</details>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- FOOTER -->
|
||
<footer>
|
||
<div class="container">
|
||
<div class="footer-inner">
|
||
<div class="footer-brand">
|
||
<a href="/" class="nav-logo">qui<span class="x">X</span>zoom</a>
|
||
<p class="footer-tagline">{{FOOTER_TAGLINE}}</p>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4>{{FOOTER_COL1_TITLE}}</h4>
|
||
<ul>
|
||
<li><a href="#how">{{FOOTER_COL1_L1}}</a></li>
|
||
<li><a href="#missions">{{FOOTER_COL1_L2}}</a></li>
|
||
<li><a href="#earnings">{{FOOTER_COL1_L3}}</a></li>
|
||
<li><a href="#landvex">{{FOOTER_COL1_L4}}</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4>{{FOOTER_COL2_TITLE}}</h4>
|
||
<ul>
|
||
<li><a href="https://www.quixzoom.com/for-organisations">{{FOOTER_COL2_L1}}</a></li>
|
||
<li><a href="https://www.quixzoom.com/pricing">{{FOOTER_COL2_L2}}</a></li>
|
||
<li><a href="https://www.quixzoom.com/developer">{{FOOTER_COL2_L3}}</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4>{{FOOTER_COL3_TITLE}}</h4>
|
||
<ul>
|
||
<li><a href="https://www.quixzoom.com/support">{{FOOTER_COL3_L1}}</a></li>
|
||
<li><a href="https://www.quixzoom.com/privacy">{{FOOTER_COL3_L2}}</a></li>
|
||
<li><a href="https://www.quixzoom.com/terms">{{FOOTER_COL3_L3}}</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<div class="footer-copyright">{{COPYRIGHT}}</div>
|
||
<div class="lang-switcher">
|
||
<span style="color:rgba(58,58,58,.75);font-size:.875rem;margin-right:4px;">{{LANG_LABEL}}</span>
|
||
<a href="/zh-cn/">中文</a>
|
||
<a href="/zh-tw/">繁中</a>
|
||
<a href="/ja/">日本語</a>
|
||
<a href="/ko/">한국어</a>
|
||
<a href="/th/">ไทย</a>
|
||
<a href="/vi/">Tiếng Việt</a>
|
||
<a href="/id/">Bahasa</a>
|
||
<a href="/ms/">Melayu</a>
|
||
<a href="/hi/">हिन्दी</a>
|
||
<a href="/en/">EN</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;
|
||
}
|
||
}
|
||
</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>
|