Merge branch 'main' into 5

YadavAkhileshh · Nov 10, 2024 · 2fd9491 · 2fd9491
2 parents 5249815 + 7cdff34
commit 2fd9491
Show file tree

Hide file tree

Showing 11 changed files with 1,161 additions and 184 deletions.
diff --git a/Alien.css b/Alien.css
@@ -76,39 +76,61 @@ body.dark-theme {
   margin-right: 9px;
 }
 
+/* General Navbar Styling */
 .navbar {
   background-color: #0b0e17;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
-  border-bottom: none;
-  /* margin-bottom: 50px; */
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 80px;
   z-index: 100;
-  /* padding-right: 20px; */
   box-shadow: 0 4px 8px rgba(0, 255, 255, 0.1);
+  padding: 20px;
 }
 
-/* Styling individual links in the navbar */
+/* Navbar link styling */
 .navbar a {
   color: #a0a0a0;
-  /* Link color */
   font-size: 18px;
-  /* Font size */
   text-decoration: none;
-  /* Remove underline */
   padding: 0.5rem 1rem;
   border-radius: 0.5rem;
-  /* Rounded corners for hover effect */
   transition: background-color 0.3s ease;
-  /* Smooth hover transition */
 }
 
+/* Dark Mode Styling */
+body.dark-theme .navbar {
+  background-color: #0b0e17;
+  box-shadow: 0 4px 8px rgba(0, 255, 255, 0.1);
+}
+
+body.dark-theme .navbar a {
+  color: #a0a0a0;
+  transition: color 0.3s;
+}
+
+/* Light Mode Styling */
+body:not(.dark-theme) .navbar {
+  background-color: #f9f9f9;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+body:not(.dark-theme) .navbar a {
+  color: #333;
+  transition: color 0.3s;
+}
+
+/* Responsive Navbar Styling */
+.navbar .faq-btn {
+  font-size: 0.8em;
+  padding: 10px 20px;
+  margin: 5px;
+}
 .home {
   padding-left: 90px;
 }
@@ -354,13 +376,13 @@ body:not(.dark-theme) #congratsPopup.show {
 /* Buttons */
 button {
   padding: 10px 20px;
-  border-radius: 4px;
+  border-radius:  4px;
   cursor: pointer;
-  font-family: var(--game-font);
-  text-transform: uppercase;
-  letter-spacing: 1px;
+  font-family:  var(--game-font);
+  text-transform:  uppercase;
+  letter-spacing:  1px;
   transition: all var(--transition-speed);
-  margin-left: -13px;
+
 }
 
 body:not(.dark-theme) button {
@@ -400,15 +422,15 @@ body.dark-theme button:hover {
 } */
 /* Responsive Sidebar Styling */
 .sidebar {
-  position: fixed;
+  position: absolute;
   right: 0;
   top: 0;
   width: 300px;
   max-width: 100%;
   max-height: 92vh;
   height: 100%;
   padding: 20px;
-  margin-top: 100px;
+  margin-top: 120px;
   background-color: var(--card-bg-light);
   border-left: 2px solid var(--border-light);
   transition: background-color var(--transition-speed),
@@ -435,6 +457,83 @@ body.dark-mode .sidebar::-webkit-scrollbar-thumb {
   background-color: var(--border-dark);
 }
 
+/* Footer General Styling */
+.footer {
+  background-color: #0b0e17; /* Dark background for default mode */
+  color: #a0a0a0;
+  padding: 20px 10px;
+  text-align: center;
+  font-size: 16px;
+  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Footer Links Styling */
+.footer-links {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  margin-bottom: 10px;
+}
+
+.footer-links a {
+  color: #a0a0a0; /* Default link color */
+  text-decoration: none;
+  transition: color 0.3s, background-color 0.3s;
+  padding: 5px 10px;
+  border-radius: 5px;
+}
+
+.footer-links a:hover {
+  background-color: rgba(160, 160, 160, 0.2);
+  color: #ffffff;
+}
+
+/* Light Mode Footer Styling */
+body:not(.dark-theme) .footer {
+  background-color: #f9f9f9; /* Light background for light mode */
+  color: #333;
+  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
+}
+
+body:not(.dark-theme) .footer-links a {
+  color: #333;
+}
+
+body:not(.dark-theme) .footer-links a:hover {
+  background-color: rgba(51, 51, 51, 0.2);
+  color: #0b0e17;
+}
+
+/* Dark Mode Footer Styling */
+body.dark-theme .footer {
+  background-color: #0b0e17;
+  color: #a0a0a0;
+  box-shadow: 0 -4px 8px rgba(0, 255, 255, 0.1);
+}
+
+body.dark-theme .footer-links a {
+  color: #a0a0a0;
+}
+
+body.dark-theme .footer-links a:hover {
+  background-color: rgba(0, 255, 255, 0.1);
+  color: #ffffff;
+}
+
+/* Footer Note Styling */
+.footer-note {
+  margin-top: 10px;
+  font-size: 14px;
+}
+
+/* Responsive Footer Styling */
+@media (max-width: 768px) {
+  .footer-links {
+    flex-direction: column;
+    gap: 10px;
+  }
+}
+
 /* Responsive Breakpoints */
 @media (max-width: 768px) {
   .sidebar {
@@ -597,7 +696,6 @@ body.dark-theme #instructionsTitle {
     font-size: 10px;
     gap: 10px;
     padding: 8px;
-    margin-top: 8px;
   }
 
   #gameControls.header button,
@@ -612,4 +710,47 @@ body.dark-theme #instructionsTitle {
     font-size: 0.9em;
     padding: 5px 8px;
   }
+  .navbar {
+    flex-direction: column;
+    padding: 20px;
+  }
+
+  .navbar a {
+    padding: 0px;
+    margin: 0px;
+  }
+
+  .navbar button {
+    padding: 6px 10px;
+    font-size: 0.4em;
+    width: auto;
+  }
+
+  .navbar .faq-btn {
+    font-size: 0.6em;
+    padding: 5px 8px;
+    margin: 0px;
+  }
+  .theme-switch {
+    width: 40px; /* Smaller width for mobile */
+    height: 20px; /* Smaller height for mobile */
+  }
+
+  .slider:before {
+    height: 16px; /* Adjusted circle size */
+    width: 16px;
+    bottom: 2px;
+    left: 2px;
+  }
+
+  #mode-label {
+    font-size: 0em; /* Slightly smaller label */
+  }
+  input:checked + .slider:before {
+    transform: translateX(21px);
+  }
+
+  .home {
+    padding-left: 0;
+  }
 }