Refonte complète
This commit is contained in:
@@ -1,34 +0,0 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename= 'css/style.css') }}">
|
||||
<title>SpotDL Web</title>
|
||||
</head>
|
||||
<body>
|
||||
<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 %}
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a>
|
||||
{% for log in logs %}
|
||||
<p>{{ log }}<br></p>
|
||||
{% endfor %}
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
@@ -1,19 +0,0 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename= 'css/style.css') }}">
|
||||
<title>SpotDL Web</title>
|
||||
</head>
|
||||
|
||||
<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>
|
||||
|
||||
42
templates/index.html
Normal file
42
templates/index.html
Normal file
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>
|
||||
<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>
|
||||
</form>
|
||||
<button class="btn2" 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
|
||||
@@ -1,11 +0,0 @@
|
||||
<head>
|
||||
<title>Fichier de texte</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Fichier de texte</h1>
|
||||
<ul>
|
||||
{% for log in logs %}
|
||||
<p>{{ log }}</p>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</body>
|
||||
@@ -1,53 +0,0 @@
|
||||
<style>
|
||||
|
||||
button:hover {
|
||||
background-color: blue;
|
||||
color: white;
|
||||
}
|
||||
|
||||
button:active::before {
|
||||
content: "Bouton cliqué";
|
||||
}
|
||||
|
||||
input:empty {
|
||||
border: 2px solid grey;
|
||||
font-size: 13px;
|
||||
padding-left: 7px;
|
||||
padding-right: 7px;
|
||||
border-radius: 9px;
|
||||
width:100%;
|
||||
height:30px;
|
||||
}
|
||||
input:valid:not(:placeholder-shown) {
|
||||
border: 2px solid green;
|
||||
font-size: 13px;
|
||||
padding-left: 7px;
|
||||
padding-right: 7px;
|
||||
border-radius: 9px;
|
||||
width:100%;
|
||||
height:30px;
|
||||
}
|
||||
input:invalid {
|
||||
border: 2px solid red;
|
||||
font-size: 13px;
|
||||
padding-left: 7px;
|
||||
padding-right: 7px;
|
||||
border-radius: 9px;
|
||||
width:100%;
|
||||
height:30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- L'élément input suivant aura une bordure grise s'il est vide, verte s'il contient une valeur valide, ou rouge s'il contient une valeur qui ne respecte pas le format défini par la regex -->
|
||||
<input type="text" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)$" placeholder="url"/>
|
||||
<button id="mon-bouton">Mon bouton</button>
|
||||
<script>
|
||||
// Récupère l'élément bouton grâce à son ID
|
||||
const bouton = document.getElementById('mon-bouton');
|
||||
|
||||
// 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 = "Bouton cliqué";
|
||||
});
|
||||
</script>
|
||||
@@ -1,64 +0,0 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename= 'css/style.css') }}">
|
||||
<title>SpotDL Web</title>
|
||||
</head>
|
||||
<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">
|
||||
</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">
|
||||
</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">
|
||||
</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">
|
||||
</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">
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 10px;">
|
||||
<button type="submit" id="btn" class="btn" value="Téléchargement">Téléchargement</button>
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user