<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Rem's Home</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js"></script>
    <style>
        :root {
            --bg-color: #f2f3f5;
            --text-main: #2c2c2c;
            --text-sub: #555555;
            --card-bg: #ffffff;
            --card-border: #eaeaeb;
            --highlight: #ffd54f;
            --dot-bg: #ffffff;
            --tooltip-color: #6e45e2;
        }

        .dark-mode {
            --bg-color: #1a1a1a;
            --text-main: #e8e8e8;
            --text-sub: #aaaaaa;
            --card-bg: #2d2d2d;
            --card-border: #444444;
            --highlight: #d4a017;
            --dot-bg: #2d2d2d;
            --tooltip-color: #9d4edd;
        }

        body {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-color);
            /* 关键修改：固定背景图显示，不随滚动条走，且强制设定格子大小 */
            background-image: url('https://lsky.remnm.top/thumbnails/96036db393a4f1c01423d4728bd44f07.png');
            background-repeat: repeat;
            /* 将 auto 改为具体数值，180px 会让格子看起来很大很清晰 */
            background-size: 180px 180px; 
            background-attachment: fixed;
            /* 确保在亮色模式下也能清晰看到方格纹路 */
            background-blend-mode: normal; 
            display: flex;
            justify-content: center;
            min-height: 100vh;
            color: var(--text-main);
            transition: background-color 0.3s, color 0.3s;
        }

        /* 当切换到暗黑模式时，使用 overlay 或 multiply 让背景图变暗 */
        .dark-mode {
            background-blend-mode: multiply;
        }

        .container {
            width: 100%;
            max-width: 400px;
            padding: 60px 20px 20px 20px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
        }

        /* 头像 */
        .avatar-section {
            position: relative;
            margin-bottom: 20px;
        }
        .avatar {
            width: 110px;
            height: 110px;
            border-radius: 50%;
            object-fit: cover;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            border: 3px solid var(--card-bg);
            background-color: #ddd; /* 占位色 */
        }
        .status-dot {
            position: absolute;
            bottom: 6px;
            right: 6px;
            width: 20px;
            height: 20px;
            background-color: #00c853;
            border-radius: 50%;
            border: 3px solid var(--dot-bg);
        }

        .greeting h1 {
            margin: 0;
            font-size: 30px;
            font-weight: 500;
            text-align: center;
            font-family: Georgia, serif;
        }
        .highlight {
            position: relative;
            display: inline-block;
            z-index: 1;
        }
        .highlight::after {
            content: '';
            position: absolute;
            bottom: 4px;
            left: 0;
            width: 100%;
            height: 8px;
            background-color: var(--highlight);
            z-index: -1;
            border-radius: 3px;
        }

        .typewriter-box {
            font-size: 16px;
            color: var(--text-sub);
            margin: 20px 0 30px 0;
            font-family: Georgia, serif;
            min-height: 22px;
        }

        /* 社交图标栏 */
        .social-icons {
            display: flex;
            gap: 25px;
            margin-bottom: 40px;
            background: var(--card-bg);
            padding: 12px 28px;
            border-radius: 30px;
            border: 1px solid var(--card-border);
            box-shadow: 0 4px 15px rgba(0,0,0,0.03);
        }
        .icon-wrapper {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: var(--text-main);
            font-size: 22px;
            text-decoration: none;
            transition: transform 0.2s;
        }
        .icon-wrapper:hover {
            transform: translateY(-3px);
        }
        .icon-wrapper .tooltip {
            position: absolute;
            top: -30px;
            font-size: 12px;
            font-weight: bold;
            color: var(--tooltip-color);
            opacity: 0;
            transition: 0.2s;
            white-space: nowrap;
        }
        .icon-wrapper:hover .tooltip {
            opacity: 1;
        }

        /* 网格 */
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            width: 100%;
        }
        .grid-item {
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 14px;
            padding: 22px 5px;
            text-decoration: none;
            color: var(--text-main);
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: all 0.2s;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
        }
        .grid-item:hover {
            transform: translateY(-4px);
            border-color: var(--highlight);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        }
        .grid-item i {
            font-size: 24px;
            margin-bottom: 10px;
        }
        .grid-item span {
            font-size: 13px;
            font-weight: 500;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="avatar-section">
        <img src="https://lsky.remnm.top/thumbnails/3a6fb4dd4b859dbb1fabccbf5b2500d1.png" alt="Avatar" class="avatar">
        <div class="status-dot"></div>
    </div>

    <div class="greeting">
        <h1>Hi,<br>I'm <span class="highlight">Rem</span></h1>
    </div>

    <div class="typewriter-box">
        " <span id="typed"></span> "
    </div>

    <div class="social-icons">
        <a href="mailto:your@email.com" class="icon-wrapper">
            <span class="tooltip">Email</span>
            <i class="fa-solid fa-envelope"></i>
        </a>
        <a href="https://github.com/yourusername" class="icon-wrapper">
            <span class="tooltip">Github</span>
            <i class="fa-brands fa-github"></i>
        </a>
        <div class="icon-wrapper" onclick="toggleTheme()">
            <span class="tooltip" id="theme-tooltip">Theme</span>
            <i class="fa-solid fa-moon" id="theme-icon"></i>
        </div>
    </div>

    <div class="grid-container">
        <a href="https://cloudnav.remnm.top/" class="grid-item">
            <i class="fa-solid fa-link"></i>
            <span>导航</span>
        </a>
        <a href="https://halo.remnm.top" class="grid-item">
            <i class="fa-solid fa-blog"></i>
            <span>博客</span>
        </a>
        <a href="https://Komari.remnm.top" class="grid-item">
            <i class="fa-solid fa-server"></i>
            <span>探针</span>
        </a>
        <a href="https://kuma.remnm.top/" class="grid-item">
            <i class="fa-solid fa-cloud"></i>
            <span>监测</span>
        </a>
        <a href="#" class="grid-item">
            <i class="fa-solid fa-heart"></i>
            <span>摘要</span>
        </a>
        <a href="#" class="grid-item">
            <i class="fa-regular fa-calendar"></i>
            <span>28Y Vow</span>
        </a>
    </div>
</div>

<script>
    var options = {
        strings: ["这才是NEET该做的事。", "Keep it simple.", "Welcome to Rem's space."],
        typeSpeed: 60,
        backSpeed: 30,
        backDelay: 2000,
        loop: true,
        showCursor: true,
        cursorChar: '|'
    };
    new Typed('#typed', options);

    function toggleTheme() {
        const body = document.body;
        const icon = document.getElementById('theme-icon');
        const tooltip = document.getElementById('theme-tooltip');
        body.classList.toggle('dark-mode');
        if (body.classList.contains('dark-mode')) {
            icon.className = 'fa-solid fa-sun';
            tooltip.innerText = "Light";
        } else {
            icon.className = 'fa-solid fa-moon';
            tooltip.innerText = "Dark";
        }
    }
</script>
</body>
</html>