浅念
83 lines
4.0 KiB
HTML
83 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
<title>VOLT</title>
|
||
<link rel="stylesheet" href="/static/css/style.css">
|
||
<script src="/static/js/theme.js"></script>
|
||
</head>
|
||
<body>
|
||
<div class="chat-container">
|
||
<div class="chat-header">
|
||
<div class="avatar"><span class="avatar-emoji">🤖</span><img class="avatar-img" alt="" src="/static/kefu-small.png"></div>
|
||
<div class="info">
|
||
<h1>HESU Support</h1>
|
||
<div class="availability">Online now - Usually replies in minutes</div>
|
||
</div>
|
||
<!-- <div class="actions">
|
||
<button class="action-btn" aria-label="Minimize">−</button>
|
||
<button class="action-btn" aria-label="Close">×</button>
|
||
</div> -->
|
||
</div>
|
||
|
||
<div class="chat-ended" id="chatEnded">
|
||
Chat ended. We'll be in touch soon!
|
||
</div>
|
||
<div class="panel-top">
|
||
<!-- How can we help? 区块 -->
|
||
<div class="help-block">
|
||
<div style="display:flex;align-items:center;gap:14px;">
|
||
<div class="help-content">
|
||
<div class="help-title">How can we help?</div>
|
||
<div class="help-description">Ask about vehicles, market support, quotation, shipping and delivery.</div>
|
||
</div>
|
||
<div class="help-actions">
|
||
<a href="https://wa.me/+8619037179250" target="_blank" class="call-btn whatsapp-btn">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
|
||
<span>WhatsApp</span>
|
||
</a>
|
||
<a href="mailto:info@borderlesscar.com" class="call-btn email-btn">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
|
||
<span>Email</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="chat-separator"></div>
|
||
<div class="chat-messages" id="messages">
|
||
<div class="message assistant">
|
||
<div class="bubble">Hey there! Looking for a ride? Tell me what you need.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="typing-indicator" id="typing">
|
||
<span></span><span></span><span></span>
|
||
</div>
|
||
|
||
<!-- POPULAR TOPICS 区块 -->
|
||
<div class="popular-topics-fixed" id="popular-topics">
|
||
<div class="popular-topics-label">POPULAR TOPICS</div>
|
||
<div class="popular-topics-grid">
|
||
<button class="popular-topic-btn" data-topic="Get Quotation">Get Quotation</button>
|
||
<button class="popular-topic-btn" data-topic="Distributor Cooperation">Distributor Cooperation</button>
|
||
</div>
|
||
</div>
|
||
<div class="chat-separator-topics"></div>
|
||
|
||
<div class="chat-input-container">
|
||
<div class="input-wrapper">
|
||
<input id="input" type="text" placeholder="Type a message..." autocomplete="off">
|
||
<button id="sendBtn" class="send-btn" aria-label="Send message">
|
||
<span class="send-icon">➤</span>
|
||
<span class="send-text">Send</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/static/js/chat.js"></script>
|
||
</body>
|
||
</html>
|