Spaces:
Running
Running
| <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> | |
| @keyframes zoomIn { | |
| 0% { | |
| transform: translateY(0); | |
| font-size: 1rem; | |
| } | |
| 100% { | |
| transform: translateY(-50px); | |
| font-size: 2rem; | |
| } | |
| } | |
| .sticky-query { | |
| position: sticky; | |
| top: 0; | |
| z-index: 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> | |
| <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> | |
| <!-- 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; | |
| 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'); | |
| values.forEach(value => { | |
| $content.append($('<p>').addClass('text-gray-600').text(value)); | |
| }); | |
| $box.append($title).append($content); | |
| $dynamicBoxes.append($box); | |
| }); | |
| } | |
| $('#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() { | |
| $('input[type="checkbox"]').prop('checked', false); | |
| if (isResultShown) { | |
| $('#result').text('').removeClass('fade-in'); | |
| isResultShown = false; | |
| } | |
| }); | |
| function resetResult() { | |
| $('#result').text('').removeClass('fade-in'); | |
| isResultShown = false; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |