ajout pop up cookie plus cookie de stckage
This commit is contained in:
parent
0b5cc81150
commit
c44eba1d4b
4 changed files with 95 additions and 4 deletions
3
TODO.txt
3
TODO.txt
|
@ -1 +1,2 @@
|
|||
younes: final chrono , pop up cookie , centrer ligne , animation pop up
|
||||
younes: pop up cookie animation pop up
|
||||
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Démineur</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="demineur.js"></script>
|
||||
<script src="demineur.js" defer></script>
|
||||
</head>
|
||||
<body id="body_demineur">
|
||||
|
||||
|
@ -32,6 +32,14 @@
|
|||
<button id="fin_game" onclick="reset()">CIAO</button>
|
||||
|
||||
|
||||
|
||||
<div id="popup" class="popup">
|
||||
<div class="popup-content">
|
||||
<h2>Bonjour !</h2>
|
||||
<p>Voulez vous des cookies?</p>
|
||||
|
||||
<button id="refuse-button">non :(</button>
|
||||
<button id="accept-button">Avec Plaisir!</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
34
demineur.js
34
demineur.js
|
@ -12,6 +12,16 @@ class Case {
|
|||
}
|
||||
|
||||
}
|
||||
//Fonction pour créer un cookie.
|
||||
function setCookie(name, value, days) {
|
||||
const expires = new Date(Date.now() + days * 864e5).toUTCString();
|
||||
document.cookie = `${name}=${value}; expires=${expires}; path=/`;
|
||||
}
|
||||
// Fonction pour lire un cookie
|
||||
function getCookie(name) {
|
||||
return document.cookie.split('; ').find(row => row.startsWith(name + '='))?.split('=')[1];
|
||||
}
|
||||
|
||||
function sleep(ms){
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
}
|
||||
|
@ -45,7 +55,6 @@ function Cookies() {
|
|||
}
|
||||
//Cookies();
|
||||
|
||||
let grille = [];
|
||||
|
||||
function creerGrille(haut, larg) {
|
||||
grille.length = haut;
|
||||
|
@ -63,3 +72,26 @@ function creerGrille(haut, larg) {
|
|||
|
||||
}
|
||||
|
||||
|
||||
function cookie(){
|
||||
const popup = document.getElementById('popup');
|
||||
const closePopupButton = document.getElementById('accept-button');
|
||||
|
||||
// Fonction pour afficher la pop-up
|
||||
|
||||
popup.classList.add('show');
|
||||
|
||||
|
||||
// Fonction pour fermer la pop-up
|
||||
closePopupButton.addEventListener('click', () => {
|
||||
setCookie('cookiesAccepted', 'true', 1); // Stocke l'acceptation pendant 1 jour
|
||||
popup.classList.remove('show');
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
const cookieAccepted = getCookie('cookiesAccepted');
|
||||
|
||||
if (!cookieAccepted){
|
||||
cookie();
|
||||
}
|
||||
|
|
50
style.css
50
style.css
|
@ -33,4 +33,54 @@
|
|||
|
||||
}
|
||||
|
||||
.popup {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: visibility 0.3s, opacity 0.3s;
|
||||
}
|
||||
|
||||
.popup.show {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#accept-button {
|
||||
background-color: #007BFF;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#refuse-button {
|
||||
background-color: #007BFF;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#close-popup:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue