Spaces:

Subham9126
/

outgen2f

Running

App Files Files Community

Subham9126 commited on Sep 29, 2024

Commit

f22db44

verified ·

1 Parent(s): 1564fdd

Update index.html

Browse files

Files changed (1) hide show

index.html +52 -127

index.html CHANGED Viewed

@@ -1,162 +1,92 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Dynamic Input Form and Facet Explorer</title>
-    <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <style>
         .sticky-query {
             position: sticky;
             top: 0;
-            z-index: 10;
         }
         .fade-in {
             animation: fadeIn 0.5s ease-out;
-        }
-        @keyframes fadeIn {
-            0% { opacity: 0; }
-            100% { opacity: 1; }
         }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen font-sans text-gray-800">
-    <div class="flex flex-col md:flex-row">
-        <!-- Dynamic Input Form (30% width on larger screens) -->
-        <div class="w-full md:w-3/10 p-4 bg-white border-b md:border-r border-gray-200">
-            <h2 class="text-2xl font-bold mb-6 text-center">Dynamic Input Form</h2>
-            <form id="dynamicForm" class="space-y-4">
-                <div id="inputContainer" class="space-y-4">
-                    <div class="flex items-center space-x-2">
-                        <input type="text" class="flex-grow px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter value">
-                        <button type="button" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition duration-300 delete-btn" onclick="deleteInput(this)" disabled>Delete</button>
-                    </div>
-                </div>
-                <div class="flex justify-between">
-                    <button type="button" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition duration-300" onclick="addInput()">Add Input Box</button>
-                    <button type="submit" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition duration-300">Submit</button>
-                    <button type="button" class="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition duration-300" onclick="resetForm()">Reset</button>
-                </div>
-            </form>
-            <div id="output" class="mt-6 p-4 bg-gray-200 rounded-md hidden">
-                <h2 class="text-lg font-semibold mb-2">Output:</h2>
-                <pre id="formattedOutput" class="text-gray-800 font-mono whitespace-pre-wrap"></pre>
-            </div>
-        </div>
-        <!-- Facet Explorer (70% width on larger screens) -->
-        <div class="w-full md:w-7/10 p-4">
-            <h2 class="text-2xl font-bold mb-6 text-center">Dynamic Facet Explorer</h2>
-            <!-- Query Input -->
-            <div class="sticky-query bg-white rounded-lg shadow-lg p-4 mb-6">
-                <div class="mb-4">
-                    <label for="query" class="block text-lg font-medium text-gray-700 mb-2">Query</label>
-                    <input type="text" id="query" placeholder="Enter your query" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
-                </div>
             </div>
-            <!-- Section 1: Input -->
-            <div class="bg-white rounded-lg shadow-lg p-4 mb-6">
-                <div class="mb-4">
-                    <label for="given_facet" class="block text-lg font-medium text-gray-700 mb-2">Given Facet</label>
-                    <textarea id="given_facet" placeholder="Enter your facet in the specified format" class="w-full px-4 py-2 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-2 px-4 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>
-            <!-- Section 2: Dynamic Boxes -->
-            <div id="dynamicBoxes" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"></div>
-            <!-- Get List Button -->
-            <div class="mt-6 text-center">
-                <button id="getList" class="bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2">Get List</button>
-                <button id="reset" class="bg-red-600 text-white py-2 px-4 ml-2 rounded-md hover:bg-red-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">Reset</button>
-            </div>
-            <!-- Result Display -->
-            <div id="result" class="mt-6 text-center text-xl font-semibold"></div>
         </div>
     </div>
     <script>
