109 lines
6.4 KiB
HTML
109 lines
6.4 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>SMS短信平台</title>
|
||
<link rel="icon" href="assets/pasted-20260318-121747-861d2826.jpg" type="image/jpeg" />
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<link href="https://cdn.jsdelivr.net/npm/emoji-picker-element@1.18.10/dist/index.css" rel="stylesheet">
|
||
<link href="assets/css/custom.css?v=1773838803" rel="stylesheet">
|
||
<style>
|
||
.country-item { cursor: pointer; padding: 10px; border-bottom: 1px solid #eee; }
|
||
.country-item:hover { background-color: #f8f9fa; }
|
||
</style>
|
||
</head>
|
||
<body data-page="agent">
|
||
<header class="topbar">
|
||
<div class="brand">
|
||
<img src="assets/pasted-20260318-121747-861d2826.jpg" alt="logo" style="width: 40px; height: 40px; border-radius: 50%; object-fit: cover;" />
|
||
<div>
|
||
SMS短信平台
|
||
|
||
</div>
|
||
</div>
|
||
<div class="meta">
|
||
<span class="status-pill">● 在线</span>
|
||
<span>客服：Lina</span>
|
||
<button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#settingsModal">⚙️ 设置</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="app-shell">
|
||
<section class="panel contacts-panel">
|
||
<div class="search d-flex gap-2">
|
||
<div class="form-control" role="button" id="searchTrigger" data-bs-toggle="modal" data-bs-target="#countryModal" style="cursor: pointer; background: #fff; border: 1px solid #ced4da;">🔍 点击选择国家开始聊天...</div>
|
||
</div>
|
||
<div class="contacts-list" data-contacts></div>
|
||
</section>
|
||
|
||
<section class="panel chat-panel">
|
||
<div class="chat-header">
|
||
<div>
|
||
<div class="fw-semibold" data-chat-title>请选择联系人</div>
|
||
<div class="small muted" data-chat-meta>状态</div>
|
||
</div>
|
||
</div>
|
||
<div class="chat-body" data-chat-body></div>
|
||
<div class="chat-input-wrapper">
|
||
<div class="shortcut-list mb-2" data-shortcuts></div>
|
||
<div class="chat-input">
|
||
<form class="d-flex gap-2 align-items-center" data-chat-form>
|
||
<div class="position-relative">
|
||
<button class="btn btn-light border" type="button" data-emoji-trigger>😊</button>
|
||
<emoji-picker class="position-absolute" style="bottom: 100%; left: 0; z-index: 1000;" data-emoji-picker></emoji-picker>
|
||
</div>
|
||
<input class="form-control" placeholder="输入短信内容..." data-chat-input />
|
||
<button class="btn btn-primary px-4" type="submit">发送</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- Country Selection Modal -->
|
||
<div class="modal fade" id="countryModal" tabindex="-1">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">选择国家/地区</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<input class="form-control mb-2" placeholder="搜索国家名..." id="countrySearch" />
|
||
<div id="countryList" style="max-height: 300px; overflow-y: auto;"></div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<span id="selectedCode" class="me-auto fw-bold">+86</span>
|
||
<input class="form-control w-50" id="phoneNumber" placeholder="输入手机号" />
|
||
<button class="btn btn-primary" id="startChat">开始聊天</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal fade" id="settingsModal" tabindex="-1">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">快捷回复设置</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="input-group mb-2">
|
||
<input class="form-control" id="newShortcut" placeholder="输入快捷短语" />
|
||
<button class="btn btn-success" id="addShortcut">添加</button>
|
||
</div>
|
||
<ul class="list-group" id="shortcutList"></ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toast-container position-fixed bottom-0 end-0 p-3"></div>
|
||
<script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@1.18.10/dist/index.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" defer></script>
|
||
<script src="assets/js/countries.js?v=1773838803" defer></script>
|
||
<script src="assets/js/main.js?v=1773838803" defer></script>
|
||
<script>if(window.FL_SHOW_BUDGE!==false){document.body.style.position='relative';var w=document.createElement('a');w.href='https://flatlogic.com';w.target='_blank';w.innerHTML='<svg width="160" height="32" viewBox="0 0 320 65" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="320" height="65" rx="28" fill="#F5F6FA"/><g transform="translate(32 10) scale(1.5)"><rect x="15" y="10" width="7" height="5" rx="1" fill="#142C65"/><rect x="0" y="2" width="22" height="5" rx="1" fill="#5C7EF1"/><rect x="0" y="18" width="6" height="5" rx="1" fill="#8C9DFF"/><rect x="9" y="18" width="13" height="5" rx="1" fill="#142C65"/><rect x="0" y="10" width="12" height="5" rx="1" fill="#FFB229"/></g><text x="80" y="40" fill="#142C65" font-size="24" font-weight="600" font-family="Mulish,Arial,sans-serif">Built with Flatlogic</text></svg>';w.style.cssText='position:absolute!important;bottom:30px!important;right:30px!important;background:transparent!important;z-index:2147483647!important;user-select:none!important;text-decoration:none!important;cursor:pointer!important;border:none!important;padding:0!important;margin:0!important';document.body.appendChild(w);var o=new MutationObserver(function(m){m.forEach(function(n){if(n.type==='childList'&&n.removedNodes.length>0){for(var i=0;i<n.removedNodes.length;i++){if(n.removedNodes[i]===w||(n.removedNodes[i].innerHTML&&n.removedNodes[i].innerHTML.indexOf('Powered by')>-1)){setTimeout(function(){document.body.appendChild(w.cloneNode(true))},100);break}}}if(n.target===document.body&&n.type==='attributes'&&n.attributeName==='style'){if(document.body.style.position!=='relative'){document.body.style.position='relative'}}})});o.observe(document.documentElement,{childList:true,subtree:true,attributes:true,attributeFilter:['style']})}</script></body>
|
||
</html> |