mougnibas/projet-clicodrome
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

alerte toute jolie

Browse source
This commit is contained in:
Theo Mougnibas 2024-11-29 10:35:07 +01:00
parent 79c86432cb
commit b0ff7a6e23
4 changed files with 99 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
css/alerte.css Normal file
View file

@ -0,0 +1,65 @@
/* styles.css */
/* Modal styles */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Fixed in place */
z-index: 1; /* On top of everything */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
background-color: rgba(0, 0, 0, 0.4); /* Black background with transparency */
}
/* Modal content box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* Center the modal */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Width of the modal */
max-width: 400px;
text-align: center;
}
/* Close button */
.close-btn {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close-btn:hover,
.close-btn:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* Button inside modal */
.modal.button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
.modal:hover {
background-color: #45a049;
}
/* Styling for the main button */
.modal.button.show-alert-btn {
padding: 10px 20px;
background-color: #008CBA;
color: white;
border: none;
cursor: pointer;
}
.modal.button.show-alert-btn:hover {
background-color: #007b9e;
}

11
index.html
View file

@ -6,12 +6,14 @@
<title>Prog Web Legend</title>
<script> alert("click")</script>
<link rel="stylesheet" href="" id="link-css">
<link rel="stylesheet" href="./css/alerte.css">
</head>
<body>
<script src="./js/intro.js" deref></script>
<script src="./js/element.js"></script>
<script src="./js/technologie.js"></script>
<script src="./js/main.js"></script>
<script src="./js/alerte.js"></script>
<div id="div_button_score">
</div>
@ -36,6 +38,15 @@
</tbody>
</table>
<!-- Custom Alert Modal -->
<div id="alerte_jolie" class="modal">
<div class="modal-content">
<span class="close-btn" onclick="fermerAlerte()">&times;</span>
<p id="message_alerte_jolie"></p>
<button onclick="fermerAlerte()">OK</button>
</div>
</div>
</body>
<footer>
<p>L'evolution est non contractuelle, adaptée pour le gameplay</p>

22
js/alerte.js Normal file
View file

@ -0,0 +1,22 @@
// Fonction pour afficher une alerte mais plus jolie que celle par défaut
function ouvrirAlerte(message) {
// on prend les elements
var modal = document.getElementById('alerte_jolie');
var messageElement = document.getElementById('message_alerte_jolie');
// Mettre le message
messageElement.textContent = message;
// et on affiche en changeant la propriété css
modal.style.display = "block";
}
// Fonction pour fermer l'alerte
function fermerAlerte() {
var modal = document.getElementById('alerte_jolie');
// et on cache en changeant la propriété css
modal.style.display = "none";
}

2
js/main.js
View file

@ -85,7 +85,7 @@ async function remplirMagasin(){
// n'afficher l'amélioration que si le score est assez élevé
if((t.props.borne <= score) && (evolution === parseInt(t.props.evolution))){
alert(tech[key]["narration"])
ouvrirAlerte(tech[key]["narration"])
// met à jour le contenu du magasin
// pour ne pas re-afficher cette ligne et éviter un clignotement
magasin[key] = true