Update app.py

app.py

@@ -4,67 +4,85 @@ import folium
 from streamlit_folium import st_folium
 from datetime import datetime
 
-# --- CONFIG & STYLING ---
-st.set_page_config(page_title="Maldives Vessel Tracker", layout="wide")
+# --- GEN Z DESIGN: CUSTOM CSS ---
+st.set_page_config(page_title="Maldives Vessel Tracker", page_icon="🚢", layout="wide")
 
 st.markdown("""
     <style>
-    .main { background-color: #f0f2f6; }
-    .stButton>button { width: 100%; border-radius: 20px; background-color: #0077B6; color: white; }
+    /* Maldivian Blue Gradient Header */
+    .main {
+        background: linear-gradient(135deg, #0077B6 0%, #00B4D8 50%, #90E0EF 100%);
+        color: white;
+    }
+    .stApp {
+        background-color: #f8f9fa;
+    }
+    .vessel-card {
+        background: white;
+        padding: 20px;
+        border-radius: 20px;
+        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+        margin-bottom: 15px;
+        color: #333;
+    }
+    .status-badge {
+        padding: 5px 12px;
+        border-radius: 15px;
+        font-size: 0.8em;
+        font-weight: bold;
+    }
     </style>
     """, unsafe_allow_html=True)
 
-# --- MOCK DATA (Simulating followme.mv) ---
-# In a real app, you would use 'requests' and 'BeautifulSoup' to scrape live data
-data = {
-    "Vessel Name": ["Aanu Quick", "Coral Express", "Aagalaa", "Dhon Hiri", "Altec Dash"],
-    "Type": ["Speedboat", "Ferry", "Supply Boat", "Dhoni", "Speedboat"],
-    "Status": ["Live: On Time", "Delayed", "Scheduled", "Live: On Time", "Live: On Time"],
-    "Lat": [4.1755, 4.1910, 4.1700, 4.2100, 4.1850],
-    "Lon": [73.5093, 73.5200, 73.5000, 73.5350, 73.5150],
-    "Speed": ["31.0 knots", "12.0 knots", "8.5 knots", "22.0 knots", "35.0 knots"]
-}
-df = pd.DataFrame(data)
+# --- MOCK DATA: CONNECTED TO YOUR ANDROID LOGIC ---
+vessel_data = [
+    {"id": 1, "name": "Aanu Quick", "type": "Speedboat", "status": "Live: On Time", "lat": 4.1755, "lon": 73.5093, "speed": "31 knots"},
+    {"id": 2, "name": "Coral Express", "type": "Ferry", "status": "Delayed", "lat": 4.1910, "lon": 73.5200, "speed": "12 knots"},
+    {"id": 3, "name": "Dhon Hiri", "type": "Dhoni", "status": "Live: On Time", "lat": 4.2100, "lon": 73.5350, "speed": "22 knots"},
+    {"id": 4, "name": "Altec Dash", "type": "Speedboat", "status": "Scheduled", "lat": 4.1850, "lon": 73.5150, "speed": "0 knots"}
+]
+df = pd.DataFrame(vessel_data)
 
-# --- SIDEBAR: SEARCH & FILTERS ---
-st.sidebar.header("🚢 Vessel Finder")
-search_query = st.sidebar.text_input("Search vessel name...", "")
-filter_type = st.sidebar.multiselect("Vessel Type", options=df["Type"].unique(), default=df["Type"].unique())
-
-# Filter Logic
-filtered_df = df[(df["Vessel Name"].str.contains(search_query, case=False)) & (df["Type"].isin(filter_type))]
-
-# --- MAIN UI ---
-st.title("🌊 Maldives Vessel Management")
-st.write(f"Updated: {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}")
+# --- HEADER ---
+st.title("🌊 Maldives Vessel Tracker")
+st.write(f"Last Synced with FollowMe: {datetime.now().strftime('%H:%M:%S')}")
 
+# --- LAYOUT: MAP & LIST ---
 col1, col2 = st.columns([2, 1])
 
 with col1:
-    st.subheader("📍 Live Tracking Map")
-    # Create Folium Map (Dark Theme for Gen Z aesthetic)
-    m = folium.Map(location=[4.1755, 73.5093], zoom_start=13, tiles="cartodbpositron")
+    st.subheader("📍 Live Fleet Map")
+    # Modern Map centered on Male'
+    m = folium.Map(location=[4.1850, 73.5150], zoom_start=13, tiles="CartoDB positron")
     
-    for _, row in filtered_df.iterrows():
-        color = "green" if "On Time" in row["Status"] else "red"
+    for _, boat in df.iterrows():
+        color = "green" if "On Time" in boat["status"] else "orange" if "Delayed" in boat["status"] else "gray"
         folium.Marker(
-            location=[row["Lat"], row["Lon"]],
-            popup=f"{row['Vessel Name']} ({row['Speed']})",
+            [boat["lat"], boat["lon"]],
+            popup=f"<b>{boat['name']}</b><br>Speed: {boat['speed']}",
             icon=folium.Icon(color=color, icon="ship", prefix="fa")
         ).add_to(m)
     
-    st_folium(m, width=800, height=500)
+    st_folium(m, width="100%", height=500)
 
 with col2:
-    st.subheader("💳 Fast Payment (50 MVR)")
-    if not filtered_df.empty:
-        selected_vessel = st.selectbox("Select Vessel to Pay", filtered_df["Vessel Name"])
-        if st.button(f"Pay for {selected_vessel}"):
-            st.balloons()
-            st.success(f"Payment for {selected_vessel} successful! Check your SMS for the ticket. 🎫")
-    else:
-        st.warning("No vessels found matching your search.")
+    st.subheader("🚢 Vessel List")
+    search = st.text_input("Search (e.g. 'Aanu')", "")
+    
+    for _, boat in df.iterrows():
+        if search.lower() in boat["name"].lower():
+            with st.container():
+                st.markdown(f"""
+                <div class="vessel-card">
+                    <h3 style="margin:0;">{boat['name']}</h3>
+                    <p style="color:gray; margin-bottom:10px;">{boat['type']} • {boat['speed']}</p>
+                    <span class="status-badge" style="background:#e1f5fe; color:#01579b;">{boat['status']}</span>
+                </div>
+                """, unsafe_allow_html=True)
+                if st.button(f"Pay 50 MVR for {boat['name']}", key=boat['id']):
+                    st.balloons()
+                    st.success("Payment successful! 🎫")
 
-# --- DATA TABLE ---
-st.subheader("📋 Vessel Status Board")
-st.dataframe(filtered_df[["Vessel Name", "Type", "Status", "Speed"]], use_container_width=True)
+# --- FOOTER ---
+st.divider()
+st.info("💡 Note: This is a web preview. For the full experience with real-time push notifications, download the Android APK.")