Update app.py

app.py

@@ -739,73 +739,166 @@ h3 {
 
 # ========== توابع اصلی ==========
 def enhanced_likert_scale(question_data):
-    """لیکرت اسکیل بهینه‌شده برای موبایل و دسکتاپ"""
+    """لیکرت اسکیل با خط فرضی، لیبل‌ها کنار، و نقاط دایره‌ای تو یه ردیف"""
     question = question_data["question"]
     key = question_data["key"]
     scale = question_data["scale"]
     labels = question_data.get("labels", ["کاملاً مخالفم", "کاملاً موافقم"])
     
+    # مقداردهی اولیه
     if key not in st.session_state:
         st.session_state[key] = None
-
-    # استایل‌دهی واکنش‌گرا
-    st.markdown(f"""
-    <style>
-        @media (max-width: 768px) {{
-            .likert-btn-container {{
-                flex-direction: column;
-                align-items: center;
+    
+    # استایل‌دهی سفارشی
+    st.markdown(
+        f"""
+        <style>
+            /* استایل کانتینر لیکرت */
+            .likert-container {{
+                font-family: 'B Nazanin', Arial, sans-serif !important;
+                direction: rtl !important;
+                text-align: center !important;
+                margin: 0 !important;
+                position: relative !important;
             }}
-            .likert-btn {{
-                margin: 3px 0;
+            .likert-question {{
+                font-size: 18px !important;
+                font-weight: bold !important;
+                margin-bottom: 15px !important;
+                color: #333333 !important;
             }}
-        }}
-    </style>
-    """, unsafe_allow_html=True)
-
+            /* خط فرضی و لیبل‌ها */
+            .likert-line-container {{
+                position: relative !important;
+                width: 80% !important;
+                margin: 0 auto !important;
+                display: flex !important;
+                align-items: center !important;
+            }}
+            .likert-label-left {{
+                position: absolute !important;
+                left: -10% !important;
+                font-size: 14px !important;
+                color: #666666 !important;
+                text-align: right !important;
+            }}
+            .likert-label-right {{
+                position: absolute !important;
+                right: -10% !important;
+                font-size: 14px !important;
+                color: #666666 !important;
+                text-align: left !important;
+            }}
+            /* استایل دکمه‌ها */
+            .likert-buttons {{
+                display: flex !important;
+                justify-content: space-between !important;
+                gap: 10px !important;
+                flex-wrap: nowrap !important;
+                margin: 0 !important;
+                padding: 0 !important;
+                align-items: center !important;
+            }}
+            div[data-testid="stButton"] > button[key^="streamlit-btn-{key}-"] {{
+                width: 20px !important;
+                height: 20px !important;
+                border-radius: 50% !important;
+                background: white !important;
+                border: none !important;
+                color: black !important;
+                font-size: 14px !important;
+                padding: 0 !important;
+                margin: 0 !important;
+                box-shadow: none !important;
+                outline: none !important;
+                line-height: 1 !important;
+                display: flex !important;
+                align-items: center !important;
+                justify-content: center !important;
+            }}
+            div[data-testid="stButton"] > button[key^="streamlit-btn-{key}-"]:hover {{
+                background: #e0e0e0 !important;
+            }}
+            div[data-testid="stButton"] > button[key^="streamlit-btn-{key}-"]:focus,
+            div[data-testid="stButton"] > button[key^="streamlit-btn-{key}-"]:active {{
+                background: black !important;
+                color: white !important;
+            }}
+            /* استایل دکمه انتخاب‌شده */
+            div[data-testid="stButton"] > button[key="streamlit-btn-{key}-{st.session_state[key] if st.session_state[key] else 'none'}"] {{
+                background: black !important;
+                color: white !important;
+            }}
+            /* ریسپانسیو کردن */
+            @media (max-width: 600px) {{
+                .likert-line-container {{
+                    width: 90% !important;
+                }}
+                .likert-label-left {{
+                    left: -5% !important;
+                    font-size: 12px !important;
+                }}
+                .likert-label-right {{
+                    right: -5% !important;
+                    font-size: 12px !important;
+                }}
+                .likert-buttons {{
+                    gap: 5px !important;
+                }}
+                div[data-testid="stButton"] > button[key^="streamlit-btn-{key}-"] {{
+                    width: 18px !important;
+                    height: 18px !important;
+                    font-size: 12px !important;
+                }}
+            }}
+            /* حذف استایل‌های پیش‌فرض Streamlit */
+            div[data-testid="stButton"] > button {{
+                border: none !important;
+                box-shadow: none !important;
+                outline: none !important;
+                background: transparent !important;
+            }}
+        </style>
+        """,
+        unsafe_allow_html=True
+    )
+    
     # نمایش سوال
-    st.markdown(f"**{question}**")
-
-    # نمایش برچسب‌ها در یک ردیف
-    label_col = st.columns(1)[0]
-    with label_col:
-        st.markdown(
-            f"<div style='display: flex; justify-content: space-between; direction: rtl; margin-bottom: 8px;'>"
-            f"<span style='font-size: 14px; color: #555;'>{labels[1]}</span>"
-            f"<span style='font-size: 14px; color: #555;'>{labels[0]}</span>"
-            f"</div>",
-            unsafe_allow_html=True
-        )
-
-    # ایجاد دکمه‌ها
-    btn_container = st.container()
-    with btn_container:
-        cols = st.columns(scale)
-        for i in range(scale):
-            with cols[i]:
-                value = scale - i
-                is_selected = st.session_state.get(key) == value
-                btn_type = "primary" if is_selected else "secondary"
-                
-                if st.button(
-                    str(value),
-                    key=f"{key}_btn_{value}",
-                    type=btn_type,
-                    use_container_width=True,
-                    help=f"مقدار: {value}"
-                ):
-                    st.session_state[key] = value
-                    st.rerun()
-
-    # نمایش پاسخ انتخاب شده
-    if st.session_state.get(key):
-        st.markdown(
-            f"<div style='text-align: center; color: #6a0dad; font-weight: bold; margin-top: 8px;'>"
-            f"پاسخ شما: {st.session_state[key]}"
-            f"</div>",
-            unsafe_allow_html=True
-        )
-
+    st.markdown(f'<div class="likert-container"><div class="likert-question">{question}</div>', unsafe_allow_html=True)
+    
+    # خط فرضی، لیبل‌ها، و دکمه‌ها
+    st.markdown(
+        f'<div class="likert-line-container">'
+        f'<span class="likert-label-left">{labels[0]}</span>'
+        f'<span class="likert-label-right">{labels[1]}</span>'
+        f'<div class="likert-buttons">',
+        unsafe_allow_html=True
+    )
+    
+    # دکمه‌ها تو یه ردیف
+    cols = st.columns(scale)
+    for i in range(scale):
+        with cols[i]:
+            value = scale - i  # 7 تا 1
+            symbol = "•" if st.session_state[key] == value else "○"
+            if st.button(
+                symbol,
+                key=f"streamlit-btn-{key}-{value}",
+                help=str(value)
+            ):
+                st.session_state[key] = value
+                st.rerun()
+    
+    st.markdown('</div></div>', unsafe_allow_html=True)
+    
+    # نمایش پاسخ
+    st.markdown(
+        f'<div class="likert-response">پاسخ شما: {st.session_state[key] or "هیچکدام"}</div>',
+        unsafe_allow_html=True
+    )
+    
+    st.markdown('</div>', unsafe_allow_html=True)
+    
     return st.session_state.get(key)
 def create_ride_map():
     """ایجاد نقشه سفر با Folium - نسخه اصلاح شده با مناطق عمومی"""