Update app.py

app.py

@@ -1,70 +1,89 @@
 import streamlit as st
 import datetime
 
-# Simple styling without complex animation
+# Custom Styling
 st.markdown("""
     <style>
         body {
-            margin: 0;
-            padding: 0;
-            background-color: #f0f0f0;
+            background-color: #f1f5f8;
             font-family: 'Arial', sans-serif;
-            height: 100vh;
             display: flex;
             justify-content: center;
             align-items: center;
+            height: 100vh;
+            margin: 0;
         }
 
         .card {
-            background-color: white;
-            border-radius: 10px;
-            padding: 30px;
-            width: 350px;
+            background-color: #ffffff;
+            border-radius: 15px;
+            padding: 40px;
             box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+            width: 400px;
             text-align: center;
-            transition: all 0.3s ease;
         }
 
-        .card:hover {
-            transform: scale(1.05);
-            box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
+        .card h3 {
+            font-size: 24px;
+            color: #2575fc;
+            margin-bottom: 20px;
+        }
+
+        .card p {
+            font-size: 16px;
+            color: #333;
         }
 
-        button {
+        .card button {
             background-color: #2575fc;
             color: white;
             border: none;
-            padding: 10px 20px;
-            border-radius: 5px;
-            font-size: 16px;
+            padding: 15px 30px;
+            border-radius: 8px;
+            font-size: 18px;
             cursor: pointer;
-            margin-top: 20px;
+            transition: background-color 0.3s;
         }
 
-        button:hover {
+        .card button:hover {
             background-color: #6a11cb;
         }
+
+        .stButton>button {
+            font-size: 18px;
+        }
+        
+        .stDateInput>div {
+            margin-bottom: 20px;
+        }
+        
+        .stTextInput>div {
+            margin-bottom: 20px;
+        }
+
     </style>
 """, unsafe_allow_html=True)
 
 def main():
+    # Title and App Description
     st.title("Age Calculation App")
+    st.markdown("<h2 style='color:#2575fc;'>Calculate Your Age</h2>", unsafe_allow_html=True)
 
-    # Create input fields for DOB and current date
-    dob = st.date_input("Date of Birth", min_value=datetime.date(1900, 1, 1), max_value=datetime.date.today())
-    current_date = st.date_input("Current Date")
+    # Create input fields with icons
+    dob = st.date_input("📅 Select Date of Birth", min_value=datetime.date(1900, 1, 1), max_value=datetime.date.today())
+    current_date = st.date_input("📆 Select Current Date", max_value=datetime.date.today())
 
-    # Simple card UI
+    # Simple Card UI
     with st.container():
         st.markdown("""
             <div class="card">
-                <h3>Age Calculation</h3>
-                <p>Enter your Date of Birth and today's date to calculate your age.</p>
+                <h3>Age Calculator</h3>
+                <p>Enter your Date of Birth and the current date to calculate your age in years, months, and days.</p>
             </div>
         """, unsafe_allow_html=True)
 
-    # Generate age details on button click
-    if st.button("Calculate Age"):
+    # Calculate and display age on button click
+    if st.button("🔍 Calculate Age"):
         # Calculate years
         years = current_date.year - dob.year
         if (current_date.month, current_date.day) < (dob.month, dob.day):
@@ -86,7 +105,7 @@ def main():
             last_day_of_prev_month = (current_date.replace(day=1) - datetime.timedelta(days=1)).day
             days = last_day_of_prev_month - dob.day + current_date.day
 
-        # Display age results
+        # Display age details
         st.write(f"Your date of birth is {dob.strftime('%Y-%m-%d')} and today's date is {current_date.strftime('%Y-%m-%d')}.")
         st.write(f"Your age is {years} years, {months} months, and {days} days.")