#fffygv
个人信息
<！doctype >脚本
</超文本标记语言="zh">
>头<
元字符集<="UTF-8"/>
元< 姓名="视口" 内容="宽度=设备宽度，初始比例=1.0" />
>标题<ReedyLotup的个人空间>标题</
<! -- 全局样式 -->
链接rel<="样式表"href="css/style.css"/>
<! -- 各页面样式 -->
链接rel<="样式表"href="css/home.css"/>
链接rel<="样式表"href="css/login.css"/>
链接rel<="样式表"href="css/content.css"/>
链接rel<="样式表"href="css/game.css"/>
</头>
>身体<
div班级<="卡"身份标识="应用程序">
<< >--各页面通过JS动态加载--
div身份标识<="PageContainer">>div</
>div</

>！--JavaScript模块--<
剧本src<="js/router.js">>脚本</
剧本src<="js/auth.js">>脚本</
剧本src<="js/content.js">>脚本</
剧本src<="js/game.js">>脚本</
剧本
        // 初始化 - 显示首页
showhome()；
</剧本>
</身体>
</超文本标记语言>* {
页边距：0；
填充：0；
框大小：边框框；
}

正文{
背景：#0b0e14；
最低高度：100vh；
显示：柔性；
对齐-内容：居中；
对齐项：居中；
font-family:system-ui，-apple-system，sans-serif；
}

.card{
背景：#1a1f2a；
填料：2.5rem2rem；
边界半径：24px；
box-shadow:020px40px rgba(0,0,0,0.6);
宽度：420px；
最大宽度：94%；
文本对齐：居中；
color：#eef2f8；
}

H1{
font-size:1.6rem；
font-weight:600；
边缘-底部：0.25rem；
}

.sub{
颜色：#8e99b0；
    font-size: 0.9rem;
    margin-bottom: 1.8rem;
}

.hidden {
    display: none !important;
}

.btn {
    width: 100%;
    background: #5a7aff;
    border: none;
    border-radius: 12px;
    padding: 0.8rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 0.2rem;
}

.btn:hover {
    background: #4a66e0;
}

.btn-secondary {
    background: transparent;
    color: #8e99b0;
    font-size: 0.85rem;
    margin-top: 0.6rem;
    padding: 0.4rem;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.btn-secondary:hover {
    color: #c8d0e0;
}

.error {
    color: #f87171;
    font-size: 0.85rem;
    min-height: 1.4rem;
    margin: 0.2rem 0 0.2rem;
}.home-title {
    font-size: 2.2rem;
    margin-bottom: 0.3rem;
}

.home-sub {
    color: #8e99b0;
    font-size: 1rem;
    margin-bottom: 0.3rem;
}

.home-owner {
    font-size: 2.8rem;
    font-weight: 700;
    color: #5a7aff;
    margin: 0.3rem 0 0.2rem;
    letter-spacing: 2px;
}

.home-divider {
    width: 60px;
    height: 2px;
    background: #2e3848;
    margin: 0.8rem auto;
}

.home-social {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin: 0.8rem 0 1rem;
    flex-wrap: wrap;
}

.home-social-item {
    background: #0f141e;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    border: 1px solid #2e3848;
    font-size: 0.85rem;
    color: #c8d0e0;
}

.home-social-item .label {
    color: #8e99b0;
    margin-right: 0.3rem;
}

.home-social-item .value {
    color: #ff6b6b;
    font-weight: 600;
}

.home-desc {
    color: #8e99b0;
    font-size: 0.9rem;
    margin: 0.3rem 0 0.5rem;
}

.btn-home {
    background: #5a7aff;
    border: none;
    border-radius: 12px;
    padding: 0.8rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 1.2rem;
}

.btn-home:hover {
    background: #4a66e0;
}.input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
    margin-bottom: 1.2rem;
}

.input-group label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #c8d0e0;
}

.input-group input {
    background: #0f141e;
    border: 1px solid #2e3848;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    color: #fff;
    outline: none;
    transition: 0.2s;
}

.input-group input:focus {
    border-color: #5a7aff;
    box-shadow: 0 0 0 3px rgba(90, 122, 255, 0.25);
}.avatar {
    font-size: 4rem;
    margin-bottom: 0.5rem;
}

.info-card {
    background: #0f141e;
    border-radius: 16px;
    padding: 1.2rem 1.5rem;
    margin: 1rem 0 1.2rem;
    text-align: left;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #1f2838;
}

.info-item:last-child {
    border-bottom: none;
}

