да уже лучше, но давай добавим на карточку пользовательские инпуты

orderdat
Shares
Amount
Account
и вывод нужно убирать не за 5 сек а по нажатию на закрыть чтобы прользователь мог прочитать ответ
+ сделай карточку более прямоугольной вниз а не квадратной

index.html

@@ -17,8 +17,11 @@
             <!-- Paper Product Card -->
             <div class="paper-card bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
                 <div class="absolute inset-0 flex items-center justify-center z-10 notification hidden">
-                    <div class="bg-white rounded-lg shadow-2xl p-6 max-w-sm w-full text-center">
-                        <div class="icon-container mb-4">
+                    <div class="bg-white rounded-lg shadow-2xl p-6 max-w-sm w-full text-center relative">
+                        <button class="close-notification absolute top-2 right-2 text-gray-400 hover:text-gray-600">
+                            <i data-feather="x" class="w-5 h-5"></i>
+                        </button>
+<div class="icon-container mb-4">
                             <i data-feather="check-circle" class="text-green-500 w-12 h-12 mx-auto hidden success-icon"></i>
                             <i data-feather="x-circle" class="text-red-500 w-12 h-12 mx-auto hidden error-icon"></i>
                         </div>
@@ -26,11 +29,9 @@
                         <p class="text-gray-600 notification-message">Your transaction was completed successfully.</p>
                     </div>
                 </div>
-                
-                <div class="h-48 bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center">
-                    <i data-feather="file-text" class="text-white w-20 h-20"></i>
+                <div class="h-32 bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center">
+<i data-feather="file-text" class="text-white w-20 h-20"></i>
                 </div>
-                
                 <div class="p-6">
                     <div class="flex justify-between items-start mb-2">
                         <h2 class="text-xl font-bold text-gray-800">Premium A4 Paper</h2>
@@ -38,6 +39,29 @@
                     </div>
                     
                     <p class="text-gray-600 mb-4">High quality 80gsm paper with smooth texture for professional printing.</p>
+
+                    <div class="space-y-3 mb-4">
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Order Date</label>
+                            <input type="date" class="order-date w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Shares</label>
+                            <input type="number" class="shares w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter quantity">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Amount</label>
+                            <input type="number" class="amount w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter amount">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Account</label>
+                            <select class="account w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                <option value="">Select account</option>
+                                <option value="personal">Personal</option>
+                                <option value="business">Business</option>
+                            </select>
+                        </div>
+                    </div>
                     
                     <div class="flex items-center justify-between mb-4">
                         <div>
@@ -63,7 +87,7 @@
                             Sell
                         </button>
                     </div>
-                </div>
+</div>
             </div>
         </div>
     </div>

script.js

@@ -38,16 +38,14 @@ document.addEventListener('DOMContentLoaded', function() {
         
         // Show notification
         notification.classList.remove('hidden');
-        
-        // Hide after 5 seconds
-        setTimeout(() => {
+        // Add close button event
+        const closeBtn = card.querySelector('.close-notification');
+        closeBtn.addEventListener('click', () => {
             notification.classList.add('hide');
-            
-            // Reset after animation completes
             setTimeout(() => {
                 notification.classList.add('hidden');
                 notification.classList.remove('hide');
             }, 300);
-        }, 5000);
-    }
+        });
+}
 });

style.css

@@ -1,8 +1,10 @@
+
 .paper-card {
     position: relative;
     transition: transform 0.3s ease;
+    height: auto;
+    min-height: 650px;
 }
-
 .paper-card:hover {
     transform: translateY(-5px);
 }