Spaces:
Running
Running
File size: 4,423 Bytes
489f090 6fa48cc 59c4a20 6fa48cc 489f090 6fa48cc 489f090 6fa48cc 489f090 6fa48cc 489f090 6fa48cc 489f090 6fa48cc |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 |
<!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>
<!-- 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>
|