From 1d3110e3fb2f5404cb1e7d5ed8219fc55eb9e1f0 Mon Sep 17 00:00:00 2001
From: Ahmed Ellaban <ahmedsamyallban2000@gmail.com>
Date: Mon, 1 Jul 2024 02:39:19 +0300
Subject: [PATCH] changing the colors

---
 app.py                  |  4 +-
 templates/homepage.html | 96 +++++++++++++++++++++++++++++++++++------
 2 files changed, 86 insertions(+), 14 deletions(-)

diff --git a/app.py b/app.py
index 56ace94..044d364 100644
--- a/app.py
+++ b/app.py
@@ -39,7 +39,9 @@ def gpa_calculator():
         # 3: No changes
         second_gpa /= 5
         total_gpa = (first_gpa + second_gpa) / 2
-    return {"items": items, "total_gpa": total_gpa, "second_gpa": second_gpa, "first_gpa": first_gpa}
+
+    return {"items": items, "total_gpa": round(total_gpa, 3), "second_gpa": round(second_gpa, 3),
+            "first_gpa": round(first_gpa, 3)}
 
 
 @app.route('/')
diff --git a/templates/homepage.html b/templates/homepage.html
index 79f8817..2a967a7 100644
--- a/templates/homepage.html
+++ b/templates/homepage.html
@@ -5,17 +5,87 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Subjects and Grades</title>
     <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 20px;
+        }
+
+        h2 {
+            color: #333;
+            font-size: 1.5em;
+        }
+
         table {
             width: 100%;
             border-collapse: collapse;
+            margin-bottom: 20px;
+            font-size: 1em;
         }
+
         th, td {
-            border: 1px solid black;
+            border: 1px solid #ddd;
             padding: 8px;
             text-align: left;
         }
+
         th {
-            background-color: #f2f2f2;
+            background-color: #f4f4f4;
+            font-weight: bold;
+        }
+
+        input[type="number"], input[type="text"] {
+            width: 100%;
+            padding: 8px;
+            box-sizing: border-box;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            font-size: 1em;
+        }
+
+        input[type="submit"] {
+            background-color: #4CAF50;
+            color: white;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 1em;
+        }
+
+        input[type="submit"]:hover {
+            background-color: #45a049;
+        }
+
+        .result-table {
+            margin-top: 20px;
+        }
+
+        .result-table th {
+            background-color: #f4f4f4;
+        }
+
+        .gpa-input {
+            width: 50%;
+        }
+
+        @media (max-width: 768px) {
+            h2 {
+                font-size: 1.2em;
+            }
+
+            th, td {
+                padding: 6px;
+                font-size: 0.9em;
+            }
+
+            input[type="number"], input[type="text"], .gpa-input {
+                font-size: 0.9em;
+                padding: 6px;
+            }
+
+            .gpa-input {
+                width: 100%;
+            }
         }
     </style>
     <script>
@@ -48,22 +118,22 @@
                 },
                 body: JSON.stringify(data)
             })
-            .then(response => response.json())
-            .then(data => {
-                console.log('Success:', data);
-                displayResults(data);
-            })
-            .catch((error) => {
-                console.error('Error:', error);
-            });
+                .then(response => response.json())
+                .then(data => {
+                    console.log('Success:', data);
+                    displayResults(data);
+                })
+                .catch((error) => {
+                    console.error('Error:', error);
+                });
         }
 
         function displayResults(data) {
             const resultsDiv = document.getElementById('results');
             resultsDiv.innerHTML = `
                 <h2>Results</h2>
-                <p>First Semiterm GPA: ${data.first_gpa}</p>
-                <p>Second Semiterm GPA: ${data.second_gpa}</p>
+                <p>First Semi term GPA: ${data.first_gpa}</p>
+                <p>Second Semi term GPA: ${data.second_gpa}</p>
                 <p>Total GPA: ${data.total_gpa}</p>
                 <table class="result-table">
                     <thead>
@@ -173,7 +243,7 @@ <h2>Choose two subjects from the following three:</h2>
         </tbody>
     </table>
 
-    <h2>First Semiterm GPA</h2>
+    <h2>First Semi term GPA:</h2>
     <input type="number" max="4" min="0" step="0.01" name="first_semiterm_gpa" required>
 
     <br><br>