From 5570f7b42799b93454da77bed6244e5ced9a0dfa Mon Sep 17 00:00:00 2001 From: Flatlogic Bot Date: Sat, 27 Dec 2025 12:30:59 +0000 Subject: [PATCH] kepeg --- assets/css/custom.css | 133 ++++++++++++++++++++ assets/js/main.js | 11 ++ index.php | 286 +++++++++++++++++++++--------------------- 3 files changed, 286 insertions(+), 144 deletions(-) create mode 100644 assets/css/custom.css create mode 100644 assets/js/main.js diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..1d28ea0 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,133 @@ + +/* Fonts */ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); + +body { + font-family: 'Poppins', sans-serif; + background-color: #F4F7FC; + color: #333; +} + +.wrapper { + display: flex; + width: 100%; + align-items: stretch; +} + +#sidebar { + min-width: 250px; + max-width: 250px; + background: #FFFFFF; + color: #333; + transition: all 0.3s; + box-shadow: 0 2px 10px rgba(0,0,0,0.05); +} + +#sidebar.active { + margin-left: -250px; +} + +#sidebar .sidebar-header { + padding: 20px; + background: #FFFFFF; + border-bottom: 1px solid #eee; + text-align: center; +} + +#sidebar .sidebar-header h3 { + color: #333; + font-weight: 700; +} + +#sidebar ul.components { + padding: 20px 0; +} + +#sidebar ul p { + color: #333; + padding: 10px; +} + +#sidebar ul li a { + padding: 15px 20px; + font-size: 1.05em; + display: block; + color: #555; + font-weight: 500; + border-left: 3px solid transparent; +} + +#sidebar ul li a:hover { + color: #4A90E2; + background: #F4F7FC; + border-left: 3px solid #4A90E2; + text-decoration: none; +} + +#sidebar ul li.active > a, a[aria-expanded="true"] { + color: #4A90E2; + background: #F4F7FC; + border-left: 3px solid #4A90E2; +} + +#content { + width: 100%; + padding: 20px; + min-height: 100vh; + transition: all 0.3s; +} + +.stat-card { + border-radius: 0.5rem; + padding: 1.5rem; + color: white; + margin-bottom: 1rem; + border: none; +} + +.stat-card .stat-icon { + font-size: 2.5rem; + opacity: 0.8; +} + +.stat-card h5 { + font-weight: 400; + font-size: 1rem; + margin-bottom: 0.5rem; +} + +.stat-card .stat-number { + font-size: 2.25rem; + font-weight: 700; +} + +.card-1 { background: linear-gradient(135deg, #4A90E2, #357ABD); } +.card-2 { background: linear-gradient(135deg, #50E3C2, #38A89D); } +.card-3 { background: linear-gradient(135deg, #F5A623, #D48E1C); } +.card-4 { background: linear-gradient(135deg, #BD10E0, #9D0DBF); } + +.navbar { + background: #fff; + border-radius: 0.5rem; + box-shadow: 0 2px 4px rgba(0,0,0,0.05); +} + +.feather { + width: 18px; + height: 18px; + stroke-width: 2.5; + margin-right: 10px; + vertical-align: middle; +} + +@media (max-width: 768px) { + #sidebar { + margin-left: -250px; + } + #sidebar.active { + margin-left: 0; + } + #sidebarCollapse span { + display: none; + } +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..a847fc4 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,11 @@ +// Future javascript for interactivity +document.addEventListener('DOMContentLoaded', function () { + const sidebarCollapse = document.getElementById('sidebarCollapse'); + const sidebar = document.getElementById('sidebar'); + + if (sidebarCollapse) { + sidebarCollapse.addEventListener('click', function () { + sidebar.classList.toggle('active'); + }); + } +}); diff --git a/index.php b/index.php index 7205f3d..9b515c1 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,148 @@ - - + - - - New Style - - - - - - - - - - - - - - - - - - - + + + + SI Kepegawaian - Dashboard + + + + + + + + + + + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

+ +
+ + + + +
+ + +

Dashboard

+ +
+
+
+
+
+
Total Pegawai
+
0
+
+
+
+
+
+
+
+
+
+
Hadir Hari Ini
+
0
+
+
+
+
+
+
+
+
+
+
Sedang Cuti
+
0
+
+
+
+
+
+
+
+
+
+
Jumlah Posisi
+
0
+
+
+
+
+
+
+ +
+
+ Aktivitas Mingguan +
+
+

Grafik akan ditampilkan di sini.

+
+
+
-
- + + + + + + + + + + - + \ No newline at end of file