update chatBubble

index.html

@@ -417,17 +417,36 @@ 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">
         <!-- הוספת כפתור צ'אט צף לקובץ 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> -->
+        <!-- Improved Chat Component -->
+        <div id="chatBubble" class="fixed bottom-8 right-5 z-[9999]">
+            <!-- Introductory message -->
+            <div id="chatIntro" class="bg-white p-3 rounded-lg shadow-md mb-2 text-sm max-w-xs chat-intro-enter hidden">
+                שלום! אני עוזר AI של שגיא. אשמח לעזור לך למצוא כלי AI מתאים או לענות על שאלות.
+                <button onclick="hideChatIntro()" class="text-gray-500 float-left">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+
+            <!-- Chat Button -->
+            <button id="chatButton" onclick="toggleChatWindow()" class="chat-pulse 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-robot"></i>
+                <span>צ'אט</span>
+            </button>
+
+            <!-- Chat Window -->
+            <div id="chatWindow" class="hidden mt-3 w-[360px] h-[500px] bg-white rounded-2xl shadow-2xl border border-gray-200 overflow-hidden relative">
+                <!-- Chat Header -->
+                <div class="bg-gradient-to-r from-purple-500 to-indigo-600 text-white p-3 flex justify-between items-center">
+                    <button onclick="toggleChatWindow()" class="text-white">
+                        <i class="fas fa-times"></i>
+                    </button>
+                    <div class="font-medium">עוזר AI של שגיא</div>
+                    <div class="w-6"></div> <!-- Spacer for balance -->
+                </div>
+                
+                <!-- Chat iframe -->
+                <iframe src="https://sagi-ba-sagi-ai-tools-chatbot-main-g1prqf.streamlit.app/?embed=true" class="w-full h-full border-none"></iframe>
+            </div>
         </div>
 
         <script>

style.css

@@ -31,3 +31,41 @@ p {
   overflow-y: auto;
   padding-bottom: 80px; /* כדי לא להיתקע מאחורי הפוטר */
 }
+ /* Chat animations and effects */
+@keyframes pulse {
+	0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7); }
+	70% { box-shadow: 0 0 0 10px rgba(139, 92, 246, 0); }
+	100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
+}
+
+.chat-pulse {
+	animation: pulse 2s infinite;
+}
+
+/* Smooth transitions */
+#chatWindow {
+	transition: all 0.3s ease-in-out;
+	transform-origin: bottom right;
+}
+
+.chat-intro-enter {
+	animation: slideDown 0.3s forwards;
+}
+
+@keyframes slideDown {
+	from { transform: translateY(-20px); opacity: 0; }
+	to { transform: translateY(0); opacity: 1; }
+}
+
+/* Mobile adjustments */
+@media (max-width: 640px) {
+	#chatWindow {
+		width: 90vw !important;
+		right: 5vw;
+		left: 5vw;
+	}
+	
+	#chatBubble {
+		bottom: 75px; /* Move above footer on mobile */
+	}
+}