334 lines
12 KiB
PHP
334 lines
12 KiB
PHP
<!doctype html>
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
|
|
|
<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>
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
|
rel="stylesheet">
|
|
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
<!-- Scripts -->
|
|
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
|
|
|
|
<style>
|
|
:root {
|
|
--primary-color: #4F46E5;
|
|
--primary-hover: #4338CA;
|
|
--secondary-color: #38BDF8;
|
|
--accent-color: #8B5CF6;
|
|
--bg-gradient-start: #EEF2FF;
|
|
--bg-gradient-end: #E0E7FF;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Poppins', sans-serif;
|
|
background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
#app {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.navbar-brand {
|
|
font-weight: 700;
|
|
font-size: 1.5rem;
|
|
background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.navbar-brand:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.nav-link {
|
|
font-weight: 500;
|
|
position: relative;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.nav-link:after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 0;
|
|
height: 2px;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: var(--primary-color);
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.nav-link:hover:after {
|
|
width: 100%;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
border-radius: 0.5rem;
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
border: none;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.dropdown-item {
|
|
border-radius: 0.375rem;
|
|
transition: all 0.2s ease;
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
|
|
.dropdown-item:hover {
|
|
background-color: #EEF2FF;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
main {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
/* Custom animated navbar */
|
|
.custom-navbar {
|
|
background-color: rgba(255, 255, 255, 0.9) !important;
|
|
backdrop-filter: blur(10px);
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
padding: 1rem 0;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.custom-navbar.scrolled {
|
|
padding: 0.5rem 0;
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.btn-primary-custom {
|
|
background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
|
|
border: none;
|
|
border-radius: 0.5rem;
|
|
color: white;
|
|
font-weight: 500;
|
|
padding: 0.5rem 1.25rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-primary-custom:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.4);
|
|
}
|
|
|
|
.notification-badge {
|
|
position: absolute;
|
|
top: -5px;
|
|
right: -5px;
|
|
background: var(--accent-color);
|
|
color: white;
|
|
border-radius: 50%;
|
|
width: 18px;
|
|
height: 18px;
|
|
font-size: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.user-avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
border: 2px solid var(--primary-color);
|
|
}
|
|
|
|
.avatar-wrapper {
|
|
position: relative;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.status-indicator {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background-color: #10B981;
|
|
border: 2px solid white;
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
background-color: rgba(255, 255, 255, 0.9);
|
|
backdrop-filter: blur(10px);
|
|
padding: 1.5rem 0;
|
|
margin-top: auto;
|
|
}
|
|
|
|
/* Animated background for special sections */
|
|
.animated-bg {
|
|
position: relative;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
}
|
|
|
|
.animated-bg:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: linear-gradient(45deg,
|
|
rgba(79, 70, 229, 0.1) 0%,
|
|
rgba(56, 189, 248, 0.1) 33%,
|
|
rgba(139, 92, 246, 0.1) 66%,
|
|
rgba(79, 70, 229, 0.1) 100%);
|
|
animation: rotate 20s linear infinite;
|
|
z-index: -1;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<nav class="navbar navbar-expand-md custom-navbar navbar-light sticky-top">
|
|
<div class="container">
|
|
<a class="navbar-brand d-flex align-items-center" href="{{ url('/') }}">
|
|
<i class="fas fa-cube me-2"></i>
|
|
{{ config('app.name', 'Laravel') }}
|
|
</a>
|
|
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
|
|
aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
<!-- Left Side Of Navbar -->
|
|
<ul class="navbar-nav me-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{{ url('/') }}">
|
|
<i class="fas fa-tachometer-alt me-1"></i> Venue
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{{ url('/booking/history') }}">
|
|
<i class="fas fa-tasks me-1"></i> Riwayat Booking
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- Right Side Of Navbar -->
|
|
<ul class="navbar-nav ms-auto">
|
|
<!-- Authentication Links -->
|
|
@guest
|
|
@if (Route::has('login'))
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{{ route('login') }}">
|
|
<i class="fas fa-sign-in-alt me-1"></i> {{ __('Login') }}
|
|
</a>
|
|
</li>
|
|
@endif
|
|
|
|
@if (Route::has('register'))
|
|
<li class="nav-item">
|
|
<a class="btn btn-primary-custom" href="{{ route('register') }}">
|
|
<i class="fas fa-user-plus me-1"></i> {{ __('Register') }}
|
|
</a>
|
|
</li>
|
|
@endif
|
|
@else
|
|
<li class="nav-item dropdown">
|
|
<a id="navbarDropdown" class="nav-link dropdown-toggle d-flex align-items-center" href="#"
|
|
role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
|
|
v-pre>
|
|
<div class="avatar-wrapper">
|
|
<img src="https://ui-avatars.com/api/?name={{ urlencode(Auth::user()->name) }}&background=4F46E5&color=fff"
|
|
alt="User Avatar" class="user-avatar">
|
|
<span class="status-indicator"></span>
|
|
</div>
|
|
<span>{{ Auth::user()->name }}</span>
|
|
</a>
|
|
|
|
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
|
|
<a class="dropdown-item" href="{{ route('account.settings') }}">
|
|
<i class="fas fa-cog me-2"></i> {{ __('Settings') }}
|
|
</a>
|
|
<a class="dropdown-item" href="{{ route('account.settings') }}">
|
|
<i class="fas fa-user-circle me-2"></i> {{ __('Profile') }}
|
|
</a>
|
|
<hr class="dropdown-divider">
|
|
<a class="dropdown-item text-danger" href="{{ route('logout') }}"
|
|
onclick="event.preventDefault();
|
|
document.getElementById('logout-form').submit();">
|
|
<i class="fas fa-sign-out-alt me-2"></i> {{ __('Logout') }}
|
|
</a>
|
|
|
|
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
|
|
@csrf
|
|
</form>
|
|
</div>
|
|
</li>
|
|
@endguest
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="py-4">
|
|
@yield('content')
|
|
</main>
|
|
|
|
<footer class="mt-auto">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<p class="mb-0">© {{ date('Y') }} {{ config('app.name', 'Laravel') }}. All rights reserved.
|
|
</p>
|
|
</div>
|
|
<div class="col-md-6 text-md-end">
|
|
<a href="#" class="text-decoration-none me-3"><i class="fab fa-facebook-f"></i></a>
|
|
<a href="#" class="text-decoration-none me-3"><i class="fab fa-twitter"></i></a>
|
|
<a href="#" class="text-decoration-none me-3"><i class="fab fa-instagram"></i></a>
|
|
<a href="#" class="text-decoration-none"><i class="fab fa-linkedin-in"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<script>
|
|
// Navbar scroll effect
|
|
window.addEventListener('scroll', function () {
|
|
const navbar = document.querySelector('.custom-navbar');
|
|
if (window.scrollY > 10) {
|
|
navbar.classList.add('scrolled');
|
|
} else {
|
|
navbar.classList.remove('scrolled');
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |