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

Compare commits

base: guillaume:dev_download
Branches Tags
guillaume:main guillaume:dev guillaume:ddl guillaume:dev_download guillaume:prev_download
..
compare: guillaume:ddl
Branches Tags
guillaume:main guillaume:dev guillaume:ddl guillaume:dev_download guillaume:prev_download

4 Commits
dev_downlo ... ddl

Author SHA1 Message Date
guillaume
2924550be6 Mise à jour de 'app.py' 
Correction d'un problème suite au retrait de deux champs d'entrées sur index.html
 2023-06-05 22:30:23 +02:00
Guillaume
9b04348b32 On branch ddl 
Changes to be committed:
	modified:   app.py
	modified:   templates/finish.html
	modified:   templates/index.html
Téléchargement direct d'un fichier zip puis supprime le dossier.
 2023-05-29 12:31:01 +02:00
Gu1llaum-3
3c33f96910 Modification Dockerfile et .gitignore 2023-05-18 09:57:31 +02:00
Gu1llaum-3
fba7a5a057 Réorganisation du code 2023-05-17 07:54:38 +02:00
26 changed files with 124 additions and 865 deletions
Expand all files Collapse all files

5
.gitignore vendored
View File

@@ -1,3 +1,2 @@
# Ignorer ce qu'il y a dans downloads
downloads/*
__pycache__
downloads/

3
.idea/.gitignore generated vendored
View File

@@ -1,3 +0,0 @@
# Default ignored files
/shelf/
/workspace.xml

2
Docker/requirements.txt
View File

@@ -1,2 +0,0 @@
flask
spotdl

9
Docker/spotdlweb.yaml
View File

@@ -1,9 +0,0 @@
version: '3.3'
services:
spotdl_web:
image: 'spotdl_web:latest'
container_name: spotdl_web
hostname: spotdl_web
ports:
- '100:3000'
restart: unless-stopped

68
Docker/src/.old/app.py
View File

@@ -1,68 +0,0 @@
from flask import Flask, request, redirect, url_for, send_file, render_template, send_from_directory
from subprocess import run
from datetime import datetime
import os
import logging
app = Flask(__name__)
def process_file(urls):
download_param_album = '{artist}/{album}/{artist} - {title}'
download_param_playlist = '{playlist}/{artists}/{album} - {title} {artist}'
os.chdir('downloads')
os.system(f'rm -rf *')
#run(['rm', '-rf', '*']) ne fonctionne pas ... ??
for url in urls:
if url:
if "album" in url:
run(['python3', '-m', 'spotdl', url, '--output', download_param_album])
elif "playlist" in url:
run(['python3', '-m', 'spotdl', url, '--output', download_param_playlist])
#os.system(f'zip -r musics.zip ./downloads')
run(['zip', '-r', 'musics.zip', '.'])
os.chdir('../../')
@app.route('/', methods=['GET', 'POST'])
def upload_form():
return render_template('index.html')
#Fonctionne
# @app.route('/download/<filename>')
# def download_file(filename):
# PATH='file.txt'
# return send_file(PATH, as_attachment=True)
@app.route('/download', methods=['POST'])
def download_file():
# votre code de téléchargement ici
# now = datetime.now()
# date_time = now.strftime("%Y-%m-%d %H-%M-%S")
# with open(f"file.txt", "w") as file:
# file.write(date_time)
if request.method == 'POST':
url1 = request.form['url1']
url2 = request.form['url2']
url3 = request.form['url3']
url4 = request.form['url4']
url5 = request.form['url5']
# Vérifier si au moins un champ est vide
if not url1 and not url2 and not url3 and not url4 and not url5:
return render_template('erreur.html')
urls = [url1, url2, url3, url4, url5]
process_file(urls)
PATH = "downloads/musics.zip"
return send_file(PATH, as_attachment=True)
@app.errorhandler(404)
def page_not_found(error):
return render_template('404.html'), 404
if __name__ == '__main__':
app.run(host='0.0.0.0', debug=True, port=3000)

193
Docker/src/.old/static/css/style.css
View File

@@ -1,193 +0,0 @@
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #131313;
color: #ffffff;
}
.container {
max-width: 900px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
}
.bordered {
border: 1px solid rgb(24,216,96);
border-radius: 5px;
padding: 20px;
margin-bottom: 20px;
}
li {
font-weight: bold;
}
a {
text-decoration-color: rgb(24,216,96);
color: rgb(24,216,96);
}
.form-group {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
.form-group label {
font-weight: bold;
margin-bottom: 5px;
}
.form-control {
background-color: #232323;
border: none;
border-radius: 5px;
padding: 10px;
color: #ffffff;
}
/* .form-control:focus {
outline: none;
box-shadow: 0 0 0 2px rgb(24,216,96);
} */
.form-control:valid:not(:placeholder-shown) {
outline: none;
border: 2px solid rgb(24,216,96);
}
.form-control:invalid {
outline: none;
border: 2px solid red;
}
.btn {
background-color: rgb(24,216,96);
border: none;
border-radius: 5px;
padding: 10px 20px;
color: #131313;
font-weight: bold;
cursor: pointer;
text-decoration:none
}
.btn2 {
margin-top: 10px;
background-color: rgb(24,216,96);
border: none;
border-radius: 5px;
padding: 10px 20px;
color: #131313;
font-weight: bold;
cursor: pointer;
text-decoration:none
}
.btn:hover {
background-color: rgb(24,216,96);
color: whitesmoke
}
h1 {
color: rgb(24,216,96);
}
@media (max-width: 600px) {
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #131313;
color: #ffffff;
}
.container {
max-width: 100%;
margin: 0;
padding: 10px;
box-sizing: border-box;
}
.bordered {
border: 1px solid rgb(24,216,96);
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
}
li {
font-weight: bold;
}
a {
text-decoration-color: rgb(24,216,96);
color: rgb(24,216,96);
}
.form-group {
display: flex;
flex-direction: column;
margin-bottom: 10px;
}
.form-group label {
font-weight: bold;
margin-bottom: 5px;
}
.form-control {
background-color: #232323;
border: none;
border-radius: 5px;
padding: 10px;
color: #ffffff;
}
/* .form-control:focus {
outline: none;
box-shadow: 0 0 0 2px rgb(24,216,96);
} */
.form-control:valid:not(:placeholder-shown) {
outline: none;
border: 2px solid rgb(24,216,96);
}
.form-control:invalid {
outline: none;
border: 2px solid red;
}
.btn {
background-color: rgb(24,216,96);
border: none;
border-radius: 5px;
padding: 10px 20px;
color: #131313;
font-weight: bold;
cursor: pointer;
text-decoration:none
}
.btn2 {
margin-top: 10px;
background-color: rgb(24,216,96);
border: none;
border-radius: 5px;
padding: 10px 20px;
color: #131313;
font-weight: bold;
cursor: pointer;
text-decoration:none
}
.btn:hover {
background-color: rgb(24,216,96);
color: whitesmoke
}
h1 {
color: rgb(24,216,96);
}
}

