<?php
// 处理表单提交（PRG模式的POST部分）
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // 验证标题和内容不为空
    if (!empty($_POST['title']) && !empty($_POST['content'])) {
        $title = htmlspecialchars($_POST['title'], ENT_QUOTES, 'UTF-8');
        $content = htmlspecialchars($_POST['content'], ENT_QUOTES, 'UTF-8');

        // 写入文件
        $file = fopen('data.txt', 'a');
        fwrite($file, "[" . date('Y-m-d H:i:s') . "] 标题: " . $title . PHP_EOL);
        fwrite($file, "内容: " . $content . PHP_EOL . PHP_EOL);
        fclose($file);

        // 存储成功消息到会话
        session_start();
        $_SESSION['success_message'] = "内容已成功保存！";

        // 重定向到当前页面（PRG模式的REDIRECT部分）
        header("Location: " . $_SERVER['PHP_SELF']);
        exit;
    }
}

// 读取文本内容（PRG模式的GET部分）
session_start();
$successMessage = isset($_SESSION['success_message']) ? $_SESSION['success_message'] : '';
unset($_SESSION['success_message']); // 清除会话消息

$textContent = file_exists('data.txt') ? file_get_contents('data.txt') : '暂无内容';
$records = explode("\n\n", $textContent);
// 反转记录数组，使最新记录显示在最上面
$records = array_reverse($records);
?>

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 删除标题，这里留空 -->
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 全局变量与重置 */
        :root {
            /* 浅色模式变量 */
            --primary-light: #ffffff;
            --secondary-light: #ffffff;
            --accent-light: #ffffff;
            --dark-light: #0a0a12;
            --darker-light: #050509;
            --text-light: #e0e0ff;
            --text-secondary-light: #a0a0c0;
            --blue-light: #007bff;
            --orange-light: #ff6b00;

            /* 深色模式变量 */
            --primary-dark: #000000;
            --secondary-dark: #000000;
            --accent-dark: #000000;
            --dark-dark: #ffffff;
            --darker-dark: #f5f5f5;
            --text-dark: #101010;
            --text-secondary-dark: #303030;
            --blue-dark: #0056b3;
            --orange-dark: #cc5600;

            /* 默认使用浅色模式 */
            --primary: var(--primary-light);
            --secondary: var(--secondary-light);
            --accent: var(--accent-light);
            --dark: var(--dark-light);
            --darker: var(--darker-light);
            --text: var(--text-light);
            --text-secondary: var(--text-secondary-light);
            --blue: var(--orange-light);
            --orange: var(--orange-light);
        }

        /* 深色模式类 */
        .dark-mode {
            --primary: var(--primary-dark);
            --secondary: var(--secondary-dark);
            --accent: var(--accent-dark);
            --dark: var(--dark-dark);
            --darker: var(--darker-dark);
            --text: var(--text-dark);
            --text-secondary: var(--text-secondary-dark);
            --blue: var(--orange-dark);
            --orange: var(--orange-dark);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Poppins', system-ui, -apple-system, sans-serif;
        }

        body {
            background: var(--darker);
            color: var(--text);
            overflow-x: hidden;
            line-height: 1.6;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container {
            background: rgba(255, 255, 255, 0.2);
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.4s ease;
            width: 90%;
            max-width: 1200px;
        }

        /* 新增：头像和标题区域样式 */
        .header {
            display: flex;
            align-items: center;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 20px; /* 增大圆角 */
            padding: 10px;
            margin-bottom: 20px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            width: fit-content; /* 让宽度只覆盖内容 */
            animation: float 3s ease-in-out infinite; /* 添加浮动动画 */
            justify-content: center; /* 让图片居中 */
            margin: 0 auto 20px; /* 让整个区域居中 */
        }

        /* 新增：头像样式 */
        .avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--primary);
        }

        @keyframes float {
            0% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-10px);
            }
            100% {
                transform: translateY(0px);
            }
        }

        .message {
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
            background-color: rgba(255, 255, 255, 0.1);
            color: var(--primary);
            border: 1px solid var(--primary);
        }

        form {
            margin-bottom: 20px;
        }

        input[type="text"],
        textarea {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            background: rgba(30, 30, 40, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            color: var(--text);
            font-size: 1rem;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
        }

        input[type="text"]:focus,
        textarea:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 10px var(--primary);
        }

        button {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.8rem 1.5rem;
            background: rgba(255, 255, 255, 0.1);
            color: var(--primary);
            border: 1px solid var(--primary);
            border-radius: 50px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
        }

        button:hover {
            background: var(--primary);
            color: var(--dark);
            box-shadow: 0 0 20px var(--primary);
        }

        button:active {
            transform: scale(0.95); 
            background-color: var(--orange); 
            border-color: var(--orange); 
            color: var(--primary); 
        }

        .content-area {
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 15px;
            margin-top: 20px;
            border-radius: 4px;
            backdrop-filter: blur(10px);
        }

        details {
            margin-bottom: 10px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 10px;
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.1);
        }

        summary {
            cursor: pointer;
            font-weight: bold;
            color: var(--primary);
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .copy-button {
            background-color: rgba(255, 255, 255, 0.1);
            margin-top: 10px;
        }

        pre {
            color: var(--text);
        }

        /* 为时间戳和标题添加椭圆圈 */
        .timestamp {
            background: rgba(255, 255, 255, 0.1);
            padding: 5px 10px;
            border-radius: 50px; /* 实现椭圆效果 */
            display: inline-block;
            border: 1px solid var(--primary);
        }

        .title {
            background: rgba(255, 255, 255, 0.1);
            padding: 5px 10px;
            border-radius: 50px; /* 实现椭圆效果 */
            display: inline-block;
            border: 1px solid var(--primary);
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 新增：头像和标题区域 -->
        <div class="header">
            <!-- 替换为你的头像URL -->
            <img class="avatar" src="https://i.postimg.cc/R006Jm0V/ggggggg.jpg" alt="Avatar">
            <!-- 删除标题 -->
        </div>

        <!-- 显示成功消息 -->
        <?php if ($successMessage): ?>
            <div class="message"><?php echo $successMessage; ?></div>
        <?php endif; ?>

        <!-- 提交表单 -->
        <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
            <input type="text" name="title" placeholder="输入标题..." required>
            <textarea name="content" rows="5" placeholder="输入内容..." required></textarea>
            <button type="submit">帮我记一下</button>
        </form>

        <!-- 显示文本内容 -->
        <div class="content-area">
            <h3>已记住内容：</h3>
            <?php
            if ($textContent === '暂无内容') {
                echo '<pre>暂无内容</pre>';
            } else {
                foreach ($records as $index => $record) {
                    if (trim($record) !== '') {
                        $lines = explode("\n", $record);
                        $timestampAndTitle = $lines[0];
                        $content = implode("\n", array_slice($lines, 1));
                        // 去除内容开头的 "内容: "
                        $content = substr($content, strlen("内容: "));
                        // 分离时间戳和标题
                        preg_match('/\[(.*?)\] 标题: (.*)/', $timestampAndTitle, $matches);
                        $timestamp = $matches[1];
                        $title = $matches[2];
                        echo '<details>';
                        echo '<summary>';
                        echo '<span class="timestamp">[' . htmlspecialchars($timestamp) . ']</span>';
                        echo '<span class="title">标题: ' . htmlspecialchars($title) . '</span>';
                        echo '</summary>';
                        echo '<button class="copy-button" onclick="copyContent(\'' . addslashes($content) . '\')">复制</button>';
                        echo '<pre id="content-' . $index . '">' . htmlspecialchars($content) . '</pre>';
                        echo '</details>';
                    }
                }
            }
            ?>
        </div>
    </div>
    <script>
        function copyContent(content) {
            var tempTextArea = document.createElement('textarea');
            tempTextArea.value = content;
            document.body.appendChild(tempTextArea);
            tempTextArea.select();
            document.execCommand('copy');
            document.body.removeChild(tempTextArea);
        }
    </script>
</body>

</html>