浅念
afee0dfa4d
- 品牌色橙#f08a31→HESUPIPE蓝#066fc0(取自官网主题CSS a:hover/导航主色),7槽位色板三处同步:theme.js/widget.js内联副本/style.css :root - chat.html/widget.js/js/chat.js:标题HESUPIPE Support、管道场景描述、欢迎语、热门话题Get Quotation/Pipe Specifications/Delivery & Shipping、WhatsApp+8615937108317、邮箱hesu@hesuu.com - 邀请卡文案管道化(pipe specs, MOQ, delivery timing)+GDPR小字;聊天面板footer GDPR行(复用.chat-footer) - admin.html VOLT→HESUPIPE;头像PIL重绘为品牌蓝底白H(512/128px) - widget-test.html色值同步+断言基准更新(浏览器断言9/9 Δ=0);.gitignore排除.playwright-mcp/ Co-Authored-By: Claude Code <noreply@anthropic.com>
85 lines
4.3 KiB
HTML
85 lines
4.3 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>HESUPIPE Support</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>HESUPIPE 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 pipe specifications, quotations, MOQ, shipping and delivery.</div>
|
||
</div>
|
||
<div class="help-actions">
|
||
<a href="https://wa.me/+8615937108317" 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:hesu@hesuu.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">What kind of piping project are you working on?</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="Pipe Specifications">Pipe Specifications</button>
|
||
<button class="popular-topic-btn" data-topic="Delivery & Shipping">Delivery & Shipping</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 class="chat-footer"><span class="footer-left">By chatting, you agree to our <a href="https://hesupipe.com/privacy-policy/" target="_blank" rel="noopener">privacy policy</a>.</span></div>
|
||
</div>
|
||
|
||
<script src="/static/js/chat.js"></script>
|
||
</body>
|
||
</html>
|