Spaces:

theWitcher
/

sagi-ai-tools

Running

App Files Files Community

theWitcher commited on Apr 9, 2025

Commit

489f090

1 Parent(s): 82e1386

add chatbot

Browse files

Files changed (2) hide show

chatbot.html +120 -0
index.html +31 -9

chatbot.html ADDED Viewed

	@@ -0,0 +1,120 @@

+<!DOCTYPE html>
+<html lang="he" dir="rtl">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>צ'אטבוט</title>
+  <style>
+    body {
+      margin: 0;
+      font-family: 'Arial', sans-serif;
+      background-color: #f3f4f6;
+    }
+    .chat-container {
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+    }
+    .chat-header {
+      background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+      color: white;
+      padding: 16px;
+      font-size: 18px;
+      font-weight: bold;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+    .chat-messages {
+      flex: 1;
+      padding: 16px;
+      overflow-y: auto;
+      background-color: #ffffff;
+    }
+    .chat-bubble {
+      max-width: 80%;
+      margin-bottom: 10px;
+      padding: 10px 14px;
+      border-radius: 20px;
+      line-height: 1.5;
+      font-size: 14px;
+    }
+    .user-bubble {
+      background-color: #3b82f6;
+      color: white;
+      margin-left: auto;
+      border-bottom-right-radius: 0;
+    }
+    .bot-bubble {
+      background-color: #e5e7eb;
+      color: #111827;
+      margin-right: auto;
+      border-bottom-left-radius: 0;
+    }
+    .chat-input {
+      display: flex;
+      padding: 12px;
+      border-top: 1px solid #d1d5db;
+      background-color: #f9fafb;
+    }
+    .chat-input input {
+      flex: 1;
+      padding: 10px;
+      border-radius: 9999px;
+      border: 1px solid #d1d5db;
+      font-size: 14px;
+      outline: none;
+    }
+    .chat-input button {
+      margin-right: 8px;
+      background-color: #8b5cf6;
+      color: white;
+      border: none;
+      border-radius: 9999px;
+      padding: 10px 16px;
+      font-size: 14px;
+      cursor: pointer;
+    }
+  </style>
+</head>
+<body>
+  <div class="chat-container">
+    <div class="chat-header">
+      צ'אט עם הבינה של שגיא
+    </div>
+    <div class="chat-messages" id="chatMessages">
+      <div class="chat-bubble bot-bubble">שלום! איך אפשר לעזור לך היום?</div>
+    </div>
+    <div class="chat-input">
+      <input type="text" id="chatInput" placeholder="הקלד הודעה...">
+      <button onclick="sendMessage()">שלח</button>
+    </div>
+  </div>
+  <script>
+    function sendMessage() {
+      const input = document.getElementById('chatInput');
+      const message = input.value.trim();
+      if (!message) return;
+      const messagesDiv = document.getElementById('chatMessages');
+      const userBubble = document.createElement('div');
+      userBubble.className = 'chat-bubble user-bubble';
+      userBubble.textContent = message;
+      messagesDiv.appendChild(userBubble);
+      const botBubble = document.createElement('div');
+      botBubble.className = 'chat-bubble bot-bubble';
+      botBubble.textContent = getBotResponse(message);
+      messagesDiv.appendChild(botBubble);
+      input.value = '';
+      messagesDiv.scrollTop = messagesDiv.scrollHeight;
+    }
+    function getBotResponse(userText) {
+      // כאן תוכל לשלב לוגיקה אמיתית או חיבור ל-AI
+      return 'זוהי תגובה אוטומטית :)';
+    }
+  </script>
+</body>
+</html>

index.html CHANGED Viewed

@@ -416,22 +416,44 @@ https://chatgpt.com/c/67efa5ae-ab80-8005-a7d4-de3ced6ccec4
     <!-- /* --- Footer --- */ -->
     <footer class="fixed bottom-0 left-0 w-full z-50 backdrop-blur-md bg-white/80 shadow-xl border-t border-gray-200">
-            <!-- <span>© 2025 כל הזכויות שמורות לשגיא בר און.</span> -->
-            <div class="container mx-auto px-4 py-3 text-center space-y-2">
-                <div class="flex justify-center gap-4">
                 <!-- אייקונים -->
                 <a href="https://chat.whatsapp.com/GPFASYBEA9CFGUMCVZ5RXP" target="_blank" class="w-9 h-9 rounded-full bg-white shadow flex items-center justify-center text-green-500 hover:bg-green-500 hover:text-white transition"><i class="fab fa-whatsapp"></i></a>
                 <a href="http://www.linkedin.com/in/sagi-bar-on" target="_blank" class="w-9 h-9 rounded-full bg-white shadow flex items-center justify-center text-blue-500 hover:bg-blue-700 hover:text-white transition"><i class="fab fa-linkedin-in"></i></a>
                 <a href="https://www.facebook.com/SAGI.BARON" target="_blank" class="w-9 h-9 rounded-full bg-white shadow flex items-center justify-center text-blue-600 hover:bg-blue-800 hover:text-white transition"><i class="fab fa-facebook-f"></i></a>
                 <a href="https://www.youtube.com/@SAGIBARON" target="_blank" class="w-9 h-9 rounded-full bg-white shadow flex items-center justify-center text-red-500 hover:bg-red-700 hover:text-white transition"><i class="fab fa-youtube"></i></a>
-                </div>
-                <button id="editJsonBtnFooter"
-                    class="px-4 py-2 rounded-xl bg-gradient-to-br from-pink-500 to-purple-600 text-white font-bold shadow hover:scale-105 transition">
-                    <i class="fas fa-pen-to-square ml-2"></i> הציעו כלי חדש
-                </button>
-                <p class="text-gray-500 text-xs">© 2025 כל הזכויות שמורות לשגיא בר און</p>
             </div>
         </div>
     </footer>

     <!-- /* --- Footer --- */ -->
     <footer class="fixed bottom-0 left-0 w-full z-50 backdrop-blur-md bg-white/80 shadow-xl border-t border-gray-200">
+        <!-- הוספת כפתור צ'אט צף לקובץ index.html -->
+        <div id="chatBubble" class="fixed bottom-6 right-6 z-[9999]">
+        <button onclick="toggleChatWindow()" class="bg-gradient-to-r from-purple-500 to-indigo-600 hover:from-purple-600 hover:to-indigo-700 text-white px-4 py-3 rounded-full shadow-xl flex items-center space-x-2 space-x-reverse">
+            <i class="fas fa-comment-dots"></i>
+            <span>צ'אט</span>
+        </button>
+        <!-- חלון הצ'אט שנטען מהקובץ chatbot.html -->
+        <div id="chatWindow" class="hidden mt-3 w-[360px] h-[500px] bg-white rounded-2xl shadow-2xl border border-gray-200 overflow-hidden relative">
+            <iframe src="https://sagi-ba-sagi-ai-tools-chatbot-main-g1prqf.streamlit.app/?embed=true" class="w-full h-full border-none"></iframe>
+        </div>
+        <!-- <iframe src="https://sagi-ba-sagi-ai-tools-chatbot-main-g1prqf.streamlit.app/?embed=true" class="w-full h-full border-none"></iframe> -->
+        </div>
+        <script>
+        function toggleChatWindow() {
+            const chatWindow = document.getElementById("chatWindow");
+            chatWindow.classList.toggle("hidden");
+        }
+        </script>
+        <!-- <span>© 2025 כל הזכויות שמורות לשגיא בר און.</span> -->
+        <div class="container mx-auto px-4 py-3 text-center space-y-2">
+            <div class="flex justify-center gap-4">
                 <!-- אייקונים -->
                 <a href="https://chat.whatsapp.com/GPFASYBEA9CFGUMCVZ5RXP" target="_blank" class="w-9 h-9 rounded-full bg-white shadow flex items-center justify-center text-green-500 hover:bg-green-500 hover:text-white transition"><i class="fab fa-whatsapp"></i></a>
                 <a href="http://www.linkedin.com/in/sagi-bar-on" target="_blank" class="w-9 h-9 rounded-full bg-white shadow flex items-center justify-center text-blue-500 hover:bg-blue-700 hover:text-white transition"><i class="fab fa-linkedin-in"></i></a>
                 <a href="https://www.facebook.com/SAGI.BARON" target="_blank" class="w-9 h-9 rounded-full bg-white shadow flex items-center justify-center text-blue-600 hover:bg-blue-800 hover:text-white transition"><i class="fab fa-facebook-f"></i></a>
                 <a href="https://www.youtube.com/@SAGIBARON" target="_blank" class="w-9 h-9 rounded-full bg-white shadow flex items-center justify-center text-red-500 hover:bg-red-700 hover:text-white transition"><i class="fab fa-youtube"></i></a>
             </div>
+            <button id="editJsonBtnFooter"
+                class="px-4 py-2 rounded-xl bg-gradient-to-br from-pink-500 to-purple-600 text-white font-bold shadow hover:scale-105 transition">
+                <i class="fas fa-pen-to-square ml-2"></i> הציעו כלי חדש
+            </button>
+            <p class="text-gray-500 text-xs">© 2025 כל הזכויות שמורות לשגיא בר און</p>
         </div>
+        </div>
     </footer>