From f22bc4781c3a436aea219d4034ae189a2bd7e82a Mon Sep 17 00:00:00 2001 From: Jeff Emmett Date: Tue, 10 Mar 2026 11:42:30 -0700 Subject: [PATCH] feat(rtrips): wire up demo dashboard with 6-card live grid MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add /demo route, Vite build entry for trips-demo.ts, and demo page CSS (hero, toolbar, 2×3 card grid, calendar, polls, funds, cart). Co-Authored-By: Claude Opus 4.6 --- modules/rtrips/components/trips.css | 303 ++++++++++++++++++++++++++++ modules/rtrips/mod.ts | 136 +++++++++++++ 2 files changed, 439 insertions(+) diff --git a/modules/rtrips/components/trips.css b/modules/rtrips/components/trips.css index 9c2ef99..462a3e7 100644 --- a/modules/rtrips/components/trips.css +++ b/modules/rtrips/components/trips.css @@ -4,3 +4,306 @@ folk-trips-planner { min-height: 400px; padding: 20px; } + +/* ── Demo page layout ── */ +.rd-page { + max-width: 960px; + margin: 0 auto; + padding: 2rem 1.5rem 4rem; +} + +.rd-hero { + text-align: center; + margin-bottom: 2rem; +} +.rd-hero h1 { + font-size: 2rem; + font-weight: 700; + background: linear-gradient(to right, #14b8a6, #06b6d4); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} +.rd-hero-route { + color: #94a3b8; + font-size: 1rem; + margin: 0.25rem 0; +} +.rd-hero-meta { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 1rem; + font-size: 0.8125rem; + color: #94a3b8; + margin-top: 0.5rem; +} +.rd-hero-avatars { + display: flex; + align-items: center; + justify-content: center; + gap: 0.25rem; + margin-top: 0.75rem; +} +.rd-avatar { + width: 28px; + height: 28px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.75rem; + font-weight: 600; + color: white; + border: 2px solid #0f172a; + margin-left: -4px; +} +.rd-avatar:first-child { margin-left: 0; } + +/* ── Toolbar ── */ +.rd-toolbar { + display: flex; + align-items: center; + gap: 0.75rem; + margin-bottom: 1.5rem; + flex-wrap: wrap; +} +.rd-status { + display: inline-flex; + align-items: center; + gap: 0.375rem; + padding: 0.25rem 0.75rem; + border-radius: 9999px; + font-size: 0.75rem; + font-weight: 500; + letter-spacing: 0.03em; +} +.rd-status-dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: #64748b; +} +.rd-btn { + display: inline-flex; + align-items: center; + gap: 0.375rem; + padding: 0.375rem 0.875rem; + border-radius: 0.5rem; + font-size: 0.8125rem; + font-weight: 500; + background: transparent; + border: 1px solid #334155; + color: #cbd5e1; + cursor: pointer; + transition: all 0.15s; +} +.rd-btn:hover:not(:disabled) { border-color: #14b8a6; color: #14b8a6; } +.rd-btn:disabled { opacity: 0.4; cursor: not-allowed; } + +/* ── Card grid ── */ +.rd-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1.25rem; +} +.rd-card { + background: #0f172a; + border: 1px solid #1e293b; + border-radius: 0.75rem; + overflow: hidden; + transition: border-color 0.2s; +} +.rd-card:hover { border-color: rgba(20, 184, 166, 0.35); } +.rd-card-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.75rem 1.25rem 0.4rem; + gap: 0.75rem; +} +.rd-card-title { + font-size: 0.875rem; + font-weight: 600; + color: #e2e8f0; +} +.rd-card-live { + display: none; + align-items: center; + gap: 0.25rem; + font-size: 0.625rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.05em; + color: #34d399; +} +.rd-card-live::before { + content: ""; + width: 6px; + height: 6px; + border-radius: 50%; + background: #34d399; + animation: rd-pulse 2s ease-in-out infinite; +} +.rd-card-body { + padding: 0.5rem 1.25rem 1.25rem; +} + +/* ── Map SVG ── */ +.rd-map-svg { + width: 100%; + height: auto; + display: block; +} + +/* ── Packing list ── */ +.rd-trips-pack-item { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.375rem 0; + cursor: pointer; + font-size: 0.8125rem; +} +.rd-trips-pack-item:hover { background: rgba(30, 41, 59, 0.5); border-radius: 0.25rem; } +.rd-trips-pack-check { + width: 18px; + height: 18px; + border-radius: 4px; + border: 2px solid #334155; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + transition: all 0.15s; +} +.rd-trips-pack-check--checked { + background: #14b8a6; + border-color: #14b8a6; +} + +/* ── Calendar ── */ +.rd-cal-grid { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 2px; +} +.rd-cal-day-name { + font-size: 0.625rem; + text-transform: uppercase; + letter-spacing: 0.05em; + color: #64748b; + text-align: center; + padding: 0.25rem 0; +} +.rd-cal-cell { + min-height: 3.5rem; + padding: 0.25rem; + border-radius: 0.25rem; + display: flex; + flex-direction: column; + gap: 2px; +} +.rd-cal-cell--trip { background: rgba(20, 184, 166, 0.06); } +.rd-cal-cell--empty { background: transparent; } +.rd-cal-cell-num { + font-size: 0.6875rem; + font-weight: 500; +} +.rd-cal-cell-num--trip { color: #e2e8f0; } +.rd-cal-cell-num--off { color: #475569; } +.rd-cal-event { + font-size: 0.5625rem; + padding: 1px 4px; + border-radius: 3px; + color: white; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* ── Poll bars ── */ +.rd-trips-poll-bar-bg { + height: 0.375rem; + background: rgba(51, 65, 85, 0.7); + border-radius: 9999px; + overflow: hidden; +} +.rd-trips-poll-bar { + height: 100%; + border-radius: 9999px; + transition: width 0.3s; +} + +/* ── Funds ── */ +.rd-trips-sub-heading { + font-size: 0.6875rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + color: #64748b; + margin: 0 0 0.5rem; +} + +/* ── Cart items ── */ +.rd-trips-cart-item { + padding: 0.5rem; + background: rgba(30, 41, 59, 0.4); + border-radius: 0.5rem; +} +.rd-trips-cart-bar-bg { + height: 0.375rem; + background: rgba(51, 65, 85, 0.7); + border-radius: 9999px; + overflow: hidden; +} +.rd-trips-cart-bar { + height: 100%; + border-radius: 9999px; + transition: width 0.3s; +} + +/* ── Skeleton placeholders ── */ +.rd-skeleton { + display: flex; + flex-direction: column; + gap: 0.75rem; +} +.rd-skeleton-line { + height: 0.75rem; + background: rgba(51, 65, 85, 0.5); + border-radius: 0.25rem; + animation: rd-pulse 2s ease-in-out infinite; +} + +/* ── Footer ── */ +.rd-footer { + text-align: center; + margin-top: 2.5rem; + padding-top: 1.5rem; + border-top: 1px solid #1e293b; +} +.rd-footer a { + color: #64748b; + text-decoration: none; + font-size: 0.85rem; +} +.rd-footer a:hover { color: #14b8a6; } + +/* ── Animations ── */ +@keyframes rd-pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.4; } +} + +/* ── Responsive ── */ +@media (max-width: 768px) { + .rd-grid { grid-template-columns: 1fr; } + .rd-page { padding: 1rem 0.75rem 3rem; } + .rd-hero h1 { font-size: 1.5rem; } +} +@media (max-width: 480px) { + .rd-hero-meta { flex-direction: column; gap: 0.25rem; } + .rd-card-header { padding: 0.6rem 1rem 0.3rem; } + .rd-card-body { padding: 0.4rem 1rem 1rem; } +} diff --git a/modules/rtrips/mod.ts b/modules/rtrips/mod.ts index 599cf44..fd0a599 100644 --- a/modules/rtrips/mod.ts +++ b/modules/rtrips/mod.ts @@ -447,6 +447,142 @@ routes.get("/routes", (c) => { })); }); +// ── Demo dashboard ── +routes.get("/demo", (c) => { + return c.html(renderShell({ + title: "rTrips Demo — Live Trip Dashboard | rSpace", + moduleId: "rtrips", + spaceSlug: "demo", + modules: getModuleInfoList(), + theme: "dark", + styles: ``, + body: ` +
+
+

Alpine Explorer 2026

+

Loading route…

+
+ 📅 Jul 6–20, 2026 + 💶 ~€4,000 budget + 🏔️ 3 countries +
+
+
+ +
+ + + Connecting… + + + ← About rTrips +
+ +
+ +
+
+ 🗺️ Maps + Live +
+
+ + + + + +
+
+ + +
+
+ 📝 Packing List + Live +
+
+
+
+
+
+
+
+
+ + +
+
+ 📅 Calendar + Live + +
+
+
+
+
+
+
+
+
+ + +
+
+ 🗳️ Polls + Live +
+
+
+
+
+
+
+
+
+ + +
+
+ 💶 Funds + Live + €0 +
+
+
+
+
+
+
+ + +
+
+ + +
+
+ 🛒 Cart + Live +
+
+
+
+
+
+
+ +
+
+
+ +
+ ← Back to rTrips +
+
`, + scripts: ``, + })); +}); + // ── Page route ── routes.get("/", (c) => { const space = c.req.param("space") || "demo";