Ajout d'un tampon sur la barre de progression
All checks were successful
/ build (push) Successful in 3m7s

This commit is contained in:
nono-lqdn 2026-05-31 13:23:23 +02:00
parent c19d8df1d0
commit 6c6035f5aa
2 changed files with 42 additions and 8 deletions

View file

@ -121,3 +121,39 @@ font-size : 1.5em;
text-align : end; text-align : end;
background: linear-gradient(90deg,rgba(136, 0, 255, 1) 0%, rgba(255, 78, 0, 1) 42%, rgba(255, 191, 62, 1) 100%); background: linear-gradient(90deg,rgba(136, 0, 255, 1) 0%, rgba(255, 78, 0, 1) 42%, rgba(255, 191, 62, 1) 100%);
} }
.stamp {
overflow: hidden;
position: absolute;
top: 100px;
right: 300px;
padding: 10px 20px;
background-color: rgba(255, 0, 0, 0.4);
border: 2px dashed rgba(255, 0, 0, 0.8);
border-radius: 2px;
transform: rotate(10deg);
font-family: 'Courier New', Courier, monospace;
font-size: 1em;
font-weight: bold;
color: rgba(255, 0, 0, 0.9);
text-transform: uppercase;
z-index: 10;
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.8);
opacity: 1;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
background-image: linear-gradient(
135deg,
rgba(128, 0, 0, 0.1) 25%,
rgba(128, 0, 0, 0.4) 50%,
rgba(128, 0, 0, 0.1) 75%
);
background-size: 200% 200%;
animation: scan 3s ease infinite;
}
@keyframes scan {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

View file

@ -99,25 +99,23 @@
<section id="progress"> <section id="progress">
<h3> <h3>
<span>Où en est-on ?</span> <span>Où en est-on ?</span>
<div class="stamp" id="myStamp">COMPLET</div>
</h3> </h3>
<!--<p>Il y a</p> <p>Il y a</p>
<div class="places"> <div class="places" >
<span class="bar"> <span class="bar">
<span id="gauge-bar" style="width:0" class="progression lessthanhalf"> <span id="gauge-bar" style="width:0" class="progression lessthanhalf">
<span id="gauge-text">?/200</span> <span id="gauge-text">?/200</span>
</span> </span>
</span> </span>
</div> </div>
<div>places déjà réservées.</div>
<p>places déjà réservées.</p>-->
<h3>200 places réservées = jauge complète !</h3>
<p> <p>
Si des places se libèrent, tu peux faire une demande sur Si des places se libèrent, tu peux faire une demande sur
<a class="btn-nice" href="https://grist.interhacker.space/o/camp/forms/eJxwFtkGFCYUQBq4kPLWUg/4">la liste d'attente</a>
</p> </p>
<h3>
<a class="btn-nice" href="https://grist.interhacker.space/o/camp/forms/eJxwFtkGFCYUQBq4kPLWUg/4">liste d'attente</a>
</h3>
<br> <br>
<p>Et nous avons reçu</p> <p>Et nous avons reçu</p>
<div class="places"> <div class="places">