cookies2.html 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Cookies Notice</title>
  7. <style>
  8. #cookie-notice {
  9. position: fixed;
  10. bottom: 0;
  11. left: 0;
  12. width: 100%;
  13. background-color: #f0f0f0;
  14. padding: 20px;
  15. text-align: center;
  16. box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
  17. z-index: 1000;
  18. /* Ensure it's on top */
  19. display: flex;
  20. justify-content: space-between;
  21. align-items: center;
  22. }
  23. #cookie-notice p {
  24. margin: 0;
  25. flex-grow: 1;
  26. padding-right: 20px;
  27. }
  28. #cookie-notice button {
  29. background-color: #007bff;
  30. color: white;
  31. border: none;
  32. padding: 10px 20px;
  33. margin-right: 40px;
  34. cursor: pointer;
  35. border-radius: 5px;
  36. }
  37. #cookie-notice button:hover {
  38. background-color: #0056b3;
  39. }
  40. #cookie-notice a {
  41. color: #007bff;
  42. text-decoration: none;
  43. }
  44. #cookie-notice a:hover {
  45. text-decoration: underline;
  46. }
  47. @media (max-width: 600px) {
  48. #cookie-notice {
  49. flex-direction: column;
  50. align-items: stretch;
  51. }
  52. #cookie-notice p {
  53. padding-right: 0;
  54. margin-bottom: 10px;
  55. }
  56. }
  57. </style>
  58. </head>
  59. <body>
  60. <div id="cookie-notice">
  61. <p>This website uses cookies to improve your experience. By continuing to browse this site, you agree to our use of
  62. cookies. <a href="/policy.html" target="_blank">Learn more</a></p>
  63. <button id="accept-cookies">Accept</button>
  64. </div>
  65. <script>
  66. document.addEventListener('DOMContentLoaded', function () {
  67. const cookieNotice = document.getElementById('cookie-notice');
  68. const acceptButton = document.getElementById('accept-cookies');
  69. if (!localStorage.getItem('cookiesAccepted')) {
  70. cookieNotice.style.display = 'flex'; // Show the notice
  71. } else {
  72. cookieNotice.style.display = 'none'; // Hide the notice
  73. }
  74. acceptButton.addEventListener('click', function () {
  75. localStorage.setItem('cookiesAccepted', 'true');
  76. cookieNotice.style.display = 'none'; // Hide the notice
  77. });
  78. });
  79. </script>
  80. </body>
  81. </html>