Hugging Face's logo

Spaces:
Ivan000
/
OPDS-navigator
Running

App Files Community
OPDS-navigator
File size: 6,121 Bytes 
57dbc99
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
 
<!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>