File size: 3,291 Bytes
2d45cb8 b06b11f 2d45cb8 b06b11f 2d45cb8 b06b11f 2d45cb8 b06b11f 2d45cb8 b06b11f 2d45cb8 b06b11f 2d45cb8 b06b11f 2d45cb8 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | import streamlit as st
import pandas as pd
import folium
from streamlit_folium import st_folium
from datetime import datetime
# --- GEN Z DESIGN: CUSTOM CSS ---
st.set_page_config(page_title="Maldives Vessel Tracker", page_icon="🚢", layout="wide")
st.markdown("""
<style>
/* 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: 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)
# --- 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 Fleet Map")
# Modern Map centered on Male'
m = folium.Map(location=[4.1850, 73.5150], zoom_start=13, tiles="CartoDB positron")
for _, boat in df.iterrows():
color = "green" if "On Time" in boat["status"] else "orange" if "Delayed" in boat["status"] else "gray"
folium.Marker(
[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="100%", height=500)
with col2:
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! 🎫")
# --- FOOTER ---
st.divider()
st.info("💡 Note: This is a web preview. For the full experience with real-time push notifications, download the Android APK.") |