Spaces:

Subham9126
/

dfd

Running

App Files Files Community

Subham9126 commited on Jul 24, 2024

Commit

0ecb4b7

verified ·

1 Parent(s): 38fdf7d

Update index.html

Browse files

Files changed (1) hide show

index.html +88 -92

index.html CHANGED Viewed

@@ -1,118 +1,114 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Dynamic Boxes with Facets</title>
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
     <style>
-        body {
-            font-family: Arial, sans-serif;
-            background-color: #f8f9fa;
-        }
-        .container {
-            margin-top: 50px;
-        }
-        .box {
-            border: 1px solid #ddd;
-            padding: 15px;
-            margin-bottom: 10px;
-            background-color: #fff;
-            border-radius: 5px;
-        }
-        .box-title {
-            font-weight: bold;
         }
-        .result-box {
-            border: 1px solid #28a745;
-            padding: 15px;
-            margin-top: 20px;
-            background-color: #e8f5e9;
-            border-radius: 5px;
         }
     </style>
 </head>
-<body>
-<div class="container">
-    <div class="row mb-4">
-        <div class="col-md-12">
-            <h2>Input Section</h2>
-            <div class="form-group">
-                <label for="query">Query:</label>
-                <input type="text" id="query" class="form-control" placeholder="Enter your query">
             </div>
-            <div class="form-group">
-                <label for="givenFacet">Given Facet:</label>
-                <input type="text" id="givenFacet" class="form-control" placeholder="Enter your facet in Python dictionary format">
-            </div>
-            <button class="btn btn-primary" id="submitBtn">Submit</button>
         </div>
-    </div>
-    <div class="row" id="outputSection" style="display: none;">
-        <div class="col-md-12">
-            <h2>Dynamic Boxes</h2>
-            <div id="facetBoxes"></div>
-            <button class="btn btn-success" id="getListBtn">Get List</button>
-            <div id="resultSection"></div>
         </div>
     </div>
-</div>
-<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
-<script>
-    $(document).ready(function() {
-        $('#submitBtn').click(function() {
-            const query = $('#query').val();
-            let givenFacet = $('#givenFacet').val();
-            const outputSection = $('#outputSection');
-            const facetBoxes = $('#facetBoxes');
-            try {
-                // Replace single quotes with double quotes
-                givenFacet = givenFacet.replace(/'/g, '"');
-                const facets = JSON.parse(givenFacet);
-                facetBoxes.empty();
-                $.each(facets, function(key, values) {
-                    const box = $('<div class="box"></div>');
-                    const title = $(`<div class="box-title">'${key}' <input type="checkbox" class="facet-checkbox" data-key="${key}"></div>`);
-                    box.append(title);
-                    $.each(values, function(index, value) {
-                        const valueItem = $('<div></div>').text(value);
-                        box.append(valueItem);
                     });
-                    facetBoxes.append(box);
                 });
-                outputSection.show();
-            } catch (e) {
-                alert('Invalid JSON format');
             }
-        });
-        $('#getListBtn').click(function() {
-            const checkboxes = $('.facet-checkbox');
-            const selectedKeys = [];
-            checkboxes.each(function() {
-                if ($(this).is(':checked')) {
-                    const key = $(this).data('key');
-                    selectedKeys.push(`'${key}'`);
-                }
             });
-            const resultSection = $('#resultSection');
-            resultSection.empty();
-            const resultBox = $('<div class="result-box"></div>');
-            resultBox.text(`Selected keys: [${selectedKeys.join(', ')}]`);
-            resultSection.append(resultBox);
         });
-    });
-</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>
+        @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;
         }
     </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>
+        </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() {
+            $('#submit').click(function() {
+                const query = $('#query').val();
+                const givenFacet = $('#given_facet').val();
+                try {
+                    const facetObj = eval('(' + givenFacet + ')');
+                    generateBoxes(facetObj);
+                } 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');
+                    values.forEach(value => {
+                        $content.append($('<p>').addClass('text-gray-600').text(value));
                     });
+                    $box.append($title).append($content);
+                    $dynamicBoxes.append($box);
                 });
             }
+            $('#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');
             });
         });
+    </script>
 </body>
 </html>