Hugging Face's logo

Spaces:
iptvrd
/
anym3u8python
Sleeping

App Files Community
iptvrd commited on
Commit
a8299b4
·
verified ·
1 Parent(s): f788bbf

Create templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +167 -0
templates/index.html ADDED
@@ -0,0 +1,167 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="es">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Extractor de URLs m3u8</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <style>
9
+ body {
10
+ padding: 20px;
11
+ }
12
+ #results {
13
+ margin-top: 20px;
14
+ }
15
+ .loading {
16
+ display: none;
17
+ margin-top: 15px;
18
+ }
19
+ .url-item {
20
+ display: flex;
21
+ align-items: center;
22
+ margin-bottom: 10px;
23
+ }
24
+ .url-text {
25
+ flex-grow: 1;
26
+ overflow-x: auto;
27
+ padding: 8px;
28
+ border: 1px solid #dee2e6;
29
+ border-radius: 4px;
30
+ margin-right: 10px;
31
+ }
32
+ .player-link {
33
+ margin-left: 10px;
34
+ }
35
+ </style>
36
+ </head>
37
+ <body>
38
+ <div class="container">
39
+ <h1 class="mt-4 mb-4">Extractor de URLs m3u8</h1>
40
+
41
+ <div class="row">
42
+ <div class="col-md-12">
43
+ <div class="card">
44
+ <div class="card-body">
45
+ <form id="extractForm">
46
+ <div class="mb-3">
47
+ <label for="url" class="form-label">URL de la página</label>
48
+ <input type="url" class="form-control" id="url" placeholder="https://ejemplo.com" required>
49
+ </div>
50
+
51
+ <div class="mb-3">
52
+ <label for="waitTime" class="form-label">Tiempo de espera (segundos)</label>
53
+ <input type="number" class="form-control" id="waitTime" value="10" min="1" max="60">
54
+ </div>
55
+
56
+ <div class="mb-3">
57
+ <label for="headers" class="form-label">Headers personalizados (uno por línea, formato "Key: Value")</label>
58
+ <textarea class="form-control" id="headers" rows="3" placeholder="User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)&#10;Referer: https://ejemplo.com"></textarea>
59
+ </div>
60
+
61
+ <button type="submit" class="btn btn-primary">Extraer URLs</button>
62
+ </form>
63
+
64
+ <div class="loading text-center" id="loading">
65
+ <div class="spinner-border text-primary" role="status">
66
+ <span class="visually-hidden">Cargando...</span>
67
+ </div>
68
+ <p class="mt-2">Extrayendo URLs, por favor espera...</p>
69
+ </div>
70
+
71
+ <div id="results" class="mt-4">
72
+ <!-- Los resultados se mostrarán aquí -->
73
+ </div>
74
+ </div>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </div>
79
+
80
+ <script>
81
+ document.getElementById('extractForm').addEventListener('submit', async function(e) {
82
+ e.preventDefault();
83
+
84
+ const url = document.getElementById('url').value;
85
+ const waitTime = document.getElementById('waitTime').value;
86
+ const headers = document.getElementById('headers').value;
87
+
88
+ document.getElementById('loading').style.display = 'block';
89
+ document.getElementById('results').innerHTML = '';
90
+
91
+ try {
92
+ const response = await fetch('/extract', {
93
+ method: 'POST',
94
+ headers: {
95
+ 'Content-Type': 'application/json'
96
+ },
97
+ body: JSON.stringify({
98
+ url: url,
99
+ wait_time: waitTime,
100
+ headers: headers
101
+ })
102
+ });
103
+
104
+ const data = await response.json();
105
+
106
+ if (data.success) {
107
+ let resultsHtml = '';
108
+
109
+ if (data.urls.length > 0) {
110
+ resultsHtml = `
111
+ <h4>URLs encontradas:</h4>
112
+ <div class="list-group">
113
+ `;
114
+
115
+ data.urls.forEach(function(url) {
116
+ resultsHtml += `
117
+ <div class="url-item">
118
+ <div class="url-text">${url}</div>
119
+ <button class="btn btn-sm btn-success copy-btn" data-url="${url}">Copiar</button>
120
+ <a href="${url}" target="_blank" class="player-link btn btn-sm btn-info">Abrir</a>
121
+ <a href="vlc://${url}" class="player-link btn btn-sm btn-secondary">VLC</a>
122
+ </div>
123
+ `;
124
+ });
125
+
126
+ resultsHtml += '</div>';
127
+ } else {
128
+ resultsHtml = '<div class="alert alert-warning">No se encontraron URLs m3u8.</div>';
129
+ }
130
+
131
+ document.getElementById('results').innerHTML = resultsHtml;
132
+
133
+ // Agregar funcionalidad a los botones de copiar
134
+ document.querySelectorAll('.copy-btn').forEach(function(button) {
135
+ button.addEventListener('click', function() {
136
+ const url = this.getAttribute('data-url');
137
+ navigator.clipboard.writeText(url).then(function() {
138
+ const originalText = button.textContent;
139
+ button.textContent = 'Copiado!';
140
+ button.classList.replace('btn-success', 'btn-secondary');
141
+ setTimeout(function() {
142
+ button.textContent = originalText;
143
+ button.classList.replace('btn-secondary', 'btn-success');
144
+ }, 2000);
145
+ });
146
+ });
147
+ });
148
+ } else {
149
+ document.getElementById('results').innerHTML = `
150
+ <div class="alert alert-danger">
151
+ Error: ${data.error}
152
+ </div>
153
+ `;
154
+ }
155
+ } catch (error) {
156
+ document.getElementById('results').innerHTML = `
157
+ <div class="alert alert-danger">
158
+ Error al procesar la solicitud: ${error.message}
159
+ </div>
160
+ `;
161
+ } finally {
162
+ document.getElementById('loading').style.display = 'none';
163
+ }
164
+ });
165
+ </script>
166
+ </body>
167
+ </html>