Skip to content

Commit f1f47b6

Browse files
the-rebooted-coderthe-rebooted-coder
committed
Even Fluid UI
1 parent a72cc71 commit f1f47b6

File tree

3 files changed

+70
-18
lines changed

3 files changed

+70
-18
lines changed

‎index.html

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,23 @@
99
<!-- Primary Meta Tags -->
1010
<title>CCA Morning Neurons Newsletter Creator</title>
1111
<meta name="title" content="CCA Morning Neurons Newsletter Creator">
12-
<meta name="description" content="Create and send beautiful morning newsletters with this easy-to-use tool baked in-house IBM.">
12+
<meta name="description" content="Create and send beautiful morning newsletters to your community with this easy-to-use tool">
1313
<meta name="keywords" content="newsletter, email, CCA, morning, neurons, creator, tool">
14-
<meta name="author" content="Spandan Saxena">
14+
<meta name="author" content="Spandan">
1515
<meta name="robots" content="index, follow">
1616

1717
<!-- Open Graph / Facebook -->
1818
<meta property="og:type" content="website">
19-
<meta property="og:url" content="https://the-rebooted-coder.github.io/Newsletter/">
19+
<meta property="og:url" content="https://example.com/">
2020
<meta property="og:title" content="CCA Morning Neurons Newsletter Creator">
21-
<meta property="og:description" content="Create and send beautiful morning newsletters to your community with this easy-to-use tool baked in-house IBM.">
21+
<meta property="og:description" content="Create and send beautiful morning newsletters to your community with this easy-to-use tool">
2222
<meta property="og:image" content="https://example.com/images/social-preview.jpg">
2323

2424
<!-- Twitter -->
2525
<meta property="twitter:card" content="summary_large_image">
26-
<meta property="twitter:url" content="https://the-rebooted-coder.github.io/Newsletter/">
26+
<meta property="twitter:url" content="https://example.com/">
2727
<meta property="twitter:title" content="CCA Morning Neurons Newsletter Creator">
28-
<meta property="twitter:description" content="Create and send beautiful morning newsletters to your community with this easy-to-use tool baked in-house IBM.">
28+
<meta property="twitter:description" content="Create and send beautiful morning newsletters to your community with this easy-to-use tool">
2929
<meta property="twitter:image" content="https://example.com/images/social-preview.jpg">
3030

3131
<!-- Favicon -->
@@ -38,7 +38,7 @@
3838
<meta name="theme-color" content="#ffffff">
3939

4040
<!-- Canonical URL -->
41-
<link rel="canonical" href="https://the-rebooted-coder.github.io/Newsletter/">
41+
<link rel="canonical" href="https://example.com/">
4242

4343
<!-- Preconnect for external resources -->
4444
<link rel="preconnect" href="https://fonts.googleapis.com">
@@ -56,7 +56,6 @@
5656

5757
<!-- Scripts -->
5858
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/email.min.js"></script>
59-
6059
</head>
6160
<body class="mdc-typography">
6261
<div class="form-container">
@@ -82,7 +81,7 @@ <h1>Let's Draft Morning Neurons ✨🧠☕️</h1>
8281
</div>
8382
</div>
8483
<button id="next-1" class="mdc-button mdc-button--raised next-btn">
85-
<span class="mdc-button__label">Content</span>
84+
<span class="mdc-button__label">Enter Content</span>
8685
<i class="material-icons">arrow_forward</i>
8786
</button>
8887
<div class="attribution">
@@ -111,7 +110,7 @@ <h1 id="content-step-title">Now, the content</h1>
111110
<span class="mdc-button__label">Back</span>
112111
</button>
113112
<button id="next-2" class="mdc-button mdc-button--raised next-btn">
114-
<span class="mdc-button__label">Recipients</span>
113+
<span class="mdc-button__label">Choose Recipients</span>
115114
<i class="material-icons">arrow_forward</i>
116115
</button>
117116
</div>
@@ -141,7 +140,7 @@ <h1>Almost there!</h1>
141140
<span class="mdc-button__label">Back</span>
142141
</button>
143142
<button id="sendBtn" class="mdc-button mdc-button--raised send-btn" disabled>
144-
<span class="mdc-button__label">Send Neurons</span>
143+
<span class="mdc-button__label">Send Newsletter</span>
145144
<i class="material-icons">send</i>
146145
</button>
147146
</div>

