Hugging Face's logo

Spaces:
SaitBurak
/
wedding-image-uploader-v1
Running

App Files Community
SaitBurak commited on
Commit
706bcad
·
verified ·
1 Parent(s): 14d86e4

On selected files preview I cannot see all of them just the last selected file is shown - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +345 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Wedding Image Uploader V1
3
- emoji: 👁
4
- colorFrom: purple
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: wedding-image-uploader-v1
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,345 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>DUgunumuz icin ani birakma platformu</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600&display=swap');
11
+
12
+ body {
13
+ font-family: 'Montserrat', sans-serif;
14
+ background-color: #faf7f2;
15
+ color: #333;
16
+ }
17
+
18
+ .heading-font {
19
+ font-family: 'Playfair Display', serif;
20
+ }
21
+
22
+ .hero-pattern {
23
+ background-image: radial-gradient(#f3e8e8 1px, transparent 1px);
24
+ background-size: 20px 20px;
25
+ }
26
+
27
+ .upload-area {
28
+ border: 2px dashed #d1a6a6;
29
+ transition: all 0.3s ease;
30
+ }
31
+
32
+ .upload-area:hover {
33
+ border-color: #b5838d;
34
+ background-color: rgba(245, 235, 235, 0.5);
35
+ }
36
+
37
+ .gallery-item {
38
+ transition: transform 0.3s ease;
39
+ }
40
+
41
+ .gallery-item:hover {
42
+ transform: scale(1.03);
43
+ }
44
+
45
+ /* Animation for hearts */
46
+ @keyframes float {
47
+ 0% { transform: translateY(0px); }
48
+ 50% { transform: translateY(-10px); }
49
+ 100% { transform: translateY(0px); }
50
+ }
51
+
52
+ .floating-heart {
53
+ animation: float 3s ease-in-out infinite;
54
+ }
55
+
56
+ .delay-1 { animation-delay: 0.5s; }
57
+ .delay-2 { animation-delay: 1s; }
58
+ .delay-3 { animation-delay: 1.5s; }
59
+ </style>
60
+ </head>
61
+ <body class="min-h-screen">
62
+ <!-- Floating decorative hearts -->
63
+
64
+ <!-- Main content -->
65
+ <div class="relative z-10">
66
+ <!-- Hero Section -->
67
+ <header class="hero-pattern py-20 px-4 text-center">
68
+ <div class="max-w-4xl mx-auto">
69
+ <h1 class="heading-font text-4xl md:text-6xl font-bold text-pink-700 mb-4">DUgunumuz icin ani birakma platformu</h1>
70
+ <p class="text-xl md:text-2xl text-pink-600 mb-8"></p>
71
+ </div>
72
+ </header>
73
+
74
+
75
+
76
+ <!-- Share Section -->
77
+ <section id="share" class="py-16 px-4 max-w-4xl mx-auto">
78
+ <h2 class="heading-font text-3xl md:text-4xl font-bold text-center text-pink-700 mb-12">DUgunumuz icin ani birakma platformu</h2>
79
+ <p class="text-center text-gray-700 mb-8 max-w-2xl mx-auto">DUgunumuz icin ani birakma platformu</p>
80
+
81
+ <div class="bg-white p-6 rounded-lg shadow-sm">
82
+ <div id="upload-container" class="upload-area p-8 rounded-lg text-center cursor-pointer mb-6">
83
+ <div class="text-pink-500 text-5xl mb-4">
84
+ <i class="fas fa-cloud-upload-alt"></i>
85
+ </div>
86
+ <h3 class="text-xl font-medium text-gray-800 mb-2">Upload Photos or Videos</h3>
87
+ <p class="text-gray-600 mb-4">Drag and drop files here or click to browse</p>
88
+ <input type="file" id="file-input" class="hidden" multiple accept="image/*,video/*">
89
+ <button id="browse-btn" class="bg-pink-100 hover:bg-pink-200 text-pink-700 font-medium py-2 px-6 rounded-full transition duration-300">Select Files</button>
90
+ </div>
91
+
92
+ <div id="preview-container" class="hidden mb-6">
93
+ <h4 class="font-medium text-gray-800 mb-3">Selected Files:</h4>
94
+ <div id="file-previews" class="grid grid-cols-2 md:grid-cols-3 gap-3"></div>
95
+ </div>
96
+
97
+ <div class="mb-6">
98
+ <label for="message" class="block text-gray-800 font-medium mb-2">Your Message (Optional)</label>
99
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-300 focus:border-pink-300" placeholder="Write your message here..."></textarea>
100
+ </div>
101
+
102
+ <div class="mb-4">
103
+ <label for="name" class="block text-gray-800 font-medium mb-2">Your Name</label>
104
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-300 focus:border-pink-300" placeholder="Enter your name">
105
+ </div>
106
+
107
+ <button id="submit-btn" class="w-full bg-pink-600 hover:bg-pink-700 text-white font-medium py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center">
108
+ <i class="fas fa-paper-plane mr-2"></i> Share With Us
109
+ </button>
110
+
111
+ <div id="success-message" class="hidden mt-4 p-4 bg-green-100 text-green-800 rounded-lg text-center">
112
+ <i class="fas fa-check-circle mr-2"></i> Thank you! Your memories have been shared with the couple.
113
+ </div>
114
+ </div>
115
+ </section>
116
+
117
+
118
+ <!-- Footer -->
119
+ <footer class="py-12 bg-pink-800 text-white text-center">
120
+ <div class="max-w-4xl mx-auto px-4">
121
+ <h2 class="heading-font text-2xl md:text-3xl font-bold mb-6">DUgunumuz icin ani birakma platformu</h2>
122
+ <p class="mb-8 max-w-2xl mx-auto">DUgunumuz icin ani birakma platformu</p>
123
+
124
+ <p class="text-pink-200 text-sm">© 2024 DUgunumuz icin ani birakma platformu. All rights reserved.</p>
125
+ </div>
126
+ </footer>
127
+ </div>
128
+
129
+ <script>
130
+ document.addEventListener('DOMContentLoaded', function() {
131
+ // File upload functionality
132
+ const uploadContainer = document.getElementById('upload-container');
133
+ const fileInput = document.getElementById('file-input');
134
+ const browseBtn = document.getElementById('browse-btn');
135
+ const previewContainer = document.getElementById('preview-container');
136
+ const filePreviews = document.getElementById('file-previews');
137
+ const submitBtn = document.getElementById('submit-btn');
138
+ const successMessage = document.getElementById('success-message');
139
+
140
+ // Click on the upload container or browse button to trigger file input
141
+ uploadContainer.addEventListener('click', function() {
142
+ fileInput.click();
143
+ });
144
+
145
+ browseBtn.addEventListener('click', function(e) {
146
+ e.stopPropagation();
147
+ fileInput.click();
148
+ });
149
+
150
+ // Store all selected files
151
+ let allFiles = [];
152
+
153
+ // Handle file selection
154
+ fileInput.addEventListener('change', function() {
155
+ // Add newly selected files to the existing list
156
+ const newFiles = Array.from(fileInput.files);
157
+ allFiles = allFiles.concat(newFiles);
158
+
159
+ if (allFiles.length > 0) {
160
+ filePreviews.innerHTML = '';
161
+ previewContainer.classList.remove('hidden');
162
+
163
+ allFiles.forEach((file, index) => {
164
+ const previewDiv = document.createElement('div');
165
+ previewDiv.className = 'bg-gray-100 rounded-lg p-2 relative';
166
+ previewDiv.dataset.fileIndex = index;
167
+
168
+ if (file.type.startsWith('image/')) {
169
+ const reader = new FileReader();
170
+ reader.onload = function(e) {
171
+ const img = document.createElement('img');
172
+ img.src = e.target.result;
173
+ img.className = 'w-full h-24 object-cover rounded';
174
+ previewDiv.appendChild(img);
175
+
176
+ const removeBtn = document.createElement('button');
177
+ removeBtn.innerHTML = '<i class="fas fa-times"></i>';
178
+ removeBtn.className = 'absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs';
179
+ removeBtn.addEventListener('click', function(e) {
180
+ e.stopPropagation();
181
+ // Remove file from allFiles array
182
+ allFiles.splice(index, 1);
183
+ previewDiv.remove();
184
+
185
+ // Update file input with remaining files
186
+ updateFileInput();
187
+
188
+ if (filePreviews.children.length === 0) {
189
+ previewContainer.classList.add('hidden');
190
+ }
191
+ });
192
+ previewDiv.appendChild(removeBtn);
193
+ };
194
+ reader.readAsDataURL(file);
195
+ } else if (file.type.startsWith('video/')) {
196
+ previewDiv.innerHTML = `
197
+ <div class="bg-gray-200 h-24 flex items-center justify-center rounded">
198
+ <i class="fas fa-video text-3xl text-pink-500"></i>
199
+ </div>
200
+ <button class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs">
201
+ <i class="fas fa-times"></i>
202
+ </button>
203
+ `;
204
+ previewDiv.querySelector('button').addEventListener('click', function(e) {
205
+ e.stopPropagation();
206
+ // Remove file from allFiles array
207
+ allFiles.splice(index, 1);
208
+ previewDiv.remove();
209
+
210
+ // Update file input with remaining files
211
+ updateFileInput();
212
+
213
+ if (filePreviews.children.length === 0) {
214
+ previewContainer.classList.add('hidden');
215
+ }
216
+ });
217
+ }
218
+
219
+ filePreviews.appendChild(previewDiv);
220
+ });
221
+ } else {
222
+ previewContainer.classList.add('hidden');
223
+ }
224
+ });
225
+
226
+ // Update file input with remaining files
227
+ function updateFileInput() {
228
+ // Create a new FileList with remaining files
229
+ const dt = new DataTransfer();
230
+ allFiles.forEach(file => dt.items.add(file));
231
+ fileInput.files = dt.files;
232
+ }
233
+
234
+ // Drag and drop functionality
235
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
236
+ uploadContainer.addEventListener(eventName, preventDefaults, false);
237
+ });
238
+
239
+ function preventDefaults(e) {
240
+ e.preventDefault();
241
+ e.stopPropagation();
242
+ }
243
+
244
+ ['dragenter', 'dragover'].forEach(eventName => {
245
+ uploadContainer.addEventListener(eventName, highlight, false);
246
+ });
247
+
248
+ ['dragleave', 'drop'].forEach(eventName => {
249
+ uploadContainer.addEventListener(eventName, unhighlight, false);
250
+ });
251
+
252
+ function highlight() {
253
+ uploadContainer.classList.add('border-pink-500', 'bg-pink-50');
254
+ }
255
+
256
+ function unhighlight() {
257
+ uploadContainer.classList.remove('border-pink-500', 'bg-pink-50');
258
+ }
259
+
260
+ uploadContainer.addEventListener('drop', handleDrop, false);
261
+
262
+ function handleDrop(e) {
263
+ const dt = e.dataTransfer;
264
+ const files = dt.files;
265
+
266
+ // Create a new FileList with both existing and new files
267
+ const existingFiles = Array.from(fileInput.files);
268
+ const newFiles = Array.from(files);
269
+ const combinedFiles = new FileListItems(existingFiles.concat(newFiles));
270
+
271
+ // Update the file input with combined files
272
+ Object.defineProperty(fileInput, 'files', {
273
+ value: combinedFiles,
274
+ writable: false
275
+ });
276
+
277
+ const event = new Event('change');
278
+ fileInput.dispatchEvent(event);
279
+ }
280
+
281
+ // Helper function to create FileList from array
282
+ function FileListItems(files) {
283
+ const b = new ClipboardEvent("").clipboardData || new DataTransfer();
284
+ for (let i = 0, len = files.length; i < len; i++) {
285
+ b.items.add(files[i]);
286
+ }
287
+ return b.files;
288
+ }
289
+
290
+ // Form submission
291
+ submitBtn.addEventListener('click', function() {
292
+ const name = document.getElementById('name').value.trim();
293
+ const message = document.getElementById('message').value.trim();
294
+ const files = fileInput.files;
295
+
296
+ if (files.length === 0 && message === '') {
297
+ alert('Please add at least a photo/video or a message.');
298
+ return;
299
+ }
300
+
301
+ // Name is optional, so no validation required
302
+
303
+ // In a real app, you would upload files to a server here
304
+ // For this demo, we'll just show a success message
305
+ submitBtn.disabled = true;
306
+ submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Sending...';
307
+
308
+ setTimeout(function() {
309
+ successMessage.classList.remove('hidden');
310
+ submitBtn.disabled = false;
311
+ submitBtn.innerHTML = '<i class="fas fa-paper-plane mr-2"></i> Share With Us';
312
+
313
+ // Reset form
314
+ fileInput.value = '';
315
+ document.getElementById('name').value = '';
316
+ document.getElementById('message').value = '';
317
+ filePreviews.innerHTML = '';
318
+ previewContainer.classList.add('hidden');
319
+
320
+ // Hide success message after 5 seconds
321
+ setTimeout(function() {
322
+ successMessage.classList.add('hidden');
323
+ }, 5000);
324
+ }, 1500);
325
+ });
326
+
327
+ // Smooth scrolling for navigation
328
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
329
+ anchor.addEventListener('click', function(e) {
330
+ e.preventDefault();
331
+ const targetId = this.getAttribute('href');
332
+ const targetElement = document.querySelector(targetId);
333
+
334
+ if (targetElement) {
335
+ window.scrollTo({
336
+ top: targetElement.offsetTop - 80,
337
+ behavior: 'smooth'
338
+ });
339
+ }
340
+ });
341
+ });
342
+ });
343
+ </script>
344
+ <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=SaitBurak/wedding-image-uploader-v1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
345
+ </html>