Update app.py

app.py

@@ -19,238 +19,135 @@ SHEET_NAME = "Condition1"
 # ========== استایل‌های سفارشی یکپارچه ==========
 st.markdown("""
 <style>
-    @font-face {
-        font-family: 'B Nazanin';
-        src: url('https://cdn.jsdelivr.net/gh/rastikerdar/fonts@master/fonts/B%20Nazanin/B%20Nazanin.woff') format('woff');
+/* تنظیمات برای موبایل */
+@media (max-width: 768px) {
+    /* اجبار نمایش تمام صفحه به اندازه موبایل */
+    html, body, .stApp {
+        max-width: 768px !important; /* حداکثر عرض صفحه */
+        margin: 0 auto; /* وسط‌چین کردن محتوا */
+        width: 100% !important;
     }
 
-    :root {
-        --primary: #6a0dad;
-        --text: #333333;
-        --background: #ffffff;
-        --border: #dddddd;
-        --input-bg: #ffffff;
-        --secondary-bg: #f8f9fa;
-        --mobile-width: 375px;
-        --mobile-height: 667px;
+    /* تنظیم ارتفاع نقشه برای موبایل */
+    .folium-map {
+        height: 300px !important; /* ارتفاع نقشه در موبایل */
     }
 
-    /* ======== تنظیمات پایه ======== */
-    * {
-        font-family: 'B Nazanin', 'B Nazanin Bold', sans-serif !important;
-        text-align: right !important;
-        direction: rtl !important;
-        box-sizing: border-box !important;
+    /* تغییرات برای بخش‌های مختلف برای موبایل */
+    .stTextInput input, 
+    .stNumberInput input, 
+    .stSelectbox select,
+    .stTextArea textarea,
+    .stDateInput input,
+    .stTimeInput input,
+    .stMultiSelect div[role="combobox"],
+    div[data-testid="stVerticalBlock"] > div[data-testid="stHorizontalBlock"] > div > div > div > div > input,
+    div[data-baseweb="select"] > div:first-child {
+        font-size: 14px !important;
+        padding: 12px !important;
     }
 
-    html, body {
-        width: 100% !important;
-        height: 100% !important;
-        margin: 0 !important;
-        padding: 0 !important;
-        overflow: hidden !important;
+    /* دکمه‌ها برای موبایل */
+    .stButton>button, 
+    [data-testid="baseButton-primary"] {
+        font-size: 16px !important;
+        padding: 10px 20px !important;
     }
 
-    /* ======== کادر موبایل برای دسکتاپ ======== */
-    @media (min-width: 768px) {
-        body {
-            background: #f0f0f0 !important;
-            display: flex !important;
-            justify-content: center !important;
-            align-items: center !important;
-            padding: 20px !important;
-        }
-        
-        [data-testid="stAppViewContainer"] {
-            width: var(--mobile-width) !important;
-            height: var(--mobile-height) !important;
-            margin: 0 auto !important;
-            padding: 15px !important;
-            border: 12px solid #000 !important;
-            border-radius: 40px !important;
-            box-shadow: 0 0 0 6px #666, 
-                        0 0 30px rgba(0,0,0,0.5) !important;
-            position: relative !important;
-            overflow: hidden !important;
-            background-color: var(--background) !important;
-        }
-        
-        /* دکمه هوم مجازی */
-        [data-testid="stAppViewContainer"]::after {
-            content: "";
-            position: absolute;
-            bottom: 15px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 100px;
-            height: 4px;
-            background: #333;
-            border-radius: 2px;
-        }
-        
-        .stApp {
-            width: 100% !important;
-            height: 100% !important;
-            overflow: auto !important;
-        }
+    /* چینش فرم‌ها و المان‌ها در موبایل */
+    .stTextInput>label,
+    .stNumberInput>label,
+    .stSelectbox>label {
+        font-size: 14px !important;
+        padding: 4px 0 !important;
     }
 
-    /* ======== تنظیمات عمومی محتوا ======== */
-    [data-testid="stAppViewContainer"] {
-        background-color: var(--background) !important;
-        color: var(--text) !important;
-        padding: 10px !important;
+    .stTextInput input,
+    .stNumberInput input,
+    .stSelectbox select {
+        font-size: 16px !important;
+        padding: 12px !important;
+        height: auto !important;
     }
 
-    /* ======== استایل‌های اصلی شما (بدون تغییر) ======== */
-    .rahyar-title {
-        color: var(--primary) !important;
-        margin: 0 !important;
-    }
-    
-    .rahyar-subtitle {
-        color: var(--primary) !important;
-        margin: 0 !important;
+    .stButton>button {
         font-size: 14px !important;
+        padding: 8px 16px !important;
     }
 
-    .explanation-title {
-        color: var(--primary) !important;
-        font-weight: bold !important;
-        margin: 20px 0 10px 0 !important;
-        font-size: 18px !important;
+    /* پنهان کردن همه المان‌ها در حالت دسکتاپ */
+    @media (min-width: 769px) {
+        .stApp {
+            width: 100% !important;
+        }
     }
 
-    .explanation-item {
-        background-color: var(--secondary-bg) !important;
-        border-radius: 8px !important;
-        padding: 12px 15px !important;
-        margin: 8px 0 !important;
-        border-right: 3px solid var(--primary) !important;
+    /* اطمینان از اینکه دکمه‌ها درست در حالت موبایل ظاهر شوند */
+    .stAlert .st-ae {
+        padding: 12px !important;
+        font-size: 13px !important;
     }
 
-    /* ======== دکمه‌ها ======== */
-    .stButton>button, 
-    [data-testid="baseButton-primary"],
-    .accept-btn,
-    div[data-testid="stVerticalBlock"] > div[data-testid="stHorizontalBlock"] > div > div > button {
-        background-color: var(--primary) !important;
-        color: white !important;
-        border: none !important;
-        border-radius: 8px !important;
-        padding: 10px 20px !important;
-        font-weight: bold !important;
-        transition: all 0.3s ease !important;
-        margin: 5px 0 !important;
+    /* حذف فاصله اضافی از المان‌های مختلف در موبایل */
+    .stMarkdown h3 {
+        font-size: 16px !important;
     }
 
-    /* ======== عناصر فرم ======== */
-    .stTextInput input, 
-    .stNumberInput input, 
-    .stSelectbox select {
-        width: 100% + 20x !important;
-        max-width: 100% + 20x !important;
+    .stMarkdown p {
+        font-size: 13px !important;
     }
 
-    /* ======== نقشه ======== */
-    .folium-map {
-        width: 100% + 20x !important;
-        height: 200px !important;
+    .stSelectbox [role="listbox"] {
+        font-size: 16px !important;
     }
 
-    /* ======== تنظیمات موبایل واقعی ======== */
-    @media (max-width: 800px) {
-        [data-testid="stAppViewContainer"] {
-            max-width: 100% + 20x !important;
-            border: none !important;
-            border-radius: 0 !important;
-            box-shadow: none !important;
+    /* تنظیمات مخصوص موبایل برای آیتم‌ها */
+    @media (max-width: 768px) {
+        .stAlert .st-ae {
+            padding: 12px !important;
+            font-size: 13px !important;
         }
-    }
 
-</style>
-
-<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-""", unsafe_allow_html=True)
+        /* فرم‌ها در موبایل */
+        .stTextInput>label,
+        .stNumberInput>label,
+        .stSelectbox>label {
+            font-size: 14px !important;
+            padding: 4px 0 !important;
+        }
 
