Project Gallery

Explore DashFlow Sidebar Dashboard - Enhanced Design in detail
1 /1
Use mouse wheel or pinch gesture to zoom on touch devices

Project Overview

DashFlow Sidebar Dashboard - Enhanced Design

Project Description

I'll enhance the dashboard with better visual design, more components, and improved functionality while maintaining the clean sidebar layout.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DashFlow Sidebar Dashboard</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

</head>
<body>
<!-- Overlay for mobile -->
<div class="overlay" id="overlay"></div>

<!-- SIDEBAR -->
<aside class="sidebar" id="sidebar">
    <div class="logo">
        <div class="logo-icon"><i class="fas fa-chart-pie"></i></div>
        <span>DashFlow</span>
    </div>

    <nav>
        <a href="#" class="active"><i class="fas fa-home"></i><span>Dashboard</span></a>
        <a href="#"><i class="fas fa-chart-bar"></i><span>Analytics</span></a>
        <a href="#"><i class="fas fa-file-alt"></i><span>Reports</span></a>
        <a href="#"><i class="fas fa-users"></i><span>Team</span></a>
        <a href="#"><i class="fas fa-calendar-alt"></i><span>Calendar</span></a>
        <a href="#"><i class="fas fa-cog"></i><span>Settings</span></a>
        <a href="#"><i class="fas fa-question-circle"></i><span>Help & Support</span></a>
    </nav>
    
    <div class="sidebar-footer">
        <div class="user-profile">
            <div class="user-avatar">RR</div>
            <div class="user-info">
                <h4>RK RANA</h4>
                <p>Administrator</p>
            </div>
        </div>
    </div>
</aside>

<!-- HEADER -->
<header class="header">
    <button class="menu-btn" id="toggleSidebar">
        <i class="fas fa-bars"></i>
    </button>

    <div class="header-center">
        <div class="search-box">
            <i class="fas fa-search"></i>
            <input type="text" placeholder="Search dashboard, reports, projects...">
        </div>
    </div>

    <div class="header-right">
        <button class="icon-btn" id="themeToggle">
            <i class="fas fa-moon"></i>
        </button>
        
        <button class="icon-btn">
            <i class="fas fa-bell"></i>
            <span class="notification-badge">3</span>
        </button>
        
        <button class="icon-btn">
            <i class="fas fa-envelope"></i>
            <span class="notification-badge">5</span>
        </button>
    </div>
</header>

