121212

Autosave: 20260318-152931
Autosave: 20260318-133151
2026-03-18 15:58:47 +00:00 · 2026-03-18 15:29:32 +00:00 · 2026-03-18 13:31:51 +00:00 · 2026-03-18 13:01:18 +00:00 · 2026-03-18 12:58:28 +00:00 · 2026-03-18 12:17:47 +00:00
34 changed files with 1124 additions and 554 deletions
--- a/admin.php
+++ b/admin.php
@ -0,0 +1,189 @@
 <?php
 session_start();
 if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] !== true) {
    header('Location: login.php');
    exit;
 }
 ?>
 <!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/css/custom.css?v=<?= time() ?>" rel="stylesheet">
 </head>
 <body data-page="admin">
  <div class="app-admin">
    <header class="topbar">
      <div class="brand">
        <div class="brand-logo" style="width: 40px; height: 40px; background: #25D366; color: white; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-weight: bold; font-size: 1.2rem;">S</div>
        <div>
          <div class="fs-5 fw-bold text-white">SMS后台管理</div>
        </div>
      </div>
      <div class="meta d-flex align-items-center gap-3">
        <span class="status-pill text-white"><small>● 系统正常运行</small></span>
        <span class="text-white">管理员：Admin</span>
        <a class="btn btn-sm btn-outline-light" href="logout.php">退出登录</a>
      </div>
    </header>
    <main class="admin-shell">
      <aside class="admin-sidebar">
        <nav class="nav flex-column gap-1">
          <a class="nav-link active" href="#" data-section-link="dashboard">📊 仪表盘</a>
          <a class="nav-link" href="#" data-section-link="contacts">👥 客户管理</a>
          <a class="nav-link" href="#" data-section-link="messages">💬 消息记录</a>
          <a class="nav-link" href="#" data-section-link="send">📤 发送短信</a>
          <a class="nav-link" href="#" data-section-link="auto">🤖 自动回复</a>
          <a class="nav-link" href="#" data-section-link="settings">⚙️ Twilio 配置</a>
          <a class="nav-link" href="#" data-section-link="system">🖥 系统设置</a>
        </nav>
      </aside>
      <section class="admin-content">
        <div class="section-card mb-4" data-section="dashboard">
          <h5 class="mb-3">📊 今日概览</h5>
          <div class="row g-3">
            <div class="col-md-4">
              <div class="stat-card">
                <div class="text-muted small">今日发送数量</div>
                <div class="fs-3 fw-bold mt-1" data-stat="sent">0</div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="stat-card">
                <div class="text-muted small">今日接收数量</div>
                <div class="fs-3 fw-bold mt-1" data-stat="received">0</div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="stat-card">
                <div class="text-muted small">活跃客户数</div>
                <div class="fs-3 fw-bold mt-1" data-stat="active">0</div>
              </div>
            </div>
          </div>
        </div>
        <div class="section-card mb-4 d-none" data-section="contacts">
          <h5 class="mb-3">👥 客户管理</h5>
          <div class="table-responsive">
            <table class="table align-middle">
              <thead>
                <tr>
                  <th>手机号</th>
                  <th>标签</th>
                  <th>状态</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody data-admin-contacts></tbody>
            </table>
          </div>
        </div>
        <div class="section-card mb-4 d-none" data-section="messages">
          <h5 class="mb-3">💬 消息记录</h5>
          <div class="table-responsive">
            <table class="table align-middle">
              <thead>
                <tr>
                  <th>手机号</th>
                  <th>方向</th>
                  <th>内容</th>
                  <th>时间</th>
                </tr>
              </thead>
              <tbody data-admin-messages></tbody>
            </table>
          </div>
        </div>
        <div class="section-card mb-4 d-none" data-section="send">
          <h5 class="mb-3">📤 发送短信</h5>
          <form class="row g-3" data-send-form>
            <div class="col-md-4">
              <label class="form-label">手机号</label>
              <input class="form-control" name="phone" placeholder="+86 138 0013 8000" required>
            </div>
            <div class="col-md-8">
              <label class="form-label">短信内容</label>
              <input class="form-control" name="body" placeholder="输入要发送的内容" required>
            </div>
            <div class="col-12">
              <button class="btn btn-success px-4" type="submit">发送短信</button>
            </div>
          </form>
        </div>
        <div class="section-card mb-4 d-none" data-section="auto">
          <h5 class="mb-3">🤖 自动回复规则</h5>
          <form class="row g-3 mb-4" data-reply-form>
            <div class="col-md-4">
              <label class="form-label">关键词</label>
              <input class="form-control" name="keyword" required>
            </div>
            <div class="col-md-8">
              <label class="form-label">回复内容</label>
              <input class="form-control" name="reply" required>
            </div>
            <div class="col-12">
              <button class="btn btn-success px-4" type="submit">添加规则</button>
            </div>
          </form>
          <ul class="list-group" data-reply-list></ul>
        </div>
        <div class="section-card mb-4 d-none" data-section="settings">
          <h5 class="mb-3">⚙️ Twilio 配置</h5>
          <form class="row g-3" data-settings-form>
            <div class="col-md-4">
              <label class="form-label">Account SID</label>
              <input class="form-control" name="sid" placeholder="ACxxxxxxxx">
            </div>
            <div class="col-md-4">
              <label class="form-label">Auth Token</label>
              <input class="form-control" name="token" placeholder="••••••••">
            </div>
            <div class="col-md-4">
              <label class="form-label">From 号码</label>
              <input class="form-control" name="from" placeholder="+14155550199">
            </div>
            <div class="col-12">
              <label class="form-label">Webhook 地址</label>
              <input class="form-control" name="webhook" placeholder="https://your-domain.com/twilio/webhook">
            </div>
            <div class="col-12">
              <button class="btn btn-success px-4" type="submit">保存配置</button>
            </div>
          </form>
        </div>
        <div class="section-card d-none" data-section="system">
          <h5 class="mb-3">🖥 系统设置</h5>
          <form class="row g-3" data-system-form>
            <div class="col-md-4">
              <label class="form-label">刷新频率（秒）</label>
              <input class="form-control" name="refresh_interval" value="3">
            </div>
            <div class="col-md-4">
              <label class="form-label">管理员名称</label>
              <input class="form-control" name="admin_name" value="Admin">
            </div>
            <div class="col-12">
              <button class="btn btn-success px-4" type="submit">保存设置</button>
            </div>
          </form>
        </div>
      </section>
    </main>
  </div>
  <div class="toast-container"></div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" defer></script>
  <script src="assets/js/main.js?v=<?= time() ?>" defer></script>
 </body>
 </html>
