Geek7 commited on
Commit
192e941
·
verified ·
1 Parent(s): 99ddc7c

Delete index.html

Browse files
Files changed (1) hide show
  1. index.html +0 -483
index.html DELETED
@@ -1,483 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Image Background Remover</title>
7
- <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
8
- <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
9
- <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
10
- <script src="https://geek7-ht.static.hf.space" crossorigin="anonymous"></script>
11
- <style>
12
- body {
13
- font-family: 'Playfair Display';
14
- text-align:center;
15
- background-color: #f0f0f0;
16
- }
17
-
18
- @font-face {
19
- font-family: 'CustomFont';
20
- src: url('coldnightforalligators.ttf') format('truetype');
21
- }
22
-
23
- /* Wrapper for text */
24
-
25
- #text {
26
- position: absolute;
27
- top: 150px;
28
- transform: translateY(-50%);
29
- font-size: 2rem;
30
- z-index: 1; /* Keep text on top */
31
- white-space: nowrap;
32
- /*display: flex; /* Treat each letter as an item */
33
- font-family: 'CustomFont', Arial, sans-serif;
34
- /*text-align: center;*/
35
- margin: 0 auto;
36
- }
37
-
38
- /* Individual letter styling */
39
- .letter {
40
- transition: opacity 0.3s ease-out; /* Smooth fade-out effect */
41
- }
42
-
43
- /* Sliding image */
44
- .slide-image {
45
- position: absolute;
46
- top: 150px;
47
- right: -100%; /* Start off-screen */
48
- transform: translateY(-50%);
49
- animation: slide 45s linear infinite; /* Infinite loop */
50
-
51
- }
52
-
53
- @keyframes slide {
54
- 0% {
55
- right: -60%;
56
- }
57
- 50% {
58
- right: 50%; /* Image in the center */
59
- }
60
- 100% {
61
- right: 100%; /* Image moves off-screen to the left */
62
- }
63
- }
64
-
65
-
66
- /* Day Mode Styles */
67
- .day-mode {
68
- background-color: #f0f0f0;
69
- color: black;
70
- }
71
-
72
- /* Night Mode Styles */
73
- .night-mode {
74
- background-color: #2e2e2e;
75
- color: white;
76
- }
77
-
78
- /* Night Mode button */
79
- .night-mode-btn {
80
- position: fixed;
81
- top: 0px;
82
- right: 0px;
83
- background: linear-gradient(45deg, #ff7a7a, #ff1f5a);
84
- color: white;
85
- border: none;
86
- padding: 10px 20px;
87
- font-size: 16px;
88
- cursor: pointer;
89
- border-radius: 5px;
90
- z-index: 200;
91
- }
92
-
93
- .night-mode-btn:hover {
94
- background-color: #ff0044;
95
- }
96
- .container {
97
- max-width: 1000px;
98
- margin: 0 auto;
99
- }
100
-
101
- input[type="file"] {
102
- display: block;
103
- margin: 20px auto;
104
- }
105
-
106
- button {
107
-
108
-
109
- color: white;
110
- padding: 10px 20px;
111
- font-size: 16px;
112
- cursor: pointer;
113
- border-radius: 5px;
114
- margin: 10px;
115
- }
116
-
117
- button:hover {
118
- background-color: #45a049;
119
- }
120
-
121
- #processing, #success {
122
- display: none;
123
- margin: auto;
124
- }
125
-
126
- .grid-container {
127
- display: grid;
128
- grid-template-columns: repeat(3, 1fr);
129
- gap: 20px;
130
- margin-top: 20px;
131
- padding: 10px;
132
- }
133
-
134
- .grid-item {
135
- position: relative;
136
- background: white;
137
- border-radius: 10px;
138
- overflow: hidden;
139
- box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1);
140
- transition: box-shadow 0.3s ease;
141
- }
142
-
143
- .grid-item img {
144
- width: 100%;
145
- height: auto;
146
- cursor: pointer;
147
- }
148
-
149
- .zoom-overlay {
150
- position: fixed;
151
- top: 0;
152
- left: 0;
153
- width: 100vw;
154
- height: 100vh;
155
- display: flex;
156
- justify-content: center;
157
- align-items: center;
158
- background-color: rgba(0, 0, 0, 0.7);
159
- z-index: 300;
160
- display: none;
161
- }
162
-
163
- .zoom-overlay img {
164
- max-height: 90%;
165
- max-width: 90%;
166
- transition: transform 0.3s ease;
167
- }
168
-
169
- .download-icon {
170
- position: absolute;
171
- top: 10px;
172
- right: 10px;
173
- background: rgba(255, 255, 255, 0.8);
174
- border-radius: 50%;
175
- padding: 10px;
176
- cursor: pointer;
177
- z-index: 400;
178
- transition: background 0.3s ease;
179
- }
180
-
181
- .download-icon:hover {
182
- background: rgba(255, 255, 255, 1);
183
- }
184
- </style>
185
- </head>
186
- <body>
187
- <button class="night-mode-btn" onclick="toggleDayNightMode()" style="position:sticky;top:0px;right:0px;">Switch to Night Mode</button>
188
- <div class="container">
189
-
190
- <br>
191
- <br>
192
- <br>
193
- <br>
194
-
195
- <div id="text">
196
- <div>
197
-
198
- <span class="letter">I</span>
199
- <span class="letter">m</span>
200
- <span class="letter">a</span>
201
- <span class="letter">g</span>
202
- <span class="letter">e</span>
203
- <span>&nbsp;</span>
204
-
205
- <span class="letter">B</span>
206
- <span class="letter">a</span>
207
- <span class="letter">c</span>
208
- <span class="letter">k</span>
209
- <span class="letter">g</span>
210
- <span class="letter">r</span>
211
- <span class="letter">o</span>
212
- <span class="letter">u</span>
213
- <span class="letter">n</span>
214
- <span class="letter">d</span>
215
-
216
- </div>
217
- <!-- Each letter as a span -->
218
- <br>
219
-
220
- <div>
221
-
222
- <span class="letter">R</span>
223
- <span class="letter">e</span>
224
- <span class="letter">m</span>
225
- <span class="letter">o</span>
226
- <span class="letter">v</span>
227
- <span class="letter">e</span>
228
- <span class="letter">r</span>
229
-
230
- </div>
231
-
232
-
233
- </div>
234
-
235
- <!-- Sliding image -->
236
- <img src="logo.gif" alt="Sliding Image" class="slide-image" style="width:200px;height:200px;">
237
- <br>
238
- <br>
239
- <br>
240
- <br>
241
- <br>
242
- <br>
243
- <br>
244
- <br>
245
-
246
- <form id="bg-remove-form">
247
- <label for="image" style="font-size:1.5rem;">Choose an image to remove background:</label>
248
- <input type="file" id="image" name="image" accept="image/*" required style="font-size:1.1rem;">
249
- <button type="submit" style="background: linear-gradient(45deg,
250
- #fbd3e9,
251
- #bb377d);border: 2px solid #FF7171;">Remove Background</button>
252
- </form>
253
- <br>
254
- <br>
255
- <br>
256
- <br>
257
-
258
- <button id="download-all" style="display: none;position:sticky;right:5px;background: linear-gradient(45deg,
259
- #c9ffbf,
260
- #ffafbd);border: 2px solid #90EE90;">Download All as ZIP</button>
261
-
262
- <!-- Processing GIF -->
263
- <div id="processing" class="zoom-overlay">
264
- <p style="color:orange;">Processing... Please wait</p>
265
- <img src="erasing.gif" alt="Processing GIF">
266
- </div>
267
-
268
- <!-- Success GIF -->
269
- <div id="success" class="zoom-overlay" style="color:orange;">
270
- <p>Success!</p>
271
- <img src="rbg.gif" alt="Success GIF">
272
-
273
- </div>
274
- <br>
275
- <br>
276
- <br>
277
- <br>
278
-
279
- <!-- Grid for Processed Images -->
280
- <div class="grid-container" id="grid-container">
281
- <!-- Processed images will appear here -->
282
- </div>
283
- </div>
284
-
285
- <!-- Zoom Overlay -->
286
- <div class="zoom-overlay" id="zoom-overlay">
287
- <a id="download-link" download>
288
- <div class="download-icon">⬇️</div>
289
- </a>
290
- <img src="" alt="Zoomed Image" id="zoom-image">
291
- </div>
292
- <script>
293
-
294
- const letters = Array.from(document.querySelectorAll('.letter')).reverse(); // Reverse letter order
295
- const imageElement = document.querySelector('.slide-image');
296
- const fadeOutDuration = 25 * 1000; // 25 seconds (matches the animation duration)
297
- const baseDelay = 1000; // Base delay between each letter fade (in ms)
298
-
299
- // Function to fade out letters sequentially
300
- function fadeOutLetters() {
301
- letters.forEach((letter, index) => {
302
- setTimeout(() => {
303
- letter.style.opacity = 0; // Fade out letter
304
- }, baseDelay * index);
305
- });
306
- }
307
-
308
- // Function to reset letters to visible
309
- function resetLetters() {
310
- letters.forEach((letter) => {
311
- letter.style.opacity = 1; // Reset opacity to fully visible
312
- });
313
- }
314
-
315
- // Handle animation iteration
316
- imageElement.addEventListener('animationiteration', () => {
317
- resetLetters(); // Ensure letters are visible for the next iteration
318
- setTimeout(fadeOutLetters, 1000); // Start fading after a brief delay
319
- });
320
-
321
- // Start the initial fade-out
322
- setTimeout(fadeOutLetters, 1000);
323
- </script>
324
-
325
- <script>
326
- function toggleDayNightMode() {
327
- const body = document.body;
328
- const button = document.querySelector('.night-mode-btn');
329
-
330
- if (body.classList.contains('day-mode')) {
331
- body.classList.remove('day-mode');
332
- body.classList.add('night-mode');
333
- button.textContent = "Switch to Day Mode";
334
- } else {
335
- body.classList.remove('night-mode');
336
- body.classList.add('day-mode');
337
- button.textContent = "Switch to Night Mode";
338
- }
339
- }
340
- document.getElementById('bg-remove-form').addEventListener('submit', async function (event) {
341
- event.preventDefault();
342
-
343
- const imageInput = document.getElementById('image');
344
- const processingDiv = document.getElementById('processing');
345
- const successDiv = document.getElementById('success');
346
- const gridContainer = document.getElementById('grid-container');
347
- const zoomOverlay = document.getElementById('zoom-overlay');
348
- const zoomImage = document.getElementById('zoom-image');
349
- const downloadAllBtn = document.getElementById('download-all');
350
-
351
- if (!imageInput.files.length) {
352
- alert("Please select an image file.");
353
- return;
354
- }
355
-
356
- // Show processing GIF
357
- processingDiv.style.display = 'block';
358
- successDiv.style.display = 'none';
359
-
360
- const formData = new FormData();
361
- formData.append('image', imageInput.files[0]);
362
-
363
- try {
364
- const response = await fetch('https://geek7-flk.hf.space/remove_background', {
365
- method: 'POST',
366
- body: formData,
367
- });
368
-
369
- if (!response.ok) {
370
- const errorData = await response.json();
371
- alert(`Error: ${errorData.error}`);
372
- return;
373
- }
374
-
375
- const blob = await response.blob();
376
- const imageUrl = URL.createObjectURL(blob);
377
-
378
- // Hide processing and show success GIF
379
- processingDiv.style.display = 'none';
380
- successDiv.style.display = 'block';
381
-
382
- // Add zoom functionality to Success GIF
383
- const successImage = successDiv.querySelector('img');
384
- successImage.addEventListener('click', () => {
385
- zoomOverlay.style.display = 'flex';
386
- zoomImage.src = successImage.src;
387
-
388
- // Update download link for the success image
389
- const downloadLink = document.getElementById('download-link');
390
- downloadLink.href = successImage.src;
391
- });
392
-
393
- // After 3 seconds, add image to grid
394
- setTimeout(() => {
395
- successDiv.style.display = 'none';
396
-
397
- const gridItem = document.createElement('div');
398
- gridItem.className = 'grid-item';
399
-
400
- const imgElement = document.createElement('img');
401
- imgElement.src = imageUrl;
402
- imgElement.alt = 'Processed Image';
403
-
404
- // Add zoom functionality to the processed image
405
- imgElement.addEventListener('click', function () {
406
- zoomOverlay.style.display = 'flex';
407
- zoomImage.src = imgElement.src;
408
-
409
- // Update download link for the processed image
410
- const downloadLink = document.getElementById('download-link');
411
- downloadLink.href = imgElement.src;
412
- });
413
-
414
- gridItem.appendChild(imgElement);
415
- gridContainer.prepend(gridItem);
416
-
417
- // Show the download all button if not visible
418
- downloadAllBtn.style.display = 'block';
419
-
420
- }, 3000);
421
-
422
- } catch (error) {
423
- console.error('Error:', error);
424
- alert("An error occurred while processing the image.");
425
- } finally {
426
- processingDiv.style.display = 'none';
427
- }
428
- });
429
-
430
- // Add zoom functionality to Processing GIF
431
- document.querySelector('#processing img').addEventListener('click', function () {
432
- zoomOverlay.style.display = 'flex';
433
- zoomImage.src = this.src;
434
-
435
- // Update download link for the processing image
436
- const downloadLink = document.getElementById('download-link');
437
- downloadLink.href = this.src;
438
- });
439
-
440
- // Close zoom overlay on clicking outside the zoomed image
441
- document.getElementById('zoom-overlay').addEventListener('click', function (e) {
442
- if (e.target === this) {
443
- this.style.display = 'none';
444
- }
445
- });
446
-
447
- // Download all images as a ZIP
448
- document.getElementById('download-all').addEventListener('click', async function () {
449
- const gridImages = document.querySelectorAll('.grid-item img');
450
- if (gridImages.length === 0) {
451
- alert("No images to download.");
452
- return;
453
- }
454
-
455
- const zip = new JSZip();
456
- const imgFolder = zip.folder("images");
457
-
458
- let count = 0;
459
- gridImages.forEach((img, index) => {
460
- fetch(img.src)
461
- .then(response => response.blob())
462
- .then(blob => {
463
- const reader = new FileReader();
464
- reader.onload = function () {
465
- imgFolder.file(`image_${index + 1}.png`, reader.result.split(",")[1], { base64: true });
466
- count++;
467
-
468
- // Generate and download the ZIP file when all images are added
469
- if (count === gridImages.length) {
470
- zip.generateAsync({ type: "blob" })
471
- .then(content => {
472
- saveAs(content, "processed_images.zip");
473
- });
474
- }
475
- };
476
- reader.readAsDataURL(blob);
477
- })
478
- .catch(err => console.error(`Error fetching image ${index + 1}:`, err));
479
- });
480
- });
481
- </script>
482
- </body>
483
- </html>