Spaces:

Ivan000
/

OPDS-navigator

Running

App Files Files Community

Ivan000 commited on 19 days ago

Commit

57dbc99

verified ·

1 Parent(s): b11dd90

Create index.html

Browse files

Files changed (1) hide show

index.html +177 -0

index.html ADDED Viewed

	@@ -0,0 +1,177 @@

+<!doctype html>
+<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>