Spaces:
Running
Running
| <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> | |
| <!-- Google tag (gtag.js) --> | |
| <script | |
| async | |
| src="https://www.googletagmanager.com/gtag/js?id=G-JVF8N1DVSG" | |
| ></script> | |
| <script> | |
| window.dataLayer = window.dataLayer || []; | |
| function gtag() { | |
| dataLayer.push(arguments); | |
| } | |
| gtag('js', new Date()); | |
| gtag('config', 'G-JVF8N1DVSG'); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="chat-container"> | |
| <div class="chat-header"> | |
| צ'אט עם הבינה של שגיא | |
| <span | |
| id="toolsCount" | |
| class="ml-2 text-sm bg-white text-purple-600 font-semibold px-2 py-1 rounded-full shadow-sm" | |
| ></span> | |
| </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> | |
| // קריאת tools.json ועדכון כמות הכלים | |
| fetch('tools.json') | |
| .then((res) => res.json()) | |
| .then((tools) => { | |
| const count = tools.length; | |
| document.getElementById( | |
| 'toolsCount' | |
| ).textContent = `${count} כלים זמינים`; | |
| }) | |
| .catch((err) => { | |
| console.error('שגיאה בטעינת כמות הכלים:', err); | |
| document.getElementById('toolsCount').textContent = 'טעינה נכשלה'; | |
| }); | |
| 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> | |