updated directory structure to fix root Service Worker issues and performance improvements

components/profile-modal.html

@@ -0,0 +1,81 @@
+<!-- components/profile-modal.html -->
+<div
+  id="profileModal"
+  class="fixed inset-0 z-50 hidden"
+  style="background: transparent"
+>
+  <!-- Overlay Layer with dark background and blur -->
+  <div
+    class="absolute inset-0 z-10"
+    style="
+      background-color: rgba(0, 0, 0, 0.9);
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+    "
+  ></div>
+
+  <!-- Outer container with the same sizing approach as your other modals -->
+  <div
+    class="modal-container relative h-full w-full flex items-start justify-center overflow-y-auto z-20"
+  >
+    <!-- Inner content: wide layout, matching your video modal -->
+    <div
+      class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative flex flex-col"
+      style="max-height: 90vh"
+    >
+      <!-- Modal Header -->
+      <div
+        class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
+      >
+        <h2 class="text-xl font-bold text-white">Profile</h2>
+        <button
+          id="closeProfileModal"
+          class="flex items-center justify-center w-10 h-10 rounded-full bg-black/50 hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="w-6 h-6 text-gray-300"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+      </div>
+
+      <!-- Modal Body -->
+      <div class="p-6 flex-1 text-gray-200 space-y-4">
+        <div class="flex items-center space-x-4">
+          <img
+            id="profileModalAvatar"
+            src="assets/jpg/default-profile.jpg"
+            alt="Profile"
+            class="w-16 h-16 object-cover rounded-full"
+          />
+          <p id="profileModalName" class="text-lg font-semibold truncate">
+            Loading...
+          </p>
+        </div>
+        <p class="text-sm text-gray-400">
+          Some future profile details or settings could go here.
+        </p>
+      </div>
+
+      <!-- Modal Footer -->
+      <div class="p-4 border-t border-gray-700 flex items-center justify-end">
+        <button
+          id="profileLogoutBtn"
+          class="bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
+        >
+          Logout
+        </button>
+      </div>
+    </div>
+  </div>
+</div>