index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于 KunCode - 个人练习室</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap" rel="stylesheet">
    <style>
        :root {
            --ball-orange: #f97316;
            --ball-orange-deep: #ea580c;
            --court-wood: #fefce8;
            --seam-black: #1a1a1a;
            --ikun-gray: #e5e7eb;
            --strap-gray: #4b5563;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, sans-serif;
            background-color: var(--court-wood);
            background-image: 
                linear-gradient(90deg, rgba(249, 115, 22, 0.05) 1px, transparent 1px),
                linear-gradient(rgba(249, 115, 22, 0.05) 1px, transparent 1px);
            background-size: 30px 30px;
            color: var(--seam-black);
            line-height: 1.6;
            overflow-x: hidden;
        }

        .cursor-light {
            position: fixed;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(249, 115, 22, 0.1) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
            z-index: 0;
            transform: translate(-50%, -50%);
        }

        main {
            max-width: 1200px;
            margin: 0 auto;
            padding: 80px 5% 100px; /* 增加了顶部间距 */
            position: relative;
            z-index: 5;
        }

        /* 头部设计 - 修复重叠 */
        .header-section {
            text-align: center;
            margin-bottom: 100px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .badge {
            background: var(--seam-black);
            color: white;
            padding: 10px 24px;
            border-radius: 50px;
            font-size: 13px;
            font-weight: 900;
            display: inline-block;
            margin-bottom: 30px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .main-title {
            font-size: clamp(48px, 8vw, 92px);
            font-weight: 900;
            line-height: 1.1; /* 修正了行高，防止字体堆叠 */
            letter-spacing: -3px;
            max-width: 900px;
        }

        .gradient-text {
            background: linear-gradient(135deg, var(--ball-orange), #f43f5e);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            display: block; /* 让梯度的文字独占一行，更有视觉冲击力 */
            margin-top: 10px;
        }

        /* 铁山靠 2.0 动画重制 */
        .intro-grid {
            display: grid;
            grid-template-columns: 1.2fr 0.8fr;
            gap: 60px;
            align-items: center;
            margin-bottom: 120px;
        }

        .kun-story h2 {
            font-size: 36px;
            font-weight: 900;
            margin-bottom: 25px;
            position: relative;
        }

        .kun-story h2::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -8px;
            width: 40px;
            height: 6px;
            background: var(--ball-orange);
        }

        .kun-story p {
            font-size: 18px;
            color: #4b5563;
            margin-bottom: 25px;
            text-align: justify;
        }

        .stage-area {
            position: relative;
            height: 420px;
            background: white;
            border: 5px solid var(--seam-black);
            border-radius: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            box-shadow: 25px 25px 0px var(--ball-orange);
            cursor: pointer;
            transition: box-shadow 0.2s;
        }

        .stage-area:active {
            box-shadow: 10px 10px 0px var(--ball-orange);
        }

        .kun-avatar {
            font-size: 140px;
            position: relative;
            z-index: 2;
            transition: transform 0.1s;
            filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));
        }

        /* 铁山靠核心动画逻辑 */
        .tieshankao-active {
            animation: tieshankao-pro 0.6s cubic-bezier(0.45, 0, 0.55, 1);
        }

        @keyframes tieshankao-pro {
            0% { transform: scale(1) rotate(0deg); filter: brightness(1); }
            /* 蓄力沉肩 */
            20% { transform: translateX(40px) rotate(15deg) scale(0.9); filter: brightness(1.1); }
            /* 爆发冲撞 */
            40% { transform: translateX(-140px) rotate(-28deg) scale(1.15); filter: brightness(1.3) contrast(1.2); }
            /* 物理回弹 */
            60% { transform: translateX(30px) rotate(8deg); }
            80% { transform: translateX(-10px) rotate(0deg); }
            100% { transform: translateX(0) rotate(0deg); filter: brightness(1); }
        }

        .dust {
            position: absolute;
            width: 12px;
            height: 12px;
            background: #cbd5e1;
            border-radius: 50%;
            opacity: 0;
            z-index: 1;
        }

        .dust-active {
            animation: dust-kick 0.6s ease-out forwards;
        }

        @keyframes dust-kick {
            0% { transform: translate(0, 0) scale(1); opacity: 0; }
            40% { transform: translate(-180px, 60px) scale(2); opacity: 0.8; }
            100% { transform: translate(-250px, 100px) scale(0.5); opacity: 0; }
        }

        /* 核心准则 - 4格矩阵 */
        .grid-4 {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
        }

        .card-pro {
            background: white;
            padding: 60px 45px;
            border-radius: 40px;
            border: 2px solid rgba(0,0,0,0.03);
            position: relative;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            overflow: hidden;
        }

        .card-pro:hover {
            transform: translateY(-15px);
            box-shadow: 0 40px 80px rgba(249, 115, 22, 0.12);
            border-color: var(--ball-orange);
        }

        .card-pro .icon {
            font-size: 60px;
            margin-bottom: 30px;
            display: block;
            filter: drop-shadow(0 5px 10px rgba(0,0,0,0.05));
        }

        .card-pro h3 {
            font-size: 28px;
            font-weight: 900;
            margin-bottom: 18px;
        }

        .card-pro p {
            color: #6b7280;
            font-size: 17px;
            line-height: 1.8;
        }

        .watermark {
            position: absolute;
            bottom: -10px;
            right: -10px;
            font-weight: 900;
            font-size: 100px;
            opacity: 0.02;
            pointer-events: none;
            font-style: italic;
            user-select: none;
        }

        /* 底部互动 */
        .cta-box {
            margin-top: 120px;
            background: var(--seam-black);
            border-radius: 60px;
            padding: 100px 40px;
            text-align: center;
            color: white;
            position: relative;
            overflow: hidden;
            box-shadow: 0 40px 100px -20px rgba(0,0,0,0.3);
        }

        .ball-bg {
            position: absolute;
            font-size: 250px;
            right: -60px;
            bottom: -60px;
            opacity: 0.05;
            transform: rotate(25deg);
            pointer-events: none;
        }

        .btn-kun {
            background: var(--ball-orange);
            color: white;
            padding: 24px 60px;
            border-radius: 25px;
            font-size: 22px;
            font-weight: 900;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s;
            border: none;
            cursor: pointer;
            margin-top: 40px;
            box-shadow: 0 10px 30px rgba(249, 115, 22, 0.3);
        }

        .btn-kun:hover {
            transform: scale(1.08) rotate(-1deg);
            background: white;
            color: var(--seam-black);
            box-shadow: 0 20px 40px rgba(255, 255, 255, 0.2);
        }

        footer {
            text-align: center;
            padding: 100px 0 60px;
            opacity: 0.4;
            font-size: 14px;
            font-weight: 600;
        }

        @media (max-width: 900px) {
            .intro-grid, .grid-4 { grid-template-columns: 1fr; }
            .stage-area { height: 350px; }
            .main-title { font-size: 56px; }
        }
    </style>
