replace JS alert with custom alert

Author: nopara73

LongevityWorldCup.Website/wwwroot/index.html

@@ -588,10 +588,10 @@ <h2><i class="fas fa-calendar-alt"></i> Once/Year Newsletter</h2>
                         document.getElementById('newsletter-form').reset();
                     })
                     .catch(error => {
-                        alert(error.message);
+                        customAlert(error.message);
                     });
             } else {
-                alert('Please enter a valid email address.');
+                customAlert('Please enter a valid email address.');
             }
         });
 
@@ -646,7 +646,7 @@ <h2><i class="fas fa-calendar-alt"></i> Once/Year Newsletter</h2>
                     // copiedTextElement.classList.remove('fade-in-out');
                 }, 2000); // Duration is 0.5s * 4 flashes = 2s
             }, function (err) {
-                alert('Failed to copy the address');
+                customAlert('Failed to copy the address');
             });
         }
 

LongevityWorldCup.Website/wwwroot/onboarding/convergence.html

@@ -346,7 +346,7 @@ <h2 data-aos="fade" data-aos-duration="700" data-aos-delay="400">1. Character Cr
             // Get the biomarker data from localStorage
             const biomarkerData = JSON.parse(localStorage.getItem('biomarkerData'));
             if (!biomarkerData) {
-                alert('Biomarker data is missing. Please complete the biomarker form.');
+                customAlert('Biomarker data is missing. Please complete the biomarker form.');
                 return;
             }
             console.log(biomarkerData);
@@ -577,7 +577,7 @@ <h2 data-aos="fade" data-aos-duration="700" data-aos-delay="400">1. Character Cr
                             if (files.length > 0) {
                                 // Limit the total number of images to 9
                                 if (proofPics.length + files.length > 9) {
-                                    alert('You can upload a maximum of 9 images.');
+                                    customAlert('You can upload a maximum of 9 images.');
                                     return;
                                 }
 
@@ -869,15 +869,15 @@ <h2 data-aos="fade" data-aos-duration="700" data-aos-delay="400">1. Character Cr
 
                 if (!accountEmail) {
                     isValid = false;
-                    alert('Please enter your email.');
+                    customAlert('Please enter your email.');
                 } else if (!validator.isEmail(accountEmail)) {
                     isValid = false;
-                    alert('Please enter a valid email address.');
+                    customAlert('Please enter a valid email address.');
                 }
 
                 if (personalLink && !validator.isURL(personalLink)) {
                     isValid = false;
-                    alert('Please enter a valid URL for your personal link.');
+                    customAlert('Please enter a valid URL for your personal link.');
                 }
 
                 if (isValid) {
@@ -902,7 +902,7 @@ <h2 data-aos="fade" data-aos-duration="700" data-aos-delay="400">1. Character Cr
 
                             if (response.ok) {
                                 // Handle success, perhaps redirect or show a success message
-                                alert('Application submitted successfully!');
+                                customAlert('Application submitted successfully!');
                                 localStorage.setItem('contactEmail', applicantData.accountEmail);
                                 // Clear the image variables
                                 profilePic = null;
@@ -911,15 +911,15 @@ <h2 data-aos="fade" data-aos-duration="700" data-aos-delay="400">1. Character Cr
                                 window.location.href = '/onboarding/application-review.html#appReviewTitle';
                             } else {
                                 // Handle error
-                                alert('Failed to submit application. Please try again later.');
+                                customAlert('Failed to submit application. Please try again later.');
                                 applyButton.disabled = false;
                                 applyButton.textContent = 'Apply';
                             }
 
                         })
                         .catch(error => {
                             console.error('Error submitting application:', error);
-                            alert('An error occurred while submitting your application.');
+                            customAlert('An error occurred while submitting your application.');
                             applyButton.disabled = false;
                             applyButton.textContent = 'Apply';
                         });

LongevityWorldCup.Website/wwwroot/onboarding/pheno-age.html

