added new background + fixed red color

public/css/Room.css

@@ -6,7 +6,7 @@
 
 
 :root {
-    --primary-red: #e53935;
+    --primary-red: #DA4241;
     --dark-red: #c62828;
     --light-red: #ff5252;
     --accent-red: #ff8a80;

public/css/Root.css

@@ -2,7 +2,7 @@
 
 :root {
     /* Red Color Scheme from 404 page */
-    --primary-red: #e53935;
+    --primary-red: #DA4241;
     --dark-red: #c62828;
     --light-red: #ff5252;
     --accent-red: #ff8a80;

public/js/RoomClient.js

@@ -122,7 +122,7 @@ const image = {
     upload: '../images/upload.png',
     virtualBackground: {
         one: '../images/virtual-background/default/background-1.jpg',
-        two: '../images/virtual-background/default/background-2.webp'
+        two: '../images/virtual-background/default/background-2.jpg'
     },
 };
 

public/views/404.html

@@ -46,7 +46,7 @@
         .error-code {
             font-size: 150px;
             font-weight: 700;
-            color: #e53935;
+            color: #DA4241;
             line-height: 1;
             margin-bottom: 20px;
             text-shadow: 5px 5px 0 rgba(229, 57, 53, 0.1);
@@ -79,7 +79,7 @@
             width: 200px;
             height: 80px;
             border-radius: 40px;
-            background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
+            background: linear-gradient(135deg, #DA4241 0%, #c62828 100%);
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
@@ -109,7 +109,7 @@
             width: 80px;
             height: 80px;
             border-radius: 40px;
-            background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
+            background: linear-gradient(135deg, #DA4241 0%, #c62828 100%);
             box-shadow: 0 5px 15px rgba(229, 57, 53, 0.3);
         }
 
@@ -168,7 +168,7 @@
         }
 
         .btn-primary {
-            background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
+            background: linear-gradient(135deg, #DA4241 0%, #c62828 100%);
             color: white;
             box-shadow: 0 4px 15px rgba(229, 57, 53, 0.4);
         }
@@ -180,8 +180,8 @@
 
         .btn-secondary {
             background: transparent;
-            color: #e53935;
-            border: 2px solid #e53935;
+            color: #DA4241;
+            border: 2px solid #DA4241;
         }
 
         .btn-secondary:hover {
@@ -258,7 +258,7 @@
     <div class="container">
         <div class="logo">
             <!-- Logo placeholder - replace with actual CodePill logo -->
-            <div style="font-size: 28px; font-weight: 700; color: #e53935;">CODEPILL</div>
+            <div style="font-size: 28px; font-weight: 700; color: #DA4241;">CODEPILL</div>
         </div>
 
         <div class="error-code">404</div>

public/views/feedback.html

@@ -46,7 +46,7 @@
         .error-code {
             font-size: 150px;
             font-weight: 700;
-            color: #e53935;
+            color: #DA4241;
             line-height: 1;
             margin-bottom: 20px;
             text-shadow: 5px 5px 0 rgba(229, 57, 53, 0.1);
@@ -79,7 +79,7 @@
             width: 200px;
             height: 80px;
             border-radius: 40px;
-            background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
+            background: linear-gradient(135deg, #DA4241 0%, #c62828 100%);
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
@@ -109,7 +109,7 @@
             width: 80px;
             height: 80px;
             border-radius: 40px;
-            background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
+            background: linear-gradient(135deg, #DA4241 0%, #c62828 100%);
             box-shadow: 0 5px 15px rgba(229, 57, 53, 0.3);
         }
 
@@ -168,7 +168,7 @@
         }
 
         .btn-primary {
-            background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
+            background: linear-gradient(135deg, #DA4241 0%, #c62828 100%);
             color: white;
             box-shadow: 0 4px 15px rgba(229, 57, 53, 0.4);
         }
@@ -180,8 +180,8 @@
 
         .btn-secondary {
             background: transparent;
-            color: #e53935;
-            border: 2px solid #e53935;
+            color: #DA4241;
+            border: 2px solid #DA4241;
         }
 
         .btn-secondary:hover {
@@ -258,7 +258,7 @@
     <div class="container">
         <div class="logo">
             <!-- Logo placeholder - replace with actual CodePill logo -->
-            <div style="font-size: 28px; font-weight: 700; color: #e53935;">CODEPILL</div>
+            <div style="font-size: 28px; font-weight: 700; color: #DA4241;">CODEPILL</div>
         </div>
 
         <div class="error-code">404</div>