https://lushuyu.site/

1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4  <meta charset="UTF-8" />
5  <meta name="viewport" content="width=device-width, initial-scale=1">
6  <title>LuShuyu.site</title>
7  
8  <!-- 字体和图标 -->
9  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10  <link href="https://fonts.loli.net/css2?family=Montserrat:wght@600;700&display=swap" rel="stylesheet">
11  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
12
13  <!-- 强制 HTTPS 重定向 -->
14  

14<script type="text/javascript">
15    var targetProtocol = "https:";
16    if (window.location.protocol !== targetProtocol) {
17      window.location.href = targetProtocol + window.location.href.substring(window.location.protocol.length);
18    }
19  </script>

19
20
21  <style>
22    /* 基础样式 */
23    * {
24      margin: 0; padding: 0; box-sizing: border-box;
25    }
26    html, body {
27      height: 100%;
28      font-family: 'Montserrat', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
29      color: #fff;
30      overflow-x: hidden;
31    }
32    a {
33      color: #fff;
34      text-decoration: none;
35      transition: all 0.3s ease;
36    }
37
38    /* 现代主题变量 */
39    :root {
40      --neon-blue: #00f3ff;
41      --neon-purple: #bc13fe;
42      --neon-pink: #ff00ff;
43      --glass-bg: rgba(255, 255, 255, 0.05);
44      --glass-border: rgba(255, 255, 255, 0.1);
45      --text-glow: 0 0 15px rgba(0, 243, 255, 0.7);
46    }
47
48    /* 炫光背景动画 */
49    body::before {
50      content: '';
51      position: fixed;
52      top: -50%; left: -50%;
53      width: 200%; height: 200%;
54      background: linear-gradient(
55        45deg,
56        var(--neon-blue) 0%,
57        var(--neon-purple) 50%,
58        var(--neon-pink) 100%
59      );
60      opacity: 0.15;
61      animation: gradientFlow 20s infinite linear;
62      z-index: -3;
63      pointer-events: none;
64    }
65
66    @keyframes gradientFlow {
67      0% { transform: rotate(0deg); }
68      100% { transform: rotate(360deg); }
69    }
70
71    /* 视频容器与 video */
72    .video-container {
73      position: fixed;
74      top: 0; left: 0;
75      width: 100%; height: 100%;
76      overflow: hidden;
77      z-index: -2;
78      background: #000;
79    }
80    #bg-video {
81      width: 100%;
82      height: 100%;
83      object-fit: cover;
84      object-position: center;
85      display: block;
86      opacity: 0.9;
87    }
88
89    /* 半透明遮罩 */
90    .video-overlay {
91      position: absolute;
92      top: 0; left: 0;
93      width: 100%; height: 100%;
94      background: rgba(0,0,0,0.4);
95      z-index: -1;
96    }
97
98    /* 加载转圈圈 - 霓虹版 */
99    #loading-spinner {
100      position: absolute;
101      top: 50%; left: 50%;
102      transform: translate(-50%, -50%);
103      width: 60px; height: 60px;
104      border: 8px solid rgba(255,255,255,0.1);
105      border-top: 8px solid var(--neon-purple);
106      border-radius: 50%;
107      animation: spin 1s linear infinite;
108      z-index: 10;
109      box-shadow: 0 0 15px var(--neon-purple);
110    }
111    @keyframes spin {
112      0% { transform: translate(-50%, -50%) rotate(0deg); }
113      100% { transform: translate(-50%, -50%) rotate(360deg); }
114    }
115
116    /* 玻璃拟态顶部导航 */
117    header {
118      position: absolute; top: 0; width: 100%;
119      display: flex;
120      justify-content: space-between;
121      align-items: center;
122      padding: 1.5rem 5%;
123      z-index: 2;
124    }
125    .logo {
126      font-size: 1.8rem;
127      font-weight: 700;
128      letter-spacing: 2px;
129      background: linear-gradient(45deg, var(--neon-blue), var(--neon-purple));
130      -webkit-background-clip: text;
131      -webkit-text-fill-color: transparent;
132      text-shadow: var(--text-glow);
133      transition: all 0.3s ease;
134    }
135    .logo:hover {
136      text-shadow: 0 0 25px var(--neon-blue);
137    }
138    nav ul {
139      display: flex; gap: 2rem; list-style: none; align-items: center;
140    }
141    nav li {
142      position: relative;
143      padding: 0.5rem 0;
144    }
145    nav li::after {
146      content: "";
147      position: absolute;
148      bottom: 0; left: 0;
149      width: 0%; height: 2px;
150      background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple));
151      transition: width 0.3s ease;
152    }
153    nav li:hover::after {
154      width: 100%;
155    }
156    nav a {
157      font-weight: 600;
158      letter-spacing: 1px;
159    }
160    nav a:hover {
161      text-shadow: var(--text-glow);
162    }
163
164    /* 中心内容 - 全息效果 */
165    .hero {
166      position: relative;
167      display: flex;
168      flex-direction: column;
169      align-items: center;
170      justify-content: center;
171      width: 100%; height: 100vh;
172      text-align: center;
173      padding: 2rem;
174      z-index: 1;
175    }
176    .hero h1 {
177      font-size: 4rem;
178      font-weight: 700;
179      margin-bottom: 2rem;
180      background: linear-gradient(45deg, #fff, var(--neon-blue));
181      -webkit-background-clip: text;
182      -webkit-text-fill-color: transparent;
183    }
184    @keyframes textGlow {
185      from { text-shadow: 0 0 10px rgba(255,255,255,0.3); }
186      to { text-shadow: 0 0 30px var(--neon-blue); }
187    }
188    .hero p {
189      font-size: 1.2rem;
190      margin-bottom: 3rem;
191      line-height: 1.8;
192      max-width: 800px;
193      padding: 2.5rem;
194    }
195
196    /* 全息按钮效果 */
197    .btn {
198      position: relative;
199      display: inline-block;
200      background: transparent;
201      border: 2px solid rgba(255,255,255,0.3);
202      padding: 1rem 2.5rem;
203      border-radius: 50px;
204      font-size: 1.1rem;
205      font-weight: 600;
206      letter-spacing: 1px;
207      cursor: pointer;
208      overflow: hidden;
209      transition: all 0.5s ease;
210      z-index: 1;
211    }
212    .btn::before {
213      content: '';
214      position: absolute;
215      top: var(--y); left: var(--x);
216      transform: translate(-50%, -50%);
217      width: 0; height: 0;
218      background: radial-gradient(var(--neon-blue), transparent);
219      transition: width 0.5s, height 0.5s;
220      z-index: -1;
221    }
222    .btn:hover {
223      border-color: var(--neon-blue);
224      box-shadow: 0 0 20px var(--neon-blue);
225      color: #fff;
226    }
227    .btn:hover::before {
228      width: 400px; height: 400px;
229    }
230
231    /* 底部备案 - 玻璃效果 */
232    footer {
233      position: absolute; bottom: 0; width: 100%;
234      text-align: center;
235      padding: 1rem 0;
236      z-index: 2;
237    }
238    footer p {
239      margin: 0.5rem 0;
240      font-size: 0.9rem;
241      opacity: 0.8;
242    }
243    footer a:hover {
244      text-shadow: 0 0 10px var(--neon-blue);
245    }
246
247/*    鼠标轨迹效果
248    .cursor-trail {
249      position: fixed;
250      width: 10px; height: 10px;
251      background: var(--neon-blue);
252      border-radius: 50%;
253      pointer-events: none;
254      animation: cursorTrail 0.6s linear forwards;
255      z-index: 9999;
256    } */
257

258    @keyframes cursorTrail {
259      0% { 
260        opacity: 1; 
261        transform: scale(1); 
262      }
263      100% { 
264        opacity: 0; 
265        transform: scale(3); 
266        background: var(--neon-purple);
267      }
268    }
269
270    /* 响应式设计 */
271    @media (max-width: 768px) {
272      header {
273        flex-direction: column;
274        padding: 1rem;
275      }
276      .logo {
277        margin-bottom: 1rem;
278      }
279      nav ul {
280        gap: 1rem;
281      }
282      .hero h1 {
283        font-size: 2.5rem;
284      }
285      .hero p {
286        padding: 1.5rem;
287        font-size: 1rem;
288      }
289    }
290  </style>
291</head>
292<body>
293  <!-- 鼠标轨迹效果 -->
294<!--  

294<script>
295    document.addEventListener('mousemove', e => {
296      const trail = document.createElement('div');
297      trail.className = 'cursor-trail';
298      trail.style.left = e.clientX -5 + 'px';
299      trail.style.top = e.clientY -5 + 'px';
300      document.body.appendChild(trail);
301      setTimeout(() => trail.remove(), 600);
302    });
303  </script>

303 -->
304
305  <div class="video-container">
306    <!-- 加载指示 -->
307    <div id="loading-spinner"></div>
308
309    <!-- 视频 -->
310    <video
311      id="bg-video"
312      autoplay
313      loop
314      muted
315      playsinline
316      preload="auto"
317      crossorigin="anonymous"
318    >
319      <source src="https://lushuyu.site/%E5%B8%8C%E5%84%BF-%E6%A0%96%E4%BA%8E%E6%B0%B8%E5%A4%9C_x264.mp4" type="video/mp4">
320      Your browser does not support HTML5 video.
321    </video>
322
323    <!-- 遮罩 -->
324    <div class="video-overlay"></div>
325  </div>
326
327  <!-- 顶部导航 -->
328  <header>
329    <div class="logo">LuShuyu</div>
330    <nav>
331      <ul>
332        <li><a href="https://www.comp.nus.edu.sg/~e1376036/Shuyu/" target="_blank">About Me</a></li>
333        <li><a href="https://blog.lushuyu.site" target="_blank">Blog</a></li>
334        <li><a href="/cdn-cgi/l/email-protection#335f46405b464a4673461d5d46401d565746">Email</a></li>
335        <li><a href="https://github.com/lushuyu" target="_blank">GitHub</a></li>
336      </ul>
337    </nav>
338  </header>
339
340  <!-- 主内容区 -->
341  <main class="hero">
342    <h1>Welcome to LuShuyu.Site</h1>
343    <p>
344      Here I feel the touch brought by the real number solution.<br>
345      Ripples of two souls now have reached our double slits.<br>
346      Casting stripes of light and dark in the world as days and nights.<br>
347      You set me free under the sun. I fly your cradle dreams to the moon and back.<br>
348      A worm will turn into a butterfly, before one can answer "who am I".<br>
349      After the ice turns into water, the sea I hang upside down will be your sky.
350    </p>
351    <a class="btn" href="https://www.comp.nus.edu.sg/~e1376036/Shuyu/" target="_blank" 
352       style="--x: 50%; --y: 50%;" 
353       onmousemove="
354         const rect = this.getBoundingClientRect();
355         this.style.setProperty('--x', event.clientX - rect.left + 'px');
356         this.style.setProperty('--y', event.clientY - rect.top + 'px');
357       ">
358      EXPLORE MORE
359    </a>
360  </main>
361
362  <!-- 备案信息 -->
363  <footer>
364    <p>This page is hosted on AliCloud.</p>
365    <p>&copy;

365 <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>

365<script>document.write(new Date().getFullYear());</script>

365 Lu Shuyu</p>
366    <p>
367      <a href="http://beian.miit.gov.cn" target="_blank">赣ICP备20006112号</a> All rights reserved.
368    </p>
369  </footer>
370
371  

371<script>
372    const bgVideo = document.getElementById('bg-video');
373    const loadingSpinner = document.getElementById('loading-spinner');
374
375    // 视频加载处理
376    bgVideo.addEventListener('canplay', () => {
377      console.log('[Video] canplay event triggered, hiding spinner.');
378      loadingSpinner.style.display = 'none';
379      bgVideo.play().catch(err => {
380        console.warn('[Video] Autoplay might be prevented:', err);
381      });
382    });
383
384    // 如果视频加载失败
385    bgVideo.addEventListener('error', () => {
386      console.error('[Video] Error loading video');
387      loadingSpinner.style.display = 'none';
388    });
389
390    // 网络检查
391    fetch(bgVideo.querySelector('source').src, { method: 'HEAD' })
392      .then(response => {
393        console.log('[Fetch check] HEAD request success:', response.status, response.statusText);
394      })
395      .catch(err => {
396        console.error('[Fetch check] HEAD request failed:', err);
397      });
398
399    // 添加滚动视差效果
400    window.addEventListener('scroll', () => {
401      const scrollPosition = window.scrollY;
402      document.querySelector('.hero h1').style.transform = `translateY(${scrollPosition * 0.3}px)`;
403      document.querySelector('.hero p').style.transform = `translateY(${scrollPosition * 0.2}px)`;
404      document.querySelector('.btn').style.transform = `translateY(${scrollPosition * 0.1}px)`;
405    });
406  </script>

406

407<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"a58e5263f85142a59a03cb7b3ab67ee2","r":1,"spa":2}' crossorigin="anonymous"></script>

407
408</body>
409</html>