‎script.js

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -107,36 +107,52 @@ document.addEventListener('DOMContentLoaded', function() {
107107
});
108108

109109
// Functions
110-
function nextStep() {
110+
async function nextStep() {
111111
if (currentStep >= 3) return;
112112

113+
// Get current active button
114+
const activeButton = currentStep === 1 ? nextBtn1 : nextBtn2;
115+
113116
// Validate current step before proceeding
114117
if (currentStep === 1 && !titleInput.value.trim()) {
115118
showStatus('Please enter a title for your newsletter', 'error');
116119
return;
117120
}
118121

119-
// Update step 2 title with the user's input when moving from step 1
122+
if (currentStep === 2 && !contentInput.value.trim()) {
123+
showStatus('Please enter content for your newsletter', 'error');
124+
return;
125+
}
126+
127+
// Add loading state to button
128+
activeButton.classList.add('mdc-button--loading');
129+
activeButton.disabled = true;
130+
131+
// Update step 2 title if moving from step 1
120132
if (currentStep === 1) {
121133
const titleElement = document.getElementById('content-step-title');
122134
if (titleElement) {
123135
titleElement.textContent = `${titleInput.value.trim()} ✏️`;
124136
}
125137
}
126138

127-
if (currentStep === 2 && !contentInput.value.trim()) {
128-
showStatus('Please enter content for your newsletter', 'error');
129-
return;
130-
}
139+
// Add slight delay for animation to be visible
140+
await new Promise(resolve => setTimeout(resolve, 500));
131141

142+
// Hide current step
132143
steps[currentStep - 1].classList.remove('active');
133144
progressSteps[currentStep - 1].classList.remove('active');
134145

135146
currentStep++;
136147

148+
// Show next step
137149
steps[currentStep - 1].classList.add('active');
138150
progressSteps[currentStep - 1].classList.add('active');
139151

152+
// Remove loading state
153+
activeButton.classList.remove('mdc-button--loading');
154+
activeButton.disabled = false;
155+
140156
window.scrollTo(0, 0);
141157
}
142158

‎style.css

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,11 +83,20 @@ body {
8383
.form-step {
8484
display: none;
8585
flex-direction: column;
86-
animation: fadeIn 0.5s ease;
86+
transition: opacity 0.3s ease, transform 0.3s ease;
8787
}
8888

8989
.form-step.active {
9090
display: flex;
91+
opacity: 1;
92+
transform: translateY(0);
93+
}
94+
95+
.form-step:not(.active) {
96+
opacity: 0;
97+
transform: translateY(10px);
98+
pointer-events: none;
99+
position: absolute;
91100
}
92101

93102
.step-header {
@@ -155,6 +164,7 @@ body {
155164
border-radius: var(--mdc-shape-medium);
156165
overflow: hidden;
157166
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
167+
position: relative;
158168
}
159169

160170
.mdc-button--raised {
@@ -175,6 +185,33 @@ body {
175185
border-width: 1px;
176186
}
177187

188+
/* Button loading animation */
189+
.mdc-button--loading .mdc-button__label,
190+
.mdc-button--loading .material-icons {
191+
visibility: hidden;
192+
}
193+
194+
.mdc-button--loading::after {
195+
content: "";
196+
position: absolute;
197+
width: 20px;
198+
height: 20px;
199+
top: 0;
200+
left: 0;
201+
right: 0;
202+
bottom: 0;
203+
margin: auto;
204+
border: 3px solid transparent;
205+
border-top-color: var(--mdc-theme-on-primary);
206+
border-radius: 50%;
207+
animation: button-loading-spinner 1s linear infinite;
208+
}
209+
210+
@keyframes button-loading-spinner {
211+
from { transform: rotate(0turn); }
212+
to { transform: rotate(1turn); }
213+
}
214+
178215
.mdc-button__icon {
179216
margin-left: 8px;
180217
}

0 commit comments

Comments
 (0)