387 lines
16 KiB
PHP
387 lines
16 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>@yield('title') - GriyaPadi.id</title>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
|
|
<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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" />
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">
|
|
|
|
<link href="{{ asset('template/frontend/lib/lightbox/css/lightbox.min.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('template/frontend/lib/owlcarousel/assets/owl.carousel.min.css') }}" rel="stylesheet">
|
|
|
|
<link href="{{ asset('template/frontend/css/bootstrap.min.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('template/frontend/css/style.css') }}" rel="stylesheet">
|
|
|
|
@yield('css')
|
|
|
|
<style>
|
|
:root {
|
|
--primary-color: #81c408;
|
|
--primary-hover: #6da705;
|
|
--secondary-color: #ffc107f6;
|
|
--light-bg: #f5f7f9;
|
|
--dark-text: #2c3e50;
|
|
--muted-text: #6c757d;
|
|
}
|
|
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: var(--light-bg);
|
|
color: var(--dark-text);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 700;
|
|
color: var(--dark-text);
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
/* Utility Colors */
|
|
.text-primary {
|
|
color: var(--primary-color) !important;
|
|
}
|
|
|
|
.bg-primary {
|
|
background-color: var(--primary-color) !important;
|
|
}
|
|
|
|
.border-primary {
|
|
border-color: var(--primary-color) !important;
|
|
}
|
|
|
|
/* BUTTON */
|
|
.btn {
|
|
font-weight: 500;
|
|
border-radius: 6px;
|
|
padding: 0.5rem 1.25rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: var(--primary-hover);
|
|
border-color: var(--primary-hover);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn-outline-primary {
|
|
color: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.btn-outline-primary:hover {
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
}
|
|
|
|
/* NAVBAR */
|
|
.navbar {
|
|
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.navbar-light .navbar-nav .nav-link {
|
|
font-weight: 500;
|
|
color: var(--dark-text);
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.navbar-light .navbar-nav .nav-link.active,
|
|
.navbar-light .navbar-nav .nav-link:hover {
|
|
color: var(--primary-color) !important;
|
|
}
|
|
|
|
/* FORM INPUTS */
|
|
.form-control {
|
|
border-radius: 6px;
|
|
border: 1px solid #dee2e6;
|
|
padding: 0.6rem 1rem;
|
|
}
|
|
|
|
.form-control:focus {
|
|
box-shadow: 0 0 0 3px rgba(129, 196, 8, 0.15);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
/* CARDS */
|
|
.card {
|
|
border: 1px solid rgba(0, 0, 0, 0.05);
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
|
|
transition: 0.3s;
|
|
background: #fff;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* CHAT SECTION */
|
|
.chat-container {
|
|
height: 80vh;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
border: 1px solid #e9ecef;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.message-bubble {
|
|
max-width: 75%;
|
|
padding: 10px 16px;
|
|
border-radius: 8px;
|
|
margin-bottom: 8px;
|
|
font-size: 0.9rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.message-me {
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
border-bottom-right-radius: 2px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.message-other {
|
|
background-color: #f1f3f5;
|
|
color: var(--dark-text);
|
|
border-bottom-left-radius: 2px;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* SCROLLBAR */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #ccc;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #bbb;
|
|
}
|
|
|
|
/* Footer Accent */
|
|
.footer-accent {
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="spinner"
|
|
class="show w-100 vh-100 bg-white position-fixed translate-middle top-50 start-50 d-flex align-items-center justify-content-center">
|
|
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;"></div>
|
|
</div>
|
|
|
|
<div class="container-fluid fixed-top px-0">
|
|
<div class="container-fluid bg-primary d-none d-lg-block py-3">
|
|
<div class="container">
|
|
<div class="d-flex justify-content-between text-white" style="font-size: 0.85rem;">
|
|
<div>
|
|
<span class="me-3"><i class="fas fa-map-marker-alt me-2"></i> Desa Sukamaju, Indonesia</span>
|
|
<span class="me-3"><i class="fas fa-envelope me-2"></i> info@tanidesa.com</span>
|
|
</div>
|
|
<div>
|
|
<a href="#" class="text-white text-decoration-none me-2">Bantuan</a>
|
|
<span class="text-white-50">|</span>
|
|
<a href="#" class="text-white text-decoration-none ms-2">Ikuti Kami</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container-fluid bg-white shadow-sm">
|
|
<div class="container">
|
|
<nav class="navbar navbar-light navbar-expand-xl py-3">
|
|
<a href="{{ url('/') }}" class="navbar-brand d-flex align-items-center">
|
|
<h1 class="text-primary m-0 fw-bold" style="font-size: 1.8rem; letter-spacing: -1px;">GriyaPadi.id
|
|
</h1>
|
|
</a>
|
|
|
|
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#navbarCollapse">
|
|
<span class="fa fa-bars text-primary"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarCollapse">
|
|
<div class="navbar-nav mx-auto">
|
|
<a href="{{ url('/') }}"
|
|
class="nav-item nav-link mx-2 {{ request()->is('/') ? 'active' : '' }}">Home</a>
|
|
<a href="{{ route('shop') }}"
|
|
class="nav-item nav-link mx-2 {{ request()->is('shop*') ? 'active' : '' }}">Belanja</a>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-center mt-3 mt-xl-0">
|
|
<form action="{{ route('shop') }}" method="GET" class="me-3 d-none d-md-flex">
|
|
<div class="input-group">
|
|
<input type="search" name="search" class="form-control border-end-0"
|
|
placeholder="Cari produk..." value="{{ request('search') }}"
|
|
style="border-radius: 6px 0 0 6px;">
|
|
<button class="btn btn-outline-secondary border-start-0" type="submit"
|
|
style="border-radius: 0 6px 6px 0; border-color: #dee2e6;">
|
|
<i class="fas fa-search text-muted"></i>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<a href="{{ route('cart') }}" class="position-relative me-3 text-dark">
|
|
<i class="bi bi-bag fs-4"></i> <span
|
|
class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"
|
|
style="font-size: 0.6rem;">
|
|
{{ count((array) session('cart')) }}
|
|
</span>
|
|
</a>
|
|
|
|
@if (Auth::guard('pembeli')->check())
|
|
<div class="nav-item dropdown ms-2">
|
|
<a href="#"
|
|
class="nav-link dropdown-toggle text-dark fw-bold d-flex align-items-center"
|
|
data-bs-toggle="dropdown">
|
|
<div class="bg-light rounded-circle d-flex align-items-center justify-content-center me-2"
|
|
style="width: 35px; height: 35px;">
|
|
<i class="fas fa-user text-primary"></i>
|
|
</div>
|
|
<span
|
|
class="d-none d-xl-inline small">{{ Auth::guard('pembeli')->user()->nama_lengkap }}</span>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-end border-0 shadow-sm m-0 rounded-3">
|
|
<a href="{{ route('pembeli.profile') }}" class="dropdown-item py-2"><i
|
|
class="bi bi-person me-2"></i> Profil</a>
|
|
<a href="{{ route('pembeli.pesan.index') }}" class="dropdown-item py-2"><i
|
|
class="bi bi-chat-dots me-2"></i> Pesan</a>
|
|
<a href="{{ route('pesanan.saya') }}" class="dropdown-item py-2"><i
|
|
class="bi bi-bag-check me-2"></i> Riwayat Pesanan</a>
|
|
<div class="dropdown-divider"></div>
|
|
<form action="{{ route('logout') }}" method="POST">
|
|
@csrf
|
|
<button type="submit" class="dropdown-item py-2 text-danger"><i
|
|
class="bi bi-box-arrow-right me-2"></i> Logout</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<a href="{{ route('login') }}" class="btn btn-primary px-4 ms-2">
|
|
Login
|
|
</a>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 170px;">
|
|
@if (session('success'))
|
|
<div class="container mt-4">
|
|
<div class="alert alert-success border-0 shadow-sm rounded-3 d-flex align-items-center"
|
|
role="alert">
|
|
<i class="bi bi-check-circle-fill fs-4 me-3"></i>
|
|
<div>{{ session('success') }}</div>
|
|
<button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
@yield('content')
|
|
</div>
|
|
|
|
<div class="container-fluid bg-dark text-white-50 footer mt-5 pt-5">
|
|
<div class="container py-5">
|
|
<div class="row g-5">
|
|
<div class="col-lg-3 col-md-6">
|
|
<h3 class="text-white mb-4">GriyaPadi.id</h3>
|
|
<p class="mb-4 small">Menghubungkan petani lokal langsung dengan pembeli untuk harga yang adil dan
|
|
produk berkualitas tinggi.</p>
|
|
<div class="d-flex pt-2">
|
|
<a class="btn btn-outline-light btn-sm rounded-circle me-2" href=""><i
|
|
class="fab fa-twitter"></i></a>
|
|
<a class="btn btn-outline-light btn-sm rounded-circle me-2" href=""><i
|
|
class="fab fa-facebook-f"></i></a>
|
|
<a class="btn btn-outline-light btn-sm rounded-circle" href=""><i
|
|
class="fab fa-youtube"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6">
|
|
<h5 class="text-white mb-4">Tautan Cepat</h5>
|
|
<div class="d-flex flex-column justify-content-start">
|
|
<a class="text-white-50 mb-2 text-decoration-none" href="{{ route('shop') }}"><i
|
|
class="bi bi-chevron-right me-2 small"></i>Belanja</a>
|
|
<a class="text-white-50 mb-2 text-decoration-none" href="#"><i
|
|
class="bi bi-chevron-right me-2 small"></i>Tentang Kami</a>
|
|
<a class="text-white-50 text-decoration-none" href="#"><i
|
|
class="bi bi-chevron-right me-2 small"></i>Hubungi Kami</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6">
|
|
<h5 class="text-white mb-4">Akun Saya</h5>
|
|
<div class="d-flex flex-column justify-content-start">
|
|
<a class="text-white-50 mb-2 text-decoration-none" href="{{ route('pembeli.profile') }}"><i
|
|
class="bi bi-chevron-right me-2 small"></i>Profil</a>
|
|
<a class="text-white-50 mb-2 text-decoration-none" href="{{ route('cart') }}"><i
|
|
class="bi bi-chevron-right me-2 small"></i>Keranjang</a>
|
|
<a class="text-white-50 text-decoration-none" href="{{ route('pesanan.saya') }}"><i
|
|
class="bi bi-chevron-right me-2 small"></i>Riwayat Pesanan</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6">
|
|
<h5 class="text-white mb-4">Hubungi Kami</h5>
|
|
<p class="small mb-2"><i class="fa fa-map-marker-alt me-3"></i>Desa Sukamaju, Nganjuk</p>
|
|
<p class="small mb-2"><i class="fa fa-envelope me-3"></i>info@tanidesa.com</p>
|
|
<p class="small mb-0"><i class="fa fa-phone-alt me-3"></i>+62 812 3456 7890</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container-fluid copyright bg-dark py-4 border-top border-secondary">
|
|
<div class="container text-center">
|
|
<span class="text-white-50 small">© <a href="#" class="text-white">GriyaPadi.id</a>, All Right
|
|
Reserved.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="#" class="btn btn-primary btn-lg-square rounded-circle back-to-top shadow"><i
|
|
class="bi bi-arrow-up"></i></a>
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="{{ asset('template/frontend/lib/easing/easing.min.js') }}"></script>
|
|
<script src="{{ asset('template/frontend/lib/waypoints/waypoints.min.js') }}"></script>
|
|
<script src="{{ asset('template/frontend/lib/lightbox/js/lightbox.min.js') }}"></script>
|
|
<script src="{{ asset('template/frontend/lib/owlcarousel/owl.carousel.min.js') }}"></script>
|
|
<script src="{{ asset('template/frontend/js/main.js') }}"></script>
|
|
|
|
@yield('js')
|
|
</body>
|
|
|
|
</html>
|