--- a/api/_bootstrap.php
+++ b/api/_bootstrap.php
@ -0,0 +1,84 @@
 <?php
 declare(strict_types=1);
 require_once __DIR__ . '/../db/config.php';
 function json_response(array $payload): void {
  header('Content-Type: application/json; charset=utf-8');
  echo json_encode($payload, JSON_UNESCAPED_UNICODE);
  exit;
 }
 function ensure_schema(): void {
  static $done = false;
  if ($done) return;
  $pdo = db();
  $pdo->exec("
    CREATE TABLE IF NOT EXISTS contacts (
      id INT AUTO_INCREMENT PRIMARY KEY,
      phone VARCHAR(32) NOT NULL UNIQUE,
      name VARCHAR(64) NULL,
      tags VARCHAR(255) NULL,
      status ENUM('normal','blocked') DEFAULT 'normal',
      created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
      updated_at DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
    )
  ");
  $pdo->exec("
    CREATE TABLE IF NOT EXISTS messages (
      id INT AUTO_INCREMENT PRIMARY KEY,
      contact_id INT NOT NULL,
      direction ENUM('in','out') NOT NULL DEFAULT 'out',
      body TEXT NOT NULL,
      is_read TINYINT(1) DEFAULT 0,
      created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
      FOREIGN KEY (contact_id) REFERENCES contacts(id)
    )
  ");
  $pdo->exec("
    CREATE TABLE IF NOT EXISTS settings (
      id INT AUTO_INCREMENT PRIMARY KEY,
      category VARCHAR(32) NOT NULL,
      name VARCHAR(64) NOT NULL,
      value TEXT NULL,
      updated_at DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
      UNIQUE KEY unique_setting (category, name)
    )
  ");
  $pdo->exec("
    CREATE TABLE IF NOT EXISTS auto_reply (
      id INT AUTO_INCREMENT PRIMARY KEY,
      keyword VARCHAR(120) NOT NULL,
      reply TEXT NOT NULL,
      created_at DATETIME DEFAULT CURRENT_TIMESTAMP
    )
  ");
  $count = (int)$pdo->query("SELECT COUNT(*) FROM contacts")->fetchColumn();
  if ($count === 0) {
    $stmt = $pdo->prepare("INSERT INTO contacts (phone, name, tags, status) VALUES (?, ?, ?, ?)");
    $stmt->execute(['+86 138 0013 8000', '华北客户', 'VIP,续费', 'normal']);
    $stmt->execute(['+86 139 0009 1212', '深圳客户', '新线索', 'normal']);
    $stmt->execute(['+1 415 555 0198', '海外客户', '海外', 'normal']);
    $contacts = $pdo->query("SELECT id, phone FROM contacts")->fetchAll();
    $msgStmt = $pdo->prepare("INSERT INTO messages (contact_id, direction, body, is_read, created_at) VALUES (?, ?, ?, ?, ?)");
    foreach ($contacts as $contact) {
      $msgStmt->execute([$contact['id'], 'in', '您好，我想了解套餐价格。', 0, date('Y-m-d H:i:s', strtotime('-2 hours'))]);
      $msgStmt->execute([$contact['id'], 'out', '您好，这里是客服，请问您关注哪种短信套餐？', 1, date('Y-m-d H:i:s', strtotime('-90 minutes'))]);
    }
  }
  $done = true;
 }
 function read_json(): array {
  $raw = file_get_contents('php://input');
  $data = json_decode($raw, true);
  if (is_array($data)) return $data;
  return $_POST ?? [];
 }
--- a/api/auto_reply.php
+++ b/api/auto_reply.php
@ -0,0 +1,21 @@
 <?php
 declare(strict_types=1);
 require_once __DIR__ . '/_bootstrap.php';
 ensure_schema();
 $pdo = db();
 if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $input = read_json();
  $keyword = trim((string)($input['keyword'] ?? ''));
  $reply = trim((string)($input['reply'] ?? ''));
  if ($keyword === '' || $reply === '') {
    json_response(['success' => false, 'error' => 'Missing fields']);
  }
  $stmt = $pdo->prepare("INSERT INTO auto_reply (keyword, reply) VALUES (?, ?)");
  $stmt->execute([$keyword, $reply]);
  json_response(['success' => true]);
 }
 $rules = $pdo->query("SELECT id, keyword, reply, created_at FROM auto_reply ORDER BY created_at DESC")->fetchAll();
 json_response(['rules' => $rules]);
--- a/api/contacts.php
+++ b/api/contacts.php
@ -0,0 +1,77 @@
 <?php
 declare(strict_types=1);
 require_once __DIR__ . '/_bootstrap.php';
 ensure_schema();
 $pdo = db();
 if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $action = $_GET['action'] ?? '';
  $id = (int)($_GET['id'] ?? 0);
  if ($action === 'delete' && $id > 0) {
    $pdo->prepare("DELETE FROM messages WHERE contact_id = ?")->execute([$id]);
    $pdo->prepare("DELETE FROM contacts WHERE id = ?")->execute([$id]);
    json_response(['success' => true]);
  }
  if ($action === 'block' && $id > 0) {
    $pdo->prepare("UPDATE contacts SET status = 'blocked' WHERE id = ?")->execute([$id]);
    json_response(['success' => true]);
  }
  $input = read_json();
  if (empty($action)) {
    // Handle create/get contact
    $phone = $input['phone'] ?? '';
    if (empty($phone)) json_response(['success' => false, 'error' => 'Missing phone']);
    $stmt = $pdo->prepare("SELECT * FROM contacts WHERE phone = ?");
    $stmt->execute([$phone]);
    $contact = $stmt->fetch();
    if (!$contact) {
      $stmt = $pdo->prepare("INSERT INTO contacts (phone) VALUES (?)");
      $stmt->execute([$phone]);
      $id = $pdo->lastInsertId();
      $stmt = $pdo->prepare("SELECT * FROM contacts WHERE id = ?");
      $stmt->execute([$id]);
      $contact = $stmt->fetch();
    }
    json_response(['success' => true, 'contact' => $contact]);
  }
  if ($action === 'update') {
    $id = (int)($input['id'] ?? 0);
    if ($id <= 0) json_response(['success' => false, 'error' => 'Missing id']);
    $fields = [];
    $params = [];
    foreach (['name', 'tags', 'status'] as $field) {
      if (array_key_exists($field, $input)) {
        $fields[] = "$field = ?";
        $params[] = $input[$field];
      }
    }
    if (!$fields) json_response(['success' => false, 'error' => 'No changes']);
    $params[] = $id;
    $stmt = $pdo->prepare("UPDATE contacts SET " . implode(', ', $fields) . " WHERE id = ?");
    $stmt->execute($params);
    json_response(['success' => true]);
  }
  json_response(['success' => false, 'error' => 'Unknown action']);
 }
 $sql = "
  SELECT c.id, c.phone, c.name, c.tags, c.status, c.updated_at,
    (SELECT body FROM messages m WHERE m.contact_id = c.id ORDER BY m.created_at DESC LIMIT 1) AS last_message,
    (SELECT created_at FROM messages m WHERE m.contact_id = c.id ORDER BY m.created_at DESC LIMIT 1) AS last_time,
    (SELECT COUNT(*) FROM messages m WHERE m.contact_id = c.id AND m.direction = 'in' AND m.is_read = 0) AS unread_count
  FROM contacts c
  WHERE c.status != 'blocked'
  ORDER BY last_time DESC, c.updated_at DESC
 ";
 $contacts = $pdo->query($sql)->fetchAll();
 json_response(['contacts' => $contacts]);
--- a/api/messages.php
+++ b/api/messages.php
@ -0,0 +1,73 @@
 <?php
 declare(strict_types=1);
 require_once __DIR__ . '/_bootstrap.php';
 ensure_schema();
 $pdo = db();
 if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $input = read_json();
  $body = trim((string)($input['body'] ?? ''));
  if ($body === '') json_response(['success' => false, 'error' => 'Empty body']);
  $direction = $input['direction'] ?? 'out';
  $contactId = (int)($input['contact_id'] ?? 0);
  $phone = trim((string)($input['phone'] ?? ''));
  if ($contactId <= 0 && $phone === '') {
    json_response(['success' => false, 'error' => 'Missing contact']);
  }
  if ($contactId <= 0 && $phone !== '') {
    $stmt = $pdo->prepare("SELECT id FROM contacts WHERE phone = ?");
    $stmt->execute([$phone]);
    $contactId = (int)($stmt->fetchColumn() ?: 0);
    if ($contactId <= 0) {
      $insert = $pdo->prepare("INSERT INTO contacts (phone, name, tags, status) VALUES (?, ?, ?, 'normal')");
      $insert->execute([$phone, $input['name'] ?? null, $input['tags'] ?? null]);
      $contactId = (int)$pdo->lastInsertId();
    }
  }
  $stmt = $pdo->prepare("INSERT INTO messages (contact_id, direction, body, is_read) VALUES (?, ?, ?, ?)");
  $stmt->execute([$contactId, $direction, $body, $direction === 'in' ? 0 : 1]);
  json_response(['success' => true, 'contact_id' => $contactId]);
 }
 if (isset($_GET['all'])) {
  $phoneFilter = trim((string)($_GET['phone'] ?? ''));
  if ($phoneFilter !== '') {
    $stmt = $pdo->prepare("
      SELECT m.id, m.direction, m.body, m.created_at, c.phone
      FROM messages m
      JOIN contacts c ON c.id = m.contact_id
      WHERE c.phone LIKE ?
      ORDER BY m.created_at DESC
      LIMIT 200
    ");
    $stmt->execute(['%' . $phoneFilter . '%']);
    $messages = $stmt->fetchAll();
  } else {
    $messages = $pdo->query("
      SELECT m.id, m.direction, m.body, m.created_at, c.phone
      FROM messages m
      JOIN contacts c ON c.id = m.contact_id
      ORDER BY m.created_at DESC
      LIMIT 200
    ")->fetchAll();
  }
  json_response(['messages' => $messages]);
 }
 $contactId = (int)($_GET['contact_id'] ?? 0);
 if ($contactId <= 0) {
  json_response(['messages' => []]);
 }
 $stmt = $pdo->prepare("SELECT id, direction, body, created_at FROM messages WHERE contact_id = ? ORDER BY created_at ASC");
 $stmt->execute([$contactId]);
 $messages = $stmt->fetchAll();
 $pdo->prepare("UPDATE messages SET is_read = 1 WHERE contact_id = ? AND direction = 'in'")->execute([$contactId]);
 json_response(['messages' => $messages]);
--- a/api/settings.php
+++ b/api/settings.php
@ -0,0 +1,34 @@
 <?php
 declare(strict_types=1);
 require_once __DIR__ . '/_bootstrap.php';
 ensure_schema();
 $pdo = db();
 if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $input = read_json();
  $category = $input['category'] ?? 'general';
  $data = $input['data'] ?? [];
  if (!is_array($data)) {
    json_response(['success' => false, 'error' => 'Invalid data']);
  }
  $stmt = $pdo->prepare("
    INSERT INTO settings (category, name, value)
    VALUES (?, ?, ?)
    ON DUPLICATE KEY UPDATE value = VALUES(value), updated_at = CURRENT_TIMESTAMP
  ");
  foreach ($data as $key => $value) {
    $stmt->execute([$category, $key, (string)$value]);
  }
  json_response(['success' => true]);
 }
 $category = $_GET['category'] ?? 'general';
 $stmt = $pdo->prepare("SELECT name, value FROM settings WHERE category = ?");
 $stmt->execute([$category]);
 $settings = $stmt->fetchAll();
 $out = [];
 foreach ($settings as $row) {
  $out[$row['name']] = $row['value'];
 }
 json_response(['settings' => $out]);
--- a/api/stats.php
+++ b/api/stats.php
@ -0,0 +1,16 @@
 <?php
 declare(strict_types=1);
 require_once __DIR__ . '/_bootstrap.php';
 ensure_schema();
 $pdo = db();
 $sent = (int)$pdo->query("SELECT COUNT(*) FROM messages WHERE direction = 'out' AND DATE(created_at) = CURDATE()")->fetchColumn();
 $received = (int)$pdo->query("SELECT COUNT(*) FROM messages WHERE direction = 'in' AND DATE(created_at) = CURDATE()")->fetchColumn();
 $active = (int)$pdo->query("SELECT COUNT(DISTINCT contact_id) FROM messages WHERE created_at >= DATE_SUB(NOW(), INTERVAL 7 DAY)")->fetchColumn();
 json_response([
  'sent_today' => $sent,
  'received_today' => $received,
  'active_contacts' => $active,
 ]);
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@ -1,403 +1,90 @@
-body {
+/* Wrapper for Frontend */
-    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
+.app-frontend {
-    background-size: 400% 400%;
+    height: 94vh;
-    animation: gradient 15s ease infinite;
+    margin: 3vh;
    color: #212529;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    margin: 0;
    min-height: 100vh;
 }
 .main-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
 }
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
 }
 .chat-container {
    width: 100%;
    max-width: 600px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
-    height: 85vh;
+    border: 1px solid #d1d7db;
-    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
+    border-radius: 12px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
 }
-
+.app-frontend .frontend-topbar {
 .chat-header {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, 0.5);
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
 }
 .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
 }
 /* Custom Scrollbar */
 ::-webkit-scrollbar {
    width: 6px;
 }
 ::-webkit-scrollbar-track {
    background: transparent;
 }
 ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
 }
 ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
 }
 .message {
    max-width: 85%;
    padding: 0.85rem 1.1rem;
    border-radius: 16px;
    line-height: 1.5;
    font-size: 0.95rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    animation: fadeIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
 }
 .message.visitor {
    align-self: flex-end;
    background: linear-gradient(135deg, #212529 0%, #343a40 100%);
    color: #fff;
    border-bottom-right-radius: 4px;
 }
 .message.bot {
    align-self: flex-start;
    background: #ffffff;
    color: #212529;
    border-bottom-left-radius: 4px;
 }
 .chat-input-area {
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.5);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
 }
 .chat-input-area form {
    display: flex;
    gap: 0.75rem;
 }
 .chat-input-area input {
    flex: 1;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    outline: none;
    background: rgba(255, 255, 255, 0.9);
    transition: all 0.3s ease;
 }
 .chat-input-area input:focus {
    border-color: #23a6d5;
    box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.2);
 }
 .chat-input-area button {
    background: #212529;
    color: #fff;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
 }
 .chat-input-area button:hover {
    background: #000;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
 }
 /* Background Animations */
 .bg-animations {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
 }
 .blob {
    position: absolute;
    width: 500px;
    height: 500px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    filter: blur(80px);
    animation: move 20s infinite alternate cubic-bezier(0.45, 0, 0.55, 1);
 }
 .blob-1 { 
    top: -10%; 
    left: -10%; 
    background: rgba(238, 119, 82, 0.4); 
 }
 .blob-2 { 
    bottom: -10%; 
    right: -10%; 
    background: rgba(35, 166, 213, 0.4); 
    animation-delay: -7s; 
    width: 600px;
    height: 600px;
 }
 .blob-3 { 
    top: 40%; 
    left: 30%; 
    background: rgba(231, 60, 126, 0.3); 
    animation-delay: -14s; 
    width: 450px;
    height: 450px;
 }
