Bernt
48ea61cdcc
- Product documentation in docs/products/ - Updated MEMORY.md with product info - quiXzoom Auth Core as AAMOS Identity product
420 lines
15 KiB
HTML
420 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||
<title>Support – quiXzoom</title>
|
||
<style>
|
||
:root {
|
||
--bg: #F2F2F7;
|
||
--surface: #FFFFFF;
|
||
--label: #000000;
|
||
--label2: #3C3C43;
|
||
--label3: rgba(60,60,67,0.60);
|
||
--separator: rgba(60,60,67,0.29);
|
||
--accent: #007AFF;
|
||
--green: #34C759;
|
||
--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;
|
||
--label: #FFFFFF;
|
||
--label2: #EBEBF5;
|
||
--label3: rgba(235,235,245,0.60);
|
||
--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;
|
||
}
|
||
.faq-item {
|
||
border-bottom: 0.5px solid var(--separator);
|
||
padding: 14px 0;
|
||
cursor: pointer;
|
||
}
|
||
.faq-item:last-child { border-bottom: none; }
|
||
.faq-q {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: var(--label);
|
||
}
|
||
.faq-arrow {
|
||
font-size: 12px;
|
||
color: var(--label3);
|
||
transition: transform 0.2s;
|
||
}
|
||
.faq-item.open .faq-arrow { transform: rotate(180deg); }
|
||
.faq-a {
|
||
display: none;
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
color: var(--label2);
|
||
margin-top: 8px;
|
||
}
|
||
.faq-item.open .faq-a { display: block; }
|
||
.contact-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
padding: 14px 0;
|
||
border-bottom: 0.5px solid var(--separator);
|
||
text-decoration: none;
|
||
color: inherit;
|
||
}
|
||
.contact-btn:last-child { border-bottom: none; }
|
||
.btn-icon {
|
||
width: 44px; height: 44px;
|
||
border-radius: var(--radius-md);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 22px;
|
||
flex-shrink: 0;
|
||
}
|
||
.blue-bg { background: rgba(0,122,255,0.12); }
|
||
.green-bg { background: rgba(52,199,89,0.12); }
|
||
.orange-bg { background: rgba(255,149,0,0.12); }
|
||
.btn-text { flex: 1; }
|
||
.btn-label { font-size: 16px; font-weight: 600; color: var(--label); }
|
||
.btn-sub { font-size: 13px; color: var(--label3); margin-top: 2px; }
|
||
.btn-chevron { font-size: 14px; color: var(--label3); }
|
||
/* Contact form */
|
||
.form-group { margin-bottom: 14px; }
|
||
label {
|
||
display: block;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: var(--label3);
|
||
margin-bottom: 6px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.3px;
|
||
}
|
||
input, select, textarea {
|
||
width: 100%;
|
||
background: var(--bg);
|
||
border: 0.5px solid var(--separator);
|
||
border-radius: var(--radius-sm);
|
||
padding: 12px 14px;
|
||
font-size: 16px;
|
||
font-family: var(--font);
|
||
color: var(--label);
|
||
outline: none;
|
||
-webkit-appearance: none;
|
||
}
|
||
input:focus, select:focus, textarea:focus {
|
||
border-color: var(--accent);
|
||
}
|
||
textarea { min-height: 120px; resize: vertical; }
|
||
.submit-btn {
|
||
width: 100%;
|
||
background: var(--accent);
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: var(--radius-sm);
|
||
padding: 14px;
|
||
font-size: 17px;
|
||
font-weight: 600;
|
||
font-family: var(--font-display);
|
||
cursor: pointer;
|
||
margin-top: 8px;
|
||
-webkit-appearance: none;
|
||
}
|
||
.submit-btn:active { opacity: 0.85; }
|
||
.status-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
background: rgba(52,199,89,0.12);
|
||
color: var(--green);
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
padding: 4px 12px;
|
||
border-radius: var(--radius-xl);
|
||
}
|
||
.status-dot {
|
||
width: 7px; height: 7px;
|
||
background: var(--green);
|
||
border-radius: var(--radius-full);
|
||
}
|
||
footer {
|
||
text-align: center;
|
||
padding: 24px 0 8px;
|
||
font-size: 13px;
|
||
color: var(--label3);
|
||
}
|
||
a { color: var(--accent); text-decoration: none; }
|
||
@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; }
|
||
}
|
||
</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; }
|
||
@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; }
|
||
}
|
||
</style>
|
||
<script src="i18n.js"></script>
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:title" content="Support – quiXzoom">
|
||
<meta property="og:description" content="quiXzoom — Earn per Mission. No Platform Fee.">
|
||
<meta property="og:url" content="https://www.quixzoom.com/support.html">
|
||
<meta property="og:image" content="https://www.quixzoom.com/images/app-screenshot.jpg">
|
||
<meta property="og:image:width" content="1200">
|
||
<meta property="og:image:height" content="630">
|
||
<meta property="og:image:alt" content="quiXzoom support — help with Zoomer missions and earnings">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:image" content="https://www.quixzoom.com/images/app-screenshot.jpg">
|
||
<meta name="twitter:title" content="Support – quiXzoom">
|
||
<script type="module" src="https://auth.quixzoom.com/site-auth-snippet.js"></script>
|
||
</head>
|
||
<body>
|
||
|
||
<header>
|
||
<div class="logo">quiXzoom</div>
|
||
<h1>Support</h1>
|
||
<p>
|
||
<span class="status-badge">
|
||
<span class="status-dot"></span>
|
||
All systems operational
|
||
</span>
|
||
</p>
|
||
</header>
|
||
|
||
<!-- FAQ -->
|
||
<div class="card">
|
||
<div class="card-title">Frequently asked questions</div>
|
||
|
||
<div class="faq-item" onclick="toggle(this)">
|
||
<div class="faq-q">
|
||
How do I start taking missions as a Zoomer?
|
||
<span class="faq-arrow"></span>
|
||
</div>
|
||
<div class="faq-a">
|
||
Download the quiXzoom app, create an account and verify your identity with a photo ID. Once your account is approved you will see available missions on the map. Tap a mission to view details and accept it. You then have the stated time limit to complete and upload the documentation.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item" onclick="toggle(this)">
|
||
<div class="faq-q">
|
||
How and when do I get paid?
|
||
<span class="faq-arrow"></span>
|
||
</div>
|
||
<div class="faq-a">
|
||
Payment for an approved mission is processed within 5 business days to your registered bank account. You can view your full payout history under Settings → Payments in the app. The minimum payout amount is 100 SEK. You are responsible for your own tax reporting.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item" onclick="toggle(this)">
|
||
<div class="faq-q">
|
||
My mission was rejected – what do I do?
|
||
<span class="faq-arrow"></span>
|
||
</div>
|
||
<div class="faq-a">
|
||
The reason for rejection is shown in the mission details in the app. Common reasons: photos too dark or blurry, wrong location photographed, or too few images. In some cases you can supplement and re-upload – this will be indicated in the app. Contact support below if you believe the decision is incorrect.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item" onclick="toggle(this)">
|
||
<div class="faq-q">
|
||
Can I cancel a mission I have accepted?
|
||
<span class="faq-arrow"></span>
|
||
</div>
|
||
<div class="faq-a">
|
||
Yes, but cancellation should be done as soon as possible so the mission can be assigned to another Zoomer. Go to the mission card and select "Cancel". Repeated cancellations may affect your priority for future missions. If you have difficulty reaching the location, contact support directly.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item" onclick="toggle(this)">
|
||
<div class="faq-q">
|
||
How do I delete my account?
|
||
<span class="faq-arrow"></span>
|
||
</div>
|
||
<div class="faq-a">
|
||
Go to Settings → Account → Close account in the app. Outstanding payments will be processed within 14 days. Your personal data will be deleted within 90 days, except for accounting data which we are legally required to retain for 7 years. You can also send a written request to <a href="mailto:privacy@quixzoom.com">privacy@quixzoom.com</a>.
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Contact options -->
|
||
<div class="card">
|
||
<div class="card-title">Contact us</div>
|
||
|
||
<a class="contact-btn" href="tel:+46812345678">
|
||
<div class="btn-icon blue-bg"></div>
|
||
<div class="btn-text">
|
||
<div class="btn-label">Phone</div>
|
||
<div class="btn-sub">+46 8 123 45 67 · Mon–Fri 09:00–17:00 CET</div>
|
||
</div>
|
||
<span class="btn-chevron">›</span>
|
||
</a>
|
||
|
||
<a class="contact-btn" href="mailto:support@quixzoom.com">
|
||
<div class="btn-icon blue-bg"></div>
|
||
<div class="btn-text">
|
||
<div class="btn-label">Email</div>
|
||
<div class="btn-sub">support@quixzoom.com · Reply within 1 business day</div>
|
||
</div>
|
||
<span class="btn-chevron">›</span>
|
||
</a>
|
||
|
||
<a class="contact-btn" href="mailto:support@quixzoom.com?subject=Urgent%20matter">
|
||
<div class="btn-icon orange-bg"></div>
|
||
<div class="btn-text">
|
||
<div class="btn-label">Urgent matter</div>
|
||
<div class="btn-sub">Mark "URGENT" in the subject line – priority handling</div>
|
||
</div>
|
||
<span class="btn-chevron">›</span>
|
||
</a>
|
||
|
||
<a class="contact-btn" href="mailto:legal@quixzoom.com">
|
||
<div class="btn-icon green-bg"></div>
|
||
<div class="btn-text">
|
||
<div class="btn-label">Legal & data protection</div>
|
||
<div class="btn-sub">legal@quixzoom.com / privacy@quixzoom.com</div>
|
||
</div>
|
||
<span class="btn-chevron">›</span>
|
||
</a>
|
||
|
||
</div>
|
||
|
||
<!-- Contact form -->
|
||
<div class="card">
|
||
<div class="card-title">Send a message</div>
|
||
|
||
<form action="mailto:support@quixzoom.com" method="post" enctype="text/plain" onsubmit="return handleSubmit(event)">
|
||
<div class="form-group">
|
||
<label for="name">Your name</label>
|
||
<input type="text" id="name" name="name" placeholder="First Last" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="phone">Phone number</label>
|
||
<input type="tel" id="phone" name="phone" placeholder="+46 70 123 45 67" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="subject">Subject</label>
|
||
<select id="subject" name="subject">
|
||
<option value="general">General question</option>
|
||
<option value="payment">Payment / payout</option>
|
||
<option value="mission">Mission issue</option>
|
||
<option value="account">Account & login</option>
|
||
<option value="app">Technical app error</option>
|
||
<option value="privacy">Privacy & data protection</option>
|
||
<option value="other">Other</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="message">Describe your issue</label>
|
||
<textarea id="message" name="message" placeholder="Describe the problem or question in as much detail as possible..." required></textarea>
|
||
</div>
|
||
<button type="submit" class="submit-btn">Send message</button>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-title">Response times</div>
|
||
<div style="display:flex; gap:12px; flex-wrap:wrap;">
|
||
<div style="flex:1; min-width:140px; background:rgba(52,199,89,0.08); border-radius: var(--radius-md); padding:12px; text-align:center;">
|
||
<div style="font-size:24px; font-weight:700; color:#34C759;">24h</div>
|
||
<div style="font-size:12px; color:var(--label3); margin-top:2px;">Standard enquiries</div>
|
||
</div>
|
||
<div style="flex:1; min-width:140px; background:rgba(255,149,0,0.08); border-radius: var(--radius-md); padding:12px; text-align:center;">
|
||
<div style="font-size:24px; font-weight:700; color:#FF9500;">4h</div>
|
||
<div style="font-size:12px; color:var(--label3); margin-top:2px;">URGENT matters</div>
|
||
</div>
|
||
<div style="flex:1; min-width:140px; background:rgba(0,122,255,0.08); border-radius: var(--radius-md); padding:12px; text-align:center;">
|
||
<div style="font-size:24px; font-weight:700; color:#007AFF;">30 days</div>
|
||
<div style="font-size:12px; color:var(--label3); margin-top:2px;">GDPR requests (legal requirement)</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer>
|
||
<p>© 2026 quiXzoom · <a href="terms/index.html">Terms of Service</a> · <a href="privacy/index.html">Privacy Policy</a></p>
|
||
</footer>
|
||
|
||
<script>
|
||
function toggle(el) {
|
||
el.classList.toggle('open');
|
||
}
|
||
|
||
function handleSubmit(e) {
|
||
e.preventDefault();
|
||
const name = document.getElementById('name').value;
|
||
const email = document.getElementById('email').value;
|
||
const subject = document.getElementById('subject').options[document.getElementById('subject').selectedIndex].text;
|
||
const message = document.getElementById('message').value;
|
||
const body = encodeURIComponent(`From: ${name} (${email})\nSubject: ${subject}\n\n${message}`);
|
||
window.location.href = `mailto:support@quixzoom.com?subject=${encodeURIComponent(subject + ' - quiXzoom Support')}&body=${body}`;
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|