modified: src/pages/live-activity.astro
This commit is contained in:
GitHub
parent
8ea08bf237
commit
7b4b614186
5 changed files with 2437 additions and 2212 deletions
|
|
@ -1,421 +0,0 @@
|
|||
---
|
||||
import MainLayout from '../layouts/MainLayout.astro';
|
||||
|
||||
const docCategories = [
|
||||
{
|
||||
title: 'Getting Started',
|
||||
icon: '🚀',
|
||||
color: '#6cf',
|
||||
docs: [
|
||||
{ name: 'Introduction to AeThex', description: 'Overview of the ecosystem and core concepts', time: '5 min read' },
|
||||
{ name: 'Quickstart Guide', description: 'Get up and running in under 10 minutes', time: '10 min read' },
|
||||
{ name: 'Architecture Overview', description: 'Understanding the Trinity structure', time: '8 min read' },
|
||||
{ name: 'Authentication Setup', description: 'Implement SSO and identity verification', time: '12 min read' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Core APIs',
|
||||
icon: '⚡',
|
||||
color: '#ff4d4d',
|
||||
docs: [
|
||||
{ name: 'Identity API', description: 'User authentication and profile management', time: '15 min read' },
|
||||
{ name: 'Asset API', description: 'Digital asset creation and management', time: '12 min read' },
|
||||
{ name: 'Events API', description: 'Real-time event streaming and webhooks', time: '10 min read' },
|
||||
{ name: 'Analytics API', description: 'Usage metrics and insights', time: '8 min read' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'SDKs & Tools',
|
||||
icon: '🛠️',
|
||||
color: '#ffc700',
|
||||
docs: [
|
||||
{ name: 'JavaScript SDK', description: 'Full-featured SDK for web applications', time: '20 min read' },
|
||||
{ name: 'Python SDK', description: 'Backend integration and automation', time: '15 min read' },
|
||||
{ name: 'Unity Plugin', description: 'Game engine integration guide', time: '25 min read' },
|
||||
{ name: 'CLI Reference', description: 'Command-line tools documentation', time: '10 min read' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Advanced Topics',
|
||||
icon: '🧠',
|
||||
color: '#a855f7',
|
||||
docs: [
|
||||
{ name: 'Decentralized Storage', description: 'IPFS and distributed data patterns', time: '18 min read' },
|
||||
{ name: 'Smart Contracts', description: 'On-chain asset management', time: '22 min read' },
|
||||
{ name: 'AI Integration', description: 'Machine learning APIs and models', time: '20 min read' },
|
||||
{ name: 'Security Best Practices', description: 'Hardening your implementation', time: '15 min read' },
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const popularDocs = [
|
||||
{ name: 'Quickstart Guide', views: '12.4k', icon: '📖' },
|
||||
{ name: 'Authentication Setup', views: '8.2k', icon: '🔐' },
|
||||
{ name: 'JavaScript SDK', views: '6.8k', icon: '💻' },
|
||||
{ name: 'Identity API', views: '5.1k', icon: '👤' },
|
||||
];
|
||||
---
|
||||
<MainLayout>
|
||||
<!-- Hero Section -->
|
||||
<section class="docs-hero">
|
||||
<div class="docs-hero-bg"></div>
|
||||
<div class="hero-content">
|
||||
<h1 class="hero-title">Documentation</h1>
|
||||
<p class="hero-desc">Everything you need to build on the AeThex ecosystem. Comprehensive guides, API references, and tutorials.</p>
|
||||
|
||||
<!-- Search Bar -->
|
||||
<div class="docs-search">
|
||||
<svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
|
||||
</svg>
|
||||
<input type="text" placeholder="Search documentation..." class="search-input" />
|
||||
<kbd class="search-shortcut">⌘K</kbd>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quick Stats -->
|
||||
<section class="docs-stats">
|
||||
<div class="stat-card">
|
||||
<span class="stat-value">150+</span>
|
||||
<span class="stat-label">Documentation Pages</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-value">4</span>
|
||||
<span class="stat-label">SDKs Available</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-value">50+</span>
|
||||
<span class="stat-label">Code Examples</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-value">Weekly</span>
|
||||
<span class="stat-label">Updates</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Popular Docs -->
|
||||
<section class="popular-section">
|
||||
<h2 class="section-title">Popular Documentation</h2>
|
||||
<div class="popular-grid">
|
||||
{popularDocs.map(doc => (
|
||||
<a href="/docs" class="popular-card">
|
||||
<span class="popular-icon">{doc.icon}</span>
|
||||
<div class="popular-info">
|
||||
<span class="popular-name">{doc.name}</span>
|
||||
<span class="popular-views">{doc.views} views</span>
|
||||
</div>
|
||||
<svg class="arrow-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Documentation Categories -->
|
||||
<section class="docs-categories">
|
||||
{docCategories.map(category => (
|
||||
<div class="category-section">
|
||||
<div class="category-header">
|
||||
<span class="category-icon" style={`background: ${category.color}20; color: ${category.color};`}>{category.icon}</span>
|
||||
<h2 class="category-title">{category.title}</h2>
|
||||
</div>
|
||||
<div class="docs-grid">
|
||||
{category.docs.map(doc => (
|
||||
<a href="/docs" class="doc-card" style={`--accent: ${category.color};`}>
|
||||
<h3 class="doc-title">{doc.name}</h3>
|
||||
<p class="doc-description">{doc.description}</p>
|
||||
<span class="doc-time">{doc.time}</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
|
||||
<!-- API Reference CTA -->
|
||||
<section class="api-cta">
|
||||
<div class="cta-content">
|
||||
<h2>Full API Reference</h2>
|
||||
<p>Dive into the complete API documentation with interactive examples, request/response schemas, and authentication guides.</p>
|
||||
<div class="cta-buttons">
|
||||
<a href="/docs" class="cta-primary">Explore API →</a>
|
||||
<a href="https://github.com/AeThex-LABS" target="_blank" rel="noopener" class="cta-secondary">View on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta-code">
|
||||
<pre><code><span class="code-comment">// Example: Authenticate a user</span>
|
||||
<span class="code-keyword">const</span> user = <span class="code-keyword">await</span> aethex.auth.login({'{'}
|
||||
<span class="code-string">email</span>: <span class="code-value">'user@example.com'</span>,
|
||||
<span class="code-string">provider</span>: <span class="code-value">'sso'</span>
|
||||
{'}'});
|
||||
|
||||
<span class="code-comment">// Access user profile</span>
|
||||
<span class="code-keyword">console</span>.log(user.profile);</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
/* Hero Section */
|
||||
.docs-hero {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 100px 20px 60px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.docs-hero-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, #0a0d14 0%, #101827 50%, #0a0d14 100%);
|
||||
z-index: -1;
|
||||
}
|
||||
.docs-hero-bg::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(ellipse at 50% 0%, rgba(102, 204, 255, 0.1) 0%, transparent 60%);
|
||||
}
|
||||
.hero-title {
|
||||
font-size: 3.5em;
|
||||
font-weight: 900;
|
||||
color: #fff;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.hero-desc {
|
||||
font-size: 1.2em;
|
||||
color: #888;
|
||||
max-width: 600px;
|
||||
margin: 0 auto 32px;
|
||||
}
|
||||
|
||||
/* Search Bar */
|
||||
.docs-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 12px;
|
||||
padding: 12px 20px;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
gap: 12px;
|
||||
}
|
||||
.search-icon { color: #666; flex-shrink: 0; }
|
||||
.search-input {
|
||||
flex: 1;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 1em;
|
||||
outline: none;
|
||||
}
|
||||
.search-input::placeholder { color: #666; }
|
||||
.search-shortcut {
|
||||
background: rgba(255,255,255,0.1);
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8em;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Stats Section */
|
||||
.docs-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
max-width: 900px;
|
||||
margin: -30px auto 60px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.stat-card {
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
.stat-value {
|
||||
display: block;
|
||||
font-size: 2em;
|
||||
font-weight: 800;
|
||||
color: #6cf;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.stat-label {
|
||||
font-size: 0.85em;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Popular Section */
|
||||
.popular-section {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto 60px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 1.5em;
|
||||
color: #fff;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.popular-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
.popular-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 10px;
|
||||
padding: 16px;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.popular-card:hover {
|
||||
background: rgba(255,255,255,0.06);
|
||||
border-color: rgba(102,204,255,0.3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.popular-icon { font-size: 1.5em; }
|
||||
.popular-info { flex: 1; }
|
||||
.popular-name { display: block; color: #fff; font-weight: 600; font-size: 0.9em; }
|
||||
.popular-views { font-size: 0.75em; color: #666; }
|
||||
.arrow-icon { color: #666; }
|
||||
|
||||
/* Categories */
|
||||
.docs-categories {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px 60px;
|
||||
}
|
||||
.category-section { margin-bottom: 48px; }
|
||||
.category-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.category-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.category-title {
|
||||
font-size: 1.3em;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
}
|
||||
.docs-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
.doc-card {
|
||||
background: rgba(255,255,255,0.02);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.doc-card:hover {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-color: var(--accent, #6cf);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.doc-title {
|
||||
font-size: 1em;
|
||||
color: #fff;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
.doc-description {
|
||||
font-size: 0.85em;
|
||||
color: #888;
|
||||
margin: 0 0 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.doc-time {
|
||||
font-size: 0.75em;
|
||||
color: #666;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
}
|
||||
|
||||
/* API CTA */
|
||||
.api-cta {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 40px;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto 80px;
|
||||
padding: 40px;
|
||||
background: linear-gradient(135deg, rgba(102,204,255,0.05) 0%, rgba(168,85,247,0.05) 100%);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 20px;
|
||||
}
|
||||
.cta-content h2 {
|
||||
font-size: 1.8em;
|
||||
color: #fff;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
.cta-content p {
|
||||
color: #888;
|
||||
margin: 0 0 24px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.cta-buttons { display: flex; gap: 12px; }
|
||||
.cta-primary {
|
||||
background: linear-gradient(135deg, #6cf 0%, #3b82f6 100%);
|
||||
color: #000;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.cta-primary:hover { transform: translateY(-2px); }
|
||||
.cta-secondary {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
color: #fff;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.cta-secondary:hover { background: rgba(255,255,255,0.1); }
|
||||
.cta-code {
|
||||
background: #0d1117;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.cta-code pre { margin: 0; }
|
||||
.cta-code code {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-size: 0.9em;
|
||||
line-height: 1.8;
|
||||
color: #e6edf3;
|
||||
}
|
||||
.code-comment { color: #8b949e; }
|
||||
.code-keyword { color: #ff7b72; }
|
||||
.code-string { color: #79c0ff; }
|
||||
.code-value { color: #a5d6ff; }
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 900px) {
|
||||
.docs-stats, .popular-grid, .docs-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.api-cta { grid-template-columns: 1fr; }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.docs-stats, .popular-grid, .docs-grid { grid-template-columns: 1fr; }
|
||||
.hero-title { font-size: 2.5em; }
|
||||
}
|
||||
</style>
|
||||
</MainLayout>
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -2,19 +2,49 @@
|
|||
import MainLayout from '../layouts/MainLayout.astro';
|
||||
|
||||
const legendaryContributors = [
|
||||
{ name: 'Alex Chen', username: '@alexdev', avatar: 'https://i.pravatar.cc/100?img=1', title: 'Core Architect', contributions: 847, points: 12500, badges: ['🏆', '💎', '⚡'], specialty: 'Infrastructure' },
|
||||
{ name: 'Maya Rodriguez', username: '@maya_sdk', avatar: 'https://i.pravatar.cc/100?img=5', title: 'SDK Lead', contributions: 623, points: 9800, badges: ['🏆', '🔧', '📚'], specialty: 'Developer Tools' },
|
||||
{ name: 'Jordan Kim', username: '@j_kim', avatar: 'https://i.pravatar.cc/100?img=3', title: 'Docs Champion', contributions: 512, points: 7600, badges: ['🏆', '📖', '✨'], specialty: 'Documentation' },
|
||||
{
|
||||
name: 'Alex Chen',
|
||||
username: '@alexdev',
|
||||
avatar: 'https://i.pravatar.cc/150?img=1',
|
||||
title: 'Core Architect',
|
||||
contributions: 847,
|
||||
points: 12500,
|
||||
badges: ['🏆', '💎', '⚡'],
|
||||
specialty: 'Infrastructure',
|
||||
quote: 'Building the future, one commit at a time.'
|
||||
},
|
||||
{
|
||||
name: 'Maya Rodriguez',
|
||||
username: '@maya_sdk',
|
||||
avatar: 'https://i.pravatar.cc/150?img=5',
|
||||
title: 'SDK Lead',
|
||||
contributions: 623,
|
||||
points: 9800,
|
||||
badges: ['🏆', '🔧', '📚'],
|
||||
specialty: 'Developer Tools',
|
||||
quote: 'Great APIs are invisible to the developer.'
|
||||
},
|
||||
{
|
||||
name: 'Jordan Kim',
|
||||
username: '@j_kim',
|
||||
avatar: 'https://i.pravatar.cc/150?img=3',
|
||||
title: 'Docs Champion',
|
||||
contributions: 512,
|
||||
points: 7600,
|
||||
badges: ['🏆', '📖', '✨'],
|
||||
specialty: 'Documentation',
|
||||
quote: 'Documentation is a love letter to your future self.'
|
||||
},
|
||||
];
|
||||
|
||||
const topContributors = [
|
||||
{ rank: 4, name: 'Sam Patel', username: '@sampatel', avatar: 'https://i.pravatar.cc/100?img=8', contributions: 389, points: 5400, badge: '🥇' },
|
||||
{ rank: 5, name: 'Riley Johnson', username: '@rileyj', avatar: 'https://i.pravatar.cc/100?img=12', contributions: 342, points: 4800, badge: '🥇' },
|
||||
{ rank: 6, name: 'Casey Morgan', username: '@caseym', avatar: 'https://i.pravatar.cc/100?img=15', contributions: 298, points: 4200, badge: '🥇' },
|
||||
{ rank: 7, name: 'Taylor Swift', username: '@tswift_dev', avatar: 'https://i.pravatar.cc/100?img=20', contributions: 276, points: 3900, badge: '🥈' },
|
||||
{ rank: 8, name: 'Morgan Lee', username: '@morganlee', avatar: 'https://i.pravatar.cc/100?img=25', contributions: 254, points: 3600, badge: '🥈' },
|
||||
{ rank: 9, name: 'Jamie Wilson', username: '@jwilson', avatar: 'https://i.pravatar.cc/100?img=30', contributions: 231, points: 3300, badge: '🥈' },
|
||||
{ rank: 10, name: 'Chris Anderson', username: '@chris_a', avatar: 'https://i.pravatar.cc/100?img=33', contributions: 215, points: 3100, badge: '🥉' },
|
||||
{ rank: 4, name: 'Sam Patel', username: '@sampatel', avatar: 'https://i.pravatar.cc/100?img=8', contributions: 389, points: 5400, tier: 'gold' },
|
||||
{ rank: 5, name: 'Riley Johnson', username: '@rileyj', avatar: 'https://i.pravatar.cc/100?img=12', contributions: 342, points: 4800, tier: 'gold' },
|
||||
{ rank: 6, name: 'Casey Morgan', username: '@caseym', avatar: 'https://i.pravatar.cc/100?img=15', contributions: 298, points: 4200, tier: 'gold' },
|
||||
{ rank: 7, name: 'Taylor Swift', username: '@tswift_dev', avatar: 'https://i.pravatar.cc/100?img=20', contributions: 276, points: 3900, tier: 'silver' },
|
||||
{ rank: 8, name: 'Morgan Lee', username: '@morganlee', avatar: 'https://i.pravatar.cc/100?img=25', contributions: 254, points: 3600, tier: 'silver' },
|
||||
{ rank: 9, name: 'Jamie Wilson', username: '@jwilson', avatar: 'https://i.pravatar.cc/100?img=30', contributions: 231, points: 3300, tier: 'silver' },
|
||||
{ rank: 10, name: 'Chris Anderson', username: '@chris_a', avatar: 'https://i.pravatar.cc/100?img=33', contributions: 215, points: 3100, tier: 'bronze' },
|
||||
];
|
||||
|
||||
const hallOfShame = [
|
||||
|
|
@ -24,31 +54,32 @@ const hallOfShame = [
|
|||
];
|
||||
|
||||
const badges = [
|
||||
{ icon: '🏆', name: 'Legend', description: 'Top 3 all-time contributor', rarity: 'legendary' },
|
||||
{ icon: '💎', name: 'Diamond', description: '500+ contributions', rarity: 'epic' },
|
||||
{ icon: '⚡', name: 'First Responder', description: 'Fastest bug reporter', rarity: 'rare' },
|
||||
{ icon: '🔧', name: 'Builder', description: 'Core infrastructure contributor', rarity: 'epic' },
|
||||
{ icon: '📚', name: 'Scholar', description: 'Documentation excellence', rarity: 'rare' },
|
||||
{ icon: '🥇', name: 'Gold Tier', description: 'Top 10 contributor', rarity: 'rare' },
|
||||
{ icon: '🥈', name: 'Silver Tier', description: 'Top 25 contributor', rarity: 'uncommon' },
|
||||
{ icon: '🥉', name: 'Bronze Tier', description: 'Top 50 contributor', rarity: 'common' },
|
||||
{ icon: '🏆', name: 'Legend', description: 'Top 3 all-time contributor', rarity: 'legendary', color: '#ffc700' },
|
||||
{ icon: '💎', name: 'Diamond', description: '500+ contributions', rarity: 'epic', color: '#a855f7' },
|
||||
{ icon: '⚡', name: 'First Responder', description: 'Fastest bug reporter', rarity: 'rare', color: '#6cf' },
|
||||
{ icon: '🔧', name: 'Builder', description: 'Core infrastructure work', rarity: 'epic', color: '#a855f7' },
|
||||
{ icon: '📚', name: 'Scholar', description: 'Documentation excellence', rarity: 'rare', color: '#6cf' },
|
||||
{ icon: '🥇', name: 'Gold Tier', description: 'Top 10 contributor', rarity: 'rare', color: '#ffc700' },
|
||||
{ icon: '🥈', name: 'Silver Tier', description: 'Top 25 contributor', rarity: 'uncommon', color: '#888' },
|
||||
{ icon: '🥉', name: 'Bronze Tier', description: 'Top 50 contributor', rarity: 'common', color: '#cd7f32' },
|
||||
];
|
||||
|
||||
const stats = [
|
||||
{ value: '500+', label: 'Total Contributors' },
|
||||
{ value: '12.5K', label: 'Total Contributions' },
|
||||
{ value: '500+', label: 'Contributors' },
|
||||
{ value: '12.5K', label: 'Contributions' },
|
||||
{ value: '847', label: 'Top Score' },
|
||||
{ value: '24', label: 'Unique Badges' },
|
||||
{ value: '24', label: 'Badges' },
|
||||
];
|
||||
---
|
||||
<MainLayout>
|
||||
<MainLayout title="Hall of Fame - AeThex">
|
||||
<!-- Hero -->
|
||||
<section class="fame-hero">
|
||||
<div class="hero-bg"></div>
|
||||
<div class="hero-particles"></div>
|
||||
<div class="hero-content">
|
||||
<span class="hero-label">Recognition</span>
|
||||
<span class="hero-badge">⭐ Recognition</span>
|
||||
<h1 class="hero-title">Hall of <span class="gradient-text">Fame</span></h1>
|
||||
<p class="hero-desc">Celebrating the builders, contributors, and community members who make AeThex possible. And calling out those who don't play nice.</p>
|
||||
<p class="hero-desc">Celebrating the builders, contributors, and community members who make AeThex possible. And calling out those who don't play by the rules.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -64,14 +95,21 @@ const stats = [
|
|||
|
||||
<!-- Legendary Contributors -->
|
||||
<section class="legends-section">
|
||||
<h2 class="section-title">🏆 Legendary Contributors</h2>
|
||||
<div class="section-header">
|
||||
<span class="section-eyebrow">> LEGENDARY_STATUS</span>
|
||||
<h2 class="section-title">The Legends</h2>
|
||||
<p class="section-subtitle">Top 3 all-time contributors who shaped AeThex</p>
|
||||
</div>
|
||||
<div class="legends-grid">
|
||||
{legendaryContributors.map((legend, i) => (
|
||||
<div class="legend-card" data-rank={i + 1}>
|
||||
<div class="legend-rank">#{i + 1}</div>
|
||||
<div class="legend-glow"></div>
|
||||
<div class="legend-rank">
|
||||
<span class="rank-crown">👑</span>
|
||||
<span class="rank-num">#{i + 1}</span>
|
||||
</div>
|
||||
<div class="legend-avatar">
|
||||
<img src={legend.avatar} alt={legend.name} />
|
||||
<span class="legend-crown">👑</span>
|
||||
</div>
|
||||
<h3 class="legend-name">{legend.name}</h3>
|
||||
<p class="legend-username">{legend.username}</p>
|
||||
|
|
@ -91,6 +129,7 @@ const stats = [
|
|||
<span class="stat-lbl">Points</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="legend-quote">"{legend.quote}"</p>
|
||||
<span class="legend-specialty">{legend.specialty}</span>
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -99,33 +138,48 @@ const stats = [
|
|||
|
||||
<!-- Leaderboard -->
|
||||
<section class="leaderboard-section">
|
||||
<h2 class="section-title">Top Contributors</h2>
|
||||
<div class="section-header">
|
||||
<span class="section-eyebrow">> LEADERBOARD</span>
|
||||
<h2 class="section-title">Top Contributors</h2>
|
||||
<p class="section-subtitle">Ranked by total contribution points</p>
|
||||
</div>
|
||||
<div class="leaderboard">
|
||||
<div class="leaderboard-header">
|
||||
<span class="lb-col-rank">Rank</span>
|
||||
<span class="lb-col-user">Contributor</span>
|
||||
<span class="lb-col-contributions">Contributions</span>
|
||||
<span class="lb-col-points">Points</span>
|
||||
<span class="lb-col-tier">Tier</span>
|
||||
</div>
|
||||
{topContributors.map(user => (
|
||||
<div class="leaderboard-row">
|
||||
<div class={`leaderboard-row tier-${user.tier}`}>
|
||||
<span class="lb-rank">#{user.rank}</span>
|
||||
<img src={user.avatar} alt={user.name} class="lb-avatar" />
|
||||
<div class="lb-info">
|
||||
<span class="lb-name">{user.name}</span>
|
||||
<span class="lb-username">{user.username}</span>
|
||||
</div>
|
||||
<span class="lb-badge">{user.badge}</span>
|
||||
<div class="lb-stats">
|
||||
<span class="lb-contributions">{user.contributions} contributions</span>
|
||||
<span class="lb-points">{user.points.toLocaleString()} pts</span>
|
||||
<div class="lb-user">
|
||||
<img src={user.avatar} alt={user.name} class="lb-avatar" />
|
||||
<div class="lb-info">
|
||||
<span class="lb-name">{user.name}</span>
|
||||
<span class="lb-username">{user.username}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="lb-contributions">{user.contributions}</span>
|
||||
<span class="lb-points">{user.points.toLocaleString()}</span>
|
||||
<span class={`lb-tier ${user.tier}`}>{user.tier}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<a href="/community" class="view-all-link">View Full Leaderboard →</a>
|
||||
<a href="/community" class="view-all-btn">View Full Leaderboard →</a>
|
||||
</section>
|
||||
|
||||
<!-- Badges -->
|
||||
<section class="badges-section">
|
||||
<h2 class="section-title">Badges & Achievements</h2>
|
||||
<div class="section-header">
|
||||
<span class="section-eyebrow">> ACHIEVEMENTS</span>
|
||||
<h2 class="section-title">Badges & Achievements</h2>
|
||||
<p class="section-subtitle">Earn recognition for your contributions</p>
|
||||
</div>
|
||||
<div class="badges-grid">
|
||||
{badges.map(badge => (
|
||||
<div class={`badge-card ${badge.rarity}`}>
|
||||
<div class={`badge-card ${badge.rarity}`} style={`--badge-color: ${badge.color}`}>
|
||||
<span class="badge-icon">{badge.icon}</span>
|
||||
<h3 class="badge-name">{badge.name}</h3>
|
||||
<p class="badge-desc">{badge.description}</p>
|
||||
|
|
@ -137,8 +191,11 @@ const stats = [
|
|||
|
||||
<!-- Hall of Shame -->
|
||||
<section class="shame-section">
|
||||
<h2 class="section-title">🚫 Hall of Shame</h2>
|
||||
<p class="section-desc">Bad actors who violated community guidelines. Transparency is key.</p>
|
||||
<div class="section-header">
|
||||
<span class="section-eyebrow shame">> HALL_OF_SHAME</span>
|
||||
<h2 class="section-title">🚫 Hall of Shame</h2>
|
||||
<p class="section-subtitle">Bad actors who violated community guidelines. Transparency is key.</p>
|
||||
</div>
|
||||
<div class="shame-list">
|
||||
{hallOfShame.map(offender => (
|
||||
<div class="shame-card">
|
||||
|
|
@ -160,47 +217,65 @@ const stats = [
|
|||
<section class="fame-cta">
|
||||
<h2>Want Your Name Here?</h2>
|
||||
<p>Start contributing to AeThex and climb the leaderboard. Every contribution counts.</p>
|
||||
<a href="/contribute" class="cta-button">Start Contributing →</a>
|
||||
<div class="cta-buttons">
|
||||
<a href="/contribute" class="cta-btn primary">Start Contributing</a>
|
||||
<a href="/community" class="cta-btn secondary">Join Community</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--fame-gold: #ffc700;
|
||||
--fame-purple: #a855f7;
|
||||
--fame-cyan: #6cf;
|
||||
}
|
||||
|
||||
/* Hero */
|
||||
.fame-hero {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
min-height: 50vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120px 20px 80px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
.hero-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(180deg, #0a0d14 0%, #10131a 100%);
|
||||
z-index: -1;
|
||||
background: linear-gradient(180deg, #0a0d14 0%, #1a1520 50%, #0a0d14 100%);
|
||||
}
|
||||
.hero-bg::before {
|
||||
content: '';
|
||||
.hero-particles {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(ellipse at 50% 30%, rgba(255,199,0,0.1) 0%, transparent 60%);
|
||||
background-image: radial-gradient(circle at 20% 30%, rgba(255, 199, 0, 0.1) 0%, transparent 40%),
|
||||
radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.1) 0%, transparent 40%);
|
||||
}
|
||||
.hero-label {
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 700px;
|
||||
}
|
||||
.hero-badge {
|
||||
display: inline-block;
|
||||
background: rgba(255,199,0,0.15);
|
||||
border: 1px solid rgba(255,199,0,0.3);
|
||||
padding: 6px 16px;
|
||||
border-radius: 20px;
|
||||
background: rgba(255, 199, 0, 0.1);
|
||||
border: 1px solid rgba(255, 199, 0, 0.3);
|
||||
color: var(--fame-gold);
|
||||
padding: 8px 20px;
|
||||
border-radius: 24px;
|
||||
font-size: 0.85em;
|
||||
color: #ffc700;
|
||||
margin-bottom: 20px;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.hero-title {
|
||||
font-size: 3.5em;
|
||||
font-size: 4em;
|
||||
font-weight: 900;
|
||||
color: #fff;
|
||||
margin: 0 0 20px;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #ffc700 0%, #ff6b35 100%);
|
||||
background: linear-gradient(135deg, var(--fame-gold) 0%, #ff6b35 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
|
|
@ -208,40 +283,64 @@ const stats = [
|
|||
.hero-desc {
|
||||
font-size: 1.2em;
|
||||
color: #888;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Stats */
|
||||
.stats-bar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 60px;
|
||||
padding: 40px 20px;
|
||||
gap: 80px;
|
||||
padding: 50px 20px;
|
||||
background: rgba(255,255,255,0.02);
|
||||
border-top: 1px solid rgba(255,255,255,0.05);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
.stat-item { text-align: center; }
|
||||
.stat-value { display: block; font-size: 2em; font-weight: 800; color: #ffc700; }
|
||||
.stat-label { font-size: 0.85em; color: #666; }
|
||||
.stat-value {
|
||||
display: block;
|
||||
font-size: 2.5em;
|
||||
font-weight: 900;
|
||||
color: var(--fame-gold);
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
}
|
||||
.stat-label {
|
||||
font-size: 0.85em;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* Legends */
|
||||
.legends-section {
|
||||
max-width: 1000px;
|
||||
margin: 60px auto;
|
||||
padding: 0 20px;
|
||||
/* Section Header */
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
.section-eyebrow {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-size: 0.85em;
|
||||
color: var(--fame-gold);
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 12px;
|
||||
display: block;
|
||||
}
|
||||
.section-eyebrow.shame { color: #ff4d4d; }
|
||||
.section-title {
|
||||
font-size: 1.8em;
|
||||
font-size: 2.5em;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
margin: 0 0 32px;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
.section-desc {
|
||||
.section-subtitle {
|
||||
font-size: 1.1em;
|
||||
color: #888;
|
||||
text-align: center;
|
||||
margin: -24px 0 32px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Legends Section */
|
||||
.legends-section {
|
||||
max-width: 1100px;
|
||||
margin: 80px auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.legends-grid {
|
||||
display: grid;
|
||||
|
|
@ -249,75 +348,126 @@ const stats = [
|
|||
gap: 24px;
|
||||
}
|
||||
.legend-card {
|
||||
background: linear-gradient(135deg, rgba(255,199,0,0.05) 0%, rgba(255,107,53,0.05) 100%);
|
||||
border: 2px solid rgba(255,199,0,0.2);
|
||||
position: relative;
|
||||
background: rgba(255,255,255,0.02);
|
||||
border: 1px solid rgba(255, 199, 0, 0.2);
|
||||
border-radius: 20px;
|
||||
padding: 32px 24px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.legend-card:hover {
|
||||
transform: translateY(-8px);
|
||||
border-color: var(--fame-gold);
|
||||
}
|
||||
.legend-glow {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 200%;
|
||||
height: 100%;
|
||||
background: radial-gradient(ellipse at center, rgba(255, 199, 0, 0.1) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.legend-card[data-rank="1"] { border-color: rgba(255,199,0,0.5); }
|
||||
.legend-card[data-rank="2"] { border-color: rgba(192,192,192,0.5); }
|
||||
.legend-card[data-rank="3"] { border-color: rgba(205,127,50,0.5); }
|
||||
.legend-rank {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 20px;
|
||||
background: linear-gradient(135deg, #ffc700, #ff6b35);
|
||||
color: #000;
|
||||
font-weight: 800;
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.85em;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.rank-crown { font-size: 1.5em; }
|
||||
.rank-num {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
color: var(--fame-gold);
|
||||
font-size: 0.9em;
|
||||
font-weight: 700;
|
||||
}
|
||||
.legend-avatar {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 0 auto 16px;
|
||||
border-radius: 50%;
|
||||
padding: 4px;
|
||||
background: linear-gradient(135deg, var(--fame-gold), var(--fame-purple));
|
||||
}
|
||||
.legend-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: 3px solid #ffc700;
|
||||
object-fit: cover;
|
||||
}
|
||||
.legend-crown {
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 1.5em;
|
||||
.legend-name {
|
||||
color: #fff;
|
||||
font-size: 1.3em;
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
.legend-username {
|
||||
color: #666;
|
||||
font-size: 0.9em;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
.legend-title {
|
||||
color: var(--fame-gold);
|
||||
font-size: 0.85em;
|
||||
font-weight: 600;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
.legend-badges {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.legend-name { color: #fff; margin: 0 0 4px; font-size: 1.2em; }
|
||||
.legend-username { color: #6cf; font-size: 0.85em; margin: 0 0 8px; font-family: 'Roboto Mono', monospace; }
|
||||
.legend-title { color: #ffc700; font-size: 0.8em; margin: 0 0 12px; }
|
||||
.legend-badges { margin-bottom: 16px; }
|
||||
.legend-badges .badge {
|
||||
font-size: 1.2em;
|
||||
margin: 0 4px;
|
||||
font-size: 1.3em;
|
||||
background: rgba(255,255,255,0.05);
|
||||
padding: 6px 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.legend-stats {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
margin-bottom: 12px;
|
||||
gap: 32px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.legend-stat { text-align: center; }
|
||||
.stat-num { display: block; font-size: 1.3em; font-weight: 700; color: #fff; }
|
||||
.stat-lbl { font-size: 0.7em; color: #666; }
|
||||
.legend-specialty {
|
||||
.stat-num {
|
||||
display: block;
|
||||
font-size: 1.4em;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
}
|
||||
.stat-lbl {
|
||||
font-size: 0.75em;
|
||||
background: rgba(255,255,255,0.05);
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
color: #888;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.legend-quote {
|
||||
color: #666;
|
||||
font-style: italic;
|
||||
font-size: 0.85em;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
.legend-specialty {
|
||||
display: inline-block;
|
||||
background: rgba(255, 199, 0, 0.1);
|
||||
color: var(--fame-gold);
|
||||
padding: 6px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.8em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Leaderboard */
|
||||
.leaderboard-section {
|
||||
max-width: 800px;
|
||||
margin: 0 auto 60px;
|
||||
max-width: 900px;
|
||||
margin: 80px auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.leaderboard {
|
||||
|
|
@ -326,82 +476,129 @@ const stats = [
|
|||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.leaderboard-header {
|
||||
display: grid;
|
||||
grid-template-columns: 80px 1fr 120px 120px 100px;
|
||||
gap: 16px;
|
||||
padding: 16px 24px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
font-size: 0.8em;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.leaderboard-row {
|
||||
display: grid;
|
||||
grid-template-columns: 80px 1fr 120px 120px 100px;
|
||||
gap: 16px;
|
||||
padding: 16px 24px;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
.leaderboard-row:last-child { border-bottom: none; }
|
||||
.leaderboard-row:hover { background: rgba(255,255,255,0.03); }
|
||||
.lb-rank {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
.lb-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.leaderboard-row:hover { background: rgba(255,255,255,0.02); }
|
||||
.leaderboard-row:last-child { border-bottom: none; }
|
||||
.lb-rank {
|
||||
width: 40px;
|
||||
font-weight: 700;
|
||||
color: #888;
|
||||
gap: 12px;
|
||||
}
|
||||
.lb-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.lb-info { flex: 1; }
|
||||
.lb-name { display: block; color: #fff; font-weight: 500; }
|
||||
.lb-username { font-size: 0.8em; color: #666; }
|
||||
.lb-badge { font-size: 1.2em; }
|
||||
.lb-stats { text-align: right; }
|
||||
.lb-contributions { display: block; font-size: 0.85em; color: #fff; }
|
||||
.lb-points { font-size: 0.75em; color: #ffc700; }
|
||||
.view-all-link {
|
||||
.lb-info { display: flex; flex-direction: column; }
|
||||
.lb-name { color: #fff; font-weight: 600; }
|
||||
.lb-username { color: #666; font-size: 0.85em; }
|
||||
.lb-contributions, .lb-points {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
color: #aaa;
|
||||
}
|
||||
.lb-tier {
|
||||
text-transform: uppercase;
|
||||
font-size: 0.75em;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
.lb-tier.gold { background: rgba(255, 199, 0, 0.2); color: #ffc700; }
|
||||
.lb-tier.silver { background: rgba(200, 200, 200, 0.2); color: #ccc; }
|
||||
.lb-tier.bronze { background: rgba(205, 127, 50, 0.2); color: #cd7f32; }
|
||||
.view-all-btn {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
color: #6cf;
|
||||
color: var(--fame-gold);
|
||||
text-decoration: none;
|
||||
padding: 20px;
|
||||
font-weight: 600;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.view-all-link:hover { text-decoration: underline; }
|
||||
.view-all-btn:hover { opacity: 0.8; }
|
||||
|
||||
/* Badges */
|
||||
.badges-section {
|
||||
max-width: 900px;
|
||||
margin: 0 auto 60px;
|
||||
max-width: 1100px;
|
||||
margin: 80px auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.badges-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
gap: 20px;
|
||||
}
|
||||
.badge-card {
|
||||
background: rgba(255,255,255,0.02);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.badge-card:hover {
|
||||
border-color: var(--badge-color);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
.badge-icon {
|
||||
font-size: 2.5em;
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.badge-name {
|
||||
color: #fff;
|
||||
font-size: 1.1em;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
.badge-desc {
|
||||
color: #888;
|
||||
font-size: 0.85em;
|
||||
margin: 0 0 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.badge-card.legendary { border-color: rgba(255,199,0,0.3); }
|
||||
.badge-card.epic { border-color: rgba(168,85,247,0.3); }
|
||||
.badge-card.rare { border-color: rgba(102,204,255,0.3); }
|
||||
.badge-icon { font-size: 2em; display: block; margin-bottom: 8px; }
|
||||
.badge-name { color: #fff; margin: 0 0 4px; font-size: 0.95em; }
|
||||
.badge-desc { color: #888; font-size: 0.75em; margin: 0 0 8px; }
|
||||
.badge-rarity {
|
||||
font-size: 0.65em;
|
||||
display: inline-block;
|
||||
background: rgba(255,255,255,0.05);
|
||||
color: var(--badge-color);
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75em;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
padding: 2px 8px;
|
||||
border-radius: 8px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.badge-card.legendary .badge-rarity { background: rgba(255,199,0,0.2); color: #ffc700; }
|
||||
.badge-card.epic .badge-rarity { background: rgba(168,85,247,0.2); color: #a855f7; }
|
||||
.badge-card.rare .badge-rarity { background: rgba(102,204,255,0.2); color: #6cf; }
|
||||
.badge-card.uncommon .badge-rarity { background: rgba(0,204,136,0.2); color: #00cc88; }
|
||||
.badge-card.common .badge-rarity { background: rgba(136,136,136,0.2); color: #888; }
|
||||
|
||||
/* Shame */
|
||||
/* Shame Section */
|
||||
.shame-section {
|
||||
max-width: 700px;
|
||||
margin: 0 auto 60px;
|
||||
max-width: 800px;
|
||||
margin: 80px auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.shame-list {
|
||||
|
|
@ -413,60 +610,107 @@ const stats = [
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
background: rgba(255,77,77,0.05);
|
||||
border: 1px solid rgba(255,77,77,0.2);
|
||||
background: rgba(255, 77, 77, 0.05);
|
||||
border: 1px solid rgba(255, 77, 77, 0.2);
|
||||
border-radius: 12px;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
.shame-icon { font-size: 1.5em; }
|
||||
.shame-info { flex: 1; }
|
||||
.shame-name { display: block; color: #ff4d4d; font-weight: 600; }
|
||||
.shame-reason { font-size: 0.85em; color: #888; }
|
||||
.shame-meta { text-align: right; }
|
||||
.shame-severity {
|
||||
.shame-name {
|
||||
display: block;
|
||||
font-size: 0.7em;
|
||||
text-transform: uppercase;
|
||||
background: rgba(255,77,77,0.2);
|
||||
color: #ff4d4d;
|
||||
padding: 2px 8px;
|
||||
border-radius: 8px;
|
||||
color: #ff6b6b;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.shame-date { font-size: 0.75em; color: #666; }
|
||||
.shame-reason {
|
||||
color: #888;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.shame-meta {
|
||||
text-align: right;
|
||||
}
|
||||
.shame-severity {
|
||||
display: block;
|
||||
background: rgba(255, 77, 77, 0.2);
|
||||
color: #ff4d4d;
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75em;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.shame-date {
|
||||
color: #666;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
/* CTA */
|
||||
.fame-cta {
|
||||
max-width: 600px;
|
||||
margin: 0 auto 80px;
|
||||
padding: 60px;
|
||||
background: linear-gradient(135deg, rgba(255,199,0,0.08) 0%, rgba(255,107,53,0.08) 100%);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 24px;
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
background: linear-gradient(180deg, transparent 0%, rgba(255, 199, 0, 0.03) 100%);
|
||||
border-top: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
.fame-cta h2 { font-size: 2em; color: #fff; margin: 0 0 12px; }
|
||||
.fame-cta p { color: #888; margin: 0 0 24px; }
|
||||
.cta-button {
|
||||
display: inline-block;
|
||||
background: linear-gradient(135deg, #ffc700 0%, #ff6b35 100%);
|
||||
color: #000;
|
||||
padding: 14px 28px;
|
||||
.fame-cta h2 {
|
||||
font-size: 2.5em;
|
||||
color: #fff;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
.fame-cta p {
|
||||
color: #888;
|
||||
font-size: 1.1em;
|
||||
margin: 0 0 32px;
|
||||
}
|
||||
.cta-buttons {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
}
|
||||
.cta-btn {
|
||||
padding: 16px 32px;
|
||||
border-radius: 10px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 0.9em;
|
||||
letter-spacing: 1px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.cta-btn.primary {
|
||||
background: var(--fame-gold);
|
||||
color: #000;
|
||||
}
|
||||
.cta-btn.primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 40px rgba(255, 199, 0, 0.3);
|
||||
}
|
||||
.cta-btn.secondary {
|
||||
background: transparent;
|
||||
color: var(--fame-gold);
|
||||
border: 2px solid rgba(255, 199, 0, 0.3);
|
||||
}
|
||||
.cta-btn.secondary:hover {
|
||||
border-color: var(--fame-gold);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 900px) {
|
||||
.legends-grid { grid-template-columns: 1fr; }
|
||||
.hero-title { font-size: 2.5em; }
|
||||
.legends-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
|
||||
.leaderboard-header { display: none; }
|
||||
.leaderboard-row {
|
||||
grid-template-columns: 60px 1fr auto;
|
||||
gap: 12px;
|
||||
}
|
||||
.lb-contributions, .lb-points { display: none; }
|
||||
.badges-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.stats-bar { flex-wrap: wrap; gap: 30px; }
|
||||
.stats-bar { flex-wrap: wrap; gap: 40px; }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.hero-title { font-size: 2.5em; }
|
||||
.badges-grid { grid-template-columns: 1fr; }
|
||||
.leaderboard-row { flex-wrap: wrap; }
|
||||
.shame-card { flex-direction: column; text-align: center; }
|
||||
.shame-meta { text-align: center; }
|
||||
}
|
||||
</style>
|
||||
</MainLayout>
|
||||
|
|
|
|||
|
|
@ -17,27 +17,34 @@ const activityFeed = [
|
|||
];
|
||||
|
||||
const liveStats = [
|
||||
{ label: 'Active Users', value: '2,847', change: '+12%', icon: '👥' },
|
||||
{ label: 'API Requests/min', value: '45.2K', change: '+8%', icon: '⚡' },
|
||||
{ label: 'Active Sessions', value: '1,234', change: '+5%', icon: '🔗' },
|
||||
{ label: 'Uptime', value: '99.99%', change: '', icon: '✅' },
|
||||
{ label: 'Active Users', value: '2,847', change: '+12%', trend: 'up', icon: '👥' },
|
||||
{ label: 'API Requests/min', value: '45.2K', change: '+8%', trend: 'up', icon: '⚡' },
|
||||
{ label: 'Active Sessions', value: '1,234', change: '+5%', trend: 'up', icon: '🔗' },
|
||||
{ label: 'Uptime', value: '99.99%', change: '', trend: 'stable', icon: '✅' },
|
||||
];
|
||||
|
||||
const channels = [
|
||||
{ name: 'All Activity', count: 156, active: true },
|
||||
{ name: 'Releases', count: 12 },
|
||||
{ name: 'Deployments', count: 24 },
|
||||
{ name: 'Community', count: 89 },
|
||||
{ name: 'Development', count: 31 },
|
||||
{ name: 'All Activity', count: 156, icon: '📡' },
|
||||
{ name: 'Releases', count: 12, icon: '🚀' },
|
||||
{ name: 'Deployments', count: 24, icon: '⚡' },
|
||||
{ name: 'Community', count: 89, icon: '👥' },
|
||||
{ name: 'Development', count: 31, icon: '💻' },
|
||||
];
|
||||
|
||||
const upcomingEvents = [
|
||||
{ title: 'Weekly Community Call', time: 'Today, 5:00 PM UTC', type: 'call' },
|
||||
{ title: 'SDK v3.0 Release', time: 'Feb 10, 2026', type: 'release' },
|
||||
{ title: 'Developer Workshop', time: 'Feb 15, 2026', type: 'workshop' },
|
||||
];
|
||||
---
|
||||
<MainLayout>
|
||||
<MainLayout title="Live Activity - AeThex">
|
||||
<!-- Hero -->
|
||||
<section class="live-hero">
|
||||
<div class="hero-bg"></div>
|
||||
<div class="hero-pulse"></div>
|
||||
<div class="hero-content">
|
||||
<div class="live-indicator">
|
||||
<span class="pulse"></span>
|
||||
<span class="pulse-dot"></span>
|
||||
<span class="live-text">LIVE</span>
|
||||
</div>
|
||||
<h1 class="hero-title">Activity <span class="gradient-text">Feed</span></h1>
|
||||
|
|
@ -46,17 +53,21 @@ const channels = [
|
|||
</section>
|
||||
|
||||
<!-- Live Stats -->
|
||||
<section class="stats-bar">
|
||||
{liveStats.map(stat => (
|
||||
<div class="stat-card">
|
||||
<span class="stat-icon">{stat.icon}</span>
|
||||
<div class="stat-info">
|
||||
<span class="stat-value">{stat.value}</span>
|
||||
{stat.change && <span class="stat-change">{stat.change}</span>}
|
||||
<section class="stats-section">
|
||||
<div class="stats-grid">
|
||||
{liveStats.map(stat => (
|
||||
<div class="stat-card">
|
||||
<span class="stat-icon">{stat.icon}</span>
|
||||
<div class="stat-content">
|
||||
<div class="stat-row">
|
||||
<span class="stat-value">{stat.value}</span>
|
||||
{stat.change && <span class={`stat-change ${stat.trend}`}>{stat.change}</span>}
|
||||
</div>
|
||||
<span class="stat-label">{stat.label}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="stat-label">{stat.label}</span>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Main Content -->
|
||||
|
|
@ -64,37 +75,68 @@ const channels = [
|
|||
<div class="feed-container">
|
||||
<!-- Sidebar -->
|
||||
<aside class="feed-sidebar">
|
||||
<h3>Channels</h3>
|
||||
<div class="channel-list">
|
||||
{channels.map(channel => (
|
||||
<button class={`channel-btn ${channel.active ? 'active' : ''}`}>
|
||||
<span class="channel-name">{channel.name}</span>
|
||||
<span class="channel-count">{channel.count}</span>
|
||||
</button>
|
||||
))}
|
||||
<div class="sidebar-block">
|
||||
<h3 class="sidebar-title">> Channels</h3>
|
||||
<div class="channel-list">
|
||||
{channels.map((channel, i) => (
|
||||
<button class={`channel-btn ${i === 0 ? 'active' : ''}`}>
|
||||
<span class="channel-icon">{channel.icon}</span>
|
||||
<span class="channel-name">{channel.name}</span>
|
||||
<span class="channel-count">{channel.count}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Filters</h3>
|
||||
<div class="filter-group">
|
||||
<label class="filter-item">
|
||||
<input type="checkbox" checked /> Releases
|
||||
</label>
|
||||
<label class="filter-item">
|
||||
<input type="checkbox" checked /> Deployments
|
||||
</label>
|
||||
<label class="filter-item">
|
||||
<input type="checkbox" checked /> Community
|
||||
</label>
|
||||
<label class="filter-item">
|
||||
<input type="checkbox" checked /> Development
|
||||
</label>
|
||||
|
||||
<div class="sidebar-block">
|
||||
<h3 class="sidebar-title">> Filters</h3>
|
||||
<div class="filter-group">
|
||||
<label class="filter-item">
|
||||
<input type="checkbox" checked />
|
||||
<span class="filter-checkbox"></span>
|
||||
<span>Releases</span>
|
||||
</label>
|
||||
<label class="filter-item">
|
||||
<input type="checkbox" checked />
|
||||
<span class="filter-checkbox"></span>
|
||||
<span>Deployments</span>
|
||||
</label>
|
||||
<label class="filter-item">
|
||||
<input type="checkbox" checked />
|
||||
<span class="filter-checkbox"></span>
|
||||
<span>Community</span>
|
||||
</label>
|
||||
<label class="filter-item">
|
||||
<input type="checkbox" checked />
|
||||
<span class="filter-checkbox"></span>
|
||||
<span>Development</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-block">
|
||||
<h3 class="sidebar-title">> Upcoming</h3>
|
||||
<div class="upcoming-list">
|
||||
{upcomingEvents.map(event => (
|
||||
<div class="upcoming-item">
|
||||
<span class="upcoming-title">{event.title}</span>
|
||||
<span class="upcoming-time">{event.time}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Feed -->
|
||||
<main class="feed-main">
|
||||
<div class="feed-header">
|
||||
<h2>Latest Activity</h2>
|
||||
<div class="feed-header-left">
|
||||
<h2>Latest Activity</h2>
|
||||
<span class="feed-live-badge">
|
||||
<span class="mini-pulse"></span>
|
||||
Live
|
||||
</span>
|
||||
</div>
|
||||
<div class="feed-controls">
|
||||
<button class="control-btn active">All</button>
|
||||
<button class="control-btn">Highlights</button>
|
||||
|
|
@ -102,9 +144,10 @@ const channels = [
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="activity-list">
|
||||
<div class="activity-timeline">
|
||||
{activityFeed.map(item => (
|
||||
<div class={`activity-item ${item.type}`}>
|
||||
<div class={`activity-item type-${item.type}`}>
|
||||
<div class="activity-line"></div>
|
||||
<span class="activity-icon">{item.icon}</span>
|
||||
<div class="activity-content">
|
||||
<p class="activity-text">
|
||||
|
|
@ -112,91 +155,143 @@ const channels = [
|
|||
<span class="activity-action">{item.action}</span>
|
||||
<span class="activity-target">{item.target}</span>
|
||||
</p>
|
||||
<span class="activity-time">{item.time}</span>
|
||||
<div class="activity-meta">
|
||||
<span class="activity-time">{item.time}</span>
|
||||
<span class={`activity-type-badge ${item.type}`}>{item.type}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class={`activity-type ${item.type}`}>{item.type}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button class="load-more">Load More Activity</button>
|
||||
<button class="load-more-btn">
|
||||
<span class="load-icon">↻</span>
|
||||
Load More Activity
|
||||
</button>
|
||||
</main>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Subscribe -->
|
||||
<!-- Subscribe Section -->
|
||||
<section class="subscribe-section">
|
||||
<h2>Stay Updated</h2>
|
||||
<p>Get notifications for the activity that matters to you.</p>
|
||||
<div class="subscribe-options">
|
||||
<label class="subscribe-option">
|
||||
<input type="checkbox" /> Email digest (daily)
|
||||
</label>
|
||||
<label class="subscribe-option">
|
||||
<input type="checkbox" /> Discord notifications
|
||||
</label>
|
||||
<label class="subscribe-option">
|
||||
<input type="checkbox" /> RSS feed
|
||||
</label>
|
||||
<div class="subscribe-content">
|
||||
<div class="subscribe-info">
|
||||
<h2>Stay Updated</h2>
|
||||
<p>Get notifications for the activity that matters to you. Never miss an important update.</p>
|
||||
</div>
|
||||
<div class="subscribe-options">
|
||||
<label class="subscribe-option">
|
||||
<input type="checkbox" />
|
||||
<span class="option-checkbox"></span>
|
||||
<div class="option-content">
|
||||
<span class="option-title">📧 Email Digest</span>
|
||||
<span class="option-desc">Daily summary of activity</span>
|
||||
</div>
|
||||
</label>
|
||||
<label class="subscribe-option">
|
||||
<input type="checkbox" />
|
||||
<span class="option-checkbox"></span>
|
||||
<div class="option-content">
|
||||
<span class="option-title">💬 Discord</span>
|
||||
<span class="option-desc">Real-time notifications</span>
|
||||
</div>
|
||||
</label>
|
||||
<label class="subscribe-option">
|
||||
<input type="checkbox" />
|
||||
<span class="option-checkbox"></span>
|
||||
<div class="option-content">
|
||||
<span class="option-title">📡 RSS Feed</span>
|
||||
<span class="option-desc">Subscribe in your reader</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<a href="/contribute" class="subscribe-btn">Configure Notifications →</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="live-cta">
|
||||
<h2>Join the Action</h2>
|
||||
<p>Contribute to AeThex and see your activity appear here in real-time.</p>
|
||||
<div class="cta-buttons">
|
||||
<a href="/contribute" class="cta-btn primary">Start Contributing</a>
|
||||
<a href="/community" class="cta-btn secondary">Join Community</a>
|
||||
</div>
|
||||
<a href="/contribute" class="subscribe-btn">Configure Notifications →</a>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--live-red: #ff4d4d;
|
||||
--live-orange: #ff6b35;
|
||||
--live-cyan: #6cf;
|
||||
}
|
||||
|
||||
/* Hero */
|
||||
.live-hero {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
min-height: 50vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120px 20px 80px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
.hero-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(180deg, #0a0d14 0%, #10131a 100%);
|
||||
z-index: -1;
|
||||
background: linear-gradient(180deg, #0a0d14 0%, #150d0d 50%, #0a0d14 100%);
|
||||
}
|
||||
.hero-bg::before {
|
||||
content: '';
|
||||
.hero-pulse {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(ellipse at 50% 30%, rgba(255,77,77,0.1) 0%, transparent 60%);
|
||||
background-image: radial-gradient(circle at 50% 50%, rgba(255, 77, 77, 0.15) 0%, transparent 50%);
|
||||
animation: heroPulse 3s ease-in-out infinite;
|
||||
}
|
||||
@keyframes heroPulse {
|
||||
0%, 100% { opacity: 0.5; transform: scale(1); }
|
||||
50% { opacity: 1; transform: scale(1.05); }
|
||||
}
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 700px;
|
||||
}
|
||||
.live-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: rgba(255,77,77,0.15);
|
||||
border: 1px solid rgba(255,77,77,0.3);
|
||||
padding: 6px 16px;
|
||||
border-radius: 20px;
|
||||
margin-bottom: 20px;
|
||||
gap: 10px;
|
||||
background: rgba(255, 77, 77, 0.1);
|
||||
border: 1px solid rgba(255, 77, 77, 0.3);
|
||||
padding: 10px 24px;
|
||||
border-radius: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.pulse {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #ff4d4d;
|
||||
.pulse-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: var(--live-red);
|
||||
border-radius: 50%;
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.5; transform: scale(1.2); }
|
||||
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.5); }
|
||||
50% { opacity: 0.8; box-shadow: 0 0 0 10px rgba(255, 77, 77, 0); }
|
||||
}
|
||||
.live-text {
|
||||
font-size: 0.85em;
|
||||
font-weight: 700;
|
||||
color: #ff4d4d;
|
||||
letter-spacing: 0.1em;
|
||||
font-weight: 800;
|
||||
color: var(--live-red);
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.hero-title {
|
||||
font-size: 3.5em;
|
||||
font-size: 4em;
|
||||
font-weight: 900;
|
||||
color: #fff;
|
||||
margin: 0 0 20px;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #ff4d4d 0%, #ff6b35 100%);
|
||||
background: linear-gradient(135deg, var(--live-red) 0%, var(--live-orange) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
|
|
@ -204,245 +299,483 @@ const channels = [
|
|||
.hero-desc {
|
||||
font-size: 1.2em;
|
||||
color: #888;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Stats */
|
||||
.stats-bar {
|
||||
/* Stats Section */
|
||||
.stats-section {
|
||||
max-width: 1000px;
|
||||
margin: -40px auto 60px;
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
max-width: 900px;
|
||||
margin: -40px auto 60px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.stat-card {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
border-radius: 16px;
|
||||
padding: 20px 24px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.stat-card:hover {
|
||||
border-color: var(--live-red);
|
||||
background: rgba(255, 77, 77, 0.03);
|
||||
}
|
||||
.stat-icon { font-size: 1.8em; }
|
||||
.stat-content { flex: 1; }
|
||||
.stat-row { display: flex; align-items: baseline; gap: 8px; }
|
||||
.stat-value {
|
||||
font-size: 1.5em;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
}
|
||||
.stat-change {
|
||||
font-size: 0.85em;
|
||||
font-weight: 600;
|
||||
}
|
||||
.stat-change.up { color: #00cc88; }
|
||||
.stat-change.stable { color: #888; }
|
||||
.stat-label {
|
||||
display: block;
|
||||
font-size: 0.8em;
|
||||
color: #666;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.stat-icon { font-size: 1.2em; }
|
||||
.stat-info { display: flex; align-items: baseline; gap: 8px; }
|
||||
.stat-value { font-size: 1.5em; font-weight: 700; color: #fff; }
|
||||
.stat-change { font-size: 0.85em; color: #00cc88; }
|
||||
.stat-label { font-size: 0.8em; color: #666; }
|
||||
|
||||
/* Feed Section */
|
||||
.feed-section {
|
||||
max-width: 1100px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto 60px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.feed-container {
|
||||
display: grid;
|
||||
grid-template-columns: 250px 1fr;
|
||||
gap: 30px;
|
||||
grid-template-columns: 280px 1fr;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.feed-sidebar {
|
||||
background: rgba(255,255,255,0.02);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
height: fit-content;
|
||||
position: sticky;
|
||||
top: 100px;
|
||||
height: fit-content;
|
||||
}
|
||||
.feed-sidebar h3 {
|
||||
.sidebar-block {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.sidebar-title {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-size: 0.85em;
|
||||
color: #888;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin: 0 0 12px;
|
||||
color: var(--live-red);
|
||||
letter-spacing: 1px;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
.channel-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 24px;
|
||||
gap: 6px;
|
||||
}
|
||||
.channel-btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
background: rgba(255,255,255,0.02);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
padding: 12px 16px;
|
||||
border-radius: 10px;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: all 0.3s ease;
|
||||
text-align: left;
|
||||
}
|
||||
.channel-btn:hover { background: rgba(255,255,255,0.05); color: #fff; }
|
||||
.channel-btn.active {
|
||||
background: rgba(255,77,77,0.1);
|
||||
border-color: rgba(255,77,77,0.3);
|
||||
color: #ff4d4d;
|
||||
.channel-btn:hover, .channel-btn.active {
|
||||
border-color: var(--live-red);
|
||||
color: #fff;
|
||||
background: rgba(255, 77, 77, 0.05);
|
||||
}
|
||||
.channel-name { font-size: 0.9em; }
|
||||
.channel-icon { font-size: 1em; }
|
||||
.channel-name { flex: 1; font-size: 0.9em; }
|
||||
.channel-count {
|
||||
font-size: 0.75em;
|
||||
background: rgba(255,255,255,0.1);
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
padding: 2px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.8em;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
}
|
||||
.filter-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
gap: 8px;
|
||||
}
|
||||
.filter-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.85em;
|
||||
gap: 10px;
|
||||
color: #888;
|
||||
font-size: 0.9em;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.filter-item input { accent-color: #ff4d4d; }
|
||||
|
||||
/* Main Feed */
|
||||
.feed-main {
|
||||
.filter-item:hover { color: #fff; }
|
||||
.filter-item input { display: none; }
|
||||
.filter-checkbox {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 2px solid rgba(255,255,255,0.2);
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.filter-item input:checked + .filter-checkbox {
|
||||
background: var(--live-red);
|
||||
border-color: var(--live-red);
|
||||
}
|
||||
.filter-item input:checked + .filter-checkbox::after {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
font-size: 0.7em;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.upcoming-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.upcoming-item {
|
||||
padding: 12px;
|
||||
background: rgba(255,255,255,0.02);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.upcoming-title {
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.upcoming-time {
|
||||
font-size: 0.8em;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Feed Main */
|
||||
.feed-main { }
|
||||
.feed-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
}
|
||||
.feed-header h2 { font-size: 1.3em; color: #fff; margin: 0; }
|
||||
.feed-controls { display: flex; gap: 8px; }
|
||||
.control-btn {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid transparent;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
color: #888;
|
||||
font-size: 0.85em;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.control-btn:hover { color: #fff; }
|
||||
.control-btn.active {
|
||||
background: rgba(255,77,77,0.1);
|
||||
border-color: rgba(255,77,77,0.3);
|
||||
color: #ff4d4d;
|
||||
}
|
||||
|
||||
.activity-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.activity-item {
|
||||
.feed-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
background: rgba(255,255,255,0.02);
|
||||
border-radius: 10px;
|
||||
border-left: 3px solid transparent;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.activity-item:hover { background: rgba(255,255,255,0.04); }
|
||||
.activity-item.release { border-left-color: #00cc88; }
|
||||
.activity-item.merge { border-left-color: #a855f7; }
|
||||
.activity-item.deploy { border-left-color: #6cf; }
|
||||
.activity-item.user { border-left-color: #ffc700; }
|
||||
.activity-item.discussion { border-left-color: #ff6b35; }
|
||||
.activity-item.achievement { border-left-color: #ffc700; }
|
||||
.activity-item.issue { border-left-color: #ff4d4d; }
|
||||
.activity-item.event { border-left-color: #a855f7; }
|
||||
.activity-icon { font-size: 1.3em; }
|
||||
.activity-content { flex: 1; }
|
||||
.activity-text { margin: 0 0 4px; font-size: 0.95em; }
|
||||
.activity-user { color: #6cf; font-weight: 500; }
|
||||
.activity-action { color: #888; margin: 0 4px; }
|
||||
.activity-target { color: #fff; }
|
||||
.activity-time { font-size: 0.75em; color: #666; }
|
||||
.activity-type {
|
||||
font-size: 0.65em;
|
||||
padding: 4px 10px;
|
||||
.feed-header h2 {
|
||||
font-size: 1.5em;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
}
|
||||
.feed-live-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: rgba(255, 77, 77, 0.1);
|
||||
color: var(--live-red);
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.75em;
|
||||
font-weight: 600;
|
||||
}
|
||||
.mini-pulse {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--live-red);
|
||||
border-radius: 50%;
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
.feed-controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
.control-btn {
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
color: #888;
|
||||
padding: 8px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.85em;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.control-btn:hover, .control-btn.active {
|
||||
border-color: var(--live-red);
|
||||
color: #fff;
|
||||
}
|
||||
.activity-type.release { background: rgba(0,204,136,0.15); color: #00cc88; }
|
||||
.activity-type.merge { background: rgba(168,85,247,0.15); color: #a855f7; }
|
||||
.activity-type.deploy { background: rgba(102,204,255,0.15); color: #6cf; }
|
||||
.activity-type.user { background: rgba(255,199,0,0.15); color: #ffc700; }
|
||||
.activity-type.discussion { background: rgba(255,107,53,0.15); color: #ff6b35; }
|
||||
.activity-type.achievement { background: rgba(255,199,0,0.15); color: #ffc700; }
|
||||
.activity-type.issue { background: rgba(255,77,77,0.15); color: #ff4d4d; }
|
||||
.activity-type.event { background: rgba(168,85,247,0.15); color: #a855f7; }
|
||||
|
||||
.load-more {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
/* Activity Timeline */
|
||||
.activity-timeline {
|
||||
position: relative;
|
||||
}
|
||||
.activity-item {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
position: relative;
|
||||
}
|
||||
.activity-line {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
.activity-item:first-child .activity-line { top: 50%; }
|
||||
.activity-item:last-child .activity-line { bottom: 50%; }
|
||||
.activity-icon {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
padding: 14px;
|
||||
border-radius: 12px;
|
||||
font-size: 1.2em;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.activity-content { flex: 1; }
|
||||
.activity-text {
|
||||
color: #aaa;
|
||||
margin: 0 0 8px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.activity-user {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
.activity-action { color: #888; }
|
||||
.activity-target {
|
||||
color: var(--live-cyan);
|
||||
}
|
||||
.activity-meta {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
.activity-time {
|
||||
font-size: 0.8em;
|
||||
color: #666;
|
||||
}
|
||||
.activity-type-badge {
|
||||
font-size: 0.7em;
|
||||
padding: 2px 10px;
|
||||
border-radius: 10px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.activity-type-badge.release { background: rgba(0, 255, 0, 0.1); color: #0f0; }
|
||||
.activity-type-badge.merge { background: rgba(168, 85, 247, 0.1); color: #a855f7; }
|
||||
.activity-type-badge.user { background: rgba(102, 204, 255, 0.1); color: #6cf; }
|
||||
.activity-type-badge.deploy { background: rgba(255, 199, 0, 0.1); color: #ffc700; }
|
||||
.activity-type-badge.discussion { background: rgba(255, 107, 53, 0.1); color: #ff6b35; }
|
||||
.activity-type-badge.achievement { background: rgba(255, 199, 0, 0.1); color: #ffc700; }
|
||||
.activity-type-badge.issue { background: rgba(255, 77, 77, 0.1); color: #ff4d4d; }
|
||||
.activity-type-badge.event { background: rgba(0, 204, 136, 0.1); color: #00cc88; }
|
||||
|
||||
.load-more-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
background: rgba(255,255,255,0.02);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
color: #888;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
margin-top: 24px;
|
||||
font-size: 0.9em;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.load-more-btn:hover {
|
||||
border-color: var(--live-red);
|
||||
color: #fff;
|
||||
}
|
||||
.load-icon {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.load-more:hover { background: rgba(255,255,255,0.08); color: #fff; }
|
||||
|
||||
/* Subscribe */
|
||||
/* Subscribe Section */
|
||||
.subscribe-section {
|
||||
max-width: 600px;
|
||||
margin: 0 auto 80px;
|
||||
padding: 40px;
|
||||
max-width: 900px;
|
||||
margin: 80px auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.subscribe-content {
|
||||
background: rgba(255,255,255,0.02);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 20px;
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
.subscribe-section h2 { font-size: 1.5em; color: #fff; margin: 0 0 8px; }
|
||||
.subscribe-section p { color: #888; margin: 0 0 20px; }
|
||||
.subscribe-info h2 {
|
||||
font-size: 1.8em;
|
||||
color: #fff;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
.subscribe-info p {
|
||||
color: #888;
|
||||
margin: 0 0 32px;
|
||||
}
|
||||
.subscribe-options {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 24px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.subscribe-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.9em;
|
||||
color: #888;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
padding: 16px 20px;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-align: left;
|
||||
}
|
||||
.subscribe-option:hover {
|
||||
border-color: var(--live-red);
|
||||
}
|
||||
.subscribe-option input { display: none; }
|
||||
.option-checkbox {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid rgba(255,255,255,0.2);
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.subscribe-option input:checked + .option-checkbox {
|
||||
background: var(--live-red);
|
||||
border-color: var(--live-red);
|
||||
}
|
||||
.subscribe-option input:checked + .option-checkbox::after {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
font-size: 0.75em;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.option-title {
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.option-desc {
|
||||
font-size: 0.85em;
|
||||
color: #666;
|
||||
}
|
||||
.subscribe-option input { accent-color: #ff4d4d; }
|
||||
.subscribe-btn {
|
||||
color: #ff4d4d;
|
||||
display: inline-block;
|
||||
color: var(--live-red);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.subscribe-btn:hover { opacity: 0.8; }
|
||||
|
||||
/* CTA */
|
||||
.live-cta {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
background: linear-gradient(180deg, transparent 0%, rgba(255, 77, 77, 0.03) 100%);
|
||||
border-top: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
.live-cta h2 {
|
||||
font-size: 2.5em;
|
||||
color: #fff;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
.live-cta p {
|
||||
color: #888;
|
||||
font-size: 1.1em;
|
||||
margin: 0 0 32px;
|
||||
}
|
||||
.cta-buttons {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
}
|
||||
.cta-btn {
|
||||
padding: 16px 32px;
|
||||
border-radius: 10px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
font-size: 0.9em;
|
||||
letter-spacing: 1px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.cta-btn.primary {
|
||||
background: var(--live-red);
|
||||
color: #fff;
|
||||
}
|
||||
.cta-btn.primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 40px rgba(255, 77, 77, 0.3);
|
||||
}
|
||||
.cta-btn.secondary {
|
||||
background: transparent;
|
||||
color: var(--live-red);
|
||||
border: 2px solid rgba(255, 77, 77, 0.3);
|
||||
}
|
||||
.cta-btn.secondary:hover {
|
||||
border-color: var(--live-red);
|
||||
}
|
||||
.subscribe-btn:hover { text-decoration: underline; }
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 900px) {
|
||||
.stats-bar { grid-template-columns: repeat(2, 1fr); }
|
||||
.hero-title { font-size: 2.5em; }
|
||||
.stats-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.feed-container { grid-template-columns: 1fr; }
|
||||
.feed-sidebar { position: static; }
|
||||
.feed-sidebar {
|
||||
position: static;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
.sidebar-block { margin-bottom: 0; }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.hero-title { font-size: 2.5em; }
|
||||
.stats-bar { grid-template-columns: 1fr; }
|
||||
.subscribe-options { flex-direction: column; align-items: center; }
|
||||
.stats-grid { grid-template-columns: 1fr; }
|
||||
.feed-sidebar { grid-template-columns: 1fr; }
|
||||
.subscribe-options { flex-direction: column; }
|
||||
.feed-controls { width: 100%; justify-content: center; }
|
||||
}
|
||||
</style>
|
||||
</MainLayout>
|
||||
|
|
|
|||
|
|
@ -1,176 +1,634 @@
|
|||
---
|
||||
import MainLayout from '../layouts/MainLayout.astro';
|
||||
|
||||
const categories = [
|
||||
{ id: 'all', name: 'All Results', icon: '🔍', count: 156 },
|
||||
{ id: 'docs', name: 'Documentation', icon: '📚', count: 42 },
|
||||
{ id: 'products', name: 'Products', icon: '🚀', count: 28 },
|
||||
{ id: 'community', name: 'Community', icon: '👥', count: 34 },
|
||||
{ id: 'blog', name: 'Blog Posts', icon: '📝', count: 52 },
|
||||
];
|
||||
|
||||
const popularSearches = [
|
||||
'Getting Started',
|
||||
'GameForge',
|
||||
'Passport SSO',
|
||||
'Asset API',
|
||||
'Multiplayer',
|
||||
'Authentication',
|
||||
];
|
||||
|
||||
const featuredResults = [
|
||||
{
|
||||
title: 'Introduction to AeThex',
|
||||
description: 'Learn the fundamentals of the AeThex ecosystem and how to get started building.',
|
||||
category: 'Docs',
|
||||
categoryColor: '#6cf',
|
||||
url: '/docs/introduction'
|
||||
},
|
||||
{
|
||||
title: 'GameForge Quick Start',
|
||||
description: 'Build and deploy your first game in under 10 minutes with our terminal-inspired toolkit.',
|
||||
category: 'Products',
|
||||
categoryColor: '#0f0',
|
||||
url: '/gameforge'
|
||||
},
|
||||
{
|
||||
title: 'Identity API Reference',
|
||||
description: 'Complete documentation for user authentication, sessions, and profile management.',
|
||||
category: 'Docs',
|
||||
categoryColor: '#6cf',
|
||||
url: '/docs/identity-api'
|
||||
},
|
||||
{
|
||||
title: 'Community Guidelines',
|
||||
description: 'How we work together as a community. Code of conduct and contribution guidelines.',
|
||||
category: 'Community',
|
||||
categoryColor: '#ffc700',
|
||||
url: '/community'
|
||||
},
|
||||
];
|
||||
|
||||
const stats = [
|
||||
{ value: '1,200+', label: 'Docs Pages' },
|
||||
{ value: '50+', label: 'Tutorials' },
|
||||
{ value: '15', label: 'SDKs' },
|
||||
{ value: '24/7', label: 'Support' },
|
||||
];
|
||||
---
|
||||
<MainLayout>
|
||||
<MainLayout title="Universal Search - AeThex">
|
||||
<!-- Hero -->
|
||||
<section class="search-hero">
|
||||
<div class="search-hero-bg"></div>
|
||||
<div class="search-hero-content">
|
||||
<h1 class="search-hero-title">🔍 Universal Search</h1>
|
||||
<p class="search-hero-desc">Search across all AeThex documentation, products, and resources</p>
|
||||
<div class="hero-bg"></div>
|
||||
<div class="hero-grid"></div>
|
||||
<div class="hero-content">
|
||||
<span class="hero-badge">🔍 Unified Search</span>
|
||||
<h1 class="hero-title">Find <span class="gradient-text">Anything</span></h1>
|
||||
<p class="hero-desc">Search across all documentation, products, community resources, and more in one place.</p>
|
||||
|
||||
<!-- Search Box -->
|
||||
<div class="search-box">
|
||||
<div class="search-input-wrapper">
|
||||
<span class="search-icon">⌘</span>
|
||||
<input type="text" id="search-input" placeholder="Search documentation, APIs, tutorials..." autocomplete="off" />
|
||||
<kbd class="search-kbd">K</kbd>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Popular Searches -->
|
||||
<div class="popular-searches">
|
||||
<span class="popular-label">Popular:</span>
|
||||
{popularSearches.map(term => (
|
||||
<button class="popular-tag">{term}</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="search-main">
|
||||
<div class="search-container">
|
||||
<div class="search-box">
|
||||
<input type="text" id="search-input" placeholder="Search for anything..." autocomplete="off" />
|
||||
<button id="search-btn">Search</button>
|
||||
<!-- Stats -->
|
||||
<section class="stats-bar">
|
||||
{stats.map(stat => (
|
||||
<div class="stat-item">
|
||||
<span class="stat-value">{stat.value}</span>
|
||||
<span class="stat-label">{stat.label}</span>
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
|
||||
<div class="search-filters">
|
||||
<button class="filter-btn active">All</button>
|
||||
<button class="filter-btn">Docs</button>
|
||||
<button class="filter-btn">Products</button>
|
||||
<button class="filter-btn">Community</button>
|
||||
<button class="filter-btn">Blog</button>
|
||||
</div>
|
||||
<!-- Main Content -->
|
||||
<section class="search-content">
|
||||
<div class="content-container">
|
||||
<!-- Sidebar -->
|
||||
<aside class="search-sidebar">
|
||||
<h3 class="sidebar-title">> Categories</h3>
|
||||
<div class="category-list">
|
||||
{categories.map((cat, i) => (
|
||||
<button class={`category-btn ${i === 0 ? 'active' : ''}`}>
|
||||
<span class="cat-icon">{cat.icon}</span>
|
||||
<span class="cat-name">{cat.name}</span>
|
||||
<span class="cat-count">{cat.count}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div class="search-results">
|
||||
<div class="result-item">
|
||||
<h3>Getting Started with AeThex</h3>
|
||||
<p>Learn how to set up your first project with AeThex infrastructure...</p>
|
||||
<span class="result-type">Docs</span>
|
||||
<h3 class="sidebar-title">> Quick Links</h3>
|
||||
<div class="quick-links">
|
||||
<a href="/docs" class="quick-link">📚 Documentation</a>
|
||||
<a href="/docs/quickstart" class="quick-link">⚡ Quickstart</a>
|
||||
<a href="/products" class="quick-link">🚀 Products</a>
|
||||
<a href="/community" class="quick-link">👥 Community</a>
|
||||
</div>
|
||||
<div class="result-item">
|
||||
<h3>AeThex Passport Integration</h3>
|
||||
<p>Integrate universal identity into your applications with our simple SDK...</p>
|
||||
<span class="result-type">Docs</span>
|
||||
</div>
|
||||
<div class="result-item">
|
||||
<h3>GameForge Quick Start</h3>
|
||||
<p>Build your first game with GameForge in under 10 minutes...</p>
|
||||
<span class="result-type">Products</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<p class="search-tip">💡 Try searching for "passport", "gameforge", or "events"</p>
|
||||
<!-- Results -->
|
||||
<main class="results-main">
|
||||
<div class="results-header">
|
||||
<h2>Featured Results</h2>
|
||||
<span class="results-count">Showing top results</span>
|
||||
</div>
|
||||
|
||||
<div class="results-grid">
|
||||
{featuredResults.map(result => (
|
||||
<a href={result.url} class="result-card">
|
||||
<div class="result-meta">
|
||||
<span class="result-category" style={`--cat-color: ${result.categoryColor}`}>{result.category}</span>
|
||||
</div>
|
||||
<h3 class="result-title">{result.title}</h3>
|
||||
<p class="result-desc">{result.description}</p>
|
||||
<span class="result-link">View Details →</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div class="results-tip">
|
||||
<span class="tip-icon">💡</span>
|
||||
<p>Use keyboard shortcuts: <kbd>⌘</kbd> + <kbd>K</kbd> to search from anywhere, <kbd>↑</kbd> <kbd>↓</kbd> to navigate results</p>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Browse Sections -->
|
||||
<section class="browse-section">
|
||||
<div class="section-header">
|
||||
<span class="section-eyebrow">> BROWSE_BY_TOPIC</span>
|
||||
<h2 class="section-title">Explore by Category</h2>
|
||||
<p class="section-subtitle">Dive into specific areas of the AeThex ecosystem</p>
|
||||
</div>
|
||||
<div class="browse-grid">
|
||||
<a href="/docs" class="browse-card">
|
||||
<span class="browse-icon">📚</span>
|
||||
<h3>Documentation</h3>
|
||||
<p>API references, guides, and tutorials</p>
|
||||
</a>
|
||||
<a href="/products" class="browse-card">
|
||||
<span class="browse-icon">🚀</span>
|
||||
<h3>Products</h3>
|
||||
<p>GameForge, Passport, and more</p>
|
||||
</a>
|
||||
<a href="/community" class="browse-card">
|
||||
<span class="browse-icon">👥</span>
|
||||
<h3>Community</h3>
|
||||
<p>Forums, Discord, and events</p>
|
||||
</a>
|
||||
<a href="/blog" class="browse-card">
|
||||
<span class="browse-icon">📝</span>
|
||||
<h3>Blog</h3>
|
||||
<p>News, updates, and tutorials</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="search-cta">
|
||||
<h2>Can't Find What You're Looking For?</h2>
|
||||
<p>Our team is here to help. Reach out through our community channels or contact us directly.</p>
|
||||
<div class="cta-buttons">
|
||||
<a href="/community" class="cta-btn primary">Join Community</a>
|
||||
<a href="/contact" class="cta-btn secondary">Contact Us</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--search-accent: #6cf;
|
||||
--search-dark: #0a0d14;
|
||||
}
|
||||
|
||||
/* Hero */
|
||||
.search-hero {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 80px 20px 60px 20px;
|
||||
min-height: 60vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120px 20px 80px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.search-hero-bg {
|
||||
.hero-bg {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: linear-gradient(135deg, #10131a 0%, #1a2040 50%, #10131a 100%);
|
||||
inset: 0;
|
||||
background: linear-gradient(180deg, #0a0d14 0%, #101520 50%, #0a0d14 100%);
|
||||
}
|
||||
.search-hero-content {
|
||||
.hero-grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(102, 204, 255, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(102, 204, 255, 0.03) 1px, transparent 1px);
|
||||
background-size: 50px 50px;
|
||||
mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
|
||||
}
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.search-hero-title {
|
||||
font-size: 3em;
|
||||
font-weight: 900;
|
||||
color: #fff;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.search-hero-desc {
|
||||
font-size: 1.2em;
|
||||
color: #888;
|
||||
}
|
||||
.search-main {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 60px 20px;
|
||||
}
|
||||
.search-container {
|
||||
max-width: 700px;
|
||||
text-align: center;
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
}
|
||||
.search-box {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
.hero-badge {
|
||||
display: inline-block;
|
||||
background: rgba(102, 204, 255, 0.1);
|
||||
border: 1px solid rgba(102, 204, 255, 0.3);
|
||||
color: var(--search-accent);
|
||||
padding: 8px 20px;
|
||||
border-radius: 24px;
|
||||
font-size: 0.85em;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.search-box input {
|
||||
flex: 1;
|
||||
padding: 18px 24px;
|
||||
background: #181c28;
|
||||
border: 2px solid #1a1d24;
|
||||
border-radius: 12px;
|
||||
.hero-title {
|
||||
font-size: 4em;
|
||||
font-weight: 900;
|
||||
color: #fff;
|
||||
font-size: 1em;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
.search-box input:focus {
|
||||
outline: none;
|
||||
border-color: #0066ff;
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #6cf 0%, #a855f7 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.search-box button {
|
||||
padding: 18px 32px;
|
||||
background: linear-gradient(135deg, #0066ff, #003380);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
.hero-desc {
|
||||
font-size: 1.2em;
|
||||
color: #888;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
/* Search Box */
|
||||
.search-box {
|
||||
max-width: 600px;
|
||||
margin: 0 auto 24px;
|
||||
}
|
||||
.search-input-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 2px solid rgba(255,255,255,0.1);
|
||||
border-radius: 16px;
|
||||
padding: 4px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.search-box button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 30px rgba(0, 102, 255, 0.3);
|
||||
.search-input-wrapper:focus-within {
|
||||
border-color: var(--search-accent);
|
||||
background: rgba(102, 204, 255, 0.05);
|
||||
box-shadow: 0 0 40px rgba(102, 204, 255, 0.1);
|
||||
}
|
||||
.search-filters {
|
||||
.search-icon {
|
||||
padding: 0 16px;
|
||||
color: #666;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.search-input-wrapper input {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 1.1em;
|
||||
padding: 16px 0;
|
||||
outline: none;
|
||||
}
|
||||
.search-input-wrapper input::placeholder {
|
||||
color: #555;
|
||||
}
|
||||
.search-kbd {
|
||||
background: rgba(255,255,255,0.1);
|
||||
color: #666;
|
||||
padding: 6px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.8em;
|
||||
margin-right: 12px;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
}
|
||||
|
||||
/* Popular Searches */
|
||||
.popular-searches {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 30px;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.filter-btn {
|
||||
padding: 10px 20px;
|
||||
background: #181c28;
|
||||
border: 1px solid #1a1d24;
|
||||
.popular-label {
|
||||
color: #666;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.popular-tag {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
color: #aaa;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
color: #888;
|
||||
font-size: 0.85em;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.filter-btn:hover, .filter-btn.active {
|
||||
border-color: #0066ff;
|
||||
color: #0066ff;
|
||||
.popular-tag:hover {
|
||||
border-color: var(--search-accent);
|
||||
color: var(--search-accent);
|
||||
}
|
||||
.search-results {
|
||||
|
||||
/* Stats */
|
||||
.stats-bar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 60px;
|
||||
padding: 40px 20px;
|
||||
background: rgba(255,255,255,0.02);
|
||||
border-top: 1px solid rgba(255,255,255,0.05);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
.stat-item { text-align: center; }
|
||||
.stat-value { display: block; font-size: 2em; font-weight: 800; color: var(--search-accent); font-family: 'Roboto Mono', monospace; }
|
||||
.stat-label { font-size: 0.85em; color: #666; text-transform: uppercase; letter-spacing: 1px; }
|
||||
|
||||
/* Main Content */
|
||||
.search-content {
|
||||
max-width: 1200px;
|
||||
margin: 60px auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.content-container {
|
||||
display: grid;
|
||||
grid-template-columns: 280px 1fr;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.search-sidebar {
|
||||
position: sticky;
|
||||
top: 100px;
|
||||
height: fit-content;
|
||||
}
|
||||
.sidebar-title {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-size: 0.85em;
|
||||
color: var(--search-accent);
|
||||
letter-spacing: 1px;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
.category-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
gap: 8px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.result-item {
|
||||
background: #181c28;
|
||||
border: 1px solid #1a1d24;
|
||||
.category-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
background: rgba(255,255,255,0.02);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
padding: 12px 16px;
|
||||
border-radius: 10px;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-align: left;
|
||||
}
|
||||
.category-btn:hover, .category-btn.active {
|
||||
border-color: var(--search-accent);
|
||||
color: #fff;
|
||||
background: rgba(102, 204, 255, 0.05);
|
||||
}
|
||||
.cat-icon { font-size: 1.1em; }
|
||||
.cat-name { flex: 1; font-size: 0.9em; }
|
||||
.cat-count {
|
||||
background: rgba(255,255,255,0.1);
|
||||
padding: 2px 10px;
|
||||
border-radius: 12px;
|
||||
padding: 20px 24px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.quick-links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.quick-link {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
padding: 10px 0;
|
||||
font-size: 0.9em;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.quick-link:hover {
|
||||
color: var(--search-accent);
|
||||
}
|
||||
|
||||
/* Results */
|
||||
.results-main { }
|
||||
.results-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.results-header h2 {
|
||||
font-size: 1.5em;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
}
|
||||
.results-count {
|
||||
color: #666;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.results-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.result-card {
|
||||
background: rgba(255,255,255,0.02);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.result-card:hover {
|
||||
border-color: var(--search-accent);
|
||||
background: rgba(102, 204, 255, 0.03);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
.result-meta { margin-bottom: 12px; }
|
||||
.result-category {
|
||||
display: inline-block;
|
||||
background: rgba(102, 204, 255, 0.1);
|
||||
color: var(--cat-color);
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75em;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.result-title {
|
||||
color: #fff;
|
||||
font-size: 1.15em;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
.result-desc {
|
||||
color: #888;
|
||||
font-size: 0.9em;
|
||||
line-height: 1.6;
|
||||
margin: 0 0 16px;
|
||||
flex: 1;
|
||||
}
|
||||
.result-link {
|
||||
color: var(--search-accent);
|
||||
font-size: 0.85em;
|
||||
font-weight: 600;
|
||||
}
|
||||
.results-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
background: rgba(255,255,255,0.02);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 12px;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
.tip-icon { font-size: 1.2em; }
|
||||
.results-tip p {
|
||||
color: #666;
|
||||
margin: 0;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.results-tip kbd {
|
||||
background: rgba(255,255,255,0.1);
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8em;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
}
|
||||
|
||||
/* Browse Section */
|
||||
.browse-section {
|
||||
max-width: 1000px;
|
||||
margin: 80px auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
.section-eyebrow {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-size: 0.85em;
|
||||
color: var(--search-accent);
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 12px;
|
||||
display: block;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 2.5em;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
.section-subtitle {
|
||||
font-size: 1.1em;
|
||||
color: #888;
|
||||
}
|
||||
.browse-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
.browse-card {
|
||||
background: rgba(255,255,255,0.02);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 16px;
|
||||
padding: 32px 24px;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.result-item:hover {
|
||||
border-color: #0066ff;
|
||||
.browse-card:hover {
|
||||
border-color: var(--search-accent);
|
||||
background: rgba(102, 204, 255, 0.03);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
.result-item h3 {
|
||||
.browse-icon {
|
||||
font-size: 2.5em;
|
||||
display: block;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.browse-card h3 {
|
||||
color: #fff;
|
||||
margin-bottom: 8px;
|
||||
font-size: 1.1em;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
.result-item p {
|
||||
color: #888;
|
||||
font-size: 0.95em;
|
||||
margin-bottom: 10px;
|
||||
.browse-card p {
|
||||
color: #666;
|
||||
font-size: 0.85em;
|
||||
margin: 0;
|
||||
}
|
||||
.result-type {
|
||||
display: inline-block;
|
||||
background: rgba(0, 102, 255, 0.15);
|
||||
color: #0066ff;
|
||||
padding: 4px 10px;
|
||||
font-size: 0.75em;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.search-tip {
|
||||
|
||||
/* CTA */
|
||||
.search-cta {
|
||||
text-align: center;
|
||||
color: #555;
|
||||
margin-top: 30px;
|
||||
padding: 80px 20px;
|
||||
background: linear-gradient(180deg, transparent 0%, rgba(102, 204, 255, 0.03) 100%);
|
||||
border-top: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
.search-cta h2 {
|
||||
font-size: 2em;
|
||||
color: #fff;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
.search-cta p {
|
||||
color: #888;
|
||||
font-size: 1.1em;
|
||||
margin: 0 0 32px;
|
||||
}
|
||||
.cta-buttons {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
}
|
||||
.cta-btn {
|
||||
padding: 16px 32px;
|
||||
border-radius: 10px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
font-size: 0.9em;
|
||||
letter-spacing: 1px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.cta-btn.primary {
|
||||
background: var(--search-accent);
|
||||
color: #000;
|
||||
}
|
||||
.cta-btn.primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 40px rgba(102, 204, 255, 0.3);
|
||||
}
|
||||
.cta-btn.secondary {
|
||||
background: transparent;
|
||||
color: var(--search-accent);
|
||||
border: 2px solid rgba(102, 204, 255, 0.3);
|
||||
}
|
||||
.cta-btn.secondary:hover {
|
||||
border-color: var(--search-accent);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 900px) {
|
||||
.hero-title { font-size: 2.5em; }
|
||||
.content-container { grid-template-columns: 1fr; }
|
||||
.search-sidebar { position: static; }
|
||||
.results-grid { grid-template-columns: 1fr; }
|
||||
.browse-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.stats-bar { flex-wrap: wrap; gap: 30px; }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.browse-grid { grid-template-columns: 1fr; }
|
||||
.popular-searches { justify-content: center; }
|
||||
}
|
||||
</style>
|
||||
</MainLayout>
|
||||
|
|
|
|||
Loading…
Reference in a new issue