Added Close List Button, Changed List form and UI

website/templates/report.html

@@ -64,6 +64,53 @@
             bottom: 10px;
             right: 15px;
     }
+    #duplicate-container {
+        background: rgba(0,0,0,0.5);
+    }
+    #duplicate-container li {
+        padding: 1.5rem;
+        border-bottom: 1px solid #e5e7eb;
+        transition: all 0.2s;
+        background: white;
+    }
+    #duplicate-container li:hover {
+        background: #f8fafc;
+        transform: translateX(4px);
+    }
+    #duplicate-container .issue-description {
+        font-size: 1.2rem;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        color: #1e293b;
+    }
+    #duplicate-container .issue-date {
+        font-size: 0.95rem;
+        color: #64748b;
+    }
+    #duplicate-container .issue-link {
+        font-size: 1rem;
+        color: #3b82f6;
+        text-decoration: underline;
+    }
+    #duplicate-container .close-footer {
+        padding: 1.5rem;
+        border-top: 1px solid #e5e7eb;
+        background: #f8fafc;
+    }
+    @media (max-width: 768px) {
+        #duplicate-container .list-container {
+            width: 95% !important;
+        }
+        #duplicate-container .issue-description {
+            font-size: 1rem;
+        }
+        #duplicate-container .modal-content {
+            width: 90% !important;
+            margin-top: 2rem !important;
+        }
+    }
 
     </style>
 {% endblock style %}
@@ -72,30 +119,37 @@
     <div id="duplicate-container"
          class="fixed w-full h-full top-0 left-0 overflow-y-auto z-10"
          hidden>
-        <div class="flex flex-col w-full h-full bg-white items-center">
-            <div class="w-full h-[60px] flex bg-red-500 items-center">
+        <div class="flex flex-col w-full h-full items-center">
+            <div class="w-full flex bg-red-500 items-center justify-between p-4">
                 <button id="close-duplicate-container"
-                        class="flex top-[100px] w-[30px] h-[30px] bg-white justify-center item-center rounded-[50px] hover:bg-red-100 hover:shadow-md no-underline ml-5">
-                    <i class="text-red-500 scale-150 m-3 fa-sharp fa-solid fa-xmark cursor-pointer transition duration-200"></i>
+                        class="flex w-[30px] h-[30px] bg-white justify-center items-center rounded-full hover:bg-red-100 hover:shadow-md no-underline">
+                    <i class="text-red-500 scale-150 fa-sharp fa-solid fa-xmark cursor-pointer transition duration-200"></i>
                 </button>
-                <div class="w-[90%] flex items-center justify-center">
-                    <p class="text-5xl font-extrabold text-white">DUPLICATE ISSUES</p>
+                <div class="flex items-center">
+                    <p class="text-3xl font-bold text-white">DUPLICATE ISSUES</p>
                 </div>
+                <div class="w-[30px]"></div>
             </div>
-            <div class="w-[100%] flex justify-center mx-auto">
-                <div class="p-4 w-[50%] mt-10 bg-white rounded-lg border shadow-md sm:p-8 border-gray-700">
+            <div class="w-full flex justify-center mx-auto">
+                <div class="p-4 w-[50%] mt-10 bg-white rounded-lg border shadow-xl sm:p-8 border-gray-200 modal-content">
                     <div class="flex justify-between items-center mb-4">
-                        <h3 class="text-xl font-bold leading-none text-red-500">Latest Issues</h3>
+                        <h3 class="text-xl font-bold text-red-500">Latest Issues</h3>
                         <a href=""
                            id="view_all"
-                           class="text-xl font-medium text-blue-600 hover:underline dark:text-blue-500">View all</a>
+                           class="text-lg font-medium text-blue-600 hover:underline">View all</a>
                     </div>
                     <div class="flow-root">
                         <ul role="list"
                             id="duplicate-list"
-                            class="max-h-[70vh] overflow-y-scroll">
+                            class="divide-y divide-gray-200 max-h-[60vh] overflow-y-auto">
                         </ul>
                     </div>
+                    <div class="close-footer text-center">
+                        <button onclick="$('#duplicate-container').hide()" 
+                                class="px-6 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 transition-colors">
+                            Close List
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>