enhance the desgin for the dynamic request submit form.

Author: MalharBhatt-dev

app/static/js/service_requests.js

@@ -132,29 +132,24 @@ switch(queryType){
 case "CHANGE_PIN":
 
 fields.innerHTML = `
-<div class="flex flex-col gap-3">
-<label class="font-semibold">New PIN</label>
-<input type="password" id="new_pin"
-class="border p-2 rounded w-full dark:bg-gray-700 dark:border-gray-600" placeholder="Enter new PIN number">
+<input type="password" id="new_pin" placeholder=" " class="dynamic_input">
+<label id="dynamic_label">New PIN</label>
+<button type="button" id="toggleIcon" onclick="togglePin()" class="absolute right-5 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 text-xl">👁️</button>
 <button
-onclick="submitRequest('CHANGE_PIN')"
-class="mt-2 bg-blue-900 text-white px-4 py-2 rounded-lg  hover:bg-blue-700">
+onclick="submitRequest('CHANGE_PIN')" id="dynamic_button">
 Submit
 </button>
-</div>
 `;
 
 break;
 
 case "CHANGE_ACCOUNT_NAME":
 
 fields.innerHTML = `
-<label class="font-semibold">New Account Name</label>
-<input type="text" id="new_name"
-class="border p-2 rounded w-full" placeholder="Enter the Account Holder Name">
+<input type="text" id="new_name" class="dynamic_input">
+<label id="dynamic_label">New Account Name</label>
 <button
-onclick="submitRequest('CHANGE_ACCOUNT_NAME')"
-class="mt-4 bg-blue-900 text-white px-4 py-2 rounded-lg  hover:bg-blue-700 cursor-pointer transition">
+onclick="submitRequest('CHANGE_ACCOUNT_NAME')" id="dynamic_button">
 Submit
 </button>
 `;
@@ -220,6 +215,9 @@ break;
 
 
 }
+document.getElementsByClassName("dynamic_input").classList.add("peer w-full bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded-2xl px-5 pt-7 pb-3 focus:ring-2 focus:ring-cyan-500 focus:border-transparent outline-none transition-all font-medium")
+document.getElementById("dynamic_label").classList.add("absolute left-5 top-2.5 text-gray-500 dark:text-gray-400 text-xs font-semibold uppercase tracking-wider transition-all peer-placeholder-shown:top-4 peer-placeholder-shown:text-sm peer-placeholder-shown:normal-case peer-placeholder-shown:tracking-normal peer-focus:top-2.5 peer-focus:text-xs peer-focus:uppercase peer-focus:tracking-wider peer-focus:text-cyan-500")
+document.getElementById("dynamic_button").classList.add("mt-2 bg-blue-900 text-white px-4 py-2 rounded-lg  hover:bg-blue-700")
 
 }
 

app/templates/service_requests.html

@@ -276,16 +276,29 @@ <h2 class="text-xl font-bold text-gray-900 dark:text-white">My Requests</h2>
                                 </tbody>
                             </table>
                         </div>
-                        <!-- Dynamic Request Form -->
-                        <div id="request_form_container" class="hidden p-6">
-                            <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-xl">
-                                <h3 class="text-lg font-bold mb-4">Complete Request</h3>
-                                <div id="dynamic_form_fields"></div>
-                                <button onclick="location.reload()"
-                                    class="mt-4 bg-gray-500 text-white px-4 py-2 rounded">
-                                    Cancel
-                                </button>
+                    </div>
+                    <!-- Dynamic Request Form -->
+                    <div id="request_form_container" class="hidden fixed inset-0 bg-gray-900/60 dark:bg-gray-950/80 backdrop-blur-xl items-center justify-center z-50 transition-opacity p-4">
+                        <div class="bg-white dark:bg-gray-900 p-8 rounded-[2rem] shadow-2xl w-full max-w-md relative border border-gray-200 dark:border-gray-700 animate-[fadeIn_0.3s_ease-out] dark:shadow-black/50">
+                            <button onclick="closeLoginModal()" class="close-modal absolute top-5 right-5 w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white transition-colors">
+                                ✕
+                            </button>
+                            <div class="mb-8">
+                                <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-2">Complete Request</h2>
+                                <p class="text-gray-500 dark:text-gray-400 text-sm">Sign in to your dashboard</p>
                             </div>
+                            <form class="flex flex-col gap-5">
+                                <div id="dynamic_form_fields" class="relative group"></div>
+                                <button onclick="location.reload()" class="btn-glow w-full bg-gradient-to-r from-blue-600 to-cyan-500 text-white py-4 rounded-2xl font-bold text-lg hover:from-blue-700 hover:to-cyan-600 active:scale-[0.98] transition-all duration-200 shadow-md flex items-center justify-center gap-2 mt-2">
+                                    <span id="btnText">Cancel →</span>
+                                    <svg id="spinner" class="hidden w-5 h-5 animate-spin" viewBox="0 0 24 24">
+                                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
+
+                                        </circle>
+                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 00-4 4H4z"></path>
+                                    </svg>
+                                </button>
+                            </form>
                         </div>
                     </div>
                 </div>