Autosave: 20260318-072217
This commit is contained in:
Flatlogic Bot
parent
b2af89f7a2
commit
cffae43e31
@ -2,7 +2,7 @@
|
||||
--bg-color: #f0f2f5;
|
||||
--sidebar-bg: #ffffff;
|
||||
--chat-bg: #e5ddd5;
|
||||
--accent-color: #00a884;
|
||||
--accent-color: #25d366; /* WhatsApp Green */
|
||||
--text-primary: #111b21;
|
||||
--text-secondary: #667781;
|
||||
--bubble-own: #d9fdd3;
|
||||
@ -15,7 +15,7 @@ body, html { margin: 0; padding: 0; height: 100%; font-family: 'Segoe UI', Robot
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar { width: 350px; background: var(--sidebar-bg); display: flex; flex-direction: column; border-right: 1px solid #d1d7db; }
|
||||
.sidebar-header { padding: 15px; background: #f0f2f5; display: flex; align-items: center; border-bottom: 1px solid #d1d7db; font-weight: bold; color: var(--text-primary); }
|
||||
.sidebar-header { padding: 15px; background: #f0f2f5; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #d1d7db; font-weight: bold; color: var(--text-primary); }
|
||||
.sidebar-search { padding: 10px; background: #ffffff; }
|
||||
.sidebar-search input { width: 90%; padding: 8px 15px; border-radius: 8px; border: 1px solid #e9edef; background: #f0f2f5; outline: none; }
|
||||
.conversation-list { flex: 1; overflow-y: auto; background: white; }
|
||||
@ -35,3 +35,11 @@ body, html { margin: 0; padding: 0; height: 100%; font-family: 'Segoe UI', Robot
|
||||
.input-area { padding: 12px 20px; background: #f0f2f5; display: flex; align-items: center; gap: 10px; }
|
||||
.input-area input { flex: 1; padding: 12px 15px; border-radius: 8px; border: none; outline: none; box-shadow: 0 1px 1px rgba(0,0,0,0.1); }
|
||||
.input-area button { padding: 10px 20px; background: var(--accent-color); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; }
|
||||
.emoji-btn { padding: 5px; cursor: pointer; font-size: 24px; color: var(--text-secondary); }
|
||||
|
||||
/* Modal */
|
||||
.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); }
|
||||
.modal-content h3 { margin-top: 0; }
|
||||
.modal-content select, .modal-content input { width: 100%; margin: 10px 0; padding: 10px; border: 1px solid #ddd; border-radius: 6px; }
|
||||
.modal-content button { width: 100%; padding: 10px; background: var(--accent-color); color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; }
|
||||
BIN
assets/pasted-20260318-065437-0e0705ef.png
Normal file
BIN
assets/pasted-20260318-065437-0e0705ef.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
BIN
assets/pasted-20260318-065650-b2c085ec.png
Normal file
BIN
assets/pasted-20260318-065650-b2c085ec.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
assets/pasted-20260318-070456-0b19dd0a.png
Normal file
BIN
assets/pasted-20260318-070456-0b19dd0a.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
assets/pasted-20260318-070832-1579c7cf.png
Normal file
BIN
assets/pasted-20260318-070832-1579c7cf.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
assets/pasted-20260318-071152-920a831c.png
Normal file
BIN
assets/pasted-20260318-071152-920a831c.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
assets/pasted-20260318-072035-8a0b6464.png
Normal file
BIN
assets/pasted-20260318-072035-8a0b6464.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
172
index.php
172
index.php
@ -1,45 +1,183 @@
|
||||
<?php session_start(); if (!isset($_SESSION["is_logged_in"]) || !$_SESSION["is_logged_in"]) { header("Location: /login.php"); exit; } ?>
|
||||
<?php session_start(); ?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>WhatsApp 风格聊天</title>
|
||||
<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">
|
||||
<!-- Sidebar -->
|
||||
<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="搜索或开始新聊天">
|
||||
<input type="text" placeholder="搜索">
|
||||
</div>
|
||||
<div class="conversation-list">
|
||||
<div class="conversation-item">
|
||||
<div class="conversation-list" id="convList">
|
||||
<div class="conversation-item" onclick="selectConversation('+86 13800138000')">
|
||||
<div class="conv-info">
|
||||
<h4>13800138000</h4>
|
||||
<h4>+86 13800138000</h4>
|
||||
<p>你好，请问在吗？</p>
|
||||
</div>
|
||||
<span class="delete-btn" onclick="event.stopPropagation(); deleteConversation(this)">删除</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chat Panel -->
|
||||
<div class="chat-panel">
|
||||
<div class="chat-header">
|
||||
13800138000
|
||||
<div class="chat-header" id="chatHeader">
|
||||
请开启会话
|
||||
</div>
|
||||
<div class="message-list">
|
||||
<div class="message msg-other">你好，请问在吗？</div>
|
||||
<div class="message msg-me">您好，请问有什么可以帮您？</div>
|
||||
<div class="message-list" id="messageList">
|
||||
<div class="message msg-other">欢迎使用金融智能通信平台。</div>
|
||||
</div>
|
||||
<div class="input-area">
|
||||
<input type="text" placeholder="输入消息...">
|
||||
<button>发送</button>
|
||||
<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>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user