Update app.py

app.py

@@ -71,10 +71,10 @@ CUSTOM_CSS = """
     100% { transform: translateX(100%) rotate(45deg); }
 }
 
-@keyframes glowPulse {
-    0% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); }
-    50% { box-shadow: 0 0 40px rgba(99, 102, 241, 0.6); }
-    100% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); }
+@keyframes likeAnimation {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.3); }
+    100% { transform: scale(1); }
 }
 
 /* تحسين البطاقات في الوضع الدارك */
@@ -203,6 +203,16 @@ p, span, div {
     background: #3d3d5c !important;
     border-color: #6366f1 !important;
 }
+
+/* زر اللايك عند الضغط */
+.like-btn-liked {
+    background: #312e81 !important;
+    color: #818cf8 !important;
+}
+
+.like-btn-liked:hover {
+    background: #4338ca !important;
+}
 """
 
 # ==================================================
@@ -279,7 +289,8 @@ def init_db():
         testimonial_id INTEGER,
         ip_hash TEXT,
         created_at TEXT,
-        FOREIGN KEY (testimonial_id) REFERENCES testimonials(id) ON DELETE CASCADE
+        FOREIGN KEY (testimonial_id) REFERENCES testimonials(id) ON DELETE CASCADE,
+        UNIQUE(testimonial_id, ip_hash)
     )
     """)
     
@@ -489,6 +500,62 @@ def render_stats(stats):
     </div>
     """
 
+# ==================================================
+# نظام اللايك
+# ==================================================
+
+def toggle_like(testimonial_id, request: gr.Request):
+    """تبديل حالة اللايك (إضافة أو إزالة)"""
+    ip_hash = get_ip_hash(request)
+    
+    conn = get_connection()
+    c = conn.cursor()
+    
+    try:
+        # التحقق من وجود اللايك
+        c.execute(
+            "SELECT id FROM likes WHERE testimonial_id = ? AND ip_hash = ?",
+            (testimonial_id, ip_hash)
+        )
+        existing_like = c.fetchone()
+        
+        if existing_like:
+            # إزالة اللايك
+            c.execute(
+                "DELETE FROM likes WHERE testimonial_id = ? AND ip_hash = ?",
+                (testimonial_id, ip_hash)
+            )
+            c.execute(
+                "UPDATE testimonials SET likes = likes - 1 WHERE id = ?",
+                (testimonial_id,)
+            )
+            liked = False
+        else:
+            # إضافة اللايك
+            c.execute(
+                "INSERT INTO likes (testimonial_id, ip_hash, created_at) VALUES (?, ?, ?)",
+                (testimonial_id, ip_hash, datetime.now().isoformat())
+            )
+            c.execute(
+                "UPDATE testimonials SET likes = likes + 1 WHERE id = ?",
+                (testimonial_id,)
+            )
+            liked = True
+        
+        conn.commit()
+        
+        # جلب العدد الجديد
+        c.execute("SELECT likes FROM testimonials WHERE id = ?", (testimonial_id,))
+        new_count = c.fetchone()[0]
+        
+        return liked, new_count
+        
+    except Exception as e:
+        logger.error(f"خطأ في اللايك: {e}")
+        return False, 0
+    finally:
+        conn.close()
+
 # ==================================================
 # إضافة رأي
 # ==================================================
