From be03930751e82e2098aef3c13fbf5248725d00da Mon Sep 17 00:00:00 2001
From: suifengwudong <HCXCNC@outlook.com>
Date: Sat, 30 Aug 2025 12:42:11 +0800
Subject: [PATCH 1/2] 02: github commits display

---
 frontend/public/about-me.css  | 185 ++++++++++++++++++++++++++++++++++
 frontend/public/about-me.html |  62 ++++++++++++
 frontend/public/about-me.js   |  81 +++++++++++++++
 frontend/public/index.html    |   2 +
 4 files changed, 330 insertions(+)
 create mode 100644 frontend/public/about-me.css
 create mode 100644 frontend/public/about-me.html
 create mode 100644 frontend/public/about-me.js

diff --git a/frontend/public/about-me.css b/frontend/public/about-me.css
new file mode 100644
index 0000000..0b42328
--- /dev/null
+++ b/frontend/public/about-me.css
@@ -0,0 +1,185 @@
+#main-frame {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  width: 100%;
+  background: linear-gradient(135deg, #e3e6f3 0%, #f8f9fd 100%);
+  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
+}
+
+#top-frame {
+  width: 100%;
+  text-align: center;
+  padding: 40px 0 20px 0;
+  border-bottom: 2px solid #e0e0e0;
+  background: rgba(255,255,255,0.95);
+  box-shadow: 0 4px 16px rgba(73, 219, 232, 0.08);
+  backdrop-filter: blur(2px);
+}
+#top-frame h1 {
+  margin: 0 0 12px 0;
+  font-size: 2.2rem;
+  color: #6c3ad6;
+  letter-spacing: 2px;
+  font-weight: 700;
+}
+#top-frame a {
+  color: #2196f3;
+  text-decoration: underline;
+  font-size: 1.1rem;
+  padding: 6px 18px;
+  border-radius: 20px;
+  background: #f3f6fb;
+  transition: background 0.2s;
+}
+#top-frame a:hover {
+  background: #e3e6f3;
+}
+
+#mid-frame {
+  display: flex;
+  flex: 1;
+  width: 100%;
+  max-width: 1100px;
+  margin: 0 auto;
+  gap: 40px;
+  padding: 40px 0;
+  box-sizing: border-box;
+}
+.mid-frame-ele {
+  flex: 1;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+#about-card {
+  background: rgba(255,255,255,0.98);
+  border-radius: 16px;
+  box-shadow: 0 6px 32px rgba(108,58,214,0.08);
+  padding: 32px 28px;
+  width: 100%;
+  max-width: 420px;
+  margin-bottom: 24px;
+  transition: box-shadow 0.2s;
+}
+#about-card:hover {
+  box-shadow: 0 12px 48px rgba(108,58,214,0.16);
+}
+
+#further-info-card {
+  background: rgba(255,255,255,0.98);
+  border-radius: 16px;
+  box-shadow: 0 6px 32px rgba(33,150,243,0.08);
+  padding: 32px 28px;
+  max-width: 420px;
+  width: 100%;
+  transition: box-shadow 0.2s;
+}
+#further-info-card:hover {
+  box-shadow: 0 12px 48px rgba(33,150,243,0.16);
+}
+#further-info-card h2 {
+  color: #2196f3;
+  margin-top: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+#further-info-card h3 {
+  color: #6c3ad6;
+  margin-bottom: 8px;
+  font-size: 1.1rem;
+  font-weight: 500;
+}
+
+#about-header {
+  background: transparent;
+  border-radius: 16px 16px 0 0;
+  padding: 0 0 16px 0;
+  width: 100%;
+  text-align: center;
+}
+#about-main-content {
+  background: transparent;
+  border-radius: 0 0 16px 16px;
+  padding: 0;
+  width: 100%;
+}
+
+li {
+  background: #f6faff;
+  box-shadow: 0 2px 8px rgba(108,58,214,0.10);
+  border-radius: 12px;
+  margin-bottom: 10px;
+  padding: 12px 20px;
+  transition: background 0.2s, box-shadow 0.2s;
+  list-style: none;
+  font-size: 1rem;
+  color: #333;
+}
+li::before {
+  content: '';
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  background: linear-gradient(135deg, #6c3ad6 60%, #2196f3 100%);
+  border-radius: 50%;
+  margin-right: 12px;
+  vertical-align: middle;
+}
+li:hover {
+  background: #e3e6f3;
+  box-shadow: 0 4px 16px rgba(108,58,214,0.18);
+}
+
+a {
+  color: #2196f3;
+  text-decoration: underline;
+  transition: color 0.2s;
+}
+a:hover {
+  color: #6c3ad6;
+}
+
+#footer {
+  width: 100%;
+  text-align: center;
+  padding: 18px 0;
+  background: linear-gradient(90deg, #e3e6f3 0%, #f3f6fb 100%);
+  color: #888;
+  font-size: 1.05rem;
+  border-top: 1px solid #e0e0e0;
+  letter-spacing: 1px;
+}
+
+.commits-btn {
+  padding: 8px 20px;
+  border-radius: 8px;
+  border: none;
+  background: #6c3ad6;
+  color: #fff;
+  font-size: 1rem;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(108,58,214,0.10);
+  transition: background 0.2s, box-shadow 0.2s;
+}
+.commits-btn:hover:not(:disabled) {
+  background: #2196f3;
+  box-shadow: 0 4px 16px rgba(33,150,243,0.18);
+}
+.commits-btn:disabled {
+  background: #aaa;
+  cursor: not-allowed;
+}
+
+@media (max-width: 900px) {
+  #mid-frame {
+    flex-direction: column;
+    gap: 20px;
+    padding: 20px 0;
+  }
+  #about-card, #further-info-card {
+    max-width: 98vw;
+    margin: 0 auto 18px auto;
+  }
+}
diff --git a/frontend/public/about-me.html b/frontend/public/about-me.html
new file mode 100644
index 0000000..fa757db
--- /dev/null
+++ b/frontend/public/about-me.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="zh-Hans">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/png" sizes="32x32" href="./favicon.png" />
+    <link rel="stylesheet" href="./about-me.css" />
+    <title>关于我</title>
+    <style>
+      body {
+        height: 100vh;
+        margin: 0;
+      }
+    </style>
+    <script>
+      console.log("欢迎进入我的网页");
+    </script>
+    <script src="./about-me.js" defer></script>
+  </head>
+  <body>
+    <div id="main-frame">
+      <div id="top-frame">
+        <h1>欢迎来到我的个人介绍页面</h1>
+        <a href="./index.html">返回首页</a>
+      </div>
+      <div id="mid-frame">
+        <div id="mid-left-frame" class="mid-frame-ele">
+          <div id="about-card" class="about-card">
+            <div class="about-header" id="about-header">
+              <h1>关于我</h1>
+            </div>
+            <div class="about-main-content" id="about-main-content">
+              <p>你好！我是一个热爱编程和技术的开发者。</p>
+              <p>我喜欢探索新的技术和工具，并将它们应用到实际项目中。</p>
+              <p>在业余时间，我喜欢阅读技术书籍以及参与开源项目。</p>
+              <p>如果你对我的工作感兴趣，欢迎通过以下方式联系我（Contact Me）：</p>
+              <ul>
+                <li>电子邮件: example@example.com</li>
+                <li>GitHub: <a href="https://github.com/suifengwudong">https://github.com/suifengwudong</a></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div id="mid-right-frame" class="mid-frame-ele">
+          <div id="further-info-card" class="further-info-card">
+            <h2>更多信息</h2>
+            <p>在这里你可以找到我参与的项目和更多的个人信息。</p>
+            <div id="github-repo-list">
+              <h3>我的GitHub仓库</h3>
+              <!--TODO: 此处用js调用https://api.github.com/users/suifengwudong/repos插入-->
+            </div>
+            <div id="github-commits">
+              <h3>我的GitHub提交</h3>
+              <button id="show-commits-btn" class="commits-btn" onclick="showCommitsByClick(this)">展开</button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="footer">
+        <p>感谢您的访问！</p>
+      </div>
+  </body>
+</html>
diff --git a/frontend/public/about-me.js b/frontend/public/about-me.js
new file mode 100644
index 0000000..18314fe
--- /dev/null
+++ b/frontend/public/about-me.js
@@ -0,0 +1,81 @@
+// 展示 GitHub 仓库
+async function showRepos() {
+	const repoList = document.getElementById('github-repo-list');
+	if (!repoList) return;
+	try {
+		const res = await fetch('https://api.github.com/users/suifengwudong/repos');
+		const repos = await res.json();
+		let html = '<ul style="padding-left:0;">';
+		const filtered = repos.filter(repo => !repo.name.startsWith('HW'));
+		filtered.slice(0, 5).forEach(repo => {
+			html += `<li style="list-style:none;margin-bottom:8px;"><a href="${repo.html_url}" target="_blank">${repo.name}</a> <span style="color:#888;font-size:0.95em;">⭐${repo.stargazers_count}</span></li>`;
+		});
+		html += '</ul>';
+		repoList.insertAdjacentHTML('beforeend', html);
+	} catch (e) {
+		repoList.insertAdjacentHTML('beforeend', '<p style="color:red;">仓库获取失败</p>');
+	}
+}
+
+async function fetchGitHubCommits() {
+  const res = await fetch('https://api.github.com/users/suifengwudong/events');
+  const events = await res.json();
+  let html = '<ul style="padding-left:0;">';
+  let count = 0;
+  for (const event of events) {
+    if (event.type === 'PushEvent' && event.payload.commits) {
+      for (const commit of event.payload.commits) {
+        html += `<li style="list-style:none;margin-bottom:8px;">
+          <a href="https://github.com/${event.repo.name}/commit/${commit.sha}" target="_blank">${commit.message.slice(0, 60)}</a>
+          <span style="color:#888;font-size:0.95em;"> (${event.repo.name})</span>
+        </li>`;
+        count++;
+        if (count >= 5) break;
+      }
+    }
+    if (count >= 5) break;
+  }
+  if (count === 0) html += '<li>暂无最近提交</li>';
+  html += '</ul>';
+  return html;
+}
+
+// 提交事件
+async function showCommits(commitList) {
+	if (!commitList) return;
+	try {
+		const html = await fetchGitHubCommits();
+		commitList.insertAdjacentHTML('beforeend', html);
+	} catch (e) {
+		commitList.insertAdjacentHTML('beforeend', '<p style="color:red;">提交获取失败</p>');
+	}
+}
+async function deleteCommits(commitList) {
+	if (!commitList) return;
+	// 只删除ul和p类型的提交内容，保留h3和按钮
+	Array.from(commitList.children).forEach(child => {
+		if (child.tagName === 'UL') {
+			commitList.removeChild(child);
+		}
+	});
+}
+
+let commitsShown = false;
+async function showCommitsByClick(btn) {
+	if (!btn) return;
+	const commitList = document.getElementById('github-commits');
+	if (!commitsShown) {
+		btn.textContent = '正在加载...';
+		await showCommits(commitList);
+		btn.textContent = '收起';
+		commitsShown = true;
+	} else {
+		btn.textContent = '展开';
+		await deleteCommits(commitList);
+		commitsShown = false;
+	}
+}
+
+window.addEventListener('DOMContentLoaded', () => {
+	showRepos();      // 页面加载时展示仓库
+});
diff --git a/frontend/public/index.html b/frontend/public/index.html
index fe08636..e2b627c 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -28,6 +28,8 @@ <h1 style="color: purple;">这是一个趣味会议软件</h1>
       <a href="./main.html">进入主页</a>
       &nbsp;&nbsp;&nbsp;&nbsp;
       <a href="./about.html" target="_blank">关于这个工程</a>
