templates/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2025-06-14 08:29:12 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Integrate newsletter Brevo + Popup on Blog posts

Browse source
This commit is contained in:
Merox 2024-10-20 13:12:59 +03:00
parent 1e97f6b1d8
commit 238434943e
3 changed files with 92 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
layouts/_default/single.html
View file

@ -158,4 +158,7 @@
{{ end }} {{ end }}
</footer> </footer>
</article> </article>
{{ if not (eq .Params.showNewsletter false) }} <!-- Verificăm dacă showNewsletter nu este false -->
{{- partial "newsletter.html" . -}} <!-- Aici apare bannerul, dacă showNewsletter nu este false -->
{{ end }}
{{ end }} {{ end }}

1
layouts/index.html
View file

@ -5,5 +5,4 @@
{{ else }} {{ else }}
{{ partial "partials/home/profile.html" . }} {{ partial "partials/home/profile.html" . }}
{{ end }} {{ end }}
{{- partial "newsletter.html" . -}}
{{ end }} {{ end }}

160
layouts/partials/newsletter.html
View file

@ -3,99 +3,117 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banner Abonare Newsletter</title> <title>Pagină cu Banner Modern Profesional</title>
<style> <style>
/* Stiluri pentru banner */ #modern-banner {
.banner {
position: fixed; position: fixed;
bottom: 20px; /* Distanța de la partea de jos a paginii */ bottom: 20px;
right: 20px; /* Distanța de la partea dreaptă a paginii */ right: 20px;
background: #1e1e2f; /* Fundal întunecat pentru banner */ z-index: 1000;
background: #1e1e1e;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
border-radius: 10px; border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); padding: 15px;
max-width: 400px; /* Lățimea maximă a bannerului */ max-width: 90%;
width: 100%; /* Lățimea bannerului */ width: 400px;
display: none; /* Ascuns inițial */ transition: all 0.3s ease;
z-index: 9999; /* Asigură-te că este deasupra altor elemente */ font-family: Arial, sans-serif;
padding: 15px; /* Padding pentru a face bannerul mai plăcut */
text-align: center; /* Centrăm textul */
transition: transform 0.3s ease, opacity 0.3s ease; /* Animație */
opacity: 0; /* Opacitate inițială */
transform: translateY(20px); /* Poziția inițială */
} }
#modern-banner .banner-header {
.banner.show { display: flex;
display: block; /* Afișăm bannerul */ justify-content: space-between;
opacity: 1; /* Opacitate completă */ align-items: center;
transform: translateY(0); /* Resetăm poziția */ margin-bottom: 10px;
} }
#modern-banner .banner-title {
.close-button { color: #ffffff;
cursor: pointer; font-size: 18px;
font-size: 20px; font-weight: bold;
background: #ff4081; /* Culoare de fundal a butonului */ }
#modern-banner .banner-content {
position: relative;
overflow: hidden;
border-radius: 8px;
height: 250px;
}
#modern-banner iframe {
display: block;
width: 100%;
height: 100%;
border: none; border: none;
color: #ffffff; /* Culoare text buton */
border-radius: 5px; /* Colțuri rotunjite */
padding: 5px 10px; /* Padding pentru buton */
position: absolute;
top: 10px;
right: 15px;
transition: background-color 0.3s ease;
} }
#modern-banner .close-btn {
.close-button:hover { background: none;
background-color: #d81b60; /* Culoare de hover pentru buton */ color: #fff;
border: none;
font-size: 24px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
opacity: 0.7;
padding: 0;
width: 30px;
height: 30px;
} }
#modern-banner .close-btn:hover {
iframe { transform: scale(1.1);
border-radius: 8px; /* Colțuri rotunjite pentru iframe */ opacity: 1;
border: none; /* Eliminăm borderul iframe-ului */
width: 100%; /* Lățimea iframe-ului */
height: auto; /* Înălțimea automată pentru a se adapta */
max-height: 305px; /* Înălțimea maximă a iframe-ului */
display: block; /* Asigurăm că iframe-ul se comportă ca un bloc */
margin: 0; /* Eliminăm marginile */
padding: 0; /* Eliminăm padding-ul */
} }
@media (max-width: 600px) {
.banner-text { #modern-banner {
color: #f0f0f0; /* Culoare text banner */ width: calc(100% - 40px);
margin: 10px 0; /* Margine pentru text */ max-width: none;
font-size: 14px; /* Dimensiunea textului */ }
} }
</style> </style>
</head> </head>
<body> <body>
<div id="banner" class="banner"> <!-- Aici este conținutul existent al site-ului dvs. -->
<button class="close-button" onclick="closeBanner()">&times;</button>
<div class="banner-text">Abonează-te la newsletter!</div> <div id="modern-banner" style="display: none;">
<iframe <div class="banner-header">
src="https://b3fbfc70.sibforms.com/serve/MUIFAMgDiCnBfJxDAs4XKj1Ps52TAecEliEPWRhHaNoPFzWm9WYaGu0wgrkikX3l2f4pIR2rk65ApZOP1p78CuPtRTsBcV7TrPBlwcaD4wQbDueo9vgByFGSJxAziKeScqwawJNet2zLfRUuj45_RzIlCrm394mfktZLcckb0dl6EyO8Ek8zZNI6sI66DMRlZtyW3CdSv95d9urX" <div class="banner-title">Abonează-te la newsletter</div>
allowfullscreen> <button class="close-btn" onclick="closeBanner()">×</button>
</iframe> </div>
<div class="banner-content">
<iframe src="https://b3fbfc70.sibforms.com/serve/MUIFAJQAf4lHXvpQRYC5kXUc2kt0fnqqdcMDEUnigL_faJ1Go5-BMyAHFLONk4Pqsr13PN2oxTv5Yd9-Efej7GzSmY2PjwYEUmWHoAkm-c_nViMitl98zUIDf8qvAX4ScG16hXXIfnX4LcKmQ9ZuTMDaTA9BgBjoVssIx4FoiSzN08PFrFqCol3sPoNrpjEZmjTDdvEghZUvyzr8" frameborder="0" scrolling="auto" allowfullscreen></iframe>
</div>
</div> </div>
<script> <script>
function showBanner() { function setCookie(name, value, days) {
if (!document.cookie.includes('bannerShown=true')) { var expires = "";
const banner = document.getElementById('banner'); if (days) {
banner.classList.add('show'); // Afișăm bannerul cu animație var date = new Date();
// Setăm cookie pentru a evita afișarea repetată a bannerului date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
document.cookie = "bannerShown=true; max-age=86400; path=/"; expires = "; expires=" + date.toUTCString();
// max-age=86400 setează durata cookie-ului la 24 de ore
} }
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
} }
function closeBanner() { function closeBanner() {
const banner = document.getElementById('banner'); document.getElementById('modern-banner').style.display = 'none';
banner.classList.remove('show'); // Ascundem bannerul setCookie('bannerClosed', 'true', 1); // Set cookie for 24 hours
} }
// Afișează bannerul la încărcarea paginii dacă nu s-a mai afișat recent
window.onload = function() { window.onload = function() {
showBanner(); if (!getCookie('bannerClosed')) {
}; document.getElementById('modern-banner').style.display = 'block';
}
}
</script> </script>
</body> </body>
</html> </html>