From 85e1779ff0d38c8ba5110e4e03cbe2474b8449b8 Mon Sep 17 00:00:00 2001 From: Dan Yeaw Date: Fri, 7 Feb 2025 11:34:18 -0500 Subject: [PATCH 1/5] Move mailerlite resources internally to fix CORP errors --- assets/css/main.css | 285 +++++++-- assets/js/mailerlite-script.js | 80 +++ index.html | 1030 ++------------------------------ 3 files changed, 340 insertions(+), 1055 deletions(-) create mode 100644 assets/js/mailerlite-script.js diff --git a/assets/css/main.css b/assets/css/main.css index 1264e88..a5fb369 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -33,7 +33,7 @@ a:visited { font-family: 'Hack Regular'; font-style: normal; font-weight: normal; - src: local('Hack Regular'), url('assets/fonts/Hack-Regular.woff') format('woff'); + src: local('Hack Regular'), url('/assets/fonts/Hack-Regular.woff') format('woff'); } @@ -172,6 +172,223 @@ a.examples-block:hover { color: #1D1D22; } +.newsletter-section { + background: #1D1D22; + border-radius: 10px; + margin: 2rem auto 0; + max-width: 340px; + padding: 0; +} + +/* Main container classes */ +#newsletter-form-container { + background-color: #1D1D22; + border-radius: 10px; + padding: 1.5rem; + border: none; +} + +.newsletter-wrapper { + text-align: center; +} + +.newsletter-content { + margin-bottom: 1.5rem; +} + +.newsletter-content h4 { + color: #FDA703; + font-size: 1.5rem; + font-weight: 400; + margin-bottom: 0.25rem; +} + +.newsletter-content p { + color: #fff; + font-size: 1rem; + font-weight: 400; + margin-bottom: 1rem; +} + +/* Form elements */ +.newsletter-form { + margin: 0; +} + +.newsletter-field { + margin-bottom: 1rem; +} + +.newsletter-field input { + background-color: #fff; + border: none; + border-radius: 25px; + color: #666; + font-size: 1rem; + padding: 0.75rem 1rem; + width: 100%; +} + +/* Checkbox styling */ +.newsletter-checkbox { + margin: 0.5rem 0; + text-align: left; +} + +.newsletter-checkbox label { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.newsletter-checkbox input[type="checkbox"] { + margin: 0; + width: auto; +} + +.newsletter-checkbox .label-description p { + color: #fff; + font-size: 0.9rem; + margin: 0; +} + +/* Privacy section */ +.newsletter-privacy { + color: rgba(255, 255, 255, 0.5); + font-size: 0.85rem; + margin: 0.75rem 0; + line-height: 1.3; + text-align: left; +} + +.newsletter-privacy a { + color: #FDA703; + text-decoration: none; +} + +/* Submit button */ +.newsletter-submit { + text-align: center; + margin-top: 1rem; +} + +.newsletter-submit button.primary { + background-color: #000; + border-radius: 100px; + color: #fff; + display: inline-block; + font-weight: 700; + font-size: 0.9rem; + padding: 0.5rem 1.5rem; + text-decoration: none; + border: none; + cursor: pointer; +} + +.newsletter-submit button.primary:hover { + background-color: #FDA803; + color: #1D1D22; +} + +.loading-indicator { + width: 20px; + height: 20px; + border: 2px solid rgba(255, 255, 255, 0.3); + border-radius: 50%; + border-top-color: #fff; + animation: spin 0.8s linear infinite; + margin: 0 auto; +} + +@keyframes spin { + to { + transform: rotate(360deg); + } +} + +/* Success state */ +.newsletter-success { + display: none; + text-align: center; + padding: 1rem; +} + +.newsletter-success h4 { + color: #FDA703; + font-size: 1.5rem; + font-weight: 400; + margin-bottom: 0.5rem; +} + +.newsletter-success p { + color: #fff; + font-size: 1rem; +} + +.social { + background: #1D1D22; + border-radius: 10px; + margin: 2rem auto 0; + max-width: 340px; + padding: 1rem; +} + +.social .profile { + display: flex; + position: relative; +} + +.social svg { + height: 25px; + position: absolute; + right: 0; + top: 0; + width: 25px; +} + +.social .avatar img { + border-radius: 400px; + max-width: 50px; +} + +.social .bio { + padding: 0 1rem; +} + +.social .bio h5 { + font-size: 1.25rem; +} + +.social .link { + color: #aaa; + font-size: 0.8rem; + text-decoration: none; +} + +.social .link:hover { + color: #FDA803; +} + +.social p { + font-size: .8rem; + margin: 1rem 0; +} + +.button.twitter { + background-color: #000; + border-radius: 100px; + color: #fff; + display: inline-block; + font-weight: 700; + padding: 0.5rem 1rem; + text-decoration: none; +} + +.button.twitter:hover { + background-color: #FDA803; + color: #1D1D22; +} + .disclaimer { background: #2D2E35; font-size: .8rem; @@ -697,70 +914,10 @@ a.examples-block:hover { .screen { overflow-x: scroll; } -} - -.social { - background: #1D1D22; - border-radius: 10px; - margin: 2rem auto 0; - max-width: 340px; - padding: 1rem; -} -.social .profile { - display: flex; - position: relative; -} - -.social svg { - height: 25px; - position: absolute; - right: 0; - top: 0; - width: 25px; -} - -.social .avatar img { - border-radius: 400px; - max-width: 50px; -} - -.social .bio { - padding: 0 1rem; -} - -.social .bio h5 { - font-size: 1.25rem; -} - -.social .link { - color: #aaa; - font-size: 0.8rem; - text-decoration: none; -} - -.social .link:hover { - color: #FDA803; -} - -.social p { - font-size: .8rem; - margin: 1rem 0; -} - -.button.twitter { - background-color: #000; - border-radius: 100px; - color: #fff; - display: inline-block; - font-weight: 700; - padding: 0.5rem 1rem; - text-decoration: none; -} - -.button.twitter:hover { - background-color: #FDA803; - color: #1D1D22; + .newsletter-section { + padding: 0 1rem; + } } diff --git a/assets/js/mailerlite-script.js b/assets/js/mailerlite-script.js new file mode 100644 index 0000000..4e59f38 --- /dev/null +++ b/assets/js/mailerlite-script.js @@ -0,0 +1,80 @@ +// Newsletter form handling +class NewsletterForm { + constructor(containerId) { + this.container = document.getElementById(containerId); + this.init(); + } + + init() { + const form = this.container.querySelector('.newsletter-form'); + if (form) { + form.addEventListener('submit', this.handleSubmit.bind(this)); + } else { + console.error('Newsletter form not found'); + } + } + + async handleSubmit(event) { + event.preventDefault(); + const form = event.target; + const email = form.querySelector('input[type="email"]').value; + const checkbox = form.querySelector('input[type="checkbox"]'); + + if (!email || !checkbox.checked) { + alert('Please fill in all required fields'); + return; + } + + // Show loading spinner + const primaryButton = form.querySelector('button.primary'); + primaryButton.style.display = 'none'; + + const loadingButton = form.querySelector('button.loading'); + const loadingSpinner = loadingButton.querySelector('.loading-indicator'); + + loadingButton.style.display = 'inline-flex'; + loadingSpinner.style.display = 'block'; + + try { + const response = await fetch('https://assets.mailerlite.com/jsonp/1042482/forms/130941196381980229/subscribe', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + fields: { email }, + anticsrf: true + }) + }); + + if (response.ok) { + this.showSuccess(); + } else { + throw new Error('Subscription failed'); + } + } catch (error) { + console.error('Error:', error); + alert('Failed to subscribe. Please try again later.'); + + // Hide loading spinner and restore submit button + loadingButton.style.display = 'none'; + loadingSpinner.style.display = 'none'; + primaryButton.style.display = 'inline-flex'; + } + } + + showSuccess() { + const formBody = this.container.querySelector('.newsletter-body'); + const successBody = this.container.querySelector('.newsletter-success'); + + if (formBody && successBody) { + formBody.style.display = 'none'; + successBody.style.display = 'block'; + } + } +} + +// Initialize form when DOM is loaded +document.addEventListener('DOMContentLoaded', () => { + new NewsletterForm('newsletter-form-container'); +}); diff --git a/index.html b/index.html index ad6209c..44b1d65 100644 --- a/index.html +++ b/index.html @@ -13,13 +13,15 @@ - + - + + + @@ -147,17 +149,7 @@

Community

- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - - - -
- -
- -

PyScript Newsletter

- -

Signup for news and special offers!

- - -
- -
-
- - - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + -
- - - - - - - - - - -