Home/index.html at main · xOS/Home · GitHub

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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE HTML>
<!--
	Identity by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
	<head>
		<title>个人主页</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="Cache-Control" content="no-transform">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-transform">
		<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
		<link rel="stylesheet" href="css/main.css" />
		<link rel="stylesheet" href="css/all.min.css">
		<style>
			/* 强制覆盖可能的冲突样式 */
			[class^="fa-"], [class*=" fa-"]::before {
				font-family: "Font Awesome 5 Brands", "Font Awesome 5 Pro", "Font Awesome 5 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro", "Font Awesome 6 Free", sans-serif !important;
				font-weight: 900 !important;
				}
			/* Modal 样式调整 */
			#modal {
				display: none;
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				background: #ffffff50;
				padding: 20px;
				border-radius: 10px;
				box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
				width: 90%;
				max-width: 500px;
				overflow-y: auto; /* 添加滚动条 */
				z-index: 1000;
				font-size: 0.9em; /* 缩小字体 */
			}
			#modal h2 {
				margin-top: 0;
				font-size: 1.3em; /* 缩小标题字体 */
				color: #333;
			}
			#modal a#close-modal {
				float: right;
				text-decoration: none;
				font-size: 1.3em; /* 缩小关闭按钮字体 */
				color: #999;
			}
			#modal a#close-modal:hover {
				color: #333;
			}
			#overlay {
				display: none;
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.6); /* 修复背景颜色 */
				backdrop-filter: blur(10px); /* 磨砂效果 */
				-webkit-backdrop-filter: blur(10px); /* 兼容 Safari */
				z-index: 999;
			}
		</style>
		<noscript><link rel="stylesheet" href="css/noscript.css" /></noscript>
	</head>
	<body class="is-preload">
		<!-- Modal -->
		<div id="modal" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:#ffffff50; padding:20px; border-radius:8px; box-shadow:0 4px 8px rgba(0,0,0,0.2); z-index:1000;">
			<a href="#" id="close-modal" style="float:right; text-decoration:none; font-size:20px;">&times;</a>
			<!-- <hr /> -->
			<h2>给我留言</h2>
			<form method="post" action="#" id="send-message">
				<div class="fields">
					<div class="field">
						<input type="text" name="name" id="name" placeholder="姓名" />
					</div>
					<div class="field">
						<input type="email" name="email" id="email" placeholder="电子邮件" />
					</div>
					<div class="field">
						<textarea name="message" id="message" placeholder="消息内容" rows="4"></textarea>
					</div>
					<!-- <div class="field">
						<input type="checkbox" id="human" name="human" /><label for="human">我是真人</label>
					</div> -->
					<div
  class="cf-turnstile"
  data-sitekey="0x4AAAAAABDsN3iq_ff41OVi"
  data-callback="javascriptCallback"
></div>
				</div>
				<ul class="actions special">
					<!-- <li><a href="#" class="button">发送</a></li> -->
					<li><input type="submit" value="发送" class="primary" /></li>
				</ul>
			</form>
			<!-- <hr /> -->
		</div>
		<div id="overlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:999;"></div>
		<!-- Wrapper -->
			<div id="wrapper">
				<!-- Main -->
					<section id="main">
						<header>
							<span class="avatar"><img src="image/avatar.jpg" alt="" /></span>
							<h1>春夏</h1>
							<p>热爱可抵漫长岁月</p>
						</header>
						<footer>
							<ul class="icons">
								<li><a href="http://www.nange.cn/" target="_blank" class="icon fa-solid fa-blog" title="我的互联网冲浪日记"><span class="label">博客</span></a></li>
								<li><a href="http://api.aapls.com/" target="_blank" rel="noopener" class="icon fa-solid fa-location-dot" title="GeoIP 查询"><span class="label"> IP 信息查询</span></a></li>
								<li><a href="http://server.aapls.com/" target="_blank" rel="noopener" class="icon fa-regular fa-server" title="服务器探针"><span class="label">服务器探针</span></a></li>
								<li><a href="http://status.nange.cn/" target="_blank" rel="noopener" class="icon fa-brands fa-sellsy" title="服务状态"><span class="label">服务状态</span></a></li>
								<li><a href="https://donate.stripe.com/28obMffW78Pogb6145" target="_blank" rel="noopener" class="icon fa-brands fa-stripe-s" title="捐赠支持"><span class="label">捐赠支持</span></a></li>
								<li><a href="http://www.instagram.com/itskip" target="_blank" rel="nofollow noopener" class="icon fa-brands fa-instagram" title="关注我的 Instagram"><span class="label">Instagram</span></a></li>
								<li><a href="http://t.me/CloudEvent" target="_blank" rel="nofollow noopener" class="icon fa-brands fa-telegram" title="收藏夹"><span class="label">Telegram</span></a></li>
								<li><a href="http://github.com/xOS" target="_blank" rel="nofollow noopener" class="icon fa-brands fa-github-alt"  title="Fork me on Github"><span class="label">Github</span></a></li>
								<li><a href="http://x.com/OneTip" target="_blank" rel="nofollow noopener" class="icon fa-brands fa-x-twitter" title="Twitter 关注我"><span class="label">Twitter</span></a></li>
								<li><a href="https://ifdian.net/a/herby" target="_blank" rel="nofollow noopener" class="icon fa fa-hand-holding-heart" title="爱发电赞助"><span class="label">爱发电赞助</span></a></li>
								<li><a href="mailto:about#nange.cn" target="_blank" rel="nofollow noopener" class="icon fa-solid fa-envelope" title="给我发邮件"><span class="label">Email</span></a></li>
								<!-- <li><a href="#about" class="icon fa-regular fa-messages" title="给我留言"><span class="label">留言</span></a></li> -->
							</ul>
						</footer>
					</section>
				<!-- Footer -->
					<footer id="footer">
						<ul class="copyright">
							<li>&copy; 2026 <a href="http://www.nange.cn/" target="_blank">楠格</a></li>
							<li><a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow">渝ICP备1800000号</a></li>
						</ul>
					</footer>

			</div>

			<script>
				if ('addEventListener' in window) {
					window.addEventListener('load', function() { document.body.className = document.body.className.replace(/\bis-preload\b/, ''); });
					document.body.className += (navigator.userAgent.match(/(MSIE|rv:11\.0)/) ? ' is-ie' : '');
				}
			</script>
			<!-- <script>
				document.querySelector('a[href="#about"]').addEventListener('click', function(event) {
					event.preventDefault();
					document.getElementById('modal').style.display = 'block';
					document.getElementById('overlay').style.display = 'block';
				});
				document.getElementById('close-modal').addEventListener('click', function(event) {
					event.preventDefault();
					document.getElementById('modal').style.display = 'none';
					document.getElementById('overlay').style.display = 'none';
				});
				document.getElementById('overlay').addEventListener('click', function() {
					document.getElementById('modal').style.display = 'none';
					this.style.display = 'none';
				});
			</script> -->
	</body>
</html>