56 lines
2.7 KiB
PHP
56 lines
2.7 KiB
PHP
<!-- Chatbot Widget HTML -->
|
|
<div id="portfolio-chatbot-widget">
|
|
<!-- Floating Chat Toggle Bubble -->
|
|
<button id="chatbot-toggle-btn" aria-label="Open Chat Assistant">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="chat-icon-svg">
|
|
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
|
|
</svg>
|
|
<span class="pulse-notification-dot"></span>
|
|
</button>
|
|
|
|
<!-- Chat Window Container -->
|
|
<div id="chatbot-window" class="hidden">
|
|
<!-- Header -->
|
|
<div id="chatbot-header">
|
|
<div class="header-avatar-info">
|
|
<div class="avatar-container">
|
|
<img src="assets/img/pp-day.webp" alt="Cris Garcia Avatar" class="chat-avatar">
|
|
<span class="status-indicator online"></span>
|
|
</div>
|
|
<div class="header-text-info">
|
|
<h4>Cris's AI Guide</h4>
|
|
<span class="status-text">Ask me anything</span>
|
|
</div>
|
|
</div>
|
|
<button id="chatbot-close-btn" aria-label="Close Chat Window">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Message logs area -->
|
|
<div id="chatbot-messages">
|
|
<div class="chat-message bot-msg">
|
|
<div class="msg-bubble">
|
|
Hi! I'm Cris's AI assistant. Ask me anything about his projects, skills, certifications, or how to contact him! 😊
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Input Box -->
|
|
<form id="chatbot-input-form" onsubmit="return false;">
|
|
<input type="text" id="chatbot-input-field" placeholder="Ask a question..." autocomplete="off" required>
|
|
<button type="submit" id="chatbot-send-btn" aria-label="Send Message">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="22" y1="2" x2="11" y2="13"></line>
|
|
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="assets/js/chat.js" defer></script>
|