196 lines
9.4 KiB
TypeScript
196 lines
9.4 KiB
TypeScript
/**
|
|
* rTube — rich landing page body.
|
|
* Ported from rtube-online/app/page.tsx (Next.js/Tailwind).
|
|
* Returned by landingPage() in the module export;
|
|
* the shell wraps it with header, CSS, and analytics.
|
|
*/
|
|
export function renderLanding(): string {
|
|
return `
|
|
<!-- Hero -->
|
|
<div class="rl-hero">
|
|
<span class="rl-tagline">rTube</span>
|
|
<h1 class="rl-heading" style="background:linear-gradient(to right,#f87171,#f9a8d4,#fdba74);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
|
|
Community Video Hosting, Storage & Streaming
|
|
</h1>
|
|
<p class="rl-subtitle">Who needs YouTube, when you have (ou)rTube!</p>
|
|
<p class="rl-subtext">
|
|
Self-hosted video recording, live streaming, and storage for your rSpace community.
|
|
No corporate surveillance. No algorithmic feeds. Just your community's content.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rtube" class="rl-cta-secondary" id="ml-primary">Browse Videos</a>
|
|
<a href="https://demo.rspace.online/rtube" class="rl-cta-primary" style="background:#dc2626">Start Streaming</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- How It Works -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">How It Works</h2>
|
|
<div class="rl-grid-3">
|
|
<div class="rl-card rl-card--center">
|
|
<div style="width:3rem;height:3rem;background:rgba(239,68,68,0.2);border-radius:0.75rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem">
|
|
<svg style="width:1.5rem;height:1.5rem;color:#f87171" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<circle cx="12" cy="12" r="10" stroke-width="2" />
|
|
<circle cx="12" cy="12" r="4" fill="currentColor" />
|
|
</svg>
|
|
</div>
|
|
<h3>Record</h3>
|
|
<p>Stream directly from OBS, browser, or any RTMP-compatible tool. Your content
|
|
goes straight to your community's server — no third-party platforms involved.</p>
|
|
</div>
|
|
|
|
<div class="rl-card rl-card--center">
|
|
<div style="width:3rem;height:3rem;background:rgba(236,72,153,0.2);border-radius:0.75rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem">
|
|
<svg style="width:1.5rem;height:1.5rem;color:#f472b6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
|
</svg>
|
|
</div>
|
|
<h3>Stream Live</h3>
|
|
<p>Community members watch in real-time via HLS adaptive streaming.
|
|
Low-latency delivery through your own nginx-rtmp server with automatic
|
|
quality adaptation.</p>
|
|
</div>
|
|
|
|
<div class="rl-card rl-card--center">
|
|
<div style="width:3rem;height:3rem;background:rgba(249,115,22,0.2);border-radius:0.75rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem">
|
|
<svg style="width:1.5rem;height:1.5rem;color:#fb923c" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
|
|
</svg>
|
|
</div>
|
|
<h3>Archive & Store</h3>
|
|
<p>Completed streams are automatically converted to MP4 and archived to
|
|
R2 cloud storage. Browse, search, and replay your community's entire
|
|
video library anytime.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Built for Communities -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container">
|
|
<div style="background:rgba(30,41,59,0.3);border-radius:1rem;border:1px solid rgba(51,65,85,0.5);padding:2rem">
|
|
<h2 class="rl-heading" style="text-align:center;margin-bottom:2rem">Built for Communities</h2>
|
|
<div class="rl-grid-2" style="max-width:48rem;margin:0 auto">
|
|
<div style="display:flex;align-items:flex-start;gap:0.75rem">
|
|
<span style="color:#f87171;font-size:1.125rem;margin-top:2px">●</span>
|
|
<div>
|
|
<h4 style="font-weight:500;margin-bottom:0.25rem">Self-Hosted</h4>
|
|
<p style="font-size:0.875rem;color:#94a3b8">Your server, your data. No YouTube, no Twitch, no corporate middlemen.</p>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;align-items:flex-start;gap:0.75rem">
|
|
<span style="color:#f472b6;font-size:1.125rem;margin-top:2px">●</span>
|
|
<div>
|
|
<h4 style="font-weight:500;margin-bottom:0.25rem">RTMP Ingest</h4>
|
|
<p style="font-size:0.875rem;color:#94a3b8">Standard RTMP protocol — works with OBS, Streamlabs, FFmpeg, and more.</p>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;align-items:flex-start;gap:0.75rem">
|
|
<span style="color:#fb923c;font-size:1.125rem;margin-top:2px">●</span>
|
|
<div>
|
|
<h4 style="font-weight:500;margin-bottom:0.25rem">R2 Cloud Storage</h4>
|
|
<p style="font-size:0.875rem;color:#94a3b8">Cloudflare R2 for cost-effective, globally distributed video storage.</p>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;align-items:flex-start;gap:0.75rem">
|
|
<span style="color:#fbbf24;font-size:1.125rem;margin-top:2px">●</span>
|
|
<div>
|
|
<h4 style="font-weight:500;margin-bottom:0.25rem">HLS Playback</h4>
|
|
<p style="font-size:0.875rem;color:#94a3b8">Adaptive bitrate streaming works on every device and browser.</p>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;align-items:flex-start;gap:0.75rem">
|
|
<span style="color:#fb7185;font-size:1.125rem;margin-top:2px">●</span>
|
|
<div>
|
|
<h4 style="font-weight:500;margin-bottom:0.25rem">Auto-Archive</h4>
|
|
<p style="font-size:0.875rem;color:#94a3b8">Streams are automatically converted to MP4 and uploaded when they end.</p>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;align-items:flex-start;gap:0.75rem">
|
|
<span style="color:#e879f9;font-size:1.125rem;margin-top:2px">●</span>
|
|
<div>
|
|
<h4 style="font-weight:500;margin-bottom:0.25rem">Community-Scoped</h4>
|
|
<p style="font-size:0.875rem;color:#94a3b8">Each rSpace community gets its own video library and streaming channel.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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 rTube.</p>
|
|
<div class="rl-grid-4">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">☁</div>
|
|
<h3>AWS S3 SDK</h3>
|
|
<p>Cloudflare R2 object storage via the S3-compatible API. Fast, globally distributed, no egress fees.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">📺</div>
|
|
<h3>HLS.js</h3>
|
|
<p>Adaptive bitrate streaming library. Smooth playback with automatic quality switching in the browser.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🎦</div>
|
|
<h3>FFmpeg</h3>
|
|
<p>Industry-standard video transcoding. Converts uploads into multi-bitrate HLS streams automatically.</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, type-safe, and runs on any JavaScript runtime.</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 rTube 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">Ready to take back your video?</h2>
|
|
<p class="rl-subtext">Browse the community video library or start a live stream for your rSpace.</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rtube" class="rl-cta-primary" style="background:#dc2626">Start Streaming</a>
|
|
<a href="https://demo.rspace.online/rtube" class="rl-cta-secondary">Browse Videos</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="rl-back">
|
|
<a href="/">← Back to rSpace</a>
|
|
</div>`;
|
|
}
|