Modification complète du CSS en cours
This commit is contained in:
parent
121da9eefd
commit
a8f96501c2
14
app.py
14
app.py
@ -1,6 +1,7 @@
|
||||
from flask import Flask, request, redirect, url_for, send_file, render_template
|
||||
from subprocess import run
|
||||
import os
|
||||
import logging
|
||||
|
||||
app = Flask(__name__)
|
||||
|
||||
@ -18,17 +19,22 @@ def process_file(urls):
|
||||
os.chdir('downloads')
|
||||
#os.system(f'rm -rf *')
|
||||
|
||||
logs = [] # Créer une liste vide pour stocker les logs
|
||||
for url in urls:
|
||||
if url:
|
||||
if "album" in url:
|
||||
#os.system(f'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:
|
||||
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')
|
||||
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'])
|
||||
def index():
|
||||
@ -45,12 +51,14 @@ def index():
|
||||
return render_template('erreur.html')
|
||||
|
||||
urls = [url1, url2, url3, url4, url5]
|
||||
process_file(urls)
|
||||
logs = process_file(urls)
|
||||
#process_file(urls)
|
||||
#print(resultProcessFile)
|
||||
|
||||
with open('/home/gu1ll4um3/github/SpotDL_Web/logs/erreurs.log', 'r') as f:
|
||||
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'])
|
||||
def download():
|
||||
|
||||
@ -1,140 +1,72 @@
|
||||
body{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
h1 {
|
||||
/* border: 2px #eee solid; */
|
||||
.erreur {
|
||||
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);
|
||||
background-color: black;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
/* align-items: center; */
|
||||
}
|
||||
|
||||
h2 {
|
||||
.procedure {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
h2, a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.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;
|
||||
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;
|
||||
flex-direction: column;
|
||||
width : auto ;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
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
208
static/css/style.css.old
Normal 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
191
static/css/style.css.old2
Normal 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%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -4,22 +4,31 @@
|
||||
<title>SpotDL Web</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1> SpotDL Web </h1>
|
||||
<h2> Téléchargement Terminé </h2>
|
||||
<!-- <a class="btn btn-success" href="{{url_for('download')}}">Download</a> -->
|
||||
<button onclick="window.location.href ='{{url_for('download')}}';">Download</button>
|
||||
<button onclick="window.location.href = '/';">Télécharger à nouveau</button>
|
||||
|
||||
<form class="logs">
|
||||
<div class="download_complete">
|
||||
<h1> SpotDL Web </h1>
|
||||
<h2> Téléchargement Terminé </h2>
|
||||
<!-- <a class="btn btn-success" href="{{url_for('download')}}">Download</a> -->
|
||||
<button onclick="window.location.href ='{{url_for('download')}}';">Download</button>
|
||||
<button onclick="window.location.href = '/';">Télécharger à nouveau</button>
|
||||
|
||||
<form class="logs">
|
||||
<div><h1>Fichier de texte</h1></div>
|
||||
<div>
|
||||
<a>
|
||||
{% for line in result2 %}
|
||||
<p>{{ line }}<br></p>
|
||||
{% endfor %}
|
||||
{% for line in result2 %}
|
||||
<p>{{ line }}<br></p>
|
||||
{% endfor %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<a>
|
||||
{% for log in logs %}
|
||||
<p>{{ log }}<br></p>
|
||||
{% endfor %}
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
@ -4,10 +4,16 @@
|
||||
<title>SpotDL Web</title>
|
||||
</head>
|
||||
|
||||
<h1> SpotDL Web </h1>
|
||||
<h2> Veuillez entrer au moins une URL ! </h2>
|
||||
<button onclick="window.location.href = '/';">Télécharger à nouveau</button>
|
||||
<body>
|
||||
<div class="erreur">
|
||||
<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 %}
|
||||
@ -4,8 +4,8 @@
|
||||
<body>
|
||||
<h1>Fichier de texte</h1>
|
||||
<ul>
|
||||
{% for line in lines %}
|
||||
<li>{{ line }}</li>
|
||||
{% endfor %}
|
||||
{% for log in logs %}
|
||||
<p>{{ log }}</p>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</body>
|
||||
|
||||
@ -3,56 +3,62 @@
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename= 'css/style.css') }}">
|
||||
<title>SpotDL Web</title>
|
||||
</head>
|
||||
|
||||
<h1>SpotDL Web</h1>
|
||||
<div><a href="https://open.spotify.com/" style="color:white;" target="_blank">Aller sur Spotify</a></div>
|
||||
<div> - Chercher un album ou une playlist</div>
|
||||
<div> - Copier le ou les lien(s) url ci-dessous</div>
|
||||
<body>
|
||||
<div class="all">
|
||||
<div class="procedure">
|
||||
<h1 class="titre">SpotDL Web</h1>
|
||||
<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;">
|
||||
<form method="POST">
|
||||
<!-- <label for="url">URL:</label>
|
||||
<input type="text" name="url" id="url"> -->
|
||||
|
||||
<!-- regex="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)?$" -->
|
||||
<div style="margin-top: 10px;">
|
||||
<!-- <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 style="margin-top: 10px;">
|
||||
<!-- <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 style="margin-top: 10px;">
|
||||
<!-- <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 style="margin-top: 10px;">
|
||||
<!-- <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 style="margin-top: 10px;">
|
||||
<!-- <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 style="margin-top: 10px;">
|
||||
<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>
|
||||
|
||||
</form>
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user