@keyframes move {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
    33% { transform: translate(150px, 100px) rotate(120deg) scale(1.1); }
    66% { transform: translate(-50px, 200px) rotate(240deg) scale(0.9); }
    100% { transform: translate(0, 0) rotate(360deg) scale(1); }
 }
 .header-link {
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
 }
 .header-link:hover {
    background: rgba(0, 0, 0, 0.4);
    text-decoration: none;
 }
 /* Admin Styles */
 .admin-container {
    max-width: 900px;
    margin: 3rem auto;
    padding: 2.5rem;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    border: 1px solid rgba(255, 255, 255, 0.4);
    position: relative;
    z-index: 1;
 }
 .admin-container h1 {
    margin-top: 0;
    color: #212529;
    font-weight: 800;
 }
 .table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    margin-top: 1.5rem;
 }
 .table th {
    background: transparent;
    border: none;
    padding: 1rem;
    color: #6c757d;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
 }
 .table td {
    background: #fff;
    padding: 1rem;
    border: none;
 }
 .table tr td:first-child { border-radius: 12px 0 0 12px; }
 .table tr td:last-child { border-radius: 0 12px 12px 0; }
 .form-group {
    margin-bottom: 1.25rem;
 }
 .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
 }
 .form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    background: #fff;
    transition: all 0.3s ease;
    box-sizing: border-box;
 }
 .form-control:focus {
    outline: none;
    border-color: #23a6d5;
    box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.1);
 }
 .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
 }
 .header-links {
    display: flex;
    gap: 1rem;
 }
 .admin-card {
    background: rgba(255, 255, 255, 0.6);
    padding: 2rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    margin-bottom: 2.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
 }
 .admin-card h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-weight: 700;
 }
 .btn-delete {
    background: #dc3545;
    color: white;
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
 }
 .btn-add {
    background: #212529;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 1rem;
 }
 .btn-save {
    background: #0088cc;
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
-    border-radius: 12px;
+    background: #f0f2f5;
    border-bottom: 1px solid #d1d7db;
    color: #333;
    height: 60px;
 }
 .app-frontend .brand { display: flex; align-items: center; gap: 10px; font-weight: bold; }
 .app-frontend .frontend-app-shell { 
    display: flex; 
    flex: 1;
    overflow: hidden; 
    background: #fff;
 }
 .app-frontend .contacts-panel { 
    width: 350px; 
    border-right: 1px solid #d1d7db; 
    display: flex; 
    flex-direction: column;
    overflow-y: auto;
 }
 .app-frontend .contacts-search-box { padding: 10px; border-bottom: 1px solid #f0f2f5; }
 .app-frontend .contact-item { 
    display: flex; 
    align-items: center; 
    padding: 12px 15px; 
    border-bottom: 1px solid #f2f2f2;
    cursor: pointer;
-    font-weight: 600;
+    transition: background 0.2s;
    width: 100%;
    transition: all 0.3s ease;
 }
-
+.app-frontend .contact-item:hover, .app-frontend .contact-item.active { background: #f5f6f6; }
-.webhook-url {
+.app-frontend .contact-avatar { 
-    font-size: 0.85em;
+    width: 45px; 
-    color: #555;
+    height: 45px; 
-    margin-top: 0.5rem;
+    border-radius: 50%; 
    background: #00a884; 
    color: #fff; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: bold;
    margin-right: 15px;
 }
-
+.app-frontend .contact-info { flex: 1; overflow: hidden; }
-.history-table-container {
+.app-frontend .contact-actions { cursor: pointer; color: #54656f; padding: 5px; }
-    overflow-x: auto;
+.app-frontend .chat-panel { flex: 1; background: #e5ddd5; display: flex; flex-direction: column;}
-    background: rgba(255, 255, 255, 0.4);
+.app-frontend .frontend-chat-header { 
-    padding: 1rem;
+    padding: 10px 15px; 
-    border-radius: 12px;
+    background: #f0f2f5; 
-    border: 1px solid rgba(255, 255, 255, 0.3);
+    display: flex; 
    align-items: center;
    border-bottom: 1px solid #d1d7db;
 }
 .app-frontend .frontend-chat-body { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column;}
 .app-frontend .frontend-chat-input-wrapper { padding: 10px; background: #f0f2f5; }
-.history-table {
+/* Message Bubble */
-    width: 100%;
+.message-bubble {
-}
+    position: relative;
-
+    padding: 8px 12px;
 .history-table-time {
    width: 15%;
    white-space: nowrap;
    font-size: 0.85em;
    color: #555;
 }
 .history-table-user {
    width: 35%;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
-    padding: 8px;
+    margin-bottom: 4px;
    max-width: 70%;
    cursor: context-menu;
 }
-
+.message-bubble .msg-actions {
-.history-table-ai {
+    display: none;
-    width: 50%;
+    position: absolute;
-    background: rgba(255, 255, 255, 0.5);
+    top: 5px;
-    border-radius: 8px;
+    right: 5px;
-    padding: 8px;
+    z-index: 10;
 }
-
+.message-bubble:hover .msg-actions { display: block; }
-.no-messages {
+.msg-time { font-size: 0.7rem; color: #999; margin-top: 4px; text-align: right; }
-    text-align: center;
+.dropdown-menu { font-size: 0.9rem; }
    color: #777;
 }
--- a/assets/js/countries.js
+++ b/assets/js/countries.js
@ -0,0 +1,100 @@
 const countries = [
  { name: "阿富汗", code: "+93" },
  { name: "阿尔巴尼亚", code: "+355" },
  { name: "阿尔及利亚", code: "+213" },
  { name: "安道尔", code: "+376" },
  { name: "安哥拉", code: "+244" },
  { name: "阿根廷", code: "+54" },
  { name: "澳大利亚", code: "+61" },
  { name: "奥地利", code: "+43" },
  { name: "巴哈马", code: "+1-242" },
  { name: "巴林", code: "+973" },
  { name: "孟加拉国", code: "+880" },
  { name: "巴巴多斯", code: "+1-246" },
  { name: "白俄罗斯", code: "+375" },
  { name: "比利时", code: "+32" },
  { name: "伯利兹", code: "+501" },
  { name: "贝宁", code: "+229" },
  { name: "不丹", code: "+975" },
  { name: "玻利维亚", code: "+591" },
  { name: "波黑", code: "+387" },
  { name: "博茨瓦纳", code: "+267" },
  { name: "巴西", code: "+55" },
  { name: "文莱", code: "+673" },
  { name: "保加利亚", code: "+359" },
  { name: "柬埔寨", code: "+855" },
  { name: "喀麦隆", code: "+237" },
  { name: "加拿大", code: "+1" },
  { name: "智利", code: "+56" },
  { name: "中国", code: "+86" },
  { name: "哥伦比亚", code: "+57" },
  { name: "哥斯达黎加", code: "+506" },
  { name: "克罗地亚", code: "+385" },
  { name: "古巴", code: "+53" },
  { name: "塞浦路斯", code: "+357" },
  { name: "捷克", code: "+420" },
  { name: "丹麦", code: "+45" },
  { name: "埃及", code: "+20" },
  { name: "爱沙尼亚", code: "+372" },
  { name: "埃塞俄比亚", code: "+251" },
  { name: "芬兰", code: "+358" },
  { name: "法国", code: "+33" },
  { name: "德国", code: "+49" },
  { name: "希腊", code: "+30" },
  { name: "匈牙利", code: "+36" },
  { name: "冰岛", code: "+354" },
  { name: "印度", code: "+91" },
  { name: "印度尼西亚", code: "+62" },
  { name: "伊朗", code: "+98" },
  { name: "伊拉克", code: "+964" },
  { name: "爱尔兰", code: "+353" },
  { name: "以色列", code: "+972" },
  { name: "意大利", code: "+39" },
  { name: "日本", code: "+81" },
  { name: "约旦", code: "+962" },
  { name: "哈萨克斯坦", code: "+7" },
  { name: "肯尼亚", code: "+254" },
  { name: "科威特", code: "+965" },
  { name: "老挝", code: "+856" },
  { name: "拉脱维亚", code: "+371" },
  { name: "黎巴嫩", code: "+961" },
  { name: "利比亚", code: "+218" },
  { name: "立陶宛", code: "+370" },
  { name: "卢森堡", code: "+352" },
  { name: "马来西亚", code: "+60" },
  { name: "马尔代夫", code: "+960" },
  { name: "马耳他", code: "+356" },
  { name: "墨西哥", code: "+52" },
  { name: "摩纳哥", code: "+377" },
  { name: "蒙古", code: "+976" },
  { name: "摩洛哥", code: "+212" },
  { name: "缅甸", code: "+95" },
  { name: "尼泊尔", code: "+977" },
  { name: "荷兰", code: "+31" },
  { name: "新西兰", code: "+64" },
  { name: "尼日利亚", code: "+234" },
  { name: "朝鲜", code: "+850" },
  { name: "挪威", code: "+47" },
  { name: "巴基斯坦", code: "+92" },
  { name: "巴拿马", code: "+507" },
  { name: "秘鲁", code: "+51" },
  { name: "菲律宾", code: "+63" },
  { name: "波兰", code: "+48" },
  { name: "葡萄牙", code: "+351" },
  { name: "卡塔尔", code: "+974" },
  { name: "罗马尼亚", code: "+40" },
  { name: "俄罗斯", code: "+7" },
  { name: "沙特阿拉伯", code: "+966" },
  { name: "新加坡", code: "+65" },
  { name: "南非", code: "+27" },
  { name: "韩国", code: "+82" },
  { name: "西班牙", code: "+34" },
  { name: "瑞典", code: "+46" },
  { name: "瑞士", code: "+41" },
  { name: "泰国", code: "+66" },
  { name: "土耳其", code: "+90" },
  { name: "阿联酋", code: "+971" },
  { name: "英国", code: "+44" },
  { name: "美国", code: "+1" },
  { name: "越南", code: "+84" }
 ];
--- a/assets/js/main.js
+++ b/assets/js/main.js
@ -1,39 +1,170 @@
-document.addEventListener('DOMContentLoaded', () => {
+const apiFetch = async (url, options = {}) => {
-    const chatForm = document.getElementById('chat-form');
+  const opts = {
-    const chatInput = document.getElementById('chat-input');
+    headers: { 'Content-Type': 'application/json' },
-    const chatMessages = document.getElementById('chat-messages');
+    ...options,
  };
  if (opts.body && typeof opts.body !== 'string') {
    opts.body = JSON.stringify(opts.body);
  }
  const res = await fetch(url, opts);
  if (!res.ok) {
    throw new Error(`API error: ${res.status}`);
  }
  return res.json();
 };
-    const appendMessage = (text, sender) => {
+const initFrontend = () => {
-        const msgDiv = document.createElement('div');
+    const contactsList = document.querySelector('[data-contacts]');
-        msgDiv.classList.add('message', sender);
+    const chatForm = document.querySelector('[data-chat-form]');
-        msgDiv.textContent = text;
+    const chatInput = document.querySelector('[data-chat-input]');
-        chatMessages.appendChild(msgDiv);
+    const chatBody = document.querySelector('[data-chat-body]');
-        chatMessages.scrollTop = chatMessages.scrollHeight;
+    const chatTitle = document.querySelector('[data-chat-title]');
    const countryModal = new bootstrap.Modal(document.getElementById('countryModal'));
    // Emoji Picker
    const emojiPicker = document.querySelector('emoji-picker');
    const emojiTrigger = document.querySelector('[data-emoji-trigger]');
    if (emojiPicker && emojiTrigger) {
        emojiPicker.addEventListener('emoji-click', event => {
            chatInput.value += event.detail.unicode;
            emojiPicker.classList.add('d-none');
        });
        emojiTrigger.addEventListener('click', (e) => {
            e.stopPropagation();
            emojiPicker.classList.toggle('d-none');
        });
        document.addEventListener('click', (e) => {
            if (!emojiTrigger.contains(e.target) && !emojiPicker.contains(e.target)) {
                emojiPicker.classList.add('d-none');
            }
        });
    }
    let state = JSON.parse(localStorage.getItem('sms_state') || '{"contacts": {}, "messages": {}}');
    let currentChatPhone = null;
    const saveState = () => localStorage.setItem('sms_state', JSON.stringify(state));
    const formatTime = (ts) => new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    const renderContacts = () => {
        contactsList.innerHTML = Object.keys(state.contacts).sort((a,b) => (state.messages[b]?.slice(-1)[0]?.time || 0) - (state.messages[a]?.slice(-1)[0]?.time || 0)).map(phone => `
            <div class="contact-item ${currentChatPhone === phone ? 'active' : ''}" data-contact="${phone}">
                <div class="contact-avatar">${phone.substring(phone.length - 2)}</div>
                <div class="contact-info flex-grow-1" onclick="switchChat('${phone}')">
                    <div class="fw-bold">${phone}</div>
                    <div class="small text-muted text-truncate">${state.messages[phone]?.slice(-1)[0]?.text || ''}</div>
                </div>
                <div class="contact-actions dropstart">
                   <a class="text-secondary" data-bs-toggle="dropdown" href="#">▼</a>
                   <ul class="dropdown-menu">
                     <li><a class="dropdown-item" href="#" onclick="deleteContact('${phone}')">删除</a></li>
                     <li><a class="dropdown-item" href="#" onclick="alert('拉黑')">拉黑</a></li>
                   </ul>
                </div>
            </div>
        `).join('');
    };
-    chatForm.addEventListener('submit', async (e) => {
+    window.switchChat = (phone) => {
        currentChatPhone = phone;
        chatTitle.textContent = phone;
        chatBody.innerHTML = (state.messages[phone] || []).map((m, idx) => `
            <div class="mb-2 ${m.type === 'out' ? 'text-end' : 'text-start'}">
                <div class="message-bubble d-inline-block ${m.type === 'out' ? 'bg-success text-white' : 'bg-white'} p-2 rounded" 
                     oncontextmenu="event.preventDefault(); showMsgActions(event, '${phone}', ${idx})">
                    ${m.text}
                    <div class="msg-time">${formatTime(m.time)}</div>
                    <div class="msg-actions dropdown">
                        <a href="#" class="text-secondary" data-bs-toggle="dropdown">▼</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#" onclick="msgAction('edit', '${phone}', ${idx})">编辑</a></li>
                            <li><a class="dropdown-item" href="#" onclick="msgAction('delete', '${phone}', ${idx})">删除</a></li>
                            <li><a class="dropdown-item" href="#" onclick="msgAction('recall', '${phone}', ${idx})">撤回</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        `).join('');
        renderContacts();
    };
    window.showMsgActions = (e, phone, idx) => {
        const bubble = e.currentTarget;
        const dropdown = bubble.querySelector('.dropdown-toggle') || bubble.querySelector('[data-bs-toggle="dropdown"]');
        if (dropdown) {
            const bsDropdown = new bootstrap.Dropdown(dropdown);
            bsDropdown.show();
        }
    };
    window.msgAction = (action, phone, idx) => {
        if (action === 'delete' || action === 'recall') {
            state.messages[phone].splice(idx, 1);
        } else if (action === 'edit') {
            const newText = prompt('编辑消息:', state.messages[phone][idx].text);
            if (newText) state.messages[phone][idx].text = newText;
        }
        saveState();
        switchChat(phone);
    };
    window.deleteContact = (phone) => {
        delete state.contacts[phone];
        delete state.messages[phone];
        if (currentChatPhone === phone) {
            currentChatPhone = null;
            chatTitle.textContent = '请选择联系人';
            chatBody.innerHTML = '';
        }
        saveState();
        renderContacts();
    };
    const selectedCode = document.getElementById('selectedCode');
    const phoneNumber = document.getElementById('phoneNumber');
    document.getElementById('startChat').addEventListener('click', () => {
        if (!phoneNumber.value) return;
        const phone = selectedCode.textContent + phoneNumber.value;
        if (!state.contacts[phone]) {
            state.contacts[phone] = { created: Date.now() };
            state.messages[phone] = [];
        }
        currentChatPhone = phone;
        saveState();
        renderContacts();
        switchChat(phone);
        countryModal.hide();
    });
    chatForm.addEventListener('submit', (e) => {
        e.preventDefault();
-        const message = chatInput.value.trim();
+        if(!currentChatPhone || !chatInput.value) return;
-        if (!message) return;
+        const msg = { type: 'out', text: chatInput.value, time: Date.now() };
-
+        state.messages[currentChatPhone].push(msg);
-        appendMessage(message, 'visitor');
+        saveState();
        chatInput.value = '';
        switchChat(currentChatPhone);
        apiFetch('/api/messages.php', { method: 'POST', body: { phone: currentChatPhone, body: msg.text, direction: 'out' } }).catch(() => {});
    });
-        try {
+    document.addEventListener('keydown', (e) => {
-            const response = await fetch('api/chat.php', {
+        if (e.key === 'Escape') {
-                method: 'POST',
+            currentChatPhone = null;
-                headers: { 'Content-Type': 'application/json' },
+            chatTitle.textContent = '请选择联系人';
-                body: JSON.stringify({ message })
+            chatBody.innerHTML = '';
-            });
+            renderContacts();
            const data = await response.json();
            // Artificial delay for realism
            setTimeout(() => {
                appendMessage(data.reply, 'bot');
            }, 500);
        } catch (error) {
            console.error('Error:', error);
            appendMessage("Sorry, something went wrong. Please try again.", 'bot');
        }
    });
-});
+
    renderContacts();
 };
 document.addEventListener('DOMContentLoaded', () => {
  if (document.body.dataset.page === 'agent') initFrontend();
 });
--- a/assets/pasted-20260318-114609-f43679b2.png
+++ b/assets/pasted-20260318-114609-f43679b2.png
--- a/assets/pasted-20260318-115351-9232ce20.png
+++ b/assets/pasted-20260318-115351-9232ce20.png
--- a/assets/pasted-20260318-120057-dbde59ee.png
+++ b/assets/pasted-20260318-120057-dbde59ee.png
--- a/assets/pasted-20260318-120348-619c1f5d.png
+++ b/assets/pasted-20260318-120348-619c1f5d.png
--- a/assets/pasted-20260318-121747-861d2826.jpg
+++ b/assets/pasted-20260318-121747-861d2826.jpg
--- a/assets/pasted-20260318-123211-3052cf71.png
+++ b/assets/pasted-20260318-123211-3052cf71.png
--- a/assets/pasted-20260318-124350-8aaa8877.png
+++ b/assets/pasted-20260318-124350-8aaa8877.png
--- a/assets/pasted-20260318-125312-3a4fc27c.png
+++ b/assets/pasted-20260318-125312-3a4fc27c.png
--- a/assets/pasted-20260318-125453-4f08e00a.png
+++ b/assets/pasted-20260318-125453-4f08e00a.png
--- a/assets/pasted-20260318-125827-89cc6372.png
+++ b/assets/pasted-20260318-125827-89cc6372.png
--- a/assets/pasted-20260318-130451-33711195.png
+++ b/assets/pasted-20260318-130451-33711195.png
--- a/assets/pasted-20260318-132245-b6b02e61.png
+++ b/assets/pasted-20260318-132245-b6b02e61.png
--- a/assets/pasted-20260318-133548-068e767a.png
+++ b/assets/pasted-20260318-133548-068e767a.png
--- a/assets/pasted-20260318-133754-9e79eb96.png
+++ b/assets/pasted-20260318-133754-9e79eb96.png
--- a/assets/pasted-20260318-134030-9f06e8f9.png
+++ b/assets/pasted-20260318-134030-9f06e8f9.png
--- a/assets/pasted-20260318-134348-b5f1b3ad.png
+++ b/assets/pasted-20260318-134348-b5f1b3ad.png
--- a/assets/pasted-20260318-151658-a33090bb.png
+++ b/assets/pasted-20260318-151658-a33090bb.png
--- a/assets/pasted-20260318-152545-838ae9af.png
+++ b/assets/pasted-20260318-152545-838ae9af.png
--- a/db/migrations/001_create_tables.sql
+++ b/db/migrations/001_create_tables.sql
@ -0,0 +1,31 @@
 -- 客户信息表
 CREATE TABLE IF NOT EXISTS customers (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    phone VARCHAR(20) NOT NULL UNIQUE,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
 );
 -- 消息记录表
 CREATE TABLE IF NOT EXISTS messages (
    id INT AUTO_INCREMENT PRIMARY KEY,
    customer_id INT,
    direction ENUM('inbound', 'outbound') NOT NULL,
    content TEXT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (customer_id) REFERENCES customers(id)
 );
 -- Twilio 和系统配置表
 CREATE TABLE IF NOT EXISTS settings (
    key_name VARCHAR(50) PRIMARY KEY,
    key_value TEXT
 );
 -- 自动回复设置
 CREATE TABLE IF NOT EXISTS auto_replies (
    id INT AUTO_INCREMENT PRIMARY KEY,
    keyword VARCHAR(255),
    response_text TEXT,
    is_active BOOLEAN DEFAULT TRUE
 );
--- a/db/migrations/run.php
+++ b/db/migrations/run.php
@ -0,0 +1,6 @@
 <?php
 require_once __DIR__ . '/../config.php';
 $pdo = db();
 $sql = file_get_contents(__DIR__ . '/001_create_tables.sql');
 $pdo->exec($sql);
 echo "Migration completed.\n";
--- a/index.php
+++ b/index.php
@ -3,148 +3,108 @@ declare(strict_types=1);
@ini_set('display_errors', '1');
@error_reporting(E_ALL);
@date_default_timezone_set('UTC');
 $phpVersion = PHP_VERSION;
 $now = date('Y-m-d H:i:s');
 ?>
 <!doctype html>
-<html lang="en">
+<html lang="zh-CN">
 <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>New Style</title>
+  <title>SMS短信平台</title>
-<?php
+  <link rel="icon" href="assets/pasted-20260318-121747-861d2826.jpg" type="image/jpeg" />
-// Read project preview data from environment
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
-$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
+  <link href="https://cdn.jsdelivr.net/npm/emoji-picker-element@1.18.10/dist/index.css" rel="stylesheet">
-$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
+  <link href="assets/css/custom.css?v=<?= time() ?>" rel="stylesheet">
 ?>
 <?php if ($projectDescription): ?>
  <!-- Meta description -->
  <meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
  <!-- Open Graph meta tags -->
  <meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
  <!-- Twitter meta tags -->
  <meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
 <?php endif; ?>
 <?php if ($projectImageUrl): ?>
  <!-- Open Graph image -->
  <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
  <!-- Twitter image -->
  <meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
 <?php endif; ?>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --bg-color-start: #6a11cb;
      --bg-color-end: #2575fc;
      --text-color: #ffffff;
      --card-bg-color: rgba(255, 255, 255, 0.01);
      --card-border-color: rgba(255, 255, 255, 0.1);
    }
    body {
      margin: 0;
      font-family: 'Inter', sans-serif;
      background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
      color: var(--text-color);
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      text-align: center;
      overflow: hidden;
      position: relative;
    }
    body::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
      animation: bg-pan 20s linear infinite;
      z-index: -1;
    }
    @keyframes bg-pan {
      0% { background-position: 0% 0%; }
      100% { background-position: 100% 100%; }
    }
    main {
      padding: 2rem;
    }
    .card {
      background: var(--card-bg-color);
      border: 1px solid var(--card-border-color);
      border-radius: 16px;
      padding: 2rem;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
    }
    .loader {
      margin: 1.25rem auto 1.25rem;
      width: 48px;
      height: 48px;
      border: 3px solid rgba(255, 255, 255, 0.25);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    @keyframes spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    .hint {
      opacity: 0.9;
    }
    .sr-only {
      position: absolute;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap; border: 0;
    }
    h1 {
      font-size: 3rem;
      font-weight: 700;
      margin: 0 0 1rem;
      letter-spacing: -1px;
    }
    p {
      margin: 0.5rem 0;
      font-size: 1.1rem;
    }
    code {
      background: rgba(0,0,0,0.2);
      padding: 2px 6px;
      border-radius: 4px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }
    footer {
      position: absolute;
      bottom: 1rem;
      font-size: 0.8rem;
      opacity: 0.7;
    }
  </style>
 </head>
-<body>
+<body data-page="agent">
-  <main>
+  <div class="app-frontend">
-    <div class="card">
+    <header class="frontend-topbar">
-      <h1>Analyzing your requirements and generating your website…</h1>
+      <div class="brand">
-      <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
+        <img src="assets/pasted-20260318-121747-861d2826.jpg" alt="logo" style="width: 40px; height: 40px; border-radius: 50%; object-fit: cover;" />
-        <span class="sr-only">Loading…</span>
+        SMS短信平台
      </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="frontend-app-shell">
      <section class="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="chat-panel">
        <div class="frontend-chat-header">
          <div>
            <div class="fw-semibold" data-chat-title>请选择联系人</div>
            <div class="small muted" data-chat-meta>状态</div>
          </div>
        </div>
        <div class="frontend-chat-body" data-chat-body></div>
        <div class="frontend-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>
  </div>
  <!-- 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>
      <p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
      <p class="hint">This page will update automatically as the plan is implemented.</p>
      <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
    </div>
-  </main>
+  </div>
-  <footer>
+
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
+  <div class="modal fade" id="settingsModal" tabindex="-1">
-  </footer>
+    <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=<?= time() ?>" defer></script>
  <script src="assets/js/main.js?v=<?= time() ?>" defer></script>
 </body>
-</html>
+</html>
--- a/login.php
+++ b/login.php
@ -0,0 +1,47 @@
 <?php
 session_start();
 if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = $_POST['username'] ?? '';
    $password = $_POST['password'] ?? '';
    // 默认账号密码设置：admin / admin123
    // 后续建议移动到环境变量或数据库加密存储
    if ($username === 'admin' && $password === 'admin123') { 
        $_SESSION['loggedin'] = true;
        $_SESSION['username'] = $username;
        header('Location: admin.php');
        exit;
    } else {
        $error = '账号或密码错误';
    }
 }
 ?>
 <!doctype html>
 <html lang="zh-CN">
 <head>
  <meta charset="utf-8">
  <title>登录 - 管理后台</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body { height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa; }
    .login-card { width: 100%; max-width: 400px; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
  </style>
 </head>
 <body>
  <div class="login-card">
    <h4 class="mb-3">后台登录</h4>
    <?php if (isset($error)): ?><div class="alert alert-danger"><?= htmlspecialchars($error) ?></div><?php endif; ?>
    <form method="POST">
      <div class="mb-3">
        <label class="form-label">账号</label>
        <input type="text" name="username" class="form-control" required>
      </div>
      <div class="mb-3">
        <label class="form-label">密码</label>
        <input type="password" name="password" class="form-control" required>
      </div>
      <button type="submit" class="btn btn-primary w-100">登入</button>
    </form>
  </div>
 </body>
 </html>
--- a/logout.php
+++ b/logout.php
@ -0,0 +1,5 @@
 <?php
 session_start();
 session_destroy();
 header('Location: login.php');
 exit;
--- a/output.html
+++ b/output.html
@ -0,0 +1,109 @@
 <!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>
 </body></html>
Author	SHA1	Message	Date
Flatlogic Bot	45c2a22040	121212	2026-03-18 15:58:47 +00:00
Flatlogic Bot	ba0aeb359f	Autosave: 20260318-152931	2026-03-18 15:29:32 +00:00
Flatlogic Bot	678400ba66	Autosave: 20260318-133151	2026-03-18 13:31:51 +00:00
Flatlogic Bot	adaa57d3e7	123	2026-03-18 13:01:18 +00:00
Flatlogic Bot	d37073fd7d	Autosave: 20260318-125828	2026-03-18 12:58:28 +00:00
Flatlogic Bot	052aa7cf4a	Autosave: 20260318-121747	2026-03-18 12:17:47 +00:00