freddyaboulton HF staff commited on
Commit
630fd8c
1 Parent(s): 67dc267

Modify button + add dark mode

Browse files
Files changed (1) hide show
  1. index.html +20 -14
index.html CHANGED
@@ -32,15 +32,15 @@
32
 
33
  iframe {
34
  display: block;
35
- border: 1px solid transparent;
36
  width: 100%;
37
- height: 500px;
38
  pointer-events: none;
39
  }
40
 
41
  .grid-container {
42
  display: grid;
43
- grid-template-columns: repeat(3, minmax(300px, 1fr));
44
  grid-gap: 10px;
45
  margin-top: 3.5rem;
46
  margin-left: 3.5rem;
@@ -51,6 +51,7 @@
51
  position: relative;
52
  overflow-y: hidden;
53
  border-radius: 10px;
 
54
  }
55
  .grid-item:hover {
56
  filter: brightness(75%);
@@ -83,12 +84,13 @@
83
  sort: "likes",
84
  page: 1,
85
  totalPages: -1,
 
86
  useTestData: false,
87
  buttonClass(attr, filter) {
88
  if (this[attr] === filter) {
89
- return "bg-black dark:bg-white shadow-lg text-white dark:text-black hover:bg-black hover:text-white";
90
  }
91
- return "text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-500 hover:text-gray-800";
92
  },
93
  async switchData() {
94
  this.page = 1;
@@ -97,6 +99,10 @@
97
  this.themes = data.themes;
98
  this.totalPages = data.totalPages;
99
  },
 
 
 
 
100
  async sortThemes(sort) {
101
  this.sort = sort;
102
  this.page = 1;
@@ -127,7 +133,7 @@
127
  async nextPage() {
128
  if (this.page < this.totalPages) {
129
  this.page += 1;
130
- const data = await this.getThemes(this.page, this.filter, this.useTestData);
131
  this.themes = this.themes.concat(data.themes);
132
  this.totalPages = data.totalPages;
133
  }
@@ -137,35 +143,35 @@
137
  </script>
138
  </head>
139
 
140
- <body class="pb-10 pt-5 bg-gray-100 dark:bg-gray-900 relative">
141
  <section
142
  x-data="themesData"
143
  >
144
  <section class="container px-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-14 mx-auto relative">
145
  <div class="col-span-2 lg:col-span-1 flex flex-col gap-14 row-start">
146
- <h1 class="text-lg font-semibold dark:text-white whitespace-nowrap">Gradio Themes Gallery</h1>
147
  </div>
148
  <div class="col-span-2 md:col-span-3 flex items-center gap-14 flex flex-wrap lg-auto lg:ml-auto text-sm">
149
  <div class="flex gap-2">
150
- <span class="md:px-3 py-1 dark:text-white text-gray-400">sort by</span>
151
  <button
152
  :class="buttonClass('sort', 'likes')"
153
- class="text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-500 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
154
  @click="sortThemes('likes')"
155
  >
156
  Most Likes
157
  </button>
158
  <button
159
  :class="buttonClass('sort', 'recent')"
160
- class="text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-500 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
161
  @click="sortThemes('recent')"
162
  >
163
  Recent
164
  </button>
165
  </div>
166
  <div class="flex gap-0">
167
- <input type="checkbox" @click="switchData()" class="rounded">
168
- <span class="md:px-3 py-1 dark:text-white text-gray-400 ml-0">Use Test Data</span>
 
 
169
  <!-- <button
170
  :class="buttonClass('useTestData', false)"
171
  class="px-2 md:px-3 py-1 rounded-full"
@@ -179,7 +185,7 @@
179
  <div class="grid-container">
180
  <template x-for="theme in themes" :key="theme.id">
181
  <div class="grid-item">
182
- <iframe :src="`${theme.subdomain}?_=${new Date().getTime()}`" :alt="theme.id" scrolling="no" frameborder="0"></iframe>
183
  <a :href="`https://huggingface.co/spaces/${theme.id}`" target="_blank"></a>
184
  </div>
185
  </template>
 
32
 
33
  iframe {
34
  display: block;
35
+ border: none;
36
  width: 100%;
37
+ height: 600px;
38
  pointer-events: none;
39
  }
40
 
41
  .grid-container {
42
  display: grid;
43
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
44
  grid-gap: 10px;
45
  margin-top: 3.5rem;
46
  margin-left: 3.5rem;
 
51
  position: relative;
52
  overflow-y: hidden;
53
  border-radius: 10px;
54
+ border: 1px solid rgb(55 65 81);
55
  }
56
  .grid-item:hover {
57
  filter: brightness(75%);
 
84
  sort: "likes",
85
  page: 1,
86
  totalPages: -1,
87
+ mode: "light",
88
  useTestData: false,
89
  buttonClass(attr, filter) {
90
  if (this[attr] === filter) {
91
+ return "text-orange-600 bg-gradient-to-br from-orange-300 to-orange-100 px-2 md:px-3 py-1 rounded-full";
92
  }
93
+ return "text-gray-800 hover:to-orange-300/100 hover:text-orange-600 dark:hover:bg-white";
94
  },
95
  async switchData() {
96
  this.page = 1;
 
99
  this.themes = data.themes;
100
  this.totalPages = data.totalPages;
101
  },
102
+ async switchTheme() {
103
+ this.mode = this.mode === "light" ? "dark": "light";
104
+ console.log(this.mode);
105
+ },
106
  async sortThemes(sort) {
107
  this.sort = sort;
108
  this.page = 1;
 
133
  async nextPage() {
134
  if (this.page < this.totalPages) {
135
  this.page += 1;
136
+ const data = await this.getThemes(this.page, this.sort, this.useTestData);
137
  this.themes = this.themes.concat(data.themes);
138
  this.totalPages = data.totalPages;
139
  }
 
143
  </script>
144
  </head>
145
 
146
+ <body class="pb-10 pt-5 bg-white dark:bg-gray-950 relative">
147
  <section
148
  x-data="themesData"
149
  >
150
  <section class="container px-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-14 mx-auto relative">
151
  <div class="col-span-2 lg:col-span-1 flex flex-col gap-14 row-start">
152
+ <h1 class="text-lg font-semibold text-gray-800 whitespace-nowrap">Gradio Themes Gallery</h1>
153
  </div>
154
  <div class="col-span-2 md:col-span-3 flex items-center gap-14 flex flex-wrap lg-auto lg:ml-auto text-sm">
155
  <div class="flex gap-2">
156
+ <span class="md:px-3 py-1 text-gray-800">sort by</span>
157
  <button
158
  :class="buttonClass('sort', 'likes')"
 
159
  @click="sortThemes('likes')"
160
  >
161
  Most Likes
162
  </button>
163
  <button
164
  :class="buttonClass('sort', 'recent')"
 
165
  @click="sortThemes('recent')"
166
  >
167
  Recent
168
  </button>
169
  </div>
170
  <div class="flex gap-0">
171
+ <input type="checkbox" @click="switchData()" class="rounded accent-orange-300">
172
+ <span class="md:px-3 py-1 text-gray-800 ml-0">Use Test Data</span>
173
+ <input type="checkbox" @click="switchTheme()" class="rounded accent-orange-300">
174
+ <span class="md:px-3 py-1 text-gray-800 ml-0">Show Dark Mode</span>
175
  <!-- <button
176
  :class="buttonClass('useTestData', false)"
177
  class="px-2 md:px-3 py-1 rounded-full"
 
185
  <div class="grid-container">
186
  <template x-for="theme in themes" :key="theme.id">
187
  <div class="grid-item">
188
+ <iframe :src="`${theme.subdomain}?_=${new Date().getTime()}&__theme=${mode}`" :alt="theme.id" scrolling="no" frameborder="0"></iframe>
189
  <a :href="`https://huggingface.co/spaces/${theme.id}`" target="_blank"></a>
190
  </div>
191
  </template>