From d87a0e064558eadd489117801f27c5ee23d9f9cd Mon Sep 17 00:00:00 2001 From: Keep Creating Online <53631862+PR0M3TH3AN@users.noreply.github.com> Date: Sat, 22 Feb 2025 20:31:36 -0500 Subject: [PATCH] update --- public/components/profile-modal.html | 2 +- public/index.html | 41 +++++--- public/style.css | 142 ++++++++++++++++++++++----- 3 files changed, 147 insertions(+), 38 deletions(-) diff --git a/public/components/profile-modal.html b/public/components/profile-modal.html index 471df0d..3ccf8a1 100644 --- a/public/components/profile-modal.html +++ b/public/components/profile-modal.html @@ -28,7 +28,7 @@ -
+
-
-
-
+
+
+
-
+
-
-

+

@@ -160,12 +160,17 @@ // Profile-related functions async function updateProfileUI(pubkey) { const btnAvatar = document.getElementById("loginButtonAvatar"); + const profileAvatar = document.getElementById("profileModalAvatar"); const profileName = document.getElementById("profileModalName"); + if (!pubkey) { btnAvatar.src = "assets/svg/default-profile.svg"; + if (profileAvatar) + profileAvatar.src = "assets/svg/default-profile.svg"; if (profileName) profileName.textContent = "Not logged in"; return; } + try { const events = await window.nostrClient.pool.list( window.nostrClient.relays, @@ -179,10 +184,13 @@ picture = data.picture || "assets/svg/default-profile.svg"; } btnAvatar.src = picture; + if (profileAvatar) profileAvatar.src = picture; if (profileName) profileName.textContent = displayName; } catch (error) { console.error("Error fetching profile data:", error); btnAvatar.src = "assets/svg/default-profile.svg"; + if (profileAvatar) + profileAvatar.src = "assets/svg/default-profile.svg"; if (profileName) profileName.textContent = pubkey; } } @@ -236,16 +244,19 @@ } // Profile initialization - document.getElementById("loginButton").addEventListener("click", () => { - const userPubKey = localStorage.getItem("userPubKey"); - if (!userPubKey) { - login().then(() => { + document + .getElementById("loginButton") + .addEventListener("click", async () => { + const userPubKey = localStorage.getItem("userPubKey"); + if (!userPubKey) { + await login(); toggleProfileModal(true); - }); - } else { - toggleProfileModal(true); - } - }); + await updateProfileUI(localStorage.getItem("userPubKey")); + } else { + toggleProfileModal(true); + await updateProfileUI(userPubKey); + } + }); const savedPubKey = localStorage.getItem("userPubKey") || null; if (savedPubKey) { diff --git a/public/style.css b/public/style.css index 29fd886..b322f7b 100644 --- a/public/style.css +++ b/public/style.css @@ -19,33 +19,34 @@ /* For the modal layout container */ .modal-container { - position: relative; - z-index: 20; /* Added to ensure modal content sits above the overlay */ - width: 100%; - height: 100%; + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; display: flex; - align-items: start; + align-items: center; justify-content: center; - overflow-y: auto; + z-index: 50; } .modal-content { - background-color: #1a1a1a; /* Or .bg-gray-900 equivalent */ + background-color: #1a1a1a; border-radius: 0.5rem; overflow: hidden; position: relative; display: flex; flex-direction: column; - width: 100%; - max-width: 90%; - margin-top: 0; - margin-bottom: 0; + width: 90%; + max-width: 600px; + margin: 1rem; } -/* On larger screens, go up to ~72rem wide */ +/* On larger screens, increase the width */ @media (min-width: 1024px) { .modal-content { - max-width: 72rem; /* 6xl, ~1152px */ + width: 50%; + max-width: 800px; } } @@ -61,7 +62,7 @@ /* Absolute overlay for darker background + blur */ .modal-overlay { - position: absolute; + position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.9); backdrop-filter: blur(10px); @@ -71,15 +72,19 @@ /* For the body content area inside the modal */ .modal-body { - padding: 1.5rem; + padding: 2rem; flex: 1; - color: #e5e5e5; /* text-gray-200 */ + color: #e5e5e5; overflow-y: auto; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; } /* Footer area */ .modal-footer { - border-top: 1px solid #4b5563; /* e.g., border-gray-700 */ + border-top: 1px solid #4b5563; padding: 1rem 1.5rem; display: flex; justify-content: end; @@ -91,9 +96,9 @@ display: flex; align-items: center; justify-content: center; - width: 2.5rem; /* 40px */ + width: 2.5rem; height: 2.5rem; - border-radius: 9999px; /* fully rounded */ + border-radius: 9999px; background-color: rgba(0, 0, 0, 0.5); cursor: pointer; } @@ -108,13 +113,19 @@ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); } -/* Additional utility styles if needed */ +/* Additional utility styles */ .flex { display: flex; } +.flex-col { + flex-direction: column; +} .items-center { align-items: center; } +.justify-center { + justify-content: center; +} .justify-between { justify-content: space-between; } @@ -138,6 +149,93 @@ } .profile-avatar { - width: 40px; - height: 40px; + width: 80px; + height: 80px; +} + +/* Logout button styling */ +#profileLogoutBtn { + background-color: #ef4444; + color: #ffffff; + padding: 0.5rem 1rem; + border-radius: 0.375rem; + transition: background-color 0.2s; + border: none; +} + +#profileLogoutBtn:hover { + background-color: #dc2626; +} + +/* Custom settings modal styles */ +.custom-modal-content { + background-color: #1a1a1a; /* Dark background */ + border-radius: 0.5rem; + color: #e5e5e5; /* Light text color */ +} + +.custom-modal-header { + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent); + border-bottom: none; /* Remove default border */ + padding: 1.5rem; /* Increased padding */ +} + +.custom-modal-body { + padding: 2rem; /* Increased padding for better spacing */ + display: flex; + flex-direction: column; + align-items: center; /* Center content horizontally */ +} + +.custom-modal-body .form-label { + color: #e5e5e5; /* Light text for labels */ +} + +.custom-modal-body .form-control { + background-color: #2d2d2d; /* Dark input background */ + color: #e5e5e5; /* Light text in inputs */ + border: 1px solid #4b5563; /* Subtle border */ +} + +.custom-modal-body .form-control::placeholder { + color: #9ca3af; /* Placeholder text color */ +} + +.custom-modal-body .btn-primary { + background-color: #2563eb; /* Bootstrap primary color */ + border: none; + width: 100%; /* Full-width button */ +} + +.custom-modal-body .btn-primary:hover { + background-color: #1d4ed8; /* Darker on hover */ +} + +.custom-modal-body p { + color: #9ca3af; /* Light gray for current storage text */ +} + +/* Adjust modal dialog width */ +.modal-dialog { + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; +} + +@media (min-width: 1024px) { + .modal-dialog { + max-width: 800px; + } +} + +.custom-btn-primary { + background-color: #ef4444; /* Red color */ + border: none; + color: #ffffff; + width: 100%; +} + +.custom-btn-primary:hover { + background-color: #dc2626; /* Darker red on hover */ }