Raditya_Indra_Putranto/D1041231009-WebGIS-PovertyMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refresh UI and add sidebar navigation

Browse Source
This commit is contained in:
GuavaPopper
2026-06-10 18:16:46 +07:00
parent c4157cec8d
commit d85d066f6c
14 changed files with 1636 additions and 603 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/welcome.blade.php
+105 -47
View File
@@ -20,16 +20,6 @@
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Plus Jakarta Sans', sans-serif;
}
body {
font-weight: 500;
}
h1, h2, h3, h4, h5, h6, .btn, .card-title, .stat-value {
font-weight: 700 !important;
letter-spacing: -0.02em;
}
#bgMap {
position: fixed;
top: 0;
@@ -37,73 +27,141 @@
width: 100%;
height: 100%;
z-index: 0;
opacity: 0.5;
filter: saturate(1.2) brightness(0.7);
opacity: 0.78;
filter: saturate(0.88) brightness(0.96) contrast(0.92);
}
.hero {
.landing-shell {
position: relative;
z-index: 10;
background: transparent !important;
min-height: 100vh;
display: grid;
align-items: end;
padding: 96px 24px 32px;
}
/* Glass effect for content */
.hero-content {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(12px);
padding: 3rem;
border-radius: 2rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.3);
.landing-shell::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
background:
linear-gradient(90deg, rgba(250, 250, 250, 0.94) 0%, rgba(250, 250, 250, 0.82) 42%, rgba(250, 250, 250, 0.22) 100%),
linear-gradient(180deg, rgba(250, 250, 250, 0.12) 0%, rgba(250, 250, 250, 0.84) 100%);
}
[data-theme="dark"] .hero-content {
background: rgba(15, 23, 42, 0.7);
border: 1px solid rgba(255, 255, 255, 0.1);
.landing-content {
max-width: 760px;
}
.brand-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
color: #6b6b6b;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
}
.brand-mark {
display: inline-grid;
width: 32px;
height: 32px;
place-items: center;
border: 1px solid #e8e8ec;
border-radius: 8px;
background: #fff;
color: #0a0a0a;
font-size: 12px;
font-weight: 700;
}
.landing-title {
max-width: 720px;
margin-top: 24px;
color: #0a0a0a;
font-size: clamp(44px, 7vw, 72px);
line-height: 0.94;
}
.landing-copy {
max-width: 520px;
margin-top: 20px;
color: #6b6b6b;
font-size: 16px;
line-height: 1.7;
}
.landing-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 32px;
}
.landing-meta {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
margin-top: 28px;
color: #6b6b6b;
font-size: 13px;
}
.redirect-strip {
width: min(420px, 100%);
margin-top: 40px;
}
.progress {
height: 4px;
background: #e8e8ec;
}
.progress::-webkit-progress-value {
background: #6366f1;
}
@media (max-width: 640px) {
.landing-shell {
padding: 80px 20px 28px;
}
.landing-title {
font-size: 44px;
}
}
</style>
<link rel="stylesheet" href="{{ asset('css/genesis.css') }}">
</head>
<body class="min-h-screen bg-base-200 flex flex-col items-center justify-center overflow-hidden">
<body class="min-h-screen overflow-hidden">
<!-- Background Map -->
<div id="bgMap"></div>
<div class="hero min-h-screen">
<div class="hero-content text-center flex-col gap-2">
<!-- Logo -->
<div class="text-7xl mb-2">🏘️</div>
<h1 class="text-4xl font-bold tracking-tight text-primary">WebGIS Pemetaan Kemiskinan</h1>
<p class="max-w-md text-base-content/60 mt-2 mb-6 leading-relaxed">
Sistem Informasi Geografis untuk pemetaan rumah ibadah dan
analisis sebaran keluarga kurang mampu.
<div class="landing-shell">
<div class="landing-content">
<div class="brand-kicker">
<span class="brand-mark">GIS</span>
Sistem informasi geografis desa
</div>
<h1 class="landing-title">Pemetaan kemiskinan berbasis radius layanan.</h1>
<p class="landing-copy">
Pantau sebaran keluarga kurang mampu, rumah ibadah, dan celah jangkauan bantuan dalam satu ruang kerja spasial yang ringkas.
</p>
<!-- Buttons -->
<div class="flex flex-col sm:flex-row gap-3">
<div class="landing-actions">
<a href="{{ url('/map') }}" class="btn btn-primary btn-lg gap-2">
<i class="fa-solid fa-map-location-dot"></i>
Buka Peta & Input
Buka Peta
</a>
<a href="{{ url('/data') }}" class="btn btn-outline btn-lg gap-2">
<i class="fa-solid fa-table-list"></i>
Lihat Data Tabular
Lihat Data
</a>
</div>
<!-- User info -->
<div class="flex items-center gap-2 text-sm text-base-content/50 mt-2">
<i class="fa-solid fa-user text-xs"></i>
<div class="landing-meta">
<span>{{ auth()->user()->name }}</span>
<span class="opacity-30">•</span>
<span>/</span>
<span class="capitalize">{{ str_replace('_', ' ', auth()->user()->getRoleNames()->first() ?? '') }}</span>
<span class="opacity-30">•</span>
<span>/</span>
<form method="POST" action="{{ route('logout') }}" class="inline">
@csrf
<button type="submit" class="hover:text-error transition-colors underline underline-offset-2">Keluar</button>
</form>
</div>
<!-- Redirect progress -->
<div class="mt-8 w-72">
<p class="text-xs text-base-content/40 mb-2">Mengarahkan ke halaman Peta dalam 5 detik...</p>
<progress class="progress progress-primary w-full" id="redirectProgress" value="0" max="100"></progress>
<div class="redirect-strip">
<p class="text-xs text-base-content/50 mb-2">Mengarahkan ke halaman Peta dalam 5 detik</p>
<progress class="progress w-full" id="redirectProgress" value="0" max="100"></progress>
</div>
</div>
</div>