262 lines
10 KiB
TypeScript
262 lines
10 KiB
TypeScript
/**
|
|
* Maps module landing page — static HTML, no React.
|
|
*/
|
|
export function renderLanding(): string {
|
|
return `
|
|
<!-- Hero -->
|
|
<div class="rl-hero">
|
|
<span class="rl-tagline">rMaps</span>
|
|
<h1 class="rl-heading" style="background:linear-gradient(135deg,#6ee7b7,#2dd4bf,#67e8f9);-webkit-background-clip:text;background-clip:text">(You)rMaps, your world to explore.</h1>
|
|
<p class="rl-subtitle" style="background:linear-gradient(135deg,#6ee7b7,#2dd4bf,#67e8f9);-webkit-background-clip:text;background-clip:text">Real-Time Collaborative Maps</p>
|
|
<p class="rl-subtext">
|
|
Share live locations, navigate indoor and outdoor spaces, coordinate meetups
|
|
— all from the browser. No app install. No tracking. No data collection.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rmaps" class="rl-cta-primary" id="ml-primary">Open Maps</a>
|
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Features -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">What rMaps Handles</h2>
|
|
<div class="rl-grid-4">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">📍</div>
|
|
<h3>Live Location Sharing</h3>
|
|
<p>Real-time GPS updates via WebSocket. See everyone on the map as they move, with stale detection and high-accuracy fallback.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🏢</div>
|
|
<h3>Indoor + Outdoor Navigation</h3>
|
|
<p>Turn-by-turn routing via OSRM outdoors, seamless switch to c3nav for indoor venues. Multi-floor, level-aware navigation.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">📌</div>
|
|
<h3>Meetup Coordination</h3>
|
|
<p>Drop waypoints for meetups, events, and points of interest. Search by address, share coordinates, or pin from your location.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🛡</div>
|
|
<h3>No Tracking, No Data Collection</h3>
|
|
<p>Ghost mode, precision levels, one-toggle location sharing. Zero tracking, zero data collection. You control who sees you.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- How It Works -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">How It Works</h2>
|
|
<div class="rl-grid-3">
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">1</div>
|
|
<h3>Create a Map Room</h3>
|
|
<p>Sign in and name your room. Get a shareable link or a custom slug.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">2</div>
|
|
<h3>Share with Friends</h3>
|
|
<p>Send the link or scan the QR code. Friends join from any browser — no app download, no account creation needed.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">3</div>
|
|
<h3>Navigate Together</h3>
|
|
<p>See everyone in real time. Drop meeting points, get turn-by-turn directions, and ping friends when you need to regroup.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- What Makes rMaps Different -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">What Makes rMaps Different</h2>
|
|
<div class="rl-grid-2" style="margin-top:2rem">
|
|
<div class="rl-integration">
|
|
<div class="rl-icon-box" style="font-size:1.25rem;flex-shrink:0">🏕</div>
|
|
<div>
|
|
<h3>CCC Event Integration</h3>
|
|
<p>
|
|
Native c3nav integration for 39C3, Camp, and other CCC events. Indoor maps with
|
|
multi-floor routing, venue bounds detection, and automatic map switching
|
|
when you walk inside.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rl-integration">
|
|
<div class="rl-icon-box" style="font-size:1.25rem;flex-shrink:0">📡</div>
|
|
<div>
|
|
<h3>Location Pinging</h3>
|
|
<p>
|
|
Request a friend's location with one tap. Push notifications via
|
|
Web Push API with vibration alerts. Works even when the app is
|
|
backgrounded via service worker.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rl-integration">
|
|
<div class="rl-icon-box" style="font-size:1.25rem;flex-shrink:0">📦</div>
|
|
<div>
|
|
<h3>Google Maps Import</h3>
|
|
<p>
|
|
Import your saved places from Google Takeout ZIP exports. GeoJSON
|
|
parsing, auto-emoji mapping by place type, and preview before
|
|
importing.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rl-integration">
|
|
<div class="rl-icon-box" style="font-size:1.25rem;flex-shrink:0">📱</div>
|
|
<div>
|
|
<h3>PWA & Offline Mode</h3>
|
|
<p>
|
|
Install as a native app. Three-tier service worker caching keeps
|
|
maps accessible offline with up to 500 cached tiles. Background
|
|
sync handles location updates.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rl-integration">
|
|
<div class="rl-icon-box" style="font-size:1.25rem;flex-shrink:0">🔗</div>
|
|
<div>
|
|
<h3>Instant Room Sharing</h3>
|
|
<p>
|
|
Generate a QR code or shareable link for any room. Friends scan or tap
|
|
to join instantly — no account needed, no app download.
|
|
Native share dialog on mobile.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rl-integration">
|
|
<div class="rl-icon-box" style="font-size:1.25rem;flex-shrink:0">🔄</div>
|
|
<div>
|
|
<h3>Conflict-Free Sync</h3>
|
|
<p>
|
|
Automerge CRDT architecture ensures everyone sees the same map state,
|
|
even through disconnections. WebSocket real-time sync with automatic
|
|
reconnection and state recovery.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Use Cases -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Maps for Every Gathering</h2>
|
|
<div class="rl-grid-3" style="margin-top:2rem">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🏕</div>
|
|
<h3>Festivals & Camps</h3>
|
|
<p>
|
|
Navigate massive venues with indoor maps. Find stages, food courts,
|
|
and your crew across multi-day events like CCC Camp.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🏙</div>
|
|
<h3>City Exploration</h3>
|
|
<p>
|
|
Exploring a new city with friends? Share locations, drop pins at
|
|
restaurants and landmarks, import your Google Maps saved places.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🤝</div>
|
|
<h3>Group Coordination</h3>
|
|
<p>
|
|
Conferences, retreats, team offsites. Set meeting points, ping
|
|
stragglers, and get walking directions to the next session.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<p style="text-align:center;font-size:0.82rem;color:#64748b;margin-top:1.5rem">
|
|
First built for <a href="https://events.ccc.de/" target="_blank" rel="noopener noreferrer" style="color:rgba(16,185,129,0.7)">CCC events</a> — now for any gathering.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Built on Open Source -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Built on Open Source</h2>
|
|
<p class="rl-subtext" style="text-align:center">The libraries and tools that power rMaps.</p>
|
|
<div class="rl-grid-4">
|
|
<div class="rl-card rl-card--center">
|
|
<h3>MapLibre GL</h3>
|
|
<p>Open-source map rendering engine. Beautiful vector maps without vendor lock-in.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<h3>c3nav</h3>
|
|
<p>Indoor navigation engine with multi-floor routing and venue bounds detection.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<h3>OSRM</h3>
|
|
<p>Open Source Routing Machine for fast, accurate outdoor turn-by-turn navigation.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<h3>Web Push API</h3>
|
|
<p>Browser-native push notifications for location pings and alerts.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Your Data, Protected -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container" style="text-align:center">
|
|
<h2 class="rl-heading">Your Data, Protected</h2>
|
|
<p class="rl-subtext">How rMaps keeps your information safe.</p>
|
|
<div class="rl-grid-3">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🔒</div>
|
|
<h3>End-to-End Encryption</h3>
|
|
<span class="rl-badge">Coming Soon</span>
|
|
<p>All content encrypted before it leaves your device. Not even the server can read it.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🕵</div>
|
|
<h3>Zero-Knowledge Architecture</h3>
|
|
<span class="rl-badge">Coming Soon</span>
|
|
<p>The server processes your requests without ever seeing your data in the clear.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🏠</div>
|
|
<h3>Self-Hosted</h3>
|
|
<p>Run on your own infrastructure. Your server, your rules, your data.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="rl-section">
|
|
<div class="rl-container" style="text-align:center">
|
|
<h2 class="rl-heading">(You)rMaps, your world to explore.</h2>
|
|
<p class="rl-subtext">Try the demo or create a space to get started.</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rmaps" class="rl-cta-primary">Open Maps</a>
|
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="rl-back">
|
|
<a href="/">← Back to rSpace</a>
|
|
</div>
|
|
`;
|
|
}
|