Add WebGIS source code

2026-06-11 23:48:02 +07:00
parent ce48dbcddc
commit b212ca27fd
37 changed files with 5764 additions and 0 deletions
@@ -0,0 +1,379 @@
+<style>
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background: #f8fafc;
+    font-family: 'Segoe UI', sans-serif;
+}
+
+.content {
+    padding: 30px;
+}
+
+/* NAVBAR */
+
+.navbar {
+
+    position: fixed;
+
+    top: 0;
+    left: 260px;
+    right: 0;
+
+    height: 70px;
+
+    background: white;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    padding: 0 30px;
+
+    box-shadow:
+        0 2px 15px rgba(0, 0, 0, .08);
+
+    z-index: 1000;
+
+}
+
+.logo-area {
+
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+}
+
+.logo-area i {
+
+    font-size: 28px;
+    color: #2563eb;
+
+}
+
+.logo-area h2 {
+
+    font-size: 18px;
+    margin: 0;
+
+}
+
+.logo-area small {
+
+    color: #64748b;
+
+}
+
+.admin-profile {
+
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+}
+
+.avatar {
+
+    width: 45px;
+    height: 45px;
+
+    border-radius: 50%;
+
+    background: #2563eb;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    color: white;
+
+}
+
+/* SIDEBAR */
+
+.sidebar {
+
+    position: fixed;
+
+    left: 0;
+    top: 0;
+
+    width: 260px;
+    height: 100vh;
+
+    background: #1e293b;
+
+    padding-top: 20px;
+
+    display: flex;
+    flex-direction: column;
+
+}
+
+.sidebar-title {
+
+    color: #94a3b8;
+
+    font-size: 12px;
+
+    padding: 15px 25px;
+
+}
+
+.sidebar a {
+
+    color: #e2e8f0;
+
+    text-decoration: none;
+
+    padding: 15px 25px;
+
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    transition: .3s;
+
+}
+
+.sidebar a:hover {
+
+    background: #334155;
+
+}
+
+.sidebar a.active {
+
+    background: #2563eb;
+
+    border-left: 4px solid white;
+
+}
+
+.sidebar-footer {
+
+    margin-top: auto;
+
+    border-top: 1px solid #334155;
+
+    padding-top: 10px;
+
+}
+
+/* CONTENT */
+
+.content {
+
+    margin-left: 260px;
+
+    margin-top: 70px;
+
+    padding: 30px;
+
+}
+
+
+/* CARD */
+
+.card {
+    background: white;
+    border-radius: 16px;
+    padding: 25px;
+    box-shadow:
+        0 4px 20px rgba(0, 0, 0, .08);
+    transition: .3s;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+}
+
+/* TABLE */
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    background: white;
+    border-radius: 15px;
+    overflow: hidden;
+    box-shadow:
+        0 4px 20px rgba(0, 0, 0, .08);
+}
+
+th {
+    background: #2563eb;
+    color: white;
+}
+
+th,
+td {
+    padding: 14px;
+    border-bottom: 1px solid #eee;
+}
+
+/* BUTTON */
+
+.btn {
+    padding: 10px 16px;
+    border-radius: 10px;
+    text-decoration: none;
+    color: white;
+    display: inline-block;
+}
+
+.approve {
+    background: #16a34a;
+}
+
+.reject {
+    background: #dc2626;
+}
+
+.delete {
+    background: #64748b;
+}
+
+.warning {
+    background: #f59e0b;
+}
+
+/* INPUT */
+
+input,
+select,
+textarea {
+
+    width: 100%;
+    padding: 12px;
+
+    border: 1px solid #ddd;
+
+    border-radius: 10px;
+
+    margin-top: 8px;
+}
+
+/* BOX */
+
+.box {
+    background: white;
+    padding: 25px;
+    border-radius: 20px;
+    box-shadow:
+        0 4px 20px rgba(0, 0, 0, .08);
+}
+
+.cards {
+    display: grid;
+
+    grid-template-columns:
+        repeat(auto-fit, minmax(220px, 1fr));
+
+    gap: 20px;
+}
+
+.card i {
+
+    font-size: 40px;
+
+    color: #2563eb;
+
+    margin-bottom: 15px;
+}
+
+.card h3 {
+
+    color: #64748b;
+
+    font-size: 14px;
+}
+
+.card h1 {
+
+    font-size: 35px;
+
+    margin-top: 10px;
+}
+
+.badge {
+    padding: 6px 12px;
+    border-radius: 30px;
+    color: white;
+    font-size: 13px;
+}
+
+.pending {
+    background: #f59e0b;
+}
+
+.approved {
+    background: #16a34a;
+}
+
+.rejected {
+    background: #dc2626;
+}
+
+.process {
+    background: #2563eb;
+}
+
+.done {
+    background: #7c3aed;
+}
+
+#legend {
+
+    position: absolute;
+
+    top: 20px;
+    right: 20px;
+
+    z-index: 1000;
+
+    background: white;
+
+    padding: 15px;
+
+    border-radius: 10px;
+
+    box-shadow:
+        0 2px 10px rgba(0, 0, 0, .2);
+}
+
+.photo {
+
+    width: 100px;
+    height: 100px;
+
+    object-fit: cover;
+
+    border-radius: 12px;
+
+    border: 3px solid white;
+
+    box-shadow:
+        0 2px 10px rgba(0, 0, 0, .2);
+}
+
+.hero {
+
+    background:
+        linear-gradient(135deg,
+            #2563eb,
+            #06b6d4);
+
+    color: white;
+
+    padding: 30px;
+
+    border-radius: 20px;
+
+    margin-bottom: 30px;
+}
+</style>