15
Docker/src/.old/templates/404.html
View File

@@ -1,15 +0,0 @@
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="static/css/style.css", filename= 'style.css'>
<title>SpotDL Web</title>
</head>
<body>
<div class="container">
<h1>Error 404</h1>
<h2>Il semble que vous soyez perdu. Revenez à la page d'accueil</h2>
<button class="btn" onclick="window.location.href = '/';">Accueil</button>
</div>
</body>

56
Docker/src/.old/templates/index.html
View File

@@ -1,56 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="static/css/style.css", filename= 'style.css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SpotDL Web</title>
</head>
<body>
<div class="container">
<h1 class="title">SpotDL Web</h1>
<div class="bordered">
<p>
<h3>Procédure</h3>
<ul>
<li>Se rendre sur Spotify en cliquant <a rel="stylesheet" href="https://open.spotify.com/" target="_blank">ici</a></li>
<li>Chercher un Album ou une Playlist</li>
<li>Sur Ordinateur : A droite du coeur, cliquez sur ... puis Partager et Copier le lien vers (Album ou Playlist)</li>
<li>Sur Smartphone : Cliquez sur le logo de partage puis Copier le lien</li>
</ul>
</p>
</div>
<form action="/download" method="POST">
<div class="form-group">
<input type="text" class="form-control" name="url1" id="url1" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL d'un Album ou d'une Playlist">
</div>
<div class="form-group">
<input type="text" class="form-control" name="url2" id="url2" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL d'un Album ou d'une Playlist">
</div>
<div class="form-group">
<input type="text" class="form-control" name="url3" id="url3" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL d'un Album ou d'une Playlist">
</div>
<div class="form-group">
<input type="text" class="form-control" name="url4" id="url4" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL d'un Album ou d'une Playlist">
</div>
<div class="form-group">
<input type="text" class="form-control" name="url5" id="url5" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL d'un Album ou d'une Playlist">
</div>
<button type="submit" class="btn" id="download-button" onclick="startDownload()">Télécharger</button>
<button type="reset" class="btn" id="refresh-button" onclick="refreshPage()">Rafraîchir</button>
</form>
<!-- <button class="btn2" id="refresh-button" onclick="refreshPage()">Rafraîchir</button> -->
<!-- <button type="reset" class="btn" id="refresh-button" onclick="refreshPage()">Rafraîchir</button> -->
</div>
<script>
function startDownload() {
document.getElementById('download-button').innerHTML = 'Téléchargement en cours...';
}
function refreshPage() {
window.location.reload();
}
</script>
</body>
</html

