bocquel/Projet_JS
2
0
Fork 2
Code Issues Pull requests Projects 1 Releases Packages Wiki Activity Actions

ajout pop up cookie plus cookie de stckage

Browse source
This commit is contained in:
Bezza Younes 2024-12-10 15:58:59 +01:00
parent 0b5cc81150
commit c44eba1d4b
4 changed files with 95 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
TODO.txt
View file

@ -1 +1,2 @@
younes: final chrono , pop up cookie , centrer ligne , animation pop up younes: pop up cookie animation pop up

10
demineur.html
View file

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Démineur</title> <title>Démineur</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<script src="demineur.js"></script> <script src="demineur.js" defer></script>
</head> </head>
<body id="body_demineur"> <body id="body_demineur">
@ -32,6 +32,14 @@
<button id="fin_game" onclick="reset()">CIAO</button> <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> </body>
</html> </html>

34
demineur.js
View file

@ -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){ function sleep(ms){
return new Promise(resolve => setTimeout(resolve, ms)); return new Promise(resolve => setTimeout(resolve, ms));
} }
@ -45,7 +55,6 @@ function Cookies() {
} }
//Cookies(); //Cookies();
let grille = [];
function creerGrille(haut, larg) { function creerGrille(haut, larg) {
grille.length = haut; 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
View file

@ -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;
}