Spaces:
Paused
Paused
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>DeepSite - AI驱动的前端助手</title> | |
| <style> | |
| html, body { | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; | |
| } | |
| body { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| background: #f8f9fa; | |
| color: #333; | |
| text-align: center; | |
| padding: 20px; | |
| } | |
| .container { | |
| background: white; | |
| border-radius: 10px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| padding: 40px; | |
| max-width: 600px; | |
| width: 100%; | |
| } | |
| h1 { | |
| margin-top: 0; | |
| color: #0066cc; | |
| } | |
| p { | |
| line-height: 1.6; | |
| margin-bottom: 20px; | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| .error { | |
| color: #dc3545; | |
| } | |
| .success { | |
| color: #198754; | |
| } | |
| .spinner { | |
| border: 4px solid rgba(0, 0, 0, 0.1); | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 50%; | |
| border-left-color: #0066cc; | |
| animation: spin 1s linear infinite; | |
| margin: 0 auto 20px; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>DeepSite</h1> | |
| <p>一个强大的 AI 驱动的前端开发助手，帮助你快速创建和优化网页。</p> | |
| <div id="loading"> | |
| <div class="spinner"></div> | |
| <p>应用正在加载中，请稍候...</p> | |
| </div> | |
| <div id="status-container"> | |
| <p id="status" class="status">正在检查服务状态...</p> | |
| <div id="details" class="hidden"></div> | |
| </div> | |
| <div id="actions" class="hidden"> | |
| <p><a href="/" id="refresh-btn">刷新页面</a> | <a href="/debug" id="debug-btn" target="_blank">查看调试信息</a></p> | |
| </div> | |
| <script> | |
| // 页面元素 | |
| const loadingEl = document.getElementById('loading'); | |
| const statusEl = document.getElementById('status'); | |
| const detailsEl = document.getElementById('details'); | |
| const actionsEl = document.getElementById('actions'); | |
| // 简单的健康检查 | |
| const checkHealth = async () => { | |
| try { | |
| statusEl.textContent = "正在连接服务器..."; | |
| statusEl.className = ""; | |
| // 添加随机参数避免缓存 | |
| const timestamp = new Date().getTime(); | |
| const response = await fetch(`/debug?t=${timestamp}`, { | |
| headers: { | |
| 'Cache-Control': 'no-cache', | |
| 'Pragma': 'no-cache' | |
| } | |
| }); | |
| if (response.ok) { | |
| try { | |
| // 尝试解析 JSON | |
| const data = await response.json(); | |
| // 健康检查成功 | |
| loadingEl.classList.add('hidden'); | |
| statusEl.textContent = "服务器连接成功！应用正在启动..."; | |
| statusEl.className = "success"; | |
| // 显示详情 | |
| detailsEl.innerHTML = ` | |
| <p>服务器信息:</p> | |
| <ul> | |
| <li>时间: ${data.time || '未知'}</li> | |
| <li>端口: ${data.port || '未知'}</li> | |
| <li>环境: ${data.env || '未知'}</li> | |
| </ul> | |
| `; | |
| detailsEl.classList.remove('hidden'); | |
| actionsEl.classList.remove('hidden'); | |
| // 3秒后刷新 | |
| setTimeout(() => { | |
| window.location.href = '/?success=1'; | |
| }, 3000); | |
| } catch (jsonError) { | |
| // 响应不是 JSON | |
| statusEl.textContent = "服务器响应格式不正确，将在5秒后重试..."; | |
| statusEl.className = "error"; | |
| setTimeout(checkHealth, 5000); | |
| } | |
| } else { | |
| statusEl.textContent = `服务器响应错误 (${response.status})，将在5秒后重试...`; | |
| statusEl.className = "error"; | |
| setTimeout(checkHealth, 5000); | |
| } | |
| } catch (err) { | |
| statusEl.textContent = `无法连接到服务器: ${err.message}，将在5秒后重试...`; | |
| statusEl.className = "error"; | |
| setTimeout(checkHealth, 5000); | |
| } | |
| }; | |
| // 页面加载后延迟1秒再检查健康状态 | |
| window.addEventListener('load', () => { | |
| setTimeout(checkHealth, 1000); | |
| }); | |
| // 刷新按钮事件 | |
| document.getElementById('refresh-btn').addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| window.location.reload(); | |
| }); | |
| </script> | |
| </div> | |
| </body> | |
| </html> | |