1.2.0.0
This commit is contained in:
Jules
116
templates/index.html
Normal file
116
templates/index.html
Normal file
@@ -0,0 +1,116 @@
|
||||
<!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>
|
||||
@@ -1,36 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Connexion</title>
|
||||
<title>Login</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
background-color: #121212;
|
||||
color: white;
|
||||
}
|
||||
.container {
|
||||
margin-top: 50px;
|
||||
}
|
||||
.form-label {
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<div class="card mt-5">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-center">Connexion</h3>
|
||||
<form method="POST">
|
||||
<div class="mb-3">
|
||||
<label for="username" class="form-label">Nom d'utilisateur</label>
|
||||
<input type="text" class="form-control" id="username" name="username" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">Mot de passe</label>
|
||||
<input type="password" class="form-control" id="password" name="password" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary w-100">Se connecter</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-center">Connexion</h1>
|
||||
<form action="/login" method="POST">
|
||||
<div class="mb-3">
|
||||
<label for="username" class="form-label">Nom d'utilisateur</label>
|
||||
<input type="text" class="form-control" id="username" name="username" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">Mot de passe</label>
|
||||
<input type="password" class="form-control" id="password" name="password" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Se connecter</button>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
34
templates/result.html
Normal file
34
templates/result.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Résultats</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
background-color: #121212;
|
||||
color: white;
|
||||
}
|
||||
.container {
|
||||
margin-top: 50px;
|
||||
}
|
||||
.output-box {
|
||||
background-color: #333;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
white-space: pre-wrap;
|
||||
color: lightgreen;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1 class="text-center">Résultats des commandes</h1>
|
||||
<div class="output-box">
|
||||
{{ output }}
|
||||
</div>
|
||||
<a href="{{ zip_url }}" class="btn btn-primary mt-3">Télécharger les fichiers en ZIP</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,105 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Téléchargement en temps réel</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
body { background-color: #f8f9fa; }
|
||||
.container { margin-top: 50px; }
|
||||
.card { border-radius: 10px; }
|
||||
.output-container {
|
||||
background-color: #f1f1f1;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
white-space: pre-wrap;
|
||||
font-family: monospace;
|
||||
height: 400px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card shadow-lg p-3 mb-5 bg-white rounded">
|
||||
<div class="card-body">
|
||||
<h2 class="text-center mb-4">Télécharger Musique Spotify</h2>
|
||||
<form id="download-form">
|
||||
<div class="mb-3">
|
||||
<label for="url" class="form-label">Saisir l'URL Spotify :</label>
|
||||
<input type="text" class="form-control" id="url" name="url" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="format" class="form-label">Choisissez le format :</label>
|
||||
<select class="form-select" id="format" name="format" required>
|
||||
<option value="flac">FLAC</option>
|
||||
<option value="mp3">MP3</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="delete_choice" class="form-label">Supprimer les anciens répertoires :</label>
|
||||
<select class="form-select" id="delete_choice" name="delete_choice" required>
|
||||
<option value="1">Oui</option>
|
||||
<option value="2">Non</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="copy_choice" class="form-label">Copier vers /mnt/data/Musique/ :</label>
|
||||
<select class="form-select" id="copy_choice" name="copy_choice" required>
|
||||
<option value="1">Oui</option>
|
||||
<option value="2">Non</option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary w-100">Lancer le téléchargement</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mt-4">
|
||||
<div class="card-body">
|
||||
<h4>Output :</h4>
|
||||
<div id="output" class="output-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Button to download the ZIP -->
|
||||
<button class="btn btn-secondary w-100 mt-3" onclick="window.location.href='/download_zip?format=' + document.getElementById('format').value">Télécharger ZIP</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementById('download-form').addEventListener('submit', function (event) {
|
||||
event.preventDefault();
|
||||
const url = document.getElementById('url').value;
|
||||
const format = document.getElementById('format').value;
|
||||
const delete_choice = document.getElementById('delete_choice').value;
|
||||
const copy_choice = document.getElementById('copy_choice').value;
|
||||
const formData = new URLSearchParams();
|
||||
formData.append('url', url);
|
||||
formData.append('format', format);
|
||||
formData.append('delete_choice', delete_choice);
|
||||
formData.append('copy_choice', copy_choice);
|
||||
fetch('/download', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => {
|
||||
const outputContainer = document.getElementById('output');
|
||||
const reader = response.body.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
function read() {
|
||||
reader.read().then(({ done, value }) => {
|
||||
if (done) return;
|
||||
outputContainer.textContent += decoder.decode(value, { stream: true });
|
||||
outputContainer.scrollTop = outputContainer.scrollHeight;
|
||||
read();
|
||||
});
|
||||
}
|
||||
read();
|
||||
})
|
||||
.catch(error => console.error('Erreur:', error));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user