Hugging Face's logo

Spaces:
PierreH
/
star
Running

App Files Community
PierreH commited on
Commit
ce4df87
·
verified ·
1 Parent(s): cb3e03a

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +77 -6
index.html CHANGED
@@ -14,6 +14,7 @@
14
  aspect-ratio: 1/1;
15
  border-radius: 50%;
16
  overflow: visible;
 
17
  }
18
 
19
  .circle {
@@ -89,6 +90,26 @@
89
  .action-btn:active {
90
  transform: translateY(1px);
91
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
92
  </style>
93
  </head>
94
  <body class="bg-gray-50 min-h-screen flex flex-col items-center justify-center p-4">
@@ -127,6 +148,10 @@
127
  Ajouter
128
  </button>
129
 
 
 
 
 
130
  <button onclick="saveAsImage()" class="action-btn bg-purple-500 text-white py-2 rounded-lg hover:bg-purple-600">
131
  Enregistrer (Image)
132
  </button>
@@ -198,6 +223,16 @@
198
  startDrag(e, label, index);
199
  });
200
 
 
 
 
 
 
 
 
 
 
 
201
  if (index === selectedKeywordIndex) {
202
  label.classList.add('selected');
203
  }
@@ -228,6 +263,12 @@
228
  }
229
 
230
  function startDrag(e, label, index) {
 
 
 
 
 
 
231
  isDragging = true;
232
  draggedLabel = label;
233
  draggedIndex = index;
@@ -241,6 +282,8 @@
241
 
242
  document.addEventListener('mousemove', drag);
243
  document.addEventListener('mouseup', stopDrag);
 
 
244
 
245
  e.preventDefault();
246
  }
@@ -269,6 +312,17 @@
269
  drawLines();
270
  }
271
 
 
 
 
 
 
 
 
 
 
 
 
272
  function stopDrag() {
273
  isDragging = false;
274
  draggedLabel = null;
@@ -276,6 +330,8 @@
276
 
277
  document.removeEventListener('mousemove', drag);
278
  document.removeEventListener('mouseup', stopDrag);
 
 
279
  }
280
 
281
  function selectKeyword(index) {
@@ -293,6 +349,16 @@
293
  }
294
  }
295
 
 
 
 
 
 
 
 
 
 
 
296
  function resizeCanvas() {
297
  const container = document.getElementById('target-container');
298
  canvas.width = container.offsetWidth;
@@ -361,8 +427,7 @@
361
  function deleteKeyword() {
362
  if (selectedKeywordIndex !== null) {
363
  keywords.splice(selectedKeywordIndex, 1);
364
- selectedKeywordIndex = null;
365
- document.getElementById('editKeyword').value = '';
366
  renderKeywords();
367
  }
368
  }
@@ -372,6 +437,7 @@
372
  word.x = null;
373
  word.y = null;
374
  });
 
375
  renderKeywords();
376
  }
377
 
@@ -475,10 +541,15 @@
475
  // Initialize
476
  document.addEventListener('DOMContentLoaded', () => {
477
  renderKeywords();
478
- });
479
-
480
- window.addEventListener('resize', () => {
481
- renderKeywords();
 
 
 
 
 
482
  });
483
  </script>
484
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=PierreH/star" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
14
  aspect-ratio: 1/1;
15
  border-radius: 50%;
16
  overflow: visible;
17
+ touch-action: none;
18
  }
19
 
