Hugging Face's logo

Spaces:
huggingface-projects
/
wordalle
Runtime error

App Files Community
14
radames commited on
Commit
abb38db
·
1 Parent(s): 668ae21

better header

Browse files
Files changed (3) hide show
  1. frontend/src/app.html +1 -1
  2. frontend/src/lib/Result.svelte +4 -3
  3. frontend/src/routes/index.svelte +13 -8
frontend/src/app.html CHANGED
@@ -7,7 +7,7 @@
7
  <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
8
  %sveltekit.head%
9
  </head>
10
- <body class="dark:bg-slate-900 bg-white">
11
  <div>%sveltekit.body%</div>
12
  </body>
13
  </html>
 
7
  <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
8
  %sveltekit.head%
9
  </head>
10
+ <body class="dark:bg-slate-900 bg-white dark:text-white text-black">
11
  <div>%sveltekit.body%</div>
12
  </body>
13
  </html>
frontend/src/lib/Result.svelte CHANGED
@@ -20,7 +20,8 @@
20
  try {
21
  await navigator.clipboard.write([
22
  new ClipboardItem({
23
- 'image/png': domtoimage.toBlob(node, {bgcolor: "#000"})})
 
24
  ]);
25
  copyState = true;
26
  setTimeout(() => (copyState = false), 1000);
@@ -49,8 +50,8 @@
49
  {/each}
50
  </div>
51
  <svg
52
- class="w-full"
53
- viewBox="0 0 {board[0].length * (p + s)} {board.length * (p + s)}"
54
  xmlns="http://www.w3.org/2000/svg"
55
  >
56
  {#each board as row, y}
 
20
  try {
21
  await navigator.clipboard.write([
22
  new ClipboardItem({
23
+ 'image/png': domtoimage.toBlob(node, { bgcolor: '#000' })
24
+ })
25
  ]);
26
  copyState = true;
27
  setTimeout(() => (copyState = false), 1000);
 
50
  {/each}
51
  </div>
52
  <svg
53
+ class="w-full p-3"
54
+ viewBox="0 0 {board[0].length * (p + s) - p} {board.length * (p + s) - p}"
55
  xmlns="http://www.w3.org/2000/svg"
56
  >
57
  {#each board as row, y}
frontend/src/routes/index.svelte CHANGED
@@ -43,7 +43,7 @@
43
  cols = randomPrompt.length;
44
  timePerTile = totalTime / cols;
45
 
46
- board = Array.from({ length: 6 }, () =>
47
  Array.from(answer).map((l) => ({
48
  letter: '',
49
  correct: l,
@@ -171,8 +171,13 @@
171
  {/if}
172
  </div> -->
173
  <!-- {/if} -->
174
- <header>
175
- <h1 class="text-3xl font-bold text-center">WORDALLE</h1>
 
 
 
 
 
176
  </header>
177
  <div class="grid grid-cols-3 gap-2 max-w-md mx-auto p-3">
178
  {#each imagePaths as image}
@@ -213,8 +218,8 @@
213
 
214
  <style lang="postcss">
215
  .board {
216
- @apply grid gap-1.5 grid-rows-6 mx-0 my-auto;
217
- --height: min(200px, calc(var(--vh, 100vh) - 310px));
218
  height: var(--height);
219
  }
220
  .row {
@@ -224,7 +229,7 @@
224
 
225
  .tile {
226
  @apply w-full text-base text-center font-bold
227
- uppercase select-none relative bg-gray-50;
228
  vertical-align: middle;
229
  }
230
 
@@ -240,10 +245,10 @@
240
  -webkit-backface-visibility: hidden;
241
  }
242
  .tile .letter {
243
- @apply bg-gray-50 w-full z-10;
244
  }
245
  .tile .space::before {
246
- @apply absolute z-0 flex place-content-center text-black opacity-50;
247
  content: '•';
248
  }
249
 
 
43
  cols = randomPrompt.length;
44
  timePerTile = totalTime / cols;
45
 
46
+ board = Array.from({ length: 7 }, () =>
47
  Array.from(answer).map((l) => ({
48
  letter: '',
49
  correct: l,
 
171
  {/if}
172
  </div> -->
173
  <!-- {/if} -->
174
+ <header class="flex justify-between items-center uppercase sm:px-2 text-center">
175
+ <span class="font-light flex-1 text-xs sm:text-base"> Guess the prompt!</span>
176
+ <span class="sm:block hidden mx-3 flex-1 border-[0.5px] border-opacity-50 border-gray-400"></span>
177
+ <h1 class="text-xl font-bold text-center">🥑 WORDALLE 🥑</h1>
178
+ <span class="sm:block hidden mx-3 flex-1 border-[0.5px] border-opacity-50 border-gray-400"></span>
179
+ <span class="font-light underline underline-offset-2 flex-1 text-xs sm:text-base">Skip to next</span>
180
+
181
  </header>
182
  <div class="grid grid-cols-3 gap-2 max-w-md mx-auto p-3">
183
  {#each imagePaths as image}
 
218
 
219
  <style lang="postcss">
220
  .board {
221
+ @apply grid gap-1.5 grid-rows-[7] mx-0 my-auto;
222
+ --height: min(150px, calc(var(--vh, 100vh) - 310px));
223
  height: var(--height);
224
  }
225
  .row {
 
229
 
230
  .tile {
231
  @apply w-full text-base text-center font-bold
232
+ uppercase select-none relative bg-gray-50 text-black;
233
  vertical-align: middle;
234
  }
235
 
 
245
  -webkit-backface-visibility: hidden;
246
  }
247
  .tile .letter {
248
+ @apply flex place-items-center h-full bg-gray-50 z-10;
249
  }
250
  .tile .space::before {
251
+ @apply absolute z-0 flex place-items-center text-black opacity-50;
252
  content: '•';
253
  }
254