From 606872163a22829b6a19b5be623b4e7f94149521 Mon Sep 17 00:00:00 2001
From: AnshikaAg03 <anshika.agarwal.mat22@itbhu.ac.in>
Date: Tue, 2 Jul 2024 13:07:41 +0530
Subject: [PATCH] Enhancing progress page

---
 check-progress.html | 31 +++++++++++++++------
 progress.css        | 65 +++++++++++++++++++++++++++++++++++++++------
 2 files changed, 80 insertions(+), 16 deletions(-)

diff --git a/check-progress.html b/check-progress.html
index 8dc034e..8ae34a7 100644
--- a/check-progress.html
+++ b/check-progress.html
@@ -28,16 +28,31 @@
         <h1>Your Rubik's Cube Progress</h1>
         <div id="no-progress"></div><br>
         <div class="progress-stats">
-            <div>Total Solves: <span id="total-solves">--</span></div>
-            <div>Best Time: <span id="best-time">--</span></div>
-            <div>Average Time: <span id="average-time">--</span></div>
-            <div>Types of Cubes Solved: <span id="cube-types">3x3, 4x4, 5x5</span></div>
-            <div>Latest Solves:</div>
-            <ul id="recent-solves">
-                <!-- List of recent solves will be inserted here -->
-            </ul>
+            <div class="progress-box">
+                <h3>Total Solves</h3>
+                <p id="total-solves">0</p>
+            </div>
+            <div class="progress-box">
+                <h3>Best Time</h3>
+                <p id="best-time">NA</p>
+            </div>
+            <div class="progress-box">
+                <h3>Average Time</h3>
+                <p id="average-time">NA</p>
+            </div>
+            <div class="progress-box">
+                <h3>Types of Cubes Solved</h3>
+                <p id="cube-types">3x3</p>
+            </div>
+            <div class="progress-box">
+                <h3>Latest Solves</h3>
+                <ul id="recent-solves">
+                    <!-- List of recent solves will be inserted here -->
+                </ul>
+            </div>
         </div>
     </div>
+    
 
     <script src="progress.js"></script>
 </body>
diff --git a/progress.css b/progress.css
index 294444c..5e60b5f 100644
--- a/progress.css
+++ b/progress.css
@@ -11,11 +11,15 @@
 body {
     font-family: 'Arial', sans-serif;
     /* Use a clean, modern font */
-    font-size: 16px;
+    font-size: 30px;
     /* Base font size */
-    color: #333;
+    color: #f7f4f4;
     /* Dark gray text for readability */
     background-color: #f4f4f4;
+    background-image:url('https://i2.pickpik.com/photos/502/642/517/rubik-s-cube-game-cube-strategy-13845d21bb0c925716567a8a3ee7a0fd.jpg');
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
     /* Light gray background */
     padding: 20px;
     line-height: 1.6;
@@ -108,20 +112,65 @@ body {
 
 /* Progress container styles */
 
+
+
 .progress-container {
-    background: white;
+    
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     margin-top: 20px;
+    max-width: 900px; /* Set a maximum width */
+    height: 500px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 20px;
+    
+}
+
+.progress-stats {
+    display: grid;
+    grid-template-columns: repeat(3, 2fr);
+    gap: 20px;
+    margin: 0;
+    
+}
+
+.progress-box {
+    background-color: #f0e5e5;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    margin:0;
+    
+}
+
+.progress-box h3 {
+    font-size: 20px;
+    margin-bottom: 8px;
+    text-align: center;
+    color: #333;
+}
+
+.progress-box p {
+    font-size: 16px;
+    color: #666;
+    text-align: center;
 }
 
-.progress-stats div {
-    margin-bottom: 15px;
-    font-size: 1rem;
-    /* Set a reasonable font size for stats */
+ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
 }
 
+/* Additional styles for the layout of the two boxes below */
+.progress-stats .bottom-box {
+    grid-column: span 2; /* Span across two columns */
+}
+
+
 #no-progress{
     color: red;
 }
@@ -134,7 +183,7 @@ body {
 }
 
 #recent-solves li {
-    background: #eeeeee;
+    background: white;
     margin-top: 5px;
     padding: 10px;
     border-radius: 4px;