Enhance redirect page with improved styles and loading animations; update JavaScript for better status handling and manual redirect link

css/watch.css

@@ -6,20 +6,52 @@ body {
     margin: 0;
     padding: 0;
     height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .redirect-container {
     text-align: center;
-    padding-top: 100px;
-    max-width: 600px;
-    margin: 0 auto;
+    max-width: 90%;
+    width: 380px;
+    padding: 2rem;
+    background-color: rgba(0, 0, 0, 0.3);
+    border-radius: 16px;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.logo-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 1.5rem;
+}
+
+.logo-icon {
+    width: 40px;
+    height: 40px;
+    color: #00ccff;
+    margin-right: 10px;
+}
+
+.logo-text {
+    font-size: 2rem;
+    margin: 0;
+    background: linear-gradient(to right, #00ccff, #ff3c78);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
 }
 
 .loading-animation {
     display: inline-block;
     width: 50px;
     height: 50px;
-    border: 4px solid rgba(255, 255, 255, 0.3);
+    border: 3px solid rgba(255, 255, 255, 0.2);
     border-radius: 50%;
     border-top-color: #00ccff;
     animation: spin 1s linear infinite;
@@ -33,9 +65,64 @@ body {
 .redirect-message {
     font-size: 1.2rem;
     margin-bottom: 10px;
+    font-weight: 500;
+}
+
+#redirect-status {
+    font-size: 0.9rem;
+    color: #8599b2;
+    margin-bottom: 1.5rem;
+    height: 20px;
 }
 
 .redirect-hint {
     font-size: 0.9rem;
     color: #8599b2;
+    margin-top: 20px;
+}
+
+.redirect-hint a {
+    color: #00ccff;
+    text-decoration: none;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    padding: 5px 10px;
+    border-radius: 4px;
+    background-color: rgba(0, 204, 255, 0.1);
+}
+
+.redirect-hint a:hover {
+    background-color: rgba(0, 204, 255, 0.2);
+    text-decoration: underline;
+}
+
+/* 移动端优化 */
+@media (max-width: 480px) {
+    .redirect-container {
+        padding: 1.5rem;
+        width: 85%;
+    }
+
+    .logo-icon {
+        width: 30px;
+        height: 30px;
+    }
+
+    .logo-text {
+        font-size: 1.7rem;
+    }
+
+    .loading-animation {
+        width: 40px;
+        height: 40px;
+        margin-bottom: 15px;
+    }
+
+    .redirect-message {
+        font-size: 1rem;
+    }
+
+    #redirect-status {
+        font-size: 0.8rem;
+    }
 }

js/watch.js

@@ -6,6 +6,31 @@ window.onload = function() {
     // 创建player.html的URL
     let playerUrl = "player.html";
     
+    // 更新状态文本
+    const statusElement = document.getElementById('redirect-status');
+    const manualRedirect = document.getElementById('manual-redirect');
+    let statusMessages = [
+        "准备视频数据中...",
+        "正在加载视频信息...",
+        "即将开始播放...",
+    ];
+    let currentStatus = 0;
+    
+    // 状态文本动画
+    let statusInterval = setInterval(() => {
+        if (currentStatus >= statusMessages.length) {
+            currentStatus = 0;
+        }
+        if (statusElement) {
+            statusElement.textContent = statusMessages[currentStatus];
+            statusElement.style.opacity = 0.7;
+            setTimeout(() => {
+                if (statusElement) statusElement.style.opacity = 1;
+            }, 300);
+        }
+        currentStatus++;
+    }, 1000);
+    
     // 如果有查询参数，添加到player.html的URL
     if (currentParams.toString()) {
         playerUrl += "?" + currentParams.toString();
@@ -34,12 +59,26 @@ window.onload = function() {
     }
     
     // 将返回URL添加到player.html的参数中
-    playerUrl += playerUrl.includes('?') ? '&' : '?';
-    playerUrl += 'returnUrl=' + encodeURIComponent(returnUrl);
+    const separator = playerUrl.includes('?') ? '&' : '?';
+    playerUrl += separator + 'returnUrl=' + encodeURIComponent(returnUrl);
     
     // 同时保存在localStorage中，作为备用
     localStorage.setItem('lastPageUrl', returnUrl);
     
+    // 标记来自搜索页面
+    if (returnUrl.includes('/s=') || returnUrl.includes('?s=')) {
+        localStorage.setItem('cameFromSearch', 'true');
+        localStorage.setItem('searchPageUrl', returnUrl);
+    }
+    
+    // 更新手动重定向链接
+    if (manualRedirect) {
+        manualRedirect.href = playerUrl;
+    }
+    
     // 重定向到播放器页面
-    window.location.href = playerUrl;
+    setTimeout(() => {
+        clearInterval(statusInterval);
+        window.location.href = playerUrl;
+    }, 2800); // 稍微早于meta refresh的时间，确保我们的JS控制重定向
 };

watch.html

@@ -2,17 +2,25 @@
 <html lang="zh">
 <head>
     <meta charset="UTF-8">
-    <meta http-equiv="refresh" content="0; url=player.html">
-    <title>重定向到播放器</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="refresh" content="3; url=player.html">
+    <title>正在跳转到播放器...</title>
     <link rel="manifest" href="manifest.json">
     <link rel="stylesheet" href="css/watch.css">
     <script src="js/watch.js"></script>
 </head>
 <body>
     <div class="redirect-container">
+        <div class="logo-container">
+            <svg class="logo-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
+            </svg>
+            <h1 class="logo-text">LibreTV</h1>
+        </div>
         <div class="loading-animation"></div>
-        <div class="redirect-message">正在重定向到播放器...</div>
-        <p class="redirect-hint">如果页面没有自动跳转，请<a href="player.html" style="color: #00ccff;">点击这里</a></p>
+        <div class="redirect-message">正在加载播放器...</div>
+        <div id="redirect-status">准备视频数据中，请稍候...</div>
+        <p class="redirect-hint">如果页面没有自动跳转，请<a href="player.html" id="manual-redirect">点击这里</a></p>
     </div>
 </body>
 </html>