-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathoffline.html
More file actions
1 lines (1 loc) · 3.12 KB
/
Copy pathoffline.html
File metadata and controls
1 lines (1 loc) · 3.12 KB
1
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>离线模式 | DevTools Hub</title><meta name="viewport" content="width=device-width,initial-scale=1"><style>body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;display:flex;align-items:center;justify-content:center;min-height:100vh;margin:0;background:#0f141a;color:#fff;padding:1.5rem;}main{max-width:680px;background:rgba(255,255,255,.05);backdrop-filter:blur(8px);padding:2rem 2.25rem;border:1px solid rgba(255,255,255,.08);border-radius:18px;box-shadow:0 10px 40px -10px rgba(0,0,0,.5);}h1{margin:.2rem 0 1rem;font-size:1.9rem;line-height:1.2;background:linear-gradient(135deg,#6ab8ff,#7dd6c6 55%,#ffd66c);-webkit-background-clip:text;background-clip:text;color:transparent;}p{line-height:1.6;font-size:.95rem;margin:.75rem 0;}code{background:rgba(255,255,255,.1);padding:.25rem .5rem;border-radius:6px;font-size:.85rem;}ul{padding-left:1.1rem;margin:.6rem 0;}li{margin:.35rem 0;}a{color:#4aa8ff;text-decoration:none;font-weight:600;}a:hover{text-decoration:underline;}button{background:#3498db;color:#fff;border:none;padding:.75rem 1.1rem;border-radius:10px;font-size:.95rem;font-weight:600;cursor:pointer;box-shadow:0 4px 16px -4px rgba(0,0,0,.4);display:inline-flex;align-items:center;gap:.5rem;transition:.25s;}button:hover{background:#2574a8;transform:translateY(-2px);}footer{margin-top:1.6rem;font-size:.7rem;opacity:.65;letter-spacing:.5px;text-transform:uppercase;}.quick-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.6rem;margin-top:1rem}.quick-links a{display:flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:.6rem .8rem;color:#fff;text-decoration:none;transition:.2s}.quick-links a:hover{transform:translateY(-2px);background:rgba(255,255,255,.12)}</style></head><body><main role="main" aria-labelledby="offline-title"><h1 id="offline-title">⚡ 离线模式</h1><p>您现在处于 <strong>离线</strong> 状态，DevTools Hub 的核心功能仍可继续使用（已缓存的工具）。</p><p>网络恢复后页面将自动重新加载，或您可以手动刷新。</p><p><strong>建议操作：</strong></p><ul><li>检查网络连接 / VPN</li><li>稍后刷新页面：<code>⌘ + R</code> / <code>Ctrl + R</code></li><li>已安装 PWA？尝试从应用图标重新打开</li></ul><div class="quick-links" aria-label="常用工具直达"><a href="index.html?tool=json-formatter">📝 JSON 格式化</a><a href="index.html?tool=password-generator">🔐 密码生成器</a><a href="index.html?tool=regex-tester">🔍 正则测试器</a></div><div style="margin-top:1rem;display:flex;gap:.6rem;flex-wrap:wrap"><button onclick="location.href='index.html'">🔁 返回工具首页</button><button onclick="location.reload()">🔄 重试联网</button></div><footer>DevTools Hub 离线支持 · PWA Ready</footer></main><script>function goHome(){location.href='index.html'}function retry(){location.reload()}window.addEventListener('online',goHome);setTimeout(function(){if(navigator.onLine)goHome()},2000);</script></body></html>