update

Phinetwork · Dec 14, 2024 · 8675be8 · 8675be8
1 parent e19c0f5
commit 8675be8
Showing 1 changed file with 36 additions and 131 deletions.
diff --git a/frontend/src/components/Game.css b/frontend/src/components/Game.css
@@ -1,38 +1,21 @@
-/* General Styles */
-body {
-    margin: 0;
-    font-family: 'Arial', sans-serif;
-    background: linear-gradient(to bottom, #e0f7fa, #80deea);
-    color: #333;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-  }
-
-  /* Game Container */
-  .game-container {
-    width: 90%;
-    max-width: 600px;
-    background: #ffffff;
-    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
-    border-radius: 12px;
-    overflow: hidden;
+/* Game Container */
+.game-container {
+    font-family: Arial, sans-serif;
     text-align: center;
-    animation: fadeIn 0.5s ease-in-out;
+    background: #f9f9f9;
+    padding: 20px;
+    max-width: 600px;
+    margin: 0 auto;
+    border-radius: 10px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
   }
 
   /* Header */
   .game-header {
-    background-color: #00796b;
-    color: #ffffff;
-    padding: 20px;
-    border-bottom: 3px solid #004d40;
-  }
-
-  .game-header h1 {
-    margin: 0;
-    font-size: 24px;
+    background-color: #6200ea;
+    color: #fff;
+    padding: 10px;
+    border-radius: 10px 10px 0 0;
   }
 
   .stats {
@@ -42,8 +25,7 @@ body {
   }
 
   .stats p {
-    margin: 5px 0;
-    font-weight: bold;
+    margin: 0;
   }
 
   /* Game Area */
@@ -52,148 +34,71 @@ body {
   }
 
   h2 {
-    font-size: 20px;
-    color: #004d40;
+    margin-bottom: 10px;
   }
 
   .options {
     display: flex;
     flex-direction: column;
     gap: 10px;
-    margin: 20px 0;
   }
 
   .option-button {
-    background-color: #00796b;
+    background-color: #6200ea;
     color: white;
     border: none;
-    padding: 12px 20px;
-    font-size: 16px;
-    border-radius: 6px;
+    padding: 10px;
+    border-radius: 5px;
     cursor: pointer;
-    transition: background-color 0.3s ease, transform 0.2s ease;
+    font-size: 16px;
+    transition: background-color 0.3s ease;
   }
 
   .option-button:hover {
-    background-color: #004d40;
-    transform: scale(1.05);
+    background-color: #3700b3;
   }
 
   .feedback {
-    margin-top: 20px;
-    font-size: 16px;
-    color: #388e3c;
-    animation: fadeIn 0.3s ease-in-out;
-  }
-
-  .mini-game-button {
-    background-color: #ff7043;
-    color: white;
-    border: none;
-    padding: 10px 15px;
-    font-size: 16px;
-    border-radius: 6px;
-    cursor: pointer;
-    transition: background-color 0.3s ease, transform 0.2s ease;
-    margin-top: 20px;
-  }
-
-  .mini-game-button:hover {
-    background-color: #e64a19;
-    transform: scale(1.1);
-  }
-
-  /* Mini-Game */
-  .mini-game {
-    padding: 20px;
-  }
-
-  .mini-game h2 {
-    color: #d32f2f;
-  }
-
-  .mini-game .option-button {
-    background-color: #d32f2f;
-  }
-
-  .mini-game .option-button:hover {
-    background-color: #b71c1c;
+    margin-top: 10px;
+    font-weight: bold;
+    color: #4caf50;
   }
 
-  /* Progress Bar */
+  /* Footer */
   .game-footer {
-    padding: 10px 20px;
-    background-color: #e0e0e0;
+    margin-top: 20px;
   }
 
   .progress-bar-container {
-    width: 100%;
-    background-color: #bdbdbd;
-    border-radius: 6px;
+    background-color: #e0e0e0;
+    border-radius: 10px;
     height: 10px;
     overflow: hidden;
   }
 
   .progress-bar {
+    background-color: #6200ea;
     height: 10px;
-    background-color: #00796b;
-    width: 0;
-    transition: width 0.3s ease-in-out;
+    transition: width 0.3s ease;
   }
 
   /* Game Over Section */
   .game-over {
     padding: 20px;
   }
 
-  .game-over h2 {
-    color: #00796b;
-  }
-
   .restart-button {
-    background-color: #03a9f4;
+    background-color: #03dac6;
     color: white;
     border: none;
-    padding: 12px 20px;
-    font-size: 16px;
-    border-radius: 6px;
+    padding: 10px;
+    border-radius: 5px;
     cursor: pointer;
-    transition: background-color 0.3s ease, transform 0.2s ease;
+    font-size: 16px;
+    transition: background-color 0.3s ease;
   }
 
   .restart-button:hover {
-    background-color: #0288d1;
-    transform: scale(1.1);
-  }
-
-  /* Animations */
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-      transform: translateY(-20px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  /* Responsive Design */
-  @media (max-width: 768px) {
-    .game-container {
-      width: 100%;
-      margin: 10px;
-    }
-
-    .option-button,
-    .mini-game-button,
-    .restart-button {
-      font-size: 14px;
-      padding: 10px;
-    }
-
-    h2 {
-      font-size: 18px;
-    }
+    background-color: #018786;
   }