+        .stTextInput input,
+        .stNumberInput input,
+        .stSelectbox select {
+            font-size: 16px !important;
+            padding: 12px !important;
+            height: auto !important;
+        }
 
-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';
+        .stButton>button {
+            font-size: 14px !important;
+            padding: 8px 16px !important;
+        }
 
-// تنظیمات کادر موبایل در دسکتاپ
-function setupMobileFrame() {
-    const appContainer = document.querySelector('[data-testid="stAppViewContainer"]');
-    const isDesktop = window.innerWidth >= 768;
-    
-    if (appContainer) {
-        if (isDesktop) {
-            // تنظیمات برای دسکتاپ
-            appContainer.style.width = '375px';
-            appContainer.style.height = '667px';
-            appContainer.style.margin = '0 auto';
-            appContainer.style.overflow = 'hidden';
-            
-            // تنظیم اسکرول برای محتوای داخلی
-            const appContent = document.querySelector('.stApp > div');
-            if (appContent) {
-                appContent.style.maxHeight = 'calc(667px - 40px)';
-                appContent.style.overflowY = 'auto';
-                appContent.style.scrollbarWidth = 'none';
-            }
-            
-            // تنظیم پس‌زمینه صفحه
-            document.body.style.background = '#f0f0f0';
-            document.body.style.display = 'flex';
-            document.body.style.justifyContent = 'center';
-            document.body.style.alignItems = 'center';
-            document.body.style.padding = '20px';
-        } else {
-            // تنظیمات برای موبایل واقعی
-            appContainer.style.width = '100%';
-            appContainer.style.maxWidth = '100%';
-            appContainer.style.height = 'auto';
-            appContainer.style.margin = '0';
-            appContainer.style.overflow = 'visible';
+        .stMarkdown h3 {
+            font-size: 16px !important;
         }
-    }
-}
 
-// غیرفعال کردن زوم و تنظیمات لمسی
-function disableZoom() {
-    document.addEventListener('gesturestart', function(e) {
-        e.preventDefault();
-    });
-    document.addEventListener('dblclick', function(e) {
-        e.preventDefault();
-    }, { passive: false });
-}
+        .stMarkdown p {
+            font-size: 13px !important;
+        }
 
-// تنظیم اندازه فونت بر اساس عرض دستگاه
-function adjustFontSize() {
-    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';
+        .stSelectbox [role="listbox"] {
+            font-size: 16px !important;
+        }
     }
 }
 
-// اجرای تمام تنظیمات پس از لود صفحه
-window.addEventListener('load', function() {
-    setupMobileFrame();
-    disableZoom();
-    adjustFontSize();
-});
+</style>
+
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+""", unsafe_allow_html=True)
 
-// اجرای مجدد تنظیمات هنگام تغییر سایز پنجره
-window.addEventListener('resize', function() {
-    setupMobileFrame();
-    adjustFontSize();
-});
-</script>
-""", height=0)
 
 
 # ========== توابع اصلی ==========
@@ -913,6 +810,12 @@ def main():
     # تشخیص دستگاه
     user_agent = st.query_params.get("user_agent", [""])[0]
     st.session_state.is_desktop = "mobile" not in user_agent.lower()
+
+
+    # اینجا می‌توانید از is_desktop برای تعیین اینکه نمایشگر موبایل اعمال شود، استفاده کنید
+    if st.session_state.is_desktop:
+        # اطمینان از نمایش همان حالت موبایل برای همه دستگاه‌ها
+        st.session_state.is_desktop = False
     
     if 'current_page' not in st.session_state:
         st.session_state.current_page = "welcome"