Skip to content

Commit ae7c715

Browse files
danyeawdanyeaw
authoredFeb 10, 2025··
Move mailerlite resources internally to fix CORP errors (#81)
* Move mailerlite resources internally to fix CORP errors * Minify JS and CSS * Bump PyScript version * Add version to mailerlite script * Consistently use absolute paths for assets
1 parent e1b6b45 commit ae7c715

File tree

8 files changed

+357
-1065
lines changed

8 files changed

+357
-1065
lines changed
 

‎assets/css/main.css

+221-64
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ a:visited {
3333
font-family: 'Hack Regular';
3434
font-style: normal;
3535
font-weight: normal;
36-
src: local('Hack Regular'), url('assets/fonts/Hack-Regular.woff') format('woff');
36+
src: local('Hack Regular'), url('/assets/fonts/Hack-Regular.woff') format('woff');
3737
}
3838

3939

@@ -172,6 +172,223 @@ a.examples-block:hover {
172172
color: #1D1D22;
173173
}
174174

175+
.newsletter-section {
176+
background: #1D1D22;
177+
border-radius: 10px;
178+
margin: 2rem auto 0;
179+
max-width: 340px;
180+
padding: 0;
181+
}
182+
183+
/* Main container classes */
184+
#newsletter-form-container {
185+
background-color: #1D1D22;
186+
border-radius: 10px;
187+
padding: 1.5rem;
188+
border: none;
189+
}
190+
191+
.newsletter-wrapper {
192+
text-align: center;
193+
}
194+
195+
.newsletter-content {
196+
margin-bottom: 1.5rem;
197+
}
198+
199+
.newsletter-content h4 {
200+
color: #FDA703;
201+
font-size: 1.5rem;
202+
font-weight: 400;
203+
margin-bottom: 0.25rem;
204+
}
205+
206+
.newsletter-content p {
207+
color: #fff;
208+
font-size: 1rem;
209+
font-weight: 400;
210+
margin-bottom: 1rem;
211+
}
212+
213+
/* Form elements */
214+
.newsletter-form {
215+
margin: 0;
216+
}
217+
218+
.newsletter-field {
219+
margin-bottom: 1rem;
220+
}
221+
222+
.newsletter-field input {
223+
background-color: #fff;
224+
border: none;
225+
border-radius: 25px;
226+
color: #666;
227+
font-size: 1rem;
228+
padding: 0.75rem 1rem;
229+
width: 100%;
230+
}
231+
232+
/* Checkbox styling */
233+
.newsletter-checkbox {
234+
margin: 0.5rem 0;
235+
text-align: left;
236+
}
237+
238+
.newsletter-checkbox label {
239+
display: flex;
240+
align-items: center;
241+
gap: 0.5rem;
242+
}
243+
244+
.newsletter-checkbox input[type="checkbox"] {
245+
margin: 0;
246+
width: auto;
247+
}
248+
249+
.newsletter-checkbox .label-description p {
250+
color: #fff;
251+
font-size: 0.9rem;
252+
margin: 0;
253+
}
254+
255+
/* Privacy section */
256+
.newsletter-privacy {
257+
color: rgba(255, 255, 255, 0.5);
258+
font-size: 0.85rem;
259+
margin: 0.75rem 0;
260+
line-height: 1.3;
261+
text-align: left;
262+
}
263+
264+
.newsletter-privacy a {
265+
color: #FDA703;
266+
text-decoration: none;
267+
}
268+
269+
/* Submit button */
270+
.newsletter-submit {
271+
text-align: center;
272+
margin-top: 1rem;
273+
}
274+
275+
.newsletter-submit button.primary {
276+
background-color: #000;
277+
border-radius: 100px;
278+
color: #fff;
279+
display: inline-block;
280+
font-weight: 700;
281+
font-size: 0.9rem;
282+
padding: 0.5rem 1.5rem;
283+
text-decoration: none;
284+
border: none;
285+
cursor: pointer;
286+
}
287+
288+
.newsletter-submit button.primary:hover {
289+
background-color: #FDA803;
290+
color: #1D1D22;
291+
}
292+
293+
.loading-indicator {
294+
width: 20px;
295+
height: 20px;
296+
border: 2px solid rgba(255, 255, 255, 0.3);
297+
border-radius: 50%;
298+
border-top-color: #fff;
299+
animation: spin 0.8s linear infinite;
300+
margin: 0 auto;
301+
}
302+
303+
@keyframes spin {
304+
to {
305+
transform: rotate(360deg);
306+
}
307+
}
308+
309+
/* Success state */
310+
.newsletter-success {
311+
display: none;
312+
text-align: center;
313+
padding: 1rem;
314+
}
315+
316+
.newsletter-success h4 {
317+
color: #FDA703;
318+
font-size: 1.5rem;
319+
font-weight: 400;
320+
margin-bottom: 0.5rem;
321+
}
322+
323+
.newsletter-success p {
324+
color: #fff;
325+
font-size: 1rem;
326+
}
327+
328+
.social {
329+
background: #1D1D22;
330+
border-radius: 10px;
331+
margin: 2rem auto 0;
332+
max-width: 340px;
333+
padding: 1rem;
334+
}
335+
336+
.social .profile {
337+
display: flex;
338+
position: relative;
339+
}
340+
341+
.social svg {
342+
height: 25px;
343+
position: absolute;
344+
right: 0;
345+
top: 0;
346+
width: 25px;
347+
}
348+
349+
.social .avatar img {
350+
border-radius: 400px;
351+
max-width: 50px;
352+
}
353+
354+
.social .bio {
355+
padding: 0 1rem;
356+
}
357+
358+
.social .bio h5 {
359+
font-size: 1.25rem;
360+
}
361+
362+
.social .link {
363+
color: #aaa;
364+
font-size: 0.8rem;
365+
text-decoration: none;
366+
}
367+
368+
.social .link:hover {
369+
color: #FDA803;
370+
}
371+
372+
.social p {
373+
font-size: .8rem;
374+
margin: 1rem 0;
375+
}
376+
377+
.button.twitter {
378+
background-color: #000;
379+
border-radius: 100px;
380+
color: #fff;
381+
display: inline-block;
382+
font-weight: 700;
383+
padding: 0.5rem 1rem;
384+
text-decoration: none;
385+
}
386+
387+
.button.twitter:hover {
388+
background-color: #FDA803;
389+
color: #1D1D22;
390+
}
391+
175392
.disclaimer {
176393
background: #2D2E35;
177394
font-size: .8rem;
@@ -697,70 +914,10 @@ a.examples-block:hover {
697914
.screen {
698915
overflow-x: scroll;
699916
}
700-
}
701-
702-
.social {
703-
background: #1D1D22;
704-
border-radius: 10px;
705-
margin: 2rem auto 0;
706-
max-width: 340px;
707-
padding: 1rem;
708-
}
709917

710-
.social .profile {
711-
display: flex;
712-
position: relative;
713-
}
714-
715-
.social svg {
716-
height: 25px;
717-
position: absolute;
718-
right: 0;
719-
top: 0;
720-
width: 25px;
721-
}
722-
723-
.social .avatar img {
724-
border-radius: 400px;
725-
max-width: 50px;
726-
}
727-
728-
.social .bio {
729-
padding: 0 1rem;
730-
}
731-
732-
.social .bio h5 {
733-
font-size: 1.25rem;
734-
}
735-
736-
.social .link {
737-
color: #aaa;
738-
font-size: 0.8rem;
739-
text-decoration: none;
740-
}
741-
742-
.social .link:hover {
743-
color: #FDA803;
744-
}
745-
746-
.social p {
747-
font-size: .8rem;
748-
margin: 1rem 0;
749-
}
750-
751-
.button.twitter {
752-
background-color: #000;
753-
border-radius: 100px;
754-
color: #fff;
755-
display: inline-block;
756-
font-weight: 700;
757-
padding: 0.5rem 1rem;
758-
text-decoration: none;
759-
}
760-
761-
.button.twitter:hover {
762-
background-color: #FDA803;
763-
color: #1D1D22;
918+
.newsletter-section {
919+
padding: 0 1rem;
920+
}
764921
}
765922

766923

‎assets/css/main.min.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/js/mailerlite-script.js

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
// Newsletter form handling
2+
class NewsletterForm {
3+
constructor(containerId) {
4+
this.container = document.getElementById(containerId);
5+
this.init();
6+
}
7+
8+
init() {
9+
const form = this.container.querySelector('.newsletter-form');
10+
if (form) {
11+
form.addEventListener('submit', this.handleSubmit.bind(this));
12+
} else {
13+
console.error('Newsletter form not found');
14+
}
15+
}
16+
17+
async handleSubmit(event) {
18+
event.preventDefault();
19+
const form = event.target;
20+
const email = form.querySelector('input[type="email"]').value;
21+
const checkbox = form.querySelector('input[type="checkbox"]');
22+
23+
if (!email || !checkbox.checked) {
24+
alert('Please fill in all required fields');
25+
return;
26+
}
27+
28+
// Show loading spinner
29+
const primaryButton = form.querySelector('button.primary');
30+
primaryButton.style.display = 'none';
31+
32+
const loadingButton = form.querySelector('button.loading');
33+
const loadingSpinner = loadingButton.querySelector('.loading-indicator');
34+
35+
loadingButton.style.display = 'inline-flex';
36+
loadingSpinner.style.display = 'block';
37+
38+
try {
39+
const response = await fetch('https://assets.mailerlite.com/jsonp/1042482/forms/130941196381980229/subscribe', {
40+
method: 'POST',
41+
headers: {
42+
'Content-Type': 'application/json',
43+
},
44+
body: JSON.stringify({
45+
fields: { email },
46+
anticsrf: true
47+
})
48+
});
49+
50+
if (response.ok) {
51+
this.showSuccess();
52+
} else {
53+
throw new Error('Subscription failed');
54+
}
55+
} catch (error) {
56+
console.error('Error:', error);
57+
alert('Failed to subscribe. Please try again later.');
58+
59+
// Hide loading spinner and restore submit button
60+
loadingButton.style.display = 'none';
61+
loadingSpinner.style.display = 'none';
62+
primaryButton.style.display = 'inline-flex';
63+
}
64+
}
65+
66+
showSuccess() {
67+
const formBody = this.container.querySelector('.newsletter-body');
68+
const successBody = this.container.querySelector('.newsletter-success');
69+
70+
if (formBody && successBody) {
71+
formBody.style.display = 'none';
72+
successBody.style.display = 'block';
73+
}
74+
}
75+
}
76+
77+
// Initialize form when DOM is loaded
78+
document.addEventListener('DOMContentLoaded', () => {
79+
new NewsletterForm('newsletter-form-container');
80+
});

‎assets/js/mailerlite-script.min.js

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)
Please sign in to comment.