Nombreuses modifications au niveau du CSS ainsi que sur app.py côté chemins

This commit is contained in:
2022-12-31 20:12:05 +01:00
parent d2397191a0
commit 121da9eefd
5 changed files with 168 additions and 14 deletions

View File

@@ -13,11 +13,11 @@
<form class="logs">
<div><h1>Fichier de texte</h1></div>
<div>
<ul>
<a>
{% for line in result2 %}
<li>{{ line }}</li>
<p>{{ line }}<br></p>
{% endfor %}
</ul>
</a>
</div>
</form>

53
templates/test.html Normal file
View File

@@ -0,0 +1,53 @@
<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>

View File

@@ -15,31 +15,41 @@
<div style="margin-top: 10px;">
<!-- <label for="url1">URL 1:</label> -->
<input type="text" name="url1" id="url1" placeholder="URL" value="https://open.spotify.com/album/3QgFzksD4J43TnGIJOOrRV?si=X6q4QeJ_TtCi9q9fu25Aww">
<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" placeholder="URL">
<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" placeholder="URL">
<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" placeholder="URL">
<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" placeholder="URL">
<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;">
<input type="submit" value="Téléchargement">
<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>