<!-- MAIN CONTENT -->
<main class="main">
    <section class="welcome-section">
        <h1>Good Morning, RK RANA 👋</h1>
        <p>Welcome back! Here's what's happening with your projects today.</p>
    </section>

    <section class="stats">
        <div class="card">
            <div class="card-header">
                <div>
                    <h4>Total Revenue</h4>
                    <h2>$42,850</h2>
                </div>
                <div class="card-icon">
                    <i class="fas fa-dollar-sign"></i>
                </div>
            </div>
            <div class="card-change positive">
                <i class="fas fa-arrow-up"></i>
                <span>12.5% from last month</span>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <div>
                    <h4>Active Users</h4>
                    <h2>8,425</h2>
                </div>
                <div class="card-icon">
                    <i class="fas fa-users"></i>
                </div>
            </div>
            <div class="card-change positive">
                <i class="fas fa-arrow-up"></i>
                <span>8.2% from last week</span>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <div>
                    <h4>Orders</h4>
                    <h2>1,284</h2>
                </div>
                <div class="card-icon">
                    <i class="fas fa-shopping-cart"></i>
                </div>
            </div>
            <div class="card-change positive">
                <i class="fas fa-arrow-up"></i>
                <span>5.7% from yesterday</span>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <div>
                    <h4>Sessions</h4>
                    <h2>24,963</h2>
                </div>
                <div class="card-icon">
                    <i class="fas fa-eye"></i>
                </div>
            </div>
            <div class="card-change negative">
                <i class="fas fa-arrow-down"></i>
                <span>2.3% from last week</span>
            </div>
        </div>
    </section>

    <section class="data-section">
        <div class="chart-box">
            <div class="chart-header">
                <h3 class="chart-title">Revenue Analytics</h3>
                <div class="chart-period">
                    <button class="period-btn active">Week</button>
                    <button class="period-btn">Month</button>
                    <button class="period-btn">Year</button>
                </div>
            </div>
            <div class="chart-wrapper">
                <canvas id="revenueChart"></canvas>
            </div>
        </div>
        
        <div class="activity-box">
            <h3 class="activity-title">Recent Activity</h3>
            <div class="activity-list">
                <div class="activity-item">
                    <div class="activity-icon icon-user">
                        <i class="fas fa-user-plus"></i>
                    </div>
                    <div class="activity-info">
                        <h4>New User Registered</h4>
                        <p>John Doe joined the platform</p>
                    </div>
                    <div class="activity-time">5 min ago</div>
                </div>
                
                <div class="activity-item">
                    <div class="activity-icon icon-order">
                        <i class="fas fa-shopping-bag"></i>
                    </div>
                    <div class="activity-info">
                        <h4>Order #4251 Completed</h4>
                        <p>Payment status: Success</p>
                    </div>
                    <div class="activity-time">1 hour ago</div>
                </div>
                
                <div class="activity-item">
                    <div class="activity-icon icon-payment">
                        <i class="fas fa-credit-card"></i>
                    </div>
                    <div class="activity-info">
                        <h4>Payment Received</h4>
                        <p>$2,500 from Acme Inc.</p>
                    </div>
                    <div class="activity-time">3 hours ago</div>
                </div>
                
                <div class="activity-item">
                    <div class="activity-icon icon-user">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <div class="activity-info">
                        <h4>Report Generated</h4>
                        <p>Q3 Sales Report is ready</p>
                    </div>
                    <div class="activity-time">5 hours ago</div>
                </div>
            </div>
        </div>
    </section>

    <section class="projects-section">
        <div class="section-header">
            <h2 class="section-title">Active Projects</h2>
            <button class="btn-primary">
                <i class="fas fa-plus"></i> New Project
            </button>
        </div>
        
        <div class="projects-grid">
            <div class="project-card">
                <div class="project-header">
                    <div>
                        <h3 class="project-title">Website Redesign</h3>
                        <p class="project-desc">Complete overhaul of the company website with modern design and improved UX.</p>
                    </div>
                    <div class="card-icon" style="width:40px;height:40px;font-size:1rem;">
                        <i class="fas fa-palette"></i>
                    </div>
                </div>
                
                <div class="project-progress">
                    <div class="progress-info">
                        <span>Progress</span>
                        <span>75%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width:75%"></div>
                    </div>
                </div>
                
                <div class="project-team">
                    <div class="team-avatars">
                        <div class="team-avatar">JD</div>
                        <div class="team-avatar">AS</div>
                        <div class="team-avatar">MP</div>
                        <div class="team-avatar" style="background:#8b5cf6;">+2</div>
                    </div>
                    <div class="activity-time">Due in 2 weeks</div>
                </div>
            </div>
            
            <div class="project-card">
                <div class="project-header">
                    <div>
                        <h3 class="project-title">Mobile App Development</h3>
                        <p class="project-desc">Building a cross-platform mobile application for iOS and Android.</p>
                    </div>
                    <div class="card-icon" style="width:40px;height:40px;font-size:1rem;background:linear-gradient(135deg, #10b981, #34d399);">
                        <i class="fas fa-mobile-alt"></i>
                    </div>
                </div>
                
                <div class="project-progress">
                    <div class="progress-info">
                        <span>Progress</span>
                        <span>42%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width:42%"></div>
                    </div>
                </div>
                
                <div class="project-team">
                    <div class="team-avatars">
                        <div class="team-avatar">TL</div>
                        <div class="team-avatar">RK</div>
                        <div class="team-avatar" style="background:#f59e0b;">+3</div>
                    </div>
                    <div class="activity-time">Due in 1 month</div>
                </div>
            </div>
        </div>
    </section>
</main>   


</body>
</html>
CSS
<style>
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

