Metehan

7 Metehan

Ouvrir dans l'éditeur Publiez votre code

Recommandé

18 April 2025

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EcoSync | Intelligent Productivity</title>
    
    <script src="https://unpkg.com/@phosphor-icons/web"></script>
    
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <style>
        /* =========================================
           DESIGN SYSTEM & VARIABLES
           ========================================= */
        :root {
            /* Color Palette - Nature x Tech */
            --bg-base: #f4f7f4;
            --bg-glass: rgba(255, 255, 255, 0.65);
            --bg-glass-dark: rgba(15, 23, 15, 0.85);
            --bg-glass-hover: rgba(255, 255, 255, 0.85);
            
            --accent-neon: #c4ff00; /* Vibrant Lime */
            --accent-green-light: #e6ffb3;
            --accent-forest: #143623;
            --accent-emerald: #059669;
            
            --text-main: #111827;
            --text-muted: #6b7280;
            --text-light: #f9fafb;
            --text-dark-muted: #9ca3af;

--border-light: rgba(255, 255, 255, 0.6);
            --border-dark: rgba(255, 255, 255, 0.1);
            
            /* Shadows & Effects */
            --shadow-soft: 0 10px 40px -10px rgba(0,0,0,0.05);
            --shadow-glow: 0 0 30px rgba(196, 255, 0, 0.3);
            --blur-md: blur(16px);
            --blur-lg: blur(24px);

/* Typography */
            --font-main: 'Plus Jakarta Sans', sans-serif;
            
            /* Animation */
            --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

/* =========================================
           GLOBAL RESET & TYPOGRAPHY
           ========================================= */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: var(--font-main);
            background-color: var(--bg-base);
            color: var(--text-main);
            overflow-x: hidden;
            scroll-behavior: smooth;
            /* Custom Scrollbar */
            &::-webkit-scrollbar { width: 8px; }
            &::-webkit-scrollbar-track { background: var(--bg-base); }
            &::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
            /* Hide default cursor to use custom one */
            cursor: none; 
        }

a, button, input { font-family: inherit; }
        a { text-decoration: none; color: inherit; cursor: none; }
        button { border: none; background: none; cursor: none; outline: none; }
        ul { list-style: none; }

/* =========================================
           CUSTOM CURSOR
           ========================================= */
        #cursor-dot, #cursor-follower {
            position: fixed;
            top: 0; left: 0;
            pointer-events: none;
            border-radius: 50%;
            z-index: 9999;
            transform: translate(-50%, -50%);
        }
        #cursor-dot {
            width: 8px; height: 8px;
            background: var(--accent-forest);
            transition: width 0.2s, height 0.2s;
        }
        #cursor-follower {
            width: 40px; height: 40px;
            border: 1px solid var(--accent-emerald);
            transition: transform 0.1s linear, width 0.2s, height 0.2s, background 0.2s;
        }
        body:hover #cursor-dot { opacity: 1; }
        
        /* Interactive State for Cursor */
        .cursor-hover #cursor-follower {
            width: 60px; height: 60px;
            background: rgba(196, 255, 0, 0.1);
            border-color: var(--accent-neon);
            mix-blend-mode: multiply;
        }

/* =========================================
           UTILITY CLASSES (Glassmorphism)
           ========================================= */
        .glass-panel {
            background: var(--bg-glass);
            backdrop-filter: var(--blur-md);
            -webkit-backdrop-filter: var(--blur-md);
            border: 1px solid var(--border-light);
            border-radius: 24px;
            box-shadow: var(--shadow-soft);
        }
        .glass-panel-dark {
            background: var(--bg-glass-dark);
            backdrop-filter: var(--blur-lg);
            -webkit-backdrop-filter: var(--blur-lg);
            border: 1px solid var(--border-dark);
            border-radius: 24px;
            color: var(--text-light);
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        }

/* Background Ambient Blobs */
        .ambient-blob {
            position: fixed;
            border-radius: 50%;
            filter: blur(100px);
            z-index: -1;
            opacity: 0.6;
            animation: floatBlob 20s infinite alternate ease-in-out;
        }
        .blob-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: rgba(196, 255, 0, 0.15); }
        .blob-2 { bottom: -20%; right: -10%; width: 60vw; height: 60vw; background: rgba(5, 150, 105, 0.1); animation-delay: -10s; }

@keyframes floatBlob {
            0% { transform: translate(0, 0) scale(1); }
            100% { transform: translate(10%, 10%) scale(1.1); }
        }

/* =========================================
           1. HERO SECTION
           ========================================= */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            padding: 2rem;
            text-align: center;
            overflow: hidden;
        }

/* Abstract 3D Organic Shape (CSS approximation) */
        .hero-orb-container {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 600px; height: 600px;
            z-index: -1;
            perspective: 1000px;
        }
        .hero-orb {
            width: 100%; height: 100%;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, #fff 0%, var(--accent-neon) 20%, var(--accent-emerald) 60%, var(--accent-forest) 100%);
            box-shadow: 0 0 100px rgba(5, 150, 105, 0.4), inset -20px -20px 60px rgba(0,0,0,0.3);
            animation: spinOrb 25s linear infinite;
            opacity: 0.8;
            filter: blur(2px);
        }
        @keyframes spinOrb {
            0% { transform: rotateX(10deg) rotateY(0deg) scale(1); }
            50% { transform: rotateX(-10deg) rotateY(180deg) scale(1.05); }
            100% { transform: rotateX(10deg) rotateY(360deg) scale(1); }
        }

