guillaume/spotdlweb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Modification complète du CSS en cours

Browse Source
This commit is contained in:
Gu1llaum-3 2023-01-01 21:30:14 +01:00
parent 121da9eefd
commit a8f96501c2
8 changed files with 527 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app.py
View File

@ -1,6 +1,7 @@
from flask import Flask, request, redirect, url_for, send_file, render_template from flask import Flask, request, redirect, url_for, send_file, render_template
from subprocess import run from subprocess import run
import os import os
import logging
app = Flask(__name__) app = Flask(__name__)
@ -18,17 +19,22 @@ def process_file(urls):
os.chdir('downloads') os.chdir('downloads')
#os.system(f'rm -rf *') #os.system(f'rm -rf *')
logs = [] # Créer une liste vide pour stocker les logs
for url in urls: for url in urls:
if url: if url:
if "album" in url: if "album" in url:
#os.system(f'python3 -m spotdl {url} --output "{download_param_album}"') #os.system(f'python3 -m spotdl {url} --output "{download_param_album}"')
run(['python3', '-m', 'spotdl', url, '--output', download_param_album]) run(['python3', '-m', 'spotdl', url, '--output', download_param_album])
logs.append(f'Téléchargement de l album à l\'adresse {url}')
elif "playlist" in url: elif "playlist" in url:
os.system(f'python3 -m spotdl {url} --output "{download_param_playlist}"') os.system(f'python3 -m spotdl {url} --output "{download_param_playlist}"')
logs.append(f'Téléchargement de la playlist à l\'adresse {url}')
# os.system(f'zip -r musics.zip ./downloads') # os.system(f'zip -r musics.zip ./downloads')
run(['zip', '-r', 'musics.zip', '.']) run(['zip', '-r', 'musics.zip', '.'])
logs.append(f'Création du fichier ZIP musics.zip')
return logs # Retourner la liste des logs
@app.route('/', methods=['GET', 'POST']) @app.route('/', methods=['GET', 'POST'])
def index(): def index():
@ -45,12 +51,14 @@ def index():
return render_template('erreur.html') return render_template('erreur.html')
urls = [url1, url2, url3, url4, url5] urls = [url1, url2, url3, url4, url5]
process_file(urls) logs = process_file(urls)
#process_file(urls)
#print(resultProcessFile) #print(resultProcessFile)
with open('/home/gu1ll4um3/github/SpotDL_Web/logs/erreurs.log', 'r') as f: with open('/home/gu1ll4um3/github/SpotDL_Web/logs/erreurs.log', 'r') as f:
result2 = f.readlines() result2 = f.readlines()
return render_template('download_complete.html', result2=result2) return render_template('download_complete.html', logs=logs)
#return render_template('download_complete.html', result2=result2)
@app.route('/download', methods=['GET']) @app.route('/download', methods=['GET'])
def download(): def download():

174
static/css/style.css
View File