61
Docker/src/app.py
View File

@@ -1,61 +0,0 @@
from flask import Flask, request, send_file, render_template
from subprocess import run
import os
import secrets
app = Flask(__name__)
app.secret_key = secrets.token_hex(16)
@app.route('/', methods=['GET', 'POST'])
def download_file():
session_id = secrets.token_hex(16)
download_param_album = '{artist}/{album}/{artist} - {title}'
download_param_playlist = '{playlist}/{artists}/{album} - {title} {artist}'
download_param_track = '{artist}/{album}/{artist} - {title}'
if request.method == 'POST':
url1 = request.form['url1']
url2 = request.form['url2']
url3 = request.form['url3']
url4 = request.form['url4']
url5 = request.form['url5']
# Vérifier si au moins un champ est vide
if not url1 and not url2 and not url3 and not url4 and not url5:
return render_template('erreur.html')
urls = [url1, url2, url3, url4, url5]
# Créer le dossier 'downloads' s'il n'existe pas
if not os.path.exists('downloads'):
os.makedirs('downloads')
os.chdir('downloads')
os.system(f'rm -rf *')
for url in urls:
if url:
if "album" in url:
run(['python3', '-m', 'spotdl', url, '--output', download_param_album])
elif "playlist" in url:
run(['python3', '-m', 'spotdl', url, '--output', download_param_playlist])
elif "track" in url:
run(['python3', '-m', 'spotdl', url, '--output', download_param_track])
run(['zip', '-r', 'musics.zip', '.'])
os.chdir('../')
path = "downloads/musics.zip"
return send_file(path, as_attachment=True)
return render_template('index.html')
@app.errorhandler(404)
def page_not_found():
return render_template('404.html'), 404
if __name__ == '__main__':
app.run(debug=True, port=3000)

193
Docker/src/static/css/style.css
View File

@@ -1,193 +0,0 @@
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #131313;
color: #ffffff;
}
.container {
max-width: 900px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
}
.bordered {
border: 1px solid rgb(24,216,96);
border-radius: 5px;
padding: 20px;
margin-bottom: 20px;
}
li {
font-weight: bold;
}
a {
text-decoration-color: rgb(24,216,96);
color: rgb(24,216,96);
}
.form-group {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
.form-group label {
font-weight: bold;
margin-bottom: 5px;
}
.form-control {
background-color: #232323;
border: none;
border-radius: 5px;
padding: 10px;
color: #ffffff;
}
/* .form-control:focus {
outline: none;
box-shadow: 0 0 0 2px rgb(24,216,96);
} */
.form-control:valid:not(:placeholder-shown) {
outline: none;
border: 2px solid rgb(24,216,96);
}
.form-control:invalid {
outline: none;
border: 2px solid red;
}
.btn {
background-color: rgb(24,216,96);
border: none;
border-radius: 5px;
padding: 10px 20px;
color: #131313;
font-weight: bold;
cursor: pointer;
text-decoration:none
}
.btn2 {
margin-top: 10px;
background-color: rgb(24,216,96);
border: none;
border-radius: 5px;
padding: 10px 20px;
color: #131313;
font-weight: bold;
cursor: pointer;
text-decoration:none
}
.btn:hover {
background-color: rgb(24,216,96);
color: whitesmoke
}
h1 {
color: rgb(24,216,96);
}
@media (max-width: 600px) {
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #131313;
color: #ffffff;
}
.container {
max-width: 100%;
margin: 0;
padding: 10px;
box-sizing: border-box;
}
.bordered {
border: 1px solid rgb(24,216,96);
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
}
li {
font-weight: bold;
}
a {
text-decoration-color: rgb(24,216,96);
color: rgb(24,216,96);
}
.form-group {
display: flex;
flex-direction: column;
margin-bottom: 10px;
}
.form-group label {
font-weight: bold;
margin-bottom: 5px;
}
.form-control {
background-color: #232323;
border: none;
border-radius: 5px;
padding: 10px;
color: #ffffff;
}
/* .form-control:focus {
outline: none;
box-shadow: 0 0 0 2px rgb(24,216,96);
} */
.form-control:valid:not(:placeholder-shown) {
outline: none;
border: 2px solid rgb(24,216,96);
}
.form-control:invalid {
outline: none;
border: 2px solid red;
}
.btn {
background-color: rgb(24,216,96);
border: none;
border-radius: 5px;
padding: 10px 20px;
color: #131313;
font-weight: bold;
cursor: pointer;
text-decoration:none
}
.btn2 {
margin-top: 10px;
background-color: rgb(24,216,96);
border: none;
border-radius: 5px;
padding: 10px 20px;
color: #131313;
font-weight: bold;
cursor: pointer;
text-decoration:none
}
.btn:hover {
background-color: rgb(24,216,96);
color: whitesmoke
}
h1 {
color: rgb(24,216,96);
}
}