.hero-content {
            max-width: 800px;
            z-index: 10;
        }
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: rgba(255,255,255,0.8);
            backdrop-filter: blur(10px);
            border-radius: 30px;
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--accent-forest);
            margin-bottom: 2rem;
            border: 1px solid rgba(255,255,255,1);
        }
        .hero h1 {
            font-size: clamp(3rem, 6vw, 5rem);
            font-weight: 800;
            line-height: 1.1;
            letter-spacing: -0.03em;
            margin-bottom: 1.5rem;
            background: linear-gradient(135deg, var(--accent-forest) 0%, #000 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .hero p {
            font-size: clamp(1.1rem, 2vw, 1.25rem);
            color: var(--text-muted);
            margin-bottom: 3rem;
            line-height: 1.6;
            max-width: 600px;
            margin-inline: auto;
        }
        .hero-cta {
            display: flex;
            gap: 1rem;
            justify-content: center;
        }
        .btn-primary {
            background: var(--text-main);
            color: #fff;
            padding: 1rem 2.5rem;
            border-radius: 30px;
            font-weight: 600;
            font-size: 1rem;
            transition: var(--transition-smooth);
            display: flex; align-items: center; gap: 8px;
        }
        .btn-primary:hover {
            background: var(--accent-neon);
            color: var(--accent-forest);
            transform: translateY(-2px);
            box-shadow: var(--shadow-glow);
        }
        .btn-secondary {
            background: var(--bg-glass);
            backdrop-filter: var(--blur-md);
            border: 1px solid var(--border-light);
            color: var(--text-main);
            padding: 1rem 2.5rem;
            border-radius: 30px;
            font-weight: 600;
            transition: var(--transition-smooth);
        }
        .btn-secondary:hover { background: rgba(255,255,255,0.9); transform: translateY(-2px); }

/* Scroll indicator */
        .scroll-indicator {
            position: absolute;
            bottom: 40px;
            left: 50%; transform: translateX(-50%);
            display: flex; flex-direction: column; align-items: center; gap: 10px;
            color: var(--text-muted);
            font-size: 0.875rem;
            opacity: 0.7;
            animation: bounce 2s infinite;
        }
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
            40% { transform: translateY(-10px) translateX(-50%); }
            60% { transform: translateY(-5px) translateX(-50%); }
        }

/* =========================================
           2. DASHBOARD SECTION (Inspired by Image 1)
           ========================================= */
        .dashboard-container {
            padding: 4rem 2rem;
            max-width: 1600px;
            margin: 0 auto;
        }
        .dash-layout {
            display: grid;
            grid-template-columns: 240px 1fr;
            gap: 2rem;
            height: 90vh;
            min-height: 800px;
        }

/* Sidebar */
        .sidebar {
            padding: 2rem 1rem;
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }
        .logo {
            display: flex; align-items: center; gap: 12px;
            font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em;
        }
        .logo i { font-size: 1.5rem; color: var(--accent-emerald); }
        .nav-menu { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
        .nav-item {
            display: flex; align-items: center; gap: 12px;
            padding: 12px 16px;
            border-radius: 16px;
            color: var(--text-muted);
            font-weight: 500;
            transition: var(--transition-smooth);
        }
        .nav-item i { font-size: 1.25rem; }
        .nav-item.active, .nav-item:hover {
            background: rgba(255,255,255,0.8);
            color: var(--text-main);
            box-shadow: 0 4px 15px rgba(0,0,0,0.02);
        }
        .nav-item.active { position: relative; }
        .nav-item.active::before {
            content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
            width: 4px; height: 60%; background: var(--accent-emerald); border-radius: 0 4px 4px 0;
        }

/* Main Content Area */
        .main-panel {
            display: flex; flex-direction: column; gap: 1.5rem;
        }
        
        /* Top Navigation */
        .top-nav {
            display: flex; justify-content: space-between; align-items: center;
            padding: 1rem 1.5rem;
            border-radius: 20px;
        }
        .search-bar {
            display: flex; align-items: center; gap: 10px;
            background: rgba(255,255,255,0.5);
            padding: 10px 20px; border-radius: 30px; width: 300px;
            border: 1px solid var(--border-light);
        }
        .search-bar input {
            border: none; background: none; outline: none; width: 100%;
            font-size: 0.9rem; color: var(--text-main);
        }
        .top-actions { display: flex; align-items: center; gap: 1rem; }
        .icon-btn {
            width: 40px; height: 40px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            background: #fff; border: 1px solid var(--border-light);
            font-size: 1.2rem; transition: all 0.2s;
        }
        .icon-btn:hover { background: var(--accent-neon); color: var(--accent-forest); }
        .user-profile {
            display: flex; align-items: center; gap: 10px; padding-left: 10px; border-left: 1px solid rgba(0,0,0,0.1);
        }
        .avatar { width: 40px; height: 40px; border-radius: 50%; background: #ddd; background-image: url('https://i.pravatar.cc/150?img=32'); background-size: cover; }
        
        /* Dashboard Grid Layout */
        .dash-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr) 300px;
            grid-template-rows: auto auto 1fr;
            gap: 1.5rem;
            flex: 1;
        }

