Nombreuses modifications au niveau du CSS ainsi que sur app.py côté chemins
This commit is contained in:
@@ -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
53
templates/test.html
Normal 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>
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user