6
Docker/src/static/js/script.js
View File

@@ -1,6 +0,0 @@
function startDownload() {
document.getElementById('download-button').innerHTML = 'Téléchargement en cours...';
}
function refreshPage() {
window.location.reload();
}

14
Docker/src/templates/404.html
View File

@@ -1,14 +0,0 @@
{% extends 'layout.html' %}
{% block body %}
<body>
<div class="container">
<h1>Error 404</h1>
<h2>Il semble que vous soyez perdu. Revenez à la page d'accueil</h2>
<button class="btn" onclick="window.location.href = '/';">Accueil</button>
</div>
</body>
{% endblock body %}

18
Docker/src/templates/erreur.html
View File

@@ -1,18 +0,0 @@
{% extends 'layout.html' %}
{% block body %}
<body>
<div class="container">
<h1 class="title"> SpotDL Web </h1>
<h2> Veuillez entrer au moins une URL ! </h2>
<button class="btn" onclick="window.location.href = '/';">Accueil</button>
{% if message %}
<p>{{ message }}</p>
{% endif %}
</div>
</body>
{% endblock body %}

39
Docker/src/templates/index.html
View File

@@ -1,39 +0,0 @@
{% extends 'layout.html' %}
{% block body %}
<div class="container">
<h1 class="title">SpotDL Web</h1>
<div class="bordered">
<p>
<h3>Procédure</h3>
<ul>
<li>Se rendre sur Spotify en cliquant <a rel="stylesheet" href="https://open.spotify.com/" target="_blank">ici</a></li>
<li>Chercher un Album ou une Playlist</li>
<li>Sur Ordinateur : A droite du coeur, cliquez sur ... puis Partager et Copier le lien vers (Album ou Playlist)</li>
<li>Sur Smartphone : Cliquez sur le logo de partage puis Copier le lien</li>
</ul>
</p>
</div>
<form action="/" method="POST">
<div class="form-group">
<input type="text" class="form-control" name="url1" id="url1" pattern="^https://open\.spotify\.com/(?:album|playlist|track)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL d'un Album ou d'une Playlist">
</div>
<div class="form-group">
<input type="text" class="form-control" name="url2" id="url2" pattern="^https://open\.spotify\.com/(?:album|playlist|track)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL d'un Album ou d'une Playlist">
</div>
<div class="form-group">
<input type="text" class="form-control" name="url3" id="url3" pattern="^https://open\.spotify\.com/(?:album|playlist|track)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL d'un Album ou d'une Playlist">
</div>
<div class="form-group">
<input type="text" class="form-control" name="url4" id="url4" pattern="^https://open\.spotify\.com/(?:album|playlist|track)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL d'un Album ou d'une Playlist">
</div>
<div class="form-group">
<input type="text" class="form-control" name="url5" id="url5" pattern="^https://open\.spotify\.com/(?:album|playlist|track)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL d'un Album ou d'une Playlist">
</div>
<button type="submit" class="btn" id="download-button" onclick="startDownload()">Télécharger</button>
<button type="reset" class="btn" id="refresh-button" onclick="refreshPage()">Rafraîchir</button>
</form>
</div>
{% endblock body %}

