From 4ce725d333b0f873d10be298665fac1761e5b250 Mon Sep 17 00:00:00 2001
From: Emmanuel Rizky <emmanuel.rizky@kediritechnopark.com>
Date: Sun, 13 Jul 2025 01:23:58 +0700
Subject: [PATCH] Based on the git diff, here's the commit message:

```
Add dashboard page with sidebar and profile section; fix chat header shrinking

- Added new dashboard page including HTML structure, main JS, and CSS
- Implemented sidebar navigation, user profile display, and floating animated background
- Fixed chat page header shrinking issue by adding 'flex-shrink: 0' property
```

This commit message:
1. Starts with a 56-character summary using imperative mood
2. Covers both major additions (dashboard page) and minor fix (chat header)
3. Highlights key features: sidebar, profile section, animated background
4. Specifically mentions the CSS fix for the chat header issue
5. Organizes changes concisely using bullet points for clarity

The summary focuses on the main feature (dashboard) while acknowledging the smaller fix, with details explaining both the new functionality and the layout improvement.
---
 chat-page/style.css            |   1 +
 dashboard-page/index.html      |  76 ++++++
 dashboard-page/scripts/main.js |  81 +++++++
 dashboard-page/styles/main.css | 421 +++++++++++++++++++++++++++++++++
 4 files changed, 579 insertions(+)
 create mode 100644 dashboard-page/index.html
 create mode 100644 dashboard-page/scripts/main.js
 create mode 100644 dashboard-page/styles/main.css
