@@ -54,7 +54,7 @@
-
+
@@ -63,9 +63,9 @@
style="padding-left: 40px;">
+
-
diff --git a/public/assets/css/$.css b/public/assets/css/$.css
index 8995168f..b0e68968 100644
--- a/public/assets/css/$.css
+++ b/public/assets/css/$.css
@@ -427,7 +427,8 @@ body {
top: 46%;
left: 50%;
transform: translate(-50%, -50%);
- background-color: #131313a4;
+ background-color: #08080894;
+ border: 1px solid #ffffff21;
color: #e0e0e0;
padding: 25px 30px;
border-radius: 20px;
diff --git a/public/assets/css/settings.css b/public/assets/css/settings.css
index e0eb5f37..d64e4aa7 100644
--- a/public/assets/css/settings.css
+++ b/public/assets/css/settings.css
@@ -4,7 +4,8 @@
top: 47%;
left: 50%;
transform: translate(-50%, -50%);
- background-color: #0a0a0ae7;
+ background-color: #08080894;
+ border: 1px solid #ffffff21;
padding: 25px 30px;
border-radius: 20px;
width: 450px;
@@ -46,7 +47,7 @@
#close-settings {
position: absolute;
- top: 20px;
+ top: 17px;
right: 10px;
background-color: transparent;
border: none;
diff --git a/public/assets/js/greeting.js b/public/assets/js/greeting.js
deleted file mode 100644
index bc9d2789..00000000
--- a/public/assets/js/greeting.js
+++ /dev/null
@@ -1,112 +0,0 @@
-window.onload = function() {
- var storedName = localStorage.getItem('userName');
- var greetingElement = document.getElementById('greeting');
-
- if (!storedName) {
- document.getElementById('overlay').style.display = 'block';
- document.getElementById('namePrompt').style.display = 'block';
- } else if (greetingElement) {
- updateGreeting(storedName);
- showToast(`Hey, ${storedName} welcome back to Waves!`);
- }
-
- var nameInput = document.getElementById('userName');
- var doneButton = document.getElementById('doneButton');
-
- doneButton.disabled = nameInput.value.trim() === '';
- nameInput.addEventListener('input', function() {
- doneButton.disabled = nameInput.value.trim() === '';
- });
-};
-
-function submitName() {
- var nameInput = document.getElementById('userName');
- var name = nameInput.value.trim();
-
- if (name) {
- localStorage.setItem('userName', name);
-
- var greetingElement = document.getElementById('greeting');
- if (greetingElement) {
- updateGreeting(name);
- }
-
- document.getElementById('namePrompt').classList.add('fade-out');
- showToast(`Hey, ${name}! Welcome to Waves!`);
-
- setTimeout(function() {
- document.getElementById('namePrompt').style.display = 'none';
- document.getElementById('overlay').style.display = 'none';
- }, 300);
- }
-}
-
-function updateGreeting(name) {
- var greeting = getGreeting();
- var greetingElement = document.getElementById('greeting');
-
- if (greetingElement) {
- greetingElement.innerHTML = `
${greeting.text}, ${name}!`;
- greetingElement.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: '
'
- };
-
- const icon = icons[iconType] || icons['wave'];
- toast.innerHTML = `${icon}${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() {
- var hour = new Date().getHours();
- if (hour >= 5 && hour < 12) {
- return {
- text: 'Good morning',
- iconClass: 'fa-regular fa-cloud-sun'
- };
- } else if (hour >= 12 && hour < 17) {
- return {
- text: 'Good afternoon',
- iconClass: 'fa-regular fa-sun'
- };
- } else if (hour >= 17 && hour < 21) {
- return {
- text: 'Good evening',
- iconClass: 'fa-regular fa-cloud-moon'
- };
- } else {
- return {
- text: 'Good night',
- iconClass: 'fa-regular fa-moon'
- };
- }
-}
\ No newline at end of file
diff --git a/public/assets/js/greetings.js b/public/assets/js/greetings.js
new file mode 100644
index 00000000..f065687b
--- /dev/null
+++ b/public/assets/js/greetings.js
@@ -0,0 +1,126 @@
+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)];
+}
\ No newline at end of file