16
Docker/src/templates/layout.html
View File

@@ -1,16 +0,0 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="static/css/style.css", filename= 'style.css'>
<script src="/static/js/script.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SpotDL Web</title>
</head>
<body>
{% block body %}{% endblock body %}
</body>
</html>

7
Docker/src/templates/modele.html
View File

@@ -1,7 +0,0 @@
{% extends 'layout.html' %}
{% block body %}
{% endblock body %}

6
Docker/Dockerfile → Dockerfile
View File

@@ -1,5 +1,5 @@
FROM alpine:latest
LABEL authors="Guillaume"
# set the working directory in the container
WORKDIR /app
@@ -22,7 +22,9 @@ RUN spotdl --download-ffmpeg
RUN apk update && apk add zip
# copy the content of the local src directory to the working directory
COPY src/ .
COPY static ./static
COPY templates ./templates
COPY app.py .
# command to run on container start
CMD [ "python", "./app.py" ]

BIN
__pycache__/app.cpython-310.pyc Normal file
View File

Binary file not shown.

68
app.py
View File

@@ -1,61 +1,67 @@
from flask import Flask, request, send_file, render_template
from flask import Flask, request, redirect, url_for, send_file, render_template, send_from_directory
from subprocess import run
import os
import secrets
app = Flask(__name__)
app.secret_key = secrets.token_hex(16)
@app.route('/', methods=['GET', 'POST'])
def download_file():
session_id = secrets.token_hex(16)
def process_file(urls):
download_param_album = '{artist}/{album}/{artist} - {title}'
download_param_playlist = '{playlist}/{artists}/{album} - {title} {artist}'
download_param_track = '{artist}/{album}/{artist} - {title}'
os.chdir('downloads')
os.system(f'rm -rf *')
for url in urls:
if url:
if "album" in url:
run(['python3', '-m', 'spotdl', url, '--output', download_param_album])
elif "playlist" in url:
run(['python3', '-m', 'spotdl', url, '--output', download_param_playlist])
elif "track" in url:
run(['python3', '-m', 'spotdl', url, '--output', download_param_track])
run(['zip', '-r', 'musics.zip', '.'])
os.chdir('../')
@app.route('/', methods=['GET', 'POST'])
def upload_form():
return render_template('index.html')
@app.route('/download', methods=['POST'])
def download_file():
if request.method == 'POST':
url1 = request.form['url1']
url2 = request.form['url2']
url3 = request.form['url3']
url4 = request.form['url4']
url5 = request.form['url5']
urls = [url1, url2, url3]
# Vérifier si au moins un champ est vide
if not url1 and not url2 and not url3 and not url4 and not url5:
if not url1 and not url2 and not url3 :
return render_template('erreur.html')
urls = [url1, url2, url3, url4, url5]
# Créer le dossier 'downloads' s'il n'existe pas
if not os.path.exists('downloads'):
os.makedirs('downloads')
os.chdir('downloads')
os.system(f'rm -rf *')
process_file(urls)
for url in urls:
if url:
if "album" in url:
run(['python3', '-m', 'spotdl', url, '--output', download_param_album])
elif "playlist" in url:
run(['python3', '-m', 'spotdl', url, '--output', download_param_playlist])
elif "track" in url:
run(['python3', '-m', 'spotdl', url, '--output', download_param_track])
run(['zip', '-r', 'musics.zip', '.'])
os.chdir('../')
path = "downloads/musics.zip"
return send_file(path, as_attachment=True)
return render_template('index.html')
# path = "downloads/musics.zip"
# return send_file(path, as_attachment=True)
return render_template('finish.html')
@app.route('/zip', methods=['GET', 'POST'])
def zip():
path = "downloads/musics.zip"
return send_file(path, as_attachment=True)
@app.errorhandler(404)
def page_not_found():
def page_not_found(error): # error est necessaire
return render_template('404.html'), 404
if __name__ == '__main__':
app.run(debug=True, port=3000)
app.run(host='0.0.0.0', debug=True, port=3000)

