Upload files to "static"

static/styles.css

@@ -1,10 +1,55 @@
-/* Existing styles */
+/* General Body and Typography */
 body {
     font-family: Arial, sans-serif;
     margin: 0;
+    padding: 0; /* Adds padding to the entire web app */
+    box-sizing: border-box; /* Ensures padding doesn't affect overall width/height */
+    background-color: #f4f4f4;
+    color: black;
+}
+
+
+h1, h2, h3, p {
+    color: #333;
+}
+
+ul {
+    list-style-type: none;
     padding: 0;
 }
 
+ul li {
+    margin: 5px 0;
+    padding: 10px;
+    border-radius: 5px;
+}
+
+ul li.success {
+    background-color: #28a745;
+    color: white;
+}
+
+ul li.error {
+    background-color: #dc3545;
+    color: white;
+}
+
+ul li.info {
+    background-color: #17a2b8;
+    color: white;
+}
+
+/* Links */
+a {
+    color: #1e90ff;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+/* Header and Navigation */
 header {
     background-color: #333;
     color: white;
@@ -30,11 +75,10 @@ header nav a {
 header nav a:hover {
     background-color: #555;
     text-decoration: underline;
-    border-radius: 10px; /* Adds rounded corners on hover */
+    border-radius: 10px;
 }
 
-
+/* Dropdown Menu */
-/* Dropdown styles */
 .dropdown {
     position: relative;
     display: inline-block;
@@ -65,63 +109,63 @@ header nav a:hover {
     display: block;
 }
 
-/* Main content styles */
+/* Navbar */
+.nav-links {
+    display: flex;
+    flex-direction: row;
+    gap: 15px;
+}
+
+.nav-links.active {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    text-align: center;
+}
+
+@media (max-width: 768px) {
+    .nav-links {
+        display: none;
+    }
+
+    .nav-links.active {
+        display: flex;
+    }
+}
+
+/* Burger Menu */
+.burger {
+    display: none;
+    flex-direction: column;
+    gap: 5px;
+    cursor: pointer;
+}
+
+.burger div {
+    width: 25px;
+    height: 3px;
+    background-color: white;
+    transition: transform 0.3s ease;
+}
+
+@media (max-width: 768px) {
+    .burger {
+        display: flex;
+    }
+}
+
+/* Main Content */
 main {
     padding: 20px;
 }
 
-/* Main content centered and 60% width */
 .main-content {
     width: 60%;
-    margin: 0 auto; /* Centers the content horizontally */
+    margin: 0 auto;
-    padding: 20px; /* Optional: Adds some padding inside the content */
+    padding: 20px;
-    text-align: center; /* Centers the text inside the container */
-}
-
-ul {
-    list-style-type: none;
-    padding: 0;
-}
-
-ul li {
-    margin: 5px 0;
-}
-
-ul li a {
-    color: #007bff;
-    text-decoration: none;
-}
-
-ul li a:hover {
-    text-decoration: underline;
-}
-
-h1, h2 {
-    color: #333;
-}
-
-pre {
-    background-color: #f4f4f4;
-    padding: 10px;
-    border: 1px solid #ddd;
-    overflow-x: auto;
-}
-
-.tip {
-    background-color: #f1f9ff;
-    border-left: 4px solid #007bff;
-    margin: 20px auto;
-    padding: 10px;
-    font-style: italic;
-    color: #333;
-    max-width: 800px;
-    width: 90%;
-    border-radius: 4px;
-    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
     text-align: center;
 }
 
-/* Center container */
 .center-container {
     text-align: center;
     margin: 0 auto;
@@ -129,34 +173,29 @@ pre {
     padding: 20px;
 }
 
-/* ASCII art styles */
+/* Buttons */
-.ascii-art.no-background {
+button {
-    background-color: transparent;
+    background-color: #007bff;
+    color: white;
     border: none;
-    padding: 0;
+    padding: 10px 20px;
-    margin-bottom: 20px;
+    border-radius: 5px;
-    color: #333;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
-    white-space: pre-wrap;
+    transition: background-color 0.3s ease, box-shadow 0.3s ease;
-    text-align: center;
+    cursor: pointer;
 }
 
-/* Hide ASCII art on smaller screens */
+button:hover {
-@media (max-width: 768px) {
+    background-color: #0056b3;
-    .ascii-art.no-background {
-        display: none;
-    }
-}
-
-.ascii-image {
-    display: block;
-    margin: 20px auto;
-    max-width: 100%;
-    height: auto;
-    border-radius: 10px;
     box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
 }
 
-/* Styled buttons */
+button:active {
+    background-color: #003f7f;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* Link Buttons */
 .link-container {
     display: flex;
     justify-content: center;
@@ -186,49 +225,92 @@ pre {
     box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-
+/* ASCII Art */
-/* Burger menu styles */
+.ascii-art.no-background {
-.burger {
+    background-color: transparent;
-    display: none;
+    border: none;
-    flex-direction: column;
+    padding: 0;
-    gap: 5px;
+    margin-bottom: 20px;
-    cursor: pointer;
+    color: #333;
-}
+    white-space: pre-wrap;
-
-.burger div {
-    width: 25px;
-    height: 3px;
-    background-color: white;
-    transition: transform 0.3s ease;
-}
-
-/* Dropdown menu for small screens */
-.nav-links {
-    display: flex;
-    flex-direction: row;
-    gap: 15px;
-}
-
-.nav-links.active {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
     text-align: center;
 }
 
 @media (max-width: 768px) {
-    .nav-links {
+    .ascii-art.no-background {
         display: none;
-        flex-direction: column;
-        gap: 10px;
-        text-align: center;
-    }
-
-    .burger {
-        display: flex;
-    }
-
-    .nav-links.active {
-        display: flex;
     }
 }
+
+.ascii-image {
+    display: block;
+    margin: 20px auto;
+    max-width: 100%;
+    height: auto;
+    border-radius: 10px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+/* Tips */
+.tip {
+    background-color: #f1f9ff;
+    border-left: 4px solid #007bff;
+    margin: 20px auto;
+    padding: 10px;
+    font-style: italic;
+    color: #333;
+    max-width: 800px;
+    width: 90%;
+    border-radius: 4px;
+    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
+    text-align: center;
+}
+
+/* Slider */
+.switch {
+    position: absolute;
+    top: 10px;
+    right: 20px;
+    display: inline-block;
+}
+
+.switch input {
+    display: none;
+}
+
+.switch .slider {
+    width: 50px;
+    height: 25px;
+    background-color: #ccc;
+    border-radius: 34px;
+    position: relative;
+    transition: 0.4s;
+}
+
+.switch .slider::before {
+    content: "";
+    position: absolute;
+    height: 15px;
+    width: 15px;
+    border-radius: 50%;
+    left: 5px;
+    bottom: 5px;
+    background-color: white;
+    transition: 0.4s;
+}
+
+input:checked + .slider {
+    background-color: #4CAF50;
+}
+
+input:checked + .slider::before {
+    transform: translateX(25px);
+}
+
+/* Preformatted Text */
+pre {
+    background-color: #f4f4f4;
+    padding: 10px;
+    border: 1px solid #ddd;
+    overflow-x: auto;
+}