Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Planificador de Contenido</title> | |
| <!-- Bootstrap CSS --> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"> | |
| <!-- CSS personalizado --> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Planificador de Contenido</h1> | |
| </header> | |
| <main> | |
| <section id="upload-section"> | |
| <h2>Subir Archivo</h2> | |
| <!-- Aquí puedes agregar el formulario para subir archivos --> | |
| <input type="file" id="file-input"> | |
| <button id="upload-btn" class="btn btn-primary">Subir</button> | |
| <div id="download-link"></div> <!-- Nuevo elemento para el enlace de descarga --> | |
| </section> | |
| <section id="planner-section"> | |
| <h2>Planificador</h2> | |
| <label for="calendar">Selecciona una fecha:</label> | |
| <input type="date" id="calendar"> | |
| <table id="calendar"> | |
| <thead> | |
| <tr> | |
| <th>Fecha</th> | |
| <th>Información</th> | |
| <th>Estado</th> | |
| <th>Archivo</th> | |
| <th>Usuario</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <!-- Aquí se agregarán dinámicamente las filas --> | |
| </tbody> | |
| </table> | |
| <div id="filter-section"> | |
| <h3>Filtrar por Estado:</h3> | |
| <!-- Aquí estarán los botones para filtrar --> | |
| <button class="filter-btn btn btn-secondary" data-state="all">Todos</button> | |
| <button class="filter-btn btn btn-secondary" data-state="pending">Pendiente</button> | |
| <button class="filter-btn btn btn-secondary" data-state="in-progress">En Proceso</button> | |
| <button class="filter-btn btn btn-secondary" data-state="completed">Completado</button> | |
| <button class="filter-btn btn btn-secondary" data-state="published">Publicado</button> | |
| </div> | |
| </section> | |
| </main> | |
| <footer> | |
| <p>© 2024 Planificador de Contenido</p> | |
| </footer> | |
| <!-- Bootstrap JavaScript (requiere Popper.js y jQuery) --> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script> | |
| <!-- JavaScript personalizado --> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> | |