Update static/styles.css

static/styles.css

@@ -1,166 +1,114 @@
-/* Base Styles */
-body {
-    font-family: 'Roboto', sans-serif;
-    background: url('static/img/bg.jpg') no-repeat center center fixed;
-    background-size: cover;
-    margin: 0;
-    padding: 0;
-    color: #333;
-}
-
-/* Header Styles */
-header {
-    background-color: #007bff; /* Primary color */
-    color: #fff;
-    padding: 2rem 0;
-    text-align: center;
-    position: relative;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-}
-
-header .logo {
-    max-width: 100px;
-    margin-bottom: 1rem;
-}
-
-/* Main Section */
-main {
-    padding: 2rem 0;
-}
-
-.container {
-    max-width: 600px; /* Centering the form */
-    margin: 0 auto;
-    padding: 0 1rem;
-}
-
-/* Section Title */
-h3 {
-    font-size: 1.8rem;
-    margin-bottom: 1.5rem;
-    text-align: center;
-    color: #007bff;
-}
-
-/* Form Styles */
-form {
-    background: linear-gradient(to bottom right, rgba(6, 142, 253, 0.9), rgba(240, 240, 240, 0.9));
-    padding: 2.5rem;
-    border-radius: 10px;
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
-    transition: transform 0.3s;
-    max-width: 600px;
-    width: 100%;
-    margin: 0 auto;
-}
-
-form:hover {
-    transform: translateY(-5px);
-}
-
-/* Form Inputs */
-.form-group label {
-    font-weight: 600;
-    margin-bottom: 0.5rem;
-    display: block; /* Ensure labels are block-level */
-}
-
-.form-control {
-    border-radius: 5px;
-    font-size: 1rem;
-    padding: 0.75rem;
-    border: 1px solid #ccc;
-    transition: border-color 0.3s, box-shadow 0.3s;
-    background: #fff; /* White background for inputs */
-    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
-}
-
-.form-control:focus {
-    border-color: #007bff;
-    box-shadow: 0 0 8px rgba(0, 123, 255, 0.25), inset 0 2px 5px rgba(0, 0, 0, 0.1);
-    outline: none;
-}
-
-/* Input Placeholder Styling */
-.form-control::placeholder {
-    color: #999; /* Light gray for placeholder */
-    font-style: italic; /* Italicize the placeholder text */
-}
-
-/* Submit Button */
-.btn-primary {
-    font-size: 1.2rem;
-    font-weight: 700;
-    padding: 0.75rem 1.5rem;
-    border-radius: 5px;
-    width: 100%;
-    transition: background-color 0.3s, transform 0.3s;
-    background-color: #007bff;
-    border: none;
-    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.25);
-}
-
-.btn-primary:hover {
-    background-color: #0056b3;
-    transform: translateY(-2px);
-}
-
-/* Prediction Result Styles */
-.prediction-result {
-    background-color: rgba(255, 255, 255, 0.9); /* White background with slight transparency */
-    border-radius: 15px; /* Rounded corners */
-    padding: 20px; /* Add padding for spacing */
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
-    margin-top: 30px; /* Space above */
-    width: 100%;
-}
-
-.result-title {
-    font-size: 24px; /* Larger font size for the title */
-    font-weight: bold; /* Bold text */
-    margin-bottom: 10px; /* Space below title */
-}
-
-.result-value {
-    font-size: 18px; /* Font size for result */
-    color: #007bff; /* Use primary color for emphasis */
-    font-weight: 700; /* Bold font weight */
-}
-
-
-/* Footer Styles */
-footer {
-    background-color: #007bff;
-    color: #fff;
-    text-align: center;
-    padding: 1rem;
-    margin-top: 2rem;
-}
-
-footer p {
-    margin: 0;
-    font-size: 1rem;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-    header h1 {
-        font-size: 2rem;
-    }
-
-    header p {
-        font-size: 1rem;
-    }
-
-    .container {
-        padding: 0 0.5rem; /* Reduced padding for smaller screens */
-    }
-
-    .btn-primary {
-        font-size: 1rem; /* Slightly smaller button on small screens */
-    }
-
-    h3 {
-        font-size: 1.5rem; /* Smaller section title on small screens */
-    }
-}
+/* General Styles */
+body {
+    font-family: 'Roboto', sans-serif;
+    background-color: #f0f4f8; /* Light background color */
+}
+
+/* App Window */
+.app-window {
+    max-width: 800px; /* Set maximum width */
+    margin: auto; /* Center align */
+    border-radius: 10px; /* Rounded corners */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
+    background-color: #ffffff; /* White background for content */
+    padding: 2rem; /* Padding for content */
+}
+
+/* Header Section */
+.bg-primary {
+    background-color: #007bff !important; /* Primary blue color */
+}
+
+/* Logo Styles */
+.logo {
+    width: 120px; /* Adjust logo size */
+    height: auto; /* Maintain aspect ratio */
+}
+
+/* Form Styles */
+h2 {
+    color: #333; /* Darker text for headings */
+    margin-bottom: 1.5rem; /* Spacing below heading */
+}
+
+.form-group {
+    margin-bottom: 1.5rem; /* Spacing between form groups */
+}
+
+.col-form-label {
+    font-weight: bold; /* Bold labels */
+    color: #0056b3; /* Dark blue for labels */
+}
+
+/* Input and Select Styles */
+input.form-control, 
+select.form-control {
+    border: 2px solid #ced4da; /* Thicker border for input and select */
+    border-radius: 0.25rem; /* Rounded input corners */
+    transition: border-color 0.3s, box-shadow 0.3s; /* Transition for border color and shadow */
+    padding: 0.5rem; /* Add padding to inputs */
+}
+
+input.form-control:focus, 
+select.form-control:focus {
+    border-color: #28a745; /* Green border on focus */
+    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); /* Green shadow effect on focus */
+}
+
+/* Button Styles */
+.btn-primary {
+    background-color: #28a745; /* Green button color */
+    border: none; /* Remove border */
+    color: #ffffff; /* White text color */
+    transition: background-color 0.3s, transform 0.3s; /* Transition for hover effect */
+}
+
+.btn-primary:hover {
+    background-color: #218838; /* Darker green on hover */
+    transform: scale(1.05); /* Slightly enlarge button on hover */
+}
+
+/* Result Display Styles */
+.prediction-result {
+    background-color: #e9f7ef; /* Light green background */
+    border-left: 5px solid #28a745; /* Green left border */
+    padding: 1rem; /* Padding for the result box */
+    border-radius: 5px; /* Rounded corners */
+}
+
+.result-title {
+    color: #155724; /* Dark green for title */
+    font-weight: bold; /* Bold title */
+}
+
+.result-value {
+    font-size: 1.5rem; /* Larger font for result value */
+    color: #155724; /* Dark green for result value */
+}
+
+/* Footer Styles */
+footer {
+    margin-top: 20px; /* Space above the footer */
+    background-color: #007bff; /* Footer background */
+    padding: 1rem 0; /* Padding for footer */
+    color: white; /* White text color for footer */
+}
+
+footer p {
+    margin: 0; /* Remove margin */
+}
+
+/* Responsive Styles */
+@media (max-width: 576px) {
+    .app-window {
+        padding: 1rem; /* Less padding on smaller screens */
+    }
+    
+    .logo {
+        width: 100px; /* Smaller logo for mobile */
+    }
+    
+    h2 {
+        font-size: 1.5rem; /* Smaller heading size for mobile */
+    }
+}