Skip to content

Commit c40d65d

Browse files
garethbilaneygarethbilaney
committed
...
1 parent 85e7020 commit c40d65d

File tree

2 files changed

+194
-282
lines changed

2 files changed

+194
-282
lines changed

‎src/components/CiteDrive.astro‎

Lines changed: 133 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -5,106 +5,143 @@ const lang = getLangFromUrl(Astro.url)
55
const t = useTranslations(lang)
66
---
77

8-
<div id="modal-overlay" class="modal-overlay hidden">
9-
<div class="modal-content styled-div">
10-
<button class="modal-close" onclick="closeModal()">×</button>
11-
<h2 set:html={t('SMALL_BANNER_H2')} />
12-
13-
<ul class="features-list">
14-
<li>{t('SMALL_BANNER_LI_1')}</li>
15-
<li>{t('SMALL_BANNER_LI_2')}</li>
16-
<li set:html={t('SMALL_BANNER_LI_3')} />
17-
<li set:html={t('SMALL_BANNER_LI_4')} />
18-
<li>{t('SMALL_BANNER_LI_5')}</li>
19-
<li>{t('SMALL_BANNER_LI_6')}</li>
20-
</ul>
21-
22-
<div class="button-row">
23-
<a href={`https://www.citedrive.com/${lang}/`} class="cta-button">{t('SMALL_BANNER_BUTTON')}</a>
24-
25-
</div>
26-
</div>
8+
<div id="modal-banner" class="modal-banner hidden" role="dialog" aria-modal="true" aria-label="Important banner">
9+
<div class="modal-content styled-div">
10+
<button class="modal-close" aria-label="Close banner" onclick="closeModal()">×</button>
11+
<h2>{t('SMALL_BANNER_H2')}</h2>
12+
<p>{t('SMALL_BANNER_H3')}</p>
13+
<div class="button-row">
14+
<a href={`https://www.citedrive.com/${lang}/`} class="cta-button">
15+
{t('SMALL_BANNER_BUTTON')}
16+
</a>
17+
</div>
18+
</div>
2719
</div>
2820

2921
<script is:inline>
30-
setTimeout(() => {
31-
const modal = document.getElementById('modal-overlay')
32-
if (modal) {
33-
modal.classList.remove('hidden')
34-
}
35-
}, 500)
36-
37-
function closeModal() {
38-
document.getElementById('modal-overlay')?.classList.add('hidden')
39-
}
22+
document.body.appendChild(document.getElementById('modal-banner'));
23+
24+
setTimeout(() => {
25+
const banner = document.getElementById('modal-banner');
26+
if (banner) {
27+
banner.classList.remove('hidden');
28+
banner.classList.add('fade-in');
29+
}
30+
}, 500);
31+
32+
function closeModal() {
33+
const banner = document.getElementById('modal-banner');
34+
if (banner) {
35+
banner.classList.add('hidden');
36+
banner.classList.remove('fade-in');
37+
}
38+
}
4039
</script>
4140

4241
<style is:inline>
43-
.modal-overlay {
44-
position: fixed;
45-
top: 0;
46-
left: 0;
47-
width: 100%;
48-
height: 100%;
49-
50-
display: flex;
51-
justify-content: center;
52-
align-items: center;
53-
z-index: 1000;
54-
}
55-
.modal-overlay.hidden {
56-
display: none;
57-
}
58-
59-
.modal-content {
60-
color: black;
61-
padding: 2rem;
62-
margin: 1rem;
63-
border: 1px solid #000;
64-
border-radius: 1rem;
65-
background: white;
66-
position: relative;
67-
max-width: 700px;
68-
width: 90%;
69-
}
70-
71-
.modal-content h2 {
72-
color: black;
73-
}
74-
75-
.modal-close {
76-
position: absolute;
77-
top: 10px;
78-
right: 20px;
79-
font-size: 24px;
80-
background: none;
81-
border: none;
82-
color: black;
83-
cursor: pointer;
84-
}
85-
.modal-close:hover {
86-
color: #ccc;
87-
}
88-
89-
.button-row {
90-
display: flex;
91-
gap: 1rem;
92-
flex-wrap: wrap;
93-
margin-top: 2rem;
94-
}
95-
96-
.cta-button,
97-
.cta-button-demo {
98-
display: block;
99-
text-decoration: none;
100-
color: #fff!important;
101-
background-color: black;
102-
font-weight: 600;
103-
border-radius: 32px;
104-
line-height: 1;
105-
padding: 16px;
106-
transition: 0.5s;
107-
width: fit-content;
108-
109-
}
42+
.modal-banner {
43+
position: fixed;
44+
bottom: 50px;
45+
left: 50%;
46+
transform: translateX(-50%);
47+
width: 100%;
48+
max-width: 700px;
49+
z-index: 2000;
50+
opacity: 1;
51+
transition: opacity 0.3s ease-in-out;
52+
pointer-events: auto;
53+
}
54+
55+
.modal-banner.hidden {
56+
display: none;
57+
}
58+
59+
.modal-banner.fade-in {
60+
animation: fadeIn 0.3s ease-in-out;
61+
}
62+
63+
@keyframes fadeIn {
64+
from {
65+
opacity: 0;
66+
transform: translateX(-50%) translateY(20px);
67+
}
68+
to {
69+
opacity: 1;
70+
transform: translateX(-50%) translateY(0);
71+
}
72+
}
73+
74+
.modal-content {
75+
background: linear-gradient(
76+
17deg,
77+
rgba(21, 186, 89, 1) 5%,
78+
rgba(122, 215, 171, 1) 19%,
79+
rgba(168, 224, 178, 1) 35%,
80+
rgba(222, 224, 168, 1) 49%,
81+
rgba(168, 224, 178, 1) 58%,
82+
rgba(122, 215, 171, 1) 83%,
83+
rgba(21, 186, 89, 1) 100%
84+
);
85+
color: black !important;
86+
padding: 1.5rem 2rem;
87+
border-radius: 1rem;
88+
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
89+
width: 100%;
90+
box-sizing: border-box;
91+
position: relative;
92+
text-align: center;
93+
}
94+
95+
.modal-content *,
96+
.modal-content a,
97+
.modal-content button {
98+
color: black !important;
99+
}
100+
101+
.modal-content h2 {
102+
margin-bottom: 0.75rem;
103+
}
104+
105+
.modal-content p {
106+
margin-bottom: 1.5rem;
107+
font-size: 1.125rem;
108+
}
109+
110+
.modal-close {
111+
position: absolute;
112+
top: 0.5rem;
113+
right: 1rem;
114+
font-size: 1.5rem;
115+
background: none;
116+
border: none;
117+
color: black !important;
118+
cursor: pointer;
119+
}
120+
121+
.modal-close:hover {
122+
color: #555;
123+
}
124+
125+
.button-row {
126+
display: flex;
127+
justify-content: center;
128+
gap: 1rem;
129+
flex-wrap: wrap;
130+
}
131+
132+
.cta-button {
133+
text-decoration: none;
134+
color: black !important;
135+
background-color: transparent;
136+
border: 2px solid black;
137+
font-weight: 600;
138+
border-radius: 32px;
139+
padding: 0.75rem 1.5rem;
140+
transition: background-color 0.3s ease, color 0.3s ease;
141+
}
142+
143+
.cta-button:hover {
144+
background-color: black;
145+
color: white !important;
146+
}
110147
</style>

0 commit comments

Comments
 (0)