Update style.css

style.css

@@ -1,120 +1,113 @@
-/* Basic Reset */
-* {
+/* General Styling */
+body {
+    background: url('https://i.postimg.cc/zBX9cDZy/bmw-german-luxury-cars-brands-black-shiny-fast-car-in-a-misty-fog-01-11-2024-1730444676-hd-wallpaper.jpg
+') no-repeat center center fixed; /* Set background image */
+    background-size: cover;  /* Ensure the image covers the entire page */
+    font-family: 'Arial', sans-serif;  /* Font for the entire app */
+    color: #333;  /* Text color */
     margin: 0;
     padding: 0;
-    box-sizing: border-box;
 }
 
-/* Body and overall background */
-body {
-    background: url('https://i.postimg.cc/zBX9cDZy/bmw-german-luxury-cars-brands-black-shiny-fast-car-in-a-misty-fog-01-11-2024-1730444676-hd-wallpaper.jpg') no-repeat center center fixed;
-    background-size: cover;
-    font-family: 'Georgia', serif;
-    color: #ffffff;
+/* Title Section */
+.stApp .stTitle {
+    background-color: rgba(76, 175, 80, 0.7); /* Semi-transparent background for the title */
+    color: white;  /* White text color */
     padding: 20px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
+    text-align: center;
+    font-size: 2.5rem;
+    border-bottom: 2px solid #ddd;
 }
 
-/* Glassmorphism effect */
-.glass {
-    background: rgba(255, 255, 255, 0.1); /* Transparent white background */
-    border-radius: 15px;
-    padding: 20px;
-    backdrop-filter: blur(10px); /* Blur effect for glassmorphism */
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Soft shadow */
-    border: 1px solid rgba(255, 255, 255, 0.2); /* Slight white border */
+/* Sidebar Styling */
+.stSidebar {
+    background-color: #ffffff;  /* White background for the sidebar */
+    padding: 10px;
+    border-right: 1px solid #ddd;  /* Border for separation */
 }
 
-/* Styling headers */
-h1 {
-    font-size: 3rem;
-    text-align: center;
-    color: #ffffff;
-    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
+.stSidebar .stSlider {
+    background-color: #fafafa;
 }
 
-/* For smaller headings */
-h2, h3 {
-    font-size: 1.5rem;
-    color: #ffffff;
+/* File Upload Section */
+.stFileUploader {
+    margin: 20px;
     text-align: center;
-    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
+    padding: 20px;
+    background-color: rgba(244, 244, 244, 0.8);  /* Slightly transparent background */
+    border: 2px dashed #ddd;  /* Dashed border for the file upload section */
 }
 
-/* Paragraph styling */
-p {
-    font-size: 1.2rem;
-    color: #ffffff;
-    text-align: center;
-    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
+.stFileUploader input[type="file"] {
+    margin-top: 10px;
 }
 
-/* Button Styling for Detect License Plate */
-.stButton > button {
-    background: linear-gradient(135deg, #8B5E3C, #B8860B); /* Warm vintage gold-brown gradient */
-    border: none;
+/* Image and Video Display */
+.stImage, .stVideo {
+    display: block;
+    margin: 20px auto;
+    max-width: 100%;
+    border: 2px solid #ddd;  /* Border around the displayed images/videos */
+    border-radius: 10px;
+}
+
+.stImage img, .stVideo video {
+    max-width: 100%;
+    height: auto;
+}
+
+/* Buttons */
+.stButton, .stDownloadButton {
+    background-color: #4CAF50;  /* Green background for buttons */
     color: white;
-    padding: 12px 24px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font-size: 16px;
-    margin: 10px 5px;
+    padding: 10px 20px;
+    font-size: 1rem;
+    border-radius: 5px;
+    border: none;
     cursor: pointer;
-    border-radius: 12px; /* Rounded corners for a soft vintage touch */
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); /* Soft, deep shadow for antique feel */
-    font-family: 'Georgia', serif; /* Classic serif font for the button */
-    text-transform: uppercase; /* Uppercase text for a formal touch */
+    transition: background-color 0.3s ease;
 }
 
-.stButton > button:hover {
-    background: linear-gradient(135deg, #704214, #B8860B); /* Slightly darker gold-brown */
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Stronger shadow for depth on hover */
-    transform: translateY(-2px); /* Lift effect */
+.stButton:hover, .stDownloadButton:hover {
+    background-color: #45a049;  /* Darker green on hover */
 }
 
-/* Center the content on the page */
-.stApp {
-    width: 100%;
-    max-width: 1200px;
-    margin: 0 auto;
+/* Success and Info Messages */
+.stInfo {
+    background-color: #2196F3;  /* Blue background for info messages */
+    color: white;
+    padding: 10px;
+    border-radius: 5px;
+    margin-top: 20px;
 }
 
-/* Style the file uploader */
-.stFileUploader {
-    background-color: rgba(255, 255, 255, 0.3);
-    border: 2px dashed rgba(255, 255, 255, 0.7);
-    padding: 20px;
-    border-radius: 12px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
-    margin: 20px 0;
+.stWarning {
+    background-color: #ff9800;  /* Orange background for warnings */
+    color: white;
+    padding: 10px;
+    border-radius: 5px;
+    margin-top: 20px;
 }
 
-/* Custom input fields and image container */
-.stImage {
-    width: 100%;
-    max-width: 1000px;
-    display: block;
-    margin: 20px auto;
-    border-radius: 12px;
+/* Styling the download button with an icon */
+.stDownloadButton {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+    padding: 10px 20px;
 }
 
-.stTextInput {
-    background: rgba(255, 255, 255, 0.1);
-    padding: 10px;
-    border-radius: 10px;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    color: #fff;
+.stDownloadButton svg {
+    margin-right: 10px;
 }
 
-.stTextInput input {
-    background: transparent;
-    color: #ffffff;
-    border: none;
-    outline: none;
-    font-size: 16px;
+/* Styling for the Footer */
+footer {
+    text-align: center;
+    padding: 10px;
+    background-color: #4CAF50;
+    color: white;
+    font-size: 1rem;
 }