Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>OPDS Link — Copy & Open</title> | |
| <meta name="description" content="A tiny, accessible page with a button that copies the OPDS link to the clipboard and opens it in a new tab." /> | |
| <meta name="color-scheme" content="light dark" /> | |
| <style> | |
| :root { | |
| --bg: #0b1020; | |
| --surface: #141a2a; | |
| --text: #e6eaf2; | |
| --muted: #a7b0c0; | |
| --accent: #7aa2ff; | |
| --accent-strong: #9bb8ff; | |
| --ring: rgba(122, 162, 255, 0.35); | |
| } | |
| @media (prefers-color-scheme: light) { | |
| :root { | |
| --bg: #f6f8fc; | |
| --surface: #ffffff; | |
| --text: #101321; | |
| --muted: #4b5565; | |
| --accent: #2952ff; | |
| --accent-strong: #173cff; | |
| --ring: rgba(41, 82, 255, 0.25); | |
| } | |
| } | |
| html, body { height: 100%; } | |
| body { | |
| margin: 0; | |
| font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; | |
| color: var(--text); | |
| background: radial-gradient(1200px 800px at 70% -10%, rgba(122,162,255,.15), transparent 60%), | |
| radial-gradient(1200px 800px at -10% 110%, rgba(122,162,255,.12), transparent 60%), | |
| var(--bg); | |
| display: grid; | |
| place-items: center; | |
| padding: 24px; | |
| } | |
| .card { | |
| width: min(760px, 100%); | |
| background: var(--surface); | |
| border: 1px solid rgba(122,162,255, .15); | |
| border-radius: 20px; | |
| box-shadow: 0 10px 30px rgba(0,0,0,.25); | |
| padding: 28px; | |
| } | |
| h1 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 6px; } | |
| p.desc { margin: 0 0 18px; color: var(--muted); } | |
| .row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; } | |
| .url { | |
| width: 100%; | |
| border: 1px solid rgba(122,162,255,.25); | |
| background: transparent; | |
| color: inherit; | |
| padding: 12px 14px; | |
| border-radius: 12px; | |
| font-size: 0.95rem; | |
| outline: none; | |
| } | |
| .url:focus { box-shadow: 0 0 0 5px var(--ring); border-color: var(--accent); } | |
| .btn { | |
| cursor: pointer; | |
| border: none; | |
| padding: 12px 16px; | |
| border-radius: 12px; | |
| font-weight: 600; | |
| font-size: 0.98rem; | |
| color: white; | |
| background: linear-gradient(180deg, var(--accent), var(--accent-strong)); | |
| transition: transform .06s ease, filter .2s ease, box-shadow .2s ease; | |
| box-shadow: 0 6px 18px rgba(41,82,255,.25); | |
| } | |
| .btn:focus-visible { outline: none; box-shadow: 0 0 0 5px var(--ring), 0 6px 18px rgba(41,82,255,.25); } | |
| .btn:active { transform: translateY(1px); } | |
| .hint { margin-top: 12px; font-size: .9rem; color: var(--muted); } | |
| .status { margin-top: 10px; font-size: .95rem; } | |
| .ok { color: #29c568; } | |
| .warn { color: #d98f15; } | |
| .err { color: #ef4444; } | |
| .footer { margin-top: 18px; font-size: .85rem; color: var(--muted); } | |
| a { color: var(--accent); } | |
| </style> | |
| </head> | |
| <body> | |
| <main class="card" role="main"> | |
| <h1 id="title">OPDS Directory Link</h1> | |
| <p class="desc" id="subtitle">Press the button to copy the OPDS link and open it in a new tab. Works with keyboard and screen readers.</p> | |
| <div class="row"> | |
| <input id="opdsUrl" class="url" type="url" inputmode="url" aria-labelledby="title subtitle" readonly | |
| value="https://ivan000-opds-navigator.static.hf.space/index.xml" /> | |
| <button id="go" class="btn" aria-describedby="subtitle">Copy & Open</button> | |
| </div> | |
| <p id="status" class="status" role="status" aria-live="polite"></p> | |
| <p class="hint">Tip: you can also open the link directly: | |
| <a id="direct" target="_blank" rel="noopener" href="https://ivan000-opds-navigator.static.hf.space/index.xml">open in new tab</a>. | |
| </p> | |
| <p class="footer">What is this? An OPDS directory is a catalog of catalogs. This page simply helps you copy the URL and open it quickly.</p> | |
| </main> | |
| <script> | |
| (function() { | |
| const url = "https://ivan000-opds-navigator.static.hf.space/index.xml"; | |
| const btn = document.getElementById('go'); | |
| const status = document.getElementById('status'); | |
| const input = document.getElementById('opdsUrl'); | |
| function setStatus(msg, cls) { | |
| status.className = 'status ' + (cls || ''); | |
| status.textContent = msg; | |
| } | |
| async function copyText(text) { | |
| // Try modern API first | |
| try { | |
| if (navigator.clipboard && navigator.clipboard.writeText) { | |
| await navigator.clipboard.writeText(text); | |
| return true; | |
| } | |
| } catch (e) { /* fall back */ } | |
| // Fallback for older browsers | |
| try { | |
| const ta = document.createElement('textarea'); | |
| ta.value = text; | |
| ta.setAttribute('readonly', ''); | |
| ta.style.position = 'fixed'; | |
| ta.style.top = '-1000px'; | |
| document.body.appendChild(ta); | |
| ta.select(); | |
| const ok = document.execCommand('copy'); | |
| document.body.removeChild(ta); | |
| return ok; | |
| } catch (e) { | |
| return false; | |
| } | |
| } | |
| async function handleClick() { | |
| // Copy | |
| const copied = await copyText(url); | |
| if (copied) setStatus('Link copied to clipboard.', 'ok'); | |
| else setStatus('Could not copy automatically. The link is selected above — press Ctrl/Cmd+C.', 'warn'); | |
| // Open | |
| const w = window.open(url, '_blank', 'noopener'); | |
| if (!w) setStatus('Your browser blocked the new tab. Allow pop-ups for this site and try again.', 'err'); | |
| // Select the input for manual copy convenience | |
| input.focus(); | |
| input.select(); | |
| } | |
| btn.addEventListener('click', handleClick); | |
| // Also trigger on Enter when focusing the button | |
| btn.addEventListener('keydown', e => { | |
| if (e.key === 'Enter' || e.key === ' ') { | |
| e.preventDefault(); | |
| btn.click(); | |
| } | |
| }); | |
| })(); | |
| </script> | |
| </body> | |
| </html> | |