Merge pull request #4 from giannistolou/feature/footer

feat: create footer

findBookCafe/templates/cafe.html

@@ -58,5 +58,6 @@ <h1 class="name">{{cafe.name}}</h1>
 				{{cafe.description.html | safe}}
 			</section>
 		</main>
+		{% include "footer.html" %}
 	</body>
 </html>

findBookCafe/templates/cafes.html

@@ -73,5 +73,6 @@
 			</div>
 			{% include "cafesList.html" %}
 		</main>
+		{% include "footer.html" %}
 	</body>
 </html>

findBookCafe/templates/commonHead.html

@@ -1,3 +1,4 @@
+{% load static %}
 <meta charset="UTF-8" />
 <link
 	rel="icon"
@@ -19,3 +20,4 @@
 	data-domain="cafe.book-community.com"
 	src="https://plausible.io/js/plausible.js"
 ></script>
+<link rel="stylesheet" href="{% static 'style/footer.css' %}" />

findBookCafe/templates/footer.html

@@ -0,0 +1,70 @@
+<div class="cookie-banner" style="display: none">
+	<p>
+		Χρησιμοποιούμε cookies για την υπηρεσία του newsletter, για περισσότερα
+		διάβασε την
+		<a href="https://book-community.com/privacy-policy.html"
+			>πολιτική απορρήτου</a
+		>
+	</p>
+	<div class="options">
+		<button class="decline" onclick="closeCookieBanner()">Απόρριψη</button>
+		<button class="accept" onclick="acceptCookies()">Αποδοχή</button>
+	</div>
+</div>
+
+<section class="newsletter">
+	<div class="container">
+		<div class="title">Κάνε εγγραφή στο newsletter μας</div>
+		<div class="subtitle">
+			Για να μαθαίνεις την πορεία του project και ενδιαφέροντα θέματα γύρω
+			από το βιβλίο!
+		</div>
+
+		<div id="newsletterProblem" style="display: none">
+			<p style="text-align: center">
+				Αποδεχτείτε τα cookies για να κάνετε εγγραφή στο newsletter
+			</p>
+			<button class="btnCookie" onclick="acceptCookies()">
+				Αποδοχή cookies
+			</button>
+		</div>
+		<form class="form">
+			<iframe
+				title="newsletter iframe"
+				frameborder="0"
+				scrolling="no"
+			></iframe>
+		</form>
+	</div>
+</section>
+
+<script>
+	var cookieBanner = document.querySelector(".cookie-banner");
+	var decline = document.querySelector(".decline");
+	var accept = document.querySelector(".accept");
+	var iframes = document.querySelectorAll("iframe");
+	var newsletterProblem = document.querySelector("#newsletterProblem");
+
+	if (localStorage.getItem("cookieSeen") != "shown") {
+		cookieBanner.style.display = "flex";
+		newsletterProblem.style.display = "flex";
+	} else {
+		acceptCookies();
+	}
+
+	function closeCookieBanner() {
+		cookieBanner.style.animation = "cookieHide 1s";
+		setTimeout(() => {
+			cookieBanner.style.display = "none";
+		}, 1000);
+	}
+
+	function acceptCookies() {
+		closeCookieBanner();
+		newsletterProblem.style.display = "none";
+		localStorage.setItem("cookieSeen", "shown");
+		iframes.forEach((el) => {
+			el.src = "https://bookcommunitygr.substack.com/embed";
+		});
+	}
+</script>

findBookCafe/templates/index.html

@@ -43,6 +43,7 @@ <h1 class="app-page-title homepage-version">
 			</div>
 		</section>
 	</main>
+	{% include "footer.html" %}
 </body>
 
 </html>

findBookCafe/templates/libraries.html

@@ -73,5 +73,6 @@
 			</div>
 			{% include "cafesList.html" %}
 		</main>
+		{% include "footer.html" %}
 	</body>
 </html>

style/footer.scss

@@ -0,0 +1,105 @@
+@import "./theme.scss";
+
+.newsletter {
+	align-items: center;
+	display: flex;
+	min-height: 50vh;
+	padding-top: 5rem;
+	@media only screen and (min-width: $lg) {
+		min-height: 35vh;
+	}
+
+	.title {
+		padding: 1 0;
+		text-align: center;
+		font-size: 2rem;
+	}
+	background-color: $newsletter-background;
+	color: $on-newsletter;
+	min-height: 30vh;
+	.subtitle {
+		letter-spacing: -0.012em;
+		line-height: 1.5;
+		font-family: Cahuenga, serif;
+		max-width: 700px;
+		font-weight: 400;
+		font-size: 1.2rem;
+		text-align: center;
+		margin: 0.5rem 0;
+		padding: 0 1rem;
+		text-align: center;
+	}
+
+	iframe {
+		width: 100%;
+	}
+}
+
+.btnCookie {
+	font-size: 1rem;
+	background-color: $newsletter-background;
+	color: $on-newsletter;
+	border-radius: 5px;
+	padding: 1rem;
+	text-decoration: none;
+	width: fit-content;
+	margin-left: auto;
+	margin-right: auto;
+	cursor: pointer;
+}
+
+#newsletterProblem {
+	display: flex;
+	justify-content: center;
+	flex-direction: column;
+}
+
+.cookie-banner {
+	z-index: 10;
+	position: fixed;
+	bottom: 0;
+	padding: 1rem;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: space-between;
+	background-color: $secondary;
+	border-radius: 5px;
+	box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
+
+	@media only screen and (min-width: $lg) {
+		width: 100%;
+		bottom: 40px;
+		left: 10%;
+		right: 10%;
+		width: 80%;
+		padding: 5px 14px;
+		flex-direction: row;
+	}
+
+	a {
+		text-decoration: none;
+		cursor: pointer;
+		color: $on-secondary;
+		border-bottom: 1px solid $primary;
+	}
+
+	.options {
+		padding: 1rem 0;
+		column-gap: 1rem;
+		row-gap: 1rem;
+	}
+	button {
+		border: none;
+		padding: 1rem * 0.5;
+		background-color: inherit;
+		cursor: pointer;
+	}
+	.accept {
+		font-size: 1rem;
+		background-color: $newsletter-background;
+		color: $on-newsletter;
+		border-radius: 5px;
+		padding: 0.75rem;
+	}
+}

style/theme.scss

@@ -1,7 +1,9 @@
 $primary: #635642;
-$secondary: #ebeae6;
+$secondary: #e3e1de;
 $on-primary: #ffffff;
 $on-secondary: $primary;
+$newsletter-background: #2f2e41;
+$on-newsletter: $on-primary;
 
 @use "@material/theme" with (
 	$primary: $primary,

webpack.config.js

@@ -9,6 +9,7 @@ module.exports = {
 		"./style/cafes.scss",
 		"./style/cafe.scss",
 		"./style/page404.scss",
+		"./style/footer.scss",
 	],
 	output: {
 		filename: "bundle.js",