diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..549a44e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+# Ignore dossier docker
+Docker
diff --git a/Docker/spotdlweb.yaml b/Docker/spotdlweb.yaml
new file mode 100644
index 0000000..442ab0c
--- /dev/null
+++ b/Docker/spotdlweb.yaml
@@ -0,0 +1,10 @@
+version: '3.3'
+services:
+    spotdlweb:
+        ports:
+            - '80:3000'
+        container_name: spotdlweb
+        #volumes:
+            #- '/docker/containers/spotdl/musics:/app/downloads'
+        restart: unless-stopped
+        image: 'spotdlweb:latest'
diff --git a/Docker/src/app.py b/Docker/src/app.py
new file mode 100644
index 0000000..9a2bf29
--- /dev/null
+++ b/Docker/src/app.py
@@ -0,0 +1,68 @@
+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)
\ No newline at end of file
diff --git a/Docker/src/static/css/style.css b/Docker/src/static/css/style.css
new file mode 100644
index 0000000..0e36080
--- /dev/null
+++ b/Docker/src/static/css/style.css
@@ -0,0 +1,193 @@
+  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);
+  }
+}
+
diff --git a/Docker/src/templates/404.html b/Docker/src/templates/404.html
new file mode 100644
index 0000000..8382b12
--- /dev/null
+++ b/Docker/src/templates/404.html
@@ -0,0 +1,15 @@
+<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>
+
diff --git a/Docker/src/templates/erreur.html b/Docker/src/templates/erreur.html
new file mode 100644
index 0000000..fee662d
--- /dev/null
+++ b/Docker/src/templates/erreur.html
@@ -0,0 +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 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>
diff --git a/Docker/src/templates/index.html b/Docker/src/templates/index.html
new file mode 100644
index 0000000..4a98c25
--- /dev/null
+++ b/Docker/src/templates/index.html
@@ -0,0 +1,56 @@
+<!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
diff --git a/app.py b/app.py
index 68c0906..e1ac3f9 100644
--- a/app.py
+++ b/app.py
@@ -1,11 +1,13 @@
 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
+import os, logging, json
 
 app = Flask(__name__)
 
+with open("identifiants.json") as f:
+  identifiants = json.load(f)
+
 def process_file(urls):
     download_param_album = '{artist}/{album}/{artist} - {title}'
     download_param_playlist = '{playlist}/{artists}/{album} - {title} {artist}'
@@ -63,6 +65,5 @@ def download_file():
 def page_not_found(error):
     return render_template('404.html'), 404
 
-
 if __name__ == '__main__':
     app.run(debug=True, port=3000)
\ No newline at end of file
diff --git a/identifiants.json b/identifiants.json
new file mode 100644
index 0000000..c5e4fda
--- /dev/null
+++ b/identifiants.json
@@ -0,0 +1,3 @@
+{
+    "guillaume": "password"
+  }
\ No newline at end of file