184 lines
10 KiB
PHP
184 lines
10 KiB
PHP
<?php session_start(); ?>
|
||
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>金融智能通信平台</title>
|
||
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||
<style>
|
||
.new-chat-btn { cursor: pointer; color: var(--accent-color); font-size: 24px; font-weight: bold; padding: 0 10px; }
|
||
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; z-index: 1000; }
|
||
.modal-content { background: white; padding: 25px; border-radius: 12px; width: 320px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); position: relative; }
|
||
.close-btn { position: absolute; top: 10px; right: 15px; cursor: pointer; font-size: 20px; color: #888; }
|
||
.modal-content select, .modal-content input { width: 100%; margin: 10px 0; padding: 10px; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; }
|
||
.modal-content button { width: 100%; padding: 10px; background: var(--accent-color); color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; }
|
||
|
||
.emoji-picker { display: none; position: absolute; bottom: 80px; left: 10px; background: white; border: 1px solid #ddd; border-radius: 8px; padding: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); grid-template-columns: repeat(8, 1fr); gap: 5px; width: 280px; z-index: 500; cursor: pointer; }
|
||
.emoji-picker span { font-size: 20px; text-align: center; padding: 5px; }
|
||
.emoji-picker span:hover { background: #f0f0f0; border-radius: 4px; }
|
||
|
||
.delete-btn { color: #ff4d4f; cursor: pointer; font-size: 14px; margin-left: 10px; }
|
||
|
||
/* Branding hidden - Aggressive */
|
||
footer, .footer, #footer, [class*="footer"], .built-with, #built-with, div[style*="position: fixed"][style*="bottom: 0"], .flatlogic-branding, [class*="flatlogic"], div[class*="flatlogic"], *[id*="flatlogic"], *[class*="flatlogic"], .brand-label { display: none !important; visibility: hidden !important; height: 0 !important; width: 0 !important; opacity: 0 !important; overflow: hidden !important; pointer-events: none !important; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="app-container">
|
||
<div class="sidebar">
|
||
<div class="sidebar-header">
|
||
<span>会话列表</span>
|
||
<span class="new-chat-btn" onclick="document.getElementById('newChatModal').style.display='flex'">+</span>
|
||
</div>
|
||
<div class="sidebar-search">
|
||
<input type="text" placeholder="搜索">
|
||
</div>
|
||
<div class="conversation-list" id="convList">
|
||
<div class="conversation-item" onclick="selectConversation('+86 13800138000')">
|
||
<div class="conv-info">
|
||
<h4>+86 13800138000</h4>
|
||
<p>你好，请问在吗？</p>
|
||
</div>
|
||
<span class="delete-btn" onclick="event.stopPropagation(); deleteConversation(this)">删除</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chat-panel">
|
||
<div class="chat-header" id="chatHeader">
|
||
请开启会话
|
||
</div>
|
||
<div class="message-list" id="messageList">
|
||
<div class="message msg-other">欢迎使用金融智能通信平台。</div>
|
||
</div>
|
||
<div class="input-area">
|
||
<span class="emoji-btn" onclick="toggleEmojiPicker()" style="cursor: pointer;">😊</span>
|
||
<div id="emojiPicker" class="emoji-picker">
|
||
<span>😀</span><span>😂</span><span>😊</span><span>😍</span><span>👍</span><span>😎</span><span>🤔</span><span>😅</span>
|
||
<span>🤩</span><span>💪</span><span>🔥</span><span>✨</span><span>🎈</span><span>🎉</span><span>❤️</span><span>🙃</span>
|
||
<span>🙄</span><span>😛</span><span>😴</span><span>🤐</span><span>🤑</span><span>🤠</span><span>🥳</span><span>👋</span>
|
||
<span>😄</span><span>😃</span><span>😆</span><span>😇</span><span>😉</span><span>😌</span><span>😘</span><span>🤗</span>
|
||
<span>🤔</span><span>🤯</span><span>🤬</span><span>🥶</span><span>🥵</span><span>🥴</span><span>🥺</span><span>🧐</span>
|
||
</div>
|
||
<input type="text" id="msgInput" placeholder="输入消息..." onkeypress="handleKeyPress(event)">
|
||
<button onclick="sendMessage()">发送</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="newChatModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close-btn" onclick="document.getElementById('newChatModal').style.display='none'">×</span>
|
||
<h3>发起新会话</h3>
|
||
<select id="countryCode" onchange="updatePhoneField()">
|
||
<option value="+86" data-name="中国">中国 (+86)</option>
|
||
<option value="+60" data-name="马来西亚">马来西亚 (+60)</option>
|
||
<option value="+1" data-name="美国/加拿大">美国/加拿大 (+1)</option>
|
||
<option value="+44" data-name="英国">英国 (+44)</option>
|
||
<option value="+81" data-name="日本">日本 (+81)</option>
|
||
<option value="+49" data-name="德国">德国 (+49)</option>
|
||
<option value="+61" data-name="澳大利亚">澳大利亚 (+61)</option>
|
||
<option value="+33" data-name="法国">法国 (+33)</option>
|
||
<option value="+7" data-name="俄罗斯">俄罗斯 (+7)</option>
|
||
<option value="+65" data-name="新加坡">新加坡 (+65)</option>
|
||
<option value="+91" data-name="印度">印度 (+91)</option>
|
||
<option value="+55" data-name="巴西">巴西 (+55)</option>
|
||
<option value="+39" data-name="意大利">意大利 (+39)</option>
|
||
<option value="+34" data-name="西班牙">西班牙 (+34)</option>
|
||
<option value="+82" data-name="韩国">韩国 (+82)</option>
|
||
<option value="+27" data-name="南非">南非 (+27)</option>
|
||
</select>
|
||
<input type="text" id="phoneInput" placeholder="输入手机号码">
|
||
<button onclick="initiateChat()">开始聊天</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const isLoggedIn = <?php echo (isset($_SESSION["is_logged_in"]) && $_SESSION["is_logged_in"]) ? 'true' : 'false'; ?>;
|
||
|
||
// Remove branding on load and continuously
|
||
function hideBranding() {
|
||
const forbidden = document.querySelectorAll('[class*="flatlogic"], [id*="flatlogic"], footer, .brand-label');
|
||
forbidden.forEach(el => { el.style.display = 'none'; el.style.visibility = 'hidden'; el.style.opacity = '0'; });
|
||
}
|
||
setInterval(hideBranding, 500);
|
||
|
||
// MutationObserver for branding removal
|
||
const observer = new MutationObserver(() => hideBranding());
|
||
observer.observe(document.body, { childList: true, subtree: true });
|
||
|
||
// Mock data structure to simulate storage
|
||
let chatHistory = {
|
||
"+86 13800138000": ["欢迎使用金融智能通信平台。", "你好，请问在吗？"]
|
||
};
|
||
let currentConv = null;
|
||
|
||
function updatePhoneField() { document.getElementById('phoneInput').value = document.getElementById('countryCode').value; }
|
||
function toggleEmojiPicker() { const picker = document.getElementById('emojiPicker'); picker.style.display = picker.style.display === 'grid' ? 'none' : 'grid'; }
|
||
|
||
document.querySelectorAll('.emoji-picker span').forEach(el => {
|
||
el.onclick = () => { document.getElementById('msgInput').value += el.innerText; toggleEmojiPicker(); }
|
||
});
|
||
|
||
function handleKeyPress(e) { if (e.key === 'Enter') sendMessage(); }
|
||
|
||
function selectConversation(phone) {
|
||
currentConv = phone;
|
||
document.getElementById('chatHeader').innerText = phone;
|
||
const list = document.getElementById('messageList');
|
||
list.innerHTML = '';
|
||
(chatHistory[phone] || []).forEach(msg => {
|
||
const div = document.createElement('div');
|
||
div.className = 'message msg-other';
|
||
div.innerText = msg;
|
||
list.appendChild(div);
|
||
});
|
||
}
|
||
|
||
function deleteConversation(el) {
|
||
const item = el.parentElement;
|
||
const phone = item.querySelector('h4').innerText;
|
||
delete chatHistory[phone];
|
||
item.remove();
|
||
if (currentConv === phone) {
|
||
currentConv = null;
|
||
document.getElementById('messageList').innerHTML = '';
|
||
document.getElementById('chatHeader').innerText = '请开启会话';
|
||
}
|
||
}
|
||
|
||
function sendMessage() {
|
||
if (!isLoggedIn) { alert('请先登录以发送消息'); window.location.href = '/login.php'; return; }
|
||
if (!currentConv) { alert('请先选择或发起一个会话'); return; }
|
||
const input = document.getElementById('msgInput');
|
||
if (input.value.trim() === '') return;
|
||
|
||
chatHistory[currentConv].push(input.value);
|
||
const msgList = document.getElementById('messageList');
|
||
const msg = document.createElement('div');
|
||
msg.className = 'message msg-me';
|
||
msg.innerText = input.value;
|
||
msgList.appendChild(msg);
|
||
input.value = '';
|
||
msgList.scrollTop = msgList.scrollHeight;
|
||
}
|
||
|
||
function initiateChat() {
|
||
const phone = document.getElementById('phoneInput').value;
|
||
if (!isLoggedIn) { alert('请先登录以开始聊天'); window.location.href = '/login.php'; return; }
|
||
if (phone.length > 5) {
|
||
if (!chatHistory[phone]) chatHistory[phone] = [];
|
||
currentConv = phone;
|
||
document.getElementById('chatHeader').innerText = phone;
|
||
document.getElementById('newChatModal').style.display = 'none';
|
||
selectConversation(phone);
|
||
} else { alert('请输入完整的手机号码'); }
|
||
}
|
||
|
||
// Ensure scrolling works
|
||
document.getElementById('convList').style.overflowY = 'auto';
|
||
document.getElementById('messageList').style.overflowY = 'auto';
|
||
</script>
|
||
</body>
|
||
</html>
|