Hugging Face's logo

Spaces:
Detomo
/
Image-uploader
Running

App Files Community
vumichien commited on
Commit
cd441fa
·
1 Parent(s): bdf7061

change view image

Browse files
Files changed (2) hide show
  1. templates/index.html +69 -36
  2. templates/view.html +30 -6
templates/index.html CHANGED
@@ -92,6 +92,9 @@
92
  margin-bottom: 25px;
93
  border-radius: 12px;
94
  overflow: hidden;
 
 
 
95
  }
96
 
97
  .image-card:hover {
@@ -201,7 +204,7 @@
201
  .new-badge {
202
  position: absolute;
203
  top: 15px;
204
- right: 15px;
205
  background-color: var(--success-color);
206
  color: white;
207
  padding: 5px 10px;
@@ -212,6 +215,40 @@
212
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
213
  }
214
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
215
  .layout-controls {
216
  margin-bottom: 15px;
217
  }
@@ -417,24 +454,21 @@
417
  {% if image.is_new %}
418
  <div class="image-item col-md-4">
419
  <div class="card image-card">
420
- <span class="new-badge">NEW</span>
421
- <img src="{{ image.url }}" class="card-img-top image-preview" alt="{{ image.original_filename }}">
422
- <div class="card-body">
423
- <h5 class="card-title text-truncate" title="{{ image.original_filename }}">{{ image.original_filename }}</h5>
424
- <div class="hashtags mb-3">
425
- {% for tag in image.hashtags %}
426
- <a href="/?tag={{ tag }}" class="hashtag">#{{ tag }}</a>
427
- {% endfor %}
428
- </div>
429
- <div class="action-buttons d-flex justify-content-between mt-3">
430
- <a href="/view/{{ image.name }}" class="btn btn-sm btn-primary">
431
- <i class="fas fa-eye me-1"></i> View
432
- </a>
433
- <button class="btn btn-sm btn-danger delete-btn" data-filename="{{ image.name }}">
434
- <i class="fas fa-trash-alt me-1"></i> Delete
435
- </button>
436
  </div>
437
- </div>
438
  </div>
439
  </div>
440
  {% endif %}
@@ -445,23 +479,20 @@
445
  {% if not image.is_new %}
446
  <div class="image-item col-md-4">
447
  <div class="card image-card">
448
- <img src="{{ image.url }}" class="card-img-top image-preview" alt="{{ image.original_filename }}">
449
- <div class="card-body">
450
- <h5 class="card-title text-truncate" title="{{ image.original_filename }}">{{ image.original_filename }}</h5>
451
- <div class="hashtags mb-3">
452
- {% for tag in image.hashtags %}
453
- <a href="/?tag={{ tag }}" class="hashtag">#{{ tag }}</a>
454
- {% endfor %}
455
- </div>
456
- <div class="action-buttons d-flex justify-content-between mt-3">
457
- <a href="/view/{{ image.name }}" class="btn btn-sm btn-primary">
458
- <i class="fas fa-eye me-1"></i> View
459
- </a>
460
- <button class="btn btn-sm btn-danger delete-btn" data-filename="{{ image.name }}">
461
- <i class="fas fa-trash-alt me-1"></i> Delete
462
- </button>
463
  </div>
464
- </div>
465
  </div>
466
  </div>
467
  {% endif %}
@@ -859,9 +890,11 @@
859
  }, 1000);
860
  }
861
 