.info-item .label {
    color: #8e99b0;
    font-size: 0.9rem;
}

.info-item .value {
    color: #eef2f8;
    font-weight: 500;
    font-size: 0.95rem;
}

.value.qq {
    color: #5a7aff;
    font-weight: 600;
    letter-spacing: 1px;
}

.value.kuaishou {
    color: #ff6b6b;
    font-weight: 600;
    letter-spacing: 1px;
}

.value.email {
    color: #fbbf24;
    font-weight: 500;
    font-size: 0.9rem;
}

.copy-btn {
    background: #2e3848;
    border: none;
    color: #c8d0e0;
    padding: 0.2rem 0.8rem;
    border-radius: 8px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: 0.2s;
    margin-left: 0.5rem;
    flex-shrink: 0;
}

.copy-btn:hover {
    background: #5a7aff;
    color: #fff;
}

.toast {
    color: #4ade80;
    font-size: 0.8rem;
    margin-top: 0.3rem;
    min-height: 1.2rem;
}

.btn-danger {
    background: transparent;
    color: #f87171;
    font-size: 0.85rem;
    margin-top: 0.6rem;
    padding: 0.4rem;
    border: 1px solid #f87171;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s;
    width: 100%;
}

.btn-danger:hover {
    background: #f87171;
    color: #fff;
}

.back-home-btn {
    background: transparent;
    color: #8e99b0;
    border: 1px solid #2e3848;
    border-radius: 10px;
    padding: 0.5rem 1.5rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: 0.2s;
    margin-top: 0.5rem;
}

.back-home-btn:hover {
    background: #2e3848;
    color: #eef2f8;
}

.btn-game {
    background: #f59e0b;
    border: none;
    border-radius: 12px;
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 0.5rem;
    width: 100%;
}

.btn-game:hover {
    background: #d97706;
}.game-timer {
    font-size: 3.5rem;
    font-weight: 700;
    color: #5a7aff;
    margin: 0.5rem 0;
    font-variant-numeric: tabular-nums;
}

.game-status {
    font-size: 1rem;
    color: #8e99b0;
    margin-bottom: 0.5rem;
}

.game-options {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0.8rem 0;
}

.btn-game-option {
    background: #2e3848;
    border: none;
    border-radius: 10px;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #c8d0e0;
    cursor: pointer;
    transition: 0.2s;
    flex: 1;
    min-width: 60px;
}

.btn-game-option:hover {
    background: #5a7aff;
    color: #fff;
}

.btn-game-option.active {
    background: #5a7aff;
    color: #fff;
    border: 2px solid #5a7aff;
}

