feat: add consent banner
This commit is contained in:
40
assets/css/consent.css
Normal file
40
assets/css/consent.css
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
/* Banner container - default (desktop) */
|
||||||
|
#cookie-consent-banner {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: #333;
|
||||||
|
padding: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 9999;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-buttons {
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile styles */
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
#cookie-consent-banner {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
text-align: left;
|
||||||
|
padding: 0.75px;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cookie-consent-banner .cookie-text {
|
||||||
|
max-width: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-buttons {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@@ -1,8 +1,12 @@
|
|||||||
<!-- Cookie Consent Banner -->
|
<!-- Cookie Consent Banner -->
|
||||||
<div id="cookie-consent-banner" style="display:none; position:fixed; bottom:0; left:0; right:0; background:#333; color:#fff; padding:15px; text-align:center; z-index:9999;">
|
<div id="cookie-consent-banner" style="display:none;">
|
||||||
|
<div class="cookie-text">
|
||||||
We use cookies and analytics to improve your experience.
|
We use cookies and analytics to improve your experience.
|
||||||
<button id="accept-cookies" style="margin-left:10px; padding:5px 10px;">Accept</button>
|
</div>
|
||||||
<button id="reject-cookies" style="margin-left:5px; padding:5px 10px;">Reject</button>
|
<div class="cookie-buttons">
|
||||||
|
<button id="accept-cookies">Accept</button>
|
||||||
|
<button id="reject-cookies">Reject</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
Reference in New Issue
Block a user