Update app.py

app.py

@@ -739,7 +739,7 @@ h3 {
 
 # ========== توابع اصلی ==========
 def enhanced_likert_scale(question_data):
-    """لیکرت اسکیل فقط با فیچرهای Streamlit و دکمه‌های دایره‌ای ریسپانسیو"""
+    """لیکرت اسکیل کاملاً سفارشی بدون تأثیر از استایل‌های قبلی"""
     question = question_data["question"]
     key = question_data["key"]
     scale = question_data["scale"]
@@ -749,127 +749,118 @@ def enhanced_likert_scale(question_data):
     if key not in st.session_state:
         st.session_state[key] = None
     
-    # استایل‌دهی سفارشی برای دکمه‌های Streamlit
-    st.markdown(
-        f"""
-        <style>
-            /* استایل کانتینر لیکرت */
-            .likert-container {{
-                font-family: 'B Nazanin', Arial, sans-serif !important;
-                direction: rtl !important;
-                text-align: center !important;
-                margin: 0 !important;
-            }}
-            .likert-question {{
-                font-size: 18px !important;
-                font-weight: bold !important;
-                margin-bottom: 15px !important;
-                color: #333333 !important;
-            }}
-            .likert-labels {{
-                display: flex !important;
-                justify-content: space-between !important;
-                font-size: 14px !important;
-                margin-bottom: 10px !important;
-                color: #666666 !important;
-            }}
-            /* استایل ردیف دکمه‌ها */
-            .likert-buttons {{
-                display: flex !important;
-                justify-content: center !important;
-                gap: 2px !important;
-                flex-wrap: wrap !important;
-                margin: 0 !important;
-                padding: 0 !important;
-                align-items: center !important;
-            }}
-            /* استایل دکمه‌های Streamlit */
-            div.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: 4px !important;
-                padding: 0 !important;
-                margin: 0 !important;
-                box-shadow: none !important;
-                outline: none !important;
-            }}
-            div.stButton > button[key^="streamlit-btn-{key}-"]:hover {{
-                background: #e0e0e0 !important;
-            }}
-            div.stButton > button[key^="streamlit-btn-{key}-"]:focus,
-            div.stButton > button[key^="streamlit-btn-{key}-"]:active {{
-                background: black !important;
-                color: white !important;
-            }}
-            /* استایل دکمه انتخاب‌شده */
-            div.stButton > button[key="streamlit-btn-{key}-{st.session_state[key] if st.session_state[key] else 'none'}"] {{
-                background: black !important;
-                color: white !important;
-            }}
-            /* استایل پاسخ */
-            .likert-response {{
-                text-align: center !important;
-                color: #6a0dad !important;
-                font-weight: bold !important;
-                margin-top: 10px !important;
-                font-size: 16px !important;
-            }}
-            /* ریسپانسیو کردن */
-            @media (max-width: 600px) {{
-                .likert-buttons {{
-                    gap: 1px !important;
-                }}
-                div.stButton > button[key^="streamlit-btn-{key}-"] {{
-                    width: 12px !important;
-                    height: 12px !important;
-                    font-size: 10px !important;
-                }}
-            }}
-        </style>
-        """,
-        unsafe_allow_html=True
-    )
+    # استایل‌دهی با HTML - کاملاً ایزوله شده
+    st.markdown(f"""
+    <style>
+        /* ریست کامل برای دکمه‌های لیکرت */
+        .likert-scale-container .stButton > button {{
+            all: unset !important;
+            min-width: 0 !important;
+            min-height: 0 !important;
+            padding: 0 !important;
+            margin: 0 2px !important;
+            border: none !important;
+            background: none !important;
+            box-shadow: none !important;
+        }}
+        
+        /* استایل دکمه‌های دایره‌ای */
+        .likert-btn {{
+            width: 30px !important;
+            height: 30px !important;
+            border-radius: 50% !important;
+            border: 2px solid #6a0dad !important;
+            background: white !important;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+            cursor: pointer !important;
+            transition: all 0.2s !important;
+            font-size: 0 !important; /* مخفی کردن عدد */
+        }}
+        
+        /* حالت انتخاب شده */
+        .likert-btn.selected {{
+            background: #6a0dad !important;
+        }}
+        
+        /* حالت hover */
+        .likert-btn:hover {{
+            background: #f0e6ff !important;
+            transform: scale(1.1) !important;
+        }}
+        
+        /* مخفی کردن متن دکمه */
+        .likert-btn > div > p {{
+            display: none !important;
+        }}
+        
+        /* لیبل‌ها در یک ردیف */
+        .likert-labels {{
+            display: flex !important;
+            justify-content: space-between !important;
+            margin-bottom: 5px !important;
+            direction: rtl !important;
+        }}
+        
+        /* کانتینر اصلی */
+        .likert-container {{
+            width: 100% !important;
+            margin: 0 auto !important;
+            padding: 0 10px !important;
+        }}
+    </style>
     
-    # نمایش سوال
-    st.markdown(f'<div class="likert-container"><div class="likert-question">{question}</div>', unsafe_allow_html=True)
+    <div class="likert-container">
+        <div class="likert-question">{question}</div>
+        <div class="likert-labels">
+            <span>{labels[1]}</span>
+            <span>{labels[0]}</span>
+        </div>
+        <div class="likert-scale-container">
+    """, unsafe_allow_html=True)
     
-    # نمایش لیبل‌ها و دکمه‌ها تو یه ردیف
-    st.markdown(
-        f'<div class="likert-labels"><span style="text-align:right">{labels[0]}</span>',
-        unsafe_allow_html=True
-    )
-    st.markdown('<div class="likert-buttons">', unsafe_allow_html=True)
-    cols = st.columns(scale)
+    # ایجاد دکمه‌ها با HTML
+    btn_html = "<div style='display: flex; justify-content: center; gap: 5px; margin-bottom: 10px;'>"
     for i in range(scale):
-        with cols[i]:
-            value = scale - i  # 7 تا 1
-            symbol = "•" if st.session_state[key] == value else "○"
+        value = scale - i  # 7 تا 1
+        is_selected = st.session_state.get(key) == value
+        btn_html += f"""
+        <button class="likert-btn {'selected' if is_selected else ''}" 
+                onclick="parent.document.querySelector('button[data-testid=\"baseButton-secondary\"][value=\"{value}\"]').click()">
+            <div><p>{value}</p></div>
+        </button>
+        """
+    btn_html += "</div>"
+    
+    components.html(btn_html, height=50)
+    
+    # دکمه‌های واقعی (مخفی)
+    btn_cols = st.columns(scale)
+    for i in range(scale):
+        with btn_cols[i]:
+            value = scale - i
             if st.button(
-                symbol,
-                key=f"streamlit-btn-{key}-{value}",
-                help=str(value)
+                str(value),
+                key=f"{key}_btn_{value}",
+                type="primary" if st.session_state.get(key) == value else "secondary",
+                on_click=lambda v=value: st.session_state.update({key: v})
             ):
                 st.session_state[key] = value
                 st.rerun()
-    st.markdown('</div>', unsafe_allow_html=True)
-    st.markdown(
-        f'<span style="text-align:left">{labels[1]}</span></div>',
-        unsafe_allow_html=True
-    )
     
-    # نمایش پاسخ
-    st.markdown(
-        f'<div class="likert-response">پاسخ شما: {st.session_state[key] or "هیچکدام"}</div>',
-        unsafe_allow_html=True
-    )
+    # نمایش پاسخ انتخاب شده
+    if st.session_state.get(key) is not None:
+        st.markdown(
+            f"<div style='text-align:center; color:#6a0dad; font-weight:bold; margin-top:5px;'>"
+            f"پاسخ شما: {st.session_state[key]}"
+            f"</div>",
+            unsafe_allow_html=True
+        )
     
-    st.markdown('</div>', unsafe_allow_html=True)
+    st.markdown("</div>", unsafe_allow_html=True)  # بستن کانتینر
     
-    return st.session_state.get(key) 
+    return st.session_state.get(key)
 def create_ride_map():
     """ایجاد نقشه سفر با Folium - نسخه اصلاح شده با مناطق عمومی"""
     # نقاط تقریبی برای مناطق عمومی جنوب و غرب تهران