<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <link rel="icon" type="image/png"
    href="https://img.314926.xyz/images/2025/09/20/zsx-avatar.webp " 
    sizes="32x32">
    <meta charset="UTF-8">
    <title>钟神秀的瞬间</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        :root {
            --bg: #f5f5f5;
            --fg: #333333;
            --card: #ffffff;
            --link: #576b95;
            --border: #e1e1e1;
            --avatar-border: #f0f0f0;
            --time-color: #888888;
            --like-color: #ff2442;
            --comment-bg: #f7f7f7;
            --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            --active-page-bg: #576b95;
            --active-page-fg: #ffffff;
            --action-btn-color: #7d7d7d;
            --divider-color: #f0f0f0;
            --header-image-height: 180px;
            --content-max-width: 600px;
        }
        [data-theme="dark"] {
            --bg: #1a1a1a;
            --fg: #e6e6e6;
            --card: #242424;
            --link: #7d9fd3;
            --border: #3a3a3a;
            --avatar-border: #3a3a3a;
            --time-color: #a0a0a0;
            --like-color: #ff5c7a;
            --comment-bg: #2d2d2d;
            --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
            --active-page-bg: #7d9fd3;
            --active-page-fg: #ffffff;
            --action-btn-color: #a0a0a0;
            --divider-color: #3a3a3a;
            --header-image-height: 200px;
        }
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
            background: var(--bg);
            color: var(--fg);
            line-height: 1.6;
            transition: background .3s, color .3s;
            padding-bottom: 40px;
        }
        a {
            color: var(--link);
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
        nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            background: var(--card);
            border-bottom: 1px solid var(--border);
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: var(--shadow);
        }
        .nav-left {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 600;
            font-size: 18px;
        }
        .icon {
            width: 24px;
            height: 24px;
            fill: currentColor;
        }
        #theme-toggle {
            cursor: pointer;
            background: transparent;
            border: 1px solid var(--border);
            color: var(--fg);
            padding: 6px 12px;
            border-radius: 16px;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .header-image {
            width: 100%;
            max-width: var(--content-max-width);
            height: var(--header-image-height);
            background: linear-gradient(135deg, #6e8efb, #a777e3);
            position: relative;
            overflow: hidden;
            margin: 0 auto 15px;
            border-radius: 12px;
            border: 1px solid var(--border);
        }
        .header-image::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('https://img.314926.xyz/images/2025/09/22/20250922193025414.webp ') center/cover;
            opacity: 0.9;
        }
        .header-title {
            position: absolute;
            left: 20px;
            bottom: 20px;
            color: white;
            font-size: 24px;
            font-weight: bold;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
            z-index: 2;
        }
        .header-info {
            position: absolute;
            right: 20px;
            bottom: 20px;
            color: white;
            z-index: 2;
            cursor: pointer;
            font-size: 20px;
        }
        @media (max-width: 640px) {
            .header-image {
                border-radius: 0;
                margin-bottom: 10px;
            }
            :root {
                --header-image-height: 160px;
            }
            [data-theme="dark"] {
                --header-image-height: 180px;
            }
        }
        .info-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.7);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        .info-content {
            background: var(--card);
            padding: 20px;
            border-radius: 12px;
            max-width: 80%;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            position: relative;
        }
        .close-modal {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 24px;
            cursor: pointer;
        }
        main {
            max-width: var(--content-max-width);
            margin: 0 auto;
            padding: 0 10px;
            width: 100%;
        }
        .moment-article {
            background: var(--card);
            border-radius: 12px;
            padding: 0;
            margin-bottom: 15px;
            box-shadow: var(--shadow);
            border: 1px solid var(--border);
            overflow: hidden;
        }
        .article-header {
            display: flex;
            align-items: center;
            padding: 12px 15px;
        }
        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 12px;
            border: 2px solid var(--avatar-border);
            object-fit: cover;
        }
        .user-info {
            flex: 1;
        }
        .user-name {
            font-weight: 500;
            font-size: 16px;
            margin-bottom: 2px;
        }
        .post-time {
            font-size: 12px;
            color: var(--time-color);
        }
        .moment-content {
            padding: 0 15px 15px 15px;
            margin-left: 52px;
            margin-top: -10px;
            font-size: 15px;
            line-height: 1.5;
        }
        .moment-content p {
            margin-bottom: 10px;
        }
        .moment-content pre {
            background: var(--bg);
            padding: 12px;
            border-radius: 6px;
            overflow: auto;
            font-size: 14px;
            margin: 10px 0;
        }
        .moment-content blockquote {
            border-left: 3px solid var(--border);
            padding-left: 12px;
            margin: 10px 0;
            color: var(--fg);
            opacity: .8;
            font-size: 14px;
            background: var(--comment-bg);
            border-radius: 0 6px 6px 0;
            padding: 8px 12px;
        }
        .moment-content code {
            background-color: var(--bg);
            padding: 2px 4px;
            border-radius: 3px;
            font-size: 14px;
        }
        .moment-content img {
            max-width: 100%;
            border-radius: 6px;
            margin: 8px 0;
        }
        .error, .no-content {
            text-align: center;
            margin-top: 40px;
            font-size: 16px;
            color: var(--time-color);
        }
        .pagination {
            display: flex;
            justify-content: center;
            margin: 20px 0;
            gap: 8px;
        }
        .page-btn {
            padding: 6px 12px;
            border: 1px solid var(--border);
            background: var(--card);
            color: var(--fg);
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
        }
        .page-btn:hover {
            background: var(--bg);
        }
        .page-btn.active {
            background: var(--active-page-bg);
            color: var(--active-page-fg);
            border-color: var(--active-page-bg);
        }
        .page-btn.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .giscus-container {
            max-width: var(--content-max-width);
            margin: 30px auto 0 auto;
            padding: 0 10px;
        }
        .loading {
            display: flex;
            justify-content: center;
            padding: 20px;
        }
        .loading-spinner {
            width: 24px;
            height: 24px;
            border: 3px solid var(--border);
            border-top-color: var(--link);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        /* 右下角编辑按钮 */
        .edit-btn {
            position: fixed;
            right: 20px;
            bottom: 20px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--card);
            color: var(--fg);
            border: 1px solid var(--border);
            box-shadow: var(--shadow);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            cursor: pointer;
            transition: all .3s;
            z-index: 999;
        }
        .edit-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(0,0,0,.15);
        }
        /* 手机端缩小一点 */
        @media (max-width: 640px) {
            .edit-btn {
                width: 44px;
                height: 44px;
                font-size: 18px;
                right: 16px;
                bottom: 16px;
            }
        }
    </style>