:root{
    --primary:#6366f1;
    --primary-light:#a5b4fc;
    --primary-dark:#4f46e5;
    --secondary:#8b5cf6;
    --secondary-light:#c4b5fd;
    --success:#10b981;
    --warning:#f59e0b;
    --danger:#ef4444;
    --dark:#1f2937;
    --darker:#111827;
    --light:#f9fafb;
    --lighter:#f3f4f6;
    --gray:#6b7280;
    --gray-light:#9ca3af;
    --gray-lighter:#d1d5db;
    --radius:16px;
    --radius-sm:12px;
    --radius-md:20px;
    --radius-lg:24px;
    --transition:all .3s ease;
    --shadow:0 4px 20px rgba(0,0,0,.08);
    --shadow-lg:0 10px 40px rgba(0,0,0,.12);
    --gradient:linear-gradient(135deg, var(--primary), var(--secondary));
}

body{
    background:var(--light);
    color:var(--dark);
    transition:var(--transition);
    line-height:1.6;
}

body.dark-mode{
    background:var(--darker);
    color:#fff;
}

/* ================= SIDEBAR ================= */
.sidebar{
    position:fixed;
    top:0;
    left:0;
    width:280px;
    height:100vh;
    background:#fff;
    padding:24px;
    box-shadow:var(--shadow);
    transition:var(--transition);
    z-index:100;
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    overflow-x:hidden;
}

.dark-mode .sidebar{
    background:var(--dark);
    box-shadow:0 4px 20px rgba(0,0,0,.2);
}

.sidebar.collapsed{
    width:90px;
    padding:24px 12px;
}

.sidebar .logo{
    display:flex;
    align-items:center;
    gap:16px;
    font-size:1.6rem;
    font-weight:700;
    color:var(--primary);
    margin-bottom:40px;
    padding-bottom:20px;
    border-bottom:1px solid rgba(99,102,241,.1);
}

.sidebar.collapsed .logo span{
    opacity:0;
    width:0;
    transition:opacity .2s;
}

.logo-icon{
    width:44px;
    height:44px;
    border-radius:14px;
    background:var(--gradient);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    flex-shrink:0;
}

.sidebar nav{
    display:flex;
    flex-direction:column;
    gap:10px;
    flex-grow:1;
}

.sidebar a{
    display:flex;
    align-items:center;
    gap:16px;
    padding:14px 18px;
    border-radius:var(--radius-sm);
    text-decoration:none;
    color:var(--gray);
    transition:var(--transition);
    font-weight:500;
}

.sidebar a i{
    font-size:1.2rem;
    width:24px;
    text-align:center;
}

.sidebar a.active,
.sidebar a:hover{
    background:rgba(99,102,241,.1);
    color:var(--primary);
    transform:translateX(4px);
}

.sidebar a.active{
    background:var(--gradient);
    color:white;
    box-shadow:0 4px 12px rgba(99,102,241,.3);
}

.sidebar.collapsed a span{
    opacity:0;
    width:0;
    transition:opacity .2s;
}

.sidebar-footer{
    margin-top:auto;
    padding-top:20px;
    border-top:1px solid rgba(99,102,241,.1);
}

.user-profile{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px;
    border-radius:var(--radius-sm);
    background:rgba(99,102,241,.05);
}

.user-avatar{
    width:40px;
    height:40px;
    border-radius:50%;
    background:var(--gradient);
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-weight:600;
    flex-shrink:0;
}

.user-info h4{
    font-size:.95rem;
    font-weight:600;
    margin-bottom:2px;
}

.user-info p{
    font-size:.8rem;
    color:var(--gray-light);
}

.sidebar.collapsed .user-info{
    display:none;
}

/* ================= HEADER ================= */
.header{
    position:fixed;
    left:280px;
    top:0;
    right:0;
    height:80px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 32px;
    box-shadow:0 4px 20px rgba(0,0,0,.05);
    transition:var(--transition);
    z-index:90;
}

.dark-mode .header{
    background:var(--dark);
    box-shadow:0 4px 20px rgba(0,0,0,.2);
}

.sidebar.collapsed ~ .header{
    left:90px;
}

