Files
boc/landvex-site/developers/index.html
T

407 lines
18 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QUIXZOOM API — Infrastructure Intelligence for Developers</title>
<meta name="description" content="Build on the world's infrastructure intelligence network. Real-time APIs for observations, alerts, and analytics.">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #333; }
.container { max-width: 1000px; margin: 0 auto; padding: 0 2rem; }
.hero {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
color: white;
padding: 100px 0 60px;
text-align: center;
}
.hero h1 {
font-size: 3rem;
font-weight: 800;
margin-bottom: 1rem;
}
.hero p {
font-size: 1.25rem;
opacity: 0.9;
margin-bottom: 2rem;
}
.btn {
display: inline-block;
padding: 1rem 3rem;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
transition: all 0.2s;
}
.btn-primary {
background: #e94560;
color: white;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(233, 69, 96, 0.3);
}
.code-example {
background: #1a1a2e;
color: #e2e8f0;
padding: 4rem 0;
}
.code-example h2 {
text-align: center;
font-size: 2rem;
margin-bottom: 2rem;
color: white;
}
.code-block {
background: #0f172a;
border-radius: 12px;
padding: 2rem;
overflow-x: auto;
font-family: 'Monaco', 'Menlo', monospace;
font-size: 0.9rem;
line-height: 1.8;
}
.code-block .comment { color: #64748b; }
.code-block .keyword { color: #c084fc; }
.code-block .string { color: #4ade80; }
.code-block .function { color: #60a5fa; }
.features {
padding: 4rem 0;
}
.features h2 {
text-align: center;
font-size: 2rem;
margin-bottom: 2rem;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.feature-card {
background: #f8f9fa;
padding: 2rem;
border-radius: 12px;
}
.feature-card h3 {
margin-bottom: 1rem;
color: #1a1a2e;
}
.feature-card ul {
list-style: none;
}
.feature-card li {
padding: 0.5rem 0;
padding-left: 1.5rem;
position: relative;
}
.feature-card li::before {
content: "→";
position: absolute;
left: 0;
color: #e94560;
}
.endpoints {
background: #f8f9fa;
padding: 4rem 0;
}
.endpoints h2 {
text-align: center;
font-size: 2rem;
margin-bottom: 2rem;
}
.endpoint-list {
display: grid;
gap: 1rem;
}
.endpoint-item {
background: white;
padding: 1.5rem;
border-radius: 8px;
display: flex;
align-items: center;
gap: 1rem;
}
.method {
padding: 0.25rem 0.75rem;
border-radius: 4px;
font-weight: 600;
font-size: 0.85rem;
font-family: monospace;
}
.method.get { background: #dbeafe; color: #1e40af; }
.method.post { background: #dcfce7; color: #166534; }
.endpoint-path {
font-family: monospace;
font-size: 0.95rem;
}
.endpoint-desc {
color: #666;
margin-left: auto;
}
.cta {
background: #1a1a2e;
color: white;
padding: 4rem 0;
text-align: center;
}
.cta h2 {
font-size: 2rem;
margin-bottom: 1rem;
}
.cta p {
opacity: 0.9;
margin-bottom: 2rem;
}
footer {
background: #111;
color: white;
padding: 2rem 0;
text-align: center;
}
footer p {
opacity: 0.5;
}
</style>
</head>
<body>
<section class="hero">
<div class="container">
<h1>Build on Real-World Intelligence</h1>
<p>Real-time APIs for observations, alerts, and infrastructure analytics.</p>
<a href="#docs" class="btn btn-primary">View Documentation →</a>
</div>
</section>
<section class="code-example">
<div class="container">
<h2>Get Started in Minutes</h2>
<div class="code-block">
<span class="comment">// Submit a Reality Alert™ observation</span>
<span class="keyword">const</span> response = <span class="keyword">await</span> <span class="function">fetch</span>(<span class="string">'https://api.quixzoom.com/v1/reality-alerts'</span>, {
method: <span class="string">'POST'</span>,
headers: {
<span class="string">'Authorization'</span>: <span class="string">'Bearer YOUR_API_KEY'</span>,
<span class="string">'Content-Type'</span>: <span class="string">'application/json'</span>
},
body: <span class="function">JSON.stringify</span>({
images: [<span class="string">'https://example.com/photo.jpg'</span>],
location: { lat: 59.3293, lng: 18.0686 },
description: <span class="string">'Large pothole on Main Street'</span>
})
});
<span class="keyword">const</span> alert = <span class="keyword">await</span> response.<span class="function">json</span>();
<span class="comment">// { id: 'RA-A1B2C3D4', severity: 'medium', reward: 2.50 }</span>
</div>
</div>
</section>
<section class="features container">
<h2>API Features</h2>
<div class="feature-grid">
<div class="feature-card">
<h3>🔍 Observations</h3>
<ul>
<li>Submit visual observations</li>
<li>Retrieve mission results</li>
<li>Batch uploads supported</li>
<li>Metadata and geotagging</li>
</ul>
</div>
<div class="feature-card">
<h3>🚨 Alerts</h3>
<ul>
<li>Real-time alert streams</li>
<li>Filter by severity, location</li>
<li>Webhook notifications</li>
<li>Resolution tracking</li>
</ul>
</div>
<div class="feature-card">
<h3>📊 Analytics</h3>
<ul>
<li>Trend analysis</li>
<li>Heat maps</li>
<li>Custom reports</li>
<li>Export to CSV/JSON</li>
</ul>
</div>
<div class="feature-card">
<h3>🔧 Management</h3>
<ul>
<li>Create and manage missions</li>
<li>Contributor management</li>
<li>Billing and usage</li>
<li>Organization settings</li>
</ul>
</div>
</div>
</section>
<section class="endpoints">
<div class="container">
<h2>API Endpoints</h2>
<div class="endpoint-list">
<div class="endpoint-item">
<span class="method get">GET</span>
<span class="endpoint-path">/v1/health</span>
<span class="endpoint-desc">API health check</span>
</div>
<div class="endpoint-item">
<span class="method get">GET</span>
<span class="endpoint-path">/v1/products</span>
<span class="endpoint-desc">List products</span>
</div>
<div class="endpoint-item">
<span class="method post">POST</span>
<span class="endpoint-path">/v1/reality-alerts</span>
<span class="endpoint-desc">Submit observation</span>
</div>
<div class="endpoint-item">
<span class="method get">GET</span>
<span class="endpoint-path">/v1/reality-alerts</span>
<span class="endpoint-desc">List alerts</span>
</div>
<div class="endpoint-item">
<span class="method get">GET</span>
<span class="endpoint-path">/v1/reality-alerts/:id</span>
<span class="endpoint-desc">Get alert details</span>
</div>
<div class="endpoint-item">
<span class="method post">POST</span>
<span class="endpoint-path">/v1/reality-alerts/:id/resolve</span>
<span class="endpoint-desc">Resolve alert</span>
</div>
<div class="endpoint-item">
<span class="method get">GET</span>
<span class="endpoint-path">/v1/reality-alerts/stats/overview</span>
<span class="endpoint-desc">Statistics</span>
</div>
</div>
</div>
</section>
<section class="cta">
<div class="container">
<h2>Ready to Build?</h2>
<p>Get your API key and start integrating infrastructure intelligence.</p>
<a href="#signup" class="btn btn-primary">Get API Key →</a>
</div>
</section>
<footer>
<div class="footer-container" style="max-width:1200px;margin:0 auto;padding:48px 24px 32px;">
<!-- Main Footer Grid -->
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-bottom:48px;">
<!-- Column 1: Products -->
<div>
<h4 style="font-size:13px;font-weight:600;color:#0A0A0A;margin-bottom:16px;text-transform:uppercase;letter-spacing:0.5px;">Produkter</h4>
<ul style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;">
<li><a href="/infrastructure-monitoring/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">VIMS</a></li>
<li><a href="/intelligence/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Intelligence</a></li>
<li><a href="/reality-alerts/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Reality Alerts</a></li>
<li><a href="/enterprise/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Enterprise</a></li>
<li><a href="/pilot/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Pilotprogram</a></li>
</ul>
</div>
<!-- Column 2: Solutions -->
<div>
<h4 style="font-size:13px;font-weight:600;color:#0A0A0A;margin-bottom:16px;text-transform:uppercase;letter-spacing:0.5px;">Lösningar</h4>
<ul style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;">
<li><a href="/verticals/bridge-inspection/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Broinspektion</a></li>
<li><a href="/verticals/road-monitoring/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Vägövervakning</a></li>
<li><a href="/verticals/infrastructure/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Infrastruktur</a></li>
<li><a href="/verticals/utilities/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Utilities</a></li>
<li><a href="/use-cases/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Användningsfall</a></li>
</ul>
</div>
<!-- Column 3: Resources -->
<div>
<h4 style="font-size:13px;font-weight:600;color:#0A0A0A;margin-bottom:16px;text-transform:uppercase;letter-spacing:0.5px;">Resurser</h4>
<ul style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;">
<li><a href="/blog/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Intelligence Insights</a></li>
<li><a href="/guides/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Guider</a></li>
<li><a href="/developers/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Developer API</a></li>
<li><a href="/status/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Systemstatus</a></li>
<li><a href="/reports/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Rapporter</a></li>
</ul>
</div>
<!-- Column 4: Company -->
<div>
<h4 style="font-size:13px;font-weight:600;color:#0A0A0A;margin-bottom:16px;text-transform:uppercase;letter-spacing:0.5px;">Företag</h4>
<ul style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;">
<li><a href="/about/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Om oss</a></li>
<li><a href="/careers/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Karriär</a></li>
<li><a href="/press/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Press</a></li>
<li><a href="/contact/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Kontakt</a></li>
<li><a href="https://www.quixzoom.com" target="_blank" rel="noopener" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">quiXzoom →</a></li>
</ul>
</div>
</div>
<!-- Divider -->
<div style="border-top:1px solid #E5E5E5;padding-top:32px;">
<!-- Legal & Compliance Row -->
<div style="display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:24px;margin-bottom:24px;">
<div style="display:flex;flex-wrap:wrap;gap:16px 24px;">
<a href="/privacy/" style="font-size:12px;color:#6E6E73;text-decoration:none;">Privacy</a>
<a href="/terms/" style="font-size:12px;color:#6E6E73;text-decoration:none;">Terms</a>
<a href="/cookie-policy/" style="font-size:12px;color:#6E6E73;text-decoration:none;">Cookies</a>
<a href="/compliance/" style="font-size:12px;color:#6E6E73;text-decoration:none;">Compliance</a>
<a href="/trust/" style="font-size:12px;color:#6E6E73;text-decoration:none;">Trust Centre</a>
<a href="/dpa/" style="font-size:12px;color:#6E6E73;text-decoration:none;">DPA</a>
<a href="/sla/" style="font-size:12px;color:#6E6E73;text-decoration:none;">SLA</a>
<a href="/security/" style="font-size:12px;color:#6E6E73;text-decoration:none;">Security</a>
<a href="/accessibility/" style="font-size:12px;color:#6E6E73;text-decoration:none;">Accessibility</a>
<a href="/responsible-disclosure/" style="font-size:12px;color:#6E6E73;text-decoration:none;">Responsible Disclosure</a>
</div>
<div style="display:flex;gap:16px;">
<a href="https://www.linkedin.com/company/landvex" target="_blank" rel="noopener" style="color:#6E6E73;" title="LinkedIn">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>
</a>
<a href="https://x.com/landvex" target="_blank" rel="noopener" style="color:#6E6E73;" title="X">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.73-8.835L1.254 2.25H8.08l4.253 5.622 5.912-5.622Zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
</a>
</div>
</div>
<!-- Company Info Row -->
<div style="display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;">
<div>
<div style="font-size:12px;color:#86868B;line-height:1.6;">
<strong style="color:#0A0A0A;">Landvex Inc.</strong> · Houston, Texas · USA<br>
<strong style="color:#0A0A0A;">Landvex AB</strong> · Org.nr 559141-7042 · Stockholm, Sweden · EU<br>
<a href="mailto:contact@landvex.com" style="color:#86868B;text-decoration:none;">contact@landvex.com</a> ·
<a href="mailto:security@landvex.com" style="color:#86868B;text-decoration:none;">security@landvex.com</a>
</div>
<div style="font-size:11px;color:#86868B;margin-top:8px;line-height:1.5;">
Field data powered by <a href="https://www.quixzoom.com" style="color:#86868B;text-decoration:underline;">quiXzoom</a> ·
<a href="/data-lineage/" style="color:#86868B;text-decoration:underline;">Data Lineage</a> ·
<a href="/subprocessors/" style="color:#86868B;text-decoration:underline;">Sub-processors</a> ·
<a href="/methodology/" style="color:#86868B;text-decoration:underline;">Methodology</a>
</div>
</div>
<div style="font-size:12px;color:#86868B;">
© 2026 Landvex Inc / Landvex AB. All rights reserved.
</div>
</div>
</div>
</div>
</footer>
</body>
</html>