DailyQuestion/index.html at main · cnfeat/DailyQuestion · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang='zh-CN'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>日课一问 | 每日三省，破局人生</title>
    <link rel='icon' href='icon.png' type='image/png'>
    <link rel='stylesheet' href='style.css'>
</head>
<body>
    <div class='card' id='daily-card'>
        <!-- 头部 -->
        <div class='card-header'>
            <div class='header-brand'>
                <a href='https://github.com/cnfeat/DailyQuestion#readme' target='_blank' class='brand-link'>
                    <span class='brand-name'>日课一问</span>
                    <span class='brand-divider'>|</span>
                    <span class='brand-tagline'>每日三省，破局人生</span>
                </a>
            </div>
            <div class='header-right'>
                <div class='card-id' id='card-id'>NO.000</div>
                <span class='import-btn' id='import-trigger' title='导入自定义题库'>+</span>
                <input type='file' id='import-input' accept='.json' hidden>
            </div>
        </div>

        <!-- 内容区 -->
        <div class='card-content'>
            <!-- 正常状态 -->
            <div id='normal-state'>
                <div class='question-area'>
                    <h1 id='question-display'>正在抽取今日问题...</h1>
                </div>
                <div class='divider'></div>
                <div class='extension-area'>
                    <p id='extension-display'>思考加载中...</p>
                </div>
                <div id='change-btn'></div>
            </div>

            <!-- 错误降级 -->
            <div id='error-state' class='error-state'>
                <div class='error-icon'>&#127810;</div>
                <p class='error-msg'>题目加载失败<br>请刷新页面重试</p>
                <button class='retry-btn' onclick='location.reload()'>重新加载</button>
            </div>

            <!-- 年度进度 -->
            <div class='progress-container'>
                <div id='gregorian-date'></div>
                <div id='progress-text'></div>
                <div id='progress-grid'></div>
            </div>
        </div>

        <!-- 底部栏 -->
        <div class='card-footer'>
            <div class='footer-left'>
                <span id='import-footer' class='footer-share-link' title='导入自定义题库'>🎨 导入题库</span>
                <a href='https://github.com/cnfeat/DailyQuestion#3-%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A2%98%E5%BA%93' target='_blank' class='footer-share-link'>📖 导入教程</a>
                <a href='https://github.com/cnfeat/DailyQuestion' target='_blank' class='footer-share-link'>📋 400道题库PDF · 免费下载</a>
            </div>
        </div>

        <div class='footer-credit'>
            <a href='https://www.cnfeat.com/' target='_blank' class='footer-note'>出品：卡片创作实验室</a>
            <button id='download-btn' title='下载这张卡片'>
                <svg viewBox='0 0 24 24' stroke='currentColor' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'>
                    <path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/>
                    <polyline points='7 10 12 15 17 10'/>
                    <line x1='12' y1='15' x2='12' y2='3'/>
                </svg>
            </button>
        </div>
    </div>

    <script src='data.js'></script>
    <script src='script.js'></script>
    <div id='toast' class='toast'></div>
</body>
</html>