window.onload = function() {
const storedName = localStorage.getItem('userName');
if (!storedName) {
document.getElementById('overlay').style.display = 'block';
document.getElementById('namePrompt').style.display = 'block';
const nameInput = document.getElementById('userName');
const doneButton = document.getElementById('doneButton');
doneButton.disabled = true;
nameInput.addEventListener('input', () => {
doneButton.disabled = nameInput.value.trim() === '';
});
return;
}
showToast(`Hey, ${storedName}! Welcome back to Waves!`, 'success', 'wave');
const greetingElement = document.getElementById('greeting');
if (greetingElement) {
updateGreeting(storedName);
}
};
function submitName() {
const name = document.getElementById('userName').value.trim();
if (!name) return;
localStorage.setItem('userName', name);
updateGreeting(name);
document.getElementById('namePrompt').classList.add('fade-out');
showToast(`Hey, ${name}! Welcome to Waves!`, 'success', 'wave');
setTimeout(() => {
document.getElementById('namePrompt').style.display = 'none';
document.getElementById('overlay').style.display = 'none';
}, 300);
}
function updateGreeting(name) {
const { text, iconClass } = getGreeting();
const el = document.getElementById('greeting');
if (el) {
el.innerHTML = ` ${text}, ${name}!`;
el.style.opacity = 1;
}
}
function showToast(message, type = 'success', iconType = 'check') {
const toast = document.createElement('div');
toast.className = `toast show ${type}`;
const icons = {
success: '',
error: '',
info: '',
warning: '',
wave: ''
};
toast.innerHTML = `${icons[iconType] || icons.wave}${message} `;
const progressBar = document.createElement('div');
progressBar.className = 'progress-bar';
toast.appendChild(progressBar);
const closeBtn = document.createElement('button');
closeBtn.className = 'toast-close';
closeBtn.innerHTML = '';
closeBtn.addEventListener('click', () => {
toast.classList.add('hide');
setTimeout(() => toast.remove(), 500);
});
toast.appendChild(closeBtn);
document.body.appendChild(toast);
setTimeout(() => {
toast.classList.add('hide');
setTimeout(() => toast.remove(), 500);
}, 3000);
}
function getGreeting() {
const now = new Date();
const hour = now.getHours();
const day = now.getDay();
const options = [];
if (hour >= 5 && hour < 12) {
options.push(
{ text: 'Good morning, sunshine', iconClass: 'fa-regular fa-sun' },
{ text: 'Here’s to a bright morning', iconClass: 'fa-regular fa-cloud-sun' },
{ text: 'Morning vibes only', iconClass: 'fa-regular fa-mug-hot' },
{ text: 'Your day starts here', iconClass: 'fa-regular fa-star' }
);
} else if (hour < 17) {
options.push(
{ text: 'Good afternoon', iconClass: 'fa-regular fa-leaf' },
{ text: 'Hope your day is going well', iconClass: 'fa-regular fa-coffee' },
{ text: 'Keep up the pace', iconClass: 'fa-regular fa-book' },
{ text: 'Stay on track today', iconClass: 'fa-regular fa-sun' }
);
} else if (hour < 21) {
options.push(
{ text: 'Good evening', iconClass: 'fa-regular fa-cloud-moon' },
{ text: 'Time to unwind', iconClass: 'fa-regular fa-fire' },
{ text: 'Evening’s here—relax', iconClass: 'fa-regular fa-star' },
{ text: 'Breathe and recharge', iconClass: 'fa-regular fa-moon' }
);
} else {
options.push(
{ text: 'Good night', iconClass: 'fa-regular fa-bed' },
{ text: 'Rest well', iconClass: 'fa-regular fa-sleep' },
{ text: 'Sweet dreams', iconClass: 'fa-regular fa-star-and-crescent' },
{ text: 'See you tomorrow', iconClass: 'fa-regular fa-moon' }
);
}
if (day === 4) {
options.push(
{ text: 'Thursday mode: engaged', iconClass: 'fa-regular fa-party-popper' },
{ text: 'Almost Friday', iconClass: 'fa-regular fa-music' },
{ text: 'Keep going', iconClass: 'fa-regular fa-thumbs-up' }
);
}
if (day === 0 || day === 6) {
options.push(
{ text: 'Happy weekend', iconClass: 'fa-regular fa-umbrella-beach' },
{ text: 'Enjoy some downtime', iconClass: 'fa-regular fa-cocktail' }
);
} else {
options.push(
{ text: 'You’ve got this', iconClass: 'fa-regular fa-hand-holding-heart' },
{ text: 'One step at a time', iconClass: 'fa-regular fa-walking' },
{ text: 'Summer is coming', iconClass: 'fa-regular fa-umbrella-beach' }
);
}
return options[Math.floor(Math.random() * options.length)];
}