413 lines
17 KiB
PHP
413 lines
17 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>@yield('title') - TaniDesa</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=Open+Sans:wght@400;600&family=Raleway:wght@600;800&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: #ffc107;
|
|
--light-bg: #f8f9fa;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Open Sans', sans-serif;
|
|
background-color: var(--light-bg);
|
|
}
|
|
|
|
|
|
.text-primary {
|
|
color: var(--primary-color) !important;
|
|
}
|
|
|
|
.bg-primary {
|
|
background-color: var(--primary-color) !important;
|
|
}
|
|
|
|
.border-primary {
|
|
border-color: var(--primary-color) !important;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.btn-outline-primary {
|
|
color: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.btn-outline-primary:hover {
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: var(--secondary-color);
|
|
border-color: var(--secondary-color);
|
|
color: #333;
|
|
}
|
|
|
|
.navbar-light .navbar-nav .nav-link.active,
|
|
.navbar-light .navbar-nav .nav-link:hover {
|
|
color: var(--primary-color) !important;
|
|
}
|
|
|
|
.rounded-pill {
|
|
border-radius: 50rem !important;
|
|
}
|
|
|
|
.rounded-4 {
|
|
border-radius: 1rem !important;
|
|
}
|
|
|
|
.card {
|
|
border: none;
|
|
border-radius: 16px;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.footer-accent {
|
|
border-bottom: 1px solid rgba(129, 196, 8, 0.5);
|
|
}
|
|
|
|
/* Chat Section */
|
|
.chat-container {
|
|
height: 80vh;
|
|
background: #fff;
|
|
border-radius: 15px;
|
|
overflow: hidden;
|
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.chat-sidebar {
|
|
background-color: #f8f9fa;
|
|
border-right: 1px solid #e9ecef;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.chat-list-item {
|
|
transition: all 0.2s;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.chat-list-item:hover {
|
|
background-color: #e9ecef;
|
|
}
|
|
|
|
.chat-list-item.active {
|
|
background-color: #e3f2fd;
|
|
border-left: 4px solid #81c408;
|
|
}
|
|
|
|
.chat-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.chat-header {
|
|
padding: 15px;
|
|
border-bottom: 1px solid #e9ecef;
|
|
background: #fff;
|
|
z-index: 10;
|
|
}
|
|
|
|
.chat-box {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 20px;
|
|
background-color: #fcfcfc;
|
|
background-image: radial-gradient(#81c408 0.5px, transparent 0.5px);
|
|
background-size: 20px 20px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Bubble Chat */
|
|
.message-bubble {
|
|
max-width: 70%;
|
|
padding: 10px 15px;
|
|
border-radius: 15px;
|
|
margin-bottom: 10px;
|
|
position: relative;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.message-me {
|
|
background-color: #81c408;
|
|
color: white;
|
|
border-bottom-right-radius: 2px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.message-other {
|
|
background-color: #e9ecef;
|
|
color: #333;
|
|
border-bottom-left-radius: 2px;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.chat-footer {
|
|
padding: 15px;
|
|
background: #fff;
|
|
border-top: 1px solid #e9ecef;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #ccc;
|
|
border-radius: 3px;
|
|
}
|
|
</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-grow text-primary" role="status"></div>
|
|
</div>
|
|
<div class="container-fluid fixed-top">
|
|
<div class="container-fluid bg-primary d-none d-lg-block">
|
|
<div class="container">
|
|
<div class="topbar">
|
|
<div class="d-flex justify-content-between">
|
|
<div class="top-info ps-2">
|
|
<small class="me-3"><i class="fas fa-map-marker-alt me-2 text-secondary"></i> <a
|
|
href="#" class="text-white">Desa Sukamaju, Indonesia</a></small>
|
|
<small class="me-3"><i class="fas fa-envelope me-2 text-secondary"></i><a href="#"
|
|
class="text-white">info@tanidesa.com</a></small>
|
|
</div>
|
|
<div class="top-link pe-2">
|
|
<a href="#" class="text-white"><small class="text-white mx-2">Kebijakan
|
|
Privasi</small>/</a>
|
|
<a href="#" class="text-white"><small class="text-white mx-2">Syarat &
|
|
Ketentuan</small></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container-fluid bg-white shadow-sm">
|
|
<div class="container">
|
|
<nav class="navbar navbar-light navbar-expand-xl">
|
|
<a href="{{ url('/') }}" class="navbar-brand">
|
|
<h1 class="text-primary display-6">TaniDesa</h1>
|
|
</a>
|
|
<button class="navbar-toggler py-2 px-3" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#navbarCollapse">
|
|
<span class="fa fa-bars text-primary"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse bg-white" id="navbarCollapse">
|
|
<div class="navbar-nav mx-auto">
|
|
<a href="{{ url('/') }}"
|
|
class="nav-item nav-link {{ request()->is('/') ? 'active' : '' }}">Home</a>
|
|
<a href="{{ route('shop') }}"
|
|
class="nav-item nav-link {{ request()->is('shop*') ? 'active' : '' }}">Belanja</a>
|
|
<a href="#" class="nav-item nav-link">Kontak</a>
|
|
</div>
|
|
|
|
<div class="d-flex m-3 me-0 align-items-center">
|
|
<form action="{{ route('shop') }}" method="GET" class="d-flex me-4">
|
|
<div class="input-group">
|
|
<input type="search" name="search" class="form-control border border-secondary"
|
|
placeholder="Cari..." value="{{ request('search') }}"
|
|
style="border-radius: 20px 0 0 20px;">
|
|
<button class="btn btn-outline-secondary border border-secondary" type="submit"
|
|
style="border-radius: 0 20px 20px 0;">
|
|
<i class="fas fa-search text-primary"></i>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<a href="{{ route('cart') }}" class="position-relative me-4 my-auto">
|
|
<i class="fa fa-shopping-bag fa-2x text-dark"></i>
|
|
<span
|
|
class="position-absolute bg-secondary rounded-circle d-flex align-items-center justify-content-center text-dark px-1"
|
|
style="top: -5px; left: 15px; height: 20px; min-width: 20px;">
|
|
{{ count((array) session('cart')) }}
|
|
</span>
|
|
</a>
|
|
|
|
@if (Auth::guard('pembeli')->check())
|
|
<div class="nav-item dropdown">
|
|
<a href="#" class="nav-link dropdown-toggle my-auto text-dark fw-bold"
|
|
data-bs-toggle="dropdown">
|
|
<i class="fas fa-user fa-2x me-1"></i>
|
|
<span
|
|
class="d-none d-xl-inline">{{ Auth::guard('pembeli')->user()->nama_lengkap }}</span>
|
|
</a>
|
|
<div class="dropdown-menu m-0 bg-secondary rounded-0">
|
|
<a href="{{ route('pembeli.profile') }}" class="dropdown-item">Profil Saya</a>
|
|
<a href="{{ route('pembeli.pesan.index') }}" class="dropdown-item">Pesan
|
|
Saya</a>
|
|
<a href="{{ route('pesanan.saya') }}" class="dropdown-item">Pesanan Saya</a>
|
|
<form action="{{ route('logout') }}" method="POST">
|
|
@csrf
|
|
<button type="submit" class="dropdown-item">Logout</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<a href="{{ route('login') }}" class="my-auto btn btn-primary rounded-pill px-4">
|
|
<i class="fas fa-user me-2"></i> Login
|
|
</a>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top: 150px;">
|
|
@if (session('success'))
|
|
<div class="container mt-3">
|
|
<div class="alert alert-success alert-dismissible fade show shadow-sm" role="alert">
|
|
<i class="fa fa-check-circle me-2"></i> {{ session('success') }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
@yield('content')
|
|
</div>
|
|
<div class="container-fluid bg-dark text-white-50 footer">
|
|
<div class="container py-5">
|
|
<div class="pb-4 mb-4 footer-accent">
|
|
<div class="row g-4">
|
|
<div class="col-lg-3">
|
|
<a href="#">
|
|
<h1 class="text-primary mb-0">TaniDesa</h1>
|
|
<p class="text-secondary mb-0">Platform Pangan Langsung Petani</p>
|
|
</a>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="position-relative mx-auto">
|
|
<input class="form-control border-0 w-100 py-3 px-4 rounded-pill" type="text"
|
|
placeholder="Email Anda">
|
|
<button type="submit"
|
|
class="btn btn-primary border-0 border-secondary py-3 px-4 position-absolute rounded-pill text-white"
|
|
style="top: 0; right: 0;">Langganan</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3">
|
|
<div class="d-flex justify-content-end pt-3">
|
|
<a class="btn btn-outline-secondary me-2 btn-md-square rounded-circle" href=""><i
|
|
class="fab fa-twitter"></i></a>
|
|
<a class="btn btn-outline-secondary me-2 btn-md-square rounded-circle" href=""><i
|
|
class="fab fa-facebook-f"></i></a>
|
|
<a class="btn btn-outline-secondary me-2 btn-md-square rounded-circle" href=""><i
|
|
class="fab fa-youtube"></i></a>
|
|
<a class="btn btn-outline-secondary btn-md-square rounded-circle" href=""><i
|
|
class="fab fa-linkedin-in"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row g-5">
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="footer-item">
|
|
<h4 class="text-light mb-3">Tentang Kami</h4>
|
|
<p class="mb-4">TaniDesa memotong rantai pasok yang panjang, memberikan harga terbaik untuk
|
|
petani dan kesegaran maksimal untuk pembeli.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="d-flex flex-column text-start footer-item">
|
|
<h4 class="text-light mb-3">Menu Cepat</h4>
|
|
<a class="btn-link" href="{{ route('shop') }}">Belanja Sekarang</a>
|
|
<a class="btn-link" href="#">Hubungi Kami</a>
|
|
<a class="btn-link" href="#">Syarat & Ketentuan</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="d-flex flex-column text-start footer-item">
|
|
<h4 class="text-light mb-3">Akun</h4>
|
|
<a class="btn-link" href="{{ route('pembeli.profile') }}">Profil Saya</a>
|
|
<a class="btn-link" href="{{ route('cart') }}">Keranjang Belanja</a>
|
|
<a class="btn-link" href="{{ route('pesanan.saya') }}">Riwayat Pesanan</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="footer-item">
|
|
<h4 class="text-light mb-3">Kontak</h4>
|
|
<p>Alamat: Desa Sukamaju, Nganjuk</p>
|
|
<p>Email: info@tanidesa.com</p>
|
|
<p>WA: +62 812 3456 7890</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container-fluid copyright bg-dark py-4" style="border-top: 1px solid rgba(255,255,255,0.1);">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-6 text-center text-md-start mb-3 mb-md-0">
|
|
<span class="text-light"><a href="#"><i
|
|
class="fas fa-copyright text-light me-2"></i>TaniDesa</a>, All right
|
|
reserved.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="#" class="btn btn-primary border-3 border-primary rounded-circle back-to-top"><i
|
|
class="fa fa-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>
|