+      &nbsp;&nbsp;&nbsp;&nbsp;
+      <a href="./about-me.html" target="_blank">关于我</a>
     </div>
     <p id="clock">当前时间加载中... ...</p>
     <p id="motto">每日一句加载中... ...</p>

From 2acfbde77557fcea238bc74261a8521971fb3e6d Mon Sep 17 00:00:00 2001
From: suifengwudong <HCXCNC@outlook.com>
Date: Sat, 30 Aug 2025 13:58:11 +0800
Subject: [PATCH 2/2] 02: darkmode realized

---
 frontend/public/about-me.css  | 64 +++++++++++++++++++++++++++++++++++
 frontend/public/about-me.html |  3 ++
 frontend/public/about-me.js   | 11 ++++++
 3 files changed, 78 insertions(+)

diff --git a/frontend/public/about-me.css b/frontend/public/about-me.css
index 0b42328..b3b9f8b 100644
--- a/frontend/public/about-me.css
+++ b/frontend/public/about-me.css
@@ -183,3 +183,67 @@ a:hover {
     margin: 0 auto 18px auto;
   }
 }
+
+body.dark-mode {
+  background: linear-gradient(135deg, #23243a 0%, #2c2e3e 100%) !important;
+  color: #e0e0e0;
+}
+body.dark-mode #main-frame {
+  background: linear-gradient(135deg, #23243a 0%, #2c2e3e 100%) !important;
+}
+body.dark-mode #top-frame {
+  background: rgba(30,32,48,0.95);
+  color: #e0e0e0;
+  border-bottom: 2px solid #444;
+}
+body.dark-mode #top-frame h1 {
+  color: #b39ddb;
+}
+body.dark-mode #about-card,
+body.dark-mode #further-info-card {
+  background: rgba(40,42,60,0.98);
+  box-shadow: 0 6px 32px rgba(40,42,60,0.18);
+  color: #e0e0e0;
+}
+body.dark-mode #about-header {
+  background: transparent;
+}
+body.dark-mode #about-main-content {
+  background: transparent;
+}
+body.dark-mode li {
+  background: #2c2e3e;
+  color: #e0e0e0;
+  box-shadow: 0 2px 8px rgba(40,42,60,0.18);
+}
+body.dark-mode li::before {
+  background: linear-gradient(135deg, #b39ddb 60%, #2196f3 100%);
+}
+body.dark-mode li:hover {
+  background: #23243a;
+  box-shadow: 0 4px 16px rgba(40,42,60,0.28);
+}
+body.dark-mode a {
+  color: #90caf9;
+}
+body.dark-mode a:hover {
+  color: #b39ddb;
+}
+body.dark-mode #footer {
+  background: linear-gradient(90deg, #23243a 0%, #2c2e3e 100%);
+  color: #aaa;
+  border-top: 1px solid #444;
+}
+body.dark-mode .commits-btn {
+  background: #23243a;
+  color: #e0e0e0;
+  box-shadow: 0 2px 8px rgba(40,42,60,0.18);
+}
+body.dark-mode .commits-btn:hover:not(:disabled) {
+  background: #2196f3;
+  color: #fff;
+}
+body.dark-mode .commits-btn:disabled {
+  background: #444;
+  color: #aaa;
+}
diff --git a/frontend/public/about-me.html b/frontend/public/about-me.html
index fa757db..0e69657 100644
--- a/frontend/public/about-me.html
+++ b/frontend/public/about-me.html
@@ -18,6 +18,9 @@
   </head>
   <body>
     <div id="main-frame">
+      <div id="global-tools" style="position:fixed;top:24px;right:32px;z-index:999;">
+        <button id="dark-mode-toggle" class="commits-btn" onclick="toggleDarkMode()">切换黑暗模式</button>
+      </div>
       <div id="top-frame">
         <h1>欢迎来到我的个人介绍页面</h1>
         <a href="./index.html">返回首页</a>
diff --git a/frontend/public/about-me.js b/frontend/public/about-me.js
index 18314fe..4562b4b 100644
--- a/frontend/public/about-me.js
+++ b/frontend/public/about-me.js
@@ -76,6 +76,17 @@ async function showCommitsByClick(btn) {
 	}
 }
 
+function toggleDarkMode() {
+	const body = document.body;
+	const btn = document.getElementById('dark-mode-toggle');
+	body.classList.toggle('dark-mode');
+	if (body.classList.contains('dark-mode')) {
+		btn.textContent = '切换白天模式';
+	} else {
+		btn.textContent = '切换黑暗模式';
+	}
+}
+
 window.addEventListener('DOMContentLoaded', () => {
 	showRepos();      // 页面加载时展示仓库
 });