-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
252 lines (236 loc) · 15.9 KB
/
index.html
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
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chii Magnus</title>
<link rel="apple-touch-icon" sizes="180x180" href="/assets/hat.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/hat.svg">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/hat.svg">
<link rel="manifest" href="/site.webmanifest">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<button class="palette-button" id="paletteButton" title="主题颜色">🎨</button>
<div class="color-palette" id="colorPalette">
<div class="palette-header">
<span class="palette-title">选择主题颜色</span>
<button class="close-palette" id="closePalette">×</button>
</div>
<!-- 添加颜色选择器 -->
<div class="color-picker">
<div class="color-wheel">
<div class="color-dot primary" id="primaryDot" draggable="true"></div>
<div class="color-dot secondary" id="secondaryDot" draggable="true"></div>
<div class="color-dot accent" id="accentDot" draggable="true"></div>
</div>
<div class="color-info">
<div class="color-preview">
<div class="preview-gradient"></div>
</div>
<div class="color-values">
<div class="color-value">
<label>主色调</label>
<input type="text" id="primaryColor" value="#00b894">
</div>
<div class="color-value">
<label>次色调</label>
<input type="text" id="secondaryColor" value="#00cec9">
</div>
<div class="color-value">
<label>点缀色</label>
<input type="text" id="accentColor" value="#81ecec">
</div>
</div>
</div>
</div>
<div class="palette-divider">
<span>预设主题</span>
</div>
<div class="color-options">
<div class="color-option theme-rainbow" data-theme="rainbow" title="彩虹"></div>
<div class="color-option theme-aurora" data-theme="aurora" title="极光"></div>
<div class="color-option theme-sunset-beach" data-theme="sunset-beach" title="日落海滩"></div>
<div class="color-option theme-cherry-blossom" data-theme="cherry-blossom" title="樱花"></div>
<div class="color-option theme-autumn" data-theme="autumn" title="秋季"></div>
<div class="color-option theme-neon-noir" data-theme="neon-noir" title="霓虹暗夜"></div>
</div>
</div>
<div class="container">
<!-- 侧边栏 -->
<aside class="sidebar">
<div class="avatar-container">
<img src="assets/avatar.png" alt="头像" class="avatar">
<h2 class="blog-title">Chii Magnus</h2>
<div class="social-links">
<a href="mailto:[email protected]" class="social-link" title="Email">
<svg viewBox="0 0 24 24" width="24" height="24">
<path fill="currentColor" d="M20,4H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V6C22,4.9,21.1,4,20,4z M20,8l-8,5L4,8V6l8,5l8-5V8z"/>
</svg>
</a>
<a href="https://github.com/chiimagnus" class="social-link" title="GitHub">
<svg viewBox="0 0 24 24" width="24" height="24">
<path fill="currentColor" d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"/>
</svg>
</a>
<a href="https://m.igetget.com/native/mine/account#/user/detail?enId=GEznR6VwQNKxEeXPOz9xB9Ojy0d24k" class="social-link" title="得到">
<img src="assets/得到.svg" width="24" height="24" alt="得到" />
</a>
<a href="https://space.bilibili.com/1055823731" class="social-link" title="哔哩哔哩">
<svg viewBox="0 0 24 24" width="24" height="24">
<path fill="currentColor" d="M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373Z"/>
</svg>
</a>
</div>
</div>
<nav>
<ul class="nav-menu">
<li>
<a href="#articles">文章</a>
</li>
<li>
<a href="#products">产品开发</a>
</li>
<li>
<a href="#about">关于我</a>
</li>
</ul>
</nav>
<div class="search-container">
<input type="text" id="searchInput" placeholder="搜索（快捷键cmd+k）" />
</div>
</aside>
<!-- 主内容区 -->
<div class="main-content">
<main>
<section id="articles">
<div class="section-header">
<h2>文章</h2>
<button id="toggleArticles" class="toggle-button">
展开 ↓
</button>
</div>
<div id="articlesList">
<!-- 只显示最新的3篇文章 -->
<article class="article-preview">
<h3>沉浸式游戏的设计思考，增加用户下一个行动的期待</h3>
<p class="article-meta">发布于 2024年11月18日 08:20</p>
<p class="article-excerpt">
最后，我想知道，为什么我会如此执着于「着急完成」呢？或许这只是一种对游戏着迷上头、对想法实现的无比投入？
可能在我眼里，就没有缓慢享受，只有快速榨干的享受吧：）
</p>
<a href="https://mp.weixin.qq.com/s?__biz=Mzg2MzczNDY5MA%3D%3D&mid=2247483888&idx=1&sn=c5099058a0295350b2d233189aada813&chksm=ce755f3df902d62b5ece386311d4d362f8763bf5fe85ac9dc7c5240d262ec638c6d1a70f09fa&token=245502106&lang=zh_CN#rd"
class="read-more"
target="_blank">
阅读全文 →
</a>
</article>
<article class="article-preview">
<h3>键盘设计厂商们，别做你们该死的MacOS键盘了吧！</h3>
<p class="article-meta">发布于 2024年11月11日 08:20</p>
<p class="article-excerpt">
我想写篇公众号，关于键盘设计厂商门完全没必要开发适配macOS系统的键盘，因为其实已经有了一个统一的解决方案，那就是GitHub上的开源项目：karabiner-elements。
</p>
<a href="https://mp.weixin.qq.com/s?__biz=Mzg2MzczNDY5MA%3D%3D&mid=2247483876&idx=1&sn=14a77cc1d8de4a583d38d9c25af8f5dd&chksm=ce755f29f902d63f587ded71520c2ba54590ed95e2f4ecb911d9815b317bb6e6a4a4bfec2125&token=245502106&lang=zh_CN#rd"
class="read-more"
target="_blank">
阅读全文 →
</a>
</article>
<article class="article-preview">
<h3>认知之外的问题，我也不知道怎么做，哈哈哈：）</h3>
<p class="article-meta">发布于 2024年11月06日 21:27</p>
<p class="article-excerpt">
或许，当你面对上面这样一个建筑的时候，跟我一样很好奇为什么会存在这样的奇怪家伙，可究竟是为什么，多年前的你肯定是无从知晓的，但现在的你完全清楚，这只是AI画出来的抽象作品。
</p>
<a href="https://mp.weixin.qq.com/s?__biz=Mzg2MzczNDY5MA%3D%3D&mid=2247483858&idx=1&sn=741b775cc4d7c58c4cf6d653be49ebcf&chksm=ce755f1ff902d609a70f2d464fcdb0b164afdb6cf2cfa8aabdacaa3ab3788a82542e454db579&token=245502106&lang=zh_CN#rd"
class="read-more"
target="_blank">
阅读全文 →
</a>
</article>
</div>
</section>
<section id="products">
<h2>产品开发</h2>
<div class="products-grid">
<article class="product-card">
<div class="product-content">
<h3>Logseq-AI-Search 🔌</h3>
<p class="product-description">一款基于AI的Logseq智能搜索插件，可以根据当前block内容进行全局文档搜索，并提供AI智能总结功能。支持自定义AI模型和参数，让您的笔记检索更加智能高效。</p>
<div class="product-tags">
<span class="tag">TypeScript</span>
<span class="tag">React</span>
<span class="tag">Logseq Plugin</span>
<span class="tag">AI</span>
</div>
<div class="product-links">
<a href="https://github.com/chiimagnus/logseq-AIsearch" class="product-link" target="_blank">GitHub</a>
<a href="https://github.com/chiimagnus/logseq-AIsearch#-%E4%B8%BB%E8%A6%81%E5%8A%9F%E8%83%BD" class="product-link" target="_blank">功能介绍</a>
</div>
</div>
</article>
<article class="product-card">
<div class="product-content">
<h3>VoiceVerse 🎯</h3>
<p class="product-description">
VoiceVerse是一款macOS平台的PDF阅读器，具有文本朗读功能，让您的阅读体验更加丰富。
</p>
<div class="product-tags">
<span class="tag">Swift</span>
<span class="tag">macOS</span>
<span class="tag">PDF</span>
<span class="tag">read voice</span>
<span class="tag status">🚧 开发中</span>
</div>
<div class="product-links">
<a href="https://github.com/chiimagnus/VoiceVerse" class="product-link" target="_blank">GitHub</a>
</div>
</div>
</article>
<article class="product-card">
<div class="product-content">
<h3>《咖波的咖啡仪式》📚</h3>
<p class="product-description">
一部AI生成的科幻小说，讲述了在遥远的未来，一位名为"咖波"的外星咖啡大师降临地球，
致力于恢复人类对咖啡的敬畏之心。通过精心构建的故事情节，探讨了传统文化的传承与现代化之间的衡。
</p>
<div class="product-tags">
<span class="tag">AI创作</span>
<span class="tag">科幻小说</span>
<span class="tag">咖啡文化</span>
</div>
<div class="product-links">
<a href="https://github.com/chiimagnus/Gabo-s-Coffee-Ceremony" class="product-link" target="_blank">GitHub</a>
<a href="https://github.com/chiimagnus/Gabo-s-Coffee-Ceremony#%E8%83%8C%E6%99%AF" class="product-link" target="_blank">阅读简介</a>
</div>
</div>
</article>
</div>
</section>
<section id="about">
<h2>关于我</h2>
<div class="about-content">
<p class="about-intro">热爱创造与表达的多面体，致力于将诗意融入产品设计。</p>
<div class="tags-container">
<span class="tag">✍️ 诗人</span>
<span class="tag">💡 产品设计与开发</span>
<span class="tag">🚀 创业者</span>
<span class="tag mbti">🧠 INTJ</span>
</div>
</div>
</section>
</main>
<footer>
<div class="footer-content">
<p>© 2024 Chii Magnus. 保留所有权利。</p>
<div class="visit-counter">
<img src="https://profile-counter.glitch.me/chii_magnus'blog/count.svg" alt="访问计数" />
</div>
</div>
</footer>
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>