| <!DOCTYPE html> |
| <html lang="es"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>🚀 Web Scraper Ultra Robusto</title> |
| <link rel="stylesheet" href="style.css"> |
| </head> |
| <body> |
| |
| <header class="main-header"> |
| <div class="container"> |
| <h1 class="main-title">🚀 Web Scraper Ultra Robusto</h1> |
| <p class="main-subtitle">Extrae contenido web de forma confiable y convierte a PDF o texto plano</p> |
| </div> |
| </header> |
|
|
| |
| <main class="main-content"> |
| <div class="container"> |
| <div class="content-grid"> |
| |
| <section class="input-section"> |
| <div class="card"> |
| <h2>📝 Configuración de Scraping</h2> |
| |
| <form id="scraper-form" class="scraper-form"> |
| |
| <div class="form-group"> |
| <label for="url-input" class="form-label">🌐 URL de la página web</label> |
| <input type="url" id="url-input" class="form-control red-border" placeholder="https://example.com" required> |
| </div> |
|
|
| |
| <div class="form-group"> |
| <label class="form-label">📄 Formato de salida</label> |
| <div class="radio-group"> |
| <label class="radio-item"> |
| <input type="radio" name="formato" value="PDF" id="format-pdf"> |
| <span class="radio-custom"></span> |
| PDF únicamente |
| </label> |
| <label class="radio-item"> |
| <input type="radio" name="formato" value="Texto" id="format-texto"> |
| <span class="radio-custom"></span> |
| Texto únicamente |
| </label> |
| <label class="radio-item"> |
| <input type="radio" name="formato" value="Ambos" id="format-ambos" checked> |
| <span class="radio-custom"></span> |
| Ambos formatos |
| </label> |
| </div> |
| </div> |
|
|
| |
| <div class="form-group"> |
| <label for="name-input" class="form-label">✏️ Nombre personalizado (opcional)</label> |
| <input type="text" id="name-input" class="form-control red-border" placeholder="mi_scraping_personalizado"> |
| </div> |
|
|
| |
| <button type="submit" class="btn btn-primary btn-process"> |
| 🚀 Procesar Página Web |
| </button> |
| </form> |
| </div> |
| </section> |
|
|
| |
| <section class="examples-section"> |
| <div class="card"> |
| <h2>⚡ Ejemplos Rápidos</h2> |
| <p class="examples-description">Haz clic en cualquier ejemplo para cargar la configuración automáticamente</p> |
| |
| <div class="examples-list"> |
| <div class="example-item" data-url="https://example.com" data-formato="Ambos" data-nombre="ejemplo_basico"> |
| <div class="example-icon">🌐</div> |
| <div class="example-content"> |
| <h4>Ejemplo Básico</h4> |
| <p>example.com - Ambos formatos</p> |
| </div> |
| </div> |
| |
| <div class="example-item" data-url="https://httpbin.org/html" data-formato="PDF" data-nombre="httpbin_test"> |
| <div class="example-icon">📄</div> |
| <div class="example-content"> |
| <h4>Test HTTP</h4> |
| <p>httpbin.org - Solo PDF</p> |
| </div> |
| </div> |
| |
| <div class="example-item" data-url="https://github.com/microsoft" data-formato="Texto" data-nombre="github_microsoft"> |
| <div class="example-icon">📝</div> |
| <div class="example-content"> |
| <h4>GitHub Microsoft</h4> |
| <p>github.com/microsoft - Solo Texto</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| </div> |
|
|
| |
| <section class="results-section" id="results-section"> |
| <div class="card"> |
| <h2>📊 Resultados del Procesamiento</h2> |
| |
| |
| <div class="status-container" id="status-container"> |
| <div class="status-item"> |
| <span class="status-icon">⏳</span> |
| <span class="status-text" id="status-text">Listo para procesar</span> |
| </div> |
| </div> |
|
|
| |
| <div class="results-container" id="results-container" style="display: none;"> |
| <div class="result-item"> |
| <div class="result-header"> |
| <span class="result-icon">📄</span> |
| <h4>Archivo PDF Generado</h4> |
| </div> |
| <div class="result-content"> |
| <div class="file-preview"> |
| <div class="file-icon">📄</div> |
| <div class="file-info"> |
| <span class="file-name" id="pdf-filename">documento.pdf</span> |
| <span class="file-size">2.3 MB</span> |
| </div> |
| <button class="btn btn-secondary btn-download">📥 Descargar</button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="result-item"> |
| <div class="result-header"> |
| <span class="result-icon">📝</span> |
| <h4>Archivo de Texto Generado</h4> |
| </div> |
| <div class="result-content"> |
| <div class="file-preview"> |
| <div class="file-icon">📝</div> |
| <div class="file-info"> |
| <span class="file-name" id="txt-filename">documento.txt</span> |
| <span class="file-size">45 KB</span> |
| </div> |
| <button class="btn btn-secondary btn-download">📥 Descargar</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| </div> |
| </main> |
|
|
| |
| <footer class="main-footer"> |
| <div class="container"> |
| <p>🇦🇷 Desarrollado con ❤️ en Argentina</p> |
| </div> |
| </footer> |
|
|
| <script src="app.js"></script> |
| </body> |
| </html> |
