Hugging Face's logo

Spaces:
Imaginephoenix
/
anycoder-9aa9bf93
Running

App Files Community
anycoder-9aa9bf93 / index.html
Imaginephoenix's picture
Imaginephoenix
Upload folder using huggingface_hub
1864be7 verified
raw
history blame
19.3 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Aether UI - Modern Design System</title>
 <!-- Remix Icons for modern, clean icons -->
 <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
 <!-- Google Fonts: Inter -->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com">
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght=300;400;600;800&display=swap" rel="stylesheet">
<style>
 /* --- CSS VARIABLES & RESET --- */
 :root {
 --bg-body: #0f1115;
 --bg-card: #16181d;
 --bg-glass: rgba(22, 24, 29, 0.7);
 --primary: #6c5ce7;
 --primary-glow: rgba(108, 92, 231, 0.4);
 --accent: #00f2c3;
 --text-main: #ffffff;
 --text-muted: #a0a0a0;
 --border: rgba(255, 255, 255, 0.08);
 --shadow: 0 10px 40px -10px rgba(0,0,0,0.5);
 --ease: cubic-bezier(0.23, 1, 0.32, 1);
 }
 * {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
 }
 body {
 background-color: var(--bg-body);
 color: var(--text-main);
 font-family: 'Inter', sans-serif;
 overflow-x: hidden;
 min-height: 100vh;
 display: flex;
 flex-direction: column;
 }
 /* --- UTILITIES --- */
 .glass {
 background: var(--bg-glass);
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 border: 1px solid var(--border);
 }
 .gradient-text {
 background: linear-gradient(45deg, var(--primary), var(--accent));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 display: inline-block;
 }
 /* --- HEADER --- */
 header {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 70px;
 z-index: 100;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 0 2rem;
 background: rgba(15, 17, 21, 0.8);
 backdrop-filter: blur(10px);
 border-bottom: 1px solid var(--border);
 }
 .brand {
 font-weight: 800;
 font-size: 1.2rem;
 letter-spacing: -0.5px;
 display: flex;
 align-items: center;
 gap: 10px;
 }
 .brand i {
 color: var(--primary);
 font-size: 1.5rem;
 }
 .anycoder-link {
 font-size: 0.8rem;
 color: var(--text-muted);
 text-decoration: none;
 background: rgba(255,255,255,0.05);
 padding: 4px 12px;
 border-radius: 20px;
 transition: all 0.3s ease;
 border: 1px solid transparent;
 }
 .anycoder-link:hover {
 color: var(--text-main);
 border-color: var(--border);
 background: rgba(255,255,255,0.1);
 }
 /* --- MAIN LAYOUT --- */
 main {
 padding-top: 70px;
 display: grid;
 grid-template-columns: 250px 1fr;
 min-height: calc(100vh - 70px);
 }
 /* --- SIDEBAR --- */
 .sidebar {
 padding: 2rem;
 border-right: 1px solid var(--border);
 display: flex;
 flex-direction: column;
 gap: 1rem;
 position: sticky;
 top: 70px;
 height: calc(100vh - 70px);
 }
 .nav-item {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 12px 16px;
 color: var(--text-muted);
 text-decoration: none;
 border-radius: 12px;
 transition: all 0.3s var(--ease);
 font-weight: 500;
 }
 .nav-item:hover, .nav-item.active {
 background: rgba(255,255,255,0.05);
 color: var(--text-main);
 transform: translateX(5px);
 }
 .nav-item.active i {
 color: var(--primary);
 }
 /* --- CONTENT AREA --- */
 .content {
 padding: 3rem;
 position: relative;
 overflow-y: auto;
 }
 /* Ambient Background Glow */
 .ambient-glow {
 position: absolute;
 top: -100px;
 right: -100px;
 width: 500px;
 height: 500px;
 background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
 opacity: 0.5;
 z-index: -1;
 pointer-events: none;
 }
 .section-title {
 font-size: 2.5rem;
 font-weight: 700;
 margin-bottom: 1rem;
 line-height: 1.1;
}
.section-desc {
 color: var(--text-muted);
 max-width: 600px;
 margin-bottom: 3rem;
 font-size: 1.1rem;
 line-height: 1.6;
 }
 /* --- UI COMPONENT GRID --- */
 .ui-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 gap: 2rem;
 }
 .card {
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: 20px;
 padding: 2rem;
 position: relative;
 transition: all 0.4s var(--ease);
 overflow: hidden;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 height: 350px;
 }
 .card:hover {
 transform: translateY(-10px);
 border-color: var(--primary);
 box-shadow: 0 20px 40px -10px rgba(108, 92, 231, 0.2);
 }
 .card::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.03) 100%);
 opacity: 0;
 transition: opacity 0.4s;
 }
 .card:hover::before {
 opacity: 1;
 }
 .card-icon {
 width: 50px;
 height: 50px;
 background: rgba(255,255,255,0.05);
 border-radius: 12px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.5rem;
 color: var(--text-main);
 margin-bottom: 1.5rem;
 }
 .card-title {
 font-size: 1.2rem;
 font-weight: 600;
 margin-bottom: 0.5rem;
 }
 .card-desc {
 font-size: 0.9rem;
 color: var(--text-muted);
 line-height: 1.5;
 }
 .card-action {
 margin-top: 2rem;
 display: flex;
 justify-content: flex-end;
 }
 /* --- BUTTONS --- */
 .btn {
 padding: 10px 20px;
 border-radius: 8px;
 font-weight: 600;
 cursor: pointer;
 border: none;
 transition: all 0.3s ease;
 font-size: 0.9rem;
 display: inline-flex;
 align-items: center;
 gap: 8px;
 }
 .btn-primary {
 background: var(--primary);
 color: white;
 box-shadow: 0 4px 15px var(--primary-glow);
 }
 .btn-primary:hover {
 background: #7b69f0;
 transform: scale(1.05);
 }
 .btn-glass {
 background: rgba(255,255,255,0.1);
 color: var(--text-main);
 }
 .btn-glass:hover {
 background: rgba(255,255,255,0.2);
 }
 /* --- STATS SECTION --- */
 .stats-row {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 1rem;
 margin-bottom: 4rem;
 }
 .stat-card {
 background: rgba(255,255,255,0.03);
 border: 1px solid var(--border);
 padding: 1.5rem;
 border-radius: 16px;
 text-align: center;
 }
 .stat-value {
 font-size: 2rem;
 font-weight: 700;
 color: var(--text-main);
 }
 .stat-label {
 font-size: 0.8rem;
 color: var(--text-muted);
 text-transform: uppercase;
 letter-spacing: 1px;
 margin-top: 5px;
 }
 /* --- RESPONSIVE --- */
 @media (max-width: 900px) {
 main {
 grid-template-columns: 1fr;
 }
 .sidebar {
 display: none; /* Simplified for mobile example */
 }
 .stats-row {
 grid-template-columns: 1fr 1fr;
 }
 .section-title {
 font-size: 2rem;
 }
 }