</head>
<body>
    <div class="cursor-light" id="light"></div>

    <main>
        <div class="header-section">
            <span class="badge">练习时长两年半</span>
            <h1 class="main-title">不仅是代码<span class="gradient-text">更是我的节奏</span></h1>
        </div>

        <section class="intro-grid">
            <div class="kun-story">
                <h2>一个人的练习室</h2>
                <p>很多人问我，KunCode 背后有多少人？我只想说：<strong>“一直以来，都只有我一个人。”</strong></p>
                <p>从第一个字符的 Rap 到最后一行代码的篮球，我独自完成了所有的架构与优化。在这里，没有冗余的团队沟通，只有最纯粹的<strong>香精煎鱼</strong>（向精进前行）。</p>
                <p>每一个 API 接口的跳动，都经过了 2.5 年的打磨。不论是<strong>梅狸猫</strong>般的灵动，还是<strong>铁山靠</strong>般的坚韧，都是我个人的技术写照。</p>
            </div>
            <div class="stage-area" onclick="performTSK()" id="stage">
                <div class="kun-avatar" id="kun">🕺</div>
                <div style="position:absolute; bottom:30px; font-weight:900; font-size:13px; opacity:0.3; letter-spacing: 1px;">点击触发：完美铁山靠</div>
                <!-- 烟雾粒子 -->
                <div class="dust" id="d1"></div>
                <div class="dust" id="d2"></div>
                <div class="dust" id="d3"></div>
            </div>
        </section>

        <section>
            <div class="grid-4">
                <div class="card-pro">
                    <span class="icon">🎤</span>
                    <h3>唱 · 极致响应</h3>
                    <p>代码如歌，每一个请求的响应时间都经过节拍器校准。拒绝杂音，只留清脆的 200 OK。即便在复杂的业务逻辑下，也能唱出最稳的旋律。</p>
                    <div class="watermark">CHART</div>
                </div>
                <div class="card-pro">
                    <span class="icon">💃</span>
                    <h3>跳 · 荔枝架构</h3>
                    <p>你要我怎么荔枝？架构灵动而不失稳重，即便在千万级并发下，依然能优雅起舞。背带裤般的强韧支撑，是稳态的核心保障。</p>
                    <div class="watermark">DANCE</div>
                </div>
                <div class="card-pro">
                    <span class="icon">📻</span>
                    <h3>Rap · 快速并发</h3>
                    <p>语速要快，逻辑要硬。自研苏珊异步处理引擎，让你的数据流像 Rap 一样顺滑。无论是高频轮询还是长连接，都游刃有余。</p>
                    <div class="watermark">RAP</div>
                </div>
                <div class="card-pro">
                    <span class="icon">🏀</span>
                    <h3>篮球 · 核心中转</h3>
                    <p>运球帷幄之中，决胜千里之外。KunCode 核心中转逻辑，确保每一粒数据都能准确入筐。这就是全能 MVP 的技术掌控力。</p>
                    <div class="watermark">BALL</div>
                </div>
            </div>
        </section>

        <div class="cta-box">
            <div class="ball-bg">🏀</div>
            <h2 style="font-size:48px; font-weight:900; letter-spacing: -1px;">全民制作人，看好了</h2>
            <p style="opacity:0.8; margin-top:20px; font-size:20px; max-width: 600px; margin-left: auto; margin-right: auto;">
                我已经准备好了，你准备好接入 KunCode 了吗？让我们一起在技术的舞台上发光发热。
            </p>
        
            <button class="btn-kun" 
                onclick="window.location.href='https://kuncode.120403.xyz/keys'">
                立即开始练习
            </button>
        </div>
    </main>

    <footer>
        &copy; 2024 KunCode 个人练习室 | 拒绝黑子，从我做起 | 练习时长两年半专属驱动
    </footer>

    <script>
        // 光效跟随
        const light = document.getElementById('light');
        document.addEventListener('mousemove', (e) => {
            light.style.left = e.clientX + 'px';
            light.style.top = e.clientY + 'px';
        });

        // 铁山靠逻辑 - 强化版
        function performTSK() {
            const kun = document.getElementById('kun');
            const dusts = [document.getElementById('d1'), document.getElementById('d2'), document.getElementById('d3')];
            
            // 防抖
            if (kun.classList.contains('tieshankao-active')) return;

            kun.classList.add('tieshankao-active');
            
            // 冲撞瞬间触发烟雾粒子
            setTimeout(() => {
                dusts.forEach((d, i) => {
                    // 随机化粒子起始位置，增加真实感
                    d.style.left = (45 + Math.random() * 10) + '%';
                    d.style.top = (55 + Math.random() * 10) + '%';
                    d.classList.add('dust-active');
                });
            }, 180);

            // 清理状态
            setTimeout(() => {
                kun.classList.remove('tieshankao-active');
                dusts.forEach(d => d.classList.remove('dust-active'));
            }, 650);

            console.log("练习时长两年半，动作更标准了。");
        }
    </script>
</body>
</html>