feat: implement authentication login view and initialize admin-specific CSS styles

assets/admin/css/citrus.css

@@ -244,3 +244,23 @@ table .filter-list>button:after {
 .content-header .btn:hover {
     color: black;
 }
+
+/* Auth Pages Styling */
+.auth-background {
+    background-color: #f8f9fa;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+}
+
+.auth-card {
+    background-color: rgba(255, 255, 255, 0.9) !important;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    transition: all 0.3s ease;
+}
+
+.auth-card:hover {
+    background-color: rgba(255, 255, 255, 0.95) !important;
+}

resources/views/auth/login.blade.php

@@ -8,9 +8,7 @@
                 <main id="main-container" style="min-height: 969px;">
 
                     <!-- Page Content -->
-                    <div class="bg-image" style="background-image: url('{{url("assets/back.jpg")}}');     background-color: #f8f9fa;
+                    <div class="bg-image auth-background" style="background-image: url('{{ asset('assets/back.jpg') }}');">
-        background-position: center;
-        background-size: cover; ">
                         <div class="row mx-0 bg-black-op">
                             <div class="hero-static col-md-6 col-xl-8 d-none d-md-flex align-items-md-end" >
                                 <div class="p-30 js-appear-enabled animated fadeIn" data-toggle="appear">
@@ -22,12 +20,12 @@
                                     </p>
                                 </div>
                             </div>
-                            <div style="background-color:#ffffffe6 !important;" class="hero-static text-center col-md-6 col-xl-4 d-flex align-items-center bg-white js-appear-enabled animated fadeInRight" data-toggle="appear" data-class="animated fadeInRight">
+                            <div class="hero-static text-center col-md-6 col-xl-4 d-flex align-items-center bg-white js-appear-enabled animated fadeInRight auth-card" data-toggle="appear" data-class="animated fadeInRight">
                                 <div class="content content-full">
                                     <!-- Header -->
                                     <div class="px-30 py-10">
                                         <a class="link-effect font-w700" href="#">
-                                            <img src="{{url("assets/citrus-logos/citrus-yatay.svg")}}" style="width:70%" class="img-fluid" alt="" />
+                                            <img src="{{ asset('assets/citrus-logos/citrus-yatay.svg') }}" style="width:70%" class="img-fluid" alt="" />
                                         </a>
                                         <h1 class="h3 font-w700 mt-30 mb-10">{{e2(setting("login_welcome",true,"Welcome"))}}</h1>
                                         <h2 class="h5 font-w400 text-muted mb-0">{{e2(setting("login_description",true,"Please sign in"))}}</h2>