hub/index.html at main · 25-ji-code-de/hub · 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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SEKAI Hub | 生态门户</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <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@400;500;600;700;800&display=swap" rel="stylesheet">
</head>
<body>
    <div id="app">
        <div class="loading-screen">
            <div class="spinner"></div>
            <div class="loading-text">SEKAI HUB // SYSTEM</div>
        </div>
    </div>

    <!-- Public View Template -->
    <template id="template-public">
        <header>
            <div class="container nav-content">
                <div class="logo">SEKAI Hub</div>
                <button id="login-btn" class="btn btn-primary">登录 / 注册</button>
            </div>
        </header>

        <main>
            <section class="hero">
                <div class="container">
                    <h1>SEKAI Platform</h1>
                    <p>连接创作者、开发者与用户的统一生态系统。</p>
                </div>
            </section>

            <section class="container">
                <h2 class="section-title">生态项目列表</h2>

                <h3 class="category-title">应用层 (Applications)</h3>
                <div class="grid">
                    <div class="card">
                        <div class="card-icon">💬</div>
                        <h3>Nightcord</h3>
                        <p>下一代沉浸式即时通讯平台，专为社区打造。</p>
                        <a href="https://nightcord.de5.net" class="card-link">访问应用 -></a>
                    </div>
                    <div class="card">
                        <div class="card-icon">🎵</div>
                        <h3>25時作業風景</h3>
                        <p>专注的 Lo-Fi 音乐与协作空间。</p>
                        <a href="https://25ji.nightcord.de5.net" class="card-link">进入空间 -></a>
                    </div>
                </div>

                <h3 class="category-title">服务层 (Services)</h3>
                <div class="grid">
                    <div class="card">
                        <div class="card-icon">🔑</div>
                        <h3>SEKAI Pass</h3>
                        <p>统一身份认证与安全中心。</p>
                        <a href="https://id.nightcord.de5.net" class="card-link">管理账号 -></a>
                    </div>
                    <div class="card">
                        <div class="card-icon">🤖</div>
                        <h3>Nako AI</h3>
                        <p>基于 Qwen 的智能聊天机器人服务。</p>
                        <a href="https://nako.nightcord.de5.net" class="card-link">了解更多 -></a>
                    </div>
                </div>

                <h3 class="category-title">基础设施 (Infrastructure)</h3>
                <div class="grid">
                    <div class="card">
                        <div class="card-icon">🌐</div>
                        <h3>Gateway</h3>
                        <p>统一 API 网关与 CDN 分发网络。</p>
                        <a href="https://api.nightcord.de5.net" class="card-link">API 状态 -></a>
                    </div>
                    <div class="card">
                        <div class="card-icon">📚</div>
                        <h3>文档中心</h3>
                        <p>无论是用户指南还是开发者 API，都在这里。</p>
                        <a href="https://docs.nightcord.de5.net" class="card-link">阅读文档 -></a>
                    </div>
                </div>
            </section>
        </main>

        <footer style="text-align: center; padding: 2rem; color: var(--text-secondary); border-top: 1px solid var(--border); margin-top: auto;">
            © 2026 SEKAI Project. All rights reserved.
        </footer>
    </template>

    <!-- Private View Template -->
    <template id="template-private">
        <header>
            <div class="container nav-content">
                <div class="logo">SEKAI Hub</div>
                <button id="logout-btn" class="btn btn-secondary">退出登录</button>
            </div>
        </header>

        <main class="container">
            <section class="welcome-section">
                <div class="welcome-text">
                    <h2>欢迎回来，<span id="username-display" style="color: var(--accent);">User</span></h2>
                    <p class="text-secondary">准备好开始今天的创作了吗？</p>
                </div>
                <div class="actions">
                    <button id="account-settings-btn" class="btn btn-primary">账号设置</button>
                </div>
            </section>

            <section>
                <h3 class="section-title" style="text-align: left; font-size: 1.5rem;">📊 今日数据</h3>
                <div class="dashboard-grid">
                    <div class="stat-card">
                        <div class="stat-header">Nightcord</div>
                        <div class="stat-value">加载中...</div>
                        <div class="stat-label">加载中...</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-header">25ji 作業風景</div>
                        <div class="stat-value">加载中...</div>
                        <div class="stat-label">加载中...</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-header">Nako AI</div>
                        <div class="stat-value">加载中...</div>
                        <div class="stat-label">使用 Qwen 模型</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-header">总体效率</div>
                        <div class="stat-value">加载中...</div>
                        <div class="stat-label">数据统计中</div>
                    </div>
                </div>
            </section>

            <section>
                <h3 class="section-title" style="text-align: left; font-size: 1.5rem;">🎵 25時作業風景 详细统计</h3>
                <div class="dashboard-grid" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));">
                    <div class="stat-card">
                        <div class="stat-header">🔥 连续天数</div>
                        <div class="stat-value" id="streak-days">-</div>
                        <div class="stat-label">持续专注中</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-header">⏱️ 累计专注</div>
                        <div class="stat-value" id="total-time">-</div>
                        <div class="stat-label">总学习时长</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-header">🍅 番茄钟总数</div>
                        <div class="stat-value" id="total-pomodoros">-</div>
                        <div class="stat-label">累计完成</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-header">🎵 播放歌曲</div>
                        <div class="stat-value" id="songs-played">-</div>
                        <div class="stat-label">音乐陪伴</div>
                    </div>
                </div>
            </section>

            <section>
                <div class="dashboard-grid" style="grid-template-columns: 2fr 1fr;">
                    <div>
                        <h3 class="section-title" style="text-align: left; font-size: 1.5rem;">📋 近期活动</h3>
                        <div class="activity-list">
                            <div style="text-align: center; padding: 2rem; color: var(--text-secondary);">
                                加载中...
                            </div>
                        </div>
                    </div>
                    <div>
                        <h3 class="section-title" style="text-align: left; font-size: 1.5rem;">🏆 最近解锁</h3>
                        <div class="achievement-list">
                            <div style="text-align: center; padding: 2rem; color: var(--text-secondary);">
                                加载中...
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section>
                <h3 class="section-title" style="text-align: left; font-size: 1.5rem;">🚀 快速入口</h3>
                <div class="grid">
                    <a href="https://nightcord.de5.net" class="card" style="text-decoration: none;">
                        <div class="card-icon">💬</div>
                        <h3>Nightcord</h3>
                        <p>即时通讯</p>
                    </a>
                    <a href="https://25ji.nightcord.de5.net" class="card" style="text-decoration: none;">
                        <div class="card-icon">🎵</div>
                        <h3>25時作業風景</h3>
                        <p>专注空间</p>
                    </a>
                    <a href="https://nako.nightcord.de5.net" class="card" style="text-decoration: none;">
                        <div class="card-icon">🤖</div>
                        <h3>Nako AI</h3>
                        <p>智能助手</p>
                    </a>
                    <a href="https://docs.nightcord.de5.net" class="card" style="text-decoration: none;">
                        <div class="card-icon">📚</div>
                        <h3>文档中心</h3>
                        <p>知识库</p>
                    </a>
                </div>
            </section>
        </main>
    </template>

    <script type="module" src="assets/js/main.js"></script>
</body>
</html>