Modification complète du CSS en cours

This commit is contained in:
2023-01-01 21:30:14 +01:00
parent 121da9eefd
commit a8f96501c2
8 changed files with 527 additions and 167 deletions

View File

@@ -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>