-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b3bf44f
commit bb1d052
Showing
14 changed files
with
559 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,87 @@ | ||
| # cookienotice.github.io | ||
| # cookienotice.github.io | ||
| [cookienotice.github.io](https://cookienotice.github.io) | ||
|
|
||
| ## Simple cookie notice bar with nice themes | ||
|
|
||
| Website owners are enforced by law to show the cookie notice. Yes, nobody likes that notice but we have to show it. Why slow down your website by loading it with one more heavy JavaScript library? Use a lightweight solution - Cookie Notice was made for that! | ||
|
|
||
| ## Setup / Installation | ||
|
|
||
| Add the code below before your your ```</head>``` closing tag: | ||
|
|
||
| ``` | ||
| <style> | ||
| #cookie-notice { | ||
| display: none; | ||
| position: fixed; | ||
| right: 0; | ||
| bottom: 0; | ||
| left: 0; | ||
| z-index: 999; | ||
| max-width: 450px; | ||
| margin: auto; | ||
| padding: 0.5rem; | ||
| border: 1px solid #eee; | ||
| background-color: #fefefe; | ||
| box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.05); | ||
| font-family: Arial, Helvetica, sans-serif; | ||
| line-height: 22px; | ||
| font-size: 15px; | ||
| text-align: center; | ||
| color: #555; | ||
| } | ||
| .cookie-notice-more { | ||
| margin: 0 0.25rem; | ||
| text-decoration-style: dashed; | ||
| color: inherit; | ||
| } | ||
| .cookie-notice-close { | ||
| padding: 0 0.5rem; | ||
| border: 1px solid #ddd; | ||
| border-radius: 0.125rem; | ||
| line-height: 20px; | ||
| text-decoration: none; | ||
| color: #888; | ||
| } | ||
| @media only screen and (min-width: 768px) { | ||
| #cookie-notice { | ||
| bottom: 1rem; | ||
| border-radius: 0.25rem; | ||
| } | ||
| .cookie-notice-close { | ||
| float: right; | ||
| } | ||
| } | ||
| </style> | ||
| ``` | ||
|
|
||
| Add the HTML code block below before your ```</body>``` closing tag: | ||
|
|
||
| ``` | ||
| <div id="cookie-notice"> | ||
| We use cookies to deliver better experience. | ||
| <a href="https://cookienotice.github.io/about-cookies" class="cookie-notice-more" target="_blank" rel="noopener noreferrer">More info...</a> | ||
| <a href="javascript:void(0)" class="cookie-notice-close" onclick="closeCookieNotice()">OK</a> | ||
| </div> | ||
| ``` | ||
|
|
||
| Add the JavaScript code below in your document ```head`` or before your ```</body>``` closing tag: | ||
| ``` | ||
| <script> | ||
| function closeCookieNotice() { | ||
| const nowDate = new Date(); | ||
| const expireDate = new Date(nowDate.setDate(nowDate.getDate() + 30)).toUTCString(); | ||
| document.cookie = "cookie_notice=0;path=/;expires=" + expireDate + ";"; | ||
| document.getElementById("cookie-notice").style.display = "none"; | ||
| }; | ||
| document.addEventListener("DOMContentLoaded", function() { | ||
| const cookie_notice = ('; ' + document.cookie).split('; cookie_notice=').pop().split(';')[0]; | ||
| if (cookie_notice !== "0") { | ||
| document.getElementById("cookie-notice").style.display = "block"; | ||
| } | ||
| }); | ||
| </script> | ||
| ``` | ||
|
|
||
| ### Including files in your HTML document | ||
| Download the latest release and find the neccessary files located in the ```dist``` folder. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| /** Cookie Notice v1.0 @ https://cookienotice.github.io **/ | ||
|
|
||
| #cookie-notice { | ||
| display: none; | ||
| position: fixed; | ||
| right: 0; | ||
| bottom: 0; | ||
| left: 0; | ||
| z-index: 999; | ||
| max-width: 450px; | ||
| margin: auto; | ||
| padding: 0.5rem; | ||
| border: 1px solid #eee; | ||
| background-color: #fefefe; | ||
| box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.05); | ||
| font-family: Arial, Helvetica, sans-serif; | ||
| line-height: 22px; | ||
| font-size: 15px; | ||
| text-align: center; | ||
| color: #555; | ||
| } | ||
|
|
||
| .cookie-notice-more { | ||
| margin: 0 0.25rem; | ||
| text-decoration-style: dashed; | ||
| color: inherit; | ||
| } | ||
|
|
||
| .cookie-notice-close { | ||
| padding: 0 0.5rem; | ||
| border: 1px solid #ddd; | ||
| border-radius: 0.125rem; | ||
| line-height: 20px; | ||
| text-decoration: none; | ||
| color: #888; | ||
| } | ||
|
|
||
| @media only screen and (min-width: 768px) { | ||
| #cookie-notice { | ||
| bottom: 1rem; | ||
| border-radius: 0.25rem; | ||
| } | ||
| .cookie-notice-close { | ||
| float: right; | ||
| } | ||
| } |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| /** Cookie Notice v1.0 @ https://cookienotice.github.io **/ | ||
|
|
||
| #cookie-notice { | ||
| display: none; | ||
| position: fixed; | ||
| right: 0; | ||
| bottom: 0; | ||
| left: 0; | ||
| z-index: 999; | ||
| max-width: 450px; | ||
| margin: auto; | ||
| padding: 0.5rem; | ||
| border: 1px solid #777; | ||
| background-color: #333; | ||
| box-shadow: 0 0 0.25rem rgba(255, 255, 266, 0.1); | ||
| font-family: Arial, Helvetica, sans-serif; | ||
| line-height: 22px; | ||
| font-size: 15px; | ||
| text-align: center; | ||
| color: #f5f5f5; | ||
| } | ||
|
|
||
| .cookie-notice-more { | ||
| margin: 0 0.25rem; | ||
| text-decoration-style: dashed; | ||
| color: inherit; | ||
| } | ||
|
|
||
| .cookie-notice-close { | ||
| padding: 0 0.5rem; | ||
| border: 1px solid #aaa; | ||
| border-radius: 0.125rem; | ||
| line-height: 20px; | ||
| text-decoration: none; | ||
| color: #eee; | ||
| } | ||
|
|
||
| @media only screen and (min-width: 768px) { | ||
| #cookie-notice { | ||
| bottom: 1rem; | ||
| border-radius: 0.25rem; | ||
| } | ||
| .cookie-notice-close { | ||
| float: right; | ||
| } | ||
| } |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width"> | ||
| <title>Default Dark Theme For Cookie Notice</title> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link rel="preload" href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700;900&display=swap" as="style"> | ||
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700;900&display=swap" rel="stylesheet"> | ||
| <link rel="stylesheet" href="./cookienotice.min.css"> | ||
| <style> | ||
| body { | ||
| font-family: 'Outfit', Arial, Helvetica, sans-serif; | ||
| color: #333; | ||
| } | ||
| center { | ||
| padding: 3rem; | ||
| } | ||
| h1 { | ||
| display: inline-block; | ||
| margin-bottom: 1rem; | ||
| padding: 0.5rem 1.5rem; | ||
| border: 2px dashed #333; | ||
| border-radius: 1rem; | ||
| font-size: 3rem; | ||
| font-weight: 900; | ||
| } | ||
| h2 { | ||
| margin-bottom: 2rem; | ||
| font-weight: 700; | ||
| color: #aaa; | ||
| } | ||
| #show-notice { | ||
| padding: 0.5rem 1rem; | ||
| border: 1px solid #3498db; | ||
| border-radius: 0.25rem; | ||
| text-decoration: none; | ||
| color: #3498db; | ||
| } | ||
| #show-notice:hover { | ||
| background-color: #3498db; | ||
| color: #fff; | ||
| } | ||
| #btn-dark-mode { | ||
| position: absolute; | ||
| top: 2rem; | ||
| right: 2rem; | ||
| width: 36px; | ||
| height: 36px; | ||
| line-height: 36px; | ||
| border: 1px solid #ccc; | ||
| border-radius: 0.25rem; | ||
| background-color: #eee; | ||
| cursor: pointer; | ||
| } | ||
| body.dark-mode { | ||
| background-color: #333; | ||
| } | ||
| .dark-mode h1 { | ||
| color: #f1f1f1; | ||
| border-color: #aaa; | ||
| } | ||
| .dark-mode #btn-dark-mode { | ||
| border-color: #aaa; | ||
| background-color: #444; | ||
| color: #eee; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <button id="btn-dark-mode" onclick="toggleDarkMode()" title="Toggle Dark Mode"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-moon-fill" viewBox="0 0 16 16"> | ||
| <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/> | ||
| </svg> | ||
| </button> | ||
|
|
||
| <center> | ||
| <h1>Default Dark</h1> | ||
| <h2>Cookie Notice Theme Preview</h2> | ||
| <p> | ||
| <a href="javascript:void(0)" id="show-notice" onclick="showCookieNoticeDemo()">Show Cookie Notice</a> | ||
| </p> | ||
|
|
||
| </center> | ||
|
|
||
| <div id="cookie-notice"> | ||
| We use cookies to deliver better experience. | ||
| <a href="https://cookienotice.github.io/about-cookies" class="cookie-notice-more" target="_blank" rel="noopener noreferrer">More info</a> | ||
| <a href="javascript:void(0)" class="cookie-notice-close" onclick="closeCookieNotice()">OK</a> | ||
| </div> | ||
|
|
||
| <script> | ||
| function closeCookieNotice() { | ||
| const nowDate = new Date(); | ||
| const expireDate = new Date(nowDate.setDate(nowDate.getDate() + 30)).toUTCString(); | ||
| document.cookie = "cookie_notice=0;path=/;expires=" + expireDate + ";"; | ||
| document.getElementById("cookie-notice").style.display = "none"; | ||
| }; | ||
| function showCookieNoticeDemo() { | ||
| document.getElementById("cookie-notice").style.display = "block"; | ||
| }; | ||
| document.addEventListener("DOMContentLoaded", function() { | ||
| const cookie_notice = ('; ' + document.cookie).split('; cookie_notice=').pop().split(';')[0]; | ||
| if (cookie_notice !== "0") { | ||
| document.getElementById("cookie-notice").style.display = "block"; | ||
| } | ||
| }); | ||
| function toggleDarkMode() { | ||
| document.body.classList.toggle("dark-mode"); | ||
| }; | ||
| </script> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| /** Cookie Notice v1.0 @ https://cookienotice.github.io **/ | ||
|
|
||
| #cookie-notice { | ||
| display: none; | ||
| position: fixed; | ||
| right: 0; | ||
| bottom: 0; | ||
| left: 0; | ||
| z-index: 999; | ||
| max-width: calc(100% - 1rem); | ||
| margin: auto; | ||
| padding: 0.75rem 1rem; | ||
| border: none; | ||
| background-color: #444; | ||
| box-shadow: 0 0 0.25rem rgba(255, 255, 255, 0.15); | ||
| font-family: Arial, Helvetica, sans-serif; | ||
| line-height: 1.5; | ||
| font-size: 15px; | ||
| text-align: center; | ||
| color: #f1f1f1; | ||
| } | ||
|
|
||
| .cookie-notice-more { | ||
| margin: 0 0.25rem; | ||
| text-decoration-style: dashed; | ||
| color: inherit; | ||
| } | ||
|
|
||
| .cookie-notice-close { | ||
| position: absolute; | ||
| top: 0.25rem; | ||
| right: 0; | ||
| padding: 0 0.5rem; | ||
| border: none; | ||
| font-size: 32px; | ||
| line-height: 32px; | ||
| font-family: monospace; | ||
| text-decoration: none; | ||
| color: #eee; | ||
| } | ||
|
|
||
| @media only screen and (min-width: 768px) { | ||
| #cookie-notice { | ||
| right: unset; | ||
| left: 1.5rem; | ||
| max-width: 260px; | ||
| bottom: 1.5rem; | ||
| border-radius: 0.75rem; | ||
| text-align: left; | ||
| } | ||
| .cookie-notice-close { | ||
| float: right; | ||
| } | ||
| } |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Oops, something went wrong.