Update app.py

app.py

@@ -4,8 +4,10 @@ import folium
 from streamlit_folium import folium_static
 import jdatetime
 import plotly.express as px
-import json
-from pathlib import Path
+from folium.plugins import HeatMap, Fullscreen, Search
+import branca.colormap as cm
+from datetime import datetime
+import base64
 
 # تنظیمات اولیه صفحه
 st.set_page_config(
@@ -15,39 +17,100 @@ st.set_page_config(
     initial_sidebar_state="expanded"
 )
 
-# CSS برای راست به چپ کردن متن‌ها
+# CSS برای ظاهر جذاب و متحرک
 st.markdown(
     """
     <style>
+    @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700&display=swap');
+    
+    * {
+        font-family: 'Vazirmatn', sans-serif !important;
+    }
+    
     .css-1d391kg {
         direction: rtl;
     }
+    
     .stButton>button {
         float: right;
+        background: linear-gradient(45deg, #1CB5E0 0%, #000851 100%);
+        color: white;
+        transition: all 0.3s ease;
     }
-    .stSelectbox>div>div {
-        direction: rtl;
-        text-align: right;
+    
+    .stButton>button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+    }
+    
+    .css-1y4p8pa {
+        padding: 2rem;
+        border-radius: 15px;
+        background: rgba(255,255,255,0.95);
+        box-shadow: 0 8px 32px 0 rgba(31,38,135,0.37);
+        backdrop-filter: blur(4px);
+        margin: 1rem 0;
+    }
+    
+    .css-1v0mbdj {
+        border-radius: 15px;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        transition: all 0.3s ease;
+    }
+    
+    .css-1v0mbdj:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 6px 15px rgba(0,0,0,0.2);
+    }
+    
+    /* انیمیشن برای عناوین */
+    @keyframes slideIn {
+        from {
+            transform: translateX(50px);
+            opacity: 0;
+        }
+        to {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
+    
+    h1, h2, h3 {
+        animation: slideIn 0.5s ease-out;
+    }
+    
+    /* استایل برای کارت‌های آمار */
+    .metric-card {
+        background: linear-gradient(135deg, #00B4DB 0%, #0083B0 100%);
+        color: white;
+        padding: 20px;
+        border-radius: 10px;
+        text-align: center;
+        transition: all 0.3s ease;
+    }
+    
+    .metric-card:hover {
+        transform: scale(1.05);
     }
     </style>
     """,
     unsafe_allow_html=True
 )
 
-# تعریف داده‌های اولیه
+# تعریف داده‌های اولیه با چاهک نصب شده
 @st.cache_data
 def load_initial_data():
     data = {
-        'مزرعه': ['01-28', '02-19', '02-27', '03-08', '03-30', '03-32'],
-        'کانال': ['01', '02', '02', '03', '03', '03'],
-        'اداره': [1, 2, 2, 1, 1, 1],
-        'واریته': ['CP69', 'CP69', 'CP69', 'CP69', 'IR01-412', 'IRC00-14'],
-        'مساحت': [23.83, 24.53, 24.84, 23.17, 23.35, 22.97],
-        'چاهک_1_نصب': [False] * 6,
-        'چاهک_1_تکنسین': [''] * 6,
-        'چاهک_1_تاریخ': [''] * 6,
-        'چاهک_1_lat': [0.0] * 6,
-        'چاهک_1_lon': [0.0] * 6,
+        'مزرعه': ['17-09', '02-19', '02-27', '03-08', '03-30', '03-32'],
+        'کانال': ['17', '02', '02', '03', '03', '03'],
+        'اداره': [3, 2, 2, 1, 1, 1],
+        'واریته': ['CP73', 'CP69', 'CP69', 'CP69', 'IR01-412', 'IRC00-14'],
+        'مساحت': [23.09, 24.53, 24.84, 23.17, 23.35, 22.97],
+        'چاهک_1_نصب': [True, False, False, False, False, False],
+        'چاهک_1_تکنسین': ['علی دغاغله', '', '', '', '', ''],
+        'چاهک_1_تاریخ': ['1404/01/16', '', '', '', '', ''],
+        'چاهک_1_lat': [31.504, 0.0, 0.0, 0.0, 0.0, 0.0],
+        'چاهک_1_lon': [48.752, 0.0, 0.0, 0.0, 0.0, 0.0],
         'چاهک_2_نصب': [False] * 6,
         'چاهک_2_تکنسین': [''] * 6,
         'چاهک_2_تاریخ': [''] * 6,
@@ -68,12 +131,27 @@ TECHNICIANS = [
     'امین هنری'
 ]
 
-# عنوان اصلی
-st.title("🌱 مدیریت چاهک‌های مزارع نیشکر")
+# عنوان اصلی با افکت گرادیان
+st.markdown(
+    """
+    <h1 style='text-align: center; color: #0083B0; background: -webkit-linear-gradient(45deg, #1CB5E0, #000851);
+    -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding: 20px;'>
+    🌱 سامانه مدیریت چاهک‌های مزارع نیشکر
+    </h1>
+    """,
+    unsafe_allow_html=True
+)
 
-# ساید‌بار برای فیلتر کردن
+# ساید‌بار با استایل جدید
 with st.sidebar:
-    st.header("فیلترها")
+    st.markdown(
+        """
+        <div style='background: linear-gradient(45deg, #1CB5E0 0%, #000851 100%); padding: 20px; border-radius: 10px; color: white;'>
+        <h2 style='text-align: center; margin: 0;'>🔍 فیلترها</h2>
+        </div>
+        """,
+        unsafe_allow_html=True
+    )
     selected_department = st.selectbox(
         "انتخاب اداره",
         options=[0, 1, 2, 3, 4],
@@ -90,53 +168,161 @@ if search_term:
     mask = (filtered_data['مزرعه'].str.contains(search_term)) | (filtered_data['کانال'].str.contains(search_term))
     filtered_data = filtered_data[mask]
 
-# نمایش آمار کلی
+# نمایش آمار کلی با کارت‌های متحرک
 col1, col2, col3 = st.columns(3)
 with col1:
-    total_wells = len(filtered_data) * 2
-    installed_wells = filtered_data['چاهک_1_نصب'].sum() + filtered_data['چاهک_2_نصب'].sum()
-    st.metric("کل چاهک‌ها", total_wells)
+    st.markdown(
+        f"""
+        <div class='metric-card'>
+            <h2>{len(filtered_data) * 2}</h2>
+            <p>کل چاهک‌ها</p>
+        </div>
+        """,
+        unsafe_allow_html=True
+    )
 
 with col2:
-    st.metric("چاهک‌های نصب شده", installed_wells)
+    installed_wells = filtered_data['چاهک_1_نصب'].sum() + filtered_data['چاهک_2_نصب'].sum()
+    st.markdown(
+        f"""
+        <div class='metric-card' style='background: linear-gradient(135deg, #00B09B 0%, #96C93D 100%);'>
+            <h2>{installed_wells}</h2>
+            <p>چاهک‌های نصب شده</p>
+        </div>
+        """,
+        unsafe_allow_html=True
+    )
 
 with col3:
-    st.metric("چاهک‌های باقی‌مانده", total_wells - installed_wells)
+    st.markdown(
+        f"""
+        <div class='metric-card' style='background: linear-gradient(135deg, #FF416C 0%, #FF4B2B 100%);'>
+            <h2>{len(filtered_data) * 2 - installed_wells}</h2>
+            <p>چاهک‌های باقی‌مانده</p>
+        </div>
+        """,
+        unsafe_allow_html=True
+    )
 
-# نمایش نقشه
-st.header("🗺️ نقشه چاهک‌ها")
-m = folium.Map(location=[31.3183, 48.6706], zoom_start=10)
+# نمایش نقشه با تصویر ماهواره‌ای
+st.markdown(
+    """
+    <h2 style='text-align: right; color: #0083B0;'>🗺️ نقشه چاهک‌ها</h2>
+    """,
+    unsafe_allow_html=True
+)
+
+m = folium.Map(
+    location=[31.504, 48.752],
+    zoom_start=13,
+    tiles='https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+    attr='Esri',
+    name='Satellite'
+)
+
+# اضافه کردن لایه OpenStreetMap برای خوانایی بهتر
+folium.TileLayer('OpenStreetMap').add_to(m)
+
+# اضافه کردن کنترل لایه‌ها
+folium.LayerControl().add_to(m)
+
+# اضافه کردن دکمه تمام صفحه
+Fullscreen().add_to(m)
+
+# تعریف CSS برای مارکر چشمک‌زن
+pulse_css = """
+    @keyframes pulse {
+        0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 131, 176, 0.7); }
+        70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(0, 131, 176, 0); }
+        100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 131, 176, 0); }
+    }
+    .pulsing-marker {
+        width: 20px;
+        height: 20px;
+        background: rgba(0, 131, 176, 0.9);
+        border-radius: 50%;
+        animation: pulse 2s infinite;
+    }
+"""
+
+# اضافه کردن استایل به نقشه
+m.get_root().header.add_child(folium.Element(f'<style>{pulse_css}</style>'))
 
 for idx, row in filtered_data.iterrows():
     if row['چاهک_1_نصب'] and row['چاهک_1_lat'] != 0:
-        folium.Marker(
-            [row['چاهک_1_lat'], row['چاهک_1_lon']],
-            popup=f"مزرعه: {row['مزرعه']}<br>چاهک: 1<br>تکنسین: {row['چاهک_1_تکنسین']}<br>تاریخ: {row['چاهک_1_تاریخ']}",
-            icon=folium.Icon(color='red')
+        popup_html = f"""
+        <div style='direction: rtl; text-align: right; padding: 10px;'>
+            <h4 style='color: #0083B0; margin: 0;'>مزرعه {row['مزرعه']}</h4>
+            <p><strong>چاهک:</strong> 1</p>
+            <p><strong>تکنسین:</strong> {row['چاهک_1_تکنسین']}</p>
+            <p><strong>تاریخ نصب:</strong> {row['چاهک_1_تاریخ']}</p>
+            <p><strong>موقعیت:</strong> {row['چاهک_1_lat']:.6f}°N, {row['چاهک_1_lon']:.6f}°E</p>
+        </div>
+        """
+        
+        folium.CircleMarker(
+            location=[row['چاهک_1_lat'], row['چاهک_1_lon']],
+            radius=10,
+            popup=folium.Popup(popup_html, max_width=300),
+            color='#0083B0',
+            fill=True,
+            fill_color='#0083B0',
+            fill_opacity=0.7,
+            weight=2,
+            className='pulsing-marker'
         ).add_to(m)
     
     if row['چاهک_2_نصب'] and row['چاهک_2_lat'] != 0:
-        folium.Marker(
-            [row['چاهک_2_lat'], row['چاهک_2_lon']],
-            popup=f"مزرعه: {row['مزرعه']}<br>چاهک: 2<br>تکنسین: {row['چاهک_2_تکنسین']}<br>تاریخ: {row['چاهک_2_تاریخ']}",
-            icon=folium.Icon(color='blue')
+        popup_html = f"""
+        <div style='direction: rtl; text-align: right; padding: 10px;'>
+            <h4 style='color: #FF416C; margin: 0;'>مزرعه {row['مزرعه']}</h4>
+            <p><strong>چاهک:</strong> 2</p>
+            <p><strong>تکنسین:</strong> {row['چاهک_2_تکنسین']}</p>
+            <p><strong>تاریخ نصب:</strong> {row['چاهک_2_تاریخ']}</p>
+            <p><strong>موقعیت:</strong> {row['چاهک_2_lat']:.6f}°N, {row['چاهک_2_lon']:.6f}°E</p>
+        </div>
+        """
+        
+        folium.CircleMarker(
+            location=[row['چاهک_2_lat'], row['چاهک_2_lon']],
+            radius=10,
+            popup=folium.Popup(popup_html, max_width=300),
+            color='#FF416C',
+            fill=True,
+            fill_color='#FF416C',
+            fill_opacity=0.7,
+            weight=2,
+            className='pulsing-marker'
         ).add_to(m)
 
-folium_static(m)
+# نمایش نقشه با اندازه بزرگتر
+folium_static(m, width=1200, height=600)
 
-# لیست مزارع و ثبت چاهک
-st.header("📝 لیست مزارع و ثبت چاهک")
+# لیست مزارع و ثبت چاهک با ظاهر جدید
+st.markdown(
+    """
+    <h2 style='text-align: right; color: #0083B0;'>📝 لیست مزارع و ثبت چاهک</h2>
+    """,
+    unsafe_allow_html=True
+)
 
 for idx, row in filtered_data.iterrows():
-    with st.expander(f"مزرعه {row['مزرعه']} - کانال {row['کانال']}"):
-        st.write(f"واریته: {row['واریته']}")
-        st.write(f"مساحت: {row['مساحت']} هکتار")
+    with st.expander(f"🌾 مزرعه {row['مزرعه']} - کانال {row['کانال']}", expanded=False):
+        st.markdown(
+            f"""
+            <div style='background: linear-gradient(135deg, #f6f9fc 0%, #f0f4f8 100%); padding: 15px; border-radius: 10px;'>
+                <p><strong>واریته:</strong> {row['واریته']}</p>
+                <p><strong>مساحت:</strong> {row['مساحت']} هکتار</p>
+            </div>
+            """,
+            unsafe_allow_html=True
+        )
         
         col1, col2 = st.columns(2)
         
         # چاهک 1
         with col1:
-            st.subheader("چاهک 1")
+            st.markdown("<h3 style='color: #0083B0;'>چاهک 1</h3>", unsafe_allow_html=True)
             if not row['چاهک_1_نصب']:
                 if st.button(f"ثبت نصب چاهک 1 - مزرعه {row['مزرعه']}", key=f"well1_{idx}"):
                     technician = st.selectbox(
@@ -144,8 +330,8 @@ for idx, row in filtered_data.iterrows():
                         options=TECHNICIANS,
                         key=f"tech1_{idx}"
                     )
-                    lat = st.number_input("عرض جغرافیایی", value=31.3183, key=f"lat1_{idx}")
-                    lon = st.number_input("طول جغرافیایی", value=48.6706, key=f"lon1_{idx}")
+                    lat = st.number_input("عرض جغرافیایی", value=31.504, key=f"lat1_{idx}")
+                    lon = st.number_input("طول جغرافیایی", value=48.752, key=f"lon1_{idx}")
                     if st.button("ثبت نهایی", key=f"save1_{idx}"):
                         st.session_state.farms_data.at[idx, 'چاهک_1_نصب'] = True
                         st.session_state.farms_data.at[idx, 'چاهک_1_تکنسین'] = technician
@@ -155,11 +341,20 @@ for idx, row in filtered_data.iterrows():
                         st.success("چاهک 1 با موفقیت ثبت شد")
                         st.rerun()
             else:
-                st.info(f"نصب شده توسط {row['چاهک_1_تکنسین']} در تاریخ {row['چاهک_1_تاریخ']}")
-        
-        # چاهک 2
+                st.markdown(
+                    f"""
+                    <div style='background: #e3f2fd; padding: 15px; border-radius: 10px;'>
+                        <p>✅ نصب شده توسط {row['چاهک_1_تکنسین']}</p>
+                        <p>📅 تاریخ نصب: {row['چاهک_1_تاریخ']}</p>
+                        <p>📍 موقعیت: {row['چاهک_1_lat']:.6f}°N, {row['چاهک_1_lon']:.6f}°E</p>
+                    </div>
+                    """,
+                    unsafe_allow_html=True
+                )
+
+        # چاهک 2 (مشابه چاهک 1)
         with col2:
-            st.subheader("چاهک 2")
+            st.markdown("<h3 style='color: #FF416C;'>چاهک 2</h3>", unsafe_allow_html=True)
             if not row['چاهک_2_نصب']:
                 if st.button(f"ثبت نصب چاهک 2 - مزرعه {row['مزرعه']}", key=f"well2_{idx}"):
                     technician = st.selectbox(
@@ -167,8 +362,8 @@ for idx, row in filtered_data.iterrows():
                         options=TECHNICIANS,
                         key=f"tech2_{idx}"
                     )
-                    lat = st.number_input("عرض جغرافیایی", value=31.3183, key=f"lat2_{idx}")
-                    lon = st.number_input("طول جغرافیایی", value=48.6706, key=f"lon2_{idx}")
+                    lat = st.number_input("عرض جغرافیایی", value=31.504, key=f"lat2_{idx}")
+                    lon = st.number_input("طول جغرافیایی", value=48.752, key=f"lon2_{idx}")
                     if st.button("ثبت نهایی", key=f"save2_{idx}"):
                         st.session_state.farms_data.at[idx, 'چاهک_2_نصب'] = True
                         st.session_state.farms_data.at[idx, 'چاهک_2_تکنسین'] = technician
@@ -178,10 +373,25 @@ for idx, row in filtered_data.iterrows():
                         st.success("چاهک 2 با موفقیت ثبت شد")
                         st.rerun()
             else:
-                st.info(f"نصب شده توسط {row['چاهک_2_تکنسین']} در تاریخ {row['چاهک_2_تاریخ']}")
+                st.markdown(
+                    f"""
+                    <div style='background: #ffe0e6; padding: 15px; border-radius: 10px;'>
+                        <p>✅ نصب شده توسط {row['چاهک_2_تکنسین']}</p>
+                        <p>📅 تاریخ نصب: {row['چاهک_2_تاریخ']}</p>
+                        <p>📍 موقعیت: {row['چاهک_2_lat']:.6f}°N, {row['چاهک_2_lon']:.6f}°E</p>
+                    </div>
+                    """,
+                    unsafe_allow_html=True
+                )
 
 # نمودار پیشرفت نصب به تفکیک اداره
-st.header("📊 گزارش پیشرفت نصب")
+st.markdown(
+    """
+    <h2 style='text-align: right; color: #0083B0;'>📊 گزارش پیشرفت نصب</h2>
+    """,
+    unsafe_allow_html=True
+)
+
 progress_data = []
 for dept in range(1, 5):
     dept_data = st.session_state.farms_data[st.session_state.farms_data['اداره'] == dept]
@@ -193,6 +403,19 @@ for dept in range(1, 5):
     })
 
 progress_df = pd.DataFrame(progress_data)
-fig = px.bar(progress_df, x='اداره', y='درصد پیشرفت',
-             title='درصد پیشرفت نصب چاهک‌ها به تفکیک اداره')
-st.plotly_chart(fig)
+fig = px.bar(
+    progress_df,
+    x='اداره',
+    y='درصد پیشرفت',
+    title='درصد پیشرفت نصب چاهک‌ها به تفکیک اداره',
+    color='درصد پیشرفت',
+    color_continuous_scale='Viridis',
+    template='plotly_white'
+)
+fig.update_layout(
+    plot_bgcolor='rgba(0,0,0,0)',
+    paper_bgcolor='rgba(0,0,0,0)',
+    font_family='Vazirmatn',
+    title_x=0.5
+)
+st.plotly_chart(fig, use_container_width=True)