20
  .circle {
 
90
  .action-btn:active {
91
  transform: translateY(1px);
92
  }
93
+
94
+ @media (max-width: 640px) {
95
+ .label {
96
+ font-size: 0.65rem;
97
+ padding: 0.15rem 0.3rem;
98
+ }
99
+
100
+ .note-input {
101
+ font-size: 0.75rem;
102
+ }
103
+
104
+ .grid-cols-2 {
105
+ grid-template-columns: 1fr;
106
+ }
107
+
108
+ .action-btn {
109
+ padding: 0.5rem;
110
+ font-size: 0.8rem;
111
+ }
112
+ }
113
  </style>
114
  </head>
115
  <body class="bg-gray-50 min-h-screen flex flex-col items-center justify-center p-4">
 
148
  Ajouter
149
  </button>
150
 
151
+ <button onclick="deselectKeyword()" class="action-btn bg-yellow-500 text-white py-2 rounded-lg hover:bg-yellow-600">
152
+ Désélectionner
153
+ </button>
154
+
155
  <button onclick="saveAsImage()" class="action-btn bg-purple-500 text-white py-2 rounded-lg hover:bg-purple-600">
156
  Enregistrer (Image)
157
  </button>
 
223
  startDrag(e, label, index);
224
  });
225
 
226
+ label.addEventListener('touchstart', (e) => {
227
+ e.preventDefault();
228
+ const touch = e.touches[0];
229
+ const mouseEvent = new MouseEvent('mousedown', {
230
+ clientX: touch.clientX,
231
+ clientY: touch.clientY
232
+ });
233
+ label.dispatchEvent(mouseEvent);
234
+ }, { passive: false });
235
+
236
  if (index === selectedKeywordIndex) {
237
  label.classList.add('selected');
238
  }
 
263
  }
264
 
265
  function startDrag(e, label, index) {
266
+ // Toggle selection if clicking on same label
267
+ if (selectedKeywordIndex === index) {
268
+ deselectKeyword();
269
+ return;
270
+ }
271
+
272
  isDragging = true;
273
  draggedLabel = label;
274
  draggedIndex = index;
 
282
 
283
  document.addEventListener('mousemove', drag);
284
  document.addEventListener('mouseup', stopDrag);
285
+ document.addEventListener('touchmove', touchDrag, { passive: false });
286
+ document.addEventListener('touchend', stopDrag);
287
 
288
  e.preventDefault();
289
  }
 
312
  drawLines();
313
  }
314
 
315
+ function touchDrag(e) {
316
+ if (!isDragging || !draggedLabel) return;
317
+
318
+ const touch = e.touches[0];
319
+ const mouseEvent = new MouseEvent('mousemove', {
320
+ clientX: touch.clientX,
321
+ clientY: touch.clientY
322
+ });
323
+ drag(mouseEvent);
324
+ }
325
+
326
  function stopDrag() {
327
  isDragging = false;
328
  draggedLabel = null;
 
330
 
331
  document.removeEventListener('mousemove', drag);
332
  document.removeEventListener('mouseup', stopDrag);
333
+ document.removeEventListener('touchmove', touchDrag);
334
+ document.removeEventListener('touchend', stopDrag);
335
  }
336
 
337
  function selectKeyword(index) {
 
349
  }
350
  }
351
 
352
+ function deselectKeyword() {
353
+ selectedKeywordIndex = null;
354
+ document.getElementById('editKeyword').value = '';
355
+
356
+ // Update UI
357
+ document.querySelectorAll('.label').forEach(label => {
358
+ label.classList.remove('selected');
359
+ });
360
+ }
361
+
362
  function resizeCanvas() {
363
  const container = document.getElementById('target-container');
364
  canvas.width = container.offsetWidth;
 
427
  function deleteKeyword() {
428
  if (selectedKeywordIndex !== null) {
429
  keywords.splice(selectedKeywordIndex, 1);
430
+ deselectKeyword();
 
431
  renderKeywords();
432
  }
433
  }
 
437
  word.x = null;
438
  word.y = null;
439
  });
440
+ deselectKeyword();
441
  renderKeywords();
442
  }
443
 
 
541
  // Initialize
542
  document.addEventListener('DOMContentLoaded', () => {
543
  renderKeywords();
544
+
545
+ // Handle window resize with debounce
546
+ let resizeTimer;
547
+ window.addEventListener('resize', () => {
548
+ clearTimeout(resizeTimer);
549
+ resizeTimer = setTimeout(() => {
550
+ renderKeywords();
551
+ }, 200);
552
+ });
553
  });
554
  </script>
555
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=PierreH/star" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>