Skip to content

02 js&ts #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
suifengwudong wants to merge 2 commits into
base: 02-JS&TS
Choose a base branch
from
Open

02 js&ts #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
be03930
02: github commits display
suifengwudong Aug 30, 2025
2acfbde
02: darkmode realized
suifengwudong Aug 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
249 changes: 249 additions & 0 deletions frontend/public/about-me.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,249 @@
#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;
}
}

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;
}
65 changes: 65 additions & 0 deletions frontend/public/about-me.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<!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="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>
</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>
Loading