Spaces:
Running
Running
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PDF 预览</title> | |
| <style> | |
| *{margin:0;padding:0;box-sizing:border-box} | |
| html,body{height:100%;overflow:hidden} | |
| body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei',sans-serif;background:#0f172a;color:#e2e8f0;display:flex;flex-direction:column} | |
| .topbar{ | |
| background:#1e293b;padding:0.5rem 1rem; | |
| display:flex;align-items:center;gap:0.6rem;border-bottom:1px solid #334155; | |
| flex-shrink:0;flex-wrap:wrap;min-height:48px; | |
| } | |
| .topbar .back-btn{ | |
| color:#94a3b8;text-decoration:none;font-size:0.82rem;display:flex;align-items:center;gap:0.25rem; | |
| transition:color 0.15s;white-space:nowrap; | |
| } | |
| .topbar .back-btn:hover{color:white} | |
| .topbar .sep{color:#475569;font-size:0.75rem} | |
| .topbar .fname{ | |
| font-size:0.85rem;color:#cbd5e1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:100px; | |
| } | |
| .topbar a.dl-btn{ | |
| color:#fbbf24;text-decoration:none;font-size:0.78rem;font-weight:600; | |
| padding:0.3rem 0.7rem;border-radius:6px;border:1px solid rgba(251,191,36,0.35);transition:all 0.15s;white-space:nowrap; | |
| } | |
| .topbar a.dl-btn:hover{background:rgba(251,191,36,0.1)} | |
| /* embed 全屏铺满 */ | |
| .embed-wrap{flex:1;position:relative;background:#1a1f2e} | |
| .embed-wrap embed,.embed-wrap iframe{ | |
| position:absolute;inset:0;width:100%;height:100%;border:none; | |
| } | |
| .loading-msg{ | |
| display:flex;flex-direction:column;align-items:center;justify-content:center; | |
| text-align:center;color:#94a3b8;gap:0.75rem;height:100%; | |
| } | |
| .loading-msg .spinner{width:36px;height:36px;border:3px solid #334155;border-top-color:#6366f1;border-radius:50%;animation:spin 0.7s linear infinite} | |
| @keyframes spin{to{transform:rotate(360deg)}} | |
| .error-msg{ | |
| display:flex;flex-direction:column;align-items:center;justify-content:center; | |
| text-align:center;color:#94a3b8;padding:2rem;gap:1rem;height:100%; | |
| } | |
| .error-msg .icon{font-size:3rem} | |
| .error-msg p{max-width:420px;line-height:1.6;font-size:0.9rem} | |
| .error-msg a{ | |
| display:inline-block;padding:0.55rem 1.5rem; | |
| background:linear-gradient(135deg,#f59e0b,#d97706);color:white;text-decoration:none; | |
| border-radius:10px;font-weight:600;font-size:0.9rem;transition:all 0.15s; | |
| } | |
| .error-msg a:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(245,158,11,0.3)} | |
| .error-msg .gdoc-link{ | |
| background:linear-gradient(135deg,#6366f1,#4f46e5); | |
| font-size:0.82rem;padding:0.4rem 1rem; | |
| } | |
| .error-msg .gdoc-link:hover{box-shadow:0 4px 16px rgba(99,102,241,0.3)} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="topbar"> | |
| <a class="back-btn" href="javascript:history.back()">← 返回列表</a> | |
| <span class="sep">|</span> | |
| <span class="fname" id="fileName">加载中...</span> | |
| <a class="dl-btn" id="downloadBtn" href="" target="_blank" rel="noopener">⬇ 下载</a> | |
| </div> | |
| <div class="embed-wrap" id="embedWrap"> | |
| <div class="loading-msg"><div class="spinner"></div><span>正在加载 PDF...</span></div> | |
| </div> | |
| <script> | |
| </script> | |
| </body> | |
| </html> | |