@ -1,140 +1,72 @@
body{
display: flex;
justify-content: center;
align-items: center;
body {
background-color: black; background-color: black;
} }
h1 { .erreur {
/* border: 2px #eee solid; */ display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.download_complete {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.all {
align-items: center;
flex-direction: column;
}
.titre{
display: flex;
justify-content: center;
color: rgb(24,216,96); color: rgb(24,216,96);
background-color: black; /* align-items: center; */
text-align: center;
padding: 10px;
} }
h2 { .procedure {
display: flex;
justify-content: center;
flex-direction: column;
text-align: center; text-align: center;
margin: auto; }
padding: 10px;
h2, a {
color: white; color: white;
} }
.url { .url {
display: flex; display: block;
justify-content:center;
width: auto;
flex: 1 1 0;
/* align-items: center; */
}
.urlbox {
display: block;
/* align-items: flex-start; */
flex: 1 1 0;
width: 225;
}
form {
display: flex ;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
/* min-height:100%; */ flex-direction: column;
background-color: black; width : auto ;
color: white
}
div {
display: flex;
justify-content: center;
/* align-items: center; */
/* min-height:100%; */
background-color: black;
color: white
}
.logs {
justify-content: center;
background-color: black;
color: white
}
input[type="submit"] {
display: block;
margin: auto;
} }
button { button {
display: block; display: block;
margin: 10px auto; margin: 10px auto;
} }
/* .urlbox{
font-size: 13px;
padding-left: 7px;
padding-right: 7px;
border-radius: 9px;
width:100%;
height:30px;
} */
/* .urlbox:empty {
border: 2px solid #999999;
font-size: 13px;
padding-left: 7px;
padding-right: 7px;
border-radius: 9px;
width:100%;
height:30px;
}
.urlbox:valid:not(:placeholder-shown){
border:rgb(24,216,96) 2px;
font-size: 13px;
padding-left: 7px;
padding-right: 7px;
border-radius: 9px;
width:100%;
height:30px;
}
.urlbox:invalid{
border: red solid 2px;
font-size: 13px;
padding-left: 7px;
padding-right: 7px;
border-radius: 9px;
width:100%;
height:30px;
} */
.urlbox:empty {
border: 2px solid grey;
font-size: 13px;
padding-left: 7px;
padding-right: 7px;
border-radius: 9px;
width:100%;
height:30px;
}
.urlbox:valid:not(:placeholder-shown) {
border: 2px solid rgb(24,216,96);
font-size: 13px;
padding-left: 7px;
padding-right: 7px;
border-radius: 9px;
width:100%;
height:30px;
}
.urlbox:invalid {
border: 2px solid red;
font-size: 13px;
padding-left: 7px;
padding-right: 7px;
border-radius: 9px;
width:100%;
height:30px;
}
button{
/* margin-right: 0px; */
height: 30px;
width:130px;
border-radius: 5px ;
border: none;
/* float: right; */
background-color: #ddd;
font-weight: bold;
}
button:hover{
background-color: rgb(24,216,96);
color: white;
}

208
static/css/style.css.old Normal file
View File

@ -0,0 +1,208 @@
@media (max-width: 600px) {
.urlbox {
/* les styles pour les appareils mobiles vont ici */
width: 100%; /* étend l'élément sur toute la largeur de l'écran */
}
}
@media (min-width: 601px) and (max-width: 900px) {
.urlbox {
/* les styles pour les tablettes vont ici */
width: 50%; /* étend l'élément sur la moitié de la largeur de l'écran */
}
}
@media (min-width: 901px) {
.urlbox {
/* les styles pour les écrans de bureau vont ici */
width: 25%; /* étend l'élément sur un quart de la largeur de l'écran */
}
}
body {
background-color: black;
}
h1 {
/* border: 2px #eee solid; */
color: rgb(24,216,96);
background-color: black;
text-align: center;
padding: 10px;
}
h2 {
text-align: center;
margin: auto;
padding: 10px;
color: white;
}
.url {
display: flex;
justify-content: center;
align-items: center;
/* min-height:100%; */
background-color: black;
color: white
}
div {
display: flex;
justify-content: center;
/* align-items: center; */
/* min-height:100%; */
background-color: black;
color: white
}
.logs {
justify-content: center;
background-color: black;
color: white
}
input[type="submit"] {
display: block;
margin: auto;
}
button {
display: block;
margin: 10px auto;
}
.urlbox:empty {
border: 2px solid grey;
font-size: 13px;
padding-left: 7px;
padding-right: 7px;
border-radius: 9px;
width:100%;
height:30px;
}
.urlbox:valid:not(:placeholder-shown) {
border: 2px solid rgb(24,216,96);
font-size: 13px;
padding-left: 7px;
padding-right: 7px;
border-radius: 9px;
width:100%;
height:30px;
}
.urlbox:invalid {
border: 2px solid red;
font-size: 13px;
padding-left: 7px;
padding-right: 7px;
border-radius: 9px;
width:100%;
height:30px;
}
button{
/* margin-right: 0px; */
height: 30px;
width:130px;
border-radius: 5px ;
border: none;
/* float: right; */
background-color: #ddd;
font-weight: bold;
}
button:hover{
background-color: rgb(24,216,96);
color: white;
}
@media (max-width: 600px) {
body {
background-color: black;
}
h1 {
color: rgb(24,216,96);
background-color: black;
text-align: center;
padding: 10px;
}
h2 {
text-align: center;
margin: auto;
padding: 10px;
color: white;
}
.url {
display: flex;
justify-content: center;
align-items: center;
background-color: black;
color: white;
}
div {
display: flex;
justify-content: center;
background-color: black;
color: white;
}
.logs {
justify-content: center;
background-color: black;
color: white;
}
input[type="submit"] {
display: block;
margin: auto;
}
button {
display: block;
margin: 10px auto;
}
.urlbox {
border: 2px solid grey;
font-size: 13px;
padding: 7px;
border-radius: 9px;
width: 100%;
height: 30px;
box-sizing: border-box;
}
.urlbox:valid:not(:placeholder-shown) {
border: 2px solid rgb(24,216,96);
}
.urlbox:invalid {
border: 2px solid red;
}
button {
height: 30px;
width: 130px;
border-radius: 5px;
border: none;
background-color: #ddd;
font-weight: bold;
box-sizing: border-box;
}
button:hover {
background-color: rgb(24,216,96);
color: white;
}
}

191
static/css/style.css.old2 Normal file
View File

@ -0,0 +1,191 @@
/* Mise en forme générale */
body {
background-color: black;
}
/* Titre principal */
h1 {
color: rgb(24,216,96);
background-color: black;
text-align: center;
padding: 10px;
margin-top: 10px;
}
/* Titre secondaire */
h2 {
text-align: center;
margin: auto;
padding: 10px;
color: white;
}
/* Conteneur principal */
.url {
display: flex;
flex-direction: column;
align-items: center;
background-color: black;
color: white;
}
/* Conteneurs secondaires */
div {
display: flex;
flex-direction: column;
align-items: center;
background-color: black;
color: white;
}
/* Conteneur des logs */
.logs {
display: flex;
flex-direction: column;
align-items: center;
background-color: black;
color: white;
}
/* Bouton de soumission du formulaire */
input[type="submit"] {
display: block;
margin: auto;
}
/* Bouton générique */
button {
display: block;
margin: 10px auto;
}
/* Champ de saisie de l'URL */
.urlbox:empty {
border: 2px solid grey;
font-size: 13px;
padding-left: 7px;
padding-right: 7px;
border-radius: 9px;
height: 30px;
/* width: 150; */
}
.urlbox:valid:not(:placeholder-shown) {
border: 2px solid rgb(24,216,96);
font-size: 13px;
padding-left: 7px;
padding-right: 7px;
border-radius: 9px;
/* width: 150%; */
height: 30px;
}
.urlbox:invalid {
border: 2px solid red;
font-size: 13px;
padding-left: 7px;
padding-right: 7px;
border-radius: 9px;
/* width: 150%; */
height: 30px;
}
/* Bouton de téléchargement */
button {
height: 30px;
width: 130px;
border-radius: 5px;
border: none;
background-color: #ddd;
font-weight: bold;
}
button:hover {
background-color: rgb(24,216,96);
color: white;
}
/* Mise en forme pour écrans de smartphone */
@media only screen and (max-width: 480px) {
/* Titre principal */
h1 {
font-size: 18px;
}
/* Titre secondaire */
h2 {
font-size: 14px;
}
/* Conteneur principal */
.url {
padding: 0 5px;
}
/* Champ de saisie de l'URL */
.urlbox {
width: 150%;
padding: 0 10%;
}
/* Bouton de téléchargement */
button {
width: 80%;
}
}
/* Mise en forme pour écrans de tablette */
@media only screen and (min-width: 481px) and (max-width: 768px) {
/* Titre principal */
h1 {
font-size: 22px;
}
/* Titre secondaire */
h2 {
font-size: 16px;
}
/* Conteneur principal */
.url {
padding: 0 10px;
}
/* Champ de saisie de l'URL */
.urlbox {
width: 150%;
}
/* Bouton de téléchargement */
button {
width: 80%;
}
}
/* Mise en forme pour écrans d'ordinateur */
@media only screen and (min-width: 769px) {
/* Titre principal */
h1 {
font-size: 28px;
}
/* Titre secondaire */
h2 {
font-size: 20px;
}
/* Conteneur principal */
.url {
padding: 0 20px;
}
/* Champ de saisie de l'URL */
.urlbox {
width: 200%;
}
/* Bouton de téléchargement */
button {
width: 80%;
}
}

35
templates/download_complete.html
View File

@ -4,22 +4,31 @@
<title>SpotDL Web</title> <title>SpotDL Web</title>
</head> </head>
<body> <body>
<h1> SpotDL Web </h1> <div class="download_complete">
<h2> Téléchargement Terminé </h2> <h1> SpotDL Web </h1>
<!-- <a class="btn btn-success" href="{{url_for('download')}}">Download</a> --> <h2> Téléchargement Terminé </h2>
<button onclick="window.location.href ='{{url_for('download')}}';">Download</button> <!-- <a class="btn btn-success" href="{{url_for('download')}}">Download</a> -->
<button onclick="window.location.href = '/';">Télécharger à nouveau</button> <button onclick="window.location.href ='{{url_for('download')}}';">Download</button>
<button onclick="window.location.href = '/';">Télécharger à nouveau</button>
<form class="logs">
<form class="logs">
<div><h1>Fichier de texte</h1></div> <div><h1>Fichier de texte</h1></div>
<div> <div>
<a> <a>
{% for line in result2 %} {% for line in result2 %}
<p>{{ line }}<br></p> <p>{{ line }}<br></p>
{% endfor %} {% endfor %}
</a> </a>
</div> </div>
<div>
</form> <a>
{% for log in logs %}
<p>{{ log }}<br></p>
{% endfor %}
</a>
</div>
</form>
</div>
</body> </body>

18
templates/erreur.html
View File

@ -4,10 +4,16 @@
<title>SpotDL Web</title> <title>SpotDL Web</title>
</head> </head>
<h1> SpotDL Web </h1> <body>
<h2> Veuillez entrer au moins une URL ! </h2> <div class="erreur">
<button onclick="window.location.href = '/';">Télécharger à nouveau</button> <h1> SpotDL Web </h1>
<h2> Veuillez entrer au moins une URL ! </h2>
<button onclick="window.location.href = '/';">Télécharger à nouveau</button>
{% if message %}
<p>{{ message }}</p>
{% endif %}
</div>
</body>
{% if message %}
<p>{{ message }}</p>
{% endif %}

6
templates/logs.html
View File

@ -4,8 +4,8 @@
<body> <body>
<h1>Fichier de texte</h1> <h1>Fichier de texte</h1>
<ul> <ul>
{% for line in lines %} {% for log in logs %}
<li>{{ line }}</li> <p>{{ log }}</p>
{% endfor %} {% endfor %}
</ul> </ul>
</body> </body>

48
templates/upload.html
View File

@ -3,56 +3,62 @@
<link rel="stylesheet" href="{{ url_for('static', filename= 'css/style.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename= 'css/style.css') }}">
<title>SpotDL Web</title> <title>SpotDL Web</title>
</head> </head>
<body>
<h1>SpotDL Web</h1> <div class="all">
<div><a href="https://open.spotify.com/" style="color:white;" target="_blank">Aller sur Spotify</a></div> <div class="procedure">
<div> - Chercher un album ou une playlist</div> <h1 class="titre">SpotDL Web</h1>
<div> - Copier le ou les lien(s) url ci-dessous</div> <a href="https://open.spotify.com/" style="color:white;" target="_blank">Aller sur Spotify <br> </a>
<a>- Chercher un album ou une playlist <br> </a>
<a>- Copier le ou les lien(s) url ci-dessous <br> </a>
</div>
<div class="url" style="padding-top: 10px;"> <div class="url" style="padding-top: 10px;">
<form method="POST"> <form method="POST">
<!-- <label for="url">URL:</label> <!-- <label for="url">URL:</label>
<input type="text" name="url" id="url"> --> <input type="text" name="url" id="url"> -->
<!-- regex="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)?$" -->
<div style="margin-top: 10px;"> <div style="margin-top: 10px;">
<!-- <label for="url1">URL 1:</label> --> <!-- <label for="url1">URL 1:</label> -->
<input type="text" name="url1" id="url1" class="urlbox" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)$" placeholder="Copier un lien d'album ou de playlist"> <input type="text" name="url1" id="url1" class="urlbox" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Copier un lien d'album ou de playlist">
</div> </div>
<div style="margin-top: 10px;"> <div style="margin-top: 10px;">
<!-- <label for="url2">URL 2:</label> --> <!-- <label for="url2">URL 2:</label> -->
<input type="text" name="url2" id="url2" class="urlbox" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)$" placeholder="Copier un lien d'album ou de playlist"> <input type="text" name="url2" id="url2" class="urlbox" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Copier un lien d'album ou de playlist">
</div> </div>
<div style="margin-top: 10px;"> <div style="margin-top: 10px;">
<!-- <label for="url3">URL 3:</label> --> <!-- <label for="url3">URL 3:</label> -->
<input type="text" name="url3" id="url3" class="urlbox" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)$" placeholder="Copier un lien d'album ou de playlist"> <input type="text" name="url3" id="url3" class="urlbox" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Copier un lien d'album ou de playlist">
</div> </div>
<div style="margin-top: 10px;"> <div style="margin-top: 10px;">
<!-- <label for="url4">URL 4:</label> --> <!-- <label for="url4">URL 4:</label> -->
<input type="text" name="url4" id="url4" class="urlbox" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)$" placeholder="Copier un lien d'album ou de playlist"> <input type="text" name="url4" id="url4" class="urlbox" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Copier un lien d'album ou de playlist">
</div> </div>
<div style="margin-top: 10px;"> <div style="margin-top: 10px;">
<!-- <label for="url5">URL 5:</label> --> <!-- <label for="url5">URL 5:</label> -->
<input type="text" name="url5" id="url5" class="urlbox" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)$" placeholder="Copier un lien d'album ou de playlist"> <input type="text" name="url5" id="url5" class="urlbox" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Copier un lien d'album ou de playlist">
</div> </div>
<div style="margin-top: 10px;"> <div style="margin-top: 10px;">
<button type="submit" id="btn" class="btn" value="Téléchargement">Téléchargement</button> <button type="submit" id="btn" class="btn" value="Téléchargement">Téléchargement</button>
<script>
// Récupère l'élément bouton grâce à son ID
const bouton = document.getElementById('btn');
// Ajoute un écouteur d'événement 'click' au bouton
bouton.addEventListener('click', function() {
// Met à jour la valeur de l'attribut innerHTML du bouton
this.innerHTML = "Téléchargement en cours ...";
});
</script>
</div> </div>
</form> </form>
</div> </div>
</div>
<script>
// Récupère l'élément bouton grâce à son ID
const bouton = document.getElementById('btn');
// Ajoute un écouteur d'événement 'click' au bouton
bouton.addEventListener('click', function() {
// Met à jour la valeur de l'attribut innerHTML du bouton
this.innerHTML = "Téléchargement en cours ...";
});
</script>
</body>