ECOMMERCE/resources/views/404/grocery.blade.php

354 lines
21 KiB
PHP

@extends('layouts.base', ['title' => 'Grocery Store - 404 Error'])
@section('content')
@include('layouts.partials/offcanvas2')
<!-- Delivey options offcanvas -->
<div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="deliveryOptions" tabindex="-1"
aria-labelledby="deliveryOptionsLabel" style="width: 500px">
<!-- Header with nav tabs -->
<div class="offcanvas-header flex-column align-items-start py-3 pt-lg-4">
<div class="d-flex align-items-center justify-content-between w-100 pb-xl-1 mb-4">
<h4 class="offcanvas-title" id="deliveryOptionsLabel">Delivery options</h4>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<ul class="nav nav-pills nav-justified w-100" role="tablist">
<li class="nav-item" role="presentation">
<button type="button" class="nav-link active" id="delivery-tab" data-bs-toggle="tab"
data-bs-target="#delivery-tab-pane" role="tab" aria-controls="delivery-tab-pane"
aria-selected="true">
<i class="ci-shopping-bag fs-base ms-n1 me-2"></i>
Delivery
</button>
</li>
<li class="nav-item" role="presentation">
<button type="button" class="nav-link" id="pickup-tab" data-bs-toggle="tab"
data-bs-target="#pickup-tab-pane" role="tab" aria-controls="pickup-tab-pane"
aria-selected="false">
<i class="ci-box fs-base ms-n1 me-2"></i>
Pickup
</button>
</li>
</ul>
</div>
<div class="offcanvas-body tab-content py-2 py-sm-3">
<!-- Delivery tab -->
<div class="tab-pane fade show active" id="delivery-tab-pane" role="tabpanel"
aria-labelledby="delivery-tab">
<!-- Address options collapse -->
<div class="collapse delivery-address show" id="deliveryAddressOptions">
<div class="mt-n3">
<div class="form-check border-bottom py-4 m-0">
<input type="radio" class="form-check-input" id="address-1" name="delivery-address"
checked>
<label for="address-1" class="form-check-label text-dark-emphasis fw-semibold">567 Cherry Lane
Apt B12 Sacramento, 95829</label>
</div>
<div class="form-check border-bottom py-4 m-0">
<input type="radio" class="form-check-input" id="address-2" name="delivery-address">
<div class="d-flex w-100">
<label for="address-2" class="form-check-label text-dark-emphasis me-3">1901 Thornridge
Cir.
Shiloh, Hawaii, 81063</label>
<button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
aria-label="Remove"></button>
</div>
</div>
<div class="form-check border-bottom py-4 m-0">
<input type="radio" class="form-check-input" id="address-3" name="delivery-address">
<div class="d-flex w-100">
<label for="address-3" class="form-check-label text-dark-emphasis me-3">3517 W. Gray St.
Utica, Pennsylvania, 57867</label>
<button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
aria-label="Remove"></button>
</div>
</div>
</div>
</div>
<!-- Add new address collapse -->
<div class="collapse delivery-address" id="deliveryAddressAdd">
<div class="nav mb-4">
<a class="nav-link animate-underline p-0" href=".delivery-address" data-bs-toggle="collapse"
aria-expanded="true" aria-controls="deliveryAddressOptions deliveryAddressAdd">
<i class="ci-chevron-left fs-lg ms-n1 me-1"></i>
<span class="animate-target">Back to my addresses</span>
</a>
</div>
<div class="d-flex align-items-center justify-content-between mb-3 mb-lg-4">
<h5 class="h6 mb-0 me-3">Add an address to start ordering</h5>
<a class="btn btn-sm btn-outline-primary rounded-pill" href="#!">
<i class="ci-map-pin fs-base ms-n1 me-1"></i>
Find on map
</a>
</div>
<div class="mb-3 mb-lg-4">
<label class="form-label">State *</label>
<select class="form-select form-select-lg rounded-pill"
data-select='{
"classNames": {
"containerInner": ["form-select", "form-select-lg", "rounded-pill"]
}
}'
aria-label="Large pill select">
<option value="">Select state</option>
<option value="Arizona">Arizona</option>
<option value="California">California</option>
<option value="Montana">Montana</option>
<option value="Nevada">Nevada</option>
<option value="New Mexico">New Mexico</option>
<option value="Texas">Texas</option>
</select>
</div>
<div class="mb-3 mb-lg-4">
<label for="my-postcode" class="form-label">Postcode *</label>
<input type="text" class="form-control form-control-lg rounded-pill" id="my-postcode">
</div>
<div class="mb-3 mb-lg-4">
<label class="form-label">City *</label>
<select class="form-select form-select-lg rounded-pill"
data-select='{
"classNames": {
"containerInner": ["form-select", "form-select-lg", "rounded-pill"]
}
}'
aria-label="Large pill select">
<option value="">Select city</option>
<option value="Austin">Austin</option>
<option value="Helena">Helena</option>
<option value="Sacramento">Sacramento</option>
<option value="Santa Fe">Santa Fe</option>
<option value="Las Vegas">Las Vegas</option>
<option value="Phoenix">Phoenix</option>
</select>
</div>
<label for="my-address" class="form-label">Street address *</label>
<input type="text" class="form-control form-control-lg rounded-pill" id="my-address">
</div>
<!-- Add address collapse toggle -->
<div class="nav">
<a class="nav-link hiding-collapse-toggle animate-underline collapsed px-0 mt-4"
href=".delivery-address" data-bs-toggle="collapse" aria-expanded="false"
aria-controls="deliveryAddressOptions deliveryAddressAdd">
<span class="animate-target">Add delivery address</span>
<i class="ci-plus fs-base ms-1"></i>
</a>
</div>
</div>
<!-- Pickup tab -->
<div class="tab-pane fade" id="pickup-tab-pane" role="tabpanel" aria-labelledby="pickup-tab">
<!-- Pickup store options collapse -->
<div class="collapse pickup-options show" id="pickupStoreOptions">
<div class="mt-n3">
<div class="form-check border-bottom py-4 m-0">
<input type="radio" class="form-check-input" id="store-1" name="pickup-store" checked>
<div>
<div class="d-flex w-100 pb-2 mb-1">
<label for="store-1"
class="form-check-label text-dark-emphasis fw-semibold me-3">Sacramento
Supercenter</label>
<button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
aria-label="Remove"></button>
</div>
<div class="fs-xs mb-2">8270 Delta Shores Cir S, Sacramento, CA 95832</div>
<div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 22:00</span>
</div>
</div>
</div>
<div class="form-check border-bottom py-4 m-0">
<input type="radio" class="form-check-input" id="store-2" name="pickup-store">
<div>
<div class="d-flex w-100 pb-2 mb-1">
<label for="store-2"
class="form-check-label text-dark-emphasis fw-semibold me-3">West Sacramento
Supercenter</label>
<button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
aria-label="Remove"></button>
</div>
<div class="fs-xs mb-2">755 Riverpoint Ct, West Sacramento, CA 95605</div>
<div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 21:00</span>
</div>
</div>
</div>
<div class="form-check border-bottom py-4 m-0">
<input type="radio" class="form-check-input" id="store-3" name="pickup-store">
<div>
<div class="d-flex w-100 pb-2 mb-1">
<label for="store-3"
class="form-check-label text-dark-emphasis fw-semibold me-3">Rancho Cordova
Supercenter</label>
<button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
aria-label="Remove"></button>
</div>
<div class="fs-xs mb-2">10655 Folsom Blvd, Rancho Cordova, CA 95670</div>
<div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">08:00 - 23:00</span>
</div>
</div>
</div>
</div>
</div>
<!-- Add new pickup store collapse -->
<div class="collapse pickup-options" id="pickupStoreAdd">
<div class="nav mb-4">
<a class="nav-link animate-underline p-0" href=".pickup-options" data-bs-toggle="collapse"
aria-expanded="true" aria-controls="pickupStoreOptions pickupStoreAdd">
<i class="ci-chevron-left fs-lg ms-n1 me-1"></i>
<span class="animate-target">Back to my stores</span>
</a>
</div>
<div class="d-flex align-items-center justify-content-between mb-3 mb-lg-4">
<h5 class="h6 mb-0 me-3">Select a suitable store</h5>
<a class="btn btn-sm btn-outline-primary rounded-pill" href="#!">
<i class="ci-map-pin fs-base ms-n1 me-1"></i>
Find on map
</a>
</div>
<div class="mb-3 mb-lg-4">
<label class="form-label">State *</label>
<select class="form-select form-select-lg rounded-pill"
data-select='{
"classNames": {
"containerInner": ["form-select", "form-select-lg", "rounded-pill"]
}
}'
aria-label="Large pill select">
<option value="">Select state</option>
<option value="Arizona">Arizona</option>
<option value="California" selected>California</option>
<option value="Montana">Montana</option>
<option value="Nevada">Nevada</option>
<option value="New Mexico">New Mexico</option>
<option value="Texas">Texas</option>
</select>
</div>
<div class="mb-4">
<label class="form-label">City *</label>
<select class="form-select form-select-lg rounded-pill"
data-select='{
"classNames": {
"containerInner": ["form-select", "form-select-lg", "rounded-pill"]
}
}'
aria-label="Large pill select">
<option value="">Select city</option>
<option value="Austin">Austin</option>
<option value="Helena">Helena</option>
<option value="Sacramento" selected>Sacramento</option>
<option value="Santa Fe">Santa Fe</option>
<option value="Las Vegas">Las Vegas</option>
<option value="Phoenix">Phoenix</option>
</select>
</div>
<div class="fs-xs fw-medium text-uppercase text-body-secondary">Found stores:</div>
<div class="form-check border-bottom py-4 m-0">
<input type="radio" class="form-check-input" id="store-4" name="found-store">
<div>
<label for="store-4"
class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">Sacramento
Supercenter</label>
<div class="fs-xs mb-2">8270 Delta Shores Cir S, Sacramento, CA 95832</div>
<div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 22:00</span>
</div>
</div>
</div>
<div class="form-check border-bottom py-4 m-0">
<input type="radio" class="form-check-input" id="store-5" name="found-store">
<div>
<label for="store-5" class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">West
Sacramento Supercenter</label>
<div class="fs-xs mb-2">755 Riverpoint Ct, West Sacramento, CA 95605</div>
<div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 21:00</span>
</div>
</div>
</div>
<div class="form-check border-bottom py-4 m-0">
<input type="radio" class="form-check-input" id="store-6" name="found-store">
<div>
<label for="store-6" class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">Rancho
Cordova Supercenter</label>
<div class="fs-xs mb-2">10655 Folsom Blvd, Rancho Cordova, CA 95670</div>
<div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">08:00 - 23:00</span>
</div>
</div>
</div>
</div>
<!-- Add address collapse toggle -->
<div class="nav">
<a class="nav-link hiding-collapse-toggle animate-underline collapsed px-0 mt-4"
href=".pickup-options" data-bs-toggle="collapse" aria-expanded="false"
aria-controls="pickupStoreOptions pickupStoreAdd">
<span class="animate-target">Add store address</span>
<i class="ci-plus fs-base ms-1"></i>
</a>
</div>
</div>
</div>
<!-- Footer -->
<div class="offcanvas-header">
<button type="button" class="btn btn-lg btn-primary w-100 rounded-pill">Confirm address</button>
</div>
</div>
<!-- Site menu offcanvas -->
@include('layouts.partials/menu-offcanvas')
@include('layouts.partials/checkout-navbar')
<!-- Page content -->
<main class="content-wrapper position-relative d-flex align-items-center justify-content-center overflow-hidden">
<section class="container position-relative z-2 py-5">
<div class="text-center px-2 px-sm-0 mx-auto" style="max-width: 636px">
<div class="position-relative mb-4 mb-sm-5 mx-auto" style="max-width: 542px">
<div class="ratio ratio-1x1 position-absolute top-50 start-0 translate-middle-y">
<img src="/img/404/grocery.png" class="animate-spin" alt="Lemon">
</div>
<svg class="text-dark-emphasis" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 542 182"
fill="currentColor">
<path
d="M150 117h-19.8V2c0-1.1-.9-2-2-2H76c-.7 0-1.3.4-1.7.9L.7 116.9c-.2.3-.3.7-.3 1.1v31.7c0 1.1.9 2 2 2h85.8v28.2c0 1.1.9 2 2 2h38c1.1 0 2-.9 2-2v-28.2H150c1.1 0 2-.9 2-2V119c0-1.1-.9-2-2-2zm-60.9 0H45.2a1.11 1.11 0 0 1-1.1-1.1c0-.2.1-.4.2-.6l42.8-67.9c.4-.6 1-.9 1.7-.9h.3V117zm450.5 0h-19.8V2c0-1.1-.9-2-2-2h-52.2c-.7 0-1.3.4-1.7.9l-73.6 115.9c-.2.3-.3.7-.3 1.1v31.7c0 1.1.9 2 2 2h85.8v28.2c0 1.1.9 2 2 2h38c1.1 0 2-.9 2-2v-28.2h19.8c1.1 0 2-.9 2-2V119c0-1.1-.9-2-2-2zm-104.8 0a1.11 1.11 0 0 1-1.1-1.1c0-.2.1-.4.2-.6l42.8-67.9c.4-.6 1-.9 1.7-.9h.3V117h-43.9z" />
</svg>
</div>
<div class="position-relative z-2">
<h1 class="h3 pt-4">Whoops! That page is missing...</h1>
<p class="pb-2 pb-sm-3 pb-md-0 mb-4 mb-md-5">The page you are looking for was moved, removed or might
never existed.</p>
<a class="btn btn-lg btn-outline-dark rounded-pill" href="{{ route('second', ['home', 'grocery']) }}">Go to homepage</a>
</div>
</div>
</section>
<img src="/img/404/grocery-bg-1.png"
class="animate-up-down position-absolute top-0 start-0 w-100 h-100 object-fit-cover" alt="Background image">
<img src="/img/404/grocery-bg-2.png"
class="animate-down-up position-absolute top-0 start-0 w-100 h-100 object-fit-cover" alt="Background image">
</main>
<!-- Page footer -->
<footer class="footer pb-4">
<div class="container text-center pb-sm-2 pb-md-3">
<p class="fs-sm mb-0">
&copy; All rights reserved. Made by <span class="animate-underline"><a
class="animate-target text-dark-emphasis fw-medium text-decoration-none"
href="https://coderthemes.com/" target="_blank" rel="noreferrer">Coderthemes</a></span>
</p>
</div>
</footer>
@endsection
@section('scripts')
@endsection