From 6de78b729419a7eb3f13009531a60ccd03ae72db Mon Sep 17 00:00:00 2001
From: Ilyas Rufai <rufaiilyas@gmail.com>
Date: Sat, 18 Jan 2025 18:08:35 +0100
Subject: [PATCH 1/2] update

---
 src/App.css | 393 ++++++++++++++++++++++++++--------------------------
 1 file changed, 197 insertions(+), 196 deletions(-)

diff --git a/src/App.css b/src/App.css
index e3b0d68..bf42491 100755
--- a/src/App.css
+++ b/src/App.css
@@ -1,196 +1,197 @@
-
-body {
-  margin: 0;
-  padding: 0;
-  font-family: sans-serif;
-  color: #333;
-}
-
-.header {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  border-bottom: 1px solid #ccc;
-  padding: 1px 50px;
-}
-
-.header li {
-  list-style: none;
-  display: inline-block;
-  padding: 0 15px;
-}
-
-.logo {
-  margin-right: auto;
-  color: #333;
-  font-size: 1.8rem;
-}
-
-.logo.dark {
-  color: #fff;
-}
-
-.App.dark {
-  background-color: #222222;
-  height: 100vh;
-  color: #fff;
-}
-
-h1 {
-  font-size: 2rem;
-  margin-bottom: 2rem;
-}
-
-form {
-  margin-top: 1%;
-  text-align: center;
-}
-
-label {
-  font-size: 1.2rem;
-  margin-bottom: 1rem;
-}
-
-input {
-  width: 60%;
-  margin-right: 15px;
-  padding: 1rem;
-  font-size: 1rem;
-  border: 1px solid #333;
-  border-radius: 5px;
-  outline: none;
-}
-
-input:focus {
-  border: 2px solid #333;
-}
-
-.error {
-  color: #cc0000;
-  text-align: center;
-}
-
-.button {
-  padding: 1rem 2rem;
-  font-size: 1rem;
-  margin-top: 2%;
-  background-color: #333;
-  color: #fff;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-.button:hover {
-  background-color: #4d4d4d;
-}
-
-.button.dark {
-  background-color: #fff;
-  color: #333;
-}
-
-.status {
-  margin-top: 2rem;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  font-size: 1.2rem;
-}
-
-.status.up {
-  background-color: green;
-  color: #fff;
-}
-
-.status.down {
-  background-color: #ED2B2A;
-  color: #fff;
-}
-
-.toggle-theme {
-  position: absolute;
-  top: 1.5rem;
-  right: 1rem;
-  font-size: 2rem;
-  cursor: pointer;
-}
-
-/* Mobile view  */
-
-@media (min-width: 320px) and (max-width: 480px) {
-
-  .header {
-    padding: 1px 20px;
-  }
-
-  form {
-    margin-top: 8%;
-  }
-
-  input {
-    margin: auto;
-    padding: 1.2rem;
-    width: 80%;
-  }
-
-  button {
-    padding: 1.2rem 8rem;
-    margin: 5% auto;
-  }
-}
-
-/* Footer Styles */
-.footer {
-  position: relative; /* Remove fixed positioning */
-  width: 100%; /* Full-width footer */
-  background-color: #333; /* Background color for the footer */
-  color: #fff; /* Text color for the footer */
-  padding: 15px 0; /* Add spacing to top and bottom */
-  text-align: center; /* Center the text and links within the footer */
-  border-top-left-radius: 20px; /* Curved top-left corner */
-  border-top-right-radius: 20px; /* Curved top-right corner */
-  margin-top: auto; /* Push footer to the bottom when content is short */
-}
-
-.footer-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-/* Style the links in the footer */
-.social-links {
-  list-style: none; /* Remove bullet points */
-  padding: 0;
-  margin: 10px 0 0; /* Add spacing above the links */
-}
-
-.social-links li {
-  display: inline;
-  margin: 0 10px; /* Add spacing between links */
-}
-
-/* Style the links as white text with a subtle hover effect */
-.social-links a {
-  text-decoration: none;
-  color: #fff;
-  transition: color 0.3s;
-}
-
-.social-links a:hover {
-  color: #DAAA3F; /* Change color on hover */
-}
-
-/* Ensure footer stays at the bottom when content is short */
-body {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh; /* Make the body span the full viewport height */
-  margin: 0; /* Remove default margin */
-}
-
-.App {
-  flex: 1; /* Allow the main content to grow and push the footer down */
-  display: flex;
-  flex-direction: column;
-}
+
+body {
+    margin: 0;
+    padding: 0;
+    font-family: sans-serif;
+    color: #333;
+  }
+  
+  .header {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    border-bottom: 1px solid #ccc;
+    padding: 1px 50px;
+  }
+  
+  .header li {
+    list-style: none;
+    display: inline-block;
+    padding: 0 15px;
+  }
+  
+  .logo {
+    margin-right: auto;
+    color: #333;
+    font-size: 1.8rem;
+  }
+  
+  .logo.dark {
+    color: #fff;
+  }
+  
+  .App.dark {
+    background-color: #222222;
+    height: 100vh;
+    color: #fff;
+  }
+  
+  h1 {
+    font-size: 2rem;
+    margin-bottom: 2rem;
+  }
+  
+  form {
+    margin-top: 1%;
+    text-align: center;
+  }
+  
+  label {
+    font-size: 1.2rem;
+    margin-bottom: 1rem;
+  }
+  
+  input {
+    width: 60%;
+    margin-right: 15px;
+    padding: 1rem;
+    font-size: 1rem;
+    border: 1px solid #333;
+    border-radius: 5px;
+    outline: none;
+  }
+  
+  input:focus {
+    border: 2px solid #333;
+  }
+  
+  .error {
+    color: #cc0000;
+    text-align: center;
+  }
+  
+  .button {
+    padding: 1rem 2rem;
+    font-size: 1rem;
+    margin-top: 2%;
+    background-color: #333;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  
+  .button:hover {
+    background-color: #4d4d4d;
+  }
+  
+  .button.dark {
+    background-color: #fff;
+    color: #333;
+  }
+  
+  .status {
+    margin-top: 2rem;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    font-size: 1.2rem;
+  }
+  
+  .status.up {
+    background-color: green;
+    color: #fff;
+  }
+  
+  .status.down {
+    background-color: #ED2B2A;
+    color: #fff;
+  }
+  
+  .toggle-theme {
+    position: absolute;
+    top: 1.5rem;
+    right: 1rem;
+    font-size: 2rem;
+    cursor: pointer;
+  }
+  
+  /* Mobile view  */
+  
+  @media (min-width: 320px) and (max-width: 480px) {
+  
+    .header {
+      padding: 1px 20px;
+    }
+  
+    form {
+      margin-top: 8%;
+    }
+  
+    input {
+      margin: auto;
+      padding: 1.2rem;
+      width: 80%;
+    }
+  
+    button {
+      padding: 1.2rem 8rem;
+      margin: 5% auto;
+    }
+  }
+  
+  /* Footer Styles */
+  .footer {
+    position: relative; /* Remove fixed positioning */
+    width: 100%; /* Full-width footer */
+    background-color: #333; /* Background color for the footer */
+    color: #fff; /* Text color for the footer */
+    padding: 15px 0; /* Add spacing to top and bottom */
+    text-align: center; /* Center the text and links within the footer */
+    border-top-left-radius: 20px; /* Curved top-left corner */
+    border-top-right-radius: 20px; /* Curved top-right corner */
+    margin-top: auto; /* Push footer to the bottom when content is short */
+  }
+  
+  .footer-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  /* Style the links in the footer */
+  .social-links {
+    list-style: none; /* Remove bullet points */
+    padding: 0;
+    margin: 10px 0 0; /* Add spacing above the links */
+  }
+  
+  .social-links li {
+    display: inline;
+    margin: 0 10px; /* Add spacing between links */
+  }
+  
+  /* Style the links as white text with a subtle hover effect */
+  .social-links a {
+    text-decoration: none;
+    color: #fff;
+    transition: color 0.3s;
+  }
+  
+  .social-links a:hover {
+    color: #DAAA3F; /* Change color on hover */
+  }
+  
+  /* Ensure footer stays at the bottom when content is short */
+  body {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh; /* Make the body span the full viewport height */
+    margin: 0; /* Remove default margin */
+  }
+  
+  .App {
+    flex: 1; /* Allow the main content to grow and push the footer down */
+    display: flex;
+    flex-direction: column;
+  }
+  
\ No newline at end of file

From 889e04e94634cc4cddf041e2158ed4cc6e6b45dc Mon Sep 17 00:00:00 2001
From: Ilyas Rufai <rufaiilyas@gmail.com>
Date: Sat, 18 Jan 2025 18:09:37 +0100
Subject: [PATCH 2/2] update

---
 src/App.css | 389 ++++++++++++++++++++++++++--------------------------
 1 file changed, 194 insertions(+), 195 deletions(-)

diff --git a/src/App.css b/src/App.css
index bf42491..fd582d4 100755
--- a/src/App.css
+++ b/src/App.css
@@ -1,197 +1,196 @@
 
 body {
-    margin: 0;
-    padding: 0;
-    font-family: sans-serif;
-    color: #333;
-  }
-  
-  .header {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    border-bottom: 1px solid #ccc;
-    padding: 1px 50px;
-  }
-  
-  .header li {
-    list-style: none;
-    display: inline-block;
-    padding: 0 15px;
-  }
-  
-  .logo {
-    margin-right: auto;
-    color: #333;
-    font-size: 1.8rem;
-  }
-  
-  .logo.dark {
-    color: #fff;
-  }
-  
-  .App.dark {
-    background-color: #222222;
-    height: 100vh;
-    color: #fff;
-  }
-  
-  h1 {
-    font-size: 2rem;
-    margin-bottom: 2rem;
-  }
-  
-  form {
-    margin-top: 1%;
-    text-align: center;
-  }
-  
-  label {
-    font-size: 1.2rem;
-    margin-bottom: 1rem;
-  }
-  
-  input {
-    width: 60%;
-    margin-right: 15px;
-    padding: 1rem;
-    font-size: 1rem;
-    border: 1px solid #333;
-    border-radius: 5px;
-    outline: none;
-  }
-  
-  input:focus {
-    border: 2px solid #333;
-  }
-  
-  .error {
-    color: #cc0000;
-    text-align: center;
-  }
-  
-  .button {
-    padding: 1rem 2rem;
-    font-size: 1rem;
-    margin-top: 2%;
-    background-color: #333;
-    color: #fff;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-  }
-  
-  .button:hover {
-    background-color: #4d4d4d;
-  }
-  
-  .button.dark {
-    background-color: #fff;
-    color: #333;
-  }
-  
-  .status {
-    margin-top: 2rem;
-    padding: 1rem;
-    border-radius: 0.5rem;
-    font-size: 1.2rem;
-  }
-  
-  .status.up {
-    background-color: green;
-    color: #fff;
-  }
-  
-  .status.down {
-    background-color: #ED2B2A;
-    color: #fff;
-  }
-  
-  .toggle-theme {
-    position: absolute;
-    top: 1.5rem;
-    right: 1rem;
-    font-size: 2rem;
-    cursor: pointer;
-  }
-  
-  /* Mobile view  */
-  
-  @media (min-width: 320px) and (max-width: 480px) {
-  
-    .header {
-      padding: 1px 20px;
-    }
-  
-    form {
-      margin-top: 8%;
-    }
-  
-    input {
-      margin: auto;
-      padding: 1.2rem;
-      width: 80%;
-    }
-  
-    button {
-      padding: 1.2rem 8rem;
-      margin: 5% auto;
-    }
-  }
-  
-  /* Footer Styles */
-  .footer {
-    position: relative; /* Remove fixed positioning */
-    width: 100%; /* Full-width footer */
-    background-color: #333; /* Background color for the footer */
-    color: #fff; /* Text color for the footer */
-    padding: 15px 0; /* Add spacing to top and bottom */
-    text-align: center; /* Center the text and links within the footer */
-    border-top-left-radius: 20px; /* Curved top-left corner */
-    border-top-right-radius: 20px; /* Curved top-right corner */
-    margin-top: auto; /* Push footer to the bottom when content is short */
-  }
-  
-  .footer-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  
-  /* Style the links in the footer */
-  .social-links {
-    list-style: none; /* Remove bullet points */
-    padding: 0;
-    margin: 10px 0 0; /* Add spacing above the links */
-  }
-  
-  .social-links li {
-    display: inline;
-    margin: 0 10px; /* Add spacing between links */
-  }
-  
-  /* Style the links as white text with a subtle hover effect */
-  .social-links a {
-    text-decoration: none;
-    color: #fff;
-    transition: color 0.3s;
-  }
-  
-  .social-links a:hover {
-    color: #DAAA3F; /* Change color on hover */
-  }
-  
-  /* Ensure footer stays at the bottom when content is short */
-  body {
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh; /* Make the body span the full viewport height */
-    margin: 0; /* Remove default margin */
-  }
-  
-  .App {
-    flex: 1; /* Allow the main content to grow and push the footer down */
-    display: flex;
-    flex-direction: column;
-  }
-  
\ No newline at end of file
+margin: 0;
+padding: 0;
+font-family: sans-serif;
+color: #333;
+}
+
+.header {
+display: flex;
+justify-content: flex-end;
+align-items: center;
+border-bottom: 1px solid #ccc;
+padding: 1px 50px;
+}
+
+.header li {
+list-style: none;
+display: inline-block;
+padding: 0 15px;
+}
+
+.logo {
+margin-right: auto;
+color: #333;
+font-size: 1.8rem;
+}
+
+.logo.dark {
+color: #fff;
+}
+
+.App.dark {
+background-color: #222222;
+height: 100vh;
+color: #fff;
+}
+
+h1 {
+font-size: 2rem;
+margin-bottom: 2rem;
+}
+
+form {
+margin-top: 1%;
+text-align: center;
+}
+
+label {
+font-size: 1.2rem;
+margin-bottom: 1rem;
+}
+
+input {
+width: 60%;
+margin-right: 15px;
+padding: 1rem;
+font-size: 1rem;
+border: 1px solid #333;
+border-radius: 5px;
+outline: none;
+}
+
+input:focus {
+border: 2px solid #333;
+}
+
+.error {
+color: #cc0000;
+text-align: center;
+}
+
+.button {
+padding: 1rem 2rem;
+font-size: 1rem;
+margin-top: 2%;
+background-color: #333;
+color: #fff;
+border: none;
+border-radius: 5px;
+cursor: pointer;
+}
+
+.button:hover {
+background-color: #4d4d4d;
+}
+
+.button.dark {
+background-color: #fff;
+color: #333;
+}
+
+.status {
+margin-top: 2rem;
+padding: 1rem;
+border-radius: 0.5rem;
+font-size: 1.2rem;
+}
+
+.status.up {
+background-color: green;
+color: #fff;
+}
+
+.status.down {
+background-color: #ED2B2A;
+color: #fff;
+}
+
+.toggle-theme {
+position: absolute;
+top: 1.5rem;
+right: 1rem;
+font-size: 2rem;
+cursor: pointer;
+}
+
+/* Mobile view  */
+
+@media (min-width: 320px) and (max-width: 480px) {
+
+.header {
+    padding: 1px 20px;
+}
+
+form {
+    margin-top: 8%;
+}
+
+input {
+    margin: auto;
+    padding: 1.2rem;
+    width: 80%;
+}
+
+button {
+    padding: 1.2rem 8rem;
+    margin: 5% auto;
+}
+}
+
+/* Footer Styles */
+.footer {
+position: relative; /* Remove fixed positioning */
+width: 100%; /* Full-width footer */
+background-color: #333; /* Background color for the footer */
+color: #fff; /* Text color for the footer */
+padding: 15px 0; /* Add spacing to top and bottom */
+text-align: center; /* Center the text and links within the footer */
+border-top-left-radius: 20px; /* Curved top-left corner */
+border-top-right-radius: 20px; /* Curved top-right corner */
+margin-top: auto; /* Push footer to the bottom when content is short */
+}
+
+.footer-content {
+display: flex;
+flex-direction: column;
+align-items: center;
+}
+
+/* Style the links in the footer */
+.social-links {
+list-style: none; /* Remove bullet points */
+padding: 0;
+margin: 10px 0 0; /* Add spacing above the links */
+}
+
+.social-links li {
+display: inline;
+margin: 0 10px; /* Add spacing between links */
+}
+
+/* Style the links as white text with a subtle hover effect */
+.social-links a {
+text-decoration: none;
+color: #fff;
+transition: color 0.3s;
+}
+
+.social-links a:hover {
+color: #DAAA3F; /* Change color on hover */
+}
+
+/* Ensure footer stays at the bottom when content is short */
+body {
+display: flex;
+flex-direction: column;
+min-height: 100vh; /* Make the body span the full viewport height */
+margin: 0; /* Remove default margin */
+}
+
+.App {
+flex: 1; /* Allow the main content to grow and push the footer down */
+display: flex;
+flex-direction: column;
+}