Reconvertir app/ a carpeta normal, no submódulo
This commit is contained in:
108
app/templates/index.html
Normal file
108
app/templates/index.html
Normal file
@@ -0,0 +1,108 @@
|
||||
<!doctype html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Descargador de YouTube</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<style>
|
||||
.fade-out {
|
||||
opacity: 1;
|
||||
transition: opacity 1s ease-out;
|
||||
}
|
||||
.fade-out.hide {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-light">
|
||||
<div class="container mt-5">
|
||||
<h1 class="mb-4 text-center">Descargador de YouTube</h1>
|
||||
|
||||
<!-- Tabs -->
|
||||
<ul class="nav nav-tabs" id="downloadTab" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="single-tab" data-bs-toggle="tab" data-bs-target="#single" type="button" role="tab">Vídeo / MP3 individual</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="playlist-tab" data-bs-toggle="tab" data-bs-target="#playlist" type="button" role="tab">Lista de reproducción</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content pt-4" id="downloadTabContent">
|
||||
<!-- Descarga individual -->
|
||||
<div class="tab-pane fade show active" id="single" role="tabpanel">
|
||||
<form method="POST">
|
||||
<input type="hidden" name="type" value="single">
|
||||
<div class="mb-3">
|
||||
<label for="url1" class="form-label">URL del vídeo</label>
|
||||
<input type="url" class="form-control" name="url" id="url1" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Formato</label><br>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="mode" id="video1" value="video" checked>
|
||||
<label class="form-check-label" for="video1">Vídeo</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="mode" id="audio1" value="audio">
|
||||
<label class="form-check-label" for="audio1">MP3</label>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Descargar</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Descarga de lista -->
|
||||
<div class="tab-pane fade" id="playlist" role="tabpanel">
|
||||
<form method="POST">
|
||||
<input type="hidden" name="type" value="playlist">
|
||||
<div class="mb-3">
|
||||
<label for="url2" class="form-label">URL de la lista</label>
|
||||
<input type="url" class="form-control" name="url" id="url2" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Formato</label><br>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="mode" id="video2" value="video" checked>
|
||||
<label class="form-check-label" for="video2">Vídeo</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="mode" id="audio2" value="audio">
|
||||
<label class="form-check-label" for="audio2">MP3</label>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Descargar Lista</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="feedbackModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content bg-light">
|
||||
<div class="modal-body">
|
||||
{% if success %}
|
||||
<div class="alert alert-success fade-out" role="alert">{{ success }}</div>
|
||||
{% elif error %}
|
||||
<div class="alert alert-danger fade-out" role="alert">{{ error }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const modal = new bootstrap.Modal(document.getElementById('feedbackModal'), {});
|
||||
{% if success or error %}
|
||||
window.addEventListener("load", () => {
|
||||
modal.show();
|
||||
setTimeout(() => {
|
||||
modal.hide();
|
||||
}, 3000);
|
||||
});
|
||||
{% endif %}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
42
app/templates/index.html.bak
Normal file
42
app/templates/index.html.bak
Normal file
@@ -0,0 +1,42 @@
|
||||
<!doctype html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Descargador de YouTube</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="bg-light">
|
||||
<div class="container mt-5">
|
||||
<h1 class="mb-4 text-center">Descargador de YouTube</h1>
|
||||
|
||||
{% if error %}
|
||||
<div class="alert alert-danger">{{ error }}</div>
|
||||
{% endif %}
|
||||
{% if success %}
|
||||
<div class="alert alert-success">{{ success }}</div>
|
||||
{% endif %}
|
||||
|
||||
<form method="POST">
|
||||
<div class="mb-3">
|
||||
<label for="url" class="form-label">URL de YouTube</label>
|
||||
<input type="url" class="form-control" name="url" id="url" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Tipo de descarga</label><br>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="mode" id="video" value="video" checked>
|
||||
<label class="form-check-label" for="video">Vídeo</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="mode" id="audio" value="audio">
|
||||
<label class="form-check-label" for="audio">Audio (MP3)</label>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Descargar</button>
|
||||
</form>
|
||||
|
||||
<hr class="my-4">
|
||||
<p class="text-muted">Los archivos descargados se guardan en la carpeta <code>downloads/</code>.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user