Hugging Face's logo

Spaces:
OncleBob
/
pixelpulse-gallery
Running

App Files Community
OncleBob commited on
Commit
bb743f1
·
verified ·
1 Parent(s): 7d6afd0

Cree un site web pour prensentet mes photos facilement. Si on clique sur u'e photo ca l'agrandi et je peux faire degiler les photos de mon appareil.

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +233 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Pixelpulse Gallery
3
- emoji: 🌖
4
- colorFrom: green
5
- colorTo: purple
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: PixelPulse Gallery
3
+ colorFrom: yellow
4
+ colorTo: blue
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,234 @@
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>PixelPulse Gallery</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
12
+ <style>
13
+ .gallery-item {
14
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
15
+ }
16
+ .gallery-item:hover {
17
+ transform: scale(1.03);
18
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
19
+ }
20
+ .modal-overlay {
21
+ background-color: rgba(0, 0, 0, 0.9);
22
+ }
23
+ .modal-image {
24
+ max-height: 80vh;
25
+ max-width: 90vw;
26
+ }
27
+ .nav-button {
28
+ transition: all 0.3s ease;
29
+ }
30
+ .nav-button:hover {
31
+ transform: scale(1.2);
32
+ }
33
+ </style>
34
+ </head>
35
+ <body class="bg-gray-100 min-h-screen">
36
+ <!-- Header -->
37
+ <header class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-6 shadow-lg">
38
+ <div class="container mx-auto px-4">
39
+ <div class="flex justify-between items-center">
40
+ <h1 class="text-3xl font-bold">PixelPulse Gallery</h1>
41
+ <div class="flex space-x-4">
42
+ <button class="bg-white text-indigo-600 px-4 py-2 rounded-full font-semibold hover:bg-indigo-100 transition">
43
+ <i data-feather="upload" class="inline mr-2"></i> Upload
44
+ </button>
45
+ <button class="bg-indigo-700 text-white px-4 py-2 rounded-full font-semibold hover:bg-indigo-800 transition">
46
+ <i data-feather="user" class="inline mr-2"></i> Profile
47
+ </button>
48
+ </div>
49
+ </div>
50
+ </div>
51
+ </header>
52
+
53
+ <!-- Main Content -->
54
+ <main class="container mx-auto px-4 py-8">
55
+ <!-- Search and Filter -->
56
+ <div class="mb-8">
57
+ <div class="flex flex-col md:flex-row justify-between items-center gap-4">
58
+ <div class="relative w-full md:w-1/3">
59
+ <input type="text" placeholder="Search photos..."
60
+ class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500">
61
+ <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
62
+ </div>
63
+ <div class="flex space-x-2">
64
+ <button class="px-4 py-2 bg-white rounded-full border border-gray-300 hover:bg-gray-50 flex items-center">
65
+ <i data-feather="filter" class="mr-2"></i> Filter
66
+ </button>
67
+ <button class="px-4 py-2 bg-white rounded-full border border-gray-300 hover:bg-gray-50 flex items-center">
68
+ <i data-feather="calendar" class="mr-2"></i> Date
69
+ </button>
70
+ </div>
71
+ </div>
72
+ </div>
73
+
74
+ <!-- Gallery Grid -->
75
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
76
+ <!-- Sample photos - in a real app these would be dynamic -->
77
+ <div class="gallery-item bg-white rounded-xl overflow-hidden shadow-md cursor-pointer" onclick="openModal('http://static.photos/nature/640x360/1')">
78
+ <img src="http://static.photos/nature/640x360/1" alt="Nature" class="w-full h-48 object-cover">
79
+ <div class="p-4">
80
+ <h3 class="font-semibold">Mountain View</h3>
81
+ <p class="text-gray-600 text-sm">June 12, 2023</p>
82
+ </div>
83
+ </div>
84
+ <div class="gallery-item bg-white rounded-xl overflow-hidden shadow-md cursor-pointer" onclick="openModal('http://static.photos/cityscape/640x360/2')">
85
+ <img src="http://static.photos/cityscape/640x360/2" alt="City" class="w-full h-48 object-cover">
86
+ <div class="p-4">
87
+ <h3 class="font-semibold">City Lights</h3>
88
+ <p class="text-gray-600 text-sm">May 28, 2023</p>
89
+ </div>
90
+ </div>
91
+ <div class="gallery-item bg-white rounded-xl overflow-hidden shadow-md cursor-pointer" onclick="openModal('http://static.photos/travel/640x360/3')">
92
+ <img src="http://static.photos/travel/640x360/3" alt="Travel" class="w-full h-48 object-cover">
93
+ <div class="p-4">
94
+ <h3 class="font-semibold">Beach Sunset</h3>
95
+ <p class="text-gray-600 text-sm">April 15, 2023</p>
96
+ </div>
97
+ </div>
98
+ <div class="gallery-item bg-white rounded-xl overflow-hidden shadow-md cursor-pointer" onclick="openModal('http://static.photos/food/640x360/4')">
99
+ <img src="http://static.photos/food/640x360/4" alt="Food" class="w-full h-48 object-cover">
100
+ <div class="p-4">
101
+ <h3 class="font-semibold">Delicious Meal</h3>
102
+ <p class="text-gray-600 text-sm">March 22, 2023</p>
103
+ </div>
104
+ </div>
105
+ <div class="gallery-item bg-white rounded-xl overflow-hidden shadow-md cursor-pointer" onclick="openModal('http://static.photos/people/640x360/5')">
106
+ <img src="http://static.photos/people/640x360/5" alt="People" class="w-full h-48 object-cover">
107
+ <div class="p-4">
108
+ <h3 class="font-semibold">Family Gathering</h3>
109
+ <p class="text-gray-600 text-sm">February 18, 2023</p>
110
+ </div>
111
+ </div>
112
+ <div class="gallery-item bg-white rounded-xl overflow-hidden shadow-md cursor-pointer" onclick="openModal('http://static.photos/technology/640x360/6')">
113
+ <img src="http://static.photos/technology/640x360/6" alt="Tech" class="w-full h-48 object-cover">
114
+ <div class="p-4">
115
+ <h3 class="font-semibold">Tech Setup</h3>
116
+ <p class="text-gray-600 text-sm">January 5, 2023</p>
117
+ </div>
118
+ </div>
119
+ <div class="gallery-item bg-white rounded-xl overflow-hidden shadow-md cursor-pointer" onclick="openModal('http://static.photos/vintage/640x360/7')">
120
+ <img src="http://static.photos/vintage/640x360/7" alt="Vintage" class="w-full h-48 object-cover">
121
+ <div class="p-4">
122
+ <h3 class="font-semibold">Retro Vibes</h3>
123
+ <p class="text-gray-600 text-sm">December 12, 2022</p>
124
+ </div>
125
+ </div>
126
+ <div class="gallery-item bg-white rounded-xl overflow-hidden shadow-md cursor-pointer" onclick="openModal('http://static.photos/outdoor/640x360/8')">
127
+ <img src="http://static.photos/outdoor/640x360/8" alt="Outdoor" class="w-full h-48 object-cover">
128
+ <div class="p-4">
129
+ <h3 class="font-semibold">Hiking Adventure</h3>
130
+ <p class="text-gray-600 text-sm">November 8, 2022</p>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Modal -->
136
+ <div id="imageModal" class="fixed inset-0 z-50 flex items-center justify-center modal-overlay hidden">
137
+ <div class="relative">
138
+ <button onclick="closeModal()" class="absolute -top-10 right-0 text-white hover:text-gray-300 nav-button">
139
+ <i data-feather="x" class="w-8 h-8"></i>
140
+ </button>
141
+
142
+ <img id="modalImage" src="" alt="" class="modal-image rounded-lg">
143
+
144
+ <div class="flex justify-between mt-4">
145
+ <button onclick="prevImage()" class="bg-white p-3 rounded-full shadow-md nav-button">
146
+ <i data-feather="chevron-left" class="w-6 h-6"></i>
147
+ </button>
148
+ <button onclick="nextImage()" class="bg-white p-3 rounded-full shadow-md nav-button">
149
+ <i data-feather="chevron-right" class="w-6 h-6"></i>
150
+ </button>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ </main>
155
+
156
+ <!-- Footer -->
157
+ <footer class="bg-gray-800 text-white py-6">
158
+ <div class="container mx-auto px-4 text-center">
159
+ <p class="mb-2">© 2023 PixelPulse Gallery. All rights reserved.</p>
160
+ <div class="flex justify-center space-x-4">
161
+ <a href="#" class="hover:text-indigo-300"><i data-feather="instagram"></i></a>
162
+ <a href="#" class="hover:text-indigo-300"><i data-feather="twitter"></i></a>
163
+ <a href="#" class="hover:text-indigo-300"><i data-feather="facebook"></i></a>
164
+ <a href="#" class="hover:text-indigo-300"><i data-feather="github"></i></a>
165
+ </div>
166
+ </div>
167
+ </footer>
168
+
169
+ <script>
170
+ // For demonstration purposes - in a real app this would be dynamic
171
+ const images = [
172
+ 'http://static.photos/nature/640x360/1',
173
+ 'http://static.photos/cityscape/640x360/2',
174
+ 'http://static.photos/travel/640x360/3',
175
+ 'http://static.photos/food/640x360/4',
176
+ 'http://static.photos/people/640x360/5',
177
+ 'http://static.photos/technology/640x360/6',
178
+ 'http://static.photos/vintage/640x360/7',
179
+ 'http://static.photos/outdoor/640x360/8'
180
+ ];
181
+ let currentImageIndex = 0;
182
+
183
+ function openModal(imgSrc) {
184
+ const modal = document.getElementById('imageModal');
185
+ const modalImg = document.getElementById('modalImage');
186
+
187
+ currentImageIndex = images.indexOf(imgSrc);
188
+ modalImg.src = imgSrc;
189
+ modal.classList.remove('hidden');
190
+ document.body.style.overflow = 'hidden';
191
+ }
192
+
193
+ function closeModal() {
194
+ const modal = document.getElementById('imageModal');
195
+ modal.classList.add('hidden');
196
+ document.body.style.overflow = 'auto';
197
+ }
198
+
199
+ function nextImage() {
200
+ currentImageIndex = (currentImageIndex + 1) % images.length;
201
+ document.getElementById('modalImage').src = images[currentImageIndex];
202
+ }
203
+
204
+ function prevImage() {
205
+ currentImageIndex = (currentImageIndex - 1 + images.length) % images.length;
206
+ document.getElementById('modalImage').src = images[currentImageIndex];
207
+ }
208
+
209
+ // Close modal when clicking outside the image
210
+ document.getElementById('imageModal').addEventListener('click', function(e) {
211
+ if (e.target === this) {
212
+ closeModal();
213
+ }
214
+ });
215
+
216
+ // Keyboard navigation
217
+ document.addEventListener('keydown', function(e) {
218
+ const modal = document.getElementById('imageModal');
219
+ if (!modal.classList.contains('hidden')) {
220
+ if (e.key === 'Escape') {
221
+ closeModal();
222
+ } else if (e.key === 'ArrowRight') {
223
+ nextImage();
224
+ } else if (e.key === 'ArrowLeft') {
225
+ prevImage();
226
+ }
227
+ }
228
+ });
229
+
230
+ // Initialize feather icons
231
+ feather.replace();
232
+ </script>
233
+ </body>
234
  </html>