@@ -650,7 +717,7 @@ def get_testimonials(filter_type="all", sort_by="newest", search_query="", page=
     return rows, total, (total + per_page - 1) // per_page if total > 0 else 1
 
 # ==================================================
-# عرض البطاقات
+# عرض البطاقات مع زر لايك تفاعلي
 # ==================================================
 
 def render_stars(rating):
@@ -659,8 +726,8 @@ def render_stars(rating):
     empty_stars = '☆' * (5 - int(rating))
     return f'<span style="font-size:1.1rem;color:#fbbf24;">{full_stars}{empty_stars}</span>'
 
-def render_card(row, show_like_button=True):
-    """عرض بطاقة الرأي"""
+def render_card(row, show_like_button=True, liked=False):
+    """عرض بطاقة الرأي مع زر لايك تفاعلي"""
     (id, name, role, content, rating, timestamp, likes, is_highlighted) = row
     
     highlight_style = ""
@@ -682,29 +749,38 @@ def render_card(row, show_like_button=True):
     
     role_html = f'<span style="background:#312e81;color:#818cf8;padding:0.2rem 0.6rem;border-radius:999px;font-size:0.75rem;">{escape_safe(role)}</span>' if role else ""
     
+    # زر اللايك مع حالة تفاعلية
+    like_button_style = "background: #312e81; color: #818cf8;" if liked else "background: #2d2d44; color: #94a3b8;"
+    like_icon = "❤️" if liked else "🤍"
+    
     like_button = ""
     if show_like_button:
         like_button = f"""
-        <button onclick="likeTestimonial({id})" style="
-            background: none;
-            border: none;
-            cursor: pointer;
-            font-size: 1rem;
-            padding: 6px 14px;
-            border-radius: 20px;
-            transition: all 0.2s ease;
-            background: #2d2d44;
-            color: #94a3b8;
-            display: flex;
-            align-items: center;
-            gap: 4px;
-        ">
-            ❤️ {likes}
+        <button 
+            onclick="likeTestimonial({id})" 
+            class="like-btn" 
+            data-id="{id}"
+            style="
+                background: none;
+                border: none;
+                cursor: pointer;
+                font-size: 1rem;
+                padding: 6px 14px;
+                border-radius: 20px;
+                transition: all 0.2s ease;
+                {like_button_style}
+                display: flex;
+                align-items: center;
+                gap: 6px;
+                font-weight: 600;
+            "
+        >
+            {like_icon} <span class="like-count" data-id="{id}">{likes}</span>
         </button>
         """
     
     return f"""
-    <div class="testimonial-card" style="
+    <div class="testimonial-card" id="card-{id}" style="
         background:#1a1a2e;
         border-radius:20px;
         padding:1.2rem 1.5rem;
@@ -768,6 +844,56 @@ def render_card(row, show_like_button=True):
             {like_button}
         </div>
     </div>
+    
+    <script>
+    function likeTestimonial(id) {{
+        // إرسال طلب اللايك
+        fetch('/like/' + id, {{
+            method: 'POST',
+            headers: {{
+                'Content-Type': 'application/json',
+            }}
+        }})
+        .then(response => response.json())
+        .then(data => {{
+            if (data.success) {{
+                // تحديث زر اللايك
+                const btn = document.querySelector(`button[data-id="${{id}}"]`);
+                const count = document.querySelector(`.like-count[data-id="${{id}}"]`);
+                
+                if (data.liked) {{
+                    btn.innerHTML = '❤️ <span class="like-count" data-id="${{id}}">' + data.count + '</span>';
+                    btn.style.background = '#312e81';
+                    btn.style.color = '#818cf8';
+                }} else {{
+                    btn.innerHTML = '🤍 <span class="like-count" data-id="${{id}}">' + data.count + '</span>';
+                    btn.style.background = '#2d2d44';
+                    btn.style.color = '#94a3b8';
+                }}
+                
+                // تحديث العدد
+                if (count) {{
+                    count.textContent = data.count;
+                }}
+                
+                // تحديث الإحصائيات
+                updateStats();
+            }}
+        }})
+        .catch(error => console.error('Error:', error));
+    }}
+    
+    function updateStats() {{
+        // تحديث الإحصائيات عن طريق إعادة تحميل البيانات
+        fetch('/refresh-stats')
+            .then(response => response.json())
+            .then(data => {{
+                // تحديث الإحصائيات في الواجهة
+                document.querySelector('.stat-total').textContent = data.total;
+                document.querySelector('.stat-rating').textContent = data.avg_rating;
+            }});
+    }}
+    </script>
     """
 
 # ==================================================
@@ -795,7 +921,7 @@ def update_display(filter_type="all", sort_by="newest", search_query="", page=1)
     
     html = ""
     for row in rows:
-        html += render_card(row)
+        html += render_card(row, show_like_button=True)
     
     # أزرار التنقل
     if total_pages > 1:
@@ -999,7 +1125,8 @@ def create_interface():
         with gr.Row():
             chart_display = gr.Plot(label="توزيع التقييمات")
         
-        # ===== المحتوى الرئيسي =====        with gr.Row(equal_height=False):
+        # ===== المحتوى الرئيسي =====
+        with gr.Row(equal_height=False):
             
             # ===== العمود الأيسر: إضافة رأي =====
             with gr.Column(scale=1, min_width=300):
@@ -1139,6 +1266,11 @@ def create_interface():
             display = update_display(filter_type, sort_by, search_query, page)
             return stats_html, chart, display
         
+        # دالة معالجة اللايك
+        def handle_like(testimonial_id, request: gr.Request):
+            liked, count = toggle_like(int(testimonial_id), request)
+            return {"success": True, "liked": liked, "count": count}
+        
         # زر النشر
         submit_btn.click(
             fn=add_testimonial,
@@ -1191,6 +1323,9 @@ def create_interface():
             outputs=[name_input, role_input, content_input, status_output, char_count]
         )
         
+        # ===== إضافة مسار للايك =====
+        demo.add_api_route("/like/{testimonial_id}", handle_like, methods=["POST"])
+        
         # تحميل أولي
         demo.load(
             fn=full_update,