Added Admin Page Baseline

package.json

@@ -10,12 +10,16 @@
     "bootstrap": "^5.3.2",
     "firebase": "^8.10.1",
     "formik": "^2.4.5",
+    "localforage": "^1.10.0",
+    "match-sorter": "^6.3.4",
     "react": "^18.2.0",
     "react-bootstrap": "^2.9.2",
     "react-dom": "^18.2.0",
     "react-image-lightbox": "^5.1.4",
     "react-responsive-masonry": "^2.1.7",
+    "react-router-dom": "^6.22.0",
     "react-scripts": "^5.0.1",
+    "sort-by": "^1.2.0",
     "web-vitals": "^2.1.4",
     "yet-another-react-lightbox": "^3.15.6",
     "yup": "^1.3.3"

src/App.css

@@ -98,7 +98,7 @@
 }
 .card-divider, .card-divider-overlay
 {
-	background-color: white;
+	background-color: rgb(255,255,255);
 	height: 4px;
 }
 .image-box-overlay
@@ -219,7 +219,7 @@
 }
 .nav-link
 {
-	color: white !important;
+	color: rgb(255,255,255) !important;
 	padding: 20px !important;
 }
 .nav-link.active
@@ -238,7 +238,7 @@
 }
 .image-crousal-box
 {
-	background-color: #000;
+	background-color: rgb(0,0,0);
 	padding: 0px !important;
 	position: block;
 }
@@ -259,7 +259,7 @@
 }
 .crousal-text
 {
-	color: white !important;
+	color: rgb(255,255,255) !important;
 	display: flex;
 	flex-direction: column;
 	font-size: larger;
@@ -268,12 +268,12 @@
 }
 .crousal-text .crousal-header
 {
-	text-shadow: 3px 1px 1px #000 !important;
+	text-shadow: 3px 1px 1px rgb(0,0,0) !important;
 }
 .crousal-text .crousal-sub-header
 {
 	color: rgb(212,186,121);
-	text-shadow: 2px 1px 1px #000 !important;
+	text-shadow: 2px 1px 1px rgb(0,0,0) !important;
 }
 .divider
 {
@@ -330,7 +330,7 @@
 	color: rgb(212,186,121);
 	font-size: larger;
 	font-weight: 600;
-	text-shadow: 1px 1px black;
+	text-shadow: 1px 1px rgb(0,0,0);
 }
 .about-image-box
 {
@@ -354,15 +354,15 @@
   text-align: left;
   padding: 30px !important;
   background-color: rgb(0,0,0);
-  color: white;
-  border: 1px solid black;
+  color: rgb(255,255,255);
+  border: 1px solid rgb(0,0,0);
   border-radius: 10px;
   transition: ease-in-out 1000ms;
 	.about-text-header
 	{
 		color: rgb(212,186,121);
 		font-weight: 600;
-		text-shadow: 1px 1px black;
+		text-shadow: 1px 1px rgb(0,0,0);
 	}
 	.about-text-desc
 	{
@@ -372,7 +372,7 @@
 }
 .about-text-box:hover
 {
-	box-shadow: 5px 5px 5px black !important;
+	box-shadow: 5px 5px 5px rgb(0,0,0) !important;
 	margin: 0px 20px 0px 20px !important;
 	transition: ease-in-out 1000ms;
 }
@@ -411,7 +411,7 @@
 	color: rgb(212,186,121);
 	font-size: larger;
 	font-weight: 600;
-	text-shadow: 1px 1px black;
+	text-shadow: 1px 1px rgb(0,0,0);
 }
 .testimony-block
 {
@@ -576,6 +576,90 @@
 .disclaimer{
 	color: rgb(161, 159, 157)
 }
+.admin-login-page{
+	height: 100vh;
+}
+.admin-login-banner-block, .admin-login-button-block{
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+.admin-login-banner-block{
+	background: rgba(0, 0, 0, 0.6);
+	position: relative;
+	z-index: 4;
+	color: rgb(255,255,255) !important;
+	.logo-text .logo-text-pre-head{
+		color: rgb(255,255,255);
+	}
+	.logo{
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+	.logo-image{
+		width: 120px;
+	}
+	.logo-text{
+		.logo-text-pre-head{
+			font-size: 30px;
+		}
+		.logo-text-head{
+			font-size: 50px;
+		}
+	}
+	.admin-banner-image{
+		position: relative;
+		width: 90%;
+	}
+}
+.admin-login-button-block{
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+
+	.hotel-name-subtext{
+		position: absolute;
+		top: 100px;
+	}
+}
+
+.admin-page-footer{
+	position: relative;
+	bottom: 0px;
+	width: 100%;
+}
+
+@media (max-width: 768px){
+	.admin-login-button-block .hotel-name-subtext{
+		top: 20px;
+		color: rgb(255,255,255);
+		z-index: 5;
+	}
+}
+
+.admin-panel-page{
+	height: 100vh;
+}
+
+.admin-error-modal{
+	position: absolute;
+	z-index: 10;
+}
+
+/* Google Icom */
+.google-login-icon{
+	cursor: pointer;
+	width: 200px;
+	border-radius: 25px;
+}
+.google-login-icon:hover{
+	box-shadow: 1px 1px 1px;
+	transition: ease-in-out 200ms;
+}
+
 .App
 {
 	text-align: center;
@@ -596,7 +680,7 @@
 {
 	align-items: center;
 	background-color: #282c34;
-	color: white;
+	color: rgb(255,255,255);
 	display: flex;
 	flex-direction: column;
 	font-size: calc(10px + 2vmin);