-        // Dynamic Input Form JavaScript
-        function addInput() {
-            const container = document.getElementById('inputContainer');
-            const newInput = document.createElement('div');
-            newInput.className = 'flex items-center space-x-2';
-            newInput.innerHTML = `
-                <input type="text" class="flex-grow px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter value">
-                <button type="button" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition duration-300 delete-btn" onclick="deleteInput(this)">Delete</button>
-            `;
-            container.appendChild(newInput);
-            updateDeleteButtons();
-        }
-        function deleteInput(button) {
-            button.parentElement.remove();
-            updateDeleteButtons();
-        }
-        function updateDeleteButtons() {
-            const deleteButtons = document.querySelectorAll('.delete-btn');
-            deleteButtons.forEach(btn => {
-                btn.disabled = deleteButtons.length === 1;
-            });
-        }
-        function resetForm() {
-            const container = document.getElementById('inputContainer');
-            container.innerHTML = `
-                <div class="flex items-center space-x-2">
-                    <input type="text" class="flex-grow px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter value">
-                    <button type="button" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition duration-300 delete-btn" onclick="deleteInput(this)" disabled>Delete</button>
-                </div>
-            `;
-            document.getElementById('output').classList.add('hidden');
-            document.getElementById('formattedOutput').textContent = '';
-        }
-        function processInputValue(value) {
-            return value.trim().toLowerCase().replace(/\s+/g, '_');
-        }
-        document.getElementById('dynamicForm').addEventListener('submit', function(e) {
-            e.preventDefault();
-            const inputs = document.querySelectorAll('#inputContainer input');
-            const values = Array.from(inputs).map(input => processInputValue(input.value));
-            const formattedOutput = '[' + values.map(v => `'${v}'`).join(', ') + ']';
-            document.getElementById('formattedOutput').textContent = formattedOutput;
-            document.getElementById('output').classList.remove('hidden');
-        });
         $(document).ready(function() {
             let isResultShown = false;
-            let facetData = [];
             $('#submit').click(function() {
                 const query = $('#query').val();
                 const givenFacet = $('#given_facet').val();
                 try {
-                    facetData = JSON.parse(givenFacet.replace(/'/g, '"'));
-                    generateBoxes(facetData);
                     resetResult();
                 } catch (error) {
-                    alert('Invalid facet format. Please enter a valid JSON array of objects.');
                 }
             });
-            function generateBoxes(facetArray) {
                 const $dynamicBoxes = $('#dynamicBoxes').empty();
-                facetArray.forEach((facetObj, index) => {
-                    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($('<input>').attr({
                             type: 'checkbox',
                             name: key,
-                            'data-index': index,
                             class: 'form-checkbox h-5 w-5 text-blue-600'
                         }));
                     const $content = $('<div>').addClass('space-y-2');
@@ -168,16 +98,11 @@
                 });
             }
             $('#getList').click(function() {
-                const result = facetData.reduce((acc, facetObj) => {
-                    const [key] = Object.keys(facetObj);
-                    const $categoryCheckbox = $(`input[type="checkbox"][name="${key}"]`);
-                    if ($categoryCheckbox.is(':checked')) {
-                        acc.push(`'${key}'`);
-                    }
-                    return acc;
-                }, []);
-                const formattedResult = `[${result.join(', ')}]`;
-                $('#result').text(formattedResult).addClass('fade-in');
                 isResultShown = true;
             });
             $('#reset').click(function() {
@@ -194,4 +119,4 @@
         });
     </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dynamic Facet Explorer</title>
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
     <style>
         .sticky-query {
             position: sticky;
             top: 0;
+            z-Coeff: 1;
+            background-color: white;
+            padding: 1rem;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            animation: zoomIn 0.5s ease-out;
         }
         .fade-in {
             animation: fadeIn 0.5s ease-out;
+            @keyframes fadeIn {
+                0% {
+                    opacity: 0;
+                }
+                100% {
+                    opacity: 1;
+                }
+            }
         }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen font-sans text-gray-800">
+    <div class="container mx-auto px-4 py-12">
+        <!-- Query Input -->
+        <div class="sticky-query bg-white rounded-lg shadow-lg p-8 mb-12">
+            <div class="mb-6">
+                <label for="query" class="block text-lg font-medium text-gray-700 mb-2">Query</label>
+                <input type="text" id="query" placeholder="Enter your query" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
             </div>
+        </div>
+        <!-- Section 1: Input -->
+        <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">
             </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>
+        <!-- Section 2: Dynamic Boxes -->
+        <div id="dynamicBoxes" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"></div>
+        <!-- Get List Button -->
+        <div class="mt-12 text-center">
+            <button id="getList" class="bg-green-600 text-white py-3 px-8 rounded-md hover:bg-green-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2">Get List</button>
+            <button id="reset" class="bg-red-600 text-white py-3 px-8 ml-4 rounded-md hover:bg-red-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">Reset</button>
         </div>
+        <!-- Result Display -->
+        <div id="result" class="mt-12 text-center text-2xl font-semibold"></div>
     </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script>
         $(document).ready(function() {
             let isResultShown = false;
             $('#submit').click(function() {
                 const query = $('#query').val();
                 const givenFacet = $('#given_facet').val();
                 try {
+                    const facetObj = eval('(' + givenFacet + ')');
+                    generateBoxes(facetObj);
                     resetResult();
                 } catch (error) {
+                    alert('Invalid facet format. Please enter a valid Python dictionary.');
                 }
             });
+            function generateBoxes(facetObj) {
                 const $dynamicBoxes = $('#dynamicBoxes').empty();
+                Object.entries(facetObj).forEach(([key, values]) => {
                     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($('<input>').attr({
                             type: 'checkbox',
                             name: key,
                             class: 'form-checkbox h-5 w-5 text-blue-600'
                         }));
                     const $content = $('<div>').addClass('space-y-2');
                 });
             }
             $('#getList').click(function() {
+                const checkedBoxes = $('input[type="checkbox"]:checked').map(function() {
+                    return `'${this.name}'`;
+                }).get();
+                const result = `[${checkedBoxes.join(', ')}]`;
+                $('#result').text(result).addClass('fade-in');
                 isResultShown = true;
             });
             $('#reset').click(function() {
         });
     </script>
 </body>
+</html>