灵狐简约留言本

功能特点

简洁美观的设计：采用渐变色和卡片式布局，响应式设计
无需登录：任何人都可以直接留言
数据存储：使用SQLite数据库存储留言，无需额外配置
表单验证：基本的必填字段验证
防止XSS攻击：使用htmlspecialchars过滤输出
时间显示：自动记录并显示留言时间
成功提示：提交成功后显示友好的提示信息
按钮样式特点：
- 半透明毛玻璃效果
- 圆角设计
- 悬停动画效果
- 阴影增强立体感
- 响应式布局，在小屏幕上会自动换行
位置安排：
- 按钮位于标题下方，header区域内
- 与整体设计风格协调统一
- 新增功能说明
  1. 密码保护批量删除功能：
    - 删除密码设置为 2588（代码中 $deletePassword = '2588'）
    - 每条留言前有复选框可以选择
    - 需要输入正确密码才能执行删除操作
  2. 删除界面设计：
    - 红色删除按钮，与其他操作区分
    - 密码输入框有明确标识
    - 错误提示和成功提示样式不同
  3. 安全措施：
    - 使用预处理语句防止SQL注入
    - 密码验证在服务端进行
    - 所有输出都经过htmlspecialchars过滤
  4. 用户体验：
    - 删除成功后显示删除数量

使用说明

将代码保存为index.php文件
确保PHP环境已安装SQLite扩展
上传到支持PHP的服务器即可使用
留言数据会自动存储在messages.db文件中

