Files
biiproject-kit-v1/resources/views/layouts/guest.blade.php
T

268 lines
9.3 KiB
PHP

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>biiproject - Login</title>
<link rel="icon" type="image/png"
href="{{ asset($app_favicon) }}?v={{ file_exists(public_path($app_favicon ?? '')) ? filemtime(public_path($app_favicon ?? '')) : time() }}">
{{-- Font --}}
<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=Outfit:wght@600&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
@stack('styles')
<link href="{{ asset('assets/css/app.css') }}" rel="stylesheet">
<script defer src="{{ asset('assets/js/app.js') }}"></script>
<style>
:root {
--adminuiux-content-font: "Open Sans", sans-serif;
--adminuiux-title-font: "Outfit", sans-serif;
}
</style>
<style>
.pageloader {
background: #262e38 !important;
backdrop-filter: blur(0.5px);
}
/* Modern Pill Design System */
.swal2-popup.modern-pill-popup {
border-radius: 30px !important;
font-family: 'Outfit', sans-serif !important;
padding: 2rem !important;
}
.swal2-title {
font-weight: 600 !important;
}
.swal2-html-container {
font-size: 0.95rem !important;
opacity: 0.8;
}
.btn-pill-primary {
background-color: #1e1e1e !important;
color: white !important;
border-radius: 50px !important;
padding: 10px 30px !important;
font-weight: 600 !important;
border: none !important;
margin: 0 5px !important;
}
.btn-pill-danger {
background-color: #dc3545 !important;
color: white !important;
border-radius: 50px !important;
padding: 10px 30px !important;
font-weight: 600 !important;
border: none !important;
margin: 0 5px !important;
}
.btn-pill-cancel {
background-color: white !important;
color: #1e1e1e !important;
border: 2px solid #1e1e1e !important;
border-radius: 50px !important;
padding: 8px 28px !important;
font-weight: 600 !important;
margin: 0 5px !important;
}
.btn-primary {
--bs-btn-color: #fff !important;
--bs-btn-bg: #1e1e1e !important;
--bs-btn-border-color: #1e1e1e !important;
--bs-btn-hover-color: #fff !important;
--bs-btn-hover-bg: #000 !important;
--bs-btn-hover-border-color: #000 !important;
--bs-btn-focus-shadow-rgb: 30, 30, 30 !important;
--bs-btn-active-color: #fff !important;
--bs-btn-active-bg: #000 !important;
--bs-btn-active-border-color: #000 !important;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !important;
--bs-btn-disabled-color: #fff !important;
--bs-btn-disabled-bg: #1e1e1e !important;
--bs-btn-disabled-border-color: #1e1e1e !important;
}
.text-primary {
color: #1e1e1e !important;
}
.bg-primary {
background-color: #1e1e1e !important;
}
.border-primary {
border-color: #1e1e1e !important;
}
.btn-outline-primary {
--bs-btn-color: #1e1e1e !important;
--bs-btn-border-color: #1e1e1e !important;
--bs-btn-hover-color: #fff !important;
--bs-btn-hover-bg: #1e1e1e !important;
--bs-btn-hover-border-color: #1e1e1e !important;
--bs-btn-focus-shadow-rgb: 30, 30, 30 !important;
--bs-btn-active-color: #fff !important;
--bs-btn-active-bg: #1e1e1e !important;
--bs-btn-active-border-color: #1e1e1e !important;
}
/* Standardized Modern Pill Buttons */
.btn-pill-standard-primary {
background-color: #ffffff !important;
color: #212529 !important;
border: 1px solid #212529 !important;
border-radius: 50rem !important;
padding: 8px 24px !important;
font-weight: 500 !important;
font-family: var(--adminuiux-title-font) !important;
min-width: 110px !important;
transition: all 0.2s ease !important;
}
.btn-pill-standard-primary:hover {
background-color: #f8f9fa !important;
border-color: #000000 !important;
}
/* Global Zoom */
/* html {
zoom: 0.8;
} */
/* Global 100% Fade-In Policy - Without Exception */
.adminuiux-wrap,
.card,
.adminuiux-content,
.login-box {
animation: fadeIn 0.6s ease-out both !important;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body
class="main-bg main-bg-opac roundedui adminuiux-header-boxed adminuiux-header-transparent adminuiux-sidebar-fill-white adminuiux-sidebar-boxed theme-black bg-gradient-1 scrollup"
data-theme="theme-black">
{{-- page loader --}}
<div class="pageloader">
<div class="container h-100">
<div class="row justify-content-center align-items-center text-center h-100">
<div class="col-12 mb-auto pt-4"></div>
<div class="col-auto">
<div class="loader5 mb-2 mx-auto"></div>
</div>
<div class="col-12 mt-auto pb-4">
<p class="text-secondary">Please wait for awesome things...</p>
</div>
</div>
</div>
</div>
<div class="adminuiux-wrap z-index-0 position-relative bg-theme-1 ">
<figure class="position-absolute top-0 start-0 w-100 h-100 coverimg z-index-0">
<img style="-webkit-filter: invert(1);filter: invert(1);"
src="{{ asset('assets/img/background-image/bg1.png') }}" alt="">
</figure>
<main class="adminuiux-content z-index-1 position-relative animate__animated animate__fadeIn">
<div class="container-fluid">
<div class="row align-items-center justify-content-center mt-auto z-index-1 height-dynamic"
style="--h-dynamic: calc(100vh - 60px)">
<div class="col login-box {{ $attributes->get('maxWidthClass', 'maxwidth-400') }} text-dark pb-ios">
{{ $slot }}
</div>
</div>
</div>
</main>
</div>
@stack('modals')
{{-- page js --}}
<script src="https://code.jquery.com/jquery-3.7.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="{{ asset('assets/js/mobileux/mobileux-auth.js') }}"></script>
<script src="{{ asset('assets/js/password-toggle.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11" crossorigin="anonymous"></script>
<script>
// Global Modern Pill Mixin for Guest Layout
window.StandardSwal = Swal.mixin({
customClass: {
popup: 'modern-pill-popup',
confirmButton: 'btn-pill-primary',
cancelButton: 'btn-pill-cancel'
},
buttonsStyling: false,
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
showClass: { popup: 'animate__animated animate__fadeIn animate__faster' },
hideClass: { popup: 'animate__animated animate__fadeOutDown animate__faster' }
});
</script>
@if (session('success'))
<script>
StandardSwal.fire({
icon: 'success',
title: 'Success!',
text: "{{ session('success') }}",
timer: 2500,
showConfirmButton: false,
timerProgressBar: true
});
</script>
@endif
@if (session('info'))
<script>
StandardSwal.fire({
icon: 'info',
title: 'Information',
text: "{{ session('info') }}",
timer: 3000,
showConfirmButton: false,
timerProgressBar: true
});
</script>
@endif
@if (session('error'))
<script>
StandardSwal.fire({
icon: 'error',
title: 'System Notice',
text: "{{ session('error') }}",
confirmButtonText: 'OK'
});
</script>
@endif
@stack('scripts')
{{-- Cookie Consent Banner --}}
@include('layouts.partials.cookie-banner')
</body>
</html>