spotdl-py/templates/index.html
2024-09-08 01:24:56 +02:00

117 lines
4.5 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Downloader spotify</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
background-color: #121212;
color: white;
position: relative;
}
.container {
margin-top: 50px;
}
.form-label {
color: white;
}
.output-box {
background-color: #333;
padding: 20px;
border-radius: 8px;
white-space: pre-wrap;
color: lightgreen;
height: 500px;
overflow-y: auto;
text-align: left;
}
.spotify-icon {
position: absolute;
top: 10px;
right: 10px;
width: 150px;
height: 150px;
}
.d-flex {
display: flex;
align-items: center;
}
/* Ajuster la taille de la liste déroulante */
.format-select {
width: auto;
}
</style>
</head>
<body>
<!-- Ajouter l'icône Spotify pirate -->
<img src="{{ url_for('static', filename='images/spotify_pirate.png') }}" alt="Spotify Pirate Icon" class="spotify-icon">
<div class="container text-center">
<h1>Downloader spotify</h1>
<form id="downloadForm" action="/download" method="POST">
<div class="mb-3">
<label for="url" class="form-label">URL Spotify</label>
<input type="text" class="form-control" id="url" name="url" placeholder="Entrez une URL Spotify" required>
</div>
<div class="mb-3 d-flex">
<label for="format" class="form-label">Choisissez le format</label>
<select class="form-select format-select" id="format" name="format" required>
<option value="flac">FLAC</option>
<option value="mp3">MP3</option>
</select>
</div>
<div class="mb-3 d-flex">
<input type="checkbox" class="form-check-input me-2" id="delete_old" name="delete_old">
<label class="form-check-label me-3" for="delete_old">Supprimer les anciens fichiers</label>
<button type="submit" class="btn btn-primary ms-auto">Télécharger</button>
</div>
<div class="mb-3">
<label for="copy_choice" class="form-label">Copier vers /mnt/data/Musique ?</label><br>
<input type="radio" id="copy_yes" name="copy_choice" value="yes" required>
<label for="copy_yes">Oui</label>
<input type="radio" id="copy_no" name="copy_choice" value="no" required>
<label for="copy_no">Non</label>
</div>
</form>
<div id="output" class="output-box mt-3"></div>
</div>
<script>
$(document).ready(function() {
$('#downloadForm').submit(function(event) {
event.preventDefault();
$('#output').empty(); // Clear previous output
var form = $(this);
var xhr = new XMLHttpRequest();
xhr.open("POST", form.attr('action'), true);
var seenLines = new Set(); // Stocker les lignes déjà vues
xhr.onreadystatechange = function() {
if (xhr.readyState == 3 || xhr.readyState == 4) { // Partial or complete data received
var newOutput = xhr.responseText.split("\n"); // Diviser les lignes de l'output
newOutput.forEach(function(line) {
if (!seenLines.has(line) && line.trim() !== "") { // Vérifier si la ligne est nouvelle
seenLines.add(line); // Marquer la ligne comme vue
$('#output').append(line + "\n"); // Ajouter la nouvelle ligne
}
});
$('#output').scrollTop($('#output')[0].scrollHeight); // Scroll to the bottom
}
};
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(form.serialize());
});
});
</script>
</body>
</html>