2
requirements.txt Normal file
View File

@@ -0,0 +1,2 @@
Flask==2.3.2
spotdl==4.1.10

103
static/css/style.css
View File

@@ -1,4 +1,4 @@
body {
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #131313;
@@ -6,7 +6,7 @@
}
.container {
max-width: 900px;
max-width: 700px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
@@ -28,7 +28,6 @@
color: rgb(24,216,96);
}
.form-group {
display: flex;
flex-direction: column;
@@ -96,98 +95,6 @@
}
@media (max-width: 600px) {
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #131313;
color: #ffffff;
}
.container {
max-width: 100%;
margin: 0;
padding: 10px;
box-sizing: border-box;
}
.bordered {
border: 1px solid rgb(24,216,96);
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
}
li {
font-weight: bold;
}
a {
text-decoration-color: rgb(24,216,96);
color: rgb(24,216,96);
}
.form-group {
display: flex;
flex-direction: column;
margin-bottom: 10px;
}
.form-group label {
font-weight: bold;
margin-bottom: 5px;
}
.form-control {
background-color: #232323;
border: none;
border-radius: 5px;
padding: 10px;
color: #ffffff;
}
/* .form-control:focus {
outline: none;
box-shadow: 0 0 0 2px rgb(24,216,96);
} */
.form-control:valid:not(:placeholder-shown) {
outline: none;
border: 2px solid rgb(24,216,96);
}
.form-control:invalid {
outline: none;
border: 2px solid red;
}
.btn {
background-color: rgb(24,216,96);
border: none;
border-radius: 5px;
padding: 10px 20px;
color: #131313;
font-weight: bold;
cursor: pointer;
text-decoration:none
}
.btn2 {
margin-top: 10px;
background-color: rgb(24,216,96);
border: none;
border-radius: 5px;
padding: 10px 20px;
color: #131313;
font-weight: bold;
cursor: pointer;
text-decoration:none
}
.btn:hover {
background-color: rgb(24,216,96);
color: whitesmoke
}
h1 {
color: rgb(24,216,96);
}
}
.container {
padding: 10px;
}

15
templates/404.html
View File

@@ -1,3 +1,18 @@
<!--<head>-->
<!-- <meta charset="UTF-8">-->
<!-- <link rel="stylesheet" href="static/css/style.css", filename= 'style.css'>-->
<!-- <title>SpotDL Web</title>-->
<!--</head>-->
<!--<body>-->
<!-- <div class="container">-->
<!-- <h1>Error 404</h1>-->
<!-- <h2>Il semble que vous soyez perdu. Revenez à la page d'accueil</h2>-->
<!-- <button class="btn" onclick="window.location.href = '/';">Accueil</button>-->
<!-- </div>-->
<!--</body>-->
{% extends 'layout.html' %}
{% block body %}

35
templates/erreur.html
View File

@@ -1,17 +1,36 @@
<!--<head>-->
<!-- <meta charset="UTF-8">-->
<!-- <link rel="stylesheet" href="static/css/style.css", filename= 'style.css'>-->
<!-- <title>SpotDL Web</title>-->
<!--</head>-->
<!--<body>-->
<!-- <div class="container">-->
<!-- <h1 class="title"> SpotDL Web </h1>-->
<!-- <h2> Veuillez entrer au moins une URL ! </h2>-->
<!-- <button class="btn" onclick="window.location.href = '/';">Accueil</button>-->
<!-- {% if message %}-->
<!-- <p>{{ message }}</p>-->
<!-- {% endif %}-->
<!-- </div>-->
<!--</body>-->
{% extends 'layout.html' %}
{% block body %}
<body>
<div class="container">
<h1 class="title"> SpotDL Web </h1>
<h2> Veuillez entrer au moins une URL ! </h2>
<button class="btn" onclick="window.location.href = '/';">Accueil</button>
<div class="container">
<h1 class="title"> SpotDL Web </h1>
<h2> Veuillez entrer au moins une URL ! </h2>
<button class="btn" onclick="window.location.href = '/';">Accueil</button>
{% if message %}
<p>{{ message }}</p>
{% endif %}
</div>
{% if message %}
<p>{{ message }}</p>
{% endif %}
</div>
</body>

17
Docker/src/.old/templates/erreur.html → templates/finish.html
View File

