Hugging Face's logo

Spaces:
Subham9126
/
dfd
Running

App Files Community
Subham9126 commited on
Commit
ff13e3c
·
verified ·
1 Parent(s): 0ecb4b7

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +35 -11
index.html CHANGED
@@ -20,18 +20,29 @@
20
  .sticky-query {
21
  position: sticky;
22
  top: 0;
23
- z-index: 1;
24
  background-color: white;
25
  padding: 1rem;
26
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
27
  animation: zoomIn 0.5s ease-out;
28
  }
 
 
 
 
 
 
 
 
 
 
 
29
  </style>
30
  </head>
31
 
32
  <body class="bg-gray-50 min-h-screen font-sans text-gray-800">
33
  <div class="container mx-auto px-4 py-12">
34
-
35
  <!-- Query Input -->
36
  <div class="sticky-query bg-white rounded-lg shadow-lg p-8 mb-12">
37
  <div class="mb-6">
@@ -48,15 +59,16 @@
48
  </div>
49
  <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>
50
  </div>
51
-
52
  <!-- Section 2: Dynamic Boxes -->
53
  <div id="dynamicBoxes" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"></div>
54
-
55
  <!-- Get List Button -->
56
  <div class="mt-12 text-center">
57
  <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>
 
58
  </div>
59
-
60
  <!-- Result Display -->
61
  <div id="result" class="mt-12 text-center text-2xl font-semibold"></div>
62
  </div>
@@ -64,10 +76,12 @@
64
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
65
  <script>
66
  $(document).ready(function() {
 
 
67
  $('#submit').click(function() {
68
  const query = $('#query').val();
69
  const givenFacet = $('#given_facet').val();
70
-
71
  try {
72
  const facetObj = eval('(' + givenFacet + ')');
73
  generateBoxes(facetObj);
@@ -78,10 +92,10 @@
78
 
79
  function generateBoxes(facetObj) {
80
  const $dynamicBoxes = $('#dynamicBoxes').empty();
81
-
82
  Object.entries(facetObj).forEach(([key, values]) => {
83
  const $box = $('<div>').addClass('bg-white rounded-lg shadow-md p-6 fade-in');
84
-
85
  const $title = $('<div>').addClass('flex items-center justify-between mb-4')
86
  .append($('<h2>').addClass('text-xl font-semibold').text(`'${key}'`))
87
  .append($('<input>').attr({
@@ -89,12 +103,12 @@
89
  name: key,
90
  class: 'form-checkbox h-5 w-5 text-blue-600'
91
  }));
92
-
93
  const $content = $('<div>').addClass('space-y-2');
94
  values.forEach(value => {
95
  $content.append($('<p>').addClass('text-gray-600').text(value));
96
  });
97
-
98
  $box.append($title).append($content);
99
  $dynamicBoxes.append($box);
100
  });
@@ -104,11 +118,21 @@
104
  const checkedBoxes = $('input[type="checkbox"]:checked').map(function() {
105
  return `'${this.name}'`;
106
  }).get();
107
-
108
  const result = `[${checkedBoxes.join(', ')}]`;
109
  $('#result').text(result).addClass('fade-in');
 
 
 
 
 
 
 
 
 
110
  });
111
  });
112
  </script>
113
  </body>
 
114
  </html>
 
20
  .sticky-query {
21
  position: sticky;
22
  top: 0;
23
+ z-Coeff: 1;
24
  background-color: white;
25
  padding: 1rem;
26
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
27
  animation: zoomIn 0.5s ease-out;
28
  }
29
+ .fade-in {
30
+ animation: fadeIn 0.5s ease-out;
31
+ @keyframes fadeIn {
32
+ 0% {
33
+ opacity: 0;
34
+ }
35
+ 100% {
36
+ opacity: 1;
37
+ }
38
+ }
39
+ }
40
  </style>
41
  </head>
42
 
43
  <body class="bg-gray-50 min-h-screen font-sans text-gray-800">
44
  <div class="container mx-auto px-4 py-12">
45
+
46
  <!-- Query Input -->
47
  <div class="sticky-query bg-white rounded-lg shadow-lg p-8 mb-12">
48
  <div class="mb-6">
 
59
  </div>
60
  <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>
61
  </div>
62
+
63
  <!-- Section 2: Dynamic Boxes -->
64
  <div id="dynamicBoxes" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"></div>
65
+
66
  <!-- Get List Button -->
67
  <div class="mt-12 text-center">
68
  <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>
69
+ <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>
70
  </div>
71
+
72
  <!-- Result Display -->
73
  <div id="result" class="mt-12 text-center text-2xl font-semibold"></div>
74
  </div>
 
76
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
77
  <script>
78
  $(document).ready(function() {
79
+ let isResultShown = false;
80
+
81
  $('#submit').click(function() {
82
  const query = $('#query').val();
83
  const givenFacet = $('#given_facet').val();
84
+
85
  try {
86
  const facetObj = eval('(' + givenFacet + ')');
87
  generateBoxes(facetObj);
 
92
 
93
  function generateBoxes(facetObj) {
94
  const $dynamicBoxes = $('#dynamicBoxes').empty();
95
+
96
  Object.entries(facetObj).forEach(([key, values]) => {
97
  const $box = $('<div>').addClass('bg-white rounded-lg shadow-md p-6 fade-in');
98
+
99
  const $title = $('<div>').addClass('flex items-center justify-between mb-4')
100
  .append($('<h2>').addClass('text-xl font-semibold').text(`'${key}'`))
101
  .append($('<input>').attr({
 
103
  name: key,
104
  class: 'form-checkbox h-5 w-5 text-blue-600'
105
  }));
106
+
107
  const $content = $('<div>').addClass('space-y-2');
108
  values.forEach(value => {
109
  $content.append($('<p>').addClass('text-gray-600').text(value));
110
  });
111
+
112
  $box.append($title).append($content);
113
  $dynamicBoxes.append($box);
114
  });
 
118
  const checkedBoxes = $('input[type="checkbox"]:checked').map(function() {
119
  return `'${this.name}'`;
120
  }).get();
121
+
122
  const result = `[${checkedBoxes.join(', ')}]`;
123
  $('#result').text(result).addClass('fade-in');
124
+ isResultShown = true;
125
+ });
126
+
127
+ $('#reset').click(function() {
128
+ $('input[type="checkbox"]').prop('checked', false);
129
+ if (isResultShown) {
130
+ $('#result').text('').removeClass('fade-in');
131
+ isResultShown = false;
132
+ }
133
  });
134
  });
135
  </script>
136
  </body>
137
+
138
  </html>