diff --git a/frontend/public/about-me.css b/frontend/public/about-me.css new file mode 100644 index 0000000..9022300 --- /dev/null +++ b/frontend/public/about-me.css @@ -0,0 +1,154 @@ +body { + min-height: 100vh; + margin: 0; + padding: 40px 20px; + box-sizing: border-box; + font-family: Arial, "microsoft YaHei", sans-serif; + color: #1f2937; + background-color: #f4f5f7; +} + +.card { + max-width: 720px; + margin: 0 auto; + padding: 32px; + background-color: white; + border-radius: 16px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); +} + +h1 { + margin-top: 0; + color: #2563eb; +} + +h2 { + margin-top: 28px; + padding-left: 10px; + color: #374151; + border-left: 4px solid #2563eb; +} + +ul, +ol { + padding-left: 24px; + line-height: 1.8; +} + +li { + margin-bottom: 6px; +} + +a { + display: inline-block; + margin-top: 20px; + padding: 10px 16px; + color: white; + background-color: #2563eb; + text-decoration: none; + border-radius: 8px; +} + +a:hover { + background-color: #1d4ed8; +} + +@media (max-width: 600px) { + body { + padding: 20px 12px; + } + + .card { + padding: 24px 20px; + border-radius: 12px; + } + + h1 { + font-size: 28px; + } +} + +#theme-toggle { + float: right; + padding: 8px 12px; + border: none; + border-radius: 8px; + color: #1f2937; + background-color: #e5e7eb; + font: inherit; + cursor: pointer; +} + +body, +.card, +h1, +h2, +#theme-toggle { + transition: color 0.3s, background-color 0.3s, border-color 0.3s; +} + +body.dark-theme { + color: #e5e7eb; + background-color: #111827; +} + +body.dark-theme .card { + background-color: #1f2937; +} + +body.dark-theme h1 { + color: #60a5fa; +} + +body.dark-theme h2 { + color: #e5e7eb; + border-left-color: #60a5fa; +} + +body.dark-theme #theme-toggle { + color: #f9fafb; + background-color: #374151; +} + +.github-section { + margin-top: 28px; +} + +#github-profile { + align-items: center; + gap: 20px; + padding: 20px; + border: 1px solid #d1d5db; + border-radius: 12px; + background-color: #f9fafb; + transition: background-color 0.3s, border-color 0.3s; +} + +#github-profile:not([hidden]) { + display: flex; +} + +#github-avatar { + flex-shrink: 0; + border-radius: 50%; +} + +#github-profile p { + margin: 8px 0 0; +} + +#github-link { + margin-top: 0; +} + +body.dark-theme #github-profile { + border-color: #4b5563; + background-color: #111827; +} + +@media (max-width: 600px) { + #github-profile:not([hidden]) { + align-items: flex-start; + flex-direction: column; + } +} diff --git a/frontend/public/about-me.html b/frontend/public/about-me.html new file mode 100644 index 0000000..9d45a48 --- /dev/null +++ b/frontend/public/about-me.html @@ -0,0 +1,56 @@ + + + + + + + + + 关于我 + + + +
+ +

关于我

+

我是一名热爱编程的非专业学生，来自秀钟书院三字班

+

我的爱好

+ +

我的学习目标

+
    +
  1. 学会web开发
    2. +
+
+

我的 GitHub

+

正在加载 GitHub 信息...

+ + +
+ 返回首页 +
+ + + diff --git a/frontend/public/about-me.js b/frontend/public/about-me.js new file mode 100644 index 0000000..f52f7fe --- /dev/null +++ b/frontend/public/about-me.js @@ -0,0 +1,43 @@ +const themeToggleButton = document.getElementById("theme-toggle"); + +themeToggleButton.addEventListener("click", () => { + document.body.classList.toggle("dark-theme"); + + const isDark = document.body.classList.contains("dark-theme"); + themeToggleButton.textContent = isDark + ? "切换亮色模式" + : "切换暗色模式"; +}); + +const githubStatus = document.getElementById("github-status"); +const githubProfile = document.getElementById("github-profile"); +const githubAvatar = document.getElementById("github-avatar"); +const githubLink = document.getElementById("github-link"); +const githubRepoCount = document.getElementById("github-repo-count"); + +const loadGithubProfile = async () => { + try { + const response = await fetch( + "https://api.github.com/users/liyizhen23" + ); + + if (!response.ok) { + throw new Error(`请求失败：${response.status}`); + } + + const user = await response.json(); + + githubAvatar.src = user.avatar_url; + githubLink.href = user.html_url; + githubLink.textContent = `@${user.login}`; + githubRepoCount.textContent = user.public_repos; + + githubStatus.hidden = true; + githubProfile.hidden = false; + } catch (error) { + console.error("GitHub 信息加载失败", error); + githubStatus.textContent = "GitHub 信息加载失败，请稍后重试。"; + } +}; + +loadGithubProfile(); diff --git a/frontend/public/index.html b/frontend/public/index.html index fe08636..e2938a1 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -28,6 +28,8 @@

这是一个趣味会议软件

进入主页      关于这个工程 +      + 关于我

当前时间加载中... ...

每日一句加载中... ...