166 lines
7.2 KiB
TypeScript
166 lines
7.2 KiB
TypeScript
/**
|
|
* rCal demo page — server-rendered HTML body.
|
|
*
|
|
* Embeds the full <folk-calendar-view space="demo"> component for
|
|
* real interactivity (month/week/day views, navigation, lunar overlay,
|
|
* source filtering, event modals, keyboard shortcuts) plus showcase
|
|
* sections explaining the rCal vision.
|
|
*/
|
|
|
|
const FEATURES = [
|
|
{
|
|
icon: "\u{1F50D}",
|
|
title: "Temporal Zoom",
|
|
desc: "Navigate seamlessly from geological eras down to individual minutes. The calendar adapts its grid density and label fidelity at every level.",
|
|
},
|
|
{
|
|
icon: "\u{1F30D}",
|
|
title: "Spatial Context",
|
|
desc: "Events are location-aware. Zoom the map and the calendar filters to show only events within the visible region.",
|
|
},
|
|
{
|
|
icon: "\u{1F319}",
|
|
title: "Lunar Cycles",
|
|
desc: "Overlay moon phases, tidal patterns, and seasonal markers. Useful for agriculture, ceremony, and natural rhythm tracking.",
|
|
},
|
|
{
|
|
icon: "\u{1F4C5}",
|
|
title: "Multi-Calendar",
|
|
desc: "Layer Gregorian, Islamic, Hebrew, Chinese, and custom community calendars. Cross-reference events across time systems.",
|
|
},
|
|
];
|
|
|
|
const INTEGRATIONS = [
|
|
{ icon: "\u{1F5FA}", name: "rTrips", desc: "Travel itineraries surface as calendar events with departure/arrival times and locations." },
|
|
{ icon: "\u{1F30D}", name: "rMaps", desc: "Events appear on the map. Zoom the map and the calendar filters to show only visible events." },
|
|
{ icon: "\u{1F465}", name: "rNetwork", desc: "See availability across your network. Coordinate meetings without back-and-forth." },
|
|
{ icon: "\u{1F4DD}", name: "rNotes", desc: "Link notes to calendar events. Meeting agendas, daily journals, and retrospective logs." },
|
|
{ icon: "\u{1F4B0}", name: "rFunds", desc: "Budget reviews, treasury flows, and governance votes appear on the calendar timeline." },
|
|
{ icon: "\u2615\uFE0F", name: "rSpace", desc: "Each space has its own calendar layer. Nest calendars across spaces for cross-community coordination." },
|
|
];
|
|
|
|
const ZOOM_LEVELS = [
|
|
"Era", "Century", "Decade", "Year", "Quarter",
|
|
"Month", "Week", "Day", "Hour", "Minute",
|
|
];
|
|
|
|
export function renderDemo(): string {
|
|
return `
|
|
<div class="rd-root" style="--rd-accent-from:#6366f1; --rd-accent-to:#a78bfa;">
|
|
|
|
<!-- ── Hero ── -->
|
|
<section class="rd-hero">
|
|
<div style="display:inline-block;padding:0.375rem 1rem;background:rgba(99,102,241,0.1);border:1px solid rgba(99,102,241,0.2);border-radius:9999px;font-size:0.875rem;color:#a5b4fc;font-weight:500;margin-bottom:1.5rem;">
|
|
Multi-Dimensional Calendar
|
|
</div>
|
|
<h1>rCal Demo</h1>
|
|
<p class="rd-subtitle">Temporal coordination with lunar cycles, spatial context, and multi-scale zoom</p>
|
|
<div class="rd-meta">
|
|
<span>\u{1F50D} Temporal Zoom</span>
|
|
<span style="color:#475569">|</span>
|
|
<span>\u{1F30D} Spatial Context</span>
|
|
<span style="color:#475569">|</span>
|
|
<span>\u{1F319} Lunar Cycles</span>
|
|
<span style="color:#475569">|</span>
|
|
<span>\u{1F4C5} Multi-Calendar</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── Interactive Calendar ── -->
|
|
<section class="rd-section rd-section--narrow">
|
|
<div class="rd-card" style="padding:0;overflow:hidden;">
|
|
<folk-calendar-view space="demo"></folk-calendar-view>
|
|
</div>
|
|
<div style="text-align:center;padding:0.75rem 0;font-size:0.8rem;color:#64748b;">
|
|
<kbd style="background:#1e293b;padding:2px 6px;border-radius:4px;border:1px solid #334155;font-size:0.75rem;">1</kbd>
|
|
<kbd style="background:#1e293b;padding:2px 6px;border-radius:4px;border:1px solid #334155;font-size:0.75rem;">2</kbd>
|
|
<kbd style="background:#1e293b;padding:2px 6px;border-radius:4px;border:1px solid #334155;font-size:0.75rem;">3</kbd>
|
|
Day / Week / Month \u00B7
|
|
<kbd style="background:#1e293b;padding:2px 6px;border-radius:4px;border:1px solid #334155;font-size:0.75rem;">\u2190</kbd>
|
|
<kbd style="background:#1e293b;padding:2px 6px;border-radius:4px;border:1px solid #334155;font-size:0.75rem;">\u2192</kbd>
|
|
Navigate \u00B7
|
|
<kbd style="background:#1e293b;padding:2px 6px;border-radius:4px;border:1px solid #334155;font-size:0.75rem;">L</kbd>
|
|
Lunar \u00B7
|
|
<kbd style="background:#1e293b;padding:2px 6px;border-radius:4px;border:1px solid #334155;font-size:0.75rem;">T</kbd>
|
|
Today
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── Temporal Zoom Showcase ── -->
|
|
<section class="rd-section rd-section--narrow">
|
|
<div class="rd-card" style="padding:1.5rem;">
|
|
<h2 style="font-size:1.125rem;font-weight:600;color:#f1f5f9;margin:0 0 0.75rem;display:flex;align-items:center;gap:0.5rem;">
|
|
\u{1F50D} Temporal Zoom
|
|
</h2>
|
|
<p style="font-size:0.875rem;color:#94a3b8;margin:0 0 1rem;line-height:1.5;">
|
|
Navigate across 10 temporal granularities. The calendar adapts its grid at each level —
|
|
from geological eras to individual minutes.
|
|
</p>
|
|
<div style="display:flex;flex-wrap:wrap;gap:0.5rem;">
|
|
${ZOOM_LEVELS.map(
|
|
(level) => {
|
|
const isActive = level === "Month";
|
|
return `<div style="
|
|
padding:0.5rem 1rem;
|
|
border-radius:0.5rem;
|
|
font-size:0.8rem;
|
|
font-weight:500;
|
|
border:1px solid ${isActive ? "rgba(99,102,241,0.4)" : "rgba(51,65,85,0.4)"};
|
|
background:${isActive ? "rgba(99,102,241,0.15)" : "rgba(30,41,59,0.5)"};
|
|
color:${isActive ? "#818cf8" : "#64748b"};
|
|
${isActive ? "box-shadow:0 0 12px rgba(99,102,241,0.2);" : ""}
|
|
">${level}${isActive ? " \u25C0" : ""}</div>`;
|
|
},
|
|
).join("\n ")}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── Core Concepts ── -->
|
|
<section class="rd-section">
|
|
<div class="rd-grid rd-grid--2">
|
|
${FEATURES.map(
|
|
(f) => `
|
|
<div class="rd-card" style="padding:1.5rem;">
|
|
<div style="font-size:1.75rem;margin-bottom:0.75rem;">${f.icon}</div>
|
|
<h3 style="font-size:1rem;font-weight:600;color:#e2e8f0;margin:0 0 0.5rem;">${f.title}</h3>
|
|
<p style="font-size:0.875rem;color:#94a3b8;margin:0;line-height:1.5;">${f.desc}</p>
|
|
</div>`,
|
|
).join("")}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── Ecosystem Integrations ── -->
|
|
<section class="rd-section">
|
|
<h2 style="text-align:center;font-size:1.25rem;font-weight:700;color:#f1f5f9;margin:0 0 1.5rem;">
|
|
r* Ecosystem Integrations
|
|
</h2>
|
|
<div class="rd-grid rd-grid--3">
|
|
${INTEGRATIONS.map(
|
|
(i) => `
|
|
<div class="rd-card" style="padding:1.25rem;">
|
|
<div style="font-size:1.5rem;margin-bottom:0.5rem;">${i.icon}</div>
|
|
<h3 style="font-size:0.875rem;font-weight:600;color:#e2e8f0;margin:0 0 0.375rem;">${i.name}</h3>
|
|
<p style="font-size:0.8rem;color:#94a3b8;margin:0;line-height:1.4;">${i.desc}</p>
|
|
</div>`,
|
|
).join("")}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── CTA ── -->
|
|
<section class="rd-section rd-section--narrow">
|
|
<div class="rd-cta">
|
|
<h2>Coordinate in Time & Space</h2>
|
|
<p>
|
|
rCal layers temporal zoom, spatial context, and lunar cycles into a single calendar.
|
|
Plan events that respect natural rhythms and local conditions.
|
|
</p>
|
|
<a href="/create-space" style="background:linear-gradient(135deg,#6366f1,#a78bfa);box-shadow:0 8px 24px rgba(99,102,241,0.25);">
|
|
Create Your Space
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
</div>`;
|
|
}
|