Geek7 commited on
Commit
dfc6f1d
·
verified ·
1 Parent(s): 6a6b285

Create index.html

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