DSP Project first push, date: 29/01/2026

2026-01-29 14:31:48 +07:00
parent 951262afb3
commit 644b624d2d
1857 changed files with 163516 additions and 0 deletions
--- a/includes/header_user.php
+++ b/includes/header_user.php
@@ -0,0 +1,149 @@
+<!-- Head tag -->
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Data User Dashboard - NIPH DSP</title>
+
+    <!-- Bootstrap -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
+
+    <!-- FontAwesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
+
+    <!-- Custom styles -->
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #f8f9fa;
+            overflow-x: hidden;
+        }
+
+        .wrapper {
+            display: flex;
+            min-height: 100vh;
+        }
+
+        .sidebar {
+            width: 250px;
+            background-color: #0b4076ff;
+            color: white;
+            min-height: 100vh;
+            position: fixed;
+            top: 0;
+            left: 0;
+            z-index: 1030;
+            border-radius: 0 12px 12px 0;
+            padding: 0;
+            overflow-y: auto;
+            max-height: 100vh;
+        }
+
+        .sidebar .admin-header {
+            background-color: #28a745;
+            color: white;
+            font-weight: bold;
+            font-size: 1.25rem;
+            padding: 16px 0;
+            letter-spacing: 1px;
+            border-bottom: 1px solid #157347;
+            user-select: none;
+        }
+
+        .sidebar .nav-link {
+            color: #adb5bd;
+            padding: 12px 20px;
+            display: flex;
+            align-items: center;
+            border-radius: 8px;
+            font-weight: 500;
+            transition: background-color 0.2s, color 0.2s;
+        }
+
+        .sidebar .nav-link i {
+            margin-right: 12px;
+            width: 20px;
+            text-align: center;
+        }
+
+        .sidebar .nav-link:hover {
+            background-color: #495057;
+            color: white;
+        }
+
+        .sidebar .nav-link.active {
+            background-color: #1456b9ff;
+            color: white;
+            font-weight: 700;
+        }
+
+        .main-content {
+            margin-left: 250px;
+            padding: 1.5rem 2rem;
+            flex-grow: 1;
+            transition: margin-left 0.3s ease;
+        }
+
+        #overlay {
+            display: none;
+            position: fixed;
+            top: 56px;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: rgba(0, 0, 0, 0.5);
+            z-index: 1029;
+        }
+
+        #mobile-topbar {
+            height: 56px;
+            background: #198754;
+            color: white;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: 1040;
+        }
+
+        #mobile-topbar h4 {
+            font-size: 1.125rem;
+        }
+
+        #mobile-topbar button {
+            border-radius: 50%;
+            border: 1.5px solid rgba(255, 255, 255, 0.7);
+            background: transparent;
+            color: white;
+            padding: 0.35rem 0.5rem;
+            font-size: 1.2rem;
+            transition: background-color 0.2s, color 0.2s;
+        }
+
+        #mobile-topbar button:hover {
+            background-color: rgba(255, 255, 255, 0.15);
+            color: #fff;
+            border-color: #fff;
+        }
+
+        @media (max-width: 991.98px) {
+            .sidebar {
+                left: -250px;
+                padding-top: 56px;
+            }
+
+            .sidebar.show {
+                left: 0;
+                box-shadow: 2px 0 12px rgba(0, 0, 0, 0.25);
+            }
+
+            .main-content {
+                margin-left: 0;
+                margin-top: 56px;
+            }
+
+            #overlay.show {
+                display: block;
+            }
+        }
+    </style>
+</head>