Update app.py

app.py

@@ -32,22 +32,37 @@ st.markdown("""
         --input-bg: #ffffff;
         --secondary-bg: #f8f9fa;
         --green: #f0ff0;
-        --dgreen: #006400
+        --dgreen: #006400;
+        --mobile-width: 414px;
     }
 
+    /* ======== تنظیمات اجباری موبایل ======== */
+    html, body {
+        width: 100% !important;
+        max-width: 100% !important;
+        overflow-x: hidden !important;
+        -webkit-text-size-adjust: 100%;
+    }
+
+    [data-testid="stAppViewContainer"] {
+        max-width: var(--mobile-width) !important;
+        margin: 0 auto !important;
+        padding: 10px !important;
+        box-shadow: 0 0 10px rgba(0,0,0,0.1);
+    }
+
+    /* ======== استایل‌های اصلی شما (بدون تغییر) ======== */
     * {
         font-family: 'B Nazanin', 'B Nazanin Bold', sans-serif !important;
         text-align: right !important;
         direction: rtl !important;
     }
 
-    /* تنظیمات اصلی */
     body, .stApp, [data-testid="stAppViewContainer"] {
         background-color: var(--background) !important;
         color: var(--text) !important;
     }
 
-    /* هدر راهیار */
     .rahyar-title {
         color: var(--primary) !important;
         margin: 0 !important;
@@ -59,7 +74,6 @@ st.markdown("""
         font-size: 14px !important;
     }
 