862
- // Handle delete buttons
863
  document.querySelectorAll('.delete-btn').forEach(function(btn) {
864
- btn.addEventListener('click', function() {
 
 
865
  const filename = this.dataset.filename;
866
 
867
  // Store the filename for later use
 
92
  margin-bottom: 25px;
93
  border-radius: 12px;
94
  overflow: hidden;
95
+ position: relative;
96
+ cursor: pointer;
97
+ transition: all 0.3s ease;
98
  }
99
 
100
  .image-card:hover {
 
204
  .new-badge {
205
  position: absolute;
206
  top: 15px;
207
+ left: 15px;
208
  background-color: var(--success-color);
209
  color: white;
210
  padding: 5px 10px;
 
215
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
216
  }
217
 
218
+ .delete-icon {
219
+ position: absolute;
220
+ top: 15px;
221
+ right: 15px;
222
+ background-color: rgba(255, 255, 255, 0.9);
223
+ color: var(--danger-color);
224
+ border-radius: 50%;
225
+ width: 32px;
226
+ height: 32px;
227
+ display: flex;
228
+ align-items: center;
229
+ justify-content: center;
230
+ z-index: 3;
231
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
232
+ cursor: pointer;
233
+ transition: all 0.2s ease;
234
+ }
235
+
236
+ .delete-icon:hover {
237
+ background-color: var(--danger-color);
238
+ color: white;
239
+ transform: scale(1.1);
240
+ }
241
+
242
+ .card-link {
243
+ color: inherit;
244
+ text-decoration: none;
245
+ }
246
+
247
+ .card-link:hover {
248
+ color: inherit;
249
+ text-decoration: none;
250
+ }
251
+
252
  .layout-controls {
253
  margin-bottom: 15px;
254
  }
 
454
  {% if image.is_new %}
455
  <div class="image-item col-md-4">
456
  <div class="card image-card">
457
+ <a href="/view/{{ image.name }}" class="card-link">
458
+ <span class="new-badge">NEW</span>
459
+ <button class="delete-icon delete-btn" data-filename="{{ image.name }}" title="Delete image">
460
+ <i class="fas fa-trash-alt"></i>
461
+ </button>
462
+ <img src="{{ image.url }}" class="card-img-top image-preview" alt="{{ image.original_filename }}">
463
+ <div class="card-body">
464
+ <h5 class="card-title text-truncate" title="{{ image.original_filename }}">{{ image.original_filename }}</h5>
465
+ <div class="hashtags mb-3">
466
+ {% for tag in image.hashtags %}
467
+ <a href="/?tag={{ tag }}" class="hashtag">#{{ tag }}</a>
468
+ {% endfor %}
469
+ </div>
 
 
 
470
  </div>
471
+ </a>
472
  </div>
473
  </div>
474
  {% endif %}
 
479
  {% if not image.is_new %}
480
  <div class="image-item col-md-4">
481
  <div class="card image-card">
482
+ <a href="/view/{{ image.name }}" class="card-link">
483
+ <button class="delete-icon delete-btn" data-filename="{{ image.name }}" title="Delete image">
484
+ <i class="fas fa-trash-alt"></i>
485
+ </button>
486
+ <img src="{{ image.url }}" class="card-img-top image-preview" alt="{{ image.original_filename }}">
487
+ <div class="card-body">
488
+ <h5 class="card-title text-truncate" title="{{ image.original_filename }}">{{ image.original_filename }}</h5>
489
+ <div class="hashtags mb-3">
490
+ {% for tag in image.hashtags %}
491
+ <a href="/?tag={{ tag }}" class="hashtag">#{{ tag }}</a>
492
+ {% endfor %}
493
+ </div>
 
 
 
494
  </div>
495
+ </a>
496
  </div>
497
  </div>
498
  {% endif %}
 
890
  }, 1000);
891
  }
892
 
893
+ // Handle delete buttons to stop event propagation
894
  document.querySelectorAll('.delete-btn').forEach(function(btn) {
895
+ btn.addEventListener('click', function (e) {
896
+ e.preventDefault();
897
+ e.stopPropagation();
898
  const filename = this.dataset.filename;
899
 
900
  // Store the filename for later use
templates/view.html CHANGED
@@ -17,6 +17,7 @@
17
  --dark-text: #212529;
18
  --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
19
  --hover-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
 
20
  }
21
 
22
  body {
@@ -70,6 +71,7 @@
70
  border-radius: 12px;
71
  margin-bottom: 30px;
72
  box-shadow: var(--card-shadow);
 
73
  }
74
 
75
  .embed-options {
@@ -189,6 +191,31 @@
189
  color: #6c757d;
190
  font-size: 0.9rem;
191
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
192
  </style>
193
  </head>
194
  <body>
@@ -215,6 +242,9 @@
215
  <div class="row">
216
  <div class="col-lg-8">
217
  <div class="image-container">
 
 
 
218
  <img src="{{ image_url }}" class="img-fluid rounded" alt="{{ original_filename }}">
219
  </div>
220
 
@@ -279,12 +309,6 @@
279
  <i class="fas fa-copy me-1"></i>Copy Markdown
280
  </button>
281
  </div>
282
-
283
- <div class="mt-4 text-center">
284
- <button class="btn btn-danger delete-btn" data-filename="{{ file_name }}">
285
- <i class="fas fa-trash-alt me-2"></i>Delete Image
286
- </button>
287
- </div>
288
  </div>
289
  </div>
290
  </div>
 
17
  --dark-text: #212529;
18
  --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
19
  --hover-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
20
+ --danger-color: #e63946;
21
  }
22
 
23
  body {
 
71
  border-radius: 12px;
72
  margin-bottom: 30px;
73
  box-shadow: var(--card-shadow);
74
+ position: relative;
75
  }
76
 
77
  .embed-options {
 
191
  color: #6c757d;
192
  font-size: 0.9rem;
193
  }
194
+
195
+ .delete-icon {
196
+ position: absolute;
197
+ top: 15px;
198
+ right: 15px;
199
+ background-color: rgba(255, 255, 255, 0.9);
200
+ color: var(--danger-color);
201
+ border-radius: 50%;
202
+ width: 40px;
203
+ height: 40px;
204
+ display: flex;
205
+ align-items: center;
206
+ justify-content: center;
207
+ z-index: 3;
208
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
209
+ cursor: pointer;
210
+ transition: all 0.2s ease;
211
+ border: none;
212
+ }
213
+
214
+ .delete-icon:hover {
215
+ background-color: var(--danger-color);
216
+ color: white;
217
+ transform: scale(1.1);
218
+ }
219
  </style>
220
  </head>
221
  <body>
 
242
  <div class="row">
243
  <div class="col-lg-8">
244
  <div class="image-container">
245
+ <button class="delete-icon delete-btn" data-filename="{{ file_name }}" title="Delete image">
246
+ <i class="fas fa-trash-alt"></i>
247
+ </button>
248
  <img src="{{ image_url }}" class="img-fluid rounded" alt="{{ original_filename }}">
249
  </div>
250
 
 
309
  <i class="fas fa-copy me-1"></i>Copy Markdown
310
  </button>
311
  </div>
 
 
 
 
 
 
312
  </div>
313
  </div>
314
  </div>