Update app.py

app.py

@@ -734,80 +734,118 @@ h3 {
     margin-bottom: 1em !important;
     line-height: 1.8 !important;
 }
+/* استایل برای اسلایدر استاندارد Streamlit */
+.stSlider [role="slider"] {
+    background-color: #f0e6ff !important; /* رنگ پس‌زمینه مسیر */
+    height: 10px !important;
+    border-radius: 5px !important;
+}
+
+.stSlider [role="slider"]::-webkit-slider-thumb {
+    background-color: #6a0dad !important; /* رنگ دستگیره */
+    border: 2px solid #ffffff !important;
+    width: 20px !important;
+    height: 20px !important;
+    border-radius: 50% !important;
+    cursor: pointer !important;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
+}
+
+.stSlider [role="slider"]::-moz-range-thumb {
+    background-color: #6a0dad !important;
+    border: 2px solid #ffffff !important;
+    width: 20px !important;
+    height: 20px !important;
+    border-radius: 50% !important;
+    cursor: pointer !important;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
+}
+
+.stSlider [role="slider"]::-webkit-slider-runnable-track {
+    background-color: #f0e6ff !important;
+    height: 10px !important;
+    border-radius: 5px !important;
+}
+
+.stSlider [role="slider"]::-moz-range-track {
+    background-color: #f0e6ff !important;
+    height: 10px !important;
+    border-radius: 5px !important;
+}
+
+/* استایل برای لیبل‌های اسلایدر */
+.slider-labels {
+    display: flex !important;
+    justify-content: space-between !important;
+    font-size: 12px !important;
+    margin-bottom: 5px !important;
+    color: #333333 !important;
+    font-family: 'B Nazanin' !important;
+}
+
+/* استایل برای متن پاسخ انتخاب‌شده */
+.slider-response {
+    text-align: center !important;
+    color: #6a0dad !important;
+    font-weight: bold !important;
+    margin-top: 10px !important;
+    font-family: 'B Nazanin' !important;
+}
 </style>
 """, unsafe_allow_html=True)
 
 # ========== توابع اصلی ==========
 def custom_likert_slider(question_data):
-    """نمایش سوال لیکرت با اسلایدر سفارشی و دیباگ کامل"""
+    """نمایش سوال لیکرت با اسلایدر استاندارد Streamlit و استایل سفارشی"""
     question = question_data["question"]
     key = question_data["key"]
     points = question_data["scale"]
     labels = question_data.get("labels", ["کمترین", "بیشترین"])  # لیبل‌های پیش‌فرض
-    
+
     # مقدار پیش‌فرض (وسط طیف)
     default_value = (points + 1) // 2
-    
-    # مقدار فعلی از session_state
-    current_value = st.session_state.get(key, default_value)
-    
-    # HTML و JavaScript برای اسلایدر
-    html = f"""
-    <div id="container_{key}" style="direction: ltr; font-family: 'B Nazanin'; margin-bottom: 30px;">
-        <label style="font-size: 16px; font-weight: bold; display: block; text-align: right;">{question}</label>
-        <div style="display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px;">
+
+    # نمایش سوال
+    st.markdown(f"<p style='font-size:16px; margin-bottom:5px;'>{question}</p>", unsafe_allow_html=True)
+
+    # لیبل‌های دو طرف
+    st.markdown(
+        f"""
+        <div class="slider-labels">
             <span>{labels[0]}</span>
             <span>{labels[1]}</span>
         </div>
-        <input type="range" id="{key}" min="1" max="{points}" step="1" value="{current_value}"
-               style="width: 100%; height: 10px; accent-color: #6a0dad; margin-bottom: 15px;"
-               oninput="updateSlider('{key}')" onchange="updateSlider('{key}')">
-        <div style="text-align: center; margin-top: 10px; direction: rtl;">
-            پاسخ انتخاب‌شده: <strong><span id="output_{key}">{current_value}</span></strong>
-        </div>
-    </div>
+        """,
+        unsafe_allow_html=True
+    )
 
-    <script>
-    function updateSlider(key) {{
-        const slider = document.getElementById(key);
-        const value = parseInt(slider.value);
-        document.getElementById('output_' + key).innerText = value;
-
-        // ارسال مقدار به Streamlit
-        const message = {{
-            type: 'streamlit:setComponentValue',
-            value: value,
-            key: key
-        }};
-        window.parent.postMessage(message, '*');
-        
-        // دیباگ: چاپ پیام ارسالی
-        console.log('Sending to Streamlit: ', JSON.stringify(message));
-    }}
+    # اسلایدر استاندارد Streamlit
+    value = st.slider(
+        "",
+        min_value=1,
+        max_value=points,
+        value=st.session_state.get(key, default_value),
+        step=1,
+        key=key,
+        format="%d"
+    )
 
-    // تنظیم مقدار اولیه
-    document.getElementById('{key}').value = {current_value};
-    document.getElementById('output_{key}').innerText = {current_value};
-    </script>
-    """
-    
-    # نمایش کامپوننت با کلید منحصربه‌فرد
-    components.html(html, height=150, key=f"slider_{key}")
-    
-    # دریافت مقدار از Streamlit
-    component_value = st.session_state.get(key, default_value)
-    
-    # دیباگ: نمایش مقادیر
-    st.write(f"Debug: کلید: {key}")
-    st.write(f"Debug: مقدار پیش‌فرض: {default_value}")
-    st.write(f"Debug: مقدار دریافت‌شده: {component_value}")
-    st.write(f"Debug: مقدار در session_state[{key}]: {st.session_state.get(key, 'هیچ')}")
+    # نمایش پاسخ انتخاب‌شده
+    st.markdown(
+        f"""
+        <p class="slider-response">
+            پاسخ انتخاب‌شده: {value}
+        </p>
+        """,
+        unsafe_allow_html=True
+    )
+
+    # دیباگ
+    st.write(f"Debug: مقدار ذخیره‌شده برای {key}: {value}")
     
     # ذخیره مقدار
-    st.session_state[key] = component_value
-    
-    return component_value
-    
+    st.session_state[key] = value
+    return value
 def create_ride_map():
     """ایجاد نقشه سفر با Folium - نسخه اصلاح شده با مناطق عمومی"""
     # نقاط تقریبی برای مناطق عمومی جنوب و غرب تهران