</head>
<body>
    <nav>
        <div class="nav-left">
            <svg class="icon" viewBox="0 0 16 16">
                <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38
                         0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01
                         1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95
                         0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0
                         1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0
                         3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
            </svg>
            <span>钟神秀的瞬间</span>
        </div>
        <button id="theme-toggle" aria-label="切换主题">
            <span id="theme-icon">🌙</span>
            <span>切换主题</span>
        </button>
    </nav>

    <div class="header-image">
        <div class="header-title">即刻短文</div>
        <div class="header-info" id="info-button">❗</div>
    </div>

    <div class="info-modal" id="info-modal">
        <div class="info-content">
            <div class="close-modal" id="close-modal">×</div>
            <h3>钟神秀的瞬间记录</h3>
            <p>这里收录了我的生活随笔、技术思考和灵感闪现。每一段文字都是时光的切片，记录当下的真实感受。</p>
        </div>
    </div>

    <main id="main-container">
        <div class="loading">
            <div class="loading-spinner"></div>
        </div>
    </main>

    <div id="pagination-container" style="display: none;"></div>

    <div class="giscus-container"></div>

    <a href="https://github.com/zsxsw/github-issues-moments/issues/1" target="_blank" class="edit-btn" title="添加/编辑说说">✏️</a>

    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js "></script>
    <script>
        /* ---------- 主题切换 + Giscus 重载 ---------- */
        const toggle = document.getElementById('theme-toggle');
        const themeIcon = document.getElementById('theme-icon');
        const html = document.documentElement;

        function loadGiscus(theme) {
            const container = document.querySelector('.giscus-container');
            container.innerHTML = '';
            const script = document.createElement('script');
            script.src = 'https://giscus.app/client.js ';
            script.async = true;
            script.setAttribute('crossorigin', 'anonymous');
            script.setAttribute('data-repo', 'zsxsw/github-issues-moments');
            script.setAttribute('data-repo-id', 'R_kgDOP0jWOA');
            script.setAttribute('data-category', 'Announcements');
            script.setAttribute('data-category-id', 'DIC_kwDOP0jWOM4Cvv6S');
            script.setAttribute('data-mapping', 'pathname');
            script.setAttribute('data-strict', '0');
            script.setAttribute('data-reactions-enabled', '1');
            script.setAttribute('data-emit-metadata', '0');
            script.setAttribute('data-input-position', 'top');
            script.setAttribute('data-lang', 'zh-CN');
            script.setAttribute('data-theme', theme);
            container.appendChild(script);
        }

        (function initTheme() {
            const saved = localStorage.getItem('theme');
            const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
            const initialTheme = (saved === 'dark' || (!saved && preferDark)) ? 'dark' : 'light';
            html.setAttribute('data-theme', initialTheme);
            themeIcon.textContent = initialTheme === 'dark' ? '☀️' : '🌙';
            loadGiscus(initialTheme);
        })();

        toggle.addEventListener('click', () => {
            const current = html.getAttribute('data-theme');
            const next = current === 'dark' ? 'light' : 'dark';
            html.setAttribute('data-theme', next);
            localStorage.setItem('theme', next);
            themeIcon.textContent = next === 'dark' ? '☀️' : '🌙';
            loadGiscus(next);
        });

        /* ---------- 信息模态框 ---------- */
        const infoButton = document.getElementById('info-button');
        const infoModal = document.getElementById('info-modal');
        const closeModal = document.getElementById('close-modal');
        infoButton.addEventListener('click', () => infoModal.style.display = 'flex');
        closeModal.addEventListener('click', () => infoModal.style.display = 'none');
        infoModal.addEventListener('click', e => {
            if (e.target === infoModal) infoModal.style.display = 'none';
        });

        /* ---------- 数据加载 & 分页 ---------- */
        const container = document.getElementById('main-container');
        const paginationContainer = document.getElementById('pagination-container');
        const url = 'https://example.com/api/comments '; /* 替换为你的 API URL */
        let allComments = [];
        let currentPage = 1;
        const itemsPerPage = 10;

        const headers = new Headers();
        headers.append('Accept', 'application/vnd.github.v3+json');
        headers.append('User-Agent', 'Hugo Static Site Generator');

        fetch(url, { headers })
            .then(r => {
                if (!r.ok) throw new Error('网络错误 ' + r.status);
                return r.json();
            })
            .then(list => {
                if (!Array.isArray(list) || list.length === 0) {
                    container.innerHTML = '<p class="no-content">暂无动态</p>';
                    return;
                }
                allComments = list.reverse();
                initPagination(allComments.length);
                displayPage(1);
            })
            .catch(err => {
                container.innerHTML = `<p class="error">⚠️ 无法获取动态：${err.message}</p>`;
            });

        function initPagination(totalItems) {
            const totalPages = Math.ceil(totalItems / itemsPerPage);
            if (totalPages <= 1) {
                paginationContainer.style.display = 'none';
                return;
            }
            let html = `
                <div class="pagination">
                    <button class="page-btn prev-btn" onclick="changePage(${currentPage - 1})" ${currentPage === 1 ? 'disabled' : ''}>上一页</button>
            `;
            const max = 5, half = Math.floor(max / 2);
            let start, end;
            if (totalPages <= max) { start = 1; end = totalPages; }
            else if (currentPage <= half + 1) { start = 1; end = max; }
            else if (currentPage >= totalPages - half) { start = totalPages - max + 1; end = totalPages; }
            else { start = currentPage - half; end = currentPage + half; }
            for (let i = start; i <= end; i++) {
                html += `<button class="page-btn ${i === currentPage ? 'active' : ''}" onclick="changePage(${i})">${i}</button>`;
            }
            html += `<button class="page-btn next-btn" onclick="changePage(${currentPage + 1})" ${currentPage === totalPages ? 'disabled' : ''}>下一页</button></div>`;
            paginationContainer.innerHTML = html;
            paginationContainer.style.display = 'block';
        }

        function displayPage(page) {
            const start = (page - 1) * itemsPerPage, end = Math.min(start + itemsPerPage, allComments.length);
            const html = allComments.slice(start, end).map(c => `
                <article class="moment-article">
                    <header class="article-header">
                        <img class="avatar" src="${c.user.avatar_url}" alt="${c.user.login}" onerror="this.src='https://avatars.githubusercontent.com/u/0?s=80&v=4 '">
                        <div class="user-info">
                            <div class="user-name">钟神秀@zsxsw</div>
                            <div class="post-time">${formatTime(c.created_at)}</div>
                        </div>
                    </header>
                    <section class="moment-content">${marked.parse(c.body)}</section>
                </article>
            `).join('');
            container.innerHTML = `<div class="moments-feed">${html}</div>`;
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }

        window.changePage = function (page) {
            const total = Math.ceil(allComments.length / itemsPerPage);
            if (page < 1 || page > total || page === currentPage) return;
            currentPage = page;
            displayPage(page);
            initPagination(allComments.length);
        };

        function formatTime(dateStr) {
            const date = new Date(dateStr), now = new Date(), diff = (now - date) / 1000;
            if (diff < 60) return '刚刚';
            if (diff < 3600) return `${Math.floor(diff / 60)}分钟前`;
            if (diff < 86400) return `${Math.floor(diff / 3600)}小时前`;
            if (diff < 2592000) return `${Math.floor(diff / 86400)}天前`;
            return date.toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false });
        }
    </script>
</body>
</html>