49 lines
2.9 KiB
PHP
49 lines
2.9 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Chat Page</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="hero d-flex align-items-center justify-content-center vh-100" style="background-image: url('https://picsum.photos/seed/hero-chat/1600/900');">
|
|
<div class="text-center">
|
|
<h1 class="display-3 fw-bold">Welcome to our Support Chat</h1>
|
|
<p class="lead">Ask us anything! Our bot is here to help you 24/7.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat Popup -->
|
|
<div id="chat-popup" class="chat-popup">
|
|
<div class="chat-header">
|
|
<h5 class="mb-0">Chat with us</h5>
|
|
<button type="button" class="btn-close" id="chat-close-button"></button>
|
|
</div>
|
|
<div id="chat-area" class="chat-area"></div>
|
|
<div class="chat-input-area">
|
|
<form id="chat-form" class="d-flex">
|
|
<input type="text" id="chat-input" class="form-control" placeholder="Type a message..." autocomplete="off">
|
|
<button type="submit" class="btn btn-primary ms-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-send-fill" viewBox="0 0 16 16">
|
|
<path d="M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083l6-15Zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471-.47 1.178Z"/>
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat Button -->
|
|
<div id="chat-open-button" class="chat-widget-button">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193l-3.72 3.72a1.125 1.125 0 0 1-1.59 0l-3.72-3.72a1.125 1.125 0 0 1 0-1.59l3.72-3.72a1.125 1.125 0 0 1 1.59 0l3.72 3.72c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193l-3.72 3.72a1.125 1.125 0 0 1-1.59 0l-3.72-3.72a1.125 1.125 0 0 1 0-1.59l3.72-3.72a1.125 1.125 0 0 1 1.59 0l3.72 3.72" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a.75.75 0 0 1 .75.75v.008a.75.75 0 0 1-.75.75h-.008a.75.75 0 0 1-.75-.75v-.008a.75.75 0 0 1 .75-.75h.008Z" />
|
|
</svg>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
</body>
|
|
</html> |