diff --git a/admin/index.php b/admin/index.php new file mode 100644 index 0000000..6320a04 --- /dev/null +++ b/admin/index.php @@ -0,0 +1,127 @@ + + + +
+ + +
+
+

Dashboard

+
+
+ +
+
+
+
+
+

Total Users

+

1,250

+
+
+ +
+
+
+
+
+ +
+
+
+
+
+

Total Orders

+

350

+
+
+ +
+
+
+
+
+ +
+
+
+
+
+

Pending Payment

+

15

+
+
+ +
+
+
+
+
+ +
+
+
+
+
+

Website Aktif

+

320

+
+
+ +
+
+
+
+
+
+ +
+
+
+
+ + Statistik Order Bulanan +
+
+ +
+
+
+
+
+
+ + Aktivitas Terbaru +
+
+ +
+
Order Baru #1234
+ 5 menit lalu +
+

Paket Website UKM oleh Budi.

+ + +
+
User Baru
+ 15 menit lalu +
+

Siti mendaftar.

+ + +
+
Pembayaran Diterima #1233
+ 1 jam lalu +
+

Pembayaran dari Ahmad dikonfirmasi.

+ +
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/admin/partials/footer.php b/admin/partials/footer.php new file mode 100644 index 0000000..16cc9bf --- /dev/null +++ b/admin/partials/footer.php @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/admin/partials/header.php b/admin/partials/header.php new file mode 100644 index 0000000..46f69a6 --- /dev/null +++ b/admin/partials/header.php @@ -0,0 +1,19 @@ + + + + + + Admin Panel + + + + + + + + + + + + +
diff --git a/admin/partials/sidebar.php b/admin/partials/sidebar.php new file mode 100644 index 0000000..c912b97 --- /dev/null +++ b/admin/partials/sidebar.php @@ -0,0 +1,27 @@ + + + \ No newline at end of file diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..85329dc --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,76 @@ +:root { + --primary-color: #0050A0; + --secondary-color: #F2B705; + --bg-light: #F8F9FA; + --surface-white: #FFFFFF; + --text-dark: #212529; +} + +body { + font-family: 'Poppins', sans-serif; + overflow-x: hidden; +} + +#wrapper { + display: flex; +} + +#sidebar-wrapper { + min-height: 100vh; + width: 250px; + transition: margin .25s ease-out; + border-right: 1px solid #ddd; +} + +#sidebar-wrapper .sidebar-heading { + color: var(--primary-color); +} + +#sidebar-wrapper .list-group-item { + border: 0; + border-radius: 0; + color: #555; + font-weight: 500; +} + +#sidebar-wrapper .list-group-item.active { + background-color: var(--primary-color); + color: var(--surface-white); + border-left: 5px solid var(--secondary-color); +} + +#sidebar-wrapper .list-group-item:hover:not(.active) { + background-color: var(--bg-light); + color: var(--primary-color); +} + +#page-content-wrapper { + flex: 1; + background-color: var(--bg-light); +} + +.card-kpi { + border: none; + border-radius: 0.75rem; + box-shadow: 0 4px 12px rgba(0,0,0,0.05); + transition: transform .2s; +} + +.card-kpi:hover { + transform: translateY(-5px); +} + +.card-kpi .icon-circle { + width: 50px; + height: 50px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; +} + +.card.shadow-sm { + border-radius: 0.75rem; + border: none; +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..c0c5048 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,33 @@ +document.addEventListener("DOMContentLoaded", function() { + const ctx = document.getElementById('orderChart'); + if (ctx) { + new Chart(ctx, { + type: 'bar', + data: { + labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Ags', 'Sep', 'Okt', 'Nov', 'Des'], + datasets: [{ + label: 'Jumlah Order', + data: [12, 19, 3, 5, 2, 3, 7, 8, 10, 15, 9, 11], + backgroundColor: 'rgba(0, 80, 160, 0.7)', + borderColor: 'rgba(0, 80, 160, 1)', + borderWidth: 1, + borderRadius: 5 + }] + }, + options: { + responsive: true, + maintainAspectRatio: false, + scales: { + y: { + beginAtZero: true + } + }, + plugins: { + legend: { + display: false + } + } + } + }); + } +}); diff --git a/index.php b/index.php index 7205f3d..a5b63cd 100644 --- a/index.php +++ b/index.php @@ -35,116 +35,54 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? ''; +
-
-

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

+
+
+

Manajemen User & Domain

+

Selamat datang di panel manajemen Anda. Klik tombol di bawah untuk masuk ke dashboard admin.

+ Masuk ke Admin Panel +
+
+
+

Runtime: PHP — UTC

-