Skip to content

Commit

Permalink
Added cookie acknowledgement and fixes to small device viewing
Browse files Browse the repository at this point in the history
  • Loading branch information
howardjp committed Mar 26, 2024
1 parent 1de3c3d commit f50edcf
Show file tree
Hide file tree
Showing 3 changed files with 144 additions and 68 deletions.
38 changes: 38 additions & 0 deletions css/cookiealert.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
/*
* Bootstrap Cookie Alert by Wruczek
* https://github.com/Wruczek/Bootstrap-Cookie-Alert
* Released under MIT license
*/
.cookiealert {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
margin: 0 !important;
padding: 0.75rem 1.25rem;
z-index: 999;
opacity: 0;
visibility: hidden;
border-radius: 0;
transform: translateY(100%);
transition: all 500ms ease-out;
color: #ecf0f1;
background: #303030;
}

.cookiealert.show {
opacity: 1;
visibility: visible;
transform: translateY(0%);
transition-delay: 1000ms;
}

.cookiealert a {
text-decoration: underline
}

.cookiealert .acceptcookies {
margin-left: 10px;
vertical-align: baseline;
}

118 changes: 50 additions & 68 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,86 +2,68 @@
---
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />

<title>Coming soon: The House of Basu-Howard</title>

<link rel="shortcut icon" href="/images/favicon.svg">

<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/coming-sssoon.css" rel="stylesheet" />

<!-- Fonts -->
<link href="css/coming-sssoon.css" rel="stylesheet" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Grand+Hotel' rel='stylesheet' type='text/css'>

</head>

<body>
<nav class="navbar navbar-transparent navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
</div><!-- /.container -->
</nav>
<div class="main" style="background-image: url('images/cover.jpg')">

<!-- Change the image source '/images/default.jpg' with your favourite image. -->

<div class="cover black" data-color="black" style="background-color: rgba(0,0,0,.75);"></div>

<!-- You can change the black color for the filter with those colors: blue, green, red, orange -->

<div class="container">
<h1 class="logo cursive">
<img src="{{ '/images/bh-wordmark-color.svg' | relative_url }}" width="100%" />
</h1>
<!-- H1 can have 2 designs: "logo" and "logo cursive" -->

<link href="{{ '/css/cookiealert.css' | relative_url }}" rel="stylesheet" />
</head>
<body>
<div class="main" style="background-image: url('images/cover.jpg')">
<div class="cover black" data-color="black" style="background-color: rgba(0,0,0,.75);"></div>
<div class="container">
<h1 class="logo cursive"><img src="{{ '/images/bh-wordmark-color.svg' | relative_url }}" width="100%" /></h1>
<div class="content">
<h4 class="motto">Coming soon!</h4>
<div class="subscribe">
<h5 class="info-text">
Join the waiting list and we will keep you posted.
</h5>
<div class="row">
<div class="col-md-4 col-md-offset-4 col-sm6-6 col-sm-offset-3 ">
<script async src="https://eomail6.com/form/c3c0d416-eafb-11ee-bcc3-39eb8527906c.js" data-form="c3c0d416-eafb-11ee-bcc3-39eb8527906c"></script>
</div>
</div>
<h4 class="motto">Coming soon!</h4>
<div class="subscribe">
<h5 class="info-text">Join the waiting list and we will keep you posted.</h5>
<div class="row">
<div class="col-md-4 col-md-offset-4 col-sm6-6 col-sm-offset-3 ">
<script async src="https://eomail6.com/form/c3c0d416-eafb-11ee-bcc3-39eb8527906c.js" data-form="c3c0d416-eafb-11ee-bcc3-39eb8527906c"></script>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<a href="https://basuhoward.org">
<div class="row">
<div class="col-md-1">
<img src="{{ '/images/bh-flag-1x1.svg' | relative_url }}" width="60%" />
</div>
<div class="col-md-3 text-left">
basuhoward.org<br/>A website of the House of Basu-Howard
</div>
<div class="footer">
<div class="container">
<a href="https://basuhoward.org">
<div class="row">
<div class="col-md-1"><img src="{{ '/images/bh-flag-1x1.svg' | relative_url }}" width="60%" /></div>
<div class="col-md-3 text-left">basuhoward.org<br/>A website of the House of Basu-Howard</div>
</div>
</div>
</a>
</a>
</div>
</div>
</div>
</div>
</body>
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!-- START Bootstrap-Cookie-Alert -->
<div class="alert text-center cookiealert" role="alert">
We use cookies to ensure you get the best experience on our website. <a href="https://cookiesandyou.com/" target="_blank">Learn more</a>
<button type="button" class="btn btn-sm acceptcookies" style="color: #f8f8f8; background-color: #871717;">
I agree
</button>
</div>
<!-- END Bootstrap-Cookie-Alert -->
</body>
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="{{ '/js/cookiealert.js' | relative_url }}"></script>

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-V6L687V42L"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'G-V6L687V42L');
</script>
dd
</html>
56 changes: 56 additions & 0 deletions js/cookiealert.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
/*
* Bootstrap Cookie Alert by Wruczek
* https://github.com/Wruczek/Bootstrap-Cookie-Alert
* Released under MIT license
*/
(function () {
"use strict";

var cookieAlert = document.querySelector(".cookiealert");
var acceptCookies = document.querySelector(".acceptcookies");

if (!cookieAlert) {
return;
}

cookieAlert.offsetHeight; // Force browser to trigger reflow (https://stackoverflow.com/a/39451131)

// Show the alert if we cant find the "acceptCookies" cookie
if (!getCookie("acceptCookies")) {
cookieAlert.classList.add("show");
}

// When clicking on the agree button, create a 1 year
// cookie to remember user's choice and close the banner
acceptCookies.addEventListener("click", function () {
setCookie("acceptCookies", true, 365);
cookieAlert.classList.remove("show");

// dispatch the accept event
window.dispatchEvent(new Event("cookieAlertAccept"))
});

// Cookie functions from w3schools
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/" + "; SameSite=Strict";
}

function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) === ' ') {
c = c.substring(1);
}
if (c.indexOf(name) === 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
})();

0 comments on commit f50edcf

Please sign in to comment.