您可以根据需要修改样式或添加更多功能，如分页显示、留言回复等。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>灵狐简约留言本</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Helvetica Neue', Arial, sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        header {
            background: linear-gradient(135deg, #6e8efb, #a777e3);
            color: white;
            padding: 30px 20px;
            text-align: center;
            position: relative;
        }

        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }

        .subtitle {
            font-weight: 300;
            opacity: 0.9;
        }

        /* 导航按钮样式 */
        .nav-buttons {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            flex-wrap: wrap;
            gap: 10px;
        }

        .nav-button {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .nav-button:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }

        .nav-button:active {
            transform: translateY(0);
        }

        .content {
            padding: 30px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #555;
        }

        input, textarea, select {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
            transition: border 0.3s;
        }

        input:focus, textarea:focus, select:focus {
            border-color: #6e8efb;
            outline: none;
            box-shadow: 0 0 0 3px rgba(110, 142, 251, 0.1);
        }

        textarea {
            min-height: 120px;
            resize: vertical;
        }

        button, .btn {
            background: linear-gradient(135deg, #6e8efb, #a777e3);
            color: white;
            border: none;
            padding: 12px 25px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            display: inline-block;
            text-decoration: none;
            text-align: center;
        }

        button:hover, .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        }

        .btn-danger {
            background: linear-gradient(135deg, #ff6b6b, #f06595);
        }

        .messages {
            margin-top: 40px;
        }

        .message {
            background: white;
            border-left: 4px solid #6e8efb;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 0 5px 5px 0;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            position: relative;
        }

        .message-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            color: #666;
        }

        .message-name {
            font-weight: bold;
            color: #444;
        }

        .message-time {
            font-size: 0.9em;
            opacity: 0.7;
        }

        .message-content {
            color: #333;
            line-height: 1.7;
        }

        .success-message {
            background: #d4edda;
            color: #155724;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }

        .error-message {
            background: #f8d7da;
            color: #721c24;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }

        .checkbox-group {
            margin: 20px 0;
        }

        .message-checkbox {
            margin-right: 10px;
        }

        .delete-section {
            background: #fff9f9;
            padding: 20px;
            border-radius: 5px;
            margin-top: 30px;
            border: 1px solid #ffebee;
        }

        footer {
            text-align: center;
            margin-top: 40px;
            color: #777;
            font-size: 0.9em;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>灵狐简约留言本</h1>
            <p class="subtitle">留下您的宝贵意见或建议</p>

            <!-- 导航按钮 -->
            <div class="nav-buttons">
                <a href="../" class="nav-button">首页</a>
                <a href="../FMS" class="nav-button">种子站</a>
                <a href="../" class="nav-button">测试1</a>
                <a href="../" class="nav-button">测试2</a>
            </div>
        </header>

        <div class="content">
            <?php
            // 数据库配置
            $dbFile = 'messages.db';
            $deletePassword = '2588'; // 删除密码

            // 创建数据库和表（如果不存在）
            if (!file_exists($dbFile)) {
                $db = new SQLite3($dbFile);
                $db->exec('CREATE TABLE IF NOT EXISTS messages (
                    id INTEGER PRIMARY KEY AUTOINCREMENT,
                    name TEXT NOT NULL,
                    email TEXT,
                    content TEXT NOT NULL,
                    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
                )');
            } else {
                $db = new SQLite3($dbFile);
            }

            // 处理表单提交
            if ($_SERVER['REQUEST_METHOD'] === 'POST') {
                // 处理留言提交
                if (isset($_POST['submit_message'])) {
                    $name = trim($_POST['name'] ?? '');
                    $email = trim($_POST['email'] ?? '');
                    $content = trim($_POST['content'] ?? '');

                    if (!empty($name) && !empty($content)) {
                        $stmt = $db->prepare('INSERT INTO messages (name, email, content) VALUES (:name, :email, :content)');
                        $stmt->bindValue(':name', $name, SQLITE3_TEXT);
                        $stmt->bindValue(':email', $email, SQLITE3_TEXT);
                        $stmt->bindValue(':content', $content, SQLITE3_TEXT);

                        if ($stmt->execute()) {
                            echo '<div class="success-message">留言已提交，感谢您的参与！</div>';

                            // 清空POST数据，防止重复提交
                            $_POST['name'] = '';
                            $_POST['email'] = '';
                            $_POST['content'] = '';
                        }
                    }
                }

                // 处理批量删除
                if (isset($_POST['delete_messages'])) {
                    $enteredPassword = trim($_POST['delete_password'] ?? '');
                    $messageIds = $_POST['message_ids'] ?? [];

                    if ($enteredPassword === $deletePassword) {
                        if (!empty($messageIds)) {
                            // 构建IN语句
                            $placeholders = rtrim(str_repeat('?,', count($messageIds)), ',');
                            $stmt = $db->prepare("DELETE FROM messages WHERE id IN ($placeholders)");

                            // 绑定参数
                            $i = 1;
                            foreach ($messageIds as $id) {
                                $stmt->bindValue($i++, $id, SQLITE3_INTEGER);
                            }

                            if ($stmt->execute()) {
                                $count = $db->changes();
                                echo '<div class="success-message">成功删除 ' . $count . ' 条留言！</div>';
                            }
                        } else {
                            echo '<div class="error-message">请至少选择一条留言删除</div>';
                        }
                    } else {
                        echo '<div class="error-message">删除密码错误！</div>';
                    }
                }
            }

            // 获取所有留言
            $result = $db->query('SELECT * FROM messages ORDER BY created_at DESC');
            ?>

            <form method="post" action="">
                <div class="form-group">
                    <label for="name">您的姓名 *</label>
                    <input type="text" id="name" name="name" required value="<?php echo htmlspecialchars($_POST['name'] ?? ''); ?>">
                </div>

                <div class="form-group">
                    <label for="email">电子邮箱</label>
                    <input type="email" id="email" name="email" value="<?php echo htmlspecialchars($_POST['email'] ?? ''); ?>">
                </div>

                <div class="form-group">
                    <label for="content">留言内容 *</label>
                    <textarea id="content" name="content" required><?php echo htmlspecialchars($_POST['content'] ?? ''); ?></textarea>
                </div>

                <button type="submit" name="submit_message">提交留言</button>
            </form>

            <div class="messages">
                <h2>留言列表</h2>

                <form method="post" action="" id="deleteForm">
                    <?php while ($message = $result->fetchArray(SQLITE3_ASSOC)): ?>
                        <div class="message">
                            <div class="message-header">
                                <div>
                                    <input type="checkbox" name="message_ids[]" value="<?php echo $message['id']; ?>" class="message-checkbox" id="msg_<?php echo $message['id']; ?>">
                                    <label for="msg_<?php echo $message['id']; ?>" class="message-name"><?php echo htmlspecialchars($message['name']); ?></label>
                                </div>
                                <span class="message-time"><?php echo date('Y-m-d H:i', strtotime($message['created_at'])); ?></span>
                            </div>
                            <div class="message-content">
                                <?php echo nl2br(htmlspecialchars($message['content'])); ?>
                            </div>
                        </div>
                    <?php endwhile; ?>

                    <?php if ($result->fetchArray(SQLITE3_ASSOC) === false && $db->querySingle('SELECT COUNT(*) FROM messages') == 0): ?>
                        <p>暂无留言，快来留下第一条吧！</p>
                    <?php else: ?>
                        <div class="delete-section">
                            <h3>批量删除留言</h3>
                            <div class="form-group">
                                <label for="delete_password">删除密码 *</label>
                                <input type="password" id="delete_password" name="delete_password" required placeholder="请输入删除密码">
                            </div>
                            <button type="submit" name="delete_messages" class="btn btn-danger">删除所选留言</button>
                        </div>
                    <?php endif; ?>
                </form>
            </div>
        </div>
    </div>

    <footer>
        <p>© <?php echo date('Y'); ?> 灵狐简约留言本 - 无需登录即可留言</p>
    </footer>
</body>
</html>