Create style.css

style.css

@@ -0,0 +1,120 @@
+/* Basic Reset */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* Body and overall background */
+body {
+    background: url('https://your-image-url.jpg') no-repeat center center fixed;
+    background-size: cover;
+    font-family: 'Georgia', serif;
+    color: #ffffff;
+    padding: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+/* 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 */
+}
+
+/* Styling headers */
+h1 {
+    font-size: 3rem;
+    text-align: center;
+    color: #ffffff;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
+}
+
+/* For smaller headings */
+h2, h3 {
+    font-size: 1.5rem;
+    color: #ffffff;
+    text-align: center;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
+}
+
+/* Paragraph styling */
+p {
+    font-size: 1.2rem;
+    color: #ffffff;
+    text-align: center;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
+}
+
+/* Button Styling for Detect License Plate */
+.stButton > button {
+    background: linear-gradient(135deg, #8B5E3C, #B8860B); /* Warm vintage gold-brown gradient */
+    border: none;
+    color: white;
+    padding: 12px 24px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 10px 5px;
+    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 */
+}
+
+.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 */
+}
+
+/* Center the content on the page */
+.stApp {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+/* 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;
+}
+
+/* Custom input fields and image container */
+.stImage {
+    width: 100%;
+    max-width: 1000px;
+    display: block;
+    margin: 20px auto;
+    border-radius: 12px;
+}
+
+.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;
+}
+
+.stTextInput input {
+    background: transparent;
+    color: #ffffff;
+    border: none;
+    outline: none;
+    font-size: 16px;
+}