Spaces:
Running
Running
File size: 6,196 Bytes
6d5721b 0ecb4b7 6d5721b 0ecb4b7 6d5721b 0ecb4b7 6d5721b 0ecb4b7 b2e62e9 0ecb4b7 6d5721b ff13e3c b2e62e9 ff13e3c 6d5721b 0ecb4b7 ff13e3c 0ecb4b7 6d5721b 0ecb4b7 b2e62e9 0ecb4b7 6d5721b ff13e3c 0ecb4b7 ff13e3c 0ecb4b7 ff13e3c 0ecb4b7 ff13e3c 0ecb4b7 6d5721b 0ecb4b7 ff13e3c 75a7b0e 0ecb4b7 75a7b0e 33517c0 0ecb4b7 b2e62e9 0ecb4b7 75a7b0e b2e62e9 0ecb4b7 75a7b0e b2e62e9 0ecb4b7 b2e62e9 0ecb4b7 75a7b0e 0ecb4b7 6d5721b 0ecb4b7 6d5721b 75a7b0e 0ecb4b7 75a7b0e ff13e3c 75a7b0e ff13e3c 6d5721b 75a7b0e 33517c0 6d5721b 0ecb4b7 6d5721b b2e62e9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 | <!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>
@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> |