@media (max-width: 600px) {
 header { padding: 0 1rem; }
 .stats-row { grid-template-columns: 1fr; }
 .ui-grid { grid-template-columns: 1fr; }
 }
 /* --- ANIMATIONS --- */
 @keyframes float {
 0% { transform: translateY(0px); }
 50% { transform: translateY(-10px); }
 100% { transform: translateY(0px); }
 }
 .floating-icon {
 animation: float 4s ease-in-out infinite;
 }
 </style>
</head>
<body>
<!-- Header -->
 <header>
 <div class="brand">
 <i class="ri-flashlight-fill"></i>
 <span>Aether<span class="gradient-text">UI</span></span>
 </div>
 <!-- REQUIRED LINK -->
 <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
 Built with anycoder
 </a>
 </header>
<main>
 <!-- Sidebar Navigation -->
 <aside class="sidebar">
 <a href="#" class="nav-item active">
 <i class="ri-dashboard-line"></i>
 Dashboard
 </a>
 <a href="#" class="nav-item">
 <i class="ri-layout-masonry-line"></i>
 Components
 </a>
 <a href="#" class="nav-item">
 <i class="ri-palette-line"></i>
 Colors
 </a>
 <a href="#" class="nav-item">
 <i class="ri-settings-3-line"></i>
 Settings
 </a>
<div style="margin-top: auto;">
 <div class="card" style="height: auto; padding: 1rem; border-radius: 12px; background: linear-gradient(135deg, #6c5ce7, #00f2c3); border:none;">
 <div style="color: white; font-weight: 600; font-size: 0.9rem;">Pro Version</div>
 <div style="color: rgba(255,255,255,0.8); font-size: 0.8rem; margin-bottom: 10px;">Unlock advanced UI kits.</div>
 <button style="width: 100%; padding: 8px; background: white; color: #6c5ce7; border:none; border-radius: 6px; font-weight: 700; cursor: pointer;">Upgrade</button>
 </div>
 </div>
 </aside>
<!-- Main Content -->
 <section class="content">
 <div class="ambient-glow"></div>
<h1 class="section-title">Design System <br><span class="gradient-text">Components</span></h1>
 <p class="section-desc">
 Explore a curated collection of modern UI elements built with pure CSS and Vanilla JS.
Focus on glassmorphism, vibrant gradients, and responsive layouts.
 </p>
<!-- Stats -->
 <div class="stats-row">
 <div class="stat-card">
 <div class="stat-value">128</div>
 <div class="stat-label">Components</div>
 </div>
 <div class="stat-card">
 <div class="stat-value">4.8s</div>
 <div class="stat-label">Render Time</div>
 </div>
 <div class="stat-card">
 <div class="stat-value">100%</div>
 <div class="stat-label">Responsive</div>
 </div>
 <div class="stat-card">
 <div class="stat-value">v2.0</div>
 <div class="stat-label">Current Version</div>
 </div>
 </div>
<!-- UI Grid -->
 <div class="ui-grid">
