ai-kefu-jc/static/chat.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 &amp; 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>