309 lines
14 KiB
TypeScript
309 lines
14 KiB
TypeScript
/**
|
|
* rCal landing page — relational calendar.
|
|
*/
|
|
export function renderLanding(): string {
|
|
return `
|
|
<!-- Hero -->
|
|
<div class="rl-hero">
|
|
<span class="rl-tagline">rCal</span>
|
|
<h1 class="rl-heading">(You)rCal, your rhythm.</h1>
|
|
<p class="rl-subtitle">Time is shared. Your calendar should be too.</p>
|
|
<p class="rl-subtext">
|
|
A spatiotemporal calendar that couples where and when, supports natural cycles,
|
|
and zooms from 30-second moments to geological epochs.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rcal" class="rl-cta-primary" id="ml-primary">Open Calendar</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 rCal Handles</h2>
|
|
<div class="rl-grid-4">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🔭</div>
|
|
<h3>Temporal Zoom</h3>
|
|
<p>Ten zoom levels from 30-second moments to cosmic time. Year, month, week, day — and beyond.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">📅</div>
|
|
<h3>Shared Events</h3>
|
|
<p>Calendars belong to spaces, not individuals. Everyone sees the same schedule by default.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🌙</div>
|
|
<h3>Lunar Phases</h3>
|
|
<p>Moon phases, solstices, and seasonal rhythms overlaid on the Gregorian grid. Plan with natural cycles.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🗺</div>
|
|
<h3>Location-Aware</h3>
|
|
<p>Events have places, not just times. Spatial and temporal zoom are coupled at every level.</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">
|
|
<span class="rl-step__num">1</span>
|
|
<h3>Create events</h3>
|
|
<p>Add events with time, location, and source context. Pull from ICS feeds, CalDAV, or other r* modules.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<span class="rl-step__num">2</span>
|
|
<h3>Zoom and explore</h3>
|
|
<p>Navigate across ten temporal zoom levels. Spatial and temporal zoom are coupled — zoom out in time and the map zooms out too.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<span class="rl-step__num">3</span>
|
|
<h3>Share with your space</h3>
|
|
<p>Space members see the same calendar. rWork sprints, rVote deadlines, rTrips itineraries — all in one view.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Temporal Zoom -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Temporal zoom</h2>
|
|
<p class="rl-subtext" style="text-align:center">Ten levels of time — from the blink of an eye to deep time.</p>
|
|
<div class="rl-card" style="max-width:700px;margin:2rem auto 0">
|
|
<div class="rl-zoom-bar">
|
|
<div class="rl-zoom-bar__row">
|
|
<span class="rl-zoom-bar__label">0</span>
|
|
<div class="rl-zoom-bar__bar" style="width:10%;background:rgba(99,102,241,0.3)">
|
|
<span class="rl-zoom-bar__name">Moment</span>
|
|
</div>
|
|
<span class="rl-zoom-bar__span">30 s</span>
|
|
</div>
|
|
<div class="rl-zoom-bar__row">
|
|
<span class="rl-zoom-bar__label">1</span>
|
|
<div class="rl-zoom-bar__bar" style="width:15%;background:rgba(99,102,241,0.28)">
|
|
<span class="rl-zoom-bar__name">Minute</span>
|
|
</div>
|
|
<span class="rl-zoom-bar__span">1–10 min</span>
|
|
</div>
|
|
<div class="rl-zoom-bar__row">
|
|
<span class="rl-zoom-bar__label">2</span>
|
|
<div class="rl-zoom-bar__bar" style="width:22%;background:rgba(99,102,241,0.25)">
|
|
<span class="rl-zoom-bar__name">Hour</span>
|
|
</div>
|
|
<span class="rl-zoom-bar__span">1–6 hrs</span>
|
|
</div>
|
|
<div class="rl-zoom-bar__row">
|
|
<span class="rl-zoom-bar__label">3</span>
|
|
<div class="rl-zoom-bar__bar" style="width:30%;background:rgba(99,102,241,0.22)">
|
|
<span class="rl-zoom-bar__name">Day</span>
|
|
</div>
|
|
<span class="rl-zoom-bar__span">24 hrs</span>
|
|
</div>
|
|
<div class="rl-zoom-bar__row">
|
|
<span class="rl-zoom-bar__label">4</span>
|
|
<div class="rl-zoom-bar__bar" style="width:40%;background:rgba(99,102,241,0.20)">
|
|
<span class="rl-zoom-bar__name">Week</span>
|
|
</div>
|
|
<span class="rl-zoom-bar__span">7 days</span>
|
|
</div>
|
|
<div class="rl-zoom-bar__row">
|
|
<span class="rl-zoom-bar__label">5</span>
|
|
<div class="rl-zoom-bar__bar" style="width:50%;background:rgba(99,102,241,0.18)">
|
|
<span class="rl-zoom-bar__name">Lunar</span>
|
|
</div>
|
|
<span class="rl-zoom-bar__span">29.5 days</span>
|
|
</div>
|
|
<div class="rl-zoom-bar__row">
|
|
<span class="rl-zoom-bar__label">6</span>
|
|
<div class="rl-zoom-bar__bar" style="width:60%;background:rgba(99,102,241,0.16)">
|
|
<span class="rl-zoom-bar__name">Season</span>
|
|
</div>
|
|
<span class="rl-zoom-bar__span">~90 days</span>
|
|
</div>
|
|
<div class="rl-zoom-bar__row">
|
|
<span class="rl-zoom-bar__label">7</span>
|
|
<div class="rl-zoom-bar__bar" style="width:70%;background:rgba(99,102,241,0.14)">
|
|
<span class="rl-zoom-bar__name">Year</span>
|
|
</div>
|
|
<span class="rl-zoom-bar__span">365 days</span>
|
|
</div>
|
|
<div class="rl-zoom-bar__row">
|
|
<span class="rl-zoom-bar__label">8</span>
|
|
<div class="rl-zoom-bar__bar" style="width:85%;background:rgba(99,102,241,0.12)">
|
|
<span class="rl-zoom-bar__name">Epoch</span>
|
|
</div>
|
|
<span class="rl-zoom-bar__span">decades–centuries</span>
|
|
</div>
|
|
<div class="rl-zoom-bar__row">
|
|
<span class="rl-zoom-bar__label">9</span>
|
|
<div class="rl-zoom-bar__bar" style="width:100%;background:rgba(99,102,241,0.10)">
|
|
<span class="rl-zoom-bar__name">Cosmic</span>
|
|
</div>
|
|
<span class="rl-zoom-bar__span">geological</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Calendar Views -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Four views</h2>
|
|
<div class="rl-grid-4" style="margin-top:2rem">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box"><span style="font-size:1.25rem">📅</span></div>
|
|
<h3>Temporal</h3>
|
|
<p>Classic calendar grid — day, week, month. The view you know.</p>
|
|
<p style="font-size:0.7rem;color:#64748b;margin-top:0.5rem"><kbd style="background:rgba(255,255,255,0.1);padding:0.1rem 0.3rem;border-radius:3px;font-size:0.65rem">T</kbd> to switch</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box"><span style="font-size:1.25rem">🗺</span></div>
|
|
<h3>Spatial</h3>
|
|
<p>Map view with events pinned to locations. Zoom couples time and space.</p>
|
|
<p style="font-size:0.7rem;color:#64748b;margin-top:0.5rem"><kbd style="background:rgba(255,255,255,0.1);padding:0.1rem 0.3rem;border-radius:3px;font-size:0.65rem">S</kbd> to switch</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box"><span style="font-size:1.25rem">🌙</span></div>
|
|
<h3>Lunar</h3>
|
|
<p>Moon-phase overlay with illumination percentages. Plan with natural rhythms.</p>
|
|
<p style="font-size:0.7rem;color:#64748b;margin-top:0.5rem"><kbd style="background:rgba(255,255,255,0.1);padding:0.1rem 0.3rem;border-radius:3px;font-size:0.65rem">L</kbd> to switch</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box"><span style="font-size:1.25rem">🧩</span></div>
|
|
<h3>Context</h3>
|
|
<p>Events grouped by r* source module. See your rWork sprints next to rVote deadlines.</p>
|
|
<p style="font-size:0.7rem;color:#64748b;margin-top:0.5rem"><kbd style="background:rgba(255,255,255,0.1);padding:0.1rem 0.3rem;border-radius:3px;font-size:0.65rem">C</kbd> to switch</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Ecosystem Integration -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Ecosystem integration</h2>
|
|
<p class="rl-subtext" style="text-align:center">rCal pulls events from across the r* ecosystem automatically.</p>
|
|
<div class="rl-grid-3" style="margin-top:2rem">
|
|
<div class="rl-integration">
|
|
<div class="rl-icon-box" style="flex-shrink:0"><span style="font-size:1.25rem">✈️</span></div>
|
|
<div>
|
|
<h3><a href="/rtrips" style="color:#e2e8f0;text-decoration:none">rTrips</a></h3>
|
|
<p>Travel itineraries appear as multi-day calendar events with location pins.</p>
|
|
</div>
|
|
</div>
|
|
<div class="rl-integration">
|
|
<div class="rl-icon-box" style="flex-shrink:0"><span style="font-size:1.25rem">🗺</span></div>
|
|
<div>
|
|
<h3><a href="/rmaps" style="color:#e2e8f0;text-decoration:none">rMaps</a></h3>
|
|
<p>Location-tagged events render on the spatial view map layer.</p>
|
|
</div>
|
|
</div>
|
|
<div class="rl-integration">
|
|
<div class="rl-icon-box" style="flex-shrink:0"><span style="font-size:1.25rem">👥</span></div>
|
|
<div>
|
|
<h3><a href="/rnetwork" style="color:#e2e8f0;text-decoration:none">rNetwork</a></h3>
|
|
<p>Meeting events auto-link to participant profiles and relationship context.</p>
|
|
</div>
|
|
</div>
|
|
<div class="rl-integration">
|
|
<div class="rl-icon-box" style="flex-shrink:0"><span style="font-size:1.25rem">🛒</span></div>
|
|
<div>
|
|
<h3><a href="/rcart" style="color:#e2e8f0;text-decoration:none">rCart</a></h3>
|
|
<p>Group-buy deadlines and fulfillment ETAs show up as calendar milestones.</p>
|
|
</div>
|
|
</div>
|
|
<div class="rl-integration">
|
|
<div class="rl-icon-box" style="flex-shrink:0"><span style="font-size:1.25rem">📝</span></div>
|
|
<div>
|
|
<h3><a href="/rnotes" style="color:#e2e8f0;text-decoration:none">rNotes</a></h3>
|
|
<p>Meeting notes link back to the calendar event that spawned them.</p>
|
|
</div>
|
|
</div>
|
|
<div class="rl-integration">
|
|
<div class="rl-icon-box" style="flex-shrink:0"><span style="font-size:1.25rem">🌐</span></div>
|
|
<div>
|
|
<h3><a href="/" style="color:#e2e8f0;text-decoration:none">rSpace</a></h3>
|
|
<p>Space-level milestones and deadlines aggregate across all modules into one timeline.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Built on Open Source -->
|
|
<section class="rl-section rl-section--alt">
|
|
<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 rCal.</p>
|
|
<div class="rl-grid-3">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🗃</div>
|
|
<h3>PostgreSQL</h3>
|
|
<p>Rock-solid relational database for events, sources, locations, and calendar metadata.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🚗</div>
|
|
<h3>OSRM</h3>
|
|
<p>Open-source routing engine for location-based scheduling, travel times, and spatial queries.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🔥</div>
|
|
<h3>Hono</h3>
|
|
<p>Ultrafast web framework for the API layer. Lightweight, edge-ready, and built for speed.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Your Data, Protected -->
|
|
<section class="rl-section">
|
|
<div class="rl-container" style="text-align:center">
|
|
<h2 class="rl-heading">Your Data, Protected</h2>
|
|
<p class="rl-subtext">How rCal 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 rl-section--alt">
|
|
<div class="rl-container" style="text-align:center">
|
|
<h2 class="rl-heading">(You)rCal, your rhythm.</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/rcal" class="rl-cta-primary">Open Calendar</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>`;
|
|
}
|