Skip to content

Commit 329b344

Browse files
CC11001100CC11001100
committed
feat: 重构首页为分屏布局
1. 将首页改为分屏结构，第一屏保留原有内容，第二屏添加加群信息\n2. 添加固定导航栏和页脚\n3. 导航栏右侧添加GitHub徽标和star数，实时获取并缓存一小时\n4. 添加版本号信息到页脚\n5. 优化响应式设计
1 parent 08fe596 commit 329b344

File tree

1 file changed

+298
-31
lines changed

1 file changed

+298
-31
lines changed

‎public/index.html‎

Lines changed: 298 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,39 +2,152 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
56
<title>Script Hook Goat</title>
67
<!-- Google tag (gtag.js) -->
78
<script async src="https://www.googletagmanager.com/gtag/js?id=G-YHT7S9LGC3"></script>
89
<script>
9-
window.dataLayer = window.dataLayer || [];
10-
function gtag(){dataLayer.push(arguments);}
11-
gtag('js', new Date());
12-
13-
gtag('config', 'G-YHT7S9LGC3');
10+
window.dataLayer = window.dataLayer || [];
11+
function gtag(){dataLayer.push(arguments);}
12+
gtag('js', new Date());
13+
gtag('config', 'G-YHT7S9LGC3');
1414
</script>
15+
<!-- Font Awesome图标库 -->
16+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
1517
<style>
1618
/* 全局样式 */
17-
body {
18-
font-family: Arial, sans-serif;
19+
* {
1920
margin: 0;
2021
padding: 0;
21-
background: linear-gradient(135deg, #4facfe, #00f2fe); /* 渐变色背景（蓝绿色系） */
22+
box-sizing: border-box;
23+
}
24+
25+
body {
26+
font-family: Arial, sans-serif;
27+
overflow-x: hidden;
2228
color: white;
29+
}
30+
31+
/* 导航栏样式 */
32+
.navbar {
33+
position: fixed;
34+
top: 0;
35+
left: 0;
36+
width: 100%;
37+
background-color: rgba(0, 0, 0, 0.7);
38+
backdrop-filter: blur(10px);
39+
z-index: 1000;
40+
padding: 15px 50px;
2341
display: flex;
24-
justify-content: center;
42+
justify-content: space-between;
2543
align-items: center;
44+
}
45+
46+
.navbar .logo {
47+
font-size: 1.5rem;
48+
font-weight: bold;
49+
}
50+
51+
.navbar .nav-links {
52+
display: flex;
53+
gap: 20px;
54+
}
55+
56+
.navbar .nav-links a {
57+
color: white;
58+
text-decoration: none;
59+
font-size: 1rem;
60+
transition: color 0.3s ease;
61+
}
62+
63+
.navbar .nav-links a:hover {
64+
color: #4facfe;
65+
}
66+
67+
.github-container {
68+
display: flex;
69+
align-items: center;
70+
gap: 15px;
71+
}
72+
73+
.github-link {
74+
display: flex;
75+
align-items: center;
76+
gap: 5px;
77+
color: white;
78+
text-decoration: none;
79+
transition: color 0.3s ease;
80+
}
81+
82+
.github-link:hover {
83+
color: #4facfe;
84+
}
85+
86+
.github-logo {
87+
font-size: 1.5rem;
88+
}
89+
90+
.star-count {
91+
background-color: rgba(255, 255, 255, 0.2);
92+
padding: 3px 10px;
93+
border-radius: 20px;
94+
font-size: 0.8rem;
95+
}
96+
97+
/* 页脚样式 */
98+
.footer {
99+
position: fixed;
100+
bottom: 0;
101+
left: 0;
102+
width: 100%;
103+
background-color: rgba(0, 0, 0, 0.7);
104+
backdrop-filter: blur(10px);
105+
padding: 15px 50px;
106+
text-align: center;
107+
z-index: 1000;
108+
}
109+
110+
.footer p {
111+
font-size: 0.9rem;
112+
color: rgba(255, 255, 255, 0.7);
113+
}
114+
115+
/* 屏幕样式 */
116+
.screen {
26117
height: 100vh;
118+
width: 100vw;
119+
display: flex;
27120
flex-direction: column;
121+
justify-content: center;
122+
align-items: center;
123+
padding: 80px 20px; /* 为导航栏和页脚留出空间 */
124+
scroll-snap-align: start;
28125
}
29-
126+
127+
.screen-container {
128+
scroll-snap-type: y mandatory;
129+
overflow-y: scroll;
130+
height: 100vh;
131+
}
132+
133+
/* 第一屏样式 */
134+
.screen-1 {
135+
background: linear-gradient(135deg, #4facfe, #00f2fe);
136+
}
137+
138+
/* 第二屏样式 */
139+
.screen-2 {
140+
background: linear-gradient(135deg, #43e97b, #38f9d7);
141+
}
142+
30143
/* 标题样式 */
31144
h1 {
32145
font-size: 3rem;
33-
margin-bottom: 20px;
34-
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* 文字阴影 */
35-
animation: float 3s ease-in-out infinite; /* 浮动特效 */
146+
margin-bottom: 30px;
147+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
148+
animation: float 3s ease-in-out infinite;
36149
}
37-
150+
38151
@keyframes float {
39152
0%, 100% {
40153
transform: translateY(0);
@@ -43,15 +156,15 @@
43156
transform: translateY(-10px);
44157
}
45158
}
46-
159+
47160
/* 列表样式 */
48161
ol {
49162
list-style-type: none;
50163
padding: 0;
51164
}
52-
165+
53166
/* 链接样式 */
54-
a {
167+
.screen a {
55168
text-decoration: none;
56169
color: white;
57170
font-size: 1.5rem;
@@ -63,31 +176,185 @@
63176
transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
64177
display: inline-block;
65178
}
66-
67-
a:hover {
179+
180+
.screen a:hover {
68181
background: rgba(255, 255, 255, 0.2);
69182
border-color: rgba(255, 255, 255, 0.4);
70-
transform: scale(1.05); /* 鼠标悬停时放大 */
183+
transform: scale(1.05);
71184
}
72-
185+
186+
/* 加群信息样式 */
187+
.join-group {
188+
text-align: center;
189+
max-width: 800px;
190+
background: rgba(255, 255, 255, 0.1);
191+
padding: 30px;
192+
border-radius: 15px;
193+
backdrop-filter: blur(5px);
194+
border: 2px solid rgba(255, 255, 255, 0.2);
195+
}
196+
197+
.join-group h2 {
198+
margin-bottom: 20px;
199+
font-size: 2.2rem;
200+
}
201+
202+
.join-group p {
203+
font-size: 1.2rem;
204+
margin-bottom: 20px;
205+
line-height: 1.6;
206+
}
207+
208+
.qr-code {
209+
max-width: 200px;
210+
margin: 20px auto;
211+
display: block;
212+
border: 5px solid white;
213+
border-radius: 10px;
214+
}
215+
216+
.join-button {
217+
display: inline-block;
218+
padding: 12px 30px;
219+
background: rgba(255, 255, 255, 0.2);
220+
color: white;
221+
text-decoration: none;
222+
border-radius: 30px;
223+
font-size: 1.1rem;
224+
margin-top: 20px;
225+
transition: all 0.3s ease;
226+
border: 2px solid rgba(255, 255, 255, 0.3);
227+
}
228+
229+
.join-button:hover {
230+
background: rgba(255, 255, 255, 0.3);
231+
transform: translateY(-3px);
232+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
233+
}
234+
73235
/* 响应式设计 */
74-
@media (max-width: 600px) {
236+
@media (max-width: 768px) {
237+
.navbar {
238+
padding: 15px 20px;
239+
}
240+
75241
h1 {
76242
font-size: 2rem;
77243
}
78-
a {
79-
font-size: 1.2rem;
80-
padding: 8px 16px;
244+
245+
.screen a, .join-group p {
246+
font-size: 1.1rem;
247+
}
248+
249+
.join-group h2 {
250+
font-size: 1.8rem;
251+
}
252+
253+
.github-container {
254+
gap: 5px;
255+
}
256+
}
257+
258+
@media (max-width: 480px) {
259+
.navbar .nav-links {
260+
display: none;
81261
}
82262
}
83263
</style>
84264
</head>
85265
<body>
86-
<h1>Goat List</h1>
87-
<ol>
88-
<li><a href="jsonp-request-encrypt.html">Script请求参数加密</a></li>
89-
<li><a href="jsonp-response-encrypt.html">Script请求响应加密</a></li>
90-
<li><a href="jsonp-request-encrypt-and-response-encrypt.html">Script请求参数和响应同时加密</a></li>
91-
</ol>
266+
<!-- 导航栏 -->
267+
<div class="navbar">
268+
<div class="logo">Script Hook Goat</div>
269+
<div class="nav-links">
270+
<a href="#screen-1">首页</a>
271+
<a href="#screen-2">加入我们</a>
272+
</div>
273+
<div class="github-container">
274+
<a href="https://github.com/JSREI/js-script-hook-goat" class="github-link" target="_blank">
275+
<i class="fab fa-github github-logo"></i>
276+
<span class="star-count" id="star-count">-</span>
277+
</a>
278+
</div>
279+
</div>
280+
281+
<!-- 分屏容器 -->
282+
<div class="screen-container">
283+
<!-- 第一屏：当前内容 -->
284+
<div class="screen screen-1" id="screen-1">
285+
<h1>Goat List</h1>
286+
<ol>
287+
<li><a href="jsonp-request-encrypt.html">Script请求参数加密</a></li>
288+
<li><a href="jsonp-response-encrypt.html">Script请求响应加密</a></li>
289+
<li><a href="jsonp-request-encrypt-and-response-encrypt.html">Script请求参数和响应同时加密</a></li>
290+
</ol>
291+
</div>
292+
293+
<!-- 第二屏：加群信息 -->
294+
<div class="screen screen-2" id="screen-2">
295+
<div class="join-group">
296+
<h2>加入我们的技术社区</h2>
297+
<p>欢迎加入我们的JavaScript逆向工程交流群，与其他开发者一起讨论技术、分享经验，共同进步。</p>
298+
<p>扫描下方二维码或点击按钮加入：</p>
299+
<!-- 这里可以放置实际的二维码图片 -->
300+
<img src="https://placeholder-for-qrcode.com/200x200" alt="QR Code" class="qr-code">
301+
<p>或添加微信: <strong>JSREI-Group</strong></p>
302+
<a href="https://github.com/JSREI" class="join-button" target="_blank">了解更多</a>
303+
</div>
304+
</div>
305+
</div>
306+
307+
<!-- 页脚 -->
308+
<div class="footer">
309+
<p>© 2023-2024 JSREI | 版本 1.0.0 | <a href="https://github.com/JSREI/js-script-hook-goat" style="color: rgba(255, 255, 255, 0.7);" target="_blank">GitHub</a></p>
310+
</div>
311+
312+
<!-- JavaScript -->
313+
<script>
314+
// 获取GitHub star数量
315+
function fetchStarCount() {
316+
// 检查本地缓存
317+
const cachedData = localStorage.getItem('githubStarData');
318+
if (cachedData) {
319+
const data = JSON.parse(cachedData);
320+
// 检查缓存是否在一小时内
321+
if (Date.now() - data.timestamp < 3600000) {
322+
document.getElementById('star-count').textContent = data.stars;
323+
return;
324+
}
325+
}
326+
327+
// 如果没有缓存或缓存已过期，则获取新数据
328+
fetch('https://api.github.com/repos/JSREI/js-script-hook-goat')
329+
.then(response => response.json())
330+
.then(data => {
331+
const starCount = data.stargazers_count;
332+
document.getElementById('star-count').textContent = starCount;
333+
334+
// 保存到本地缓存
335+
localStorage.setItem('githubStarData', JSON.stringify({
336+
stars: starCount,
337+
timestamp: Date.now()
338+
}));
339+
})
340+
.catch(error => {
341+
console.error('无法获取Star数量:', error);
342+
document.getElementById('star-count').textContent = 'N/A';
343+
});
344+
}
345+
346+
// 页面加载时获取star数量
347+
document.addEventListener('DOMContentLoaded', fetchStarCount);
348+
349+
// 平滑滚动
350+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
351+
anchor.addEventListener('click', function(e) {
352+
e.preventDefault();
353+
document.querySelector(this.getAttribute('href')).scrollIntoView({
354+
behavior: 'smooth'
355+
});
356+
});
357+
});
358+
</script>
92359
</body>
93360
</html>

0 commit comments

Comments
 (0)