/* Hero KPI Card (Dark) */
        .card-kpi-main {
            grid-column: 1 / 4; grid-row: 1;
            padding: 2rem;
            display: flex; flex-direction: column; justify-content: space-between;
            position: relative; overflow: hidden;
        }
        /* Sub-glass effect inside dark card */
        .card-kpi-main::before {
            content: ''; position: absolute; top: -50%; right: -10%;
            width: 300px; height: 300px; background: radial-gradient(circle, rgba(196,255,0,0.15), transparent 70%);
            border-radius: 50%; pointer-events: none;
        }
        .kpi-header h2 { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; }
        .kpi-header p { color: var(--text-dark-muted); font-size: 0.9rem; }
        
        .kpi-stats-grid {
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem;
        }
        .stat-box {
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
            padding: 1.5rem; border-radius: 16px;
        }
        .stat-title { color: var(--text-dark-muted); font-size: 0.85rem; display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
        .stat-value { font-size: 1.8rem; font-weight: 700; }
        .stat-trend { color: var(--accent-neon); font-size: 0.85rem; margin-left: 10px; }

/* AI Assistant Panel (Right Sidebar) */
        .card-ai {
            grid-column: 4; grid-row: 1 / 4;
            padding: 2rem;
            display: flex; flex-direction: column; align-items: center; text-align: center;
        }
        .ai-header {
            width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;
        }
        /* The glowing AI orb */
        .ai-orb-display {
            width: 160px; height: 160px; border-radius: 50%;
            background: radial-gradient(circle at 35% 35%, #fff 0%, var(--accent-neon) 25%, #0a2e18 70%, #000 100%);
            box-shadow: 0 0 50px rgba(196, 255, 0, 0.2), inset -10px -10px 20px rgba(0,0,0,0.5);
            margin-bottom: 2rem;
            animation: floatOrb 4s ease-in-out infinite alternate;
        }
        @keyframes floatOrb {
            0% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 20px rgba(196, 255, 0, 0.3)); }
            100% { transform: translateY(-10px) scale(1.02); filter: drop-shadow(0 0 40px rgba(196, 255, 0, 0.5)); }
        }
        .ai-prompt { font-size: 1.1rem; font-weight: 500; margin-bottom: 2rem; }
        .ai-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-bottom: auto;}
        .btn-ai-action {
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
            color: #fff; padding: 12px; border-radius: 12px; font-size: 0.85rem;
            display: flex; flex-direction: column; align-items: center; gap: 8px; transition: 0.3s;
        }
        .btn-ai-action:hover { background: rgba(255,255,255,0.1); border-color: var(--accent-neon); color: var(--accent-neon); }
        .ai-input-wrapper {
            width: 100%; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 30px; padding: 5px; display: flex; align-items: center; margin-top: 2rem;
        }
        .ai-input-wrapper input {
            flex: 1; background: none; border: none; color: #fff; padding: 10px 15px; outline: none;
        }
        .ai-send {
            width: 35px; height: 35px; border-radius: 50%; background: var(--text-light); color: #000;
            display: flex; justify-content: center; align-items: center; cursor: none; transition: 0.3s;
        }
        .ai-send:hover { background: var(--accent-neon); }