.menu-btn{
    background:none;
    border:none;
    font-size:1.4rem;
    cursor:pointer;
    color:var(--primary);
    width:44px;
    height:44px;
    border-radius:var(--radius-sm);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:var(--transition);
}

.menu-btn:hover{
    background:rgba(99,102,241,.1);
}

.header-center{
    display:flex;
    align-items:center;
    gap:16px;
    flex:1;
    max-width:600px;
    margin:0 32px;
}

.search-box{
    flex:1;
    position:relative;
}

.search-box input{
    width:100%;
    padding:12px 20px 12px 48px;
    border-radius:var(--radius);
    border:1px solid var(--gray-lighter);
    background:var(--lighter);
    color:var(--dark);
    font-size:.95rem;
    transition:var(--transition);
}

.dark-mode .search-box input{
    background:#374151;
    border-color:#4b5563;
    color:#fff;
}

.search-box i{
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    color:var(--gray-light);
}

.header-right{
    display:flex;
    align-items:center;
    gap:16px;
}

.icon-btn{
    width:44px;
    height:44px;
    border-radius:var(--radius-sm);
    background:rgba(99,102,241,.1);
    border:none;
    color:var(--primary);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.1rem;
    transition:var(--transition);
    position:relative;
}

.icon-btn:hover{
    background:rgba(99,102,241,.2);
    transform:translateY(-2px);
}

.notification-badge{
    position:absolute;
    top:-4px;
    right:-4px;
    background:var(--danger);
    color:white;
    font-size:.7rem;
    width:18px;
    height:18px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* ================= MAIN ================= */
.main{
    margin-left:280px;
    padding:100px 32px 32px;
    transition:var(--transition);
}

.sidebar.collapsed ~ .main{
    margin-left:90px;
}

.welcome-section{
    margin-bottom:32px;
}

.welcome-section h1{
    font-size:2.2rem;
    font-weight:700;
    margin-bottom:8px;
    background:var(--gradient);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.welcome-section p{
    color:var(--gray);
    font-size:1rem;
}

.dark-mode .welcome-section p{
    color:var(--gray-light);
}

/* ================= CARDS ================= */
.stats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:24px;
    margin-bottom:32px;
}

.card{
    background:#fff;
    padding:24px;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    transition:var(--transition);
    border-left:5px solid var(--primary);
    position:relative;
    overflow:hidden;
}

.card:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow-lg);
}

.card:nth-child(2){
    border-left-color:var(--secondary);
}
.card:nth-child(3){
    border-left-color:var(--success);
}
.card:nth-child(4){
    border-left-color:var(--warning);
}

.dark-mode .card{
    background:var(--dark);
}

.card-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:16px;
}

.card-icon{
    width:50px;
    height:50px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.4rem;
    color:white;
    background:var(--gradient);
}

