Update index.html

index.html

@@ -20,7 +20,7 @@
         .sticky-query {
             position: sticky;
             top: 0;
-            z-Coeff: 1;
+            z-index: 1;
             background-color: white;
             padding: 1rem;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -28,13 +28,13 @@
         }
         .fade-in {
             animation: fadeIn 0.5s ease-out;
-            @keyframes fadeIn {
-                0% {
-                    opacity: 0;
-                }
-                100% {
-                    opacity: 1;
-                }
+        }
+        @keyframes fadeIn {
+            0% {
+                opacity: 0;
+            }
+            100% {
+                opacity: 1;
             }
         }
     </style>
@@ -55,7 +55,7 @@
         <div class="bg-white rounded-lg shadow-lg p-8 mb-12">
             <div class="mb-6">
                 <label for="given_facet" class="block text-lg font-medium text-gray-700 mb-2">Given Facet</label>
-                <input type="text" id="given_facet" placeholder="Enter your facet in Python dictionary format" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                <textarea id="given_facet" placeholder="Enter your facet in the specified format" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" rows="6"></textarea>
             </div>
             <button id="submit" class="w-full bg-blue-600 text-white py-3 px-6 rounded-md hover:bg-blue-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Submit</button>
         </div>
@@ -81,19 +81,20 @@
                 const query = $('#query').val();
                 const givenFacet = $('#given_facet').val();
                 try {
-                    const facetObj = eval('(' + givenFacet + ')');
+                    const facetObj = JSON.parse(givenFacet.replace(/'/g, '"'));
                     generateBoxes(facetObj);
                     resetResult();
                 } catch (error) {
-                    alert('Invalid facet format. Please enter a valid Python dictionary.');
+                    alert('Invalid facet format. Please enter a valid JSON array of objects.');
                 }
             });
-            function generateBoxes(facetObj) {
+            function generateBoxes(facetArray) {
                 const $dynamicBoxes = $('#dynamicBoxes').empty();
-                Object.entries(facetObj).forEach(([key, values]) => {
+                facetArray.forEach(facetObj => {
+                    const [key, values] = Object.entries(facetObj)[0];
                     const $box = $('<div>').addClass('bg-white rounded-lg shadow-md p-6 fade-in');
                     const $title = $('<div>').addClass('flex items-center justify-between mb-4')
-                        .append($('<h2>').addClass('text-xl font-semibold').text(`'${key}'`))
+                        .append($('<h2>').addClass('text-xl font-semibold').text(key))
                         .append($('<input>').attr({
                             type: 'checkbox',
                             name: key,
@@ -109,7 +110,7 @@
             }
             $('#getList').click(function() {
                 const checkedBoxes = $('input[type="checkbox"]:checked').map(function() {
-                    return `'${this.name}'`;
+                    return `{'${this.name}': []}`;
                 }).get();
                 const result = `[${checkedBoxes.join(', ')}]`;
                 $('#result').text(result).addClass('fade-in');
@@ -129,4 +130,4 @@
         });
     </script>
 </body>
-</html>
+</html>