feat: redesign landing page to match rStack design paradigm
New landing page with gradient hero text, feature grid, how-it-works steps, CTA card, and ecosystem footer — matching the design language of rstack.online, rwallet.online, and other r* apps. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
a99de7388a
commit
b5251be1a2
|
|
@ -1,61 +1,492 @@
|
|||
{% extends "portal/base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}rfiles.online - Share Files by Topic{% endblock %}
|
||||
{% block title %}rfiles.online — Topic-Based File Sharing{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
.landing-container { max-width: 500px; margin: 0 auto; padding: 2rem; min-height: 80vh; display: flex; flex-direction: column; justify-content: center; }
|
||||
.hero { text-align: center; margin-bottom: 2.5rem; }
|
||||
.hero h1 { font-size: 2.5rem; margin-bottom: 0.5rem; background: linear-gradient(135deg, var(--primary), #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
|
||||
.hero .tagline { color: var(--text-muted); font-size: 1.1rem; }
|
||||
.create-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 2rem; }
|
||||
.create-card h2 { font-size: 1.1rem; margin-bottom: 1.5rem; text-align: center; color: var(--text-muted); }
|
||||
.form-group { margin-bottom: 1.25rem; }
|
||||
.form-group label { display: block; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.25rem; }
|
||||
.form-group input { width: 100%; padding: 0.875rem 1rem; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 1.1rem; transition: border-color 0.2s; }
|
||||
.form-group input:focus { outline: none; border-color: var(--primary); }
|
||||
.form-group input::placeholder { color: var(--text-muted); }
|
||||
.form-group .slug-preview { font-size: 0.85rem; color: var(--primary); margin-top: 0.5rem; font-family: monospace; text-align: center; }
|
||||
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 1.5rem; border-radius: 8px; font-size: 1.1rem; font-weight: 500; cursor: pointer; transition: all 0.2s; border: none; width: 100%; }
|
||||
.btn-primary { background: var(--primary); color: white; }
|
||||
.btn-primary:hover { background: var(--primary-hover); }
|
||||
.error-message { background: rgba(239, 68, 68, 0.1); border: 1px solid var(--error); color: var(--error); padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.9rem; text-align: center; }
|
||||
.active-topics { margin-top: 2.5rem; text-align: center; }
|
||||
.active-topics h3 { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1rem; }
|
||||
.topic-list { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
|
||||
.topic-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; color: var(--text); text-decoration: none; font-size: 0.85rem; transition: all 0.2s; }
|
||||
.topic-chip:hover { border-color: var(--primary); background: var(--surface-hover); }
|
||||
.topic-chip .count { font-size: 0.7rem; color: var(--text-muted); }
|
||||
/* ── Hero ─────────────────────────────────────── */
|
||||
|
||||
.landing-hero {
|
||||
text-align: center;
|
||||
padding: 4rem 1.5rem 3rem;
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
min-height: calc(100vh - 120px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-block;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
padding: 5px 14px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(20, 184, 166, 0.25);
|
||||
background: rgba(20, 184, 166, 0.1);
|
||||
color: #14b8a6;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.landing-hero h1 {
|
||||
font-size: 3.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
background: linear-gradient(135deg, #14b8a6, #7c3aed);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
letter-spacing: -0.02em;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.hero-tagline {
|
||||
font-size: 1.25rem;
|
||||
color: #94a3b8;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
font-size: 1rem;
|
||||
color: #64748b;
|
||||
line-height: 1.7;
|
||||
max-width: 560px;
|
||||
margin: 0 auto 2.5rem;
|
||||
}
|
||||
|
||||
.hero-description .hl {
|
||||
color: #00d4ff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ── Topic Input Group ────────────────────────── */
|
||||
|
||||
.topic-form {
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 1px solid var(--error);
|
||||
color: var(--error);
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.topic-input-group {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border: 2px solid var(--border);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
transition: border-color 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.topic-input-group:focus-within {
|
||||
border-color: rgba(20, 184, 166, 0.5);
|
||||
box-shadow: 0 0 30px rgba(20, 184, 166, 0.08);
|
||||
}
|
||||
|
||||
.topic-input-group input {
|
||||
flex: 1;
|
||||
padding: 14px 18px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: var(--text);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.topic-input-group input::placeholder {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.topic-input-group button {
|
||||
padding: 14px 28px;
|
||||
background: linear-gradient(135deg, var(--primary), #a78bfa);
|
||||
border: none;
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.topic-input-group button:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.slug-preview {
|
||||
font-size: 0.85rem;
|
||||
color: var(--primary);
|
||||
margin-top: 0.75rem;
|
||||
font-family: monospace;
|
||||
text-align: center;
|
||||
min-height: 1.25em;
|
||||
}
|
||||
|
||||
/* ── Active Topics ────────────────────────────── */
|
||||
|
||||
.active-topics {
|
||||
margin-top: 2.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.active-topics h3 {
|
||||
font-size: 0.85rem;
|
||||
color: #64748b;
|
||||
margin-bottom: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.topic-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.topic-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.4rem 0.75rem;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 16px;
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
font-size: 0.85rem;
|
||||
transition: border-color 0.2s, transform 0.2s;
|
||||
}
|
||||
|
||||
.topic-chip:hover {
|
||||
border-color: rgba(0, 212, 255, 0.35);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.topic-chip .count {
|
||||
font-size: 0.7rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
/* ── Section Divider ──────────────────────────── */
|
||||
|
||||
.section-divider {
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #14b8a6, #7c3aed);
|
||||
margin: 0 auto 2.5rem;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* ── Features Section ─────────────────────────── */
|
||||
|
||||
.features-section {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
padding: 3rem 1.5rem 4rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.features-section h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.75rem;
|
||||
background: linear-gradient(90deg, #00d4ff, #7c3aed);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.features-section .section-desc {
|
||||
color: #94a3b8;
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.7;
|
||||
max-width: 560px;
|
||||
margin: 0 auto 2.5rem;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 14px;
|
||||
padding: 2rem 1.25rem;
|
||||
text-align: center;
|
||||
transition: border-color 0.2s, transform 0.2s;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
border-color: rgba(0, 212, 255, 0.35);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 0.85rem;
|
||||
color: #94a3b8;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ── How It Works ─────────────────────────────── */
|
||||
|
||||
.how-section {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
padding: 3rem 1.5rem 4rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.how-section h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 2.5rem;
|
||||
background: linear-gradient(90deg, #00d4ff, #7c3aed);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.steps-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.step {
|
||||
text-align: center;
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--primary), #a78bfa);
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 14px;
|
||||
}
|
||||
|
||||
.step h3 {
|
||||
font-size: 1.05rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.step p {
|
||||
font-size: 0.88rem;
|
||||
color: #94a3b8;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.step .hl {
|
||||
color: #00d4ff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ── CTA Section ──────────────────────────────── */
|
||||
|
||||
.cta-section {
|
||||
max-width: 720px;
|
||||
margin: 0 auto 3rem;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.cta-card {
|
||||
position: relative;
|
||||
border-radius: 20px;
|
||||
border: 2px solid rgba(20, 184, 166, 0.2);
|
||||
background: linear-gradient(135deg, rgba(20, 184, 166, 0.08), rgba(124, 58, 237, 0.08));
|
||||
padding: 3.5rem 2.5rem;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cta-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -60px;
|
||||
right: -60px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: rgba(20, 184, 166, 0.15);
|
||||
border-radius: 50%;
|
||||
filter: blur(60px);
|
||||
}
|
||||
|
||||
.cta-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -60px;
|
||||
left: -60px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: rgba(124, 58, 237, 0.15);
|
||||
border-radius: 50%;
|
||||
filter: blur(60px);
|
||||
}
|
||||
|
||||
.cta-card > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cta-card h2 {
|
||||
font-size: 1.6rem;
|
||||
color: #fff;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.cta-card p {
|
||||
color: #94a3b8;
|
||||
font-size: 1.05rem;
|
||||
max-width: 420px;
|
||||
margin: 0 auto 1.5rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.btn-cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 14px 28px;
|
||||
border-radius: 10px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: linear-gradient(135deg, var(--primary), #a78bfa);
|
||||
color: white;
|
||||
transition: opacity 0.2s, transform 0.2s;
|
||||
}
|
||||
|
||||
.btn-cta:hover {
|
||||
opacity: 0.85;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* ── Ecosystem Footer ─────────────────────────── */
|
||||
|
||||
.ecosystem-footer {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||
padding: 2rem 1.5rem 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ecosystem-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.ecosystem-links .label {
|
||||
font-weight: 500;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.ecosystem-links a {
|
||||
color: #64748b;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.ecosystem-links a:hover {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.ecosystem-links a.current {
|
||||
color: #94a3b8;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ecosystem-tagline {
|
||||
font-size: 0.75rem;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
/* ── Responsive ───────────────────────────────── */
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.landing-hero h1 { font-size: 2.5rem; }
|
||||
.hero-tagline { font-size: 1.05rem; }
|
||||
.topic-input-group { flex-direction: column; }
|
||||
.topic-input-group input { text-align: center; }
|
||||
.topic-input-group button { padding: 14px; }
|
||||
.features-grid { grid-template-columns: 1fr; }
|
||||
.steps-grid { grid-template-columns: 1fr; }
|
||||
.cta-card { padding: 2.5rem 1.5rem; }
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="landing-container">
|
||||
<div class="hero">
|
||||
<h1>rfiles.online</h1>
|
||||
<p class="tagline">Share files by topic</p>
|
||||
</div>
|
||||
|
||||
<div class="create-card">
|
||||
<h2>Enter a topic to start sharing</h2>
|
||||
<!-- ── Hero ─────────────────────────────────────── -->
|
||||
<div class="landing-hero">
|
||||
<span class="hero-badge">Part of the r* Ecosystem</span>
|
||||
<h1>📁 rfiles</h1>
|
||||
<p class="hero-tagline">Topic-based file sharing. No sign-up required.</p>
|
||||
<p class="hero-description">
|
||||
Create a topic, get a subdomain. Share files with anyone through
|
||||
<span class="hl">topic.rfiles.online</span> — instant, open,
|
||||
and community-ready.
|
||||
</p>
|
||||
|
||||
<div class="topic-form">
|
||||
{% if error %}
|
||||
<div class="error-message">{{ error }}</div>
|
||||
{% endif %}
|
||||
|
||||
<form method="post" action="{% url 'portal:create_topic' %}">
|
||||
{% csrf_token %}
|
||||
<div class="form-group">
|
||||
<input type="text" id="topic" name="topic" placeholder="e.g., birthday-photos" pattern="[a-z0-9-]+" required autofocus>
|
||||
<div class="slug-preview" id="slugPreview"></div>
|
||||
<div class="topic-input-group">
|
||||
<input type="text" id="topic" name="topic"
|
||||
placeholder="Enter a topic name..."
|
||||
pattern="[a-z0-9-]+" required autofocus>
|
||||
<button type="submit">Go →</button>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Go</button>
|
||||
<div class="slug-preview" id="slugPreview"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{% if active_topics %}
|
||||
<div class="active-topics">
|
||||
<h3>Active topics</h3>
|
||||
<h3>Active Topics</h3>
|
||||
<div class="topic-list">
|
||||
{% for topic in active_topics %}
|
||||
<a href="https://{{ topic.slug }}.rfiles.online" class="topic-chip">
|
||||
|
|
@ -67,25 +498,134 @@
|
|||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- ── Features ────────────────────────────────── -->
|
||||
<div class="features-section">
|
||||
<div class="section-divider"></div>
|
||||
<h2>Why rFiles?</h2>
|
||||
<p class="section-desc">
|
||||
Simple, fast, and open file sharing for communities, teams, and events.
|
||||
</p>
|
||||
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🔗</div>
|
||||
<div class="feature-title">Instant Subdomains</div>
|
||||
<div class="feature-desc">
|
||||
Every topic gets its own URL. Share
|
||||
<strong>photos.rfiles.online</strong> instead of a random link —
|
||||
memorable, clean, and always accessible.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">📤</div>
|
||||
<div class="feature-title">Drag & Drop Upload</div>
|
||||
<div class="feature-desc">
|
||||
Drop files directly into any topic. Images, documents, audio,
|
||||
video — any file type, with no account needed.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🔗</div>
|
||||
<div class="feature-title">Shareable Links</div>
|
||||
<div class="feature-desc">
|
||||
Every upload gets a public share link with optional password
|
||||
protection, expiration dates, and download tracking.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── How It Works ────────────────────────────── -->
|
||||
<div class="how-section">
|
||||
<div class="section-divider"></div>
|
||||
<h2>How It Works</h2>
|
||||
|
||||
<div class="steps-grid">
|
||||
<div class="step">
|
||||
<div class="step-number">1</div>
|
||||
<h3>Name Your Topic</h3>
|
||||
<p>
|
||||
Type a topic name like <span class="hl">birthday-photos</span>
|
||||
or <span class="hl">project-docs</span>. It becomes your subdomain instantly.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-number">2</div>
|
||||
<h3>Upload Files</h3>
|
||||
<p>
|
||||
Drag and drop or click to upload. Files are immediately available
|
||||
at your topic URL for anyone to access.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-number">3</div>
|
||||
<h3>Share the Link</h3>
|
||||
<p>
|
||||
Send <span class="hl">topic.rfiles.online</span> to anyone.
|
||||
They can view, download, and upload their own files.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── CTA ──────────────────────────────────────── -->
|
||||
<div class="cta-section">
|
||||
<div class="cta-card">
|
||||
<h2>Ready to Share?</h2>
|
||||
<p>Create a topic and start sharing files in seconds. No sign-up required.</p>
|
||||
<button class="btn-cta" id="ctaButton">Create a Topic ↑</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Ecosystem Footer ────────────────────────── -->
|
||||
<div class="ecosystem-footer">
|
||||
<div class="ecosystem-links">
|
||||
<span class="label">r* Ecosystem</span>
|
||||
<a href="https://rspace.online">🌌 rSpace</a>
|
||||
<a href="https://rmaps.online">🗺️ rMaps</a>
|
||||
<a href="https://rnotes.online">📝 rNotes</a>
|
||||
<a href="https://rvote.online">🗳️ rVote</a>
|
||||
<a href="https://rfunds.online">💰 rFunds</a>
|
||||
<a href="https://rtrips.online">✈️ rTrips</a>
|
||||
<a href="https://rcart.online">🛒 rCart</a>
|
||||
<a href="https://rwallet.online">💼 rWallet</a>
|
||||
<a href="https://rfiles.online" class="current">📁 rFiles</a>
|
||||
<a href="https://rnetwork.online">🌐 rNetwork</a>
|
||||
</div>
|
||||
<p class="ecosystem-tagline">Part of the r* ecosystem — collaborative tools for communities.</p>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
const topicInput = document.getElementById('topic');
|
||||
const slugPreview = document.getElementById('slugPreview');
|
||||
// ── Slug Preview ─────────────────────────────────
|
||||
const topicInput = document.getElementById('topic');
|
||||
const slugPreview = document.getElementById('slugPreview');
|
||||
|
||||
function updateSlugPreview() {
|
||||
const slug = topicInput.value.toLowerCase().replace(/[^a-z0-9-]/g, '').replace(/\s+/g, '-');
|
||||
if (slug) {
|
||||
slugPreview.textContent = slug + '.rfiles.online';
|
||||
} else {
|
||||
slugPreview.textContent = '';
|
||||
function updateSlugPreview() {
|
||||
const slug = topicInput.value.toLowerCase().replace(/[^a-z0-9-]/g, '').replace(/\s+/g, '-');
|
||||
if (slug) {
|
||||
slugPreview.textContent = slug + '.rfiles.online';
|
||||
} else {
|
||||
slugPreview.textContent = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
topicInput.addEventListener('input', (e) => {
|
||||
e.target.value = e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '');
|
||||
updateSlugPreview();
|
||||
});
|
||||
topicInput.addEventListener('input', (e) => {
|
||||
e.target.value = e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '');
|
||||
updateSlugPreview();
|
||||
});
|
||||
|
||||
// ── CTA Scroll-to-Top ────────────────────────────
|
||||
document.getElementById('ctaButton').addEventListener('click', () => {
|
||||
topicInput.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
setTimeout(() => topicInput.focus(), 500);
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue