updated modals, forms, UI flow

src/components/feature-request-form.html

@@ -0,0 +1,56 @@
+<!-- components/feature-request-form.html -->
+<div
+  id="featureRequestModal"
+  class="fixed inset-0 z-50 hidden"
+  style="background: transparent"
+>
+  <!-- Dark/blur overlay -->
+  <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>
+
+  <div
+    class="modal-container relative h-full w-full flex items-start justify-center overflow-y-auto z-20"
+  >
+    <div
+      class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
+    >
+      <!-- Header bar (sticky) with exit button -->
+      <div
+        class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
+      >
+        <h2 class="text-2xl font-bold text-white mb-0">Feature Request Form</h2>
+        <button
+          id="closeFeatureRequestModal"
+          class="flex items-center justify-center w-10 h-10 rounded-full bg-black/50 hover:bg-black/70 transition-all duration-200 backdrop-blur 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>
+
+      <div class="p-6">
+        <div class="w-full" style="height: 80vh">
+          <iframe></iframe>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>