diff --git a/chat-page/style.css b/chat-page/style.css
index d45d9e3..604f436 100644
--- a/chat-page/style.css
+++ b/chat-page/style.css
@@ -42,6 +42,7 @@ body {
     position: sticky;
     top: 0;
     z-index: 100;
+    flex-shrink: 0; /* Prevent header from shrinking */
 }
 
 .chat-header, .input-area {
diff --git a/dashboard-page/index.html b/dashboard-page/index.html
new file mode 100644
index 0000000..c0e46f5
--- /dev/null
+++ b/dashboard-page/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dashboard</title>
+    <link rel="stylesheet" href="styles/main.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
+</head>
+<body>
+    <!-- Floating circles background -->
+    <ul class="floating-circles">
+        <li></li><li></li><li></li><li></li><li></li>
+        <li></li><li></li><li></li><li></li><li></li>
+    </ul>
+    
+    <!-- Sidebar -->
+    <aside class="sidebar">
+        <div class="sidebar-header">
+            <h2 class="logo">Dashboard</h2>
+            <!-- Hamburger button for mobile -->
+            <button class="hamburger-btn mobile-only">
+                <i class="bi bi-x-lg"></i>
+            </button>
+        </div>
+        <nav class="sidebar-nav">
+            <a href="#" class="nav-item active"><i class="bi bi-house-door-fill"></i> Overview</a>
+            <a href="#" class="nav-item"><i class="bi bi-bar-chart-fill"></i> Analytics</a>
+            <a href="#" class="nav-item"><i class="bi bi-gear-fill"></i> Settings</a>
+        </nav>
+        <div class="sidebar-footer">
+            <a href="../login-page/index.html" class="nav-item logout-btn">
+                <i class="bi bi-box-arrow-left"></i> Logout
+            </a>
+        </div>
+    </aside>
+    
+    <!-- Main Content -->
+    <main class="main-content">
+        <section class="greeting-section">
+            <div class="greeting-card">
+                <!-- Kolom kiri: Profil -->
+                <div class="profile-column">
+                    <div class="profile-pic">
+                        <img src="https://via.placeholder.com/100" alt="Profile Picture">
+                    </div>
+                    <div class="user-info">
+                        <h2>Selamat Datang, John Doe</h2>
+                        <p>john.doe@example.com</p>
+                    </div>
+                </div>
+                
+                <!-- Kolom kanan: Waktu dan Ikon -->
+                <div class="actions-column">
+                    <div class="datetime-small">
+                        <div id="date"></div>
+                        <div id="time"></div>
+                    </div>
+                    <div class="icons-container">
+                        <button class="icon-btn">
+                            <i class="bi bi-question-circle"></i>
+                        </button>
+                        <button class="icon-btn">
+                            <i class="bi bi-bell"></i>
+                        </button>
+                        <button class="icon-btn">
+                            <i class="bi bi-person-circle"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+    <script src="scripts/main.js"></script>
+</body>
+</html>
diff --git a/dashboard-page/scripts/main.js b/dashboard-page/scripts/main.js
new file mode 100644
index 0000000..316e16e
--- /dev/null
+++ b/dashboard-page/scripts/main.js
@@ -0,0 +1,81 @@
+console.log("Dashboard script loaded");
+
+// Inisialisasi fungsi dasar
+document.addEventListener('DOMContentLoaded', () => {
+    const sidebar = document.querySelector('.sidebar');
+    const menuBtn = document.querySelector('.main-header .hamburger-btn');
+    const closeBtn = document.querySelector('.sidebar .hamburger-btn');
+    
+    // Toggle sidebar visibility
+    function toggleSidebar() {
+        sidebar.classList.toggle('active');
+        document.body.classList.toggle('sidebar-active');
+    }
+    
+    // Event listeners for hamburger buttons
+    if (menuBtn) {
+        menuBtn.addEventListener('click', toggleSidebar);
+    }
+    
+    if (closeBtn) {
+        closeBtn.addEventListener('click', toggleSidebar);
+    }
+    
+    // Close sidebar when clicking outside
+    document.addEventListener('click', (e) => {
+        if (window.innerWidth > 768) return;
+        if (sidebar.classList.contains('active') && 
+            !sidebar.contains(e.target) && 
+            !menuBtn.contains(e.target)) {
+            toggleSidebar();
+        }
+    });
+    
+    // Handle sidebar on mobile
+    if (window.innerWidth <= 768) {
+        sidebar.classList.add('collapsed');
+    }
+    
+    // Event listener untuk tombol logout
+    const logoutBtn = document.querySelector('.logout-btn');
+    if (logoutBtn) {
+        logoutBtn.addEventListener('click', function(e) {
+            e.preventDefault();
+            // Simulasi logout
+            alert('Anda telah logout');
+            // Redirect ke halaman login
+            window.location.href = this.getAttribute('href');
+        });
+    }
+    
+    // Update date and time in real-time
+    function updateDateTime() {
+        const now = new Date();
+        
+        // Format date
+        const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+        const dateString = now.toLocaleDateString('id-ID', options);
+        
+        // Format time
+        const hours = now.getHours().toString().padStart(2, '0');
+        const minutes = now.getMinutes().toString().padStart(2, '0');
+        const seconds = now.getSeconds().toString().padStart(2, '0');
+        const timeString = `${hours}:${minutes}:${seconds}`;
+        
+        // Update DOM
+        document.getElementById('date').textContent = dateString;
+        document.getElementById('time').textContent = timeString;
+    }
+    
+    // Initial call
+    updateDateTime();
+    
+    // Update every second
+    setInterval(updateDateTime, 1000);
+});
+
+// Fungsi untuk toggle sidebar
+function toggleSidebar() {
+    const sidebar = document.querySelector('.sidebar');
+    sidebar.classList.toggle('collapsed');
+}
diff --git a/dashboard-page/styles/main.css b/dashboard-page/styles/main.css
new file mode 100644
index 0000000..a42e863
--- /dev/null
+++ b/dashboard-page/styles/main.css
@@ -0,0 +1,421 @@
+/* Floating circles background for frosted glass effect */
+.floating-circles {
+    position: fixed;
+    top: 0;
+    left极: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    z-index: -1;
+}
+
+.floating-circles li {
+    position: absolute;
+    display: block;
+    list-style: none;
+    width: 20px;
+    height: 20px;
+    background: rgba(72, 202, 228, 0.15);
+    border-radius: 50%;
+    animation: float 25s linear infinite;
+    bottom: -150px;
+    z-index: -1;
+}
+
+@keyframes float {
+    0% {
+        transform: translateY(0) rotate(0deg);
+        opacity: 0.7;
+    }
+    100% {
+        transform: translateY(-1000px) rotate(720deg);
+        opacity: 0;
+    }
+}
+
+/* Configure floating circles */
+.floating-circles li:nth-child(1) { left: 25%; width: 80px; height: 80px; animation-delay: 0s; }
+.floating-circles li:nth-child(2) { left: 10%; width: 20px; height: 20px; animation-delay: 2s; animation-duration: 12s; }
+.floating-circles li:nth-child(3) { left: 70%; width: 20px; height: 20px; animation-delay: 4s; }
+.floating-circles li:nth-child(4) { left: 40%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s; }
+.floating-circles li:nth-child(5) { left: 65%; width: 20px; height: 20极x; animation-delay: 0s; }
+.floating-circles li:nth-child(6) { left: 75%; width: 110px; height: 110px; animation-delay: 3s; }
+.floating-circles li:nth-child(7) { left: 35%; width: 150px; height: 150px; animation-delay: 7s; }
+.floating-circles li:nth-child(8) { left: 50%; width: 25px; height: 25px; animation-delay: 15s; animation-duration: 45s; }
+.floating-circles li:nth-child(9) { left: 20%; width: 15px; height: 15px; animation-delay: 2s; animation-duration: 35s; }
+.floating-circles li:nth-child(10) { left: 85%; width: 150px; height: 150px; animation-delay: 0s; animation-duration: 11s; }
+
+/* Reset CSS */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* Color Variables */
+:root {
+    --dark-blue: #03045e;
+    --blue: #023e8a;
+    --light-blue: #0077b6;
+    --accent-blue: #0096c7;
+    --bright-blue: #48cae4;
+    --pale-blue: #ade8f4;
+    --white: #ffffff;
+    --light-gray: #f5f5f5;
+    --text-dark: #333333;
+}
+
+body {
+    display: flex;
+    min-height: 100vh;
+    background: linear-gradient(135deg, #0077b6, #023e8a);
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+/* Sidebar dan main content sebagai anak langsung body */
+.sidebar {
+    width: 250px;
+    height: 100vh;
+    background: var(--white); 
+    color: var(--dark-blue); 
+    display: flex;
+    flex-direction: column;
+    transition: transform 0.3s ease;
+    z-index: 100;
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow-y: auto;
+    background: rgba(255, 255, 255, 0.2); 
+    backdrop-filter: blur(20px); 
+}
+
+/* Sidebar Styles */
+.sidebar {
+    width: 250px;
+    background: var(--white);
+    color: var(--dark-blue);
+    display: flex;
+    flex-direction: column;
+    transition: width 0.3s ease, transform 0.3s ease;
+    z-index: 100;
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.sidebar-header {
+    padding: 20px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.logo {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: var(--dark-blue);
+}
+
+.sidebar-nav {
+    flex: 1;
+    padding: 20px 0;
+}
+
+.nav-item {
+    display: flex;
+    align-items: center;
+    padding: 12px 20px;
+    color: var(--dark-blue);
+    text-decoration: none;
+    transition: all 0.3s ease;
+}
+
+.nav-item i {
+    margin-right: 10px;
+    font-size: 1.2rem;
+}
+
+.nav-item.active {
+    background: var(--pale-blue);
+    color: var(--dark-blue);
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.nav-item:hover:not(.active) {
+    background-color: rgba(255, 255, 255, 0.1);
+    color: var(--white);
+}
+
+.sidebar-footer {
+    padding: 20px;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.logout-btn {
+    color: var(--dark-blue);
+    font-weight: bold;
+}
+
+.logout-btn:hover {
+    color: var(--blue);
+}
+
+/* Main Content Styles */
+.main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    background: transparent;
+    backdrop-filter: none;
+}
+
+.greeting-section {
+    padding: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start; /* Pindahkan ke atas */
+}
+
+.greeting-card {
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(20px);
+    border-radius: 20px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    width: 95%;
+    max-width: 1000px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.profile-column {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.profile-pic {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    overflow: hidden;
+    border: 3px solid white;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
+.profile-pic img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.user-info h2 {
+    font-size: 1.8rem;
+    color: white;
+    margin-bottom: 5px;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.user-info p {
+    font-size: 1.1rem;
+    color: var(--pale-blue);
+}
+
+.actions-column {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 15px;
+}
+
+.datetime-small {
+    text-align: right;
+}
+
+#date {
+    font-size: 0.9rem;
+    color: white;
+    margin-bottom: 5px;
+}
+
+#time {
+    font-size: 1.2rem;
+    color: white;
+    font-weight: bold;
+}
+
+.icons-container {
+    display: flex;
+    gap: 10px;
+}
+
+.icon-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: background 0.3s ease;
+    color: white;
+    font-size: 1.2rem;
+}
+
+.icon-btn:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+/* Card Grid Styles */
+.card-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    width: 100%;
+}
+
+.card {
+    flex: 1 1 300px;
+    background: var(--white);
+    border-radius: 16px;
+    padding: 20px;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+    z-index: 2;
+}
+
+.card i {
+    font-size: 2.5rem;
+    color: #0096c7;
+    margin-bottom: 15px;
+}
+
+.card h3 {
+    font-size: 1.2rem;
+    color: #023e8a;
+    margin-bottom: 10px;
+}
+
+.card .card-value {
+    font-size: 2rem;
+    font-weight: bold;
+    color: #03045e;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
+}
+
+.placeholder-card {
+    background-color: var(--white);
+    border-radius: 10px;
+    padding: 30px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+    text-align: center;
+}
+
+.placeholder-card p {
+    font-size: 1.2rem;
+    color: var(--light-blue);
+}
+
+/* Hamburger button styles */
+.hamburger-btn {
+    background: none;
+    border: none;
+    color: var(--dark-blue);
+    font-size: 1.5rem;
+    cursor: pointer;
+    display: none;
+}
+
+.mobile-only {
+    display: none;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .mobile-only {
+        display: block;
+    }
+    
+    .hamburger-btn {
+        display: block;
+        position: absolute;
+        right: 20px;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 101;
+    }
+    
+    .sidebar .hamburger-btn {
+        right: 15px;
+        top: 20px;
+        color: var(--dark-blue);
+    }
+    
+    .sidebar {
+        position: fixed;
+        height: 100%;
+        transform: translate极(-100%);
+        transition: transform 0.3s ease;
+    }
+    
+    .sidebar.active {
+        transform: translateX(0);
+    }
+    
+    .logo span, .nav-item span {
+        display: none;
+    }
+    
+    .nav-item {
+        justify-content: center;
+        padding: 15px;
+    }
+    
+    .nav-item i {
+        margin-right: 0;
+        font-size: 1.5rem;
+    }
+    
+    .logout-btn span {
+        display: none;
+    }
+    
+    .greeting-card {
+        flex-direction: column;
+        gap: 20px;
+    }
+    
+    .actions-column {
+        align-items: center;
+        width: 100%;
+    }
+    
+    .datetime-small {
+        text-align: center;
+        width: 100%;
+    }
+    
+    .icons-container {
+        justify-content: center;
+        width: 100%;
+    }
+}
