rekywhyd/WebGIS_PengentasanKemiskinan
1
0
Fork 0
mirror of https://github.com/rekywhyd/WebGIS_PengentasanKemiskinan.git synced 2026-07-11 11:53:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Memperbarui UI/UX

Browse Source
This commit is contained in:
rekywhyd
2026-06-07 23:32:06 +07:00
parent f7479770e6
commit 76a8782409
47 changed files with 4378 additions and 685 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/layouts/app.blade.php
+73 -9
View File
@@ -1,34 +1,98 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="scroll-smooth">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<title>{{ config('app.name', 'WebGIS Pengentasan Kemiskinan') }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<link href="https://fonts.bunny.net/css?family=inter:400,500,600,700,800|outfit:500,600,700,800" rel="stylesheet" />
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
<style>
body {
font-family: 'Inter', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Outfit', sans-serif;
}
.bg-grid-pattern {
background-image: linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px);
background-size: 40px 40px;
}
.dark .bg-grid-pattern {
background-image: linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
}
.blob-1 {
position: absolute;
top: -10%;
left: -10%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, rgba(transparent) 70%);
border-radius: 50%;
filter: blur(40px);
z-index: -1;
}
.blob-2 {
position: absolute;
bottom: -10%;
right: -10%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(168,85,247,0.15) 0%, rgba(transparent) 70%);
border-radius: 50%;
filter: blur(40px);
z-index: -1;
}
.dark .blob-1 { background: radial-gradient(circle, rgba(99,102,241,0.2) 0%, rgba(transparent) 70%); }
.dark .blob-2 { background: radial-gradient(circle, rgba(168,85,247,0.2) 0%, rgba(transparent) 70%); }
.animate-fade-in-up {
animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
opacity: 0;
transform: translateY(20px);
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body class="font-sans antialiased">
<div class="min-h-screen bg-gray-100 dark:bg-gray-900">
@include('layouts.navigation')
<body class="antialiased bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 relative overflow-x-hidden selection:bg-indigo-500 selection:text-white">
<!-- Background Elements -->
<div class="fixed inset-0 bg-grid-pattern pointer-events-none z-[-2]"></div>
<div class="fixed inset-0 pointer-events-none z-[-1] overflow-hidden">
<div class="blob-1"></div>
<div class="blob-2"></div>
</div>
<div class="min-h-screen relative z-0 flex flex-col">
<div class="sticky top-0 z-50 backdrop-blur-md bg-white/70 dark:bg-slate-900/70 border-b border-slate-200/50 dark:border-slate-800/50 transition-all duration-300">
@include('layouts.navigation')
</div>
<!-- Page Heading -->
@isset($header)
<header class="bg-white dark:bg-gray-800 shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
<header class="bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm border-b border-slate-200/50 dark:border-slate-800/50 shadow-sm relative z-10">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8 animate-fade-in-up">
{{ $header }}
</div>
</header>
@endisset
<!-- Page Content -->
<main>
<main class="flex-grow">
{{ $slot }}
</main>
</div>
resources/views/layouts/guest.blade.php
+76 -9
View File
@@ -1,28 +1,95 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="scroll-smooth">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<title>{{ config('app.name', 'WebGIS Pengentasan Kemiskinan') }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<link href="https://fonts.bunny.net/css?family=inter:400,500,600,700,800|outfit:500,600,700,800" rel="stylesheet" />
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
<style>
body {
font-family: 'Inter', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Outfit', sans-serif;
}
.bg-grid-pattern {
background-image: linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px);
background-size: 40px 40px;
}
.dark .bg-grid-pattern {
background-image: linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
}
.blob-1 {
position: absolute;
top: -10%;
left: -10%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, rgba(transparent) 70%);
border-radius: 50%;
filter: blur(40px);
z-index: -1;
}
.blob-2 {
position: absolute;
bottom: -10%;
right: -10%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(168,85,247,0.15) 0%, rgba(transparent) 70%);
border-radius: 50%;
filter: blur(40px);
z-index: -1;
}
.dark .blob-1 { background: radial-gradient(circle, rgba(99,102,241,0.2) 0%, rgba(transparent) 70%); }
.dark .blob-2 { background: radial-gradient(circle, rgba(168,85,247,0.2) 0%, rgba(transparent) 70%); }
.animate-fade-in-up {
animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
opacity: 0;
transform: translateY(20px);
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body class="font-sans text-gray-900 antialiased">
<div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100 dark:bg-gray-900">
<div>
<a href="/">
<x-application-logo class="w-20 h-20 fill-current text-gray-500" />
<body class="antialiased bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 relative overflow-x-hidden selection:bg-indigo-500 selection:text-white min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0">
<!-- Background Elements -->
<div class="fixed inset-0 bg-grid-pattern pointer-events-none z-[-2]"></div>
<div class="fixed inset-0 pointer-events-none z-[-1] overflow-hidden">
<div class="blob-1"></div>
<div class="blob-2"></div>
</div>
<div class="animate-fade-in-up w-full flex flex-col items-center">
<div class="mb-8">
<a href="/" class="flex flex-col items-center gap-3 group">
<div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white shadow-lg shadow-indigo-500/30 group-hover:scale-105 transition-transform duration-300">
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<span class="font-outfit font-bold text-2xl tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-400 dark:to-purple-400">
WebGIS Kesra
</span>
</a>
</div>
<div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-gray-800 shadow-md overflow-hidden sm:rounded-lg">
<div class="w-full sm:max-w-md px-8 py-10 bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl border border-slate-200 dark:border-slate-800 shadow-2xl overflow-hidden sm:rounded-2xl">
{{ $slot }}
</div>
</div>
resources/views/layouts/navigation.blade.php
+55 -16
View File
@@ -1,38 +1,61 @@
<nav x-data="{ open: false }" class="bg-white dark:bg-gray-800 border-b border-gray-100 dark:border-gray-700">
<nav x-data="{ open: false }" class="bg-transparent border-none">
<!-- Primary Navigation Menu -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<!-- Logo -->
<div class="shrink-0 flex items-center">
<a href="{{ route('dashboard') }}">
<x-application-logo class="block h-9 w-auto fill-current text-gray-800 dark:text-gray-200" />
<a href="{{ route('dashboard') }}" class="group flex items-center gap-2">
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white shadow-lg shadow-indigo-500/30 group-hover:scale-105 transition-transform duration-300">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<span class="font-outfit font-bold text-xl tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-400 dark:to-purple-400 hidden sm:block">
WebGIS Kesra
</span>
</a>
</div>
<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
<div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex font-medium font-outfit">
<x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
{{ __('Dashboard') }}
</x-nav-link>
@if(Auth::user()->role === 'admin')
<x-nav-link :href="route('ibadah.index')" :active="request()->routeIs('ibadah.index')">
{{ __('Daftar Tempat Ibadah') }}
</x-nav-link>
@endif
<x-nav-link :href="route('penerima.index')" :active="request()->routeIs('penerima.index')">
{{ __('Daftar Penerima Bantuan') }}
</x-nav-link>
@if(Auth::user()->role !== 'admin')
<x-nav-link :href="route('laporan.index')" :active="request()->routeIs('laporan.*')">
{{ __('Laporan Warga') }}
</x-nav-link>
<x-nav-link :href="route('scan.index')" :active="request()->routeIs('scan.index')">
{{ __('Scan Kupon') }}
</x-nav-link>
@endif
<x-nav-link :href="route('riwayat.index')" :active="request()->routeIs('riwayat.*')">
{{ __('Riwayat Penyaluran') }}
</x-nav-link>
</div>
</div>
<!-- Settings Dropdown -->
<div class="hidden sm:flex sm:items-center sm:ms-6">
<div class="hidden sm:flex sm:items-center sm:ms-6 font-outfit">
<x-dropdown align="right" width="48">
<x-slot name="trigger">
<button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150">
<button class="inline-flex items-center px-4 py-2 border border-slate-200/50 dark:border-slate-700/50 text-sm leading-4 font-medium rounded-xl text-slate-600 dark:text-slate-300 bg-white/50 dark:bg-slate-800/50 hover:bg-slate-50 hover:text-slate-800 dark:hover:bg-slate-800 dark:hover:text-slate-200 focus:outline-none transition ease-in-out duration-150 backdrop-blur-md shadow-sm">
<div>{{ Auth::user()->name }}</div>
<div class="ms-1">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<div class="ms-2 bg-slate-200/50 dark:bg-slate-700/50 rounded-full p-1">
<svg class="fill-current h-3 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</div>
@@ -60,7 +83,7 @@
<!-- Hamburger -->
<div class="-me-2 flex items-center sm:hidden">
<button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out">
<button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-xl text-slate-400 dark:text-slate-500 hover:text-slate-500 dark:hover:text-slate-400 hover:bg-slate-100/50 dark:hover:bg-slate-800/50 focus:outline-none focus:bg-slate-100/50 dark:focus:bg-slate-800/50 focus:text-slate-500 dark:focus:text-slate-400 transition duration-150 ease-in-out backdrop-blur-sm border border-transparent hover:border-slate-200 dark:hover:border-slate-700">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
<path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
@@ -71,27 +94,43 @@
</div>
<!-- Responsive Navigation Menu -->
<div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
<div class="pt-2 pb-3 space-y-1">
<div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl border-b border-slate-200/50 dark:border-slate-800/50 absolute w-full shadow-lg">
<div class="pt-2 pb-3 space-y-1 font-outfit">
<x-responsive-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
{{ __('Dashboard') }}
</x-responsive-nav-link>
<x-responsive-nav-link :href="route('penerima.index')" :active="request()->routeIs('penerima.index')">
{{ __('Daftar Penerima Bantuan') }}
</x-responsive-nav-link>
@if(Auth::user()->role !== 'admin')
<x-responsive-nav-link :href="route('laporan.index')" :active="request()->routeIs('laporan.*')">
{{ __('Laporan Warga') }}
</x-responsive-nav-link>
<x-responsive-nav-link :href="route('scan.index')" :active="request()->routeIs('scan.index')">
{{ __('Scan Kupon') }}
</x-responsive-nav-link>
@endif
@if(Auth::user()->role === 'admin')
<x-responsive-nav-link :href="route('ibadah.index')" :active="request()->routeIs('ibadah.index')">
{{ __('Daftar Tempat Ibadah') }}
</x-responsive-nav-link>
@endif
<x-responsive-nav-link :href="route('riwayat.index')" :active="request()->routeIs('riwayat.*')">
{{ __('Riwayat Penyaluran') }}
</x-responsive-nav-link>
</div>
<!-- Responsive Settings Options -->
<div class="pt-4 pb-1 border-t border-gray-200 dark:border-gray-600">
<div class="px-4">
<div class="font-medium text-base text-gray-800 dark:text-gray-200">{{ Auth::user()->name }}</div>
<div class="font-medium text-sm text-gray-500">{{ Auth::user()->email }}</div>
<div class="pt-4 pb-1 border-t border-slate-200/50 dark:border-slate-700/50">
<div class="px-4 pb-2">
<div class="font-bold font-outfit text-base text-slate-800 dark:text-slate-200">{{ Auth::user()->name }}</div>
<div class="font-medium text-sm text-slate-500 dark:text-slate-400">{{ Auth::user()->email }}</div>
</div>
<div class="mt-3 space-y-1">
<div class="mt-3 space-y-1 font-outfit">
<x-responsive-nav-link :href="route('profile.edit')">
{{ __('Profile') }}
</x-responsive-nav-link>