<!DOCTYPE html>
<html lang="zh-SG">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>萌え - 个人主页</title>
    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&family=Noto+Sans+SC:wght@200;300;400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="pageContent">
        <main class="container">
            <header class="profile-section">
                <div class="avatar-wrapper">
                    <div class="avatar-ring"></div>
                    <img class="avatar" src="https://images.coder.moe/%E8%90%8C%E3%81%88.png" alt="萌え的头像" draggable="false">
                </div>
                <h1 class="profile-name">萌え</h1>
                <p class="profile-bio">热爱生活，热爱代码，热爱一切美好的事物 ✨</p>
                <div class="status-badge">
                    <span class="status-dot"></span>
                    Available for chat
                </div>
            </header>

            <div class="moe-grid">
                <article class="moe-card card-about full">
                    <div class="card-icon-row">
                        <div class="card-icon">👋</div>
                        <span class="card-label">About</span>
                    </div>
                    <p class="about-text">
                        嗨，我是 <strong>萌え</strong>！一个喜欢探索新事物的人。<br>
                        希望在这里和你分享我的世界 🌍
                    </p>
                </article>

                <a class="moe-card card-telegram" href="https://t.me/CialloMoeBot" target="_blank" rel="noopener noreferrer">
                    <div class="card-icon">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg>
                    </div>
                    <div class="card-title">Telegram</div>
                    <div class="card-handle">@CialloMoeBot</div>
                    <div class="card-arrow">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7M17 7H7M17 7v10"/></svg>
                    </div>
                </a>

                <div class="moe-card card-email" onclick="copyEmail(event)">
                    <div class="card-icon">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
                    </div>
                    <div class="card-title">Email</div>
                    <div class="card-handle"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="325f57725a5d465f535b5e1c5b5f">[email&#160;protected]</a></div>
                    <div class="card-arrow">
                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="2" width="14" height="14" rx="2"/><path d="M16 16v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2"/></svg>
                    </div>
                </div>

                <article class="moe-card card-location">
                    <div class="location-pin">📍</div>
                    <div class="location-city">Isekai</div>
                    <div class="location-country">Milky Way Galaxy</div>
                </article>

                <article class="moe-card card-time">
                    <div class="time-display" id="localTime">--:--</div>
                    <div class="time-label">Local Time</div>
                </article>

                <article class="moe-card card-stack full">
                    <div class="card-icon-row">
                        <div class="card-icon">⚡</div>
                        <span class="card-label">Tech Stack</span>
                    </div>
                    <div class="stack-tags">
                        <span class="stack-tag">HTML</span>
                        <span class="stack-tag">CSS</span>
                        <span class="stack-tag">JavaScript</span>
                        <span class="stack-tag">TypeScript</span>
                        <span class="stack-tag">React</span>
                        <span class="stack-tag">Vue</span>
                        <span class="stack-tag">Node.js</span>
                        <span class="stack-tag">Python</span>
                        <span class="stack-tag">Figma</span>
                    </div>
                </article>
            </div>
        </main>

        <footer>
            <p>© 2026 萌え. All rights reserved.</p>
        </footer>
    </div>

    <div class="toast" id="toast"></div>

    <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="js/script.js"></script>
</body>
</html>