SOURCE

console 命令行工具 X clear

                    
>
console
<!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: 'Arial', sans-serif;
        }

        body {
            background-color: #0a0a1a;
            color: #fff;
            min-height: 100vh;
            overflow-x: hidden;
            background-image: url('https://picsum.photos/id/1/1920/1080'); /* 背景图 */
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }

        /* 导航栏样式 */
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 5%;
            background-color: rgba(10, 10, 26, 0.8);
            backdrop-filter: blur(10px);
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 100;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: #4facfe;
        }

        .nav-links {
            display: flex;
            gap: 2rem;
        }

        .nav-links a {
            color: #fff;
            text-decoration: none;
            transition: color 0.3s;
        }

        .nav-links a:hover {
            color: #4facfe;
        }

        /* 主内容区样式 */
        .container {
            max-width: 1200px;
            margin: 8rem auto 2rem;
            padding: 0 1rem;
        }

        .game-header {
            text-align: center;
            margin-bottom: 3rem;
        }

        .game-title {
            font-size: 3rem;
            margin-bottom: 1rem;
            background: linear-gradient(90deg, #4facfe, #00f2fe);
            -webkit-background-clip: text;
            color: transparent;
        }

        .game-desc {
            font-size: 1.2rem;
            color: #ddd;
            max-width: 800px;
            margin: 0 auto;
        }

        /* 游戏展示区 */
        .game-showcase {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
            justify-content: center;
            margin-bottom: 4rem;
        }

        .game-card {
            background-color: rgba(20, 20, 40, 0.8);
            border-radius: 10px;
            width: 300px;
            overflow: hidden;
            transition: transform 0.3s;
        }

        .game-card:hover {
            transform: translateY(-5px);
        }

        .game-img {
            width: 100%;
            height: 180px;
            object-fit: cover;
        }

        .game-info {
            padding: 1.5rem;
        }

        .game-name {
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
        }

        .game-type {
            color: #4facfe;
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }

        /* 开始按钮 */
        .start-section {
            text-align: center;
            margin: 3rem 0;
        }

        .start-btn {
            padding: 1rem 3rem;
            font-size: 1.2rem;
            font-weight: bold;
            background: linear-gradient(90deg, #4facfe, #00f2fe);
            border: none;
            border-radius: 50px;
            color: #0a0a1a;
            cursor: pointer;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .start-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 0 20px rgba(79, 172, 254, 0.5);
        }

        /* 页脚 */
        footer {
            text-align: center;
            padding: 2rem;
            background-color: rgba(10, 10, 26, 0.8);
            margin-top: 3rem;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .game-title {
                font-size: 2.2rem;
            }

            .game-desc {
                font-size: 1rem;
            }

            .container {
                margin-top: 6rem;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav>
        <div class="logo">星际冒险游戏平台</div>
        <div class="nav-links">
            <a href="#">首页</a>
            <a href="#">游戏库</a>
            <a href="#">排行榜</a>
            <a href="#">关于我们</a>
        </div>
    </nav>

    <!-- 主内容区 -->
    <div class="container">
        <div class="game-header">
            <h1 class="game-title">星际冒险 - 探索未知宇宙</h1>
            <p class="game-desc">选择你的飞船,穿越星系,挑战外星生物,解锁神秘星球。在这里,每一次冒险都充满未知与惊喜!</p>
        </div>

        <!-- 游戏模式展示 -->
        <div class="game-showcase">
            <div class="game-card">
                <img src="https://picsum.photos/id/237/600/400" alt="单人模式" class="game-img">
                <div class="game-info">
                    <h3 class="game-name">单人模式</h3>
                    <p class="game-type">剧情探索 / 闯关</p>
                    <p>独自踏上星际旅程,解锁专属剧情和隐藏关卡。</p>
                </div>
            </div>
            <div class="game-card">
                <img src="https://picsum.photos/id/110/600/400" alt="多人对战" class="game-img">
                <div class="game-info">
                    <h3 class="game-name">多人对战</h3>
                    <p class="game-type">实时竞技 / 团队协作</p>
                    <p>与全球玩家组队,挑战BOSS或进行星际对战。</p>
                </div>
            </div>
            <div class="game-card">
                <img src="https://picsum.photos/id/119/600/400" alt="无尽模式" class="game-img">
                <div class="game-info">
                    <h3 class="game-name">无尽模式</h3>
                    <p class="game-type">生存挑战 / 积分排行</p>
                    <p>在无限生成的星系中生存,挑战最高积分记录。</p>
                </div>
            </div>
        </div>

        <!-- 开始游戏按钮 -->
        <div class="start-section">
            <button class="start-btn" onclick="startGame()">开始游戏</button>
        </div>
    </div>

    <!-- 页脚 -->
    <footer>
        <p>© 2023 星际冒险游戏平台 | 所有权利保留</p>
    </footer>

    <script>
        // 开始游戏函数
        function startGame() {
            alert("游戏即将开始!正在加载资源...");
            // 实际项目中可替换为跳转游戏页面的逻辑
            // window.location.href = "game.html";
        }

        // 页面滚动效果
        window.addEventListener('scroll', function() {
            const nav = document.querySelector('nav');
            if (window.scrollY > 50) {
                nav.style.backgroundColor = 'rgba(10, 10, 26, 0.95)';
            } else {
                nav.style.backgroundColor = 'rgba(10, 10, 26, 0.8)';
            }
        });
    </script>
</body>
</html>