<!-- Card 1 -->
 <div class="card">
 <div class="card-icon floating-icon">
 <i class="ri-notification-3-line"></i>
 </div>
 <div>
 <h3 class="card-title">Glassmorphism</h3>
 <p class="card-desc">Utilizing backdrop-filter and semi-transparent backgrounds to create depth and hierarchy.</p>
 </div>
 <div class="card-action">
 <button class="btn btn-glass">View Code</button>
 </div>
 </div>
<!-- Card 2 -->
 <div class="card">
 <div class="card-icon" style="color: var(--accent)">
 <i class="ri-layout-grid-line"></i>
 </div>
 <div>
 <h3 class="card-title">CSS Grid Layout</h3>
 <p class="card-desc">Responsive grid systems using minmax and auto-fill for robust adaptability.</p>
 </div>
 <div class="card-action">
 <button class="btn btn-glass">Inspect</button>
 </div>
 </div>
<!-- Card 3 -->
 <div class="card">
 <div class="card-icon" style="color: #ff005c">
 <i class="ri-animation-line"></i>
 </div>
 <div>
 <h3 class="card-title">Micro Interactions</h3>
 <p class="card-desc">Smooth bezier curves and transform properties to enhance user feedback.</p>
 </div>
 <div class="card-action">
 <button class="btn btn-primary">
 <i class="ri-play-fill"></i> Play
 </button>
 </div>
 </div>
<!-- Card 4 -->
 <div class="card">
 <div class="card-icon">
 <i class="ri-terminal-line"></i>
 </div>
 <div>
 <h3 class="card-title">No Frameworks</h3>
 <p class="card-desc">Built entirely with vanilla HTML, CSS, and JS for maximum performance.</p>
 </div>
 <div class="card-action">
 <button class="btn btn-glass">Learn More</button>
 </div>
 </div>
</div>
<!-- Interactive Section -->
 <div style="margin-top: 4rem; padding: 2rem; border-radius: 20px; border: 1px solid var(--border); background: rgba(255,255,255,0.02);">
 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
 <h3 style="font-size: 1.5rem;">Interactive Playground</h3>
 <div style="display: flex; gap: 10px;">
 <button class="btn btn-primary" onclick="toggleTheme()">Toggle Theme</button>
 </div>
 </div>
 <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
 <button class="btn btn-primary">Primary Action</button>
 <button class="btn btn-glass">Secondary Action</button>
 <button class="btn" style="border: 1px solid var(--border);">Outline</button>
 </div>
 <div style="margin-top: 20px; height: 10px; width: 100%; background: rgba(255,255,255,0.1); border-radius: 5px; overflow: hidden;">
 <div id="progress-bar" style="height: 100%; width: 0%; background: var(--accent); transition: width 0.5s ease;"></div>
 </div>
 <p style="margin-top: 10px; font-size: 0.8rem; color: var(--text-muted);">Click the button below to simulate loading.</p>
 <button class="btn btn-glass" style="margin-top: 10px;" onclick="simulateLoad()">Run Simulation</button>
 </div>
</section>
 </main>
<script>
 // --- Navigation Logic ---
 const navItems = document.querySelectorAll('.nav-item');
navItems.forEach(item => {
 item.addEventListener('click', (e) => {
 e.preventDefault();
 navItems.forEach(nav => nav.classList.remove('active'));
 item.classList.add('active');
 });
 });
 // --- Theme Toggle Logic ---
 let isDark = true;
function toggleTheme() {
 const root = document.documentElement;
 if(isDark) {
 // Switch to "Light" (simulated by changing vars slightly)
 root.style.setProperty('--bg-body', '#1a1d23');
 root.style.setProperty('--bg-card', '#22252b');
 isDark = false;
 } else {
 root.style.setProperty('--bg-body', '#0f1115');
 root.style.setProperty('--bg-card', '#16181d');
 isDark = true;
 }
 }
 // --- Simulation Logic ---
 function simulateLoad() {
 const bar = document.getElementById('progress-bar');
 bar.style.width = '0%';
setTimeout(() => { bar.style.width = '30%'; }, 100);
 setTimeout(() => { bar.style.width = '70%'; }, 600);
 setTimeout(() => { bar.style.width = '100%'; }, 1200);
// Reset after 2 seconds
 setTimeout(() => { bar.style.width = '0%'; }, 2500);
 }
 // --- Card Hover 3D Effect (Optional Enhancement) ---
 const cards = document.querySelectorAll('.card');
cards.forEach(card => {
 card.addEventListener('mousemove', (e) => {
 const x = e.clientX - card.getBoundingClientRect().left;
 const y = e.clientY - card.getBoundingClientRect().top;
// subtle gradient movement
 card.style.background = `radial-gradient(circle at ${x}px ${y}px, rgba(255,255,255,0.05), var(--bg-card))`;
 });
card.addEventListener('mouseleave', () => {
 card.style.background = 'var(--bg-card)';
 });
 });
 </script>
</body>
</html>