Update app.py

app.py

@@ -1,6 +1,7 @@
 import streamlit as st
 import folium
 from streamlit_folium import folium_static
+import streamlit.components.v1 as components
 from datetime import datetime
 import gspread
 from google.oauth2.service_account import Credentials
@@ -673,6 +674,34 @@ h3 {
 """, unsafe_allow_html=True)
 
 # ========== توابع اصلی ==========
+def custom_likert_slider(question, key, points=7):
+    options = {
+        5: ["کاملاً مخالفم", "مخالفم", "خنثی", "موافقم", "کاملاً موافقم"],
+        7: ["کاملاً مخالفم", "نسبتاً مخالفم", "کمی مخالفم", "خنثی", "کمی موافقم", "نسبتاً موافقم", "کاملاً موافقم"]
+    }
+    labels = options.get(points)
+    slider_id = f"slider_{key}"
+
+    # ساخت HTML برای اسلایدر + ارسال مقدار با postMessage
+    html = f"""
+    <div id="container_{key}" style="direction: rtl; font-family: 'B Nazanin'; margin-bottom: 30px;">
+        <label style="font-size: 16px; font-weight: bold;">{question}</label>
+        <div style="display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px;">
+            {''.join(f"<span>{label}</span>" for label in labels)}
+        </div>
+        <input type="range" id="{slider_id}" min="1" max="{points}" step="1" value="{(points+1)//2}"
+               style="width: 100%; accent-color: #6a0dad;"
+               oninput="document.getElementById('output_{key}').innerText=this.value;
+                        window.parent.postMessage({{type: 'streamlit:setComponentValue', value: parseInt(this.value)}}, '*')">
+        <p style="text-align: center; margin-top: 10px;">پاسخ انتخاب‌شده: <strong><span id="output_{key}">{(points+1)//2}</span></strong></p>
+    </div>
+    """
+
+    # مقدار برگشتی (از JS)
+    selected_value = components.html(html, height=150, key=f"component_{key}")
+
+    return selected_value
+    
 def create_ride_map():
     """ایجاد نقشه سفر با Folium - نسخه اصلاح شده با مناطق عمومی"""
     # نقاط تقریبی برای مناطق عمومی جنوب و غرب تهران
@@ -774,62 +803,7 @@ def create_likert_question(question, key, scale_type="5point"):
     return value
 
 # ========== توابع مدیریت داده‌ها ==========
-def apply_global_styles():
-    st.markdown("""
-    <style>
-    /* ===== بازنویسی کامل استایل‌های پیش‌فرض ===== */
-    
-    /* پایه‌ترین سطوح */
-    html, body, #root, .stApp {
-        direction: rtl !important;
-        text-align: right !important;
-        font-family: 'B Nazanin' !important;
-        overflow-x: hidden !important;
-    }
-    
-    /* دکمه‌ها - بالاترین سطح Specificity */
-    body .stButton>button,
-    body .stButton>button:hover,
-    body .stButton>button:focus {
-        margin-right: auto !important;
-        margin-left: 0 !important;
-        float: right !important;
-        transform: none !important;
-    }
-    
-    /* اسلایدرها - بازنویسی کامل */
-    body div[data-testid="stSlider"] > div:first-child,
-    body div[data-testid="stSlider"] > div:first-child > div {
-        direction: ltr !important;
-        background: 
-            repeating-linear-gradient(
-                to right,
-                #6a0dad, #6a0dad 3px,
-                transparent 3px, transparent calc(20% - 2px),
-                #6a0dad calc(20%), #6a0dad calc(20% + 2px),
-                transparent calc(20% + 2px), transparent calc(40% - 2px),
-                #6a0dad calc(40%), #6a0dad calc(40% + 2px),
-                transparent calc(40% + 2px), transparent calc(60% - 2px),
-                #6a0dad calc(60%), #6a0dad calc(60% + 2px),
-                transparent calc(60% + 2px), transparent calc(80% - 2px),
-                #6a0dad calc(80%), #6a0dad calc(80% + 2px)
-            ),
-            linear-gradient(to right, #E6E6FA, #6A0DAD) !important;
-    }
-    
-    /* بازنویسی کامل بلوک‌ها */
-    body .stHorizontalBlock > div,
-    body .stVerticalBlock > div {
-        padding-right: 12px !important;
-        padding-left: 0 !important;
-    }
     
-    /* مخفی کردن اسکرول افقی */
-    body ::-webkit-scrollbar {
-        display: none !important;
-    }
-    </style>
-    """, unsafe_allow_html=True)
 def get_credentials():
     """دریافت اعتبارنامه از Secrets"""
     try:
@@ -944,23 +918,6 @@ def create_likert_question(question, key, scale_type="5point"):
         """,
         unsafe_allow_html=True
     )
-            # اضافه کردن JavaScript مخصوص این اسلایدر
-    st.components.v1.html(f"""
-    <script>
-    (function() {{
-        const slider = parent.document.querySelector('[data-testid="stSlider"] [aria-valuenow="{value}"]');
-        if(slider) {{
-            slider.parentElement.style.background = `repeating-linear-gradient(
-                to right,
-                #6a0dad, #6a0dad 2px,
-                transparent 2px, transparent calc(100%/{max_value-1} - 1px),
-                #6a0dad calc(100%/{max_value-1}), #6a0dad calc(100%/{max_value-1} + 1px)
-            )`;
-        }}
-    }})();
-    </script>
-    """, height=0)
-    
     return value
 
 # ========== بخش‌های فرم ==========
@@ -1138,43 +1095,43 @@ def attention_check1():
             st.warning("لطفاً یک گزینه را انتخاب کنید")
 
 def random_likert_questions():
-    """نمایش سوالات لیکرت به ترتیب مشخص"""
-    # تعریف گروه‌های سوالات با ترتیب جدید
+    """نمایش سوالات لیکرت با اسلایدرهای سفارشی قابل ذخیره‌سازی"""
+    # تعریف گروه‌های سوالات با ترتیب مشخص
     question_groups = [
         {
             "title": "عدالت توزیعی",
             "key": "distributive",
             "questions": [
-                {"key": "distributive_1", "question": "قیمتی که به شما ارائه شد، منصفانه است.", "scale": "7point"},
-                {"key": "distributive_2", "question": "قیمتی که به شما ارائه شد، معقول است.", "scale": "7point"},
-                {"key": "distributive_3", "question": "قیمتی که به شما ارائه شد، قابل قبول است.", "scale": "7point"}
+                {"key": "distributive_1", "question": "قیمتی که به شما ارائه شد، منصفانه است.", "scale": 7},
+                {"key": "distributive_2", "question": "قیمتی که به شما ارائه شد، معقول است.", "scale": 7},
+                {"key": "distributive_3", "question": "قیمتی که به شما ارائه شد، قابل قبول است.", "scale": 7}
             ]
         },
         {
             "title": "سوال توجه",
             "key": "attention_check",
             "questions": [
-                {"key": "attention_check2", "question": "لطفاً برای اطمینان از دقت پاسخ‌هایتان، گزینه 'کاملاً موافقم' را انتخاب کنید.", "scale": "7point"}
+                {"key": "attention_check2", "question": "لطفاً برای اطمینان از دقت پاسخ‌هایتان، گزینه 'کاملاً موافقم' را انتخاب کنید.", "scale": 7}
             ]
         },
         {
             "title": "عدالت رویه‌ای", 
             "key": "procedural",
             "questions": [
-                {"key": "procedural_1", "question": "فرآیند و رویه قیمت‌گذاری پلتفرم قابل قبول است.", "scale": "7point"},
-                {"key": "procedural_2", "question": "فرآیند و رویه قیمت‌گذاری پلتفرم منصفانه است.", "scale": "7point"},
-                {"key": "procedural_3", "question": "فرآیند و رویه قیمت‌گذاری پلتفرم معقول است.", "scale": "7point"}
+                {"key": "procedural_1", "question": "فرآیند و رویه قیمت‌گذاری پلتفرم قابل قبول است.", "scale": 7},
+                {"key": "procedural_2", "question": "فرآیند و رویه قیمت‌گذاری پلتفرم منصفانه است.", "scale": 7},
+                {"key": "procedural_3", "question": "فرآیند و رویه قیمت‌گذاری پلتفرم معقول است.", "scale": 7}
             ]
         },
         {
             "title": "عدالت اطلاعاتی",
             "key": "informational",
             "questions": [
-                {"key": "informational_1", "question": "پلتفرم به صورت صادقانه دلایل تعیین قیمت را توضیح داد.", "scale": "5point"},
-                {"key": "informational_2", "question": "پلتفرم به طور کامل عوامل مؤثر بر تعیین قیمت را شرح داد.", "scale": "5point"},
-                {"key": "informational_3", "question": "دلایل ارائه‌شده برای تعیین قیمت منطقی و قابل قبول بود.", "scale": "5point"},
-                {"key": "informational_4", "question": "توضیحات درباره تعیین قیمت بلافاصله و در زمان مناسب نمایش داده شد.", "scale": "5point"},
-                {"key": "informational_5", "question": "توضیحات پلتفرم درباره تعیین قیمت، متناسب با شرایط سفر من بود.", "scale": "5point"}
+                {"key": "informational_1", "question": "پلتفرم به صورت صادقانه دلایل تعیین قیمت را توضیح داد.", "scale": 5},
+                {"key": "informational_2", "question": "پلتفرم به طور کامل عوامل مؤثر بر تعیین قیمت را شرح داد.", "scale": 5},
+                {"key": "informational_3", "question": "دلایل ارائه‌شده برای تعیین قیمت منطقی و قابل قبول بود.", "scale": 5},
+                {"key": "informational_4", "question": "توضیحات درباره تعیین قیمت بلافاصله و در زمان مناسب نمایش داده شد.", "scale": 5},
+                {"key": "informational_5", "question": "توضیحات پلتفرم درباره تعیین قیمت، متناسب با شرایط سفر من بود.", "scale": 5}
             ]
         }
     ]
@@ -1183,36 +1140,31 @@ def random_likert_questions():
     if 'current_likert_group' not in st.session_state:
         st.session_state.current_likert_group = 0
         st.session_state.answers = st.session_state.get('answers', {})
-    
+
     # دریافت گروه جاری
     current_group = question_groups[st.session_state.current_likert_group]
-    
+
     # نمایش عنوان گروه
     st.markdown(f"## {current_group['title']}")
     st.markdown("---")
-    
-    # نمایش تمام سوالات این گروه در یک صفحه
-    answers = {}
+
+    # ثبت پاسخ‌های جاری
+    all_answered = True
     for question in current_group['questions']:
-        answer = create_likert_question(
-            question["question"],
-            question["key"],
-            question["scale"]
+        value = custom_likert_slider(
+            question=question["question"],
+            key=question["key"],
+            points=question["scale"]
         )
-        answers[question["key"]] = answer
-    
-    # بررسی آیا همه سوالات پاسخ داده شده‌اند
-    all_answered = all(answers.values())
-    
-    # دکمه ادامه/اتمام
-    button_label = "ادامه به گروه بعدی" if st.session_state.current_likert_group < len(question_groups)-1 else "اتمام پرسشنامه"
+        if value is None:
+            all_answered = False
+        else:
+            st.session_state.answers[question["key"]] = value
+
+    # دکمه ادامه یا اتمام
+    button_label = "ادامه به گروه بعدی" if st.session_state.current_likert_group < len(question_groups) - 1 else "اتمام پرسشنامه"
     
     if st.button(button_label, disabled=not all_answered):
-        # ذخیره پاسخ‌های این گروه
-        for key, value in answers.items():
-            st.session_state.answers[key] = value
-        
-        # رفتن به گروه بعدی یا صفحه پایانی
         if st.session_state.current_likert_group < len(question_groups) - 1:
             st.session_state.current_likert_group += 1
             st.rerun()
@@ -1221,8 +1173,8 @@ def random_likert_questions():
             st.rerun()
     
     if not all_answered:
-        st.warning("لطفاً به تمام سوالات این بخش پاسخ دهید")
-        
+        st.warning("لطفاً به تمام سوالات این بخش پاسخ دهید.")
+
 def explanation_questions():
     """سوالات درباره توضیحات قیمت"""
     st.markdown("""
@@ -1423,14 +1375,11 @@ def thank_you_page():
 
 # ========== مدیریت وضعیت و صفحه‌بندی ==========
 def main():
-
-    apply_global_styles()
     # تشخیص دستگاه
     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