@@ -478,15 +478,15 @@ <h2 data-aos="fade" data-aos-duration="700" data-aos-delay="250">
             const day = dayInput ? parseInt(dayInput) : 31; // Default to last day
 
             if (!year) {
-                alert("Please select a year.");
+                customAlert("Please select a year.");
                 return;
             }
 
             const dobValue = new Date(year, month, day);  // Month is 0-based (0 = Jan), Day is 1-based (1 = 1st day, 0 = last day of previous month)
             const chronologicalAge = window.PhenoAge.calculateAgeFromDOB(dobValue);
 
             if (chronologicalAge < 0) {
-                alert("Date of birth cannot be in the future.");
+                customAlert("Date of birth cannot be in the future.");
                 return;
             }
 
@@ -506,7 +506,7 @@ <h2 data-aos="fade" data-aos-duration="700" data-aos-delay="250">
 
                 // Check for invalid input
                 if (isNaN(rawValue)) {
-                    alert(`Please enter a valid value for ${biomarker.name}.`);
+                    customAlert(`Please enter a valid value for ${biomarker.name}.`);
                     document.getElementById('continueButton').classList.remove('show');
                     updateCalculateButton();
                     return;
@@ -528,7 +528,7 @@ <h2 data-aos="fade" data-aos-duration="700" data-aos-delay="250">
                     const wbcUnitConversion = parseFloat(wbcUnitElement.value);
 
                     if (isNaN(wbcRawValue)) {
-                        alert("Please provide White Blood Cell Count to calculate Lymphocyte percentage.");
+                        customAlert("Please provide White Blood Cell Count to calculate Lymphocyte percentage.");
                         document.getElementById('continueButton').classList.remove('show');
                         updateCalculateButton();
                         return;

LongevityWorldCup.Website/wwwroot/partials/header.html

@@ -296,6 +296,70 @@
     .smaller-text {
         font-size: 0.85em;
     }
+
+    #custom-alert {
+        border: none;
+        border-radius: 15px;
+        padding: 20px;
+        max-width: 400px;
+        width: 90%;
+        background: var(--card-bg);
+        color: var(--dark-text-color);
+        text-align: center;
+        font-family: 'Roboto', sans-serif;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        animation: fadeInDialog 0.3s ease-out;
+    }
+
+        #custom-alert::backdrop {
+            background: rgba(0, 0, 0, 0.5);
+        }
+
+        #custom-alert p {
+            margin-bottom: 1rem;
+            font-size: 1rem;
+            line-height: 1.5;
+        }
+
+        #custom-alert button {
+            display: block;
+            margin: 0 auto;
+            padding: 0.7rem 1.5rem;
+            font-size: 1rem;
+            background: var(--main-action-color);
+            color: var(--light-text-color);
+            border: none;
+            border-radius: 25px;
+            cursor: pointer;
+            transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+            #custom-alert button:hover {
+                background: var(--main-action-selected-color);
+                transform: scale(1.05);
+            }
+
+    @keyframes fadeInDialog {
+        from {
+            opacity: 0;
+            transform: scale(0.9);
+        }
+
+        to {
+            opacity: 1;
+            transform: scale(1);
+        }
+    }
+
+    @media (max-width: 480px) {
+        #custom-alert {
+            margin: 0 1rem;
+            width: auto;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+    }
 </style>
 
 <header role="banner">
@@ -319,6 +383,10 @@ <h1 data-aos="fade" data-aos-duration="700" data-aos-delay="150">2025</h1>
     <button onclick="window.location.href='/onboarding/join-game.html#mainProgressBar'" class="join-game scrolled-button" aria-label="Play the Game" style="display: none;" data-aos="fade" data-aos-duration="700" data-aos-delay="200">
         <strong>PLAY</strong>
     </button>
+    <dialog id="custom-alert">
+        <p id="custom-alert-message"></p>
+        <button id="custom-alert-close">OK</button>
+    </dialog>
 </header>
 
 <script>
@@ -347,4 +415,15 @@ <h1 data-aos="fade" data-aos-duration="700" data-aos-delay="150">2025</h1>
             scrolledJoinButton.style.display = 'none';
         }
     }
+
+    function customAlert(message) {
+        const dialog = document.getElementById('custom-alert');
+        const messageEl = document.getElementById('custom-alert-message');
+        messageEl.textContent = message;
+        dialog.showModal();
+    }
+
+    document.getElementById('custom-alert-close').addEventListener('click', function () {
+        document.getElementById('custom-alert').close();
+    });
 </script>