Google Gemini 3.8 Flash – Social Media
via Google AI Studio · Generated
- AIMAC Debt 0.00
- Cost $0.10
- Total Violations 0
- HTML Size 101 KB
- Em Dashes 2
Screenshot
View Live Page
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aura Social | Sovereign Community, Real Connection, Algorithmic Autonomy</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts: Plus Jakarta Sans -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
aura: {
50: '#f5f3ff',
100: '#ede9fe',
200: '#ddd6fe',
300: '#c4b5fd',
400: '#a78bfa',
500: '#8b5cf6',
600: '#7c3aed',
700: '#6d28d9',
800: '#5b21b6',
900: '#4c1d95',
950: '#0f0b1e',
},
neon: {
cyan: '#06ffd2',
violet: '#a855f7',
amber: '#f59e0b',
rose: '#f43f5e'
},
surface: {
dark: '#0a0714',
card: '#130e24',
border: '#241a45',
hover: '#1b1433'
}
},
fontFamily: {
sans: ['Plus Jakarta Sans', 'sans-serif'],
display: ['Space Grotesk', 'sans-serif']
}
}
}
}
</script>
<style>
.glass-nav {
background: rgba(15, 11, 30, 0.82);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.glass-card {
background: rgba(19, 14, 36, 0.65);
backdrop-filter: blur(12px);
border: 1px solid rgba(139, 92, 246, 0.15);
}
.glow-hover:hover {
box-shadow: 0 0 25px -5px rgba(139, 92, 246, 0.45);
}
.mesh-gradient {
background: radial-gradient(circle at 15% 25%, rgba(124, 58, 237, 0.22) 0%, transparent 45%),
radial-gradient(circle at 85% 75%, rgba(6, 255, 210, 0.12) 0%, transparent 45%),
radial-gradient(circle at 50% 50%, rgba(244, 63, 94, 0.08) 0%, transparent 50%);
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #0a0714;
}
::-webkit-scrollbar-thumb {
background: #241a45;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #7c3aed;
}
</style>
</head>
<body class="bg-surface-dark text-slate-100 font-sans antialiased overflow-x-hidden selection:bg-aura-500 selection:text-white">
<!-- TOP PROMO BANNER / SYSTEM NOTICE -->
<aside class="bg-gradient-to-r from-aura-900 via-aura-700 to-aura-900 text-xs py-2 px-4 text-center border-b border-aura-600/40 relative z-50">
<div class="max-w-7xl mx-auto flex items-center justify-between">
<span class="inline-flex items-center gap-1.5 font-medium mx-auto sm:mx-0">
<span class="w-2 h-2 rounded-full bg-neon-cyan animate-pulse"></span>
<span><strong>Aura Protocol v4.4 Live:</strong> Decentralized moderation consensus & lossless live audio spaces enabled.</span>
</span>
<a href="#updates" class="hidden sm:inline-flex items-center gap-1 font-semibold text-neon-cyan hover:underline text-xs">
Inspect Changelog <i class="fa-solid fa-arrow-right text-[10px]"></i>
</a>
</div>
</aside>
<!-- HEADER / NAVIGATION -->
<header class="sticky top-0 z-40 glass-nav border-b border-surface-border transition-all duration-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between gap-4">
<!-- Brand & Tagline -->
<a href="#" class="flex items-center gap-3.5 group flex-shrink-0">
<div class="relative w-11 h-11 rounded-xl bg-gradient-to-tr from-aura-600 to-neon-cyan p-0.5 shadow-lg shadow-aura-700/30 group-hover:scale-105 transition-transform duration-300">
<div class="w-full h-full bg-surface-dark rounded-[10px] flex items-center justify-center">
<i class="fa-solid fa-bolt-lightning text-xl text-transparent bg-clip-text bg-gradient-to-br from-neon-cyan to-aura-400"></i>
</div>
</div>
<div class="flex flex-col">
<span class="font-display font-bold text-2xl tracking-tight text-white flex items-center gap-1.5">
Aura<span class="text-neon-cyan text-sm px-1.5 py-0.5 rounded bg-aura-950 border border-aura-800 font-mono font-medium">OS</span>
</span>
<span class="text-[10.5px] uppercase tracking-widest text-slate-400 font-medium">Own Your Social Graph</span>
</div>
</a>
<!-- Primary Navigation (7 core links including Discover, Create, Marketplace) -->
<nav class="hidden lg:flex items-center gap-1.5 text-sm font-medium text-slate-300">
<a href="#discover" class="px-3.5 py-2 rounded-lg hover:text-white hover:bg-surface-hover transition-colors flex items-center gap-1.5">
<i class="fa-regular fa-compass text-aura-400"></i> Discover
</a>
<a href="#feed-engine" class="px-3.5 py-2 rounded-lg hover:text-white hover:bg-surface-hover transition-colors">
Algorithm Lab
</a>
<a href="#create" class="px-3.5 py-2 rounded-lg hover:text-white hover:bg-surface-hover transition-colors flex items-center gap-1.5">
<i class="fa-solid fa-wand-magic-sparkles text-neon-cyan"></i> Create
</a>
<a href="#marketplace" class="px-3.5 py-2 rounded-lg hover:text-white hover:bg-surface-hover transition-colors flex items-center gap-1.5">
<i class="fa-solid fa-store text-aura-400"></i> Marketplace
</a>
<a href="#stories" class="px-3.5 py-2 rounded-lg hover:text-white hover:bg-surface-hover transition-colors">
User Stories
</a>
<a href="#safety" class="px-3.5 py-2 rounded-lg hover:text-white hover:bg-surface-hover transition-colors flex items-center gap-1.5">
<i class="fa-solid fa-shield-halved text-emerald-400"></i> Safety
</a>
<a href="#updates" class="px-3.5 py-2 rounded-lg hover:text-white hover:bg-surface-hover transition-colors">
Platform Updates
</a>
</nav>
<!-- Header Action CTAs -->
<div class="hidden sm:flex items-center gap-3">
<a href="#interactive-preview" class="text-sm font-semibold text-slate-300 hover:text-white px-3 py-2 transition-colors">
Sign In
</a>
<a href="#live-spaces" class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-bold text-surface-dark bg-neon-cyan hover:bg-white transition-all shadow-md shadow-neon-cyan/20 active:scale-95">
<span class="w-2 h-2 rounded-full bg-rose-600 animate-ping"></span>
<span>Go Live</span>
</a>
</div>
<!-- Mobile Hamburger Button -->
<button id="mobile-toggle" aria-label="Toggle Navigation Menu" class="lg:hidden p-2 rounded-lg bg-surface-card border border-surface-border text-slate-300 hover:text-white">
<i class="fa-solid fa-bars text-xl" id="menu-icon"></i>
</button>
</div>
<!-- Mobile Drawer -->
<div id="mobile-menu" class="hidden lg:hidden border-t border-surface-border bg-surface-dark/95 backdrop-blur-xl px-6 py-6 space-y-4">
<nav class="flex flex-col space-y-3 font-medium text-slate-300">
<a href="#discover" class="mobile-link py-2 flex items-center gap-2 text-white"><i class="fa-regular fa-compass text-aura-400"></i> Discover</a>
<a href="#feed-engine" class="mobile-link py-2">Algorithm Lab</a>
<a href="#create" class="mobile-link py-2 flex items-center gap-2"><i class="fa-solid fa-wand-magic-sparkles text-neon-cyan"></i> Create</a>
<a href="#marketplace" class="mobile-link py-2 flex items-center gap-2"><i class="fa-solid fa-store text-aura-400"></i> Marketplace</a>
<a href="#stories" class="mobile-link py-2">User Stories</a>
<a href="#safety" class="mobile-link py-2 flex items-center gap-2"><i class="fa-solid fa-shield-halved text-emerald-400"></i> Safety Resources</a>
<a href="#updates" class="mobile-link py-2">Platform Updates</a>
</nav>
<div class="pt-4 border-t border-surface-border flex flex-col gap-3">
<a href="#interactive-preview" class="w-full text-center py-2.5 font-semibold text-slate-200 bg-surface-card border border-surface-border rounded-xl">Sign In</a>
<a href="#live-spaces" class="w-full text-center py-2.5 font-bold text-surface-dark bg-neon-cyan rounded-xl">Go Live Now</a>
</div>
</div>
</header>
<main>
<!-- HERO SECTION -->
<section class="relative pt-16 pb-24 md:pt-24 md:pb-32 overflow-hidden mesh-gradient">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="grid lg:grid-cols-12 gap-12 lg:gap-8 items-center">
<!-- Left Copy Column -->
<div class="lg:col-span-7 space-y-8 text-center lg:text-left">
<div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-aura-900/60 border border-aura-500/30 text-aura-300 text-xs font-semibold tracking-wide uppercase">
<i class="fa-solid fa-sparkles text-neon-cyan"></i> The Anti-Rage Bait Protocol
</div>
<h1 class="text-4xl sm:text-6xl font-extrabold font-display tracking-tight text-white leading-[1.12]">
A social network where <span class="text-transparent bg-clip-text bg-gradient-to-r from-neon-cyan via-aura-400 to-neon-violet">you dial the algorithm</span>, not advertisers.
</h1>
<p class="text-lg sm:text-xl text-slate-300 font-normal leading-relaxed max-w-2xl mx-auto lg:mx-0">
Aura replaces addictive doom loops with genuine community governance, decentralized identity, and uncapped creator monetization. Connect in high-fidelity audio rooms, share unfiltered thoughts, and hold the cryptographic keys to your audience.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4">
<a href="#feed-engine" class="w-full sm:w-auto px-8 py-4 rounded-xl font-bold text-base text-surface-dark bg-gradient-to-r from-neon-cyan to-emerald-400 hover:opacity-95 shadow-xl shadow-neon-cyan/20 transition-all flex items-center justify-center gap-3">
<span>Discover Trending Spaces</span>
<i class="fa-solid fa-arrow-right"></i>
</a>
<a href="#create" class="w-full sm:w-auto px-8 py-4 rounded-xl font-semibold text-base text-slate-200 bg-surface-card hover:bg-surface-hover border border-surface-border hover:border-aura-500/50 transition-all flex items-center justify-center gap-2">
<i class="fa-solid fa-pencil text-aura-400"></i>
<span>Start Creating</span>
</a>
</div>
<!-- Live Metrics Bar -->
<div class="pt-6 border-t border-surface-border/80 grid grid-cols-3 gap-4 text-center lg:text-left max-w-lg mx-auto lg:mx-0">
<div>
<p class="text-2xl sm:text-3xl font-extrabold text-white font-display">4.2M+</p>
<p class="text-xs text-slate-400 uppercase tracking-wider font-medium mt-0.5">Active Nodes</p>
</div>
<div>
<p class="text-2xl sm:text-3xl font-extrabold text-neon-cyan font-display">94.8%</p>
<p class="text-xs text-slate-400 uppercase tracking-wider font-medium mt-0.5">Creator Rev Share</p>
</div>
<div>
<p class="text-2xl sm:text-3xl font-extrabold text-aura-400 font-display">0 Sec</p>
<p class="text-xs text-slate-400 uppercase tracking-wider font-medium mt-0.5">Telemetry Sold</p>
</div>
</div>
</div>
<!-- Right Interactive Feed Simulation Card -->
<div class="lg:col-span-5 relative">
<div class="absolute -inset-1 rounded-3xl bg-gradient-to-tr from-aura-600/40 via-neon-cyan/30 to-neon-violet/30 blur-2xl opacity-60"></div>
<!-- Floating Glass UI Mockup -->
<div class="relative rounded-2xl glass-card p-6 shadow-2xl space-y-5">
<!-- Header Bar of Mockup -->
<div class="flex items-center justify-between pb-4 border-b border-surface-border">
<div class="flex items-center gap-3">
<div class="relative">
<img src="https://i.pravatar.cc/100?u=elena_voice" alt="Elena Rostova avatar" class="w-10 h-10 rounded-full border-2 border-neon-cyan object-cover">
<span class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-emerald-500 border-2 border-surface-dark"></span>
</div>
<div>
<h2 class="text-sm font-bold text-white flex items-center gap-1.5">
Elena Rostova <i class="fa-solid fa-circle-check text-neon-cyan text-xs"></i>
</h2>
<p class="text-xs text-slate-400 font-mono">@elena_ambient • 4m ago</p>
</div>
</div>
<span class="px-2.5 py-1 rounded-full bg-aura-500/20 text-aura-300 text-xs font-semibold flex items-center gap-1">
<i class="fa-solid fa-radio text-[10px] text-rose-500 animate-pulse"></i> Spatial Sound
</span>
</div>
<!-- Post Body -->
<p class="text-sm text-slate-200 leading-relaxed">
Tuning the acoustic room impulse response for tonight's ambient improvisation stream. No mid-roll ads, no synthetic latency. Just pure peer-to-peer frequencies. Who's tuning in from Tokyo and Berlin? 🎧🌌
</p>
<!-- Media Block -->
<div class="relative rounded-xl overflow-hidden group">
<img src="https://picsum.photos/600/340?random=11" alt="Studio synthesizers and ambient lighting" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-surface-dark/80 via-transparent to-transparent flex items-end p-4">
<div class="w-full flex items-center justify-between">
<span class="text-xs font-mono bg-black/60 backdrop-blur px-2 py-1 rounded text-white flex items-center gap-1.5">
<i class="fa-solid fa-waveform text-neon-cyan"></i> 24-bit 96kHz Live Stream
</span>
<button class="px-3 py-1.5 rounded-lg bg-white/20 hover:bg-white/30 backdrop-blur text-xs font-bold text-white flex items-center gap-1.5 transition-all">
<i class="fa-solid fa-headphones"></i> Listen (412)
</button>
</div>
</div>
</div>
<!-- Interaction Bar -->
<div class="pt-2 flex items-center justify-between text-slate-400 text-xs">
<button class="hover:text-rose-400 flex items-center gap-1.5 transition-colors">
<i class="fa-regular fa-heart text-sm"></i> <span>1.8k</span>
</button>
<button class="hover:text-neon-cyan flex items-center gap-1.5 transition-colors">
<i class="fa-regular fa-comment text-sm"></i> <span>249</span>
</button>
<button class="hover:text-emerald-400 flex items-center gap-1.5 transition-colors">
<i class="fa-solid fa-arrows-rotate text-sm"></i> <span>618</span>
</button>
<button class="hover:text-aura-300 flex items-center gap-1.5 transition-colors">
<i class="fa-solid fa-gift text-sm text-amber-400"></i> <span>Tip 5 AURA</span>
</button>
</div>
<!-- Floating badge overlay -->
<div class="absolute -bottom-4 -left-4 bg-surface-card border border-aura-500/40 px-3.5 py-2 rounded-xl shadow-xl flex items-center gap-2.5">
<div class="w-3 h-3 rounded-full bg-emerald-400 animate-ping"></div>
<p class="text-xs font-medium text-slate-200">Decentralized Feed Engine Active</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- INTERACTIVE SECTION: THE ALGORITHMIC FEED TUNER & COMMUNITY FINDER -->
<section id="feed-engine" class="py-20 border-y border-surface-border bg-surface-dark relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-14 space-y-4">
<span class="text-xs font-bold tracking-widest text-neon-cyan uppercase bg-neon-cyan/10 px-3 py-1 rounded-full border border-neon-cyan/20">
Interactive Feature
</span>
<h2 class="text-3xl sm:text-4xl font-extrabold font-display text-white">
Take the Driver's Seat: Algorithmic Calibration Studio
</h2>
<p class="text-slate-300 text-base leading-relaxed">
Legacy social platforms weaponize outrage for advertiser ad impressions. At Aura, your attention belongs to you. Select your intent below and watch your feed transform dynamically in real-time.
</p>
</div>
<!-- Interactive App Container -->
<div class="glass-card rounded-2xl p-6 sm:p-8 border border-surface-border shadow-2xl">
<!-- Controls Bar -->
<div class="grid md:grid-cols-12 gap-6 items-center pb-8 border-b border-surface-border">
<div class="md:col-span-7">
<label class="block text-xs font-mono text-slate-400 uppercase tracking-wider mb-3">
Active Algorithmic Bias Profile:
</label>
<div class="flex flex-wrap gap-2" id="filter-container">
<button onclick="setAlgorithm('chronological')" class="algo-pill px-4 py-2 rounded-xl text-xs font-bold tracking-wide transition-all bg-aura-600 text-white shadow-lg shadow-aura-600/30" data-mode="chronological">
<i class="fa-solid fa-clock-rotate-left mr-1.5"></i> Pure Chronological
</button>
<button onclick="setAlgorithm('deep-knowledge')" class="algo-pill px-4 py-2 rounded-xl text-xs font-bold tracking-wide transition-all bg-surface-card hover:bg-surface-hover text-slate-300 border border-surface-border" data-mode="deep-knowledge">
<i class="fa-solid fa-brain mr-1.5 text-aura-400"></i> Deep Knowledge & Longform
</button>
<button onclick="setAlgorithm('creators')" class="algo-pill px-4 py-2 rounded-xl text-xs font-bold tracking-wide transition-all bg-surface-card hover:bg-surface-hover text-slate-300 border border-surface-border" data-mode="creators">
<i class="fa-solid fa-palette mr-1.5 text-neon-cyan"></i> Creator Marketplace
</button>
<button onclick="setAlgorithm('anti-rage')" class="algo-pill px-4 py-2 rounded-xl text-xs font-bold tracking-wide transition-all bg-surface-card hover:bg-surface-hover text-slate-300 border border-surface-border" data-mode="anti-rage">
<i class="fa-solid fa-leaf mr-1.5 text-emerald-400"></i> Zen Mode (Zero Negativity)
</button>
</div>
</div>
<!-- Community Topic Selector -->
<div class="md:col-span-5 flex flex-col sm:flex-row items-center gap-3">
<div class="w-full">
<label for="topic-select" class="block text-xs font-mono text-slate-400 uppercase tracking-wider mb-2">
Explore Specific Cluster:
</label>
<div class="relative">
<select id="topic-select" onchange="filterTopic(this.value)" class="w-full bg-surface-dark border border-surface-border text-slate-200 text-sm rounded-xl px-4 py-2.5 appearance-none focus:outline-none focus:border-neon-cyan cursor-pointer">
<option value="all">🌐 All Ecosystem Spaces</option>
<option value="design">🎨 Generative Design & 3D</option>
<option value="tech">⚡ Distributed Systems & Protocols</option>
<option value="music">🎵 Independent Audio Creators</option>
<option value="wellness">🌿 Mindful Tech & Human Health</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-slate-400">
<i class="fa-solid fa-chevron-down text-xs"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Dynamic Results Feed Area -->
<div class="mt-8">
<div class="flex items-center justify-between mb-6">
<div class="flex items-center gap-2">
<span class="w-2.5 h-2.5 rounded-full bg-neon-cyan animate-pulse"></span>
<span id="feed-status" class="text-xs font-mono text-slate-300">Displaying: Pure Chronological Node Stream</span>
</div>
<span class="text-xs text-slate-400 font-mono" id="stream-speed">Latency: 28ms • Zero Ad Trackers</span>
</div>
<!-- Card Grid that updates via JavaScript -->
<div id="dynamic-cards-grid" class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Cards will be populated by JS -->
</div>
</div>
<!-- Discovery Callout Bottom -->
<div class="mt-8 pt-6 border-t border-surface-border flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-slate-400">
<p class="flex items-center gap-2">
<i class="fa-solid fa-lock text-emerald-400"></i> Open-source feed algorithms run locally on device or federated clusters.
</p>
<a href="#discover" class="font-bold text-neon-cyan hover:underline inline-flex items-center gap-1">
Discover Community Guidelines <i class="fa-solid fa-arrow-right text-[10px]"></i>
</a>
</div>
</div>
</div>
</section>
<!-- SECTION 1: DISCOVER & SPACES (SIDEBAR + CONTENT LAYOUT) -->
<section id="discover" class="py-20 md:py-28 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid lg:grid-cols-12 gap-10 items-start">
<!-- Main Content (8 cols) -->
<div class="lg:col-span-8 space-y-12">
<div>
<span class="text-xs font-bold tracking-widest text-aura-400 uppercase bg-aura-900/40 px-3 py-1 rounded-full border border-aura-700/50">
Decentralized Discovery
</span>
<h2 class="text-3xl sm:text-4xl font-extrabold font-display text-white mt-3">
Connect Across Micro-Communities, Not Monolithic Echo Chambers
</h2>
<p class="text-slate-300 text-base leading-relaxed mt-4">
Traditional social networks force billions into a homogenous, toxic town square designed to maximize outrage. Aura divides the digital world into self-governing sovereign spaces where user-generated content is valued for depth, nuance, and genuine human craft.
</p>
</div>
<!-- Bento Feature Highlights -->
<div class="grid sm:grid-cols-2 gap-6">
<!-- Feature 1 -->
<div class="glass-card rounded-2xl p-6 border border-surface-border hover:border-aura-500/40 transition-all glow-hover">
<div class="w-12 h-12 rounded-xl bg-aura-600/20 border border-aura-500/40 flex items-center justify-center text-aura-400 text-xl mb-4">
<i class="fa-solid fa-circle-nodes"></i>
</div>
<h3 class="text-lg font-bold text-white mb-2">Federated Sub-Spaces</h3>
<p class="text-slate-300 text-sm leading-relaxed">
Join hyper-specific guilds around astrophysics, low-poly design, or generative music. Each cluster sets its own curation threshold and content etiquette without corporate intervention.
</p>
</div>
<!-- Feature 2 -->
<div class="glass-card rounded-2xl p-6 border border-surface-border hover:border-neon-cyan/40 transition-all glow-hover">
<div class="w-12 h-12 rounded-xl bg-neon-cyan/10 border border-neon-cyan/30 flex items-center justify-center text-neon-cyan text-xl mb-4">
<i class="fa-solid fa-headset"></i>
</div>
<h3 class="text-lg font-bold text-white mb-2">Hi-Fi Audio Lounges</h3>
<p class="text-slate-300 text-sm leading-relaxed">
Experience spatial stereo audio rooms with crystal-clear vocal dynamics. Host spontaneous fireside roundtables, acoustic jam sessions, or developer drop-in AMAs with zero lag.
</p>
</div>
<!-- Feature 3 -->
<div class="glass-card rounded-2xl p-6 border border-surface-border hover:border-emerald-400/40 transition-all glow-hover">
<div class="w-12 h-12 rounded-xl bg-emerald-400/10 border border-emerald-400/30 flex items-center justify-center text-emerald-400 text-xl mb-4">
<i class="fa-solid fa-key"></i>
</div>
<h3 class="text-lg font-bold text-white mb-2">Zero-Knowledge Private Messaging</h3>
<p class="text-slate-300 text-sm leading-relaxed">
Direct conversations are shielded with double ratchet end-to-end encryption. Even Aura infrastructure nodes cannot read your DMs, photo attachments, or private voice memos.
</p>
</div>
<!-- Feature 4 -->
<div class="glass-card rounded-2xl p-6 border border-surface-border hover:border-rose-400/40 transition-all glow-hover">
<div class="w-12 h-12 rounded-xl bg-rose-400/10 border border-rose-400/30 flex items-center justify-center text-rose-400 text-xl mb-4">
<i class="fa-solid fa-fingerprint"></i>
</div>
<h3 class="text-lg font-bold text-white mb-2">Portable Identity Graphs</h3>
<p class="text-slate-300 text-sm leading-relaxed">
Never lose your follower graph again. Your handle and subscriber relationships are minted to open social standards—exportable anytime to any compatible decentralized network.
</p>
</div>
</div>
<!-- Highlight Quote Banner -->
<div class="relative rounded-2xl bg-gradient-to-r from-aura-900/60 to-surface-card border border-aura-600/30 p-8 overflow-hidden">
<div class="relative z-10 flex flex-col sm:flex-row items-center gap-6">
<img src="https://i.pravatar.cc/120?u=marcus_chen" alt="Marcus Chen avatar" class="w-16 h-16 rounded-full border-2 border-neon-cyan flex-shrink-0 object-cover">
<div class="space-y-2 text-center sm:text-left">
<p class="text-sm sm:text-base italic text-slate-200">
"Leaving the algorithm-heavy platforms for Aura was like opening a window in a smoke-filled room. We grew our design syndicate to 28,000 active makers in 4 months without running a single sponsor ad."
</p>
<p class="text-xs font-bold text-neon-cyan uppercase tracking-wider">
Marcus Chen — Co-Founder, Vector Collective
</p>
</div>
</div>
</div>
</div>
<!-- Sidebar Component (4 cols) -->
<aside class="lg:col-span-4 space-y-6">
<!-- Live Audio Spaces Widget -->
<div id="live-spaces" class="glass-card rounded-2xl p-6 border border-surface-border">
<div class="flex items-center justify-between mb-4 pb-3 border-b border-surface-border">
<div class="flex items-center gap-2">
<span class="relative flex h-3 w-3">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-500 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-rose-600"></span>
</span>
<h3 class="font-bold text-white text-base">Live Spaces Now</h3>
</div>
<span class="text-xs font-mono text-neon-cyan">8.4k Live</span>
</div>
<!-- Space Item 1 -->
<div class="space-y-4">
<div class="p-3.5 rounded-xl bg-surface-dark border border-surface-border/80 hover:border-aura-500/40 transition-all cursor-pointer group">
<div class="flex items-start justify-between">
<span class="text-[11px] font-bold text-neon-cyan uppercase tracking-wide">Sound & Production</span>
<span class="text-xs text-slate-400"><i class="fa-solid fa-user-group text-[10px]"></i> 429</span>
</div>
<h4 class="text-sm font-bold text-white group-hover:text-aura-300 transition-colors mt-1">
Late Night Modular Synthesis Lab
</h4>
<div class="flex items-center gap-2 mt-3">
<div class="flex -space-x-2 overflow-hidden">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-surface-dark object-cover" src="https://i.pravatar.cc/60?u=u1" alt="Participant 1">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-surface-dark object-cover" src="https://i.pravatar.cc/60?u=u2" alt="Participant 2">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-surface-dark object-cover" src="https://i.pravatar.cc/60?u=u3" alt="Participant 3">
</div>
<span class="text-xs text-slate-400 font-medium">+42 speaking</span>
</div>
<button onclick="joinRoomAlert('Late Night Modular Synthesis Lab')" class="w-full mt-3 py-1.5 rounded-lg bg-aura-600/20 hover:bg-aura-600 text-aura-300 hover:text-white text-xs font-bold transition-all text-center">
Join Room
</button>
</div>
<!-- Space Item 2 -->
<div class="p-3.5 rounded-xl bg-surface-dark border border-surface-border/80 hover:border-aura-500/40 transition-all cursor-pointer group">
<div class="flex items-start justify-between">
<span class="text-[11px] font-bold text-amber-400 uppercase tracking-wide">AI Research</span>
<span class="text-xs text-slate-400"><i class="fa-solid fa-user-group text-[10px]"></i> 1.2k</span>
</div>
<h4 class="text-sm font-bold text-white group-hover:text-aura-300 transition-colors mt-1">
Autonomous Agents & Social Topology
</h4>
<div class="flex items-center gap-2 mt-3">
<div class="flex -space-x-2 overflow-hidden">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-surface-dark object-cover" src="https://i.pravatar.cc/60?u=u4" alt="Participant 4">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-surface-dark object-cover" src="https://i.pravatar.cc/60?u=u5" alt="Participant 5">
</div>
<span class="text-xs text-slate-400 font-medium">Hosted by Dr. Aris Thorne</span>
</div>
<button onclick="joinRoomAlert('Autonomous Agents & Social Topology')" class="w-full mt-3 py-1.5 rounded-lg bg-aura-600/20 hover:bg-aura-600 text-aura-300 hover:text-white text-xs font-bold transition-all text-center">
Join Room
</button>
</div>
</div>
</div>
<!-- Trending Hashtags & Nodes -->
<div class="glass-card rounded-2xl p-6 border border-surface-border">
<h3 class="font-bold text-white text-base mb-4 pb-3 border-b border-surface-border flex items-center justify-between">
<span>Trending Across Clusters</span>
<i class="fa-solid fa-arrow-trend-up text-neon-cyan"></i>
</h3>
<ul class="space-y-3.5 text-sm">
<li class="flex items-center justify-between group cursor-pointer">
<div>
<span class="text-white font-semibold group-hover:text-neon-cyan transition-colors">#SlowWebMovement</span>
<p class="text-[11px] text-slate-400 font-mono">14.9k broadcasts</p>
</div>
<span class="text-xs px-2 py-0.5 rounded bg-surface-hover text-slate-300 font-mono">+128%</span>
</li>
<li class="flex items-center justify-between group cursor-pointer">
<div>
<span class="text-white font-semibold group-hover:text-neon-cyan transition-colors">#OpenWeightCreativity</span>
<p class="text-[11px] text-slate-400 font-mono">9.3k broadcasts</p>
</div>
<span class="text-xs px-2 py-0.5 rounded bg-surface-hover text-slate-300 font-mono">+64%</span>
</li>
<li class="flex items-center justify-between group cursor-pointer">
<div>
<span class="text-white font-semibold group-hover:text-neon-cyan transition-colors">#IndieProtocolDev</span>
<p class="text-[11px] text-slate-400 font-mono">6.8k broadcasts</p>
</div>
<span class="text-xs px-2 py-0.5 rounded bg-surface-hover text-slate-300 font-mono">+42%</span>
</li>
<li class="flex items-center justify-between group cursor-pointer">
<div>
<span class="text-white font-semibold group-hover:text-neon-cyan transition-colors">#SolarpunkArchitecture</span>
<p class="text-[11px] text-slate-400 font-mono">5.1k broadcasts</p>
</div>
<span class="text-xs px-2 py-0.5 rounded bg-surface-hover text-slate-300 font-mono">+31%</span>
</li>
</ul>
</div>
<!-- Quick Direct Message / Community Invite Card -->
<div class="rounded-2xl p-6 bg-gradient-to-br from-aura-900 to-aura-950 border border-aura-500/30 text-center space-y-4">
<div class="w-12 h-12 mx-auto rounded-full bg-aura-500/20 flex items-center justify-center text-neon-cyan text-xl">
<i class="fa-solid fa-paper-plane"></i>
</div>
<h4 class="text-base font-bold text-white">Have a Project or Collective?</h4>
<p class="text-xs text-slate-300 leading-relaxed">
Migrate your community from Discord, Reddit, or Telegram with zero data loss using our automated Federation Bridge.
</p>
<button onclick="openMessageModal()" class="w-full py-2.5 rounded-xl bg-neon-cyan text-surface-dark font-bold text-xs hover:bg-white transition-all shadow-lg">
Send Message to Community Desk
</button>
</div>
</aside>
</div>
</section>
<!-- SECTION 2: CREATE & MARKETPLACE -->
<section id="marketplace" class="py-20 bg-surface-dark border-t border-surface-border relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row md:items-end justify-between mb-14 gap-6">
<div class="space-y-3 max-w-2xl">
<span class="text-xs font-bold tracking-widest text-emerald-400 uppercase bg-emerald-950/60 px-3 py-1 rounded-full border border-emerald-600/30">
Creator Economy Redefined
</span>
<h2 class="text-3xl sm:text-4xl font-extrabold font-display text-white">
The Sovereign Creator Marketplace
</h2>
<p class="text-slate-300 text-base leading-relaxed">
Monetize your user-generated content directly with your patrons. Zero platform rent-seeking, instantaneous micro-tipping, gated audio pods, and direct digital commerce without 30% app store penalties.
</p>
</div>
<div class="flex items-center gap-3">
<a href="#create" class="px-5 py-2.5 rounded-xl bg-aura-600 hover:bg-aura-500 text-white font-bold text-sm transition-all flex items-center gap-2 shadow-lg shadow-aura-600/30">
<i class="fa-solid fa-plus text-xs"></i> Mint Creator Pass
</a>
</div>
</div>
<!-- Marketplace Cards Grid -->
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Market Item 1 -->
<div class="glass-card rounded-2xl overflow-hidden border border-surface-border hover:border-aura-500/50 transition-all flex flex-col group">
<div class="relative h-48 overflow-hidden bg-slate-800">
<img src="https://picsum.photos/400/280?random=21" alt="Generative synth preset bundle" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<span class="absolute top-3 left-3 px-2 py-0.5 rounded bg-black/70 backdrop-blur text-[11px] font-mono text-neon-cyan">
Preset Bundle
</span>
<span class="absolute top-3 right-3 px-2.5 py-0.5 rounded-full bg-aura-600 text-xs font-bold text-white">
45 AURA
</span>
</div>
<div class="p-5 flex-1 flex flex-col justify-between space-y-4">
<div>
<div class="flex items-center gap-2 mb-2">
<img src="https://i.pravatar.cc/40?u=synthmaster" alt="Creator avatar" class="w-5 h-5 rounded-full object-cover">
<span class="text-xs text-slate-400">@analog_drift</span>
</div>
<h3 class="text-base font-bold text-white group-hover:text-neon-cyan transition-colors">
Neural Ambient Wavetable Bank Vol. III
</h3>
<p class="text-xs text-slate-300 mt-1 line-clamp-2">
64 custom microtonal soundscapes captured from vintage Oberheim matrices.
</p>
</div>
<div class="pt-3 border-t border-surface-border flex items-center justify-between">
<span class="text-xs text-slate-400"><i class="fa-solid fa-download text-[11px]"></i> 1,420 collectors</span>
<button onclick="buySampleAlert('Neural Ambient Bank')" class="px-3 py-1.5 rounded-lg bg-surface-card hover:bg-neon-cyan hover:text-surface-dark border border-surface-border text-xs font-bold text-slate-200 transition-colors">
Acquire
</button>
</div>
</div>
</div>
<!-- Market Item 2 -->
<div class="glass-card rounded-2xl overflow-hidden border border-surface-border hover:border-aura-500/50 transition-all flex flex-col group">
<div class="relative h-48 overflow-hidden bg-slate-800">
<img src="https://picsum.photos/400/280?random=22" alt="Exclusive Newsletter and podcast pass" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<span class="absolute top-3 left-3 px-2 py-0.5 rounded bg-black/70 backdrop-blur text-[11px] font-mono text-neon-cyan">
Access Pod
</span>
<span class="absolute top-3 right-3 px-2.5 py-0.5 rounded-full bg-aura-600 text-xs font-bold text-white">
12 AURA / mo
</span>
</div>
<div class="p-5 flex-1 flex flex-col justify-between space-y-4">
<div>
<div class="flex items-center gap-2 mb-2">
<img src="https://i.pravatar.cc/40?u=sarahtech" alt="Sarah Lin avatar" class="w-5 h-5 rounded-full object-cover">
<span class="text-xs text-slate-400">@sarah_distributed</span>
</div>
<h3 class="text-base font-bold text-white group-hover:text-neon-cyan transition-colors">
Zero-Knowledge Protocol Deep Dives
</h3>
<p class="text-xs text-slate-300 mt-1 line-clamp-2">
Weekly uncensored technical teardowns and weekly live voice Q&A sessions.
</p>
</div>
<div class="pt-3 border-t border-surface-border flex items-center justify-between">
<span class="text-xs text-slate-400"><i class="fa-solid fa-users text-[11px]"></i> 890 subscribers</span>
<button onclick="buySampleAlert('ZK Protocol Deep Dives')" class="px-3 py-1.5 rounded-lg bg-surface-card hover:bg-neon-cyan hover:text-surface-dark border border-surface-border text-xs font-bold text-slate-200 transition-colors">
Subscribe
</button>
</div>
</div>
</div>
<!-- Market Item 3 -->
<div class="glass-card rounded-2xl overflow-hidden border border-surface-border hover:border-aura-500/50 transition-all flex flex-col group">
<div class="relative h-48 overflow-hidden bg-slate-800">
<img src="https://picsum.photos/400/280?random=23" alt="3D Shader library" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<span class="absolute top-3 left-3 px-2 py-0.5 rounded bg-black/70 backdrop-blur text-[11px] font-mono text-neon-cyan">
Shader Library
</span>
<span class="absolute top-3 right-3 px-2.5 py-0.5 rounded-full bg-aura-600 text-xs font-bold text-white">
30 AURA
</span>
</div>
<div class="p-5 flex-1 flex flex-col justify-between space-y-4">
<div>
<div class="flex items-center gap-2 mb-2">
<img src="https://i.pravatar.cc/40?u=devk" alt="Kaelen Ortiz avatar" class="w-5 h-5 rounded-full object-cover">
<span class="text-xs text-slate-400">@kaelen_glsl</span>
</div>
<h3 class="text-base font-bold text-white group-hover:text-neon-cyan transition-colors">
Raymarching Glass & Iridescence GLSL
</h3>
<p class="text-xs text-slate-300 mt-1 line-clamp-2">
Production-ready WebGL shaders with physically accurate refractive caustics.
</p>
</div>
<div class="pt-3 border-t border-surface-border flex items-center justify-between">
<span class="text-xs text-slate-400"><i class="fa-solid fa-download text-[11px]"></i> 2,890 collectors</span>
<button onclick="buySampleAlert('Raymarching Shader Pack')" class="px-3 py-1.5 rounded-lg bg-surface-card hover:bg-neon-cyan hover:text-surface-dark border border-surface-border text-xs font-bold text-slate-200 transition-colors">
Acquire
</button>
</div>
</div>
</div>
<!-- Market Item 4 -->
<div class="glass-card rounded-2xl overflow-hidden border border-surface-border hover:border-aura-500/50 transition-all flex flex-col group">
<div class="relative h-48 overflow-hidden bg-slate-800">
<img src="https://picsum.photos/400/280?random=24" alt="Generative poster artwork" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<span class="absolute top-3 left-3 px-2 py-0.5 rounded bg-black/70 backdrop-blur text-[11px] font-mono text-neon-cyan">
Limited Edition
</span>
<span class="absolute top-3 right-3 px-2.5 py-0.5 rounded-full bg-aura-600 text-xs font-bold text-white">
80 AURA
</span>
</div>
<div class="p-5 flex-1 flex flex-col justify-between space-y-4">
<div>
<div class="flex items-center gap-2 mb-2">
<img src="https://i.pravatar.cc/40?u=artistm" alt="Mirei Vance avatar" class="w-5 h-5 rounded-full object-cover">
<span class="text-xs text-slate-400">@mirei_visuals</span>
</div>
<h3 class="text-base font-bold text-white group-hover:text-neon-cyan transition-colors">
Recursive Topography Archival Print
</h3>
<p class="text-xs text-slate-300 mt-1 line-clamp-2">
Archival pigment print shipped worldwide, backed by on-chain provenance.
</p>
</div>
<div class="pt-3 border-t border-surface-border flex items-center justify-between">
<span class="text-xs text-slate-400"><i class="fa-solid fa-box text-[11px]"></i> 14 remaining</span>
<button onclick="buySampleAlert('Recursive Topography Print')" class="px-3 py-1.5 rounded-lg bg-surface-card hover:bg-neon-cyan hover:text-surface-dark border border-surface-border text-xs font-bold text-slate-200 transition-colors">
Acquire
</button>
</div>
</div>
</div>
</div>
<!-- Creator Tools Integration Callout -->
<div id="create" class="mt-16 rounded-3xl bg-gradient-to-r from-aura-950 via-aura-900 to-surface-card border border-aura-700/50 p-8 sm:p-12 relative overflow-hidden">
<div class="grid md:grid-cols-12 gap-8 items-center relative z-10">
<div class="md:col-span-8 space-y-4">
<h3 class="text-2xl sm:text-3xl font-extrabold font-display text-white">
Built for creators tired of being shadowbanned by black-box algorithms.
</h3>
<p class="text-slate-300 text-sm sm:text-base leading-relaxed">
When you create on Aura, you retain complete copyright, direct subscriber relations, and continuous royalties. No algorithmic demotions for linking outside the app. No unpredictable policy shifts.
</p>
<div class="flex flex-wrap gap-4 pt-2">
<div class="flex items-center gap-2 text-xs font-medium text-slate-200">
<i class="fa-solid fa-check text-neon-cyan"></i> Instant On-Chain Payouts
</div>
<div class="flex items-center gap-2 text-xs font-medium text-slate-200">
<i class="fa-solid fa-check text-neon-cyan"></i> Lossless Audio & 4K Video Support
</div>
<div class="flex items-center gap-2 text-xs font-medium text-slate-200">
<i class="fa-solid fa-check text-neon-cyan"></i> Native Tipping & Digital Merch
</div>
</div>
</div>
<div class="md:col-span-4 flex flex-col items-center justify-center gap-3">
<button onclick="claimHandleModal()" class="w-full py-4 px-6 rounded-xl bg-neon-cyan hover:bg-white text-surface-dark font-extrabold text-sm transition-all shadow-xl shadow-neon-cyan/20">
Claim Creator Handle
</button>
<p class="text-[11px] text-slate-400 font-mono">Zero Gas Fees • Immediate Setup</p>
</div>
</div>
</div>
</div>
</section>
<!-- SECTION 3: USER STORIES & TESTIMONIALS -->
<section id="stories" class="py-20 md:py-28 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16 space-y-4">
<span class="text-xs font-bold tracking-widest text-aura-400 uppercase bg-aura-900/50 px-3.5 py-1.5 rounded-full border border-aura-700/40">
Human Voices
</span>
<h2 class="text-3xl sm:text-4xl font-extrabold font-display text-white">
Stories from the Post-Corporate Social Era
</h2>
<p class="text-slate-300 text-base leading-relaxed">
Hear from researchers, indie artists, investigative reporters, and community organizers who made Aura their permanent home.
</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Story Card 1 -->
<div class="glass-card rounded-2xl p-7 border border-surface-border flex flex-col justify-between space-y-6 glow-hover transition-all">
<div class="space-y-4">
<div class="flex items-center gap-1 text-amber-400 text-xs">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
<p class="text-slate-300 text-sm leading-relaxed italic">
"On major legacy platforms, my deep-dive essays on decentralized energy systems were constantly suppressed because they didn't spark angry quote tweets. On Aura, my space has grown to 50,000 highly engaged engineers."
</p>
</div>
<div class="flex items-center gap-3.5 pt-4 border-t border-surface-border">
<img src="https://i.pravatar.cc/90?u=devin_green" alt="Devin Green photo" class="w-11 h-11 rounded-full object-cover border border-aura-400">
<div>
<h4 class="text-sm font-bold text-white">Devin Green</h4>
<p class="text-xs text-slate-400">Editor, The Clean Grid Dispatch</p>
</div>
</div>
</div>
<!-- Story Card 2 -->
<div class="glass-card rounded-2xl p-7 border border-surface-border flex flex-col justify-between space-y-6 glow-hover transition-all">
<div class="space-y-4">
<div class="flex items-center gap-1 text-amber-400 text-xs">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
<p class="text-slate-300 text-sm leading-relaxed italic">
"The direct audio lounges changed the economics of my indie label. We do private listening parties where fans tip directly in real time. We earned more in 2 hours on Aura than 18 months on commercial streaming services."
</p>
</div>
<div class="flex items-center gap-3.5 pt-4 border-t border-surface-border">
<img src="https://i.pravatar.cc/90?u=nadia_sound" alt="Nadia Oduro photo" class="w-11 h-11 rounded-full object-cover border border-neon-cyan">
<div>
<h4 class="text-sm font-bold text-white">Nadia Oduro</h4>
<p class="text-xs text-slate-400">Electronic Producer & Sound Designer</p>
</div>
</div>
</div>
<!-- Story Card 3 -->
<div class="glass-card rounded-2xl p-7 border border-surface-border flex flex-col justify-between space-y-6 glow-hover transition-all">
<div class="space-y-4">
<div class="flex items-center gap-1 text-amber-400 text-xs">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
<p class="text-slate-300 text-sm leading-relaxed italic">
"As a mental health counselor hosting open recovery check-ins, privacy is life-or-death. Knowing Aura does not track telemetry, sell behavioral profiles, or leak chat history gives my community genuine sanctuary."
</p>
</div>
<div class="flex items-center gap-3.5 pt-4 border-t border-surface-border">
<img src="https://i.pravatar.cc/90?u=julian_health" alt="Dr. Julian Vance photo" class="w-11 h-11 rounded-full object-cover border border-emerald-400">
<div>
<h4 class="text-sm font-bold text-white">Dr. Julian Vance</h4>
<p class="text-xs text-slate-400">Director, Mindful Horizons Guild</p>
</div>
</div>
</div>
</div>
</section>
<!-- SECTION 4: SAFETY RESOURCES & TRANSPARENCY -->
<section id="safety" class="py-20 bg-surface-card/60 border-t border-surface-border relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid lg:grid-cols-12 gap-12 items-center">
<div class="lg:col-span-6 space-y-6">
<span class="text-xs font-bold tracking-widest text-emerald-400 uppercase bg-emerald-950/80 px-3 py-1 rounded-full border border-emerald-500/30">
Trust & Integrity Infrastructure
</span>
<h2 class="text-3xl sm:text-4xl font-extrabold font-display text-white">
Safety Without Surveillance. Moderation with Transparency.
</h2>
<p class="text-slate-300 text-base leading-relaxed">
Most platforms force a false choice: either endure relentless harassment or surrender your private conversations to corporate panopticons. Aura pioneers community-driven moderation through transparent consensus protocols.
</p>
<div class="space-y-4 pt-2">
<div class="flex items-start gap-3.5">
<div class="w-6 h-6 rounded-full bg-emerald-500/20 text-emerald-400 flex items-center justify-center text-xs flex-shrink-0 mt-1">
<i class="fa-solid fa-shield"></i>
</div>
<div>
<h4 class="text-sm font-bold text-white">Decentralized Moderation Courts</h4>
<p class="text-xs text-slate-300 mt-0.5 leading-relaxed">
Content disputes are adjudicated by randomly selected, reputational community juries with publicly reviewable, anonymized rulings.
</p>
</div>
</div>
<div class="flex items-start gap-3.5">
<div class="w-6 h-6 rounded-full bg-emerald-500/20 text-emerald-400 flex items-center justify-center text-xs flex-shrink-0 mt-1">
<i class="fa-solid fa-user-shield"></i>
</div>
<div>
<h4 class="text-sm font-bold text-white">Guardian Mode & Youth Boundaries</h4>
<p class="text-xs text-slate-300 mt-0.5 leading-relaxed">
Hardware-verified age attestations without identity disclosure, preventing non-consensual contact and algorithmic predatory loops for teens.
</p>
</div>
</div>
<div class="flex items-start gap-3.5">
<div class="w-6 h-6 rounded-full bg-emerald-500/20 text-emerald-400 flex items-center justify-center text-xs flex-shrink-0 mt-1">
<i class="fa-solid fa-file-shield"></i>
</div>
<div>
<h4 class="text-sm font-bold text-white">Open Law Enforcement & Subpoena Canary</h4>
<p class="text-xs text-slate-300 mt-0.5 leading-relaxed">
We publish real-time cryptographically signed warrant canaries. Because we hold zero encryption keys, your private data remains completely impenetrable.
</p>
</div>
</div>
</div>
<div class="pt-4 flex flex-wrap gap-4">
<a href="#safety-download" onclick="alert('Downloading Aura Trust, Safety & Ethics Whitepaper (2025 Edition)...')" class="px-5 py-3 rounded-xl bg-surface-dark border border-surface-border hover:border-emerald-400/50 text-slate-200 text-xs font-bold transition-all flex items-center gap-2">
<i class="fa-solid fa-file-arrow-down text-emerald-400"></i> Download Safety Handbook
</a>
<a href="#safety-report" onclick="openMessageModal()" class="px-5 py-3 rounded-xl bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 text-xs font-bold transition-all flex items-center gap-2">
<i class="fa-solid fa-triangle-exclamation"></i> Emergency Report Hotline
</a>
</div>
</div>
<!-- Safety Resource Diagram Mock -->
<div class="lg:col-span-6">
<div class="rounded-2xl glass-card p-6 border border-emerald-500/20 space-y-6">
<div class="flex items-center justify-between border-b border-surface-border pb-4">
<div class="flex items-center gap-2">
<i class="fa-solid fa-heart-pulse text-emerald-400"></i>
<span class="text-sm font-bold text-white">Safety Network Telemetry</span>
</div>
<span class="text-xs font-mono text-emerald-400 bg-emerald-950 px-2 py-0.5 rounded border border-emerald-800">
Audit Score: 99.4%
</span>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="p-4 rounded-xl bg-surface-dark border border-surface-border">
<p class="text-2xl font-bold font-display text-white">0.02s</p>
<p class="text-[11px] text-slate-400 mt-1 uppercase font-medium">CSAM Zero-Tolerance Hash Trigger</p>
</div>
<div class="p-4 rounded-xl bg-surface-dark border border-surface-border">
<p class="text-2xl font-bold font-display text-neon-cyan">100%</p>
<p class="text-[11px] text-slate-400 mt-1 uppercase font-medium">DM Forward Secrecy</p>
</div>
<div class="p-4 rounded-xl bg-surface-dark border border-surface-border">
<p class="text-2xl font-bold font-display text-aura-400">0 KB</p>
<p class="text-[11px] text-slate-400 mt-1 uppercase font-medium">Third-Party Tracking Cookies</p>
</div>
<div class="p-4 rounded-xl bg-surface-dark border border-surface-border">
<p class="text-2xl font-bold font-display text-amber-400">3,410</p>
<p class="text-[11px] text-slate-400 mt-1 uppercase font-medium">Community Moderators Voting</p>
</div>
</div>
<!-- Trust FAQ Accordion snippet -->
<div class="space-y-3 pt-2">
<details class="group p-3 rounded-xl bg-surface-dark border border-surface-border cursor-pointer">
<summary class="text-xs font-bold text-slate-200 flex justify-between items-center select-none">
<span>How do you eliminate automated bots & sybil attacks?</span>
<i class="fa-solid fa-chevron-down text-[10px] text-slate-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="text-xs text-slate-400 mt-2 leading-relaxed">
We use zero-knowledge Proof-of-Humanity cryptographic attestations (such as biometric device enclaves) that prove a user is real without ever revealing their personal real-world identity.
</p>
</details>
<details class="group p-3 rounded-xl bg-surface-dark border border-surface-border cursor-pointer">
<summary class="text-xs font-bold text-slate-200 flex justify-between items-center select-none">
<span>Can government orders force Aura to censor opinions?</span>
<i class="fa-solid fa-chevron-down text-[10px] text-slate-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="text-xs text-slate-400 mt-2 leading-relaxed">
Aura is built on an immutable decentralized social protocol. Even if a central server domain is geo-blocked, users retain immediate access through peer relays across 60+ sovereign nations.
</p>
</details>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- SECTION 5: PLATFORM UPDATES & CHANGELOG -->
<section id="updates" class="py-20 md:py-28 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row md:items-end justify-between mb-14 gap-6">
<div>
<span class="text-xs font-bold tracking-widest text-neon-cyan uppercase bg-neon-cyan/10 px-3 py-1 rounded-full border border-neon-cyan/20">
Rapid Iteration
</span>
<h2 class="text-3xl sm:text-4xl font-extrabold font-display text-white mt-3">
Platform Updates & Changelog
</h2>
<p class="text-slate-300 text-base mt-2">
Transparent engineering shipped in public every single Friday.
</p>
</div>
<div>
<button onclick="subscribeChangelog()" class="px-5 py-2.5 rounded-xl bg-surface-card hover:bg-surface-hover border border-surface-border text-xs font-bold text-slate-200 transition-all flex items-center gap-2">
<i class="fa-regular fa-bell text-aura-400"></i> Get Release Alerts
</button>
</div>
</div>
<!-- Timeline Entries -->
<div class="relative border-l border-surface-border ml-4 md:ml-6 space-y-12">
<!-- Release 1 -->
<div class="relative pl-8 sm:pl-10">
<span class="absolute -left-3 top-1 w-6 h-6 rounded-full bg-neon-cyan text-surface-dark flex items-center justify-center text-xs font-bold shadow-md shadow-neon-cyan/30">
<i class="fa-solid fa-check text-[10px]"></i>
</span>
<div class="flex flex-wrap items-center gap-3">
<span class="font-mono text-xs font-bold text-neon-cyan">v4.4.0 Stable</span>
<span class="text-xs text-slate-400 font-mono">• Released October 24, 2025</span>
<span class="text-[10px] font-semibold uppercase px-2 py-0.5 rounded bg-emerald-950 text-emerald-400 border border-emerald-800">Deployed</span>
</div>
<h3 class="text-lg font-bold text-white mt-1">Spatial Audio Rooms & Universal Tip Jars</h3>
<p class="text-sm text-slate-300 mt-2 leading-relaxed max-w-3xl">
Integrated Opus 512kbps real-time multi-track spatial streaming with directional audio placement. Creators can now receive tips in 42 sovereign currencies plus zero-fee micro-transactions directly in the live room feed.
</p>
<div class="flex flex-wrap gap-2 mt-3">
<span class="text-[11px] font-mono bg-surface-dark border border-surface-border px-2.5 py-1 rounded text-slate-300">#AudioEngine</span>
<span class="text-[11px] font-mono bg-surface-dark border border-surface-border px-2.5 py-1 rounded text-slate-300">#Payouts</span>
<span class="text-[11px] font-mono bg-surface-dark border border-surface-border px-2.5 py-1 rounded text-slate-300">#WebRTC</span>
</div>
</div>
<!-- Release 2 -->
<div class="relative pl-8 sm:pl-10">
<span class="absolute -left-3 top-1 w-6 h-6 rounded-full bg-aura-600 text-white flex items-center justify-center text-xs font-bold">
<i class="fa-solid fa-code text-[10px]"></i>
</span>
<div class="flex flex-wrap items-center gap-3">
<span class="font-mono text-xs font-bold text-aura-300">v4.3.2</span>
<span class="text-xs text-slate-400 font-mono">• Released October 10, 2025</span>
</div>
<h3 class="text-lg font-bold text-white mt-1">Algorithm Curation Weights & Client-Side Filtering</h3>
<p class="text-sm text-slate-300 mt-2 leading-relaxed max-w-3xl">
Users can now export, import, and fork community algorithm recipes via JSON. Decreased feed latency by 38% across our Asia-Pacific and South American federated nodes.
</p>
</div>
<!-- Release 3 -->
<div class="relative pl-8 sm:pl-10">
<span class="absolute -left-3 top-1 w-6 h-6 rounded-full bg-surface-border text-slate-400 flex items-center justify-center text-xs">
<i class="fa-solid fa-box-archive text-[10px]"></i>
</span>
<div class="flex flex-wrap items-center gap-3">
<span class="font-mono text-xs font-bold text-slate-300">v4.2.0</span>
<span class="text-xs text-slate-400 font-mono">• Released September 18, 2025</span>
</div>
<h3 class="text-lg font-bold text-white mt-1">Creator Marketplace Beta & Digital Collectibles</h3>
<p class="text-sm text-slate-300 mt-2 leading-relaxed max-w-3xl">
Launched native creator storefronts allowing digital asset sales, tutorial subscriptions, and physical merchandise order fulfillment with zero intermediary fees.
</p>
</div>
</div>
</section>
<!-- CTA SECTION: JOIN THE RESISTANCE -->
<section class="py-20 relative overflow-hidden bg-gradient-to-b from-surface-dark via-aura-950 to-surface-dark border-t border-surface-border">
<div class="absolute inset-0 mesh-gradient opacity-40 pointer-events-none"></div>
<div class="max-w-4xl mx-auto px-4 text-center relative z-10 space-y-8">
<span class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-neon-cyan/10 border border-neon-cyan/30 text-neon-cyan text-xs font-bold uppercase tracking-wider">
<i class="fa-solid fa-rocket"></i> Ready For The New Era?
</span>
<h2 class="text-4xl sm:text-5xl font-extrabold font-display text-white tracking-tight leading-tight">
Reclaim Your Digital Social Sphere. Join Aura Today.
</h2>
<p class="text-slate-300 text-base sm:text-lg max-w-2xl mx-auto leading-relaxed">
Over 4 million thinkers, artists, writers, and makers have left the advertising-driven platforms behind. No spam. No behavioral tracking. Your network, your rules.
</p>
<!-- Handle Claiming Interactive Input Form -->
<div class="max-w-md mx-auto">
<form onsubmit="handleRegistration(event)" class="flex flex-col sm:flex-row gap-2 bg-surface-dark/80 p-2 rounded-2xl border border-aura-500/40 shadow-2xl backdrop-blur-md">
<div class="relative flex-1 flex items-center pl-3">
<span class="text-slate-400 font-mono text-sm">aura.me/@</span>
<input type="text" id="handle-input" required placeholder="yourname" class="w-full bg-transparent px-2 py-2.5 text-white placeholder-slate-500 focus:outline-none text-sm font-mono font-medium">
</div>
<button type="submit" class="px-6 py-3 rounded-xl bg-neon-cyan hover:bg-white text-surface-dark font-extrabold text-sm transition-all shadow-lg shadow-neon-cyan/20 flex-shrink-0">
Claim Handle
</button>
</form>
<p class="text-[11px] text-slate-400 mt-2 font-mono">Free reservation • Self-custody verification</p>
</div>
</div>
</section>
</main>
<!-- FOOTER -->
<footer class="bg-surface-dark border-t border-surface-border pt-16 pb-12 text-slate-400 text-xs">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 md:grid-cols-5 gap-8 mb-12">
<!-- Col 1: Brand Info -->
<div class="col-span-2 space-y-4">
<a href="#" class="flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-gradient-to-tr from-aura-600 to-neon-cyan p-0.5">
<div class="w-full h-full bg-surface-dark rounded-[6px] flex items-center justify-center">
<i class="fa-solid fa-bolt-lightning text-xs text-neon-cyan"></i>
</div>
</div>
<span class="font-display font-bold text-xl text-white">Aura Social</span>
</a>
<p class="text-xs text-slate-400 max-w-sm leading-relaxed">
Aura is an open, federated, and user-governed social communications network dedicated to algorithmic freedom, creator autonomy, and harassment-free community architecture.
</p>
<div class="flex items-center gap-3 text-slate-400 pt-2">
<a href="https://github.com" target="_blank" rel="noopener" aria-label="GitHub Repository" class="w-8 h-8 rounded-lg bg-surface-card hover:text-white flex items-center justify-center border border-surface-border transition-colors"><i class="fa-brands fa-github text-sm"></i></a>
<a href="https://twitter.com" target="_blank" rel="noopener" aria-label="X / Twitter" class="w-8 h-8 rounded-lg bg-surface-card hover:text-white flex items-center justify-center border border-surface-border transition-colors"><i class="fa-brands fa-x-twitter text-sm"></i></a>
<a href="https://discord.com" target="_blank" rel="noopener" aria-label="Discord Server" class="w-8 h-8 rounded-lg bg-surface-card hover:text-white flex items-center justify-center border border-surface-border transition-colors"><i class="fa-brands fa-discord text-sm"></i></a>
<a href="https://mastodon.social" target="_blank" rel="noopener" aria-label="Mastodon Node" class="w-8 h-8 rounded-lg bg-surface-card hover:text-white flex items-center justify-center border border-surface-border transition-colors"><i class="fa-brands fa-mastodon text-sm"></i></a>
</div>
</div>
<!-- Col 2: Discover & Network -->
<div class="space-y-3">
<p class="font-bold text-white uppercase tracking-wider text-[11px] font-mono">Platform</p>
<ul class="space-y-2">
<li><a href="#discover" class="hover:text-white transition-colors">Discover Spaces</a></li>
<li><a href="#feed-engine" class="hover:text-white transition-colors">Algorithm Lab</a></li>
<li><a href="#marketplace" class="hover:text-white transition-colors">Creator Marketplace</a></li>
<li><a href="#live-spaces" class="hover:text-white transition-colors">Audio Rooms</a></li>
<li><a href="#updates" class="hover:text-white transition-colors">Federated Nodes</a></li>
</ul>
</div>
<!-- Col 3: Creators & Devs -->
<div class="space-y-3">
<p class="font-bold text-white uppercase tracking-wider text-[11px] font-mono">Developers</p>
<ul class="space-y-2">
<li><a href="#" onclick="alert('Redirecting to Protocol Documentation...')" class="hover:text-white transition-colors">API Documentation</a></li>
<li><a href="#" onclick="alert('Opening Open Social Graph SDK...')" class="hover:text-white transition-colors">Federation SDK</a></li>
<li><a href="#" onclick="alert('Displaying Algorithm Template Library...')" class="hover:text-white transition-colors">Algorithm Recipes</a></li>
<li><a href="#" onclick="alert('Bug Bounty Rewards page...')" class="hover:text-white transition-colors">Bug Bounty Program</a></li>
<li><a href="#" class="hover:text-white transition-colors">Node Hosting Guide</a></li>
</ul>
</div>
<!-- Col 4: Trust & Transparency -->
<div class="space-y-3">
<p class="font-bold text-white uppercase tracking-wider text-[11px] font-mono">Trust & Safety</p>
<ul class="space-y-2">
<li><a href="#safety" class="hover:text-white transition-colors">Safety Resources</a></li>
<li><a href="#safety" class="hover:text-white transition-colors">Community Standards</a></li>
<li><a href="#safety" class="hover:text-white transition-colors">Warrant Canary</a></li>
<li><a href="#" onclick="alert('Opening Cryptographic Audit Logs...')" class="hover:text-white transition-colors">Audit Reports</a></li>
<li><a href="#" onclick="openMessageModal()" class="hover:text-white transition-colors">Ethics Appeal Board</a></li>
</ul>
</div>
</div>
<!-- Bottom Legal & Status -->
<div class="pt-8 border-t border-surface-border flex flex-col sm:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-emerald-400"></span>
<span class="text-slate-300 font-mono text-[11px]">All Global Clusters Operational (100.0% Uptime)</span>
</div>
<div class="flex flex-wrap items-center gap-6 text-[11px]">
<a href="#" onclick="alert('Aura Privacy Policy: We collect zero personal behavioral telemetry.')" class="hover:text-white transition-colors">Zero-Telemetry Privacy Policy</a>
<a href="#" onclick="alert('Terms of Sovereign Participation: You own your copyright and follower keys.')" class="hover:text-white transition-colors">Terms of Service</a>
<a href="#" onclick="alert('Cookie Policy: Aura uses ZERO tracking cookies.')" class="hover:text-white transition-colors">Cookie Preferences</a>
<span>© 2025 Aura Social Foundation. Built for human resonance.</span>
</div>
</div>
</div>
</footer>
<!-- INTERACTIVE CONTACT / MESSAGE MODAL -->
<div id="message-modal" class="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm hidden items-center justify-center p-4">
<div class="bg-surface-card border border-surface-border rounded-2xl max-w-md w-full p-6 space-y-5 shadow-2xl relative">
<button onclick="closeMessageModal()" class="absolute top-4 right-4 text-slate-400 hover:text-white">
<i class="fa-solid fa-xmark text-lg"></i>
</button>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-neon-cyan/20 text-neon-cyan flex items-center justify-center text-lg">
<i class="fa-solid fa-envelope"></i>
</div>
<div>
<h3 class="text-lg font-bold text-white">Send Message to Community Desk</h3>
<p class="text-xs text-slate-400">Direct encrypted dispatch to Aura moderators</p>
</div>
</div>
<form onsubmit="handleMessageSubmit(event)" class="space-y-4">
<div>
<label class="block text-xs font-mono text-slate-300 mb-1">Your Alias or Handle</label>
<input type="text" required placeholder="@creator or email" class="w-full bg-surface-dark border border-surface-border rounded-xl px-3.5 py-2 text-sm text-white focus:outline-none focus:border-neon-cyan">
</div>
<div>
<label class="block text-xs font-mono text-slate-300 mb-1">Subject Topic</label>
<select class="w-full bg-surface-dark border border-surface-border rounded-xl px-3.5 py-2 text-sm text-white focus:outline-none focus:border-neon-cyan">
<option>Community Migration Support</option>
<option>Safety Concern & Expedited Review</option>
<option>Creator Marketplace Onboarding</option>
<option>Open Protocol Integration Query</option>
</select>
</div>
<div>
<label class="block text-xs font-mono text-slate-300 mb-1">Encrypted Message</label>
<textarea rows="3" required placeholder="How can our community operations team assist you?" class="w-full bg-surface-dark border border-surface-border rounded-xl px-3.5 py-2 text-sm text-white focus:outline-none focus:border-neon-cyan"></textarea>
</div>
<div class="flex justify-end gap-3 pt-2">
<button type="button" onclick="closeMessageModal()" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-400 hover:text-white">Cancel</button>
<button type="submit" class="px-5 py-2 rounded-xl bg-neon-cyan text-surface-dark font-bold text-xs hover:bg-white transition-all shadow-md">Send Message</button>
</div>
</form>
</div>
</div>
<!-- JAVASCRIPT: FEED ENGINE SIMULATOR & INTERACTIVITY -->
<script>
// DATA MODEL FOR THE ALGORITHMIC LAB (INTERACTIVE ELEMENT)
const feedData = [
{
id: 1,
author: "Dr. Aris Thorne",
handle: "@aris_complexity",
avatar: "https://i.pravatar.cc/100?u=aris_complexity",
cluster: "tech",
bias: ["chronological", "deep-knowledge"],
time: "22m ago",
content: "Our lab just published a 40-page analysis on why reward functions trained on click-through rates inevitably maximize societal polarization. The mathematical proof is unequivocal: chronological networks produce higher collective happiness.",
stats: { hearts: 1420, comments: 184, tips: "45 AURA" },
tag: "Complexity Science"
},
{
id: 2,
author: "Kaelen Ortiz",
handle: "@kaelen_glsl",
avatar: "https://i.pravatar.cc/100?u=devk",
cluster: "design",
bias: ["chronological", "creators"],
time: "1h ago",
content: "Drop-tested new real-time WebGPU caustics on mobile Safari! Achieved steady 60FPS at 4K resolution without draining thermal thresholds. Source files posted to my sovereign marketplace pod.",
stats: { hearts: 890, comments: 62, tips: "120 AURA" },
tag: "Generative Shader"
},
{
id: 3,
author: "Maya Sol",
handle: "@maya_slowdown",
avatar: "https://i.pravatar.cc/100?u=mayasol",
cluster: "wellness",
bias: ["anti-rage", "chronological"],
time: "3h ago",
content: "Daily reminder for remote writers: close the 47 browser tabs. Step outside into unfiltered daylight for 15 minutes. The digital world will still be here when you return, grounded and replenished. 🍃",
stats: { hearts: 2310, comments: 95, tips: "30 AURA" },
tag: "Mindful Digitalism"
},
{
id: 4,
author: "Lyra Valen",
handle: "@lyra_modular",
avatar: "https://i.pravatar.cc/100?u=elena_voice",
cluster: "music",
bias: ["creators", "deep-knowledge"],
time: "4h ago",
content: "Streaming live patch notes from the Buchla easel experiment. Today we are exploring micro-tuning in 19-tone equal temperament. High resolution FLAC audio feed open to all federated nodes.",
stats: { hearts: 1140, comments: 130, tips: "88 AURA" },
tag: "Acoustic Explorations"
},
{
id: 5,
author: "Protocol Architecture Guild",
handle: "@open_federation",
avatar: "https://i.pravatar.cc/100?u=guild_core",
cluster: "tech",
bias: ["deep-knowledge", "chronological"],
time: "6h ago",
content: "Specification RFC-8941 is officially merged! Cross-platform identity migration now executes in sub-second latency with zero loss of subscriber relationships. You own your followers.",
stats: { hearts: 3410, comments: 240, tips: "210 AURA" },
tag: "Federated Protocols"
},
{
id: 6,
author: "Tetsuo Tanaka",
handle: "@tanaka_tokyo",
avatar: "https://i.pravatar.cc/100?u=marcus_chen",
cluster: "design",
bias: ["creators", "anti-rage"],
time: "7h ago",
content: "Morning fog drifting across the Kamogawa river in Kyoto. Sometimes the best user experience is quiet space, intentional typography, and room to breathe.",
stats: { hearts: 4120, comments: 88, tips: "15 AURA" },
tag: "Visual Poetics"
}
];
let currentAlgorithm = 'chronological';
let currentTopic = 'all';
function renderFeed() {
const container = document.getElementById('dynamic-cards-grid');
const statusLabel = document.getElementById('feed-status');
// Filter logic
const filtered = feedData.filter(item => {
const matchesAlgo = item.bias.includes(currentAlgorithm);
const matchesTopic = currentTopic === 'all' || item.cluster === currentTopic;
return matchesAlgo && matchesTopic;
});
// Update status text
const labels = {
'chronological': 'Displaying: Pure Chronological Node Stream (Real-Time)',
'deep-knowledge': 'Displaying: High-Dwell Longform & Mathematical Research',
'creators': 'Displaying: Direct Marketplace & Independent Creators',
'anti-rage': 'Displaying: Zen Mode (Zero Negativity, Depolarized Content)'
};
statusLabel.textContent = labels[currentAlgorithm] || 'Displaying Active Stream';
if (filtered.length === 0) {
container.innerHTML = `
<div class="col-span-full py-12 text-center text-slate-400 space-y-2">
<i class="fa-solid fa-satellite text-3xl text-aura-400"></i>
<p class="text-sm">No items in this cluster match your current algorithm bias filter.</p>
<button onclick="setAlgorithm('chronological'); filterTopic('all');" class="text-xs text-neon-cyan font-bold underline">Reset Filters</button>
</div>
`;
return;
}
container.innerHTML = filtered.map(item => `
<div class="p-5 rounded-xl bg-surface-dark border border-surface-border hover:border-aura-500/40 transition-all flex flex-col justify-between space-y-4 group">
<div class="space-y-3">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2.5">
<img src="${item.avatar}" alt="${item.author}" class="w-9 h-9 rounded-full object-cover border border-aura-500/30">
<div>
<h4 class="text-xs font-bold text-white group-hover:text-neon-cyan transition-colors flex items-center gap-1">
${item.author}
</h4>
<span class="text-[10px] text-slate-400 font-mono">${item.handle} • ${item.time}</span>
</div>
</div>
<span class="text-[10.5px] font-mono text-aura-300 bg-aura-950 px-2 py-0.5 rounded border border-aura-800">
${item.tag}
</span>
</div>
<p class="text-xs sm:text-sm text-slate-200 leading-relaxed">
${item.content}
</p>
</div>
<div class="pt-3 border-t border-surface-border flex items-center justify-between text-slate-400 text-xs font-mono">
<button onclick="likeCard(this)" class="hover:text-rose-400 transition-colors flex items-center gap-1.5">
<i class="fa-regular fa-heart"></i> <span>${item.stats.hearts}</span>
</button>
<button onclick="replyAlert('${item.author}')" class="hover:text-neon-cyan transition-colors flex items-center gap-1.5">
<i class="fa-regular fa-comment"></i> <span>${item.stats.comments}</span>
</button>
<button onclick="tipAlert('${item.author}')" class="text-amber-400 hover:text-amber-300 transition-colors flex items-center gap-1">
<i class="fa-solid fa-bolt"></i> <span>${item.stats.tips}</span>
</button>
</div>
</div>
`).join('');
}
function setAlgorithm(mode) {
currentAlgorithm = mode;
// Update button UI
document.querySelectorAll('.algo-pill').forEach(btn => {
if (btn.dataset.mode === mode) {
btn.className = "algo-pill px-4 py-2 rounded-xl text-xs font-bold tracking-wide transition-all bg-aura-600 text-white shadow-lg shadow-aura-600/30";
} else {
btn.className = "algo-pill px-4 py-2 rounded-xl text-xs font-bold tracking-wide transition-all bg-surface-card hover:bg-surface-hover text-slate-300 border border-surface-border";
}
});
renderFeed();
}
function filterTopic(topic) {
currentTopic = topic;
renderFeed();
}
function likeCard(btn) {
const countSpan = btn.querySelector('span');
let current = parseInt(countSpan.textContent.replace(',', ''));
const icon = btn.querySelector('i');
if (icon.classList.contains('fa-regular')) {
icon.classList.remove('fa-regular');
icon.classList.add('fa-solid', 'text-rose-500');
countSpan.textContent = (current + 1).toLocaleString();
} else {
icon.classList.remove('fa-solid', 'text-rose-500');
icon.classList.add('fa-regular');
countSpan.textContent = (current - 1).toLocaleString();
}
}
function tipAlert(author) {
alert(`Tip dispatched: You sent 5 AURA micro-credits directly to ${author}. Zero platform fee deducted.`);
}
function replyAlert(author) {
alert(`Opening end-to-end encrypted reply thread with ${author}...`);
}
function joinRoomAlert(roomTitle) {
alert(`Connecting to high-fidelity audio stream: "${roomTitle}"...\nMicrophone defaulted to mute.`);
}
function buySampleAlert(item) {
alert(`Access Granted: "${item}" has been added to your sovereign digital library vault.`);
}
function handleRegistration(e) {
e.preventDefault();
const val = document.getElementById('handle-input').value.trim();
if (val) {
alert(`Success! Reserve handle @${val} has been provisioned. Check your sovereign keypair backup in settings.`);
document.getElementById('handle-input').value = '';
}
}
function subscribeChangelog() {
const email = prompt("Enter your email or federated handle for weekly Friday changelog digests:");
if (email) {
alert(`Registered ${email} for platform updates.`);
}
}
function claimHandleModal() {
const handle = prompt("Enter your desired Aura handle:", "visionary");
if (handle) {
alert(`Handle @${handle} is currently available! Cryptographic keypair ready for self-custody reservation.`);
}
}
// Modal Controls
function openMessageModal() {
const m = document.getElementById('message-modal');
m.classList.remove('hidden');
m.classList.add('flex');
}
function closeMessageModal() {
const m = document.getElementById('message-modal');
m.classList.add('hidden');
m.classList.remove('flex');
}
function handleMessageSubmit(e) {
e.preventDefault();
alert('Your message has been encrypted and routed directly to the Aura Community Desk.');
closeMessageModal();
}
// Mobile Menu Toggle
document.getElementById('mobile-toggle').addEventListener('click', () => {
const menu = document.getElementById('mobile-menu');
const icon = document.getElementById('menu-icon');
menu.classList.toggle('hidden');
if (menu.classList.contains('hidden')) {
icon.classList.replace('fa-xmark', 'fa-bars');
} else {
icon.classList.replace('fa-bars', 'fa-xmark');
}
});
// Close mobile drawer on navigation click
document.querySelectorAll('.mobile-link').forEach(link => {
link.addEventListener('click', () => {
document.getElementById('mobile-menu').classList.add('hidden');
document.getElementById('menu-icon').classList.replace('fa-xmark', 'fa-bars');
});
});
// Initial render on load
document.addEventListener('DOMContentLoaded', () => {
renderFeed();
});
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T09:54:45.018Z",
"url": "https://benchmark.aimac.invalid/df2116a2c965ecace2b5b8a8cf432608d623f24265a8538ef4fe99f57ef0c2d4.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": []
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": []
},
{
"id": "aria-roles",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all elements with a role attribute use a valid value",
"help": "ARIA roles used must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
"nodes": []
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": []
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<a href=\"https://github.com\" target=\"_blank\" rel=\"noopener\" aria-label=\"GitHub Repository\" class=\"w-8 h-8 rounded-lg bg-surface-card hover:text-white flex items-center justify-center border border-surface-border transition-colors\"><i class=\"fa-brands fa-github text-sm\"></i></a>",
"target": [
"a[href$=\"github.com\"]"
]
}
]
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-conditional-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"none": [],
"impact": null,
"html": "<a href=\"https://github.com\" target=\"_blank\" rel=\"noopener\" aria-label=\"GitHub Repository\" class=\"w-8 h-8 rounded-lg bg-surface-card hover:text-white flex items-center justify-center border border-surface-border transition-colors\"><i class=\"fa-brands fa-github text-sm\"></i></a>",
"target": [
"a[href$=\"github.com\"]"
]
}
]
},
{
"id": "aria-hidden-body",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"wcag412",
"EN-301-549",
"EN-9.1.3.1",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden=\"true\" is not present on the document body.",
"help": "aria-hidden=\"true\" must not be present on the document body",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-hidden-body",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "No aria-hidden attribute is present on document body"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body class=\"bg-surface-dark text-slate-100 font-sans antialiased overflow-x-hidden selection:bg-aura-500 selection:text-white\">",
"target": [
"body"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"impact": null,
"html": "<a href=\"https://github.com\" target=\"_blank\" rel=\"noopener\" aria-label=\"GitHub Repository\" class=\"w-8 h-8 rounded-lg bg-surface-card hover:text-white flex items-center justify-center border border-surface-border transition-colors\"><i class=\"fa-brands fa-github text-sm\"></i></a>",
"target": [
"a[href$=\"github.com\"]"
]
}
]
},
{
"id": "aria-valid-attr-value",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-valid-attr-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute values are valid"
},
{
"id": "aria-errormessage",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
},
{
"id": "aria-level",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-level values are valid"
}
],
"none": [],
"impact": null,
"html": "<a href=\"https://github.com\" target=\"_blank\" rel=\"noopener\" aria-label=\"GitHub Repository\" class=\"w-8 h-8 rounded-lg bg-surface-card hover:text-white flex items-center justify-center border border-surface-border transition-colors\"><i class=\"fa-brands fa-github text-sm\"></i></a>",
"target": [
"a[href$=\"github.com\"]"
]
}
]
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-valid-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute name is valid"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"https://github.com\" target=\"_blank\" rel=\"noopener\" aria-label=\"GitHub Repository\" class=\"w-8 h-8 rounded-lg bg-surface-card hover:text-white flex items-center justify-center border border-surface-border transition-colors\"><i class=\"fa-brands fa-github text-sm\"></i></a>",
"target": [
"a[href$=\"github.com\"]"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"px-3 py-1.5 rounded-lg bg-white/20 hover:bg-white/30 backdrop-blur text-xs font-bold text-white flex items-center gap-1.5 transition-all\">\n <i class=\"fa-solid fa-headphones\"></i> Listen (412)\n </button>",
"target": [
".bg-white\\/20"
]
}
]
},
{
"id": "bypass",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag241",
"section508",
"section508.22.o",
"TTv5",
"TT9.a",
"EN-301-549",
"EN-9.2.4.1"
],
"description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
"help": "Page must have means to bypass repeated blocks",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "internal-link-present",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Valid skip link found"
},
{
"id": "header-present",
"data": null,
"relatedNodes": [
{
"html": "<h1 class=\"text-4xl sm:text-6xl font-extrabold font-display tracking-tight text-white leading-[1.12]\">",
"target": [
"h1"
]
},
{
"html": "<h2 class=\"text-sm font-bold text-white flex items-center gap-1.5\">\n Elena Rostova <i class=\"fa-solid fa-circle-check text-neon-cyan text-xs\"></i>\n </h2>",
"target": [
".gap-3.items-center.flex > div:nth-child(2) > h2"
]
},
{
"html": "<h2 class=\"text-3xl sm:text-4xl font-extrabold font-display text-white\">\n Take the Driver's Seat: Algorithmic Calibration Studio\n </h2>",
"target": [
".mb-14.max-w-3xl.text-center > .text-3xl.sm\\:text-4xl"
]
},
{
"html": "<h4 class=\"text-xs font-bold text-white group-hover:text-neon-cyan transition-colors flex items-center gap-1\">\n Dr. Aris Thorne\n </h4>",
"target": [
".hover\\:border-aura-500\\/40.p-5.group:nth-child(1) > .space-y-3 > .justify-between.items-center.flex > .gap-2\\.5.items-center.flex > div > .group-hover\\:text-neon-cyan"
]
},
{
"html": "<h4 class=\"text-xs font-bold text-white group-hover:text-neon-cyan transition-colors flex items-center gap-1\">\n Kaelen Ortiz\n </h4>",
"target": [
".hover\\:border-aura-500\\/40.p-5.group:nth-child(2) > .space-y-3 > .justify-between.items-center.flex > .gap-2\\.5.items-center.flex > div > .group-hover\\:text-neon-cyan"
]
},
{
"html": "<h4 class=\"text-xs font-bold text-white group-hover:text-neon-cyan transition-colors flex items-center gap-1\">\n Maya Sol\n </h4>",
"target": [
".hover\\:border-aura-500\\/40.p-5.group:nth-child(3) > .space-y-3 > .justify-between.items-center.flex > .gap-2\\.5.items-center.flex > div > .group-hover\\:text-neon-cyan"
]
},
{
"html": "<h4 class=\"text-xs font-bold text-white group-hover:text-neon-cyan transition-colors flex items-center gap-1\">\n Protocol Architecture Guild\n </h4>",
"target": [
".hover\\:border-aura-500\\/40.p-5.group:nth-child(4) > .space-y-3 > .justify-between.items-center.flex > .gap-2\\.5.items-center.flex > div > .group-hover\\:text-neon-cyan"
]
},
{
"html": "<h2 class=\"text-3xl sm:text-4xl font-extrabold font-display text-white mt-3\">\n Connect Across Micro-Communities, Not Monolithic Echo Chambers\n </h2>",
"target": [
".lg\\:col-span-8 > div:nth-child(1) > .text-3xl.sm\\:text-4xl.mt-3"
]
},
{
"html": "<h3 class=\"text-lg font-bold text-white mb-2\">Federated Sub-Spaces</h3>",
"target": [
".hover\\:border-aura-500\\/40.glow-hover.p-6 > .mb-2.text-lg"
]
},
{
"html": "<h3 class=\"text-lg font-bold text-white mb-2\">Hi-Fi Audio Lounges</h3>",
"target": [
".hover\\:border-neon-cyan\\/40 > .mb-2.text-lg"
]
},
{
"html": "<h3 class=\"text-lg font-bold text-white mb-2\">Zero-Knowledge Private Messaging</h3>",
"target": [
".hover\\:border-emerald-400\\/40 > .mb-2.text-lg"
]
},
{
"html": "<h3 class=\"text-lg font-bold text-white mb-2\">Portable Identity Graphs</h3>",
"target": [
".hover\\:border-rose-400\\/40 > .mb-2.text-lg"
]
},
{
"html": "<h3 class=\"font-bold text-white text-base\">Live Spaces Now</h3>",
"target": [
".gap-2.items-center.flex > h3"
]
},
{
"html": "<h4 class=\"text-sm font-bold text-white group-hover:text-aura-300 transition-colors mt-1\">\n Late Night Modular Synthesis Lab\n </h4>",
"target": [
".p-3\\.5.border-surface-border\\/80.hover\\:border-aura-500\\/40:nth-child(1) > .group-hover\\:text-aura-300"
]
},
{
"html": "<h4 class=\"text-sm font-bold text-white group-hover:text-aura-300 transition-colors mt-1\">\n Autonomous Agents & Social Topology\n </h4>",
"target": [
".p-3\\.5.border-surface-border\\/80.hover\\:border-aura-500\\/40:nth-child(2) > .group-hover\\:text-aura-300"
]
},
{
"html": "<h3 class=\"font-bold text-white text-base mb-4 pb-3 border-b border-surface-border flex items-center justify-between\">\n <span>Trending Across Clusters</span>\n <i class=\"fa-solid fa-arrow-trend-up text-neon-cyan\"></i>\n </h3>",
"target": [
".p-6.glass-card.rounded-2xl:nth-child(2) > .pb-3.mb-4.border-b"
]
},
{
"html": "<h4 class=\"text-base font-bold text-white\">Have a Project or Collective?</h4>",
"target": [
".to-aura-950 > h4"
]
},
{
"html": "<h2 class=\"text-3xl sm:text-4xl font-extrabold font-display text-white\">\n The Sovereign Creator Marketplace\n </h2>",
"target": [
".max-w-2xl.space-y-3 > .text-3xl.sm\\:text-4xl"
]
},
{
"html": "<h3 class=\"text-base font-bold text-white group-hover:text-neon-cyan transition-colors\">\n Neural Ambient Wavetable Bank Vol. III\n </h3>",
"target": [
".hover\\:border-aura-500\\/50.overflow-hidden.glass-card:nth-child(1) > .flex-1.p-5.space-y-4 > div:nth-child(1) > .group-hover\\:text-neon-cyan"
]
},
{
"html": "<h3 class=\"text-base font-bold text-white group-hover:text-neon-cyan transition-colors\">\n Zero-Knowledge Protocol Deep Dives\n </h3>",
"target": [
".hover\\:border-aura-500\\/50.overflow-hidden.glass-card:nth-child(2) > .flex-1.p-5.space-y-4 > div:nth-child(1) > .group-hover\\:text-neon-cyan"
]
},
{
"html": "<h3 class=\"text-base font-bold text-white group-hover:text-neon-cyan transition-colors\">\n Raymarching Glass & Iridescence GLSL\n </h3>",
"target": [
".hover\\:border-aura-500\\/50.overflow-hidden.glass-card:nth-child(3) > .flex-1.p-5.space-y-4 > div:nth-child(1) > .group-hover\\:text-neon-cyan"
]
},
{
"html": "<h3 class=\"text-base font-bold text-white group-hover:text-neon-cyan transition-colors\">\n Recursive Topography Archival Print\n </h3>",
"target": [
".hover\\:border-aura-500\\/50.overflow-hidden.glass-card:nth-child(4) > .flex-1.p-5.space-y-4 > div:nth-child(1) > .group-hover\\:text-neon-cyan"
]
},
{
"html": "<h3 class=\"text-2xl sm:text-3xl font-extrabold font-display text-white\">\n Built for creators tired of being shadowbanned by black-box algorithms.\n </h3>",
"target": [
".md\\:col-span-8 > .sm\\:text-3xl.text-2xl.font-extrabold"
]
},
{
"html": "<h2 class=\"text-3xl sm:text-4xl font-extrabold font-display text-white\">\n Stories from the Post-Corporate Social Era\n </h2>",
"target": [
".mb-16 > .text-3xl.sm\\:text-4xl"
]
},
{
"html": "<h4 class=\"text-sm font-bold text-white\">Devin Green</h4>",
"target": [
".p-7.space-y-6.glow-hover:nth-child(1) > .pt-4.gap-3\\.5.border-t > div > h4"
]
},
{
"html": "<h4 class=\"text-sm font-bold text-white\">Nadia Oduro</h4>",
"target": [
".p-7.space-y-6.glow-hover:nth-child(2) > .pt-4.gap-3\\.5.border-t > div > h4"
]
},
{
"html": "<h4 class=\"text-sm font-bold text-white\">Dr. Julian Vance</h4>",
"target": [
".p-7.space-y-6.glow-hover:nth-child(3) > .pt-4.gap-3\\.5.border-t > div > h4"
]
},
{
"html": "<h2 class=\"text-3xl sm:text-4xl font-extrabold font-display text-white\">\n Safety Without Surveillance. Moderation with Transparency.\n </h2>",
"target": [
".lg\\:col-span-6.space-y-6 > .text-3xl.sm\\:text-4xl"
]
},
{
"html": "<h4 class=\"text-sm font-bold text-white\">Decentralized Moderation Courts</h4>",
"target": [
".items-start.gap-3\\.5.flex:nth-child(1) > div:nth-child(2) > h4"
]
},
{
"html": "<h4 class=\"text-sm font-bold text-white\">Guardian Mode & Youth Boundaries</h4>",
"target": [
".items-start.gap-3\\.5.flex:nth-child(2) > div:nth-child(2) > h4"
]
},
{
"html": "<h4 class=\"text-sm font-bold text-white\">Open Law Enforcement & Subpoena Canary</h4>",
"target": [
".items-start.gap-3\\.5.flex:nth-child(3) > div:nth-child(2) > h4"
]
},
{
"html": "<h2 class=\"text-3xl sm:text-4xl font-extrabold font-display text-white mt-3\">\n Platform Updates & Changelog\n </h2>",
"target": [
".md\\:flex-row.md\\:items-end.mb-14 > div:nth-child(1) > .text-3xl.sm\\:text-4xl.mt-3"
]
},
{
"html": "<h3 class=\"text-lg font-bold text-white mt-1\">Spatial Audio Rooms & Universal Tip Jars</h3>",
"target": [
".pl-8.sm\\:pl-10.relative:nth-child(1) > .text-lg"
]
},
{
"html": "<h3 class=\"text-lg font-bold text-white mt-1\">Algorithm Curation Weights & Client-Side Filtering</h3>",
"target": [
".pl-8.sm\\:pl-10.relative:nth-child(2) > .text-lg"
]
},
{
"html": "<h3 class=\"text-lg font-bold text-white mt-1\">Creator Marketplace Beta & Digital Collectibles</h3>",
"target": [
".pl-8.sm\\:pl-10.relative:nth-child(3) > .text-lg"
]
},
{
"html": "<h2 class=\"text-4xl sm:text-5xl font-extrabold font-display text-white tracking-tight leading-tight\">\n Reclaim Your Digital Social Sphere. Join Aura Today.\n </h2>",
"target": [
".sm\\:text-5xl"
]
}
],
"impact": "serious",
"message": "Page has a heading"
},
{
"id": "landmark",
"data": null,
"relatedNodes": [
{
"html": "<main>",
"target": [
"main"
]
}
],
"impact": "serious",
"message": "Page has a landmark region"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\" class=\"scroll-smooth\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#0e0a1c",
"contrastRatio": 19.46,
"fontSize": "18.0pt (24px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 19.46"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span class=\"font-display font-bold text-2xl tracking-tight text-white flex items-center gap-1.5\">\n Aura<span class=\"text-neon-cyan text-sm px-1.5 py-0.5 rounded bg-aura-950 border border-aura-800 font-mono font-medium\">OS</span>\n </span>",
"target": [
".tracking-tight.text-2xl.font-display"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\" class=\"scroll-smooth\">",
"target": [
"html"
]
}
]
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "duplicate-id-aria",
"data": "topic-select",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<select id=\"topic-select\" onchange=\"filterTopic(this.value)\" class=\"w-full bg-surface-dark border border-surface-border text-slate-200 text-sm rounded-xl px-4 py-2.5 appearance-none focus:outline-none focus:border-neon-cyan cursor-pointer\">",
"target": [
"#topic-select"
]
}
]
},
{
"id": "form-field-multiple-labels",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [
{
"html": "<label for=\"topic-select\" class=\"block text-xs font-mono text-slate-400 uppercase tracking-wider mb-2\">\n Explore Specific Cluster:\n </label>",
"target": [
"label[for=\"topic-select\"]"
]
}
],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<select id=\"topic-select\" onchange=\"filterTopic(this.value)\" class=\"w-full bg-surface-dark border border-surface-border text-slate-200 text-sm rounded-xl px-4 py-2.5 appearance-none focus:outline-none focus:border-neon-cyan cursor-pointer\">",
"target": [
"#topic-select"
]
}
]
},
{
"id": "html-has-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure every HTML document has a lang attribute",
"help": "<html> element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The <html> element has a lang attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\" class=\"scroll-smooth\">",
"target": [
"html"
]
}
]
},
{
"id": "html-lang-valid",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure the lang attribute of the <html> element has a valid value",
"help": "<html> element must have a valid value for the lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "valid-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Value of lang attribute is included in the list of valid languages"
}
],
"impact": null,
"html": "<html lang=\"en\" class=\"scroll-smooth\">",
"target": [
"html"
]
}
]
},
{
"id": "image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"TT7.b",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <img> elements have alternative text or a role of none or presentation",
"help": "Images must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has an alt attribute"
}
],
"all": [],
"none": [
{
"id": "alt-space-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a valid alt attribute value"
}
],
"impact": null,
"html": "<img src=\"https://i.pravatar.cc/100?u=elena_voice\" alt=\"Elena Rostova avatar\" class=\"w-10 h-10 rounded-full border-2 border-neon-cyan object-cover\">",
"target": [
"img[alt=\"Elena Rostova avatar\"]"
]
}
]
},
{
"id": "label",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "non-empty-placeholder",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a placeholder attribute"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input type=\"text\" id=\"handle-input\" required=\"\" placeholder=\"yourname\" class=\"w-full bg-transparent px-2 py-2.5 text-white placeholder-slate-500 focus:outline-none text-sm font-mono font-medium\">",
"target": [
"#handle-input"
]
}
]
},
{
"id": "link-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a href=\"#updates\" class=\"hidden sm:inline-flex items-center gap-1 font-semibold text-neon-cyan hover:underline text-xs\">\n Inspect Changelog <i class=\"fa-solid fa-arrow-right text-[10px]\"></i>\n </a>",
"target": [
".sm\\:inline-flex"
]
}
]
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "only-listitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List element only has direct children that are allowed inside <li> elements"
}
],
"impact": null,
"html": "<ul class=\"space-y-3.5 text-sm\">",
"target": [
".space-y-3\\.5"
]
}
]
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "listitem",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List item has a <ul>, <ol> or role=\"list\" parent element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<li class=\"flex items-center justify-between group cursor-pointer\">",
"target": [
".space-y-3\\.5 > .cursor-pointer.group:nth-child(1)"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<img src=\"https://i.pravatar.cc/100?u=elena_voice\" alt=\"Elena Rostova avatar\" class=\"w-10 h-10 rounded-full border-2 border-neon-cyan object-cover\">",
"target": [
"img[alt=\"Elena Rostova avatar\"]"
]
}
]
},
{
"id": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "explicit-label",
"data": {
"explicitLabel": "Explore Specific Cluster:"
},
"relatedNodes": [
{
"html": "<label for=\"topic-select\" class=\"block text-xs font-mono text-slate-400 uppercase tracking-wider mb-2\">\n Explore Specific Cluster:\n </label>",
"target": [
"label[for=\"topic-select\"]"
]
}
],
"impact": "critical",
"message": "Element has an explicit <label>"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<select id=\"topic-select\" onchange=\"filterTopic(this.value)\" class=\"w-full bg-surface-dark border border-surface-border text-slate-200 text-sm rounded-xl px-4 py-2.5 appearance-none focus:outline-none focus:border-neon-cyan cursor-pointer\">",
"target": [
"#topic-select"
]
}
]
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<summary class=\"text-xs font-bold text-slate-200 flex justify-between items-center select-none\">",
"target": [
"details:nth-child(1) > summary"
]
}
]
},
{
"id": "target-size",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag22aa",
"wcag258"
],
"description": "Ensure touch targets have sufficient size and space",
"help": "All touch targets must be 24px large, or leave sufficient space",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#updates\" class=\"hidden sm:inline-flex items-center gap-1 font-semibold text-neon-cyan hover:underline text-xs\">\n Inspect Changelog <i class=\"fa-solid fa-arrow-right text-[10px]\"></i>\n </a>",
"target": [
".sm\\:inline-flex"
]
}
]
}
],
"incomplete": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": null,
"bgColor": null,
"contrastRatio": 0,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": "bgGradient",
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<aside class=\"bg-gradient-to-r from-aura-900 via-aura-700 to-aura-900 text-xs py-2 px-4 text-center border-b border-aura-600/40 relative z-50\">",
"target": [
".via-aura-700"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined due to a background gradient"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span><strong>Aura Protocol v4.4 Live:</strong> Decentralized moderation consensus & lossless live audio spaces enabled.</span>",
"target": [
".sm\\:mx-0 > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined due to a background gradient"
}
]
}
],
"violations": [],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 7876
},
{
"y": 576,
"height": 7876
},
{
"y": 1152,
"height": 7876
},
{
"y": 1728,
"height": 7876
},
{
"y": 2304,
"height": 7876
},
{
"y": 2880,
"height": 7876
},
{
"y": 3456,
"height": 7876
},
{
"y": 4032,
"height": 7876
},
{
"y": 4608,
"height": 7876
},
{
"y": 5184,
"height": 7876
},
{
"y": 5760,
"height": 7876
},
{
"y": 6336,
"height": 7876
},
{
"y": 6912,
"height": 7876
},
{
"y": 7156,
"height": 7876
}
],
"scans": 15,
"max_states": 512,
"settle_ms": 5000,
"page_timeout_seconds": 150,
"layout_stability": "consecutive 100ms size samples within one CSS pixel",
"animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
"interactive_states": "not exercised",
"horizontal_scroll": "not exercised"
}
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "Social Media" sector.
Your goal is to generate the full HTML code for a page that is not just functional but also visually compelling, content-rich, and feels like a finished product ready for launch.
**Client & Category:**
- Industry: "Social Media"
- Description: Platforms for social networking, sharing, messaging, and online communities.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Social Media" category.
2. **Define Page:** Determine the most effective primary page type (e.g., homepage, service landing page, category portal) to showcase this fictional entity.
3. **Design:** Develop an opinionated, modern, and professional layout. Make distinct choices about structure and flow.
**Content & Structure Requirements (Deliver a COMPLETE page):**
- **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
- **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "Discover", "Create", "Marketplace".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Social Media" category. Consider themes similar to: "User Stories", "Safety Resources", "Platform Updates".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "user-generated content", "algorithm", "trending".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Send Message", "Discover", "Go Live".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Social Media" sector. Ideas similar but not limited to: "community finder".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "community highlights", "live streams", "event invites".
- **FOOTER:** Include a professional footer with invented contact details, copyright (current year), social media links, and standard links (Privacy, Terms).
- **MODERN WEB PATTERNS:** Include modern web patterns like testimonial cards, feature grids, or FAQ accordions where appropriate.