@@ -1,13 +1,12 @@
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="static/css/style.css", filename= 'style.css'>
<title>SpotDL Web</title>
</head>
{% extends 'layout.html' %}
<body>
{% block body %}
<body>
<div class="container">
<h1 class="title"> SpotDL Web </h1>
<h2> Veuillez entrer au moins une URL ! </h2>
<h2>Votre musique est prête à être téléchargée</h2>
<button class="btn" onclick="window.location.href = '/zip';">Télécharger</button>
<button class="btn" onclick="window.location.href = '/';">Accueil</button>
{% if message %}
@@ -15,4 +14,6 @@
{% endif %}
</div>
</body>
</body>
{% endblock body %}

34
templates/index.html
View File

@@ -1,7 +1,14 @@
{% extends 'layout.html' %}
{% block body %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="static/css/style.css" , filename= 'style.css'>
<script src="/static/js/script.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SpotDL Web</title>
</head>
<body>
<div class="container">
<h1 class="title">SpotDL Web</h1>
<div class="bordered">
@@ -10,30 +17,31 @@
<ul>
<li>Se rendre sur Spotify en cliquant <a rel="stylesheet" href="https://open.spotify.com/" target="_blank">ici</a></li>
<li>Chercher un Album ou une Playlist</li>
<li>Sur Ordinateur : A droite du coeur, cliquez sur ... puis Partager et Copier le lien vers (Album ou Playlist)</li>
<li>Sur Ordinateur : À droite du coeur, cliquez sur ... puis Partager et Copier le lien vers (Album ou Playlist)</li>
<li>Sur Smartphone : Cliquez sur le logo de partage puis Copier le lien</li>
</ul>
</p>
<p>
</div>
<form action="/" method="POST">
<form action="/download" method="POST">
<div class="form-group">
<input type="text" class="form-control" name="url1" id="url1" pattern="^https://open\.spotify\.com/(?:album|playlist|track)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL d'un Album ou d'une Playlist">
<input type="text" class="form-control" name="url1" id="url1" pattern="^https://open\.spotify\.com/(?:album|playlist|track)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL d'une Piste, d'un Album ou d'une Playlist">
</div>
<div class="form-group">
<input type="text" class="form-control" name="url2" id="url2" pattern="^https://open\.spotify\.com/(?:album|playlist|track)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL d'un Album ou d'une Playlist">
<input type="text" class="form-control" name="url2" id="url2" pattern="^https://open\.spotify\.com/(?:album|playlist|track)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL d'une Piste, d'un Album ou d'une Playlist">
</div>
<div class="form-group">
<input type="text" class="form-control" name="url3" id="url3" pattern="^https://open\.spotify\.com/(?:album|playlist|track)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL d'un Album ou d'une Playlist">
<input type="text" class="form-control" name="url3" id="url3" pattern="^https://open\.spotify\.com/(?:album|playlist|track)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL d'une Piste, d'un Album ou d'une Playlist">
</div>
<div class="form-group">
<input type="text" class="form-control" name="url4" id="url4" pattern="^https://open\.spotify\.com/(?:album|playlist|track)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL d'un Album ou d'une Playlist">
<input type="text" class="form-control" name="url4" id="url4" pattern="^https://open\.spotify\.com/(?:album|playlist|track)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL d'une Piste, d'un Album ou d'une Playlist">
</div>
<div class="form-group">
<input type="text" class="form-control" name="url5" id="url5" pattern="^https://open\.spotify\.com/(?:album|playlist|track)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL d'un Album ou d'une Playlist">
<input type="text" class="form-control" name="url5" id="url5" pattern="^https://open\.spotify\.com/(?:album|playlist|track)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL d'une Piste, d'un Album ou d'une Playlist">
</div>
<button type="submit" class="btn" id="download-button" onclick="startDownload()">Télécharger</button>
<button type="submit" class="btn" id="download-button" onclick="startDownload()">Démarrer</button>
<button type="reset" class="btn" id="refresh-button" onclick="refreshPage()">Rafraîchir</button>
</form>
</div>
{% endblock body %}
</body>
</html>

2
templates/layout.html
View File

@@ -2,7 +2,7 @@
<html lang="fr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="static/css/style.css", filename= 'style.css'>
<link rel="stylesheet" href="./static/css/style.css", filename= 'style.css'>
<script src="/static/js/script.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SpotDL Web</title>