Merge pull request #1354 from yashksaini-coder/yash/fix-1344+1352

fix: 🐛 Add stargazers + Fix duplicate code issues

RateUs.html

@@ -27,36 +27,6 @@
             font-family: Arial, sans-serif;
             background-color: #1a1a2e;
         }
-
-        /* .navbar {
-            background-color: #16213e;
-            color: white;
-            padding: 15px 0;
-            position: fixed;
-            top: 0;
-            width: 100%;
-            display: flex;
-            justify-content: center;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-            z-index: 1000;
-        }
-
-        .navbar .nav-wrapper {
-            display: flex;
-            gap: 30px;
-        }
-
-        .navbar .nav-link {
-            color: white;
-            text-decoration: none;
-            font-size: 1.4rem;
-            display: flex;
-            align-items: center;
-        }
-
-        .navbar .nav-link i {
-            margin-right: 8px;
-        } */
         .navbar {
             background-color: #16213e;
             /* Dark background for the navbar */
@@ -122,36 +92,61 @@
 
         }
 
+        .stargaze {
+            top: 50%;
+            left: 50%;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            pointer-events: none;
+            position: fixed;
+            transform: translate(-50%, -50%);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            overflow: hidden;
+        }
+
+        .stargaze video {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            filter: brightness(0.5) contrast(1.2) saturate(1.5);
+        }
 
         .container {
-            border: 2px solid black;
+            border: 2px solid #007bff;
+            height: auto;
             padding: 20px;
             text-align: center;
-            background-color: #16213e;
+            background-color: rgba(22, 33, 62, 0.9);
             color: white;
-            transition: transform 0.2s;
-            border-radius: 10px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+            transition: transform 0.2s, box-shadow 0.2s;
+            border-radius: 15px;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
+            width: 80%;
+            max-width: 600px;
         }
 
         .container:hover {
             transform: translate(-50%, -50%) scale(1.05);
+            box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
         }
 
         .emoji {
-            font-size: 2rem;
+            font-size: 2.5rem;
             cursor: pointer;
-            margin: 0 10px;
+            margin: 0 15px;
             transition: transform 0.2s, text-shadow 0.2s;
         }
 
         .emoji:hover {
             transform: scale(3.5);
-            text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
+            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
         }
 
         .emoji.selected {
@@ -164,41 +159,36 @@
         }
 
         textarea {
-            width: 80%;
-            height: 100px;
+            width: 90%;
+            height: 120px;
             padding: 10px;
             font-size: 1rem;
-            border: 1px solid black;
+            border: 1px solid #007bff;
             border-radius: 5px;
+            background-color: #1a1a2e;
+            color: white;
         }
 
         .email-container {
-            margin: 10px 0px;
-            border-radius: 10;
+            margin: 20px 0;
             padding: 4px;
-
         }
-        /* .submit-button {
-            margin-top: 10px;
-            padding: 10px 20px;
+
+        .email-container input {
+            width: 90%;
+            padding: 10px;
             font-size: 1rem;
-            border: none;
-            background-color: black;
-            color: white;
-            cursor: pointer;
-            transition: background-color 0.3s;
+            border: 1px solid #007bff;
             border-radius: 5px;
+            background-color: #1a1a2e;
+            color: white;
         }
 
-        .submit-button:hover {
-            background-color: #333;
-        } */
         .submit-button {
             background-color: #007bff;
             color: white;
             padding: 10px 20px;
             border: 2px solid transparent;
-            /* Invisible border initially */
             border-radius: 5px;
             font-size: 16px;
             cursor: pointer;
@@ -210,7 +200,6 @@
             transform: scale(1.1);
             box-shadow: 0px 4px 15px rgba(0, 123, 255, 0.4);
             border-color: #00aaff;
-            /* Border appears on hover */
         }
 
         .submit-button:active {
@@ -240,11 +229,17 @@
             </a>
         </div>
     </div>
+    <div class="stargaze">
+        <video autoplay loop muted playsinline>
+            <source src="./assets/main.webm" type="video/webm">
+            <p>Your browser does not support HTML5 video.</p>
+        </video>
+    </div>  
     <div class="container">
         <div class="emojis">
             <span class="emoji" role="img" aria-label="cry">&#128546;</span>
             <span class="emoji" role="img" aria-label="neutral">&#128528;</span>
-            <span class="emoji" role="img" aria-label="smile">&#128522;</span>
+            <span class=" emoji" role="img" aria-label="smile">&#128522;</span>
             <span class="emoji" role="img" aria-label="laugh">&#128514;</span>
             <span class="emoji" role="img" aria-label="super">&#128526;</span>
         </div>