Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit ae7c715

Browse filesBrowse files
danyeawdanyeaw
authored
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
Copy full SHA for ae7c715

File tree

8 files changed

+357
-1065
lines changed
Filter options

8 files changed

+357
-1065
lines changed

‎assets/css/main.css

Copy file name to clipboardExpand all lines: assets/css/main.css
+221-64Lines changed: 221 additions & 64 deletions
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

Copy file name to clipboardExpand all lines: assets/css/main.min.css
+1Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/js/mailerlite-script.js

Copy file name to clipboard
+80Lines changed: 80 additions & 0 deletions
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

Copy file name to clipboardExpand all lines: assets/js/mailerlite-script.min.js
+6Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.