Skip to content

Commit 9c30a16

Browse files
DavidingPlusDavidingPlus
committed
beautify home page
1 parent 4329c23 commit 9c30a16

15 files changed

+7560
-9
lines changed

‎index.html

+15-9
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,26 @@
44
<head>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>code-browser | DavidingPlus</title>
7+
<title>Code Browser | DavidingPlus</title>
8+
<link rel="stylesheet" href="./source/font-awesome/css/all.min.css">
9+
<link rel="stylesheet" href="./source/css/styles.css">
810
</head>
911

10-
11-
<!-- TODO 后续优化本界面 UI -->
12-
1312
<body>
13+
<header>
14+
<h1><i class="fa fa-code"></i> Code Browser</h1>
15+
</header>
16+
17+
<main id="link-container">
18+
<!-- 链接将由 link-generator.js 动态生成 -->
19+
</main>
1420

15-
<a href="./qtbase-6.5.0/">qtbase-6.5.0</a>
16-
<br><br>
17-
<a href="./fmt-8.1.0/">fmt-8.1.0</a>
18-
<br><br>
19-
<a href="./googletest-1.12.1/">googletest-1.12.1</a>
21+
<footer>
22+
<p>&copy; <span id="currentYear"></span> DavidingPlus, All rights reserved.</p>
23+
</footer>
2024

25+
<script src="./source/js/link-generator.js"></script>
26+
<script src="./source/js/update-year.js"></script>
2127
</body>
2228

2329
</html>

‎source/README.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# source
2+
3+
- `css`：存放`css`文件
4+
- `js`：存放`js`文件
5+
- `font-awesome`：一个开源的样式参考
6+
- 使用的是`font-awesome 6.0.0-beta3`
7+
- 源文件地址：[https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css](https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css)
8+
- `data`：存放链接的具体数据于`links.json`
9+

‎source/css/styles.css

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
body {
2+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
3+
background-color: #f5f5f5;
4+
margin: 0;
5+
padding: 0;
6+
display: flex;
7+
flex-direction: column;
8+
align-items: center;
9+
justify-content: center;
10+
min-height: 100vh;
11+
color: #333;
12+
}
13+
14+
header {
15+
background-color: #007acc;
16+
color: white;
17+
width: 100%;
18+
padding: 1.5em 0;
19+
text-align: center;
20+
margin-bottom: 2em;
21+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
22+
}
23+
24+
header h1 {
25+
margin: 0;
26+
font-size: 2em;
27+
}
28+
29+
main {
30+
background-color: white;
31+
border-radius: 12px;
32+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
33+
padding: 2em;
34+
width: 90%;
35+
max-width: 800px;
36+
text-align: center;
37+
transition: transform 0.2s;
38+
}
39+
40+
main:hover {
41+
transform: translateY(-5px);
42+
}
43+
44+
a {
45+
display: block;
46+
width: fit-content;
47+
margin: 1em auto;
48+
padding: 0.5em 1em;
49+
text-decoration: none;
50+
color: #007acc;
51+
font-size: 1.2em;
52+
transition: color 0.2s, transform 0.2s, box-shadow 0.2s;
53+
border: 2px solid #007acc;
54+
border-radius: 5px;
55+
}
56+
57+
a:hover {
58+
color: #005f99;
59+
transform: scale(1.05);
60+
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
61+
}
62+
63+
footer {
64+
margin-top: auto;
65+
background-color: #007acc;
66+
color: white;
67+
width: 100%;
68+
padding: 1em 0;
69+
text-align: center;
70+
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
71+
}
72+
73+
footer p {
74+
margin: 0;
75+
}
76+
77+
.fa {
78+
margin-right: 8px;
79+
}

‎source/data/links.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
[
2+
{
3+
"href": "./qtbase-6.5.0/",
4+
"text": "qtbase-6.5.0"
5+
},
6+
{
7+
"href": "./fmt-8.1.0/",
8+
"text": "fmt-8.1.0"
9+
},
10+
{
11+
"href": "./googletest-1.12.1/",
12+
"text": "googletest-1.12.1"
13+
},
14+
{
15+
"href": "https://elixir.bootlin.com/linux/latest/source",
16+
"text": "linux"
17+
}
18+
]

0 commit comments

Comments
 (0)