forked from asundust/NAS-Nav-iCloud
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
149 lines (138 loc) · 5.69 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>songyi的小房子</title>
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-C0LDYVRYWX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-C0LDYVRYWX');
</script>
<script>
var _hmt<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?164918d5b2a61e6ee43c4c13f112c685";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
background: url('https://tu.121318.xyz/zong/background/background_pic_121318.xyz.jpg') no-repeat center center fixed;
background-size: cover;
overflow: hidden;
}
.content-container {
background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
padding: 20px;
border-radius: 10px;
margin: 20px auto;
width: 90%; /* 宽度调整 */
max-width: 800px; /* 最大宽度调整 */
text-align: center;
}
.footer-container {
background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
padding: 10px;
border-radius: 10px;
margin: 10px auto;
width: 90%; /* 宽度调整 */
max-width: 400px; /* 最大宽度调整 */
text-align: center;
}
.page {
position: absolute;
width: 100%;
height: 100%;
transition: transform 1s ease;
}
#page1 {
transform: translateY(0);
}
#page2 {
transform: translateY(100%);
}
</style>
</head>
<body class="flex flex-col min-h-screen">
<div id="page1" class="page">
<div class="container mx-auto p-4 flex-grow">
<div class="content-container">
<img class="rounded-full h-24 w-24 mx-auto mb-4 transition-transform transform hover:scale-110" src="https://tu.121318.xyz/zong/logo/121318-ico.png" alt="profile picture">
<h1 class="text-3xl font-bold mb-4">Hi, I'm fongsera</h1>
<p class="text-lg text-zinc-600 mb-4">你好呀！</p>
<p class="text-lg text-zinc-600 mb-4">一个苦哈哈的学生党</p>
<p class="text-lg text-zinc-600 mb-4">会一些编程和网络以及电路知识---（但不多）</p>
<p class="text-lg text-zinc-600 mb-4">Reach me at: i@121318.xyz</p>
</div>
</div>
<footer class="footer-container">
<div class="container mx-auto flex flex-col items-center">
<div class="flex items-center mb-2">
<span class="mr-2">本网站由</span>
<a class="footer-support-logo mx-1" href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral" target="_blank" title="又拍云">
<img src="https://tu.121318.xyz/zong/logo/upyun/%E5%8F%88%E6%8B%8D%E4%BA%91_logo5.webp" alt="又拍云" width="60" height="31">
</a>
<span>提供CDN加速</span>
</div>
<div class="flex">
<a target="_blank" rel="nofollow" href="https://beian.miit.gov.cn/" one-link-mark="yes">豫ICP备2024080164号-2</a>
<a target="_blank" rel="nofollow" href="https://beian.mps.gov.cn/#/query/webSearch" one-link-mark="yes">豫公网安备41052202001407号</a>
</div>
</div>
</footer>
</div>
<div id="page2" class="page">
<iframe src="second_page.html" style="border:none;width:100%;height:100%;"></iframe>
</div>
<script>
let currentPage = 1;
let startY;
function wheelHandler(event) {
if (event.deltaY > 0 && currentPage === 1) {
switchToPage2();
} else if (event.deltaY < 0 && currentPage === 2) {
switchToPage1();
}
}
function touchStartHandler(event) {
startY = event.touches[0].clientY;
}
function touchMoveHandler(event) {
if (!startY) return;
let currentY = event.touches[0].clientY;
let diffY = startY - currentY;
if (diffY > 50 && currentPage === 1) {
switchToPage2();
startY = null;
} else if (diffY < -50 && currentPage === 2) {
switchToPage1();
startY = null;
}
}
function switchToPage1() {
document.getElementById('page1').style.transform = 'translateY(0)';
document.getElementById('page2').style.transform = 'translateY(100%)';
currentPage = 1;
}
function switchToPage2() {
document.getElementById('page1').style.transform = 'translateY(-100%)';
document.getElementById('page2').style.transform = 'translateY(0)';
currentPage = 2;
}
window.addEventListener('wheel', wheelHandler);
window.addEventListener('touchstart', touchStartHandler);
window.addEventListener('touchmove', touchMoveHandler);
</script>
</body>
</html>