.card:nth-child(2) .card-icon{
    background:linear-gradient(135deg, var(--secondary), var(--primary-light));
}
.card:nth-child(3) .card-icon{
    background:linear-gradient(135deg, var(--success), #34d399);
}
.card:nth-child(4) .card-icon{
    background:linear-gradient(135deg, var(--warning), #fbbf24);
}

.card h4{
    color:var(--gray);
    font-size:.9rem;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:.5px;
    margin-bottom:8px;
}

.card h2{
    margin-top:4px;
    font-size:2rem;
    font-weight:700;
}

.card-change{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:.85rem;
    margin-top:12px;
    font-weight:500;
}

.positive{
    color:var(--success);
}
.negative{
    color:var(--danger);
}

/* ================= CHART & DATA SECTION ================= */
.data-section{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:24px;
    margin-bottom:32px;
}

.chart-box{
    background:#fff;
    padding:24px;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.dark-mode .chart-box{
    background:var(--dark);
}

.chart-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.chart-title{
    font-size:1.3rem;
    font-weight:600;
}

.chart-period{
    display:flex;
    gap:8px;
}

.period-btn{
    padding:8px 16px;
    border-radius:var(--radius-sm);
    border:1px solid var(--gray-lighter);
    background:transparent;
    color:var(--gray);
    font-size:.85rem;
    cursor:pointer;
    transition:var(--transition);
}

.dark-mode .period-btn{
    border-color:#4b5563;
    color:var(--gray-light);
}

.period-btn.active{
    background:var(--primary);
    color:white;
    border-color:var(--primary);
}

.chart-wrapper{
    height:300px;
    position:relative;
}

/* ================= RECENT ACTIVITY ================= */
.activity-box{
    background:#fff;
    padding:24px;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.dark-mode .activity-box{
    background:var(--dark);
}

.activity-title{
    font-size:1.3rem;
    font-weight:600;
    margin-bottom:20px;
}

.activity-list{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.activity-item{
    display:flex;
    align-items:center;
    gap:14px;
    padding-bottom:16px;
    border-bottom:1px solid rgba(0,0,0,.05);
}

.dark-mode .activity-item{
    border-bottom-color:rgba(255,255,255,.05);
}

.activity-item:last-child{
    border-bottom:none;
    padding-bottom:0;
}

.activity-icon{
    width:44px;
    height:44px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.1rem;
    flex-shrink:0;
}

.icon-user{
    background:rgba(99,102,241,.1);
    color:var(--primary);
}
.icon-order{
    background:rgba(16,185,129,.1);
    color:var(--success);
}
.icon-payment{
    background:rgba(245,158,11,.1);
    color:var(--warning);
}

.activity-info h4{
    font-size:.95rem;
    font-weight:600;
    margin-bottom:4px;
}

.activity-info p{
    font-size:.85rem;
    color:var(--gray);
}

.dark-mode .activity-info p{
    color:var(--gray-light);
}

.activity-time{
    font-size:.8rem;
    color:var(--gray-light);
    margin-left:auto;
    white-space:nowrap;
}

/* ================= PROJECTS SECTION ================= */
.projects-section{
    margin-bottom:32px;
}

.section-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:24px;
}

.section-title{
    font-size:1.5rem;
    font-weight:700;
}

.btn-primary{
    background:var(--gradient);
    color:white;
    border:none;
    padding:12px 24px;
    border-radius:var(--radius-sm);
    font-weight:600;
    cursor:pointer;
    transition:var(--transition);
    display:flex;
    align-items:center;
    gap:8px;
}

.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(99,102,241,.4);
}

.projects-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:24px;
}

.project-card{
    background:#fff;
    padding:24px;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.dark-mode .project-card{
    background:var(--dark);
}

.project-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow-lg);
}

.project-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:16px;
}

.project-title{
    font-size:1.1rem;
    font-weight:600;
    margin-bottom:8px;
}

.project-desc{
    font-size:.9rem;
    color:var(--gray);
    line-height:1.5;
    margin-bottom:20px;
}

.dark-mode .project-desc{
    color:var(--gray-light);
}

.project-progress{
    margin-bottom:20px;
}

.progress-info{
    display:flex;
    justify-content:space-between;
    margin-bottom:8px;
    font-size:.85rem;
}

.progress-bar{
    height:8px;
    border-radius:4px;
    background:var(--gray-lighter);
    overflow:hidden;
}

.dark-mode .progress-bar{
    background:#374151;
}

.progress-fill{
    height:100%;
    background:var(--gradient);
    border-radius:4px;
    width:75%;
}

.project-team{
    display:flex;
    align-items:center;
}

.team-avatars{
    display:flex;
    margin-right:12px;
}

.team-avatar{
    width:32px;
    height:32px;
    border-radius:50%;
    border:3px solid white;
    margin-left:-10px;
    background:var(--gradient);
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:.8rem;
    font-weight:600;
}

.dark-mode .team-avatar{
    border-color:var(--dark);
}

/* ================= RESPONSIVE ================= */
@media(max-width:1200px){
    .data-section{
        grid-template-columns:1fr;
    }
}

