Update app.py

app.py

@@ -773,11 +773,8 @@ body, .stApp {
 """, unsafe_allow_html=True)
 
 # ========== توابع اصلی ==========
-import streamlit as st
-import streamlit.components.v1 as components
-
 def enhanced_likert_scale(question_data):
-    """لیکرت اسکیل با HTML/CSS و مدیریت انتخاب با st.session_state"""
+    """لیکرت اسکیل با دکمه‌های سفارشی و مدیریت انتخاب با st.session_state"""
     question = question_data["question"]
     key = question_data["key"]
     scale = question_data["scale"]
@@ -791,116 +788,33 @@ def enhanced_likert_scale(question_data):
     st.markdown(f"<div style='text-align:right; font-weight:bold; margin-bottom:15px; direction: rtl;'>{question}</div>", 
                 unsafe_allow_html=True)
 
-    # ایجاد خط و نقاط با HTML/CSS
-    scale_html = f"""
-    <style>
-        @font-face {{
-            font-family: 'B Nazanin';
-            src: url('https://www.fontyab.com/fonts/b-nazanin/BNazanin.woff2') format('woff2');
-        }}
-        .likert-line {{
-            width: 80%;
-            height: 2px;
-            background: #6a0dad;
-            margin: 0 auto;
-            position: relative;
-            display: flex;
-            justify-content: space-between;
-            direction: rtl;
-        }}
-        .likert-dot {{
-            width: 18px;
-            height: 18px;
-            border-radius: 50%;
-            background: white;
-            border: 2px solid #6a0dad;
-            position: relative;
-            top: -9px;
-            cursor: pointer;
-            transition: background-color 0.2s;
-        }}
-        .likert-dot.active {{
-            background: #6a0dad;
-        }}
-        .likert-labels {{
-            width: 80%;
-            margin: 5px auto 15px;
-            display: flex;
-            justify-content: space-between;
-            direction: rtl;
-            font-size: 14px;
-            font-family: 'B Nazanin', sans-serif;
-            font-weight: bold;
-            color: #6a0dad;
-        }}
-        .separator-line {{
-            width: 80%;
-            height: 2px;
-            background: #6a0dad;
-            margin: 20px auto;
-        }}
-        @media (max-width: 768px) {{
-            .likert-line {{
-                width: 90%;
-            }}
-            .likert-labels {{
-                width: 90%;
-            }}
-        }}
-        @media (min-width: 768px) {{
-            .likert-container {{
-                width: 475px;
-                margin: 0 auto;
-            }}
-        }}
-    </style>
-    
-    <div class="likert-container">
-        <div class="likert-labels">
-            <span>{labels[0]}</span>
-            <span>{labels[1]}</span>
-        </div>
-        <div class="likert-line">
-    """
-
-    # اضافه کردن نقاط با جاوااسکریپت برای مدیریت انتخاب
-    current_value = st.session_state.get(key, 0)
-    for i in range(1, scale + 1):
-        value = i
-        active_class = "active" if current_value == value else ""
-        scale_html += f"""
-        <div class='likert-dot {active_class}' 
-             onclick='parent.window.parent.postMessage({{type: "update_selection", key: "{key}", value: {value}}}, "*")'>
-        </div>
-        """
-    
-    scale_html += """
-        </div>
-    </div>
-    <script>
-        window.addEventListener('message', function(event) {
-            if (event.data.type === 'update_selection') {
-                // به‌روزرسانی st.session_state از طریق Streamlit
-                parent.window.parent.postMessage({
-                    type: 'streamlit_set_component_value',
-                    value: event.data.value
-                }, '*');
-                // به‌روزرسانی ظاهر نقاط
-                document.querySelectorAll('.likert-dot').forEach(dot => dot.classList.remove('active'));
-                let dots = document.querySelectorAll('.likert-dot');
-                dots[event.data.value - 1].classList.add('active');
-            }
-        });
-    </script>
-    """
-    
-    # نمایش کامپوننت HTML و دریافت مقدار انتخاب‌شده
-    components.html(scale_html, height=60, width=600)
+    # تنظیم چیدمان مرکزی با ستون‌ها
+    total_cols = scale + 2  # یک ستون برای هر نقطه + 2 ستون برای برچسب‌ها
+    col_widths = [1] * 2 + [2] * scale  # 2 ستون برای برچسب‌ها (هر کدام 1) و نقاط (هر کدام 2)
+    cols = st.columns(col_widths)
 
-    # به‌روزرسانی st.session_state با مقدار برگشتی
-    if 'streamlit_component_value' in st.session_state and st.session_state['streamlit_component_value'] is not None:
-        st.session_state[key] = st.session_state['streamlit_component_value']
-        del st.session_state['streamlit_component_value']
+    # نمایش برچسب سمت راست
+    with cols[0]:
+        st.markdown(f"<div style='text-align:right; font-size:14px; font-weight:bold; color:#6a0dad; direction: rtl;'>{labels[0]}</div>", 
+                    unsafe_allow_html=True)
+
+    # نمایش دکمه‌های رادیویی به صورت افقی و مرکزی
+    options = [str(i) for i in range(1, scale + 1)]
+    selected_value = st.session_state.get(key, 0)
+    
+    for i in range(scale):
+        with cols[i + 2]:  # شروع از ستون دوم (پس از برچسب‌ها)
+            button_key = f"{key}_btn_{i}"
+            is_selected = selected_value == int(options[i])
+            st.markdown(f'<div style="text-align: center;">', unsafe_allow_html=True)
+            if st.button(options[i], key=button_key, disabled=selected_value != 0 and not is_selected):
+                st.session_state[key] = int(options[i])
+            st.markdown(f'</div>', unsafe_allow_html=True)
+
+    # نمایش برچسب سمت چپ
+    with cols[1]:
+        st.markdown(f"<div style='text-align:left; font-size:14px; font-weight:bold; color:#6a0dad; direction: rtl;'>{labels[1]}</div>", 
+                    unsafe_allow_html=True)
 
     # نمایش پاسخ انتخاب‌شده
     if st.session_state[key] != 0:
@@ -910,7 +824,7 @@ def enhanced_likert_scale(question_data):
         st.markdown(f"<p style='text-align:right; color:#6a0dad; direction: rtl;'>پاسخ شما: هنوز انتخاب نشده</p>", 
                     unsafe_allow_html=True)
 
-    # خط جداکننده بنفش
+    # خط جداکننده بنفش و استایل‌های سفارشی
     st.markdown("""
     <style>
         .likert-separator {
@@ -920,10 +834,39 @@ def enhanced_likert_scale(question_data):
             margin: 20px auto;
             direction: rtl;
         }
+        [data-testid="stButton"] {
+            margin: 0 5px !important;
+            width: 30px !important;
+            height: 30px !important;
+            border-radius: 50% !important;
+            padding: 0 !important;
+            text-align: center !important;
+            line-height: 30px !important;
+            background-color: #fff !important;
+            border: 2px solid #6a0dad !important;
+            color: #6a0dad !important;
+            cursor: pointer !important;
+        }
+        [data-testid="stButton"]:disabled {
+            background-color: #6a0dad !important;
+            color: #fff !important;
+        }
+        /* اجبار به چیدمان افقی در موبایل */
         @media (max-width: 768px) {
             .likert-separator {
                 width: 90%;
             }
+            [data-testid="stHorizontalBlock"] [data-testid="stButton"] {
+                margin: 0 2px !important;
+            }
+        }
+        /* تنظیم مرکزیت در فریم موبایل (475px) */
+        @media (min-width: 768px) {
+            [data-testid="stAppViewContainer"] [data-testid="stHorizontalBlock"] {
+                justify-content: center !important;
+                width: 475px !important;
+                margin: 0 auto !important;
+            }
         }
     </style>
     <div class="likert-separator"></div>