beau/projet-clicodrome2.0
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

le bo css

Browse source
This commit is contained in:
thaaoblues 2024-12-31 16:45:36 +01:00
parent 879f10659c
commit d61a42d24b
2 changed files with 32 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
css/alerte/a9.css
View file

@ -1,23 +1,45 @@
.modal { .modal {
background: linear-gradient(135deg, #1f1c2c, #928dab); /* Dégradé futuriste */ background: linear-gradient(135deg, #1f1c2c, #928dab); /* Futuristic gradient */
backdrop-filter: blur(10px); /* Flou pour un effet sophistiqué */ backdrop-filter: blur(10px); /* Sophisticated blur effect */
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
} }
.modal-content { .modal-content {
background: radial-gradient(circle, #222, #000); margin-top: 20vh;
background: radial-gradient(circle, #222, #000); /* Dark radial gradient */
color: #fff; color: #fff;
border-radius: 20px; border-radius: 20px;
border: none; border: none;
box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.5); /* Intense shadows */
transform: perspective(1000px) rotateX(5deg); /* 3D tilt effect */
padding: 20px;
width: 40vw; width: 40vw;
box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.5); /* Ombres intenses */ margin-left: auto;
transform: perspective(1000px) rotateX(5deg); /* Effet 3D */ margin-right: auto;
} }
.modal.button { .bouton-ok {
background: linear-gradient(45deg, #ff6f91, #ffc371); /* Dégradé dynamique */ background: linear-gradient(45deg, #ff6f91, #ffc371); /* Dynamic gradient */
font-size: 20px; font-size: 20px;
color: white;
border: none;
border-radius: 50px; border-radius: 50px;
animation: pulse 1.5s infinite; /* Animation d’impulsion */ padding: 15px 30px;
cursor: pointer;
animation: pulse 1.5s infinite; /* Pulse animation */
transition: transform 0.3s ease;
}
.bouton-ok:hover {
transform: scale(1.2) ; /* Slightly larger on hover */
background-color: rebeccapurple;
} }
@keyframes pulse { @keyframes pulse {

4
index.html
View file

@ -62,7 +62,7 @@
<!-- Custom Alert Modal --> <!-- Custom Alert Modal -->
<div id="alerte_jolie" class="modal"> <div id="alerte_jolie" class="modal div-centrer-contenu">
<div class="modal-content"> <div class="modal-content">
<span class="close-btn" onclick="fermerAlerte()">&times;</span> <span class="close-btn" onclick="fermerAlerte()">&times;</span>
<p id="message_alerte_jolie"></p> <p id="message_alerte_jolie"></p>
@ -70,7 +70,7 @@
<div class="div-centrer-contenu"> <div class="div-centrer-contenu">
<input type="text" id="input_alerte_jolie"> <input type="text" id="input_alerte_jolie">
<button onclick="fermerAlerte()">OK</button> <button class="bouton-ok" onclick="fermerAlerte()">OK</button>
</div> </div>
</div> </div>