-        /* توضیحات */
     .explanation-title {
         color: var(--primary) !important;
         font-weight: bold !important;
@@ -75,8 +89,7 @@ st.markdown("""
         border-right: 3px solid var(--primary) !important;
     }
 
-    /* ========== استایل‌های ورودی یکپارچه ========== */
-    /* استایل پایه برای تمام عناصر ورودی */
+    /* ========== استایل‌های ورودی ========== */
     .stTextInput input, 
     .stNumberInput input, 
     .stSelectbox select,
@@ -92,9 +105,10 @@ st.markdown("""
         border-radius: 6px !important;
         min-height: 40px !important;
         transition: all 0.2s ease !important;
+        width: 100% !important;
+        box-sizing: border-box !important;
     }
     
-    /* استایل برای حالت hover و focus */
     .stTextInput input:hover,
     .stNumberInput input:hover,
     .stSelectbox select:hover,
@@ -113,7 +127,6 @@ st.markdown("""
         outline: none !important;
     }  
     
-    /* استایل لیبل‌ها */
     .stTextInput > label,
     .stNumberInput > label,
     .stSelectbox > label,
@@ -125,13 +138,12 @@ st.markdown("""
         font-size: 14px !important;
     }
     
-    /* استایل placeholder */
     ::placeholder {
         color: var(--text) !important;
         opacity: 0.5 !important;
     }
     
-    /* ========== استایل‌های خاص Selectbox ========== */
+    /* ========== Selectbox ========== */
     div[data-baseweb="select"] > div:first-child {
         -webkit-appearance: none !important;
         -moz-appearance: none !important;
@@ -139,7 +151,6 @@ st.markdown("""
         background-image: none !important;
     }
     
-    /* برای اینترنت اکسپلورر */
     div[data-baseweb="select"] > div:first-child::-ms-expand {
         display: none !important;
     }
@@ -155,28 +166,23 @@ st.markdown("""
         top: 50%;
         transform: translateY(-50%);
         color: var(--primary);
-        background-color: white !important; /* پسزمینه سفید برای پوشاندن فلش پیشفرض */
+        background-color: white !important;
         font-size: 14px;
         pointer-events: none;
     }
-          
-
-    /* ===== راه حل تضمینی برای استایل dropdown ===== */
     
-    /* آیتم‌های لیست */
     div[data-baseweb="popover"] [role="option"] {
         color: var(--text) !important;
         background-color: white !important;
         border: 1px var(--primary) !important;
     }
     
-    /* آیتم انتخاب شده */
     div[data-baseweb="popover"] [role="option"][aria-selected="true"] {
         background-color: #f0e6ff !important;
         color: black !important;
     }
     
-    /* ========== استایل‌های Number Input ========== */
+    /* ========== Number Input ========== */
     .stNumberInput button {
         color: var(--primary) !important;
         background-color: transparent !important;
@@ -189,8 +195,7 @@ st.markdown("""
         background-color: #f0e6ff !important;
     }
     
-
-    /* کامپوننت‌های سفارشی */
+    /* ========== کامپوننت‌های سفارشی ========== */
     .rahyar-header {
         background-color: var(--primary) !important;
         color: white !important;
@@ -206,9 +211,10 @@ st.markdown("""
         padding: 15px !important;
         margin: 15px 0 !important;
         border-right: 5px solid var(--primary) !important;
+        width: 100% !important;
     }
 
-    /* دکمه اصلی (بنفش با متن سفید) */
+    /* ========== دکمه‌ها ========== */
     .stButton>button, 
     [data-testid="baseButton-primary"],
     .accept-btn,
@@ -219,20 +225,20 @@ st.markdown("""
         border-radius: 8px !important;
         padding: 10px 20px !important;
         font-weight: bold !important;
-        transition: all 0.3s ease !important; /* افزودن transition برای انیمیشن نرم */
+        transition: all 0.3s ease !important;
+        width: 100% !important;
+        margin: 5px 0 !important;
     }
     
-    /* افکت hover برای دکمه اصلی */
     .stButton>button:hover, 
     [data-testid="baseButton-primary"]:hover,
     .accept-btn:hover,
     div[data-testid="stVerticalBlock"] > div[data-testid="stHorizontalBlock"] > div > div > button:hover {
-        background-color: #5a0a96 !important; /* بنفش تیره‌تر */
-        transform: translateY(-1px) !important; /* حرکت جزئی به بالا */
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; /* سایه بیشتر */
+        background-color: #5a0a96 !important;
+        transform: translateY(-1px) !important;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
     }
     
-    /* دکمه ثانویه (سفید با حاشیه بنفش) */
     .stFormSubmitButton>button,
     [data-testid="baseButton-secondary"],
     .reject-btn {
@@ -242,19 +248,19 @@ st.markdown("""
         border-radius: 8px !important;
         padding: 10px 20px !important;
         font-weight: bold !important;
-        transition: all 0.3s ease !important; /* افزودن transition برای انیمیشن نرم */
+        transition: all 0.3s ease !important;
+        width: 100% !important;
     }
     
-    /* افکت hover برای دکمه ثانویه */
     .stFormSubmitButton>button:hover,
     [data-testid="baseButton-secondary"]:hover,
     .reject-btn:hover {
-        background-color: #5a0a96 !important; /* بنفش تیره‌تر */
-        transform: translateY(-1px) !important; /* حرکت جزئی به بالا */
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; /* سایه بیشتر */
+        background-color: #5a0a96 !important;
+        transform: translateY(-1px) !important;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
     }
 
-        /* استایل تضمینی برای رادیو باتن‌ها - نسخه نهایی */
+    /* ========== رادیو باتن‌ها ========== */
     .stRadio > div > div > div > div > div > label,
     .stRadio > div > div > div > div > label,
     .stRadio > div > div > div > label,
@@ -262,7 +268,7 @@ st.markdown("""
     .stRadio > div > label,
     .stRadio > label {
         color: #000000 !important;
-        -webkit-text-fill-color: #000000 !important; /* برای مرورگرهای وبکیت */
+        -webkit-text-fill-color: #000000 !important;
     }
     
     .stRadio span {
@@ -270,7 +276,6 @@ st.markdown("""
         -webkit-text-fill-color: #000000 !important;
     }
     
-    /* اگر باز هم مشکل داشت این را اضافه کنید */
     .stRadio > div > div > div > div > div > label > div:first-child,
     .stRadio > div > div > div > div > label > div:first-child,
     .stRadio > div > div > div > label > div:first-child,
@@ -281,7 +286,7 @@ st.markdown("""
         -webkit-text-fill-color: #000000 !important;
     }
 
-        /* استایل پایه برای هشدارها */
+    /* ========== هشدارها ========== */
     .stAlert .st-ae {
         border-right: 4px solid #ffc107 !important;
         background-color: #fff3cd !important;
@@ -290,13 +295,11 @@ st.markdown("""
         color: #856404 !important;
     }
     
-    /* آیکون هشدار */
     .stAlert .st-af {
         color: #ffc107 !important;
         font-size: 20px !important;
     }
     
-    /* متن هشدار */
     .stAlert .st-ag {
         color: #856404 !important;
         font-family: 'B Nazanin' !important;
@@ -304,152 +307,96 @@ st.markdown("""
         margin-right: 8px !important;
     }
     
-    /* حالت hover برای هشدار */
     .stAlert .st-ae:hover {
         box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2) !important;
         transform: translateX(2px);
         transition: all 0.3s ease;
     }
     
-    /* استایل برای دکمه بستن هشدار */
     .stAlert .st-ah {
         color: #856404 !important;
     }
-    
-    /* استایل مخصوص موبایل */
-    @media (max-width: 768px) {
-        .stAlert .st-ae {
-            padding: 12px !important;
-            font-size: 13px !important;
-        }
-    }
-    
 
-    /* متن گزینه‌ها */
-    .stRadio span {
-        color: #000000 !important; /* مشکی خالص */
-        font-size: 14px !important;
-        padding-right: 5px !important;
-    }
-    
-    /* حالت hover */
-    .stRadio label:hover span {
-        color: #333333 !important; /* مشکی کمی روشن‌تر */
+    /* ========== نقشه ========== */
+    .folium-map {
+        width: 100% !important;
+        max-width: 100% !important;
+        height: 300px !important;
+        margin: 10px 0 !important;
     }
-    
-    /* کانتینر اصلی */
-    .stRadio > div {
-        margin-bottom: 10px !important;
+
+    /* ========== تنظیمات عمومی ========== */
+    ::-webkit-scrollbar {
+        display: none !important;
     }
 
+    body {
+        touch-action: pan-y;
+        -webkit-user-scalable: no;
+        user-scalable: no;
+    }
 
-    /* تنظیمات مخصوص موبایل */
-    @media (max-width: 768px) {
-        .folium-map {
-            height: 300px !important;
-        }
-        
-        /* فرم‌ها در موبایل */
-        .stTextInput>label,
-        .stNumberInput>label,
-        .stSelectbox>label {
+    /* ========== رسپانسیو ========== */
+    @media (max-width: 414px) {
+        * {
             font-size: 14px !important;
-            padding: 4px 0 !important;
         }
-        
-        .stTextInput input,
-        .stNumberInput input,
-        .stSelectbox select {
-            font-size: 16px !important;
-            padding: 12px !important;
-            height: auto !important;
+        h1 {
+            font-size: 22px !important;
         }
-        
-        .stButton>button {
-            font-size: 14px !important;
-            padding: 8px 16px !important;
+        h2 {
+            font-size: 20px !important;
         }
-        
-        .stMarkdown h3 {
-            font-size: 16px !important;
+        h3 {
+            font-size: 18px !important;
         }
-        
-        .stMarkdown p {
-            font-size: 13px !important;
-        }
-        
-        .stSelectbox [role="listbox"] {
-            font-size: 16px !important;
+        .stTextInput input, 
+        .stNumberInput input, 
+        .stSelectbox select {
+            font-size: 14px !important;
+            padding: 10px !important;
         }
     }
-        /* اضافه کردن متا ویوپورت برای شبیه‌سازی موبایل */
-    @viewport {
-        width: device-width;
-        initial-scale: 1.0;
-        maximum-scale: 1.0;
-        user-scalable: no;
-    }
-    
-    /* اجبار به استفاده از عرض دستگاه */
-    html, body, [data-testid="stAppViewContainer"] {
-        width: 100% !important;
-        max-width: 100% !important;
-        min-width: 320px !important;
-    }
-    
-    /* تنظیمات عمومی برای شبیه‌سازی موبایل */
-    body {
-        touch-action: pan-y pinch-zoom;
-        -webkit-text-size-adjust: 100%;
-    }
-    
-    /* تنظیمات مخصوص کامپوننت‌ها برای موبایل */
-    .stApp {
-        max-width: 414px !important;  /* عرض معمول موبایل‌ها */
-        margin: 0 auto !important;
-        box-shadow: 0 0 20px rgba(0,0,0,0.1);
-        min-height: 100vh;
-    }
-    
-    /* تنظیمات نقشه برای موبایل */
-    .folium-map {
-        width: 100% !important;
-        max-width: 100% !important;
-        height: 300px !important;
-    }
-    
-    /* مخفی کردن اسکرولبار در دسکتاپ */
-    ::-webkit-scrollbar {
-        display: none;
-    }
-    
-    /* تنظیمات ریسپانسیو برای تمام عناصر */
-    .stTextInput input, 
-    .stNumberInput input, 
-    .stSelectbox select,
-    .stTextArea textarea,
-    .stDateInput input,
-    .stTimeInput input {
-        width: 100% !important;
-        box-sizing: border-box;
-    }
-    
-    /* تنظیمات دکمه‌ها برای موبایل */
-    .stButton > button {
-        width: 100% !important;
-        margin: 5px 0 !important;
-    }
-    
-    /* تنظیمات کانتینر قیمت */
-    .price-container {
-        width: 100% !important;
-        box-sizing: border-box;
-    }
 </style>
 
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 """, unsafe_allow_html=True)
 
+# کد JavaScript برای اعمال نهایی
+st.components.v1.html("""
+<script>
+// تنظیم viewport دینامیک
+document.querySelector('meta[name="viewport"]').content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no';
+
+// تنظیم عرض صفحه
+const appContainer = document.querySelector('[data-testid="stAppViewContainer"]');
+if (appContainer) {
+    appContainer.style.maxWidth = '414px';
+    appContainer.style.margin = '0 auto';
+}
+
+// غیرفعال کردن زوم
+document.addEventListener('gesturestart', function(e) {
+    e.preventDefault();
+});
+document.addEventListener('dblclick', function(e) {
+    e.preventDefault();
+}, { passive: false });
+
+// تنظیم اندازه فونت
+function adjustLayout() {
+    const container = document.querySelector('[data-testid="stAppViewContainer"]');
+    if (container) {
+        const width = container.offsetWidth;
+        const baseSize = width < 400 ? 14 : 16;
+        document.documentElement.style.fontSize = baseSize + 'px';
+    }
+}
+window.addEventListener('resize', adjustLayout);
+adjustLayout();
+</script>
+""", height=0)
+
 # ========== توابع اصلی ==========
 def create_ride_map():
     """ایجاد نقشه سفر با Folium - نسخه اصلاح شده با مناطق عمومی"""