Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>HR Chatbot Widget - Bottom Right Corner</title> | |
| <style> | |
| /* Demo page styles */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background: #f8fafc; | |
| min-height: 100vh; | |
| padding: 40px; | |
| } | |
| .demo-content { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .demo-content h1 { | |
| font-size: 2rem; | |
| color: #1e293b; | |
| margin-bottom: 20px; | |
| } | |
| .demo-content p { | |
| color: #64748b; | |
| line-height: 1.8; | |
| margin-bottom: 15px; | |
| } | |
| .demo-content .note { | |
| background: #fef3c7; | |
| border-left: 4px solid #f59e0b; | |
| padding: 16px 20px; | |
| border-radius: 0 8px 8px 0; | |
| margin: 30px 0; | |
| } | |
| .demo-content .note strong { | |
| color: #92400e; | |
| } | |
| /* ============================================ | |
| CHATBOT WIDGET STYLES - COPY FROM HERE | |
| ============================================ */ | |
| /* Chat Toggle Button */ | |
| .chat-widget-button { | |
| position: fixed; | |
| bottom: 24px; | |
| right: 24px; | |
| width: 64px; | |
| height: 64px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); | |
| border: none; | |
| cursor: pointer; | |
| box-shadow: 0 8px 32px rgba(99, 102, 241, 0.4); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| z-index: 9998; | |
| } | |
| .chat-widget-button:hover { | |
| transform: scale(1.1); | |
| box-shadow: 0 12px 40px rgba(99, 102, 241, 0.5); | |
| } | |
| .chat-widget-button svg { | |
| width: 28px; | |
| height: 28px; | |
| fill: white; | |
| transition: transform 0.3s ease; | |
| } | |
| .chat-widget-button.active svg { | |
| transform: rotate(90deg); | |
| } | |
| /* Notification Badge */ | |
| .chat-widget-badge { | |
| position: absolute; | |
| top: -4px; | |
| right: -4px; | |
| width: 20px; | |
| height: 20px; | |
| background: #ef4444; | |
| border-radius: 50%; | |
| color: white; | |
| font-size: 12px; | |
| font-weight: 600; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| animation: pulse-badge 2s infinite; | |
| } | |
| @keyframes pulse-badge { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.1); } | |
| } | |
| /* Chat Window */ | |
| .chat-widget-window { | |
| position: fixed; | |
| bottom: 100px; | |
| right: 24px; | |
| width: 400px; | |
| height: 600px; | |
| background: white; | |
| border-radius: 20px; | |
| box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2); | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| z-index: 9999; | |
| opacity: 0; | |
| visibility: hidden; | |
| transform: translateY(20px) scale(0.95); | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .chat-widget-window.open { | |
| opacity: 1; | |
| visibility: visible; | |
| transform: translateY(0) scale(1); | |
| } | |
| /* Chat Header */ | |
| .chat-widget-header { | |
| background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); | |
| padding: 18px 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .chat-widget-header-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .chat-widget-avatar { | |
| width: 44px; | |
| height: 44px; | |
| background: rgba(255, 255, 255, 0.2); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 24px; | |
| } | |
| .chat-widget-title { | |
| color: white; | |
| } | |
| .chat-widget-title h3 { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| margin-bottom: 2px; | |
| } | |
| .chat-widget-title span { | |
| font-size: 0.8rem; | |
| opacity: 0.9; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .chat-widget-title .status-dot { | |
| width: 8px; | |
| height: 8px; | |
| background: #4ade80; | |
| border-radius: 50%; | |
| } | |
| .chat-widget-close { | |
| background: rgba(255, 255, 255, 0.2); | |
| border: none; | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| color: white; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: background 0.2s; | |
| } | |
| .chat-widget-close:hover { | |
| background: rgba(255, 255, 255, 0.3); | |
| } | |
| /* Chat Body (iframe container) */ | |
| .chat-widget-body { | |
| flex: 1; | |
| overflow: hidden; | |
| } | |
| .chat-widget-body iframe { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| } | |
| /* Mobile Responsive */ | |
| @media (max-width: 480px) { | |
| .chat-widget-window { | |
| width: calc(100% - 20px); | |
| height: calc(100% - 120px); | |
| right: 10px; | |
| bottom: 90px; | |
| border-radius: 16px; | |
| } | |
| .chat-widget-button { | |
| width: 56px; | |
| height: 56px; | |
| bottom: 20px; | |
| right: 20px; | |
| } | |
| } | |
| /* ============================================ | |
| END OF CHATBOT WIDGET STYLES | |
| ============================================ */ | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Demo Page Content --> | |
| <div class="demo-content"> | |
| <h1>Your Website Content Here</h1> | |
| <p>This is a demo page showing how the HR Chatbot widget appears in the bottom right corner. The chatbot is always accessible to visitors while they browse your website.</p> | |
| <p>Our HR Assistant is powered by advanced AI technology, providing instant answers to your human resources questions. Whether you need guidance on policies, hiring practices, or workplace regulations, our chatbot is here to help.</p> | |
| <p>The widget is designed to be non-intrusive while remaining easily accessible. It works seamlessly on both desktop and mobile devices.</p> | |
| <div class="note"> | |
| <strong>👉 Click the chat button in the bottom right corner to open the HR Assistant!</strong> | |
| </div> | |
| <p>Get instant support for common HR inquiries including employee onboarding, benefits information, leave policies, and workplace compliance. Our AI assistant is available 24/7 to provide helpful guidance.</p> | |
| <p>Please note that while our chatbot provides general HR information, it should not replace professional legal or HR advice for important decisions.</p> | |
| </div> | |
| <!-- ============================================ | |
| CHATBOT WIDGET HTML - COPY FROM HERE | |
| ============================================ --> | |
| <!-- Chat Toggle Button --> | |
| <button class="chat-widget-button" id="chatWidgetButton" onclick="toggleChat()"> | |
| <span class="chat-widget-badge">1</span> | |
| <svg viewBox="0 0 24 24" id="chatIcon"> | |
| <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/> | |
| </svg> | |
| <svg viewBox="0 0 24 24" id="closeIcon" style="display: none;"> | |
| <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/> | |
| </svg> | |
| </button> | |
| <!-- Chat Window --> | |
| <div class="chat-widget-window" id="chatWidgetWindow"> | |
| <div class="chat-widget-header"> | |
| <div class="chat-widget-header-info"> | |
| <div class="chat-widget-avatar">🤖</div> | |
| <div class="chat-widget-title"> | |
| <h3>HR Assistant</h3> | |
| <span><span class="status-dot"></span> Online</span> | |
| </div> | |
| </div> | |
| <button class="chat-widget-close" onclick="toggleChat()"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"> | |
| <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/> | |
| </svg> | |
| </button> | |
| </div> | |
| <div class="chat-widget-body"> | |
| <iframe | |
| src="https://pikamomo-hr-intervals-chatbot.hf.space" | |
| title="HR Chatbot" | |
| loading="lazy"> | |
| </iframe> | |
| </div> | |
| </div> | |
| <!-- ============================================ | |
| CHATBOT WIDGET JAVASCRIPT - COPY THIS TOO | |
| ============================================ --> | |
| <script> | |
| let isOpen = false; | |
| const button = document.getElementById('chatWidgetButton'); | |
| const window_el = document.getElementById('chatWidgetWindow'); | |
| const chatIcon = document.getElementById('chatIcon'); | |
| const closeIcon = document.getElementById('closeIcon'); | |
| const badge = document.querySelector('.chat-widget-badge'); | |
| function toggleChat() { | |
| isOpen = !isOpen; | |
| if (isOpen) { | |
| window_el.classList.add('open'); | |
| button.classList.add('active'); | |
| chatIcon.style.display = 'none'; | |
| closeIcon.style.display = 'block'; | |
| badge.style.display = 'none'; | |
| } else { | |
| window_el.classList.remove('open'); | |
| button.classList.remove('active'); | |
| chatIcon.style.display = 'block'; | |
| closeIcon.style.display = 'none'; | |
| } | |
| } | |
| // Close on escape key | |
| document.addEventListener('keydown', function(e) { | |
| if (e.key === 'Escape' && isOpen) { | |
| toggleChat(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |