70 lines
3.1 KiB
PHP
70 lines
3.1 KiB
PHP
<?php
|
|
declare(strict_types=1);
|
|
require_once __DIR__ . '/includes/bootstrap.php';
|
|
session_start();
|
|
?>
|
|
<!doctype html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>WhatsApp Chat</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?= time(); ?>">
|
|
</head>
|
|
<body>
|
|
<div id="chat-app" class="whatsapp-app container-fluid p-0">
|
|
<div class="sidebar">
|
|
<div class="sidebar-header">
|
|
<select id="twilio-select" class="form-select mb-2">
|
|
<!-- Dynamically populated or set by backend -->
|
|
</select>
|
|
<div class="input-group">
|
|
<input type="text" id="search-input" class="form-control" placeholder="搜索或开始新聊天...">
|
|
<button class="btn btn-light border-0" type="button" data-bs-toggle="modal" data-bs-target="#addContactModal"><i class="bi bi-plus-lg"></i></button>
|
|
</div>
|
|
</div>
|
|
<div id="conversation-list" class="flex-grow-1 overflow-auto">
|
|
<!-- Conversation list -->
|
|
</div>
|
|
</div>
|
|
<div class="chat-area">
|
|
<div class="chat-header">
|
|
<div class="flex-grow-1">
|
|
<strong id="conversation-title">请选择会话</strong>
|
|
<small id="conversation-status" class="text-muted d-block"></small>
|
|
</div>
|
|
<i class="bi bi-search me-3"></i><i class="bi bi-three-dots-vertical"></i>
|
|
</div>
|
|
<div id="message-list" class="message-list">
|
|
<!-- Messages -->
|
|
</div>
|
|
<form id="message-form" class="chat-input">
|
|
<i class="bi bi-emoji-smile fs-4 text-secondary"></i>
|
|
<input type="text" id="message-input" class="form-control" placeholder="输入消息...">
|
|
<button type="submit" class="btn btn-link text-success p-0"><i class="bi bi-send-fill fs-4"></i></button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="addContactModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<form id="add-contact-form" class="modal-content">
|
|
<div class="modal-header"><h5>添加/导入联系人</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
|
|
<div class="modal-body">
|
|
<input type="text" name="phone" class="form-control mb-2" placeholder="输入手机号">
|
|
<input type="text" name="name" class="form-control mb-2" placeholder="名字 (可选)">
|
|
<input type="file" name="contact_file" class="form-control">
|
|
</div>
|
|
<div class="modal-footer"><button type="submit" class="btn btn-success">添加并发送</button></div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="chat-alert" class="alert d-none" style="position:fixed; top:20px; right:20px; z-index:9999;"></div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="assets/js/main.js?v=<?= time(); ?>"></script>
|
|
</body>
|
|
</html>
|