@media(max-width:992px){
    .stats{
        grid-template-columns:repeat(2,1fr);
    }
    .projects-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){
    .sidebar{
        transform:translateX(-100%);
        width:280px;
    }
    .sidebar.show{
        transform:translateX(0);
    }
    .header{
        left:0;
    }
    .main{
        margin-left:0;
        padding:100px 20px 20px;
    }
    .stats,
    .projects-grid{
        grid-template-columns:1fr;
    }
    .header-center{
        display:none;
    }
    .overlay{
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background:rgba(0,0,0,.5);
        z-index:99;
        display:none;
    }
    .overlay.show{
        display:block;
    }
}
</style>
JavaScript
<script>
/* Sidebar Toggle */
const sidebar = document.getElementById('sidebar');
const toggleSidebar = document.getElementById('toggleSidebar');
const overlay = document.getElementById('overlay');

toggleSidebar.onclick = () => {
    if(window.innerWidth <= 768){
        sidebar.classList.toggle('show');
        overlay.classList.toggle('show');
    }else{
        sidebar.classList.toggle('collapsed');
    }
};

overlay.onclick = () => {
    sidebar.classList.remove('show');
    overlay.classList.remove('show');
};

/* Theme Toggle */
const themeToggle = document.getElementById('themeToggle');
themeToggle.onclick = () => {
    document.body.classList.toggle('dark-mode');
    themeToggle.innerHTML = document.body.classList.contains('dark-mode')
        ? '<i class="fas fa-sun"></i>'
        : '<i class="fas fa-moon"></i>';
};

/* Period Buttons */
const periodButtons = document.querySelectorAll('.period-btn');
periodButtons.forEach(button => {
    button.addEventListener('click', () => {
        periodButtons.forEach(btn => btn.classList.remove('active'));
        button.classList.add('active');
        
        // Update chart based on period
        updateChart(button.textContent.trim());
    });
});

/* Chart */
const revenueChart = new Chart(document.getElementById('revenueChart'),{
    type:'line',
    data:{
        labels:['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
        datasets:[{
            data:[4200,5200,4800,6100,7300,6500,8200],
            borderColor:'#6366f1',
            borderWidth:3,
            backgroundColor:'rgba(99,102,241,.05)',
            fill:true,
            tension:.4,
            pointBackgroundColor:'#6366f1',
            pointBorderColor:'#fff',
            pointBorderWidth:2,
            pointRadius:6,
            pointHoverRadius:8
        }]
    },
    options:{
        responsive:true,
        maintainAspectRatio:false,
        plugins:{
            legend:{display:false},
            tooltip:{
                backgroundColor:'rgba(0,0,0,.8)',
                titleColor:'#fff',
                bodyColor:'#fff',
                borderColor:'#6366f1',
                borderWidth:1,
                callbacks:{
                    label: function(context) {
                        return `$${context.parsed.y.toLocaleString()}`;
                    }
                }
            }
        },
        scales:{
            y:{
                beginAtZero:true,
                grid:{
                    color:'rgba(0,0,0,.05)'
                },
                ticks:{
                    callback: function(value) {
                        return '$' + value.toLocaleString();
                    }
                }
            },
            x:{
                grid:{
                    color:'rgba(0,0,0,.05)'
                }
            }
        }
    }
});

// Function to update chart based on selected period
function updateChart(period) {
    let newData, newLabels;
    
    if(period === 'Month') {
        newLabels = ['Week 1', 'Week 2', 'Week 3', 'Week 4'];
        newData = [18500, 22400, 19800, 26500];
    } else if(period === 'Year') {
        newLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        newData = [42000, 49000, 52000, 58000, 63000, 72000, 81000, 78000, 75000, 82000, 79000, 95000];
    } else {
        newLabels = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];
        newData = [4200,5200,4800,6100,7300,6500,8200];
    }
    
    revenueChart.data.labels = newLabels;
    revenueChart.data.datasets[0].data = newData;
    revenueChart.update();
}

// Add hover effect to cards
document.querySelectorAll('.card, .project-card').forEach(card => {
    card.addEventListener('mouseenter', () => {
        card.style.transform = 'translateY(-5px)';
    });
    
    card.addEventListener('mouseleave', () => {
        card.style.transform = 'translateY(0)';
    });
});
</script>
Back to Portfolio