emmanuel.rizky/demo-mayagen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Based on the git diff, here's the commit message:

Browse Source 
```
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.
This commit is contained in:
Emmanuel Rizky
2025-07-13 01:23:58 +07:00
parent e2ce1c0a0d
commit 4ce725d333
4 changed files with 579 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
dashboard-page/index.html Normal file
View File

@@ -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>