.game-controls {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.btn-game-start {
    background: #22c55e;
    border: none;
    border-radius: 12px;
    padding: 0.7rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: 0.2s;
}

.btn-game-start:hover {
    background: #16a34a;
}

.btn-game-start:disabled {
    background: #4b5563;
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-game-stop {
    background: #ef4444;
    border: none;
    border-radius: 12px;
    padding: 0.7rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: 0.2s;
}

.btn-game-stop:hover {
    background: #dc2626;
}

.btn-game-stop:disabled {
    background: #4b5563;
    cursor: not-allowed;
    opacity: 0.6;
}

.game-progress {
    width: 100%;
    height: 6px;
    background: #2e3848;
    border-radius: 3px;
    margin: 0.8rem 0 0.3rem;
    overflow: hidden;
}

.game-progress-bar {
    height: 100%;
    background: #5a7aff;
    border-radius: 3px;
    width: 0%;
    transition: width 0.3s;
}

.game-result {
    font-size: 1.2rem;
    font-weight: 600;
    color: #4ade80;
    margin-top: 0.3rem;
    min-height: 2rem;
}

.btn-back-game {
    background: transparent;
    color: #8e99b0;
    border: 1px solid #2e3848;
    border-radius: 10px;
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: 0.2s;
    margin-top: 0.8rem;
}

.btn-back-game:hover {
    background: #2e3848;
    color: #eef2f8;
}<div id="homePanel">
    <div class="home-title">🚀 个人空间</div>
    <div class="home-sub">— 欢迎访问 —</div>
    <div class="home-owner">ReedyLotup</div>
    <div class="home-divider"></div>
    <div class="home-social">
        <div class="home-social-item">
            <span class="label">📱 快手</span>
            <span class="value">5055387472</span>
        </div>
    </div>
    <div class="home-desc">✨ 这是 ReedyLotup 的个人空间 ✨</div>
    <button class="btn-home" id="enterBtn">进入个人空间 →</button>
</div><!-- 登录面板 -->
<div id="loginPanel" class="hidden">
    <h1>🔐 身份验证</h1>
    <p class="sub">请输入密码进入</p>

    <div class="input-group">
        <label for="pwdInput">密码</label>
        <input type="password" id="pwdInput" placeholder="请输入密码" />
    </div>

    <div class="error" id="loginError"></div>

    <button class="btn" id="loginBtn">进入</button>
    <button class="btn-secondary" id="forgotBtn">忘记密码？</button>
    <button class="btn-secondary" id="backHomeFromLoginBtn">← 返回首页</button>
</div>

<!-- 忘记密码面板 -->
<div id="forgotPanel" class="hidden">
    <h1>🔑 找回访问</h1>
    <p class="sub">输入备用密码</p>

    <div class="input-group">
        <label for="forgotInput">备用密码</label>
        <input type="password" id="forgotInput" placeholder="请输入备用密码" />
    </div>

    <div class="error" id="forgotError"></div>

    <button class="btn" id="forgotSubmitBtn">验证</button>
    <button class="btn-secondary" id="backToLoginBtn">← 返回登录</button>
    <按钮 班级="btn-二级" 身份标识="backHomeFromForgotBtn">← 返回首页</按钮>
</div><div 身份标识="页面内容" 班级="隐藏">
    <div 班级="头像">👤</div>
    <H1>欢迎回来</H1>
    <p 班级="sub">这是我的个人信息</p>

    <div 班级="信息卡">
        <div 班级="信息-项目">
            <跨度 班级="标签">📌  昵称</跨度>
            <跨度 班级="值">ReedyLotup</跨度>
        </div>
        <div 班级="信息-项目">
            <span class="label">📧 邮箱</span>
            <span class="value email" id="emailDisplay">x1705083705@outlook.com</span>
            <按钮 班级="copy-btn" 身份标识="copyEmailBtn">复制</按钮>
        </div>
        <div 班级="信息-项目">
            <跨度 班级="标签">💬 QQ</跨度>
            <跨度 班级="值qq" 身份标识="qq显示">1705083705</跨度>
            <按钮 班级="copy-btn" 身份标识="copyQQBtn">复制</按钮>
        </div>
        <div 班级="信息-项目">
            <跨度 班级="标签">📱      快手</跨度>
            <跨度 班级="价值快手" 身份标识="快手显示">5055387472</跨度>
            <按钮 班级="copy-btn" 身份标识="copyKuaishouBtn">复制</按钮>
        </div>
        <div 班级="信息-项目">
            <跨度 班级="标签">📅 注册</跨度>
            <跨度 班级="值">2026-09-02</跨度>
        </div>
    </div>

    <按钮 班级="btn-game" 身份标识="gameBtn">🎮       穿越机小游戏</按钮>

    <div 班级="吐司" 身份标识="copyToast"></div>

    <按钮 班级="btn-危险" 身份标识="logoutBtn">🚪          退出登录</按钮>
    <按钮 班级="back-home-btn" 身份标识="backHomeFromContentBtn">🏠            返回首页</按钮>
</div><div 身份标识="GamePanel" 班级="隐藏">
    <H1>🎮   穿越机>div</
    <p 班级="sub">选择时长，开始挑战！</p>

    <div 班级="游戏状态" 身份标识="gameStatus">⏳ 请选择时长</div>

    <div 班级="游戏计时器" 身份标识="GameTimer">00:00</div>

    <div 班级="游戏进度">
        <div 班级="游戏进度栏" 身份标识="gameProgressBar"></div>
    </div>

    <div 班级="游戏结果" 身份标识="gameResult"></div>

    <div 班级="游戏选项">
        <按钮 班级="btn-game-option" 数据秒="3">三秒钟</按钮>
        <按钮 班级="btn-game-option" 数据秒="60">1分钟</按钮>
        <按钮 班级="btn-game-option" 数据秒="600">10分钟</按钮>
        <按钮 班级="btn-game-option" 数据秒="3600">1小时</按钮>
        <按钮 班级="btn-game-option" 数据秒="86400">1天</按钮>
    </div>

    <div 班级="游戏控制">
        <按钮 班级="btn-game-start" 身份标识="gameStartBtn">▶ 开始</按钮>
        <按钮 班级="btn-game-stop" 身份标识="gameStopBtn" 禁用>⏹ 停止</按钮>
    </div>

    <按钮 班级="btn-二级" 身份标识="backToContentFromGameBtn">← 返回个人空间</按钮>
</div</