diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c0cf055
--- /dev/null
+++ b/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+ 文章卡片展示
+
+
+
+
+
+
+
+
diff --git a/static/img/rili.png b/static/img/rili.png
new file mode 100644
index 0000000..aaba4d5
Binary files /dev/null and b/static/img/rili.png differ
diff --git a/static/script.js b/static/script.js
new file mode 100644
index 0000000..2781486
--- /dev/null
+++ b/static/script.js
@@ -0,0 +1,62 @@
+document.addEventListener("DOMContentLoaded", function () {
+ const container = document.getElementById('articles-container');
+ let start = 0;
+ const batchSize = 20; // 每次加载的卡片数量
+
+ function loadMoreArticles() {
+ fetch('./all.json')
+ .then(response => response.json())
+ .then(data => {
+ const articles = data.article_data.slice(start, start + batchSize);
+ articles.forEach(article => {
+ const card = document.createElement('div');
+ card.className = 'card';
+
+ const title = document.createElement('div');
+ title.className = 'card-title';
+ title.innerText = article.title;
+ card.appendChild(title);
+
+ title.onclick = () => {
+ window.open(article.link, '_blank');
+ };
+
+ const author = document.createElement('div');
+ author.className = 'card-author';
+ const authorImg = document.createElement('img');
+ authorImg.src = article.avatar;
+ author.appendChild(authorImg);
+ author.appendChild(document.createTextNode(article.author));
+ card.appendChild(author);
+
+ const date = document.createElement('div');
+ date.className = 'card-date';
+ const dateImg = document.createElement('img');
+ dateImg.src = './static/img/rili.png'; // 替换为实际的图标路径
+ date.appendChild(dateImg);
+ date.appendChild(document.createTextNode(article.created.substring(0, 10)));
+ card.appendChild(date);
+
+ const bgImg = document.createElement('img');
+ bgImg.className = 'card-bg';
+ bgImg.src = article.avatar;
+ card.appendChild(bgImg);
+
+ container.appendChild(card);
+ });
+
+ start += batchSize;
+
+ if (start >= data.article_data.length) {
+ // 如果加载完所有卡片，隐藏加载更多按钮
+ document.getElementById('load-more-btn').style.display = 'none';
+ }
+ });
+ }
+
+ // 初始加载
+ loadMoreArticles();
+
+ // 加载更多按钮点击事件
+ document.getElementById('load-more-btn').addEventListener('click', loadMoreArticles);
+});
diff --git a/static/styles.css b/static/styles.css
new file mode 100644
index 0000000..7db17ee
--- /dev/null
+++ b/static/styles.css
@@ -0,0 +1,127 @@
+body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f9;
+ margin: 0;
+ padding: 20px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ min-height: 100vh;
+}
+
+.articles-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+ gap: 8px;
+ width: 100%;
+ max-width: 1200px;
+}
+
+#load-more-btn {
+ font-size: 15px;
+ background-color: white;
+ margin-top: 20px;
+ width: 50%;
+ border-radius: 20px;
+ padding: 3px;
+ border:#b5b5b5 solid 1px;
+ transition: all 0.3s;
+}
+
+#load-more-btn:hover {
+ background-color: #0088ff;
+ width: 52%;
+ color: white;
+
+}
+
+.card {
+ background-color: white;
+ border-radius: 10px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ padding: 15px;
+ position: relative;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ height: 120px;
+}
+
+.card-title {
+ font-size: 17px;
+ margin-bottom: 10px;
+ line-height: 1.5;
+ max-height: 4.5em; /* 三行高度 */
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ transition: color 0.3s; /* 添加过渡效果 */
+}
+
+.card-title:hover {
+ /* 字体变成蓝色，下划线 */
+ color: #007bff;
+ text-decoration: underline;
+}
+
+.card-author,
+.card-date {
+ display: inline-block;
+ font-size: 12px;
+ color: #888;
+ background-color: white; /* 白色背景 */
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影 */
+ border-radius: 15px; /* 圆角 */
+ padding: 5px; /* 内边距 */
+ transition: box-shadow 0.2s; /* 过渡效果 */
+}
+
+.card-author:hover,
+.card-date:hover {
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 鼠标悬停时加深阴影 */
+}
+
+.card-author {
+ display: flex;
+ padding-right: 10px;
+ width: fit-content;
+ align-items: center;
+}
+
+.card-author img {
+ border-radius: 50%;
+ width: 15px;
+ height: 15px;
+ margin-right: 5px;
+}
+
+.card-date {
+ position: absolute;
+ z-index: 1;
+ bottom: 15px;
+ right: 15px;
+ display: flex;
+ align-items: center;
+}
+
+.card-date img {
+ width: 15px;
+ height: 15px;
+ border-radius: 20%;
+ margin-right: 5px;
+}
+
+.card-bg {
+ z-index: 0;
+ border-radius: 50%;
+ position: absolute;
+ bottom: -30px;
+ right: -30px;
+ width: 150px;
+ height: 150px;
+ opacity: 0.1;
+}