/* Chart Cards */
        .card-chart-1, .card-chart-2 {
            grid-row: 2; padding: 1.5rem; display: flex; flex-direction: column;
        }
        .card-chart-1 { grid-column: 1 / 2; }
        .card-chart-2 { grid-column: 2 / 4; background: linear-gradient(135deg, var(--accent-green-light) 0%, #d8f5a2 100%); border-color: rgba(255,255,255,0.8); }

.chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; font-weight: 600; }
        
        /* CSS Donut Chart */
        .donut-container { display: flex; align-items: center; gap: 2rem; margin-top: 1rem; }
        .donut-chart {
            width: 120px; height: 120px; border-radius: 50%;
            background: conic-gradient(var(--accent-emerald) 0% 65%, #cbd5e1 65% 100%);
            position: relative;
            display: flex; justify-content: center; align-items: center;
        }
        .donut-inner {
            width: 80px; height: 80px; background: var(--bg-glass); border-radius: 50%;
            backdrop-filter: blur(10px); display: flex; justify-content: center; align-items: center;
            font-weight: 700; font-size: 1.2rem; box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
        }
        .donut-legend { flex: 1; }
        .legend-item { display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; margin-bottom: 8px; }
        .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px; }

/* CSS Bar Chart */
        .bar-chart-container { display: flex; flex-direction: column; gap: 15px; margin-top: 1rem; height: 100%; justify-content: center;}
        .bar-row { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; font-weight: 500;}
        .bar-label { width: 80px; }
        .bar-track { flex: 1; height: 12px; background: rgba(255,255,255,0.5); border-radius: 10px; overflow: hidden; position: relative;}
        .bar-fill { height: 100%; background: var(--text-main); border-radius: 10px; width: 0; transition: width 1s ease-out;}
        .card-chart-2 .bar-fill { background: var(--accent-forest); }
        .bar-value { width: 40px; text-align: right; }

/* Table Card */
        .card-table {
            grid-column: 1 / 4; grid-row: 3; padding: 1.5rem; overflow: hidden; display: flex; flex-direction: column;
        }
        .table-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; font-weight: 600; }
        .data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.9rem; }
        .data-table th { padding: 12px 10px; color: var(--text-muted); font-weight: 500; border-bottom: 1px solid rgba(0,0,0,0.05); }
        .data-table td { padding: 16px 10px; border-bottom: 1px solid rgba(0,0,0,0.03); vertical-align: middle; }
        .data-table tr:last-child td { border-bottom: none; }
        .client-info { display: flex; align-items: center; gap: 12px; font-weight: 600; }
        .client-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-emerald); display: flex; justify-content: center; align-items: center; color: #fff; font-size: 0.8rem; }
        .status-badge { padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
        .status-high { background: rgba(196, 255, 0, 0.3); color: var(--accent-forest); }
        .progress-mini { width: 60px; height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden;}
        .progress-mini-fill { height: 100%; background: var(--accent-emerald); }

/* =========================================
           3. INTERACTIVE CAROUSEL SECTION
           ========================================= */
        .carousel-section {
            min-height: 100vh;
            padding: 4rem 0;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            overflow: hidden;
            position: relative;
        }
        .carousel-header {
            text-align: center; margin-bottom: 4rem; z-index: 10;
        }
        .carousel-header h2 { font-size: 2.5rem; margin-bottom: 1rem; }
        .carousel-header p { color: var(--text-muted); }

.carousel-container {
            width: 100vw;
            height: 400px;
            position: relative;
            perspective: 1200px;
            display: flex; justify-content: center; align-items: center;
        }
        .carousel-track {
            position: absolute;
            width: 100%; height: 100%;
            transform-style: preserve-3d;
            display: flex; justify-content: center; align-items: center;
        }
        .carousel-card {
            position: absolute;
            width: 320px; height: 420px;
            border-radius: 24px;
            padding: 2rem;
            display: flex; flex-direction: column; justify-content: space-between;
            transition: opacity 0.3s;
            /* Default styles overridden by JS inline styles */
            background: rgba(255,255,255,0.8);
            backdrop-filter: var(--blur-md);
            border: 1px solid var(--border-light);
            box-shadow: var(--shadow-soft);
            will-change: transform, opacity;
        }
        /* Styling specific carousel cards based on index via JS or nth-child */
        .carousel-card[data-index="0"] { background: linear-gradient(145deg, #ffffff, #e6ffb3); }
        .carousel-card[data-index="1"] { background: linear-gradient(145deg, var(--bg-glass-dark), #0a1f12); color: white; }
        .carousel-card[data-index="1"] .card-desc { color: var(--text-dark-muted); }
        .carousel-card[data-index="2"] { background: linear-gradient(145deg, #ffffff, #d1fae5); }
        .carousel-card[data-index="3"] { background: linear-gradient(145deg, #ffffff, #f3f4f6); }
        
        .c-card-icon {
            width: 60px; height: 60px; border-radius: 16px; background: rgba(0,0,0,0.05);
            display: flex; justify-content: center; align-items: center; font-size: 2rem;
            margin-bottom: 1.5rem;
        }
        .carousel-card[data-index="1"] .c-card-icon { background: rgba(255,255,255,0.1); color: var(--accent-neon); }
        
        .c-card-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; }
        .card-desc { color: var(--text-muted); font-size: 0.95rem; line-height: 1.5; flex: 1;}
        .c-card-btn {
            align-self: flex-start; margin-top: 1rem;
            display: flex; align-items: center; gap: 8px; font-weight: 600;
            transition: 0.3s;
        }
        .c-card-btn i { transition: transform 0.3s; }
        .carousel-card.active .c-card-btn:hover i { transform: translateX(5px); }

/* Carousel controls */
        .carousel-controls {
            margin-top: 3rem; display: flex; gap: 1rem; z-index: 10;
        }
        .ctrl-btn {
            width: 50px; height: 50px; border-radius: 50%;
            background: var(--bg-glass); backdrop-filter: var(--blur-md); border: 1px solid var(--border-light);
            display: flex; justify-content: center; align-items: center; font-size: 1.2rem;
            transition: 0.3s; box-shadow: var(--shadow-soft);
        }
        .ctrl-btn:hover { background: #fff; transform: scale(1.1); }

/* =========================================
           4. FEATURE MODAL (Overlay)
           ========================================= */
        .modal-overlay {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: rgba(244, 247, 244, 0.4);
            backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            z-index: 9000; display: flex; justify-content: center; align-items: center;
            opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
        }
        .modal-overlay.active { opacity: 1; pointer-events: all; }
        
        .modal-content {
            width: 90%; max-width: 600px;
            transform: translateY(30px) scale(0.95); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            padding: 3rem; position: relative;
        }
        .modal-overlay.active .modal-content { transform: translateY(0) scale(1); }
        
        .close-modal {
            position: absolute; top: 20px; right: 20px;
            width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,0.05);
            display: flex; justify-content: center; align-items: center; font-size: 1.2rem; transition: 0.3s;
        }
        .close-modal:hover { background: rgba(0,0,0,0.1); transform: rotate(90deg); }
        
        .modal-body h3 { font-size: 2rem; margin-bottom: 1rem; }
        .modal-body p { color: var(--text-muted); line-height: 1.6; margin-bottom: 2rem; }
        .feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
        .f-item { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.5); padding: 10px 15px; border-radius: 12px; }
        .f-item i { color: var(--accent-emerald); }

/* =========================================
           RESPONSIVE DESIGN
           ========================================= */
        @media (max-width: 1200px) {
            .dash-layout { grid-template-columns: 80px 1fr; }
            .sidebar .logo span, .sidebar .nav-item span { display: none; }
            .sidebar .nav-item { justify-content: center; padding: 12px; }
            .dash-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto auto; }
            .card-kpi-main { grid-column: 1 / 3; }
            .card-ai { grid-column: 1 / 3; grid-row: 2; flex-direction: row; justify-content: space-between; padding: 1.5rem;}
            .ai-orb-display { width: 100px; height: 100px; margin-bottom: 0; margin-right: 2rem;}
            .card-chart-1, .card-chart-2 { grid-column: span 1; grid-row: 3; }
            .card-table { grid-column: 1 / 3; grid-row: 4; }
        }
        @media (max-width: 768px) {
            .hero h1 { font-size: 2.5rem; }
            .dash-layout { display: flex; flex-direction: column; height: auto; }
            .sidebar { flex-direction: row; justify-content: space-around; padding: 1rem; position: fixed; bottom: 0; width: 100%; z-index: 100; background: var(--bg-glass); backdrop-filter: var(--blur-md); border-top: 1px solid var(--border-light); }
            .sidebar .logo { display: none; }
            .top-nav { flex-direction: column; gap: 1rem; align-items: flex-start; }
            .search-bar { width: 100%; }
            .dash-grid { grid-template-columns: 1fr; }
            .card-kpi-main, .card-ai, .card-chart-1, .card-chart-2, .card-table { grid-column: 1 / 2; }
            .card-chart-1, .card-chart-2 { grid-row: auto; }
            .kpi-stats-grid { grid-template-columns: 1fr; }
            .card-ai { flex-direction: column; }
            .ai-orb-display { margin-right: 0; margin-bottom: 1.5rem; }
            .carousel-card { width: 260px; height: 360px; }
            body { padding-bottom: 80px; } /* Space for mobile nav */
        }
        
        /* Utility for animation */
        .fade-up { opacity: 0; transform: translateY(30px); transition: 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
        .fade-up.in-view { opacity: 1; transform: translateY(0); }
    </style>
</head>
<body>

<div id="cursor-dot"></div>
    <div id="cursor-follower"></div>

<div class="ambient-blob blob-1"></div>
    <div class="ambient-blob blob-2"></div>

<main class="app-container">
        
        
        <section class="hero">
            <div class="hero-orb-container">
                <div class="hero-orb"></div>
            </div>
            <div class="hero-content fade-up">
                <div class="hero-badge cursor-interact">
                    <i class="ph-fill ph-leaf"></i> Eco-System Live
                </div>
                <h1>Nature Meets<br>Intelligent Productivity</h1>
                <p>An ultra-modern, AI-powered enterprise workspace designed with organic principles. Experience analytics that feel alive.</p>
                <div class="hero-cta">
                    <button class="btn-primary cursor-interact" onclick="document.getElementById('dashboard').scrollIntoView({behavior: 'smooth'})">
                        Start Dashboard <i class="ph-bold ph-arrow-right"></i>
                    </button>
                    <button class="btn-secondary cursor-interact" onclick="document.getElementById('carousel').scrollIntoView({behavior: 'smooth'})">
                        Explore Features
                    </button>
                </div>
            </div>
            <div class="scroll-indicator">
                <span>Scroll to explore</span>
                <i class="ph-bold ph-arrow-down"></i>
            </div>
        </section>

<section id="dashboard" class="dashboard-container">
            <div class="glass-panel dash-layout">
                
                
                <aside class="sidebar">
                    <div class="logo cursor-interact">
                        <i class="ph-fill ph-hexagon"></i>
                        <span>EcoSync OS</span>
                    </div>
                    <ul class="nav-menu">
                        <li class="nav-item active cursor-interact"><i class="ph ph-squares-four"></i> <span>Dashboard</span></li>
                        <li class="nav-item cursor-interact"><i class="ph ph-chart-line-up"></i> <span>Analytics</span></li>
                        <li class="nav-item cursor-interact"><i class="ph ph-target"></i> <span>Campaigns</span></li>
                        <li class="nav-item cursor-interact"><i class="ph ph-users"></i> <span>Clients</span></li>
                        <li class="nav-item cursor-interact"><i class="ph ph-folder-notch"></i> <span>Reports</span></li>
                    </ul>
                    <div class="nav-menu" style="flex:0">
                        <li class="nav-item cursor-interact"><i class="ph ph-gear"></i> <span>Settings</span></li>
                    </div>
                </aside>

<div class="main-panel">
                    
                    
                    <header class="top-nav glass-panel fade-up">
                        <div class="search-bar cursor-interact">
                            <i class="ph ph-magnifying-glass text-muted"></i>
                            <input type="text" placeholder="Search analytics, clients or commands...">
                            <div style="background: rgba(0,0,0,0.05); padding: 2px 6px; border-radius: 4px; font-size: 0.7rem; color: gray;">⌘ K</div>
                        </div>
                        <div class="top-actions">
                            <button class="icon-btn cursor-interact"><i class="ph ph-bell"></i></button>
                            <button class="icon-btn cursor-interact"><i class="ph ph-moon"></i></button>
                            <div class="user-profile cursor-interact">
                                <div class="avatar"></div>
                                <div style="display: flex; flex-direction: column; line-height: 1.2;">
                                    <span style="font-weight: 600; font-size: 0.9rem;">Elena R.</span>
                                    <span style="font-size: 0.75rem; color: var(--text-muted);">Admin</span>
                                </div>
                                <i class="ph-bold ph-caret-down" style="font-size: 0.8rem; margin-left: 5px;"></i>
                            </div>
                        </div>
                    </header>

<div class="dash-grid">
                        
                        
                        <div class="glass-panel-dark card-kpi-main fade-up" style="transition-delay: 0.1s;">
                            <div class="kpi-header">
                                <h2>Smart Eco-Sales Distribution</h2>
                                <p>AI enhanced metrics showing growth in organic leads and revenue.</p>
                            </div>
                            <div class="kpi-stats-grid">
                                <div class="stat-box">
                                    <div class="stat-title"><i class="ph-fill ph-wallet"></i> Total Income</div>
                                    <div class="stat-value">$84,500<span style="font-size:1rem;">.00</span></div>
                                </div>
                                <div class="stat-box">
                                    <div class="stat-title"><i class="ph-fill ph-trend-up"></i> ROI Growth</div>
                                    <div class="stat-value">+412% <span class="stat-trend"><i class="ph-bold ph-arrow-up-right"></i></span></div>
                                </div>
                                <div class="stat-box">
                                    <div class="stat-title"><i class="ph-fill ph-users-three"></i> Active Users</div>
                                    <div class="stat-value">14,209</div>
                                </div>
                            </div>
                        </div>

<div class="glass-panel-dark card-ai fade-up" style="transition-delay: 0.2s;">
                            <div class="ai-header">
                                <span style="font-size: 0.9rem; color: var(--text-dark-muted);"><i class="ph-fill ph-sparkle"></i> Sync AI</span>
                                <i class="ph ph-dots-three text-muted"></i>
                            </div>
                            
                            <div class="ai-orb-display cursor-interact"></div>
                            
                            <div class="ai-prompt">How can I optimize your workflow today?</div>
                            
                            <div class="ai-actions">
                                <button class="btn-ai-action cursor-interact">
                                    <i class="ph-fill ph-chart-pie-slice" style="font-size: 1.2rem;"></i> Run Analysis
                                </button>
                                <button class="btn-ai-action cursor-interact">
                                    <i class="ph-fill ph-file-text" style="font-size: 1.2rem;"></i> Generate Report
                                </button>
                            </div>
                            
                            <div class="ai-input-wrapper cursor-interact">
                                <input type="text" placeholder="Ask Sync anything...">
                                <button class="ai-send"><i class="ph-bold ph-paper-plane-right"></i></button>
                            </div>
                        </div>

<div class="glass-panel card-chart-1 fade-up" style="transition-delay: 0.3s;">
                            <div class="chart-header">
                                <span>Sales Source</span>
                                <span style="font-size: 0.8rem; color: var(--text-muted); background: #fff; padding: 4px 10px; border-radius: 20px;">This Month <i class="ph-bold ph-caret-down"></i></span>
                            </div>
                            <div class="donut-container">
                                <div class="donut-chart cursor-interact">
                                    <div class="donut-inner">$42k</div>
                                </div>
                                <div class="donut-legend">
                                    <div class="legend-item"><span style="display:flex; align-items:center;"><span class="dot" style="background: var(--accent-emerald);"></span> Organic</span> <b>65%</b></div>
                                    <div class="legend-item"><span style="display:flex; align-items:center;"><span class="dot" style="background: #cbd5e1;"></span> Direct</span> <b>35%</b></div>
                                </div>
                            </div>
                        </div>

<div class="glass-panel card-chart-2 fade-up" style="transition-delay: 0.4s;">
                            <div class="chart-header">
                                <span>Deal Pipeline</span>
                                <i class="ph-bold ph-arrows-out-simple cursor-interact"></i>
                            </div>
                            <div class="bar-chart-container">
                                <div class="bar-row">
                                    <div class="bar-label">Discovery</div>
                                    <div class="bar-track"><div class="bar-fill" style="width: 80%;"></div></div>
                                    <div class="bar-value">8k</div>
                                </div>
                                <div class="bar-row">
                                    <div class="bar-label">Proposal</div>
                                    <div class="bar-track"><div class="bar-fill" style="width: 50%;"></div></div>
                                    <div class="bar-value">5k</div>
                                </div>
                                <div class="bar-row">
                                    <div class="bar-label">Won</div>
                                    <div class="bar-track"><div class="bar-fill" style="width: 90%;"></div></div>
                                    <div class="bar-value">9k</div>
                                </div>
                            </div>
                        </div>

<div class="glass-panel card-table fade-up" style="transition-delay: 0.5s;">
                            <div class="table-header">
                                <span><i class="ph-fill ph-star" style="color: #fbbf24; margin-right: 8px;"></i> Top Opportunities</span>
                                <i class="ph ph-funnel cursor-interact" style="color: var(--text-muted); font-size: 1.2rem;"></i>
                            </div>
                            <table class="data-table">
                                <thead>
                                    <tr>
                                        <th>Client Name</th>
                                        <th>Region</th>
                                        <th>Eco-Score</th>
                                        <th>Pipeline Stage</th>
                                        <th>Est. Value</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="cursor-interact">
                                        <td>
                                            <div class="client-info">
                                                <div class="client-avatar">V</div>
                                                Verdant Tech
                                            </div>
                                        </td>
                                        <td>Nordics</td>
                                        <td><span class="status-badge status-high">92% Match</span></td>
                                        <td>
                                            <div style="display:flex; align-items:center; gap:10px;">
                                                <div class="progress-mini"><div class="progress-mini-fill" style="width: 75%;"></div></div>
                                                <span style="font-size:0.8rem; color:var(--text-muted);">Proposal</span>
                                            </div>
                                        </td>
                                        <td style="font-weight: 600;">$125,000</td>
                                    </tr>
                                    <tr class="cursor-interact">
                                        <td>
                                            <div class="client-info">
                                                <div class="client-avatar" style="background:#3b82f6;">O</div>
                                                Oceanic Ltd.
                                            </div>
                                        </td>
                                        <td>USA</td>
                                        <td><span class="status-badge status-high" style="background: rgba(59, 130, 246, 0.1); color: #2563eb;">88% Match</span></td>
                                        <td>
                                            <div style="display:flex; align-items:center; gap:10px;">
                                                <div class="progress-mini"><div class="progress-mini-fill" style="width: 40%; background: #3b82f6;"></div></div>
                                                <span style="font-size:0.8rem; color:var(--text-muted);">Discovery</span>
                                            </div>
                                        </td>
                                        <td style="font-weight: 600;">$84,200</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

</div>
                </div>
            </div>
        </section>

<section id="carousel" class="carousel-section">
            <div class="carousel-header fade-up">
                <h2>Explore Modules</h2>
                <p>Drag or scroll to navigate our ecosystem.</p>
            </div>
            
            <div class="carousel-container cursor-interact" id="carousel-drag-area">
                <div class="carousel-track" id="carousel-track">
                    
                    <div class="carousel-card glass-panel" data-index="0">
                        <div>
                            <div class="c-card-icon"><i class="ph-fill ph-leaf"></i></div>
                            <div class="c-card-title">Eco Tracking</div>
                            <div class="card-desc">Monitor your company's carbon footprint and organic growth metrics in real-time.</div>
                        </div>
                        <button class="c-card-btn open-modal" data-modal="eco">Details <i class="ph-bold ph-arrow-right"></i></button>
                    </div>
                    <div class="carousel-card glass-panel-dark" data-index="1">
                        <div>
                            <div class="c-card-icon"><i class="ph-fill ph-sparkle"></i></div>
                            <div class="c-card-title">Sync AI</div>
                            <div class="card-desc">Advanced predictive models that suggest sustainable business decisions automatically.</div>
                        </div>
                        <button class="c-card-btn open-modal" data-modal="ai" style="color: var(--accent-neon);">Initialize <i class="ph-bold ph-arrow-right"></i></button>
                    </div>
                    <div class="carousel-card glass-panel" data-index="2">
                        <div>
                            <div class="c-card-icon"><i class="ph-fill ph-chart-polar"></i></div>
                            <div class="c-card-title">Deep Analytics</div>
                            <div class="card-desc">Visualize complex datasets with nature-inspired, fluid chart components.</div>
                        </div>
                        <button class="c-card-btn open-modal" data-modal="analytics">View Data <i class="ph-bold ph-arrow-right"></i></button>
                    </div>
                    <div class="carousel-card glass-panel" data-index="3">
                        <div>
                            <div class="c-card-icon"><i class="ph-fill ph-users-three"></i></div>
                            <div class="c-card-title">Team Harmony</div>
                            <div class="card-desc">Collaborate in a unified workspace designed to reduce digital fatigue.</div>
                        </div>
                        <button class="c-card-btn open-modal" data-modal="team">Connect <i class="ph-bold ph-arrow-right"></i></button>
                    </div>
                </div>
            </div>

</main>

<div class="modal-overlay" id="feature-modal">
        <div class="glass-panel modal-content">
            <button class="close-modal cursor-interact" id="close-modal"><i class="ph-bold ph-x"></i></button>
            <div class="modal-body">
                <h3 id="modal-title">Module Details</h3>
                <p id="modal-desc">Detailed view of the selected ecosystem module. This pane provides deep dive controls and configuration options.</p>
                <div class="feature-list">
                    <div class="f-item"><i class="ph-fill ph-check-circle"></i> Real-time Sync</div>
                    <div class="f-item"><i class="ph-fill ph-check-circle"></i> AI Prediction</div>
                    <div class="f-item"><i class="ph-fill ph-check-circle"></i> Export to PDF/CSV</div>
                    <div class="f-item"><i class="ph-fill ph-check-circle"></i> Cloud Backup</div>
                </div>
                <button class="btn-primary cursor-interact" style="margin-top: 2rem; width: 100%; justify-content: center;">
                    Activate Module
                </button>
            </div>
        </div>
    </div>

<script>
        document.addEventListener('DOMContentLoaded', () => {
            
            // 1. Custom Cursor Logic
            const cursorDot = document.getElementById('cursor-dot');
            const cursorFollower = document.getElementById('cursor-follower');
            let mouseX = window.innerWidth / 2;
            let mouseY = window.innerHeight / 2;
            let followerX = window.innerWidth / 2;
            let followerY = window.innerHeight / 2;

// Smooth lerp for follower
            function animateCursor() {
                followerX += (mouseX - followerX) * 0.15;
                followerY += (mouseY - followerY) * 0.15;
                cursorFollower.style.transform = `translate(${followerX}px, ${followerY}px)`;
                requestAnimationFrame(animateCursor);
            }
            animateCursor();

// Hover effects for interactive elements
            const interactables = document.querySelectorAll('.cursor-interact, a, button, input');
            interactables.forEach(el => {
                el.addEventListener('mouseenter', () => document.body.classList.add('cursor-hover'));
                el.addEventListener('mouseleave', () => document.body.classList.remove('cursor-hover'));
            });

// 2. 3D Interactive Carousel Logic
            const track = document.getElementById('carousel-track');
            const cards = Array.from(document.querySelectorAll('.carousel-card'));
            const numCards = cards.length;
            
            let currentProgress = 0; // Float representation of position
            let targetProgress = 0;
            let isDragging = false;
            let startX = 0;
            let startProgress = 0;

// Configuration for 3D effect
            const spacing = 220; // X distance between cards
            const zOffset = 150; // Z push back for non-active cards
            const scaleOffset = 0.85; // Scale for non-active cards

// Drag interactions
            const dragArea = document.getElementById('carousel-drag-area');

function handleDragStart(e) {
                isDragging = true;
                startX = e.type.includes('mouse') ? e.pageX : e.touches[0].clientX;
                startProgress = targetProgress;
                dragArea.style.cursor = 'none'; // Custom cursor takes over
            }

function handleDragMove(e) {
                if (!isDragging) return;
                const x = e.type.includes('mouse') ? e.pageX : e.touches[0].clientX;
                const walk = (x - startX) * 0.01; // Sensitivity
                targetProgress = startProgress - walk;
                
                // Clamp target progress
                targetProgress = Math.max(0, Math.min(numCards - 1, targetProgress));
            }

function handleDragEnd() {
                isDragging = false;
                // Snap to nearest integer
                targetProgress = Math.round(targetProgress);
            }

dragArea.addEventListener('mousedown', handleDragStart);
            window.addEventListener('mousemove', handleDragMove);
            window.addEventListener('mouseup', handleDragEnd);
            
            dragArea.addEventListener('touchstart', handleDragStart);
            window.addEventListener('touchmove', handleDragMove);
            window.addEventListener('touchend', handleDragEnd);

// Mouse wheel support
            dragArea.addEventListener('wheel', (e) => {
                e.preventDefault();
                targetProgress += Math.sign(e.deltaY) * 0.5;
                targetProgress = Math.max(0, Math.min(numCards - 1, targetProgress));
                // debounce snap
                clearTimeout(dragArea.wheelTimeout);
                dragArea.wheelTimeout = setTimeout(() => {
                    targetProgress = Math.round(targetProgress);
                }, 150);
            }, { passive: false });

// Button controls
            document.getElementById('btn-prev').addEventListener('click', () => {
                targetProgress = Math.max(0, Math.round(targetProgress) - 1);
            });
            document.getElementById('btn-next').addEventListener('click', () => {
                targetProgress = Math.min(numCards - 1, Math.round(targetProgress) + 1);
            });

// 3. Modal Overlay Logic
            const modal = document.getElementById('feature-modal');
            const closeBtn = document.getElementById('close-modal');
            const openBtns = document.querySelectorAll('.open-modal');
            const modalTitle = document.getElementById('modal-title');
            
            const modalData = {
                'eco': 'Eco Tracking Module',
                'ai': 'Sync AI Engine',
                'analytics': 'Deep Analytics View',
                'team': 'Team Harmony Workspace'
            };

openBtns.forEach(btn => {
                btn.addEventListener('click', (e) => {
                    const type = e.currentTarget.getAttribute('data-modal');
                    modalTitle.innerText = modalData[type] || 'Module Details';
                    modal.classList.add('active');
                });
            });

closeBtn.addEventListener('click', () => {
                modal.classList.remove('active');
            });

// Close modal on outside click
            modal.addEventListener('click', (e) => {
                if(e.target === modal) modal.classList.remove('active');
            });

// 4. Scroll Animations (Intersection Observer)
            const observerOptions = {
                root: null,
                rootMargin: '0px',
                threshold: 0.1
            };

document.querySelectorAll('.fade-up').forEach(el => {
                observer.observe(el);
            });
            
            // Initial animation for bar chart reset
            document.querySelectorAll('.bar-fill').forEach(el => el.style.width = '0');

});
    </script>
</body>
</html>

CSS