76 lines
5.9 KiB
HTML
76 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="theme-color" content="#315fd5">
|
||
<title>柏悦智能物流客服系统</title>
|
||
<link rel="icon" href="{{ url_for('static', filename='fa.jpg') }}">
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/theme.css') }}">
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/chat.css') }}">
|
||
</head>
|
||
<body>
|
||
<div class="chat-container">
|
||
<aside class="left-panel" aria-label="历史对话">
|
||
<a class="brand" href="/" aria-label="柏悦物流首页"><span class="brand-mark"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m4 7 8-4 8 4v10l-8 4-8-4Z"/><path d="m4 7 8 4 8-4M12 11v10M8 5l8 4"/></svg></span><span><span class="brand-name">柏悦物流</span><span class="brand-caption">BAIYUE LOGISTICS</span></span></a>
|
||
<button type="button" class="new-chat-btn">新建对话</button>
|
||
<h2 class="panel-title">历史对话</h2>
|
||
<div class="history-search-wrap">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 4 4"/></svg>
|
||
<input id="history-search" class="history-search" type="search" aria-label="搜索历史对话" placeholder="搜索历史对话..." autocomplete="off">
|
||
</div>
|
||
<div class="history-wrap" id="historyWrap"></div>
|
||
<div class="sidebar-footer">
|
||
<button type="button" class="clear-all-btn">清空全部历史</button>
|
||
<div class="sidebar-note"><span class="status-dot" aria-hidden="true"></span><span data-i18n="serviceScope">中欧与英国专线咨询</span></div>
|
||
</div>
|
||
</aside>
|
||
<button class="sidebar-backdrop" type="button" aria-label="关闭历史侧栏"></button>
|
||
<main class="main-chat">
|
||
<header class="chat-title">
|
||
<button class="toggle-divider" type="button" aria-label="切换历史侧栏" aria-expanded="true"></button>
|
||
<div class="header-copy"><div class="header-kicker">BAIYUE · CUSTOMER SUPPORT</div><span id="app-title">柏悦物流智能助手</span></div>
|
||
<div class="title-actions">
|
||
<button type="button" id="notifications-toggle" class="theme-toggle" title="开启浏览器通知" aria-label="开启浏览器通知" aria-pressed="false">🔔</button>
|
||
<span class="service-label"><span class="status-dot" aria-hidden="true"></span><span data-i18n="serviceTag">智能客服</span></span>
|
||
<button type="button" id="lang-toggle" class="theme-toggle lang-toggle" title="中英文切换（Ctrl+L）">中</button>
|
||
<button type="button" id="font-toggle" class="theme-toggle" title="字体大小">16px</button>
|
||
<button type="button" id="theme-toggle" class="theme-toggle" title="切换深色/浅色">☾</button>
|
||
</div>
|
||
</header>
|
||
<div id="chatDom" role="log" aria-live="polite" aria-label="聊天内容">
|
||
<section class="ai-welcome-card">
|
||
<div class="ai-welcome-top">
|
||
<div class="ai-avatar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m4 7 8-4 8 4v10l-8 4-8-4Z"/><path d="m4 7 8 4 8-4M12 11v10M8 5l8 4"/></svg></div>
|
||
<div class="welcome-eyebrow">中欧 · 英国物流服务</div>
|
||
<h3>物流问题，随时为您解答</h3>
|
||
<p>查询物流轨迹、了解专线报价，或联系人工客服。<br>从这里开始您的物流咨询。</p>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<footer class="composer">
|
||
<div class="hot-bar">
|
||
<span class="hot-bar-label" data-i18n="quickLabel">快捷咨询</span>
|
||
<button type="button" class="hot-capsule" data-question-index="0" data-i18n="footerTrack">查运单</button>
|
||
<button type="button" class="hot-capsule" data-question-index="1" data-i18n="footerQuote">专线报价</button>
|
||
<button type="button" class="hot-capsule" data-question-index="2" data-i18n="footerException">异常处理</button>
|
||
<button type="button" class="hot-capsule" onclick="showHuman()" data-i18n="footerHuman">联系人工</button>
|
||
</div>
|
||
<div class="input-area">
|
||
<button type="button" id="upload-btn" title="发送附件" aria-label="发送附件">＋</button>
|
||
<div class="emoji-control"><button id="emoji-toggle" class="icon-button" type="button" aria-label="选择表情" aria-expanded="false" aria-controls="emoji-panel">😊</button><div id="emoji-panel" class="emoji-picker" hidden></div></div>
|
||
<input type="file" id="upload-input" accept="image/*,.pdf,.txt,.csv" hidden>
|
||
<textarea id="input-text" rows="1" aria-label="输入问题或运单号" placeholder="输入您的问题或运单号…"></textarea>
|
||
<button type="button" id="send-button">发送</button>
|
||
</div>
|
||
<p id="composer-status" class="composer-status" role="status" hidden></p>
|
||
<div class="composer-footer"><span class="disclaimer" data-i18n="disclaimer">AI 回答仅供参考，具体以人工客服回复为准</span><span class="keyboard-hint" data-i18n="keyboardHint">Enter 发送 · Shift + Enter 换行</span></div>
|
||
</footer>
|
||
<button type="button" id="to-bottom" class="to-bottom" title="回到底部" aria-label="回到底部">↓</button>
|
||
</main>
|
||
</div>
|
||
<script src="{{ url_for('static', filename='js/support.js') }}"></script>
|
||
<script src="{{ url_for('static', filename='js/chat.js') }}"></script>
|
||
</body>
|
||
</html>
|