69 lines
3.1 KiB
TypeScript
69 lines
3.1 KiB
TypeScript
/**
|
|
* rVote demo page — server-rendered HTML body.
|
|
*
|
|
* Returns the static HTML skeleton for the interactive poll demo.
|
|
* The client-side vote-demo.ts populates #rd-polls-container via WebSocket.
|
|
*/
|
|
|
|
export function renderDemo(): string {
|
|
return `
|
|
<div class="rd-root" style="--rd-accent-from:#f97316; --rd-accent-to:#fb923c">
|
|
|
|
<!-- ── Hero ── -->
|
|
<div class="rd-hero">
|
|
<h1>rVote Demo</h1>
|
|
<p class="rd-subtitle">Interactive polls synced in real-time across all r* demos</p>
|
|
<div class="rd-meta">
|
|
<span>Vote on options with +/- buttons</span>
|
|
<span>Changes sync instantly via WebSocket</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Connection bar ── -->
|
|
<div class="rd-section rd-section--narrow">
|
|
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; flex-wrap:wrap; gap:0.75rem">
|
|
<div style="display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap">
|
|
<span id="rd-conn-badge" class="rd-status rd-status--disconnected">Disconnected</span>
|
|
<span class="rd-badge rd-badge--orange" style="font-size:0.7rem">Live — synced across all r* demos</span>
|
|
</div>
|
|
<button id="rd-reset-btn" class="rd-btn rd-btn--ghost" disabled>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
|
|
Reset Demo
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Loading state (shown until first snapshot) -->
|
|
<div id="rd-loading" class="rd-card" style="border:2px dashed rgba(100,116,139,0.4); display:none">
|
|
<div class="rd-card-body" style="padding:3rem; text-align:center">
|
|
<div style="width:2rem; height:2rem; margin:0 auto 0.75rem; border:3px solid rgba(249,115,22,0.2); border-top-color:#f97316; border-radius:50%; animation:rd-spin 0.8s linear infinite"></div>
|
|
<p class="rd-text-muted">Connecting to rSpace...</p>
|
|
</div>
|
|
</div>
|
|
<style>@keyframes rd-spin { to { transform: rotate(360deg); } }</style>
|
|
|
|
<!-- Empty state (no polls after connection) -->
|
|
<div id="rd-empty" class="rd-card" style="border:2px dashed rgba(100,116,139,0.4); display:none">
|
|
<div class="rd-card-body" style="padding:3rem; text-align:center">
|
|
<div style="font-size:2rem; margin-bottom:0.75rem">🗳</div>
|
|
<p class="rd-text-muted">No polls found. Try resetting the demo.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Poll cards container (populated by vote-demo.ts) -->
|
|
<div id="rd-polls-container" style="display:flex; flex-direction:column; gap:1rem"></div>
|
|
</div>
|
|
|
|
<!-- ── CTA ── -->
|
|
<div class="rd-section rd-section--narrow">
|
|
<div class="rd-cta">
|
|
<h2>Build with rVote</h2>
|
|
<p>Run conviction-weighted polls and governance decisions in your own community space.</p>
|
|
<a href="/create-space" style="background:linear-gradient(135deg,#f97316,#fb923c); box-shadow:0 4px 12px rgba(249,115,22,0.3)">
|
|
Create Your Space
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>`;
|
|
}
|