Hugging Face's logo

Spaces:
theWitcher
/
sagi-ai-tools
Running

App Files Community
theWitcher commited on
Commit
489f090
·
1 Parent(s): 82e1386

add chatbot

Browse files
Files changed (2) hide show
  1. chatbot.html +120 -0
  2. index.html +31 -9
chatbot.html ADDED
@@ -0,0 +1,120 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="he" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>צ'אטבוט</title>
7
+ <style>
8
+ body {
9
+ margin: 0;
10
+ font-family: 'Arial', sans-serif;
11
+ background-color: #f3f4f6;
12
+ }
13
+ .chat-container {
14
+ display: flex;
15
+ flex-direction: column;
16
+ height: 100vh;
17
+ }
18
+ .chat-header {
19
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
20
+ color: white;
21
+ padding: 16px;
22
+ font-size: 18px;
23
+ font-weight: bold;
24
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
25
+ }
26
+ .chat-messages {
27
+ flex: 1;
28
+ padding: 16px;
29
+ overflow-y: auto;
30
+ background-color: #ffffff;
31
+ }
32
+ .chat-bubble {
33
+ max-width: 80%;
34
+ margin-bottom: 10px;
35
+ padding: 10px 14px;
36
+ border-radius: 20px;
37
+ line-height: 1.5;
38
+ font-size: 14px;
39
+ }
40
+ .user-bubble {
41
+ background-color: #3b82f6;
42
+ color: white;
43
+ margin-left: auto;
44
+ border-bottom-right-radius: 0;
45
+ }
46
+ .bot-bubble {
47
+ background-color: #e5e7eb;
48
+ color: #111827;
49
+ margin-right: auto;
50
+ border-bottom-left-radius: 0;
51
+ }
52
+ .chat-input {
53
+ display: flex;
54
+ padding: 12px;
55
+ border-top: 1px solid #d1d5db;
56
+ background-color: #f9fafb;
57
+ }
58
+ .chat-input input {
59
+ flex: 1;
60
+ padding: 10px;
61
+ border-radius: 9999px;
62
+ border: 1px solid #d1d5db;
63
+ font-size: 14px;
64
+ outline: none;
65
+ }
66
+ .chat-input button {
67
+ margin-right: 8px;
68
+ background-color: #8b5cf6;
69
+ color: white;
70
+ border: none;
71
+ border-radius: 9999px;
72
+ padding: 10px 16px;
73
+ font-size: 14px;
74
+ cursor: pointer;
75
+ }
76
+ </style>
77
+ </head>
78
+ <body>
79
+ <div class="chat-container">
80
+ <div class="chat-header">
81
+ צ'אט עם הבינה של שגיא
82
+ </div>
83
+ <div class="chat-messages" id="chatMessages">
84
+ <div class="chat-bubble bot-bubble">שלום! איך אפשר לעזור לך היום?</div>
85
+ </div>
86
+ <div class="chat-input">
87
+ <input type="text" id="chatInput" placeholder="הקלד הודעה...">
88
+ <button onclick="sendMessage()">שלח</button>
89
+ </div>
90
+ </div>
91
+
92
+ <script>
93
+ function sendMessage() {
94
+ const input = document.getElementById('chatInput');
95
+ const message = input.value.trim();
96
+ if (!message) return;
97
+
98
+ const messagesDiv = document.getElementById('chatMessages');
99
+
100
+ const userBubble = document.createElement('div');
101
+ userBubble.className = 'chat-bubble user-bubble';
102
+ userBubble.textContent = message;
103
+ messagesDiv.appendChild(userBubble);
104
+
105
+ const botBubble = document.createElement('div');
106
+ botBubble.className = 'chat-bubble bot-bubble';
107
+ botBubble.textContent = getBotResponse(message);
108
+ messagesDiv.appendChild(botBubble);
109
+
110
+ input.value = '';
111
+ messagesDiv.scrollTop = messagesDiv.scrollHeight;
112
+ }
113
+
114
+ function getBotResponse(userText) {
115
+ // כאן תוכל לשלב לוגיקה אמיתית או חיבור ל-AI
116
+ return 'זוהי תגובה אוטומטית :)';
117
+ }
118
+ </script>
119
+ </body>
120
+ </html>
index.html CHANGED
@@ -416,22 +416,44 @@ https://chatgpt.com/c/67efa5ae-ab80-8005-a7d4-de3ced6ccec4
416
 
417
  <!-- /* --- Footer --- */ -->
418
  <footer class="fixed bottom-0 left-0 w-full z-50 backdrop-blur-md bg-white/80 shadow-xl border-t border-gray-200">
419
- <!-- <span>© 2025 כל הזכויות שמורות לשגיא בר און.</span> -->
420
- <div class="container mx-auto px-4 py-3 text-center space-y-2">
421
- <div class="flex justify-center gap-4">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
422
  <!-- אייקונים -->
423
  <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>
424
  <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>
425
  <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>
426
  <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>
427
- </div>
428
- <button id="editJsonBtnFooter"
429
- 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">
430
- <i class="fas fa-pen-to-square ml-2"></i> הציעו כלי חדש
431
- </button>
432
- <p class="text-gray-500 text-xs">© 2025 כל הזכויות שמורות לשגיא בר און</p>
433
  </div>
 
 
 
 
 
434
  </div>
 
 
435
  </footer>
436
 
437
 
 
416
 
417
  <!-- /* --- Footer --- */ -->
418
  <footer class="fixed bottom-0 left-0 w-full z-50 backdrop-blur-md bg-white/80 shadow-xl border-t border-gray-200">
419
+ <!-- הוספת כפתור צ'אט צף לקובץ index.html -->
420
+ <div id="chatBubble" class="fixed bottom-6 right-6 z-[9999]">
421
+ <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">
422
+ <i class="fas fa-comment-dots"></i>
423
+ <span>צ'אט</span>
424
+ </button>
425
+
426
+ <!-- חלון הצ'אט שנטען מהקובץ chatbot.html -->
427
+ <div id="chatWindow" class="hidden mt-3 w-[360px] h-[500px] bg-white rounded-2xl shadow-2xl border border-gray-200 overflow-hidden relative">
428
+ <iframe src="https://sagi-ba-sagi-ai-tools-chatbot-main-g1prqf.streamlit.app/?embed=true" class="w-full h-full border-none"></iframe>
429
+ </div>
430
+ <!-- <iframe src="https://sagi-ba-sagi-ai-tools-chatbot-main-g1prqf.streamlit.app/?embed=true" class="w-full h-full border-none"></iframe> -->
431
+ </div>
432
+
433
+ <script>
434
+ function toggleChatWindow() {
435
+ const chatWindow = document.getElementById("chatWindow");
436
+ chatWindow.classList.toggle("hidden");
437
+ }
438
+ </script>
439
+
440
+ <!-- <span>© 2025 כל הזכויות שמורות לשגיא בר און.</span> -->
441
+ <div class="container mx-auto px-4 py-3 text-center space-y-2">
442
+ <div class="flex justify-center gap-4">
443
  <!-- אייקונים -->
444
  <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>
445
  <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>
446
  <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>
447
  <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>
 
 
 
 
 
 
448
  </div>
449
+ <button id="editJsonBtnFooter"
450
+ 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">
451
+ <i class="fas fa-pen-to-square ml-2"></i> הציעו כלי חדש
452
+ </button>
453
+ <p class="text-gray-500 text-xs">© 2025 כל הזכויות שמורות לשגיא בר און</p>
454
  </div>
455
+ </div>
456
+
457
  </footer>
458
 
459