Hugging Face's logo

Spaces:
Doces
/
portfolio-3
Running

App Files Community
Doces commited on
Commit
5275656
·
verified ·
1 Parent(s): ddc9901

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1023 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Portfolio 3
3
- emoji: 🌍
4
- colorFrom: purple
5
- colorTo: green
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: portfolio-3
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: yellow
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,1023 @@
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>Art & Lens | Creative Portfolio</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
+ .gallery-item {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .gallery-item:hover {
14
+ transform: scale(1.02);
15
+ box-shadow: 0 10px 20px rgba(0,0,0,0.2);
16
+ }
17
+ .modal {
18
+ transition: opacity 0.3s ease;
19
+ }
20
+ .auth-modal {
21
+ animation: slideDown 0.4s ease-out;
22
+ }
23
+ @keyframes slideDown {
24
+ from {
25
+ transform: translateY(-50px);
26
+ opacity: 0;
27
+ }
28
+ to {
29
+ transform: translateY(0);
30
+ opacity: 1;
31
+ }
32
+ }
33
+ .like-animation {
34
+ animation: heartBeat 0.7s;
35
+ }
36
+ @keyframes heartBeat {
37
+ 0% { transform: scale(1); }
38
+ 14% { transform: scale(1.3); }
39
+ 28% { transform: scale(1); }
40
+ 42% { transform: scale(1.3); }
41
+ 70% { transform: scale(1); }
42
+ }
43
+ .nav-link {
44
+ position: relative;
45
+ }
46
+ .nav-link:after {
47
+ content: '';
48
+ position: absolute;
49
+ width: 0;
50
+ height: 2px;
51
+ bottom: 0;
52
+ left: 0;
53
+ background-color: #4f46e5;
54
+ transition: width 0.3s ease;
55
+ }
56
+ .nav-link:hover:after {
57
+ width: 100%;
58
+ }
59
+ .hero-gradient {
60
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
61
+ }
62
+ .feature-card {
63
+ transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
64
+ border-radius: 12px;
65
+ }
66
+ .feature-card:hover {
67
+ transform: translateY(-5px);
68
+ box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.08);
69
+ }
70
+ .testimonial-card {
71
+ background: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%);
72
+ box-shadow: 0 6px 15px rgba(0,0,0,0.05);
73
+ }
74
+ .stats-item {
75
+ background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
76
+ border-radius: 12px;
77
+ box-shadow: 0 4px 6px rgba(0,0,0,0.05);
78
+ }
79
+ </style>
80
+ </head>
81
+ <body class="bg-gray-50 font-sans">
82
+ <!-- Navigation -->
83
+ <nav class="bg-white/90 backdrop-blur-md shadow-sm sticky top-0 z-50 border-b border-gray-100">
84
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
85
+ <div class="flex justify-between items-center h-20">
86
+ <div class="flex items-center">
87
+ <a href="#" class="flex items-center" onclick="showHomePage()">
88
+ <div class="flex items-center">
89
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center mr-3">
90
+ <i class="fas fa-palette text-white text-lg"></i>
91
+ </div>
92
+ <span class="text-2xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">Art & Lens</span>
93
+ </div>
94
+ </a>
95
+ </div>
96
+ <div class="hidden md:flex items-center space-x-8">
97
+ <a href="#" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium relative" onclick="showHomePage()">Home</a>
98
+ <a href="#" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium relative" onclick="showArtistPage()">Artist</a>
99
+ <a href="#" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium relative" onclick="showPhotographerPage()">Photographer</a>
100
+ <a href="#" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium relative" onclick="showAboutPage()">About</a>
101
+ <a href="#" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium relative">Blog</a>
102
+ <button id="auth-btn" class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-5 py-2 rounded-full hover:from-indigo-600 hover:to-purple-700 transition-all shadow-md hover:shadow-lg" onclick="toggleAuthModal()">
103
+ <i class="fas fa-user-circle mr-2"></i>Login
104
+ </button>
105
+ </div>
106
+ <div class="md:hidden">
107
+ <button class="text-gray-700 focus:outline-none" onclick="toggleMobileMenu()">
108
+ <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
109
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
110
+ </svg>
111
+ </button>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ <!-- Mobile menu -->
116
+ <div id="mobile-menu" class="md:hidden hidden bg-white/95 backdrop-blur-md">
117
+ <div class="px-2 pt-2 pb-3 space-y-2 sm:px-3">
118
+ <a href="#" class="block px-3 py-2 text-gray-700 hover:text-indigo-600 hover:bg-gray-50 rounded-md" onclick="showHomePage()">Home</a>
119
+ <a href="#" class="block px-3 py-2 text-gray-700 hover:text-indigo-600 hover:bg-gray-50 rounded-md" onclick="showArtistPage()">Artist</a>
120
+ <a href="#" class="block px-3 py-2 text-gray-700 hover:text-indigo-600 hover:bg-gray-50 rounded-md" onclick="showPhotographerPage()">Photographer</a>
121
+ <a href="#" class="block px-3 py-2 text-gray-700 hover:text-indigo-600 hover:bg-gray-50 rounded-md" onclick="showAboutPage()">About</a>
122
+ <a href="#" class="block px-3 py-2 text-gray-700 hover:text-indigo-600 hover:bg-gray-50 rounded-md">Blog</a>
123
+ <button class="block w-full text-left px-3 py-2 text-gray-700 hover:text-indigo-600 hover:bg-gray-50 rounded-md" onclick="toggleAuthModal()">
124
+ Login
125
+ </button>
126
+ </div>
127
+ </div>
128
+ </nav>
129
+
130
+ <!-- Main Content -->
131
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
132
+ <!-- Home Page -->
133
+ <div id="home-page">
134
+ <!-- Hero Section -->
135
+ <section class="hero-gradient rounded-3xl p-8 md:p-12 my-12 text-white overflow-hidden relative">
136
+ <div class="max-w-3xl relative z-10">
137
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Where Art Meets Photography</h1>
138
+ <p class="text-xl md:text-2xl mb-8 opacity-90">Discover the perfect blend of artistic expression and photographic mastery in our collaborative portfolio.</p>
139
+ <div class="flex flex-col sm:flex-row gap-4">
140
+ <button onclick="showArtistPage()" class="bg-white text-indigo-600 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition-all shadow-lg">
141
+ Explore Artworks <i class="fas fa-arrow-right ml-2"></i>
142
+ </button>
143
+ <button onclick="showPhotographerPage()" class="bg-black/20 text-white px-6 py-3 rounded-full font-medium hover:bg-black/30 transition-all border border-white/20">
144
+ View Photography <i class="fas fa-camera ml-2"></i>
145
+ </button>
146
+ </div>
147
+ </div>
148
+ <div class="absolute -right-20 -bottom-20 opacity-20 z-0">
149
+ <i class="fas fa-palette text-[300px]"></i>
150
+ </div>
151
+ </section>
152
+
153
+ <!-- Featured Works -->
154
+ <section class="my-16">
155
+ <div class="flex justify-between items-center mb-10">
156
+ <h2 class="text-3xl font-bold text-gray-800">Featured Works</h2>
157
+ <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
158
+ View all <i class="fas fa-arrow-right ml-2"></i>
159
+ </a>
160
+ </div>
161
+
162
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
163
+ <div class="feature-card bg-white rounded-xl overflow-hidden cursor-pointer" onclick="openImageModal('artist', 1)">
164
+ <div class="h-64 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 relative overflow-hidden">
165
+ <img src="https://source.unsplash.com/random/600x400/?abstract,art" alt="Abstract Harmony" class="w-full h-full object-cover">
166
+ <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-6">
167
+ <div>
168
+ <h3 class="text-white text-xl font-bold">Abstract Harmony</h3>
169
+ <p class="text-white/80">Mixed Media • 2023</p>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </div>
174
+
175
+ <div class="feature-card bg-white rounded-xl overflow-hidden cursor-pointer" onclick="openImageModal('photographer', 1)">
176
+ <div class="h-64 bg-gradient-to-r from-blue-400 via-green-500 to-teal-500 relative overflow-hidden">
177
+ <img src="https://source.unsplash.com/random/600x400/?mountain" alt="Mountain Dawn" class="w-full h-full object-cover">
178
+ <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-6">
179
+ <div>
180
+ <h3 class="text-white text-xl font-bold">Mountain Dawn</h3>
181
+ <p class="text-white/80">Landscape Photography • 2023</p>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ </div>
186
+
187
+ <div class="feature-card bg-white rounded-xl overflow-hidden cursor-pointer" onclick="openImageModal('artist', 2)">
188
+ <div class="h-64 bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500 relative overflow-hidden">
189
+ <img src="https://source.unsplash.com/random/600x400/?city,art" alt="Urban Dreams" class="w-full h-full object-cover">
190
+ <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-6">
191
+ <div>
192
+ <h3 class="text-white text-xl font-bold">Urban Dreams</h3>
193
+ <p class="text-white/80">Acrylic on Canvas • 2023</p>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </section>
200
+
201
+ <!-- Stats Section -->
202
+ <section class="my-16 bg-gradient-to-r from-indigo-50 to-purple-50 rounded-3xl p-8 md:p-12">
203
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
204
+ <div class="stats-item p-6 text-center">
205
+ <div class="text-4xl font-bold text-indigo-600 mb-2">42+</div>
206
+ <div class="text-gray-600">Artworks</div>
207
+ </div>
208
+ <div class="stats-item p-6 text-center">
209
+ <div class="text-4xl font-bold text-purple-600 mb-2">36+</div>
210
+ <div class="text-gray-600">Photographs</div>
211
+ </div>
212
+ <div class="stats-item p-6 text-center">
213
+ <div class="text-4xl font-bold text-pink-600 mb-2">8</div>
214
+ <div class="text-gray-600">Exhibitions</div>
215
+ </div>
216
+ <div class="stats-item p-6 text-center">
217
+ <div class="text-4xl font-bold text-blue-600 mb-2">5K+</div>
218
+ <div class="text-gray-600">Visitors</div>
219
+ </div>
220
+ </div>
221
+ </section>
222
+
223
+ <!-- About Creators -->
224
+ <section class="my-16">
225
+ <h2 class="text-3xl font-bold text-gray-800 mb-10 text-center">Meet The Creators</h2>
226
+
227
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
228
+ <div class="bg-white rounded-2xl shadow-md overflow-hidden">
229
+ <div class="h-64 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 flex items-center justify-center relative">
230
+ <img src="https://source.unsplash.com/random/400x400/?artist" alt="Emma Richardson" class="w-32 h-32 rounded-full border-4 border-white object-cover absolute -bottom-16 left-1/2 transform -translate-x-1/2 shadow-lg">
231
+ </div>
232
+ <div class="pt-20 pb-8 px-6 text-center">
233
+ <h3 class="text-2xl font-bold text-gray-800 mb-1">Emma Richardson</h3>
234
+ <p class="text-indigo-600 mb-4">Visual Artist</p>
235
+ <p class="text-gray-600 mb-6">Specializing in mixed media and abstract expressionism. Emma's work explores the intersection of human emotion and the natural world.</p>
236
+ <button onclick="showArtistPage()" class="bg-indigo-600 text-white px-6 py-2 rounded-full hover:bg-indigo-700 transition">
237
+ View Artworks <i class="fas fa-arrow-right ml-2"></i>
238
+ </button>
239
+ </div>
240
+ </div>
241
+
242
+ <div class="bg-white rounded-2xl shadow-md overflow-hidden">
243
+ <div class="h-64 bg-gradient-to-r from-blue-400 via-green-500 to-teal-500 flex items-center justify-center relative">
244
+ <img src="https://source.unsplash.com/random/400x400/?photographer" alt="James Carter" class="w-32 h-32 rounded-full border-4 border-white object-cover absolute -bottom-16 left-1/2 transform -translate-x-1/2 shadow-lg">
245
+ </div>
246
+ <div class="pt-20 pb-8 px-6 text-center">
247
+ <h3 class="text-2xl font-bold text-gray-800 mb-1">James Carter</h3>
248
+ <p class="text-indigo-600 mb-4">Photographer</p>
249
+ <p class="text-gray-600 mb-6">Documentary and landscape photographer with a passion for capturing authentic moments and the beauty of untouched nature.</p>
250
+ <button onclick="showPhotographerPage()" class="bg-indigo-600 text-white px-6 py-2 rounded-full hover:bg-indigo-700 transition">
251
+ View Photos <i class="fas fa-arrow-right ml-2"></i>
252
+ </button>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </section>
257
+
258
+ <!-- Testimonials -->
259
+ <section class="my-16">
260
+ <h2 class="text-3xl font-bold text-gray-800 mb-10 text-center">What People Say</h2>
261
+
262
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
263
+ <div class="testimonial-card p-8 rounded-2xl">
264
+ <div class="text-yellow-400 text-2xl mb-4">
265
+ <i class="fas fa-star"></i>
266
+ <i class="fas fa-star"></i>
267
+ <i class="fas fa-star"></i>
268
+ <i class="fas fa-star"></i>
269
+ <i class="fas fa-star"></i>
270
+ </div>
271
+ <p class="text-gray-600 mb-6">"Emma's artwork transformed my living space. The colors and textures create an atmosphere that's both energizing and calming."</p>
272
+ <div class="flex items-center">
273
+ <img src="https://source.unsplash.com/random/80x80/?woman" alt="Sarah Johnson" class="w-12 h-12 rounded-full mr-4 object-cover">
274
+ <div>
275
+ <h4 class="font-bold text-gray-800">Sarah Johnson</h4>
276
+ <p class="text-gray-500 text-sm">Art Collector</p>
277
+ </div>
278
+ </div>
279
+ </div>
280
+
281
+ <div class="testimonial-card p-8 rounded-2xl">
282
+ <div class="text-yellow-400 text-2xl mb-4">
283
+ <i class="fas fa-star"></i>
284
+ <i class="fas fa-star"></i>
285
+ <i class="fas fa-star"></i>
286
+ <i class="fas fa-star"></i>
287
+ <i class="fas fa-star"></i>
288
+ </div>
289
+ <p class="text-gray-600 mb-6">"James has an incredible eye for detail. His landscape photography captures moments I would have never noticed myself."</p>
290
+ <div class="flex items-center">
291
+ <img src="https://source.unsplash.com/random/80x80/?man" alt="Michael Chen" class="w-12 h-12 rounded-full mr-4 object-cover">
292
+ <div>
293
+ <h4 class="font-bold text-gray-800">Michael Chen</h4>
294
+ <p class="text-gray-500 text-sm">Travel Blogger</p>
295
+ </div>
296
+ </div>
297
+ </div>
298
+
299
+ <div class="testimonial-card p-8 rounded-2xl">
300
+ <div class="text-yellow-400 text-2xl mb-4">
301
+ <i class="fas fa-star"></i>
302
+ <i class="fas fa-star"></i>
303
+ <i class="fas fa-star"></i>
304
+ <i class="fas fa-star"></i>
305
+ <i class="fas fa-star-half-alt"></i>
306
+ </div>
307
+ <p class="text-gray-600 mb-6">"The collaboration between these two artists is magical. Their joint exhibition was the highlight of our gallery season."</p>
308
+ <div class="flex items-center">
309
+ <img src="https://source.unsplash.com/random/80x80/?woman,portrait" alt="Lisa Rodriguez" class="w-12 h-12 rounded-full mr-4 object-cover">
310
+ <div>
311
+ <h4 class="font-bold text-gray-800">Lisa Rodriguez</h4>
312
+ <p class="text-gray-500 text-sm">Gallery Owner</p>
313
+ </div>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ </section>
318
+
319
+ <!-- Call to Action -->
320
+ <section class="my-16 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-3xl p-12 text-center text-white">
321
+ <h2 class="text-3xl font-bold mb-6">Ready to Explore More?</h2>
322
+ <p class="text-xl opacity-90 mb-8 max-w-2xl mx-auto">Join our community of art lovers and photography enthusiasts. Get updates on new works and exclusive content.</p>
323
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
324
+ <button onclick="showArtistPage()" class="bg-white text-indigo-600 px-8 py-3 rounded-full font-medium hover:bg-gray-100 transition-all shadow-lg">
325
+ Browse Art Gallery
326
+ </button>
327
+ <button onclick="showPhotographerPage()" class="bg-transparent border-2 border-white text-white px-8 py-3 rounded-full font-medium hover:bg-white/10 transition-all">
328
+ View Photography
329
+ </button>
330
+ </div>
331
+ </section>
332
+ </div>
333
+
334
+ <!-- Artist Page -->
335
+ <div id="artist-page" class="hidden">
336
+ <div class="flex justify-between items-center mb-8">
337
+ <h1 class="text-3xl font-bold text-gray-800">Artist Gallery</h1>
338
+ <button id="add-artist-btn" class="hidden bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-5 py-2 rounded-full hover:from-indigo-600 hover:to-purple-700 transition-all shadow-md" onclick="showAddImageModal('artist')">
339
+ <i class="fas fa-plus mr-2"></i>Add Artwork
340
+ </button>
341
+ </div>
342
+
343
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" id="artist-gallery">
344
+ <!-- Artist gallery items will be added here by JavaScript -->
345
+ </div>
346
+ </div>
347
+
348
+ <!-- Photographer Page -->
349
+ <div id="photographer-page" class="hidden">
350
+ <div class="flex justify-between items-center mb-8">
351
+ <h1 class="text-3xl font-bold text-gray-800">Photography Gallery</h1>
352
+ <button id="add-photographer-btn" class="hidden bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-5 py-2 rounded-full hover:from-indigo-600 hover:to-purple-700 transition-all shadow-md" onclick="showAddImageModal('photographer')">
353
+ <i class="fas fa-plus mr-2"></i>Add Photo
354
+ </button>
355
+ </div>
356
+
357
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" id="photographer-gallery">
358
+ <!-- Photographer gallery items will be added here by JavaScript -->
359
+ </div>
360
+ </div>
361
+
362
+ <!-- About Page -->
363
+ <div id="about-page" class="hidden">
364
+ <h1 class="text-3xl font-bold text-gray-800 mb-8 text-center">About the Creators</h1>
365
+
366
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12 mb-16">
367
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
368
+ <div class="h-64 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 flex items-center justify-center">
369
+ <i class="fas fa-palette text-white text-7xl"></i>
370
+ </div>
371
+ <div class="p-6">
372
+ <h2 class="text-2xl font-bold text-gray-800 mb-2">Emma Richardson</h2>
373
+ <h3 class="text-lg text-indigo-600 mb-4">Visual Artist</h3>
374
+ <p class="text-gray-600 mb-4">Emma is a contemporary artist specializing in mixed media and abstract expressionism. Her work explores the intersection of human emotion and the natural world.</p>
375
+ <div class="flex space-x-4">
376
+ <a href="#" class="text-blue-500 hover:text-blue-700"><i class="fab fa-instagram text-xl"></i></a>
377
+ <a href="#" class="text-blue-800 hover:text-blue-900"><i class="fab fa-facebook text-xl"></i></a>
378
+ <a href="#" class="text-red-500 hover:text-red-700"><i class="fab fa-youtube text-xl"></i></a>
379
+ </div>
380
+ </div>
381
+ </div>
382
+
383
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
384
+ <div class="h-64 bg-gradient-to-r from-blue-400 via-green-500 to-teal-500 flex items-center justify-center">
385
+ <i class="fas fa-camera text-white text-7xl"></i>
386
+ </div>
387
+ <div class="p-6">
388
+ <h2 class="text-2xl font-bold text-gray-800 mb-2">James Carter</h2>
389
+ <h3 class="text-lg text-indigo-600 mb-4">Photographer</h3>
390
+ <p class="text-gray-600 mb-4">James is a documentary and landscape photographer with a passion for capturing authentic moments and the beauty of untouched nature.</p>
391
+ <div class="flex space-x-4">
392
+ <a href="#" class="text-blue-500 hover:text-blue-700"><i class="fab fa-instagram text-xl"></i></a>
393
+ <a href="#" class="text-blue-800 hover:text-blue-900"><i class="fab fa-facebook text-xl"></i></a>
394
+ <a href="#" class="text-red-500 hover:text-red-700"><i class="fab fa-youtube text-xl"></i></a>
395
+ </div>
396
+ </div>
397
+ </div>
398
+ </div>
399
+
400
+ <div class="bg-white rounded-xl shadow-md p-8">
401
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Their Story</h2>
402
+ <p class="text-gray-600 mb-6">Emma and James met during an art exhibition in 2015 where James was photographing the event. Recognizing the synergy between their creative visions, they began collaborating on projects that blend painting and photography in innovative ways.</p>
403
+
404
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Collaborative Projects</h3>
405
+ <ul class="list-disc pl-5 text-gray-600 space-y-2 mb-6">
406
+ <li>"Light & Texture" - 2017 (Exhibited at Modern Art Gallery)</li>
407
+ <li>"Urban Perspectives" - 2019 (Featured in Art Monthly)</li>
408
+ <li>"Nature Reimagined" - 2021 (Traveling exhibition)</li>
409
+ </ul>
410
+
411
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Contact</h3>
412
+ <p class="text-gray-600">For inquiries about their work or potential collaborations:</p>
413
+ <p class="text-indigo-600 mt-2">hello@artandlens.com</p>
414
+ <p class="text-gray-600">+1 (555) 123-4567</p>
415
+ </div>
416
+ </div>
417
+ </main>
418
+
419
+ <!-- Footer -->
420
+ <footer class="bg-gray-900 text-white py-12">
421
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
422
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
423
+ <div>
424
+ <div class="flex items-center mb-4">
425
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center mr-3">
426
+ <i class="fas fa-palette text-white text-lg"></i>
427
+ </div>
428
+ <span class="text-2xl font-bold bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent">Art & Lens</span>
429
+ </div>
430
+ <p class="text-gray-400">Where creativity meets perspective. A collaborative portfolio showcasing the best of art and photography.</p>
431
+ </div>
432
+
433
+ <div>
434
+ <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
435
+ <ul class="space-y-2">
436
+ <li><a href="#" class="text-gray-400 hover:text-white transition" onclick="showHomePage()">Home</a></li>
437
+ <li><a href="#" class="text-gray-400 hover:text-white transition" onclick="showArtistPage()">Artist Gallery</a></li>
438
+ <li><a href="#" class="text-gray-400 hover:text-white transition" onclick="showPhotographerPage()">Photography</a></li>
439
+ <li><a href="#" class="text-gray-400 hover:text-white transition" onclick="showAboutPage()">About</a></li>
440
+ </ul>
441
+ </div>
442
+
443
+ <div>
444
+ <h3 class="text-lg font-semibold mb-4">Connect</h3>
445
+ <div class="flex space-x-4 mb-4">
446
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram text-xl"></i></a>
447
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook text-xl"></i></a>
448
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter text-xl"></i></a>
449
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube text-xl"></i></a>
450
+ </div>
451
+ <p class="text-gray-400">Subscribe to our newsletter</p>
452
+ <div class="mt-2 flex">
453
+ <input type="email" placeholder="Your email" class="px-3 py-2 bg-gray-800 text-white rounded-l-md focus:outline-none w-full">
454
+ <button class="bg-indigo-600 text-white px-4 py-2 rounded-r-md hover:bg-indigo-700 transition">
455
+ <i class="fas fa-paper-plane"></i>
456
+ </button>
457
+ </div>
458
+ </div>
459
+
460
+ <div>
461
+ <h3 class="text-lg font-semibold mb-4">Contact</h3>
462
+ <p class="text-gray-400 mb-2"><i class="fas fa-map-marker-alt mr-2"></i> 123 Art Street, Creative City</p>
463
+ <p class="text-gray-400 mb-2"><i class="fas fa-phone mr-2"></i> +1 (555) 123-4567</p>
464
+ <p class="text-gray-400"><i class="fas fa-envelope mr-2"></i> hello@artandlens.com</p>
465
+ </div>
466
+ </div>
467
+
468
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500">
469
+ <p>&copy; 2023 Art & Lens. All rights reserved.</p>
470
+ </div>
471
+ </div>
472
+ </footer>
473
+
474
+ <!-- Image Modal -->
475
+ <div id="image-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden modal">
476
+ <div class="bg-white rounded-lg max-w-4xl w-full max-h-screen overflow-auto">
477
+ <div class="p-4">
478
+ <div class="flex justify-between items-center mb-4">
479
+ <h3 id="modal-title" class="text-xl font-bold text-gray-800"></h3>
480
+ <button onclick="closeImageModal()" class="text-gray-500 hover:text-gray-700">
481
+ <i class="fas fa-times"></i>
482
+ </button>
483
+ </div>
484
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
485
+ <div class="bg-gray-100 rounded-lg overflow-hidden">
486
+ <img id="modal-image" src="" alt="" class="w-full h-auto object-cover">
487
+ </div>
488
+ <div>
489
+ <div class="flex items-center mb-4">
490
+ <div id="like-container" class="mr-4 cursor-pointer" onclick="toggleLike()">
491
+ <i id="like-icon" class="far fa-heart text-2xl text-gray-500"></i>
492
+ <span id="like-count" class="ml-1 text-gray-700">0</span>
493
+ </div>
494
+ <div id="delete-btn" class="hidden">
495
+ <button onclick="deleteImage()" class="text-red-500 hover:text-red-700">
496
+ <i class="fas fa-trash-alt mr-1"></i> Delete
497
+ </button>
498
+ </div>
499
+ </div>
500
+ <p id="modal-description" class="text-gray-700 mb-4"></p>
501
+ <p id="modal-date" class="text-sm text-gray-500"></p>
502
+ </div>
503
+ </div>
504
+ </div>
505
+ </div>
506
+ </div>
507
+
508
+ <!-- Add Image Modal -->
509
+ <div id="add-image-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden modal">
510
+ <div class="bg-white rounded-lg max-w-md w-full p-6 auth-modal">
511
+ <div class="flex justify-between items-center mb-4">
512
+ <h3 id="add-modal-title" class="text-xl font-bold text-gray-800">Add New Image</h3>
513
+ <button onclick="closeAddImageModal()" class="text-gray-500 hover:text-gray-700">
514
+ <i class="fas fa-times"></i>
515
+ </button>
516
+ </div>
517
+ <form id="add-image-form" onsubmit="addNewImage(event)">
518
+ <div class="mb-4">
519
+ <label class="block text-gray-700 mb-2" for="image-title">Title</label>
520
+ <input type="text" id="image-title" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
521
+ </div>
522
+ <div class="mb-4">
523
+ <label class="block text-gray-700 mb-2" for="image-description">Description</label>
524
+ <textarea id="image-description" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea>
525
+ </div>
526
+ <div class="mb-4">
527
+ <label class="block text-gray-700 mb-2" for="image-upload">Image</label>
528
+ <div class="border-2 border-dashed border-gray-300 rounded-md p-4 text-center">
529
+ <input type="file" id="image-upload" accept="image/*" class="hidden" required>
530
+ <label for="image-upload" class="cursor-pointer">
531
+ <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-2"></i>
532
+ <p class="text-gray-600">Click to upload or drag and drop</p>
533
+ <p class="text-sm text-gray-500 mt-1">PNG, JPG, GIF up to 5MB</p>
534
+ </label>
535
+ </div>
536
+ <div id="image-preview" class="mt-2 hidden">
537
+ <img id="preview-image" src="" alt="Preview" class="max-h-40 rounded-md">
538
+ </div>
539
+ </div>
540
+ <input type="hidden" id="image-category">
541
+ <button type="submit" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 transition">
542
+ Add Image
543
+ </button>
544
+ </form>
545
+ </div>
546
+ </div>
547
+
548
+ <!-- Auth Modal -->
549
+ <div id="auth-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden modal">
550
+ <div class="bg-white rounded-lg max-w-md w-full p-6 auth-modal">
551
+ <div class="flex justify-between items-center mb-4">
552
+ <h3 class="text-xl font-bold text-gray-800" id="auth-modal-title">Login</h3>
553
+ <button onclick="toggleAuthModal()" class="text-gray-500 hover:text-gray-700">
554
+ <i class="fas fa-times"></i>
555
+ </button>
556
+ </div>
557
+ <div id="login-form">
558
+ <div class="mb-4">
559
+ <label class="block text-gray-700 mb-2" for="login-email">Email</label>
560
+ <input type="email" id="login-email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
561
+ </div>
562
+ <div class="mb-6">
563
+ <label class="block text-gray-700 mb-2" for="login-password">Password</label>
564
+ <input type="password" id="login-password" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
565
+ </div>
566
+ <button onclick="login()" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 transition mb-4">
567
+ Login
568
+ </button>
569
+ <p class="text-center text-gray-600">
570
+ Don't have an account?
571
+ <button onclick="showRegisterForm()" class="text-indigo-600 hover:text-indigo-800">Register</button>
572
+ </p>
573
+ </div>
574
+ <div id="register-form" class="hidden">
575
+ <div class="mb-4">
576
+ <label class="block text-gray-700 mb-2" for="register-name">Name</label>
577
+ <input type="text" id="register-name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
578
+ </div>
579
+ <div class="mb-4">
580
+ <label class="block text-gray-700 mb-2" for="register-email">Email</label>
581
+ <input type="email" id="register-email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
582
+ </div>
583
+ <div class="mb-6">
584
+ <label class="block text-gray-700 mb-2" for="register-password">Password</label>
585
+ <input type="password" id="register-password" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
586
+ </div>
587
+ <button onclick="register()" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 transition mb-4">
588
+ Register
589
+ </button>
590
+ <p class="text-center text-gray-600">
591
+ Already have an account?
592
+ <button onclick="showLoginForm()" class="text-indigo-600 hover:text-indigo-800">Login</button>
593
+ </p>
594
+ </div>
595
+ </div>
596
+ </div>
597
+
598
+ <script>
599
+ // State management
600
+ let currentUser = null;
601
+ let currentPage = 'home';
602
+ let images = {
603
+ artist: [
604
+ {
605
+ id: 1,
606
+ title: "Abstract Harmony",
607
+ description: "A vibrant exploration of color and form, this piece represents the artist's emotional journey through 2020.",
608
+ imageUrl: "https://source.unsplash.com/random/600x400/?abstract,art",
609
+ likes: 24,
610
+ date: "2023-05-15",
611
+ liked: false
612
+ },
613
+ {
614
+ id: 2,
615
+ title: "Urban Dreams",
616
+ description: "Mixed media on canvas depicting the contrast between urban architecture and natural elements.",
617
+ imageUrl: "https://source.unsplash.com/random/600x400/?city,art",
618
+ likes: 18,
619
+ date: "2023-03-22",
620
+ liked: false
621
+ },
622
+ {
623
+ id: 3,
624
+ title: "Ocean Memories",
625
+ description: "Acrylic painting inspired by childhood summers spent by the sea.",
626
+ imageUrl: "https://source.unsplash.com/random/600x400/?ocean,art",
627
+ likes: 31,
628
+ date: "2023-01-10",
629
+ liked: false
630
+ }
631
+ ],
632
+ photographer: [
633
+ {
634
+ id: 1,
635
+ title: "Mountain Dawn",
636
+ description: "Captured during a sunrise hike in the Rockies, this photo showcases the breathtaking beauty of alpine light.",
637
+ imageUrl: "https://source.unsplash.com/random/600x400/?mountain",
638
+ likes: 42,
639
+ date: "2023-06-08",
640
+ liked: false
641
+ },
642
+ {
643
+ id: 2,
644
+ title: "Street Life",
645
+ description: "Candid street photography from downtown Chicago, capturing the energy of urban life.",
646
+ imageUrl: "https://source.unsplash.com/random/600x400/?street,photography",
647
+ likes: 29,
648
+ date: "2023-04-17",
649
+ liked: false
650
+ },
651
+ {
652
+ id: 3,
653
+ title: "Silent Forest",
654
+ description: "Morning mist in an old-growth forest creates an ethereal atmosphere.",
655
+ imageUrl: "https://source.unsplash.com/random/600x400/?forest",
656
+ likes: 36,
657
+ date: "2023-02-03",
658
+ liked: false
659
+ }
660
+ ]
661
+ };
662
+
663
+ // DOM Elements
664
+ const homePage = document.getElementById('home-page');
665
+ const artistPage = document.getElementById('artist-page');
666
+ const photographerPage = document.getElementById('photographer-page');
667
+ const aboutPage = document.getElementById('about-page');
668
+ const artistGallery = document.getElementById('artist-gallery');
669
+ const photographerGallery = document.getElementById('photographer-gallery');
670
+ const imageModal = document.getElementById('image-modal');
671
+ const modalImage = document.getElementById('modal-image');
672
+ const modalTitle = document.getElementById('modal-title');
673
+ const modalDescription = document.getElementById('modal-description');
674
+ const modalDate = document.getElementById('modal-date');
675
+ const likeIcon = document.getElementById('like-icon');
676
+ const likeCount = document.getElementById('like-count');
677
+ const deleteBtn = document.getElementById('delete-btn');
678
+ const addImageModal = document.getElementById('add-image-modal');
679
+ const addModalTitle = document.getElementById('add-modal-title');
680
+ const imageCategory = document.getElementById('image-category');
681
+ const authModal = document.getElementById('auth-modal');
682
+ const authModalTitle = document.getElementById('auth-modal-title');
683
+ const loginForm = document.getElementById('login-form');
684
+ const registerForm = document.getElementById('register-form');
685
+ const authBtn = document.getElementById('auth-btn');
686
+ const addArtistBtn = document.getElementById('add-artist-btn');
687
+ const addPhotographerBtn = document.getElementById('add-photographer-btn');
688
+ const mobileMenu = document.getElementById('mobile-menu');
689
+ const imageUpload = document.getElementById('image-upload');
690
+ const imagePreview = document.getElementById('image-preview');
691
+ const previewImage = document.getElementById('preview-image');
692
+
693
+ // Current image being viewed in modal
694
+ let currentImage = null;
695
+ let currentCategory = null;
696
+
697
+ // Initialize the page
698
+ function init() {
699
+ renderGalleries();
700
+ showHomePage();
701
+
702
+ // Event listener for image upload preview
703
+ imageUpload.addEventListener('change', function(e) {
704
+ if (e.target.files.length > 0) {
705
+ const file = e.target.files[0];
706
+ const reader = new FileReader();
707
+
708
+ reader.onload = function(event) {
709
+ previewImage.src = event.target.result;
710
+ imagePreview.classList.remove('hidden');
711
+ };
712
+
713
+ reader.readAsDataURL(file);
714
+ }
715
+ });
716
+ }
717
+
718
+ // Render galleries
719
+ function renderGalleries() {
720
+ renderGallery('artist');
721
+ renderGallery('photographer');
722
+ }
723
+
724
+ // Render a specific gallery
725
+ function renderGallery(category) {
726
+ const gallery = category === 'artist' ? artistGallery : photographerGallery;
727
+ gallery.innerHTML = '';
728
+
729
+ images[category].forEach(image => {
730
+ const galleryItem = document.createElement('div');
731
+ galleryItem.className = 'gallery-item bg-white rounded-lg shadow-md overflow-hidden cursor-pointer';
732
+ galleryItem.innerHTML = `
733
+ <div class="relative">
734
+ <img src="${image.imageUrl}" alt="${image.title}" class="w-full h-64 object-cover">
735
+ <div class="absolute bottom-2 right-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded flex items-center">
736
+ <i class="far fa-heart mr-1"></i>
737
+ <span>${image.likes}</span>
738
+ </div>
739
+ </div>
740
+ <div class="p-4">
741
+ <h3 class="font-semibold text-lg text-gray-800 mb-1">${image.title}</h3>
742
+ <p class="text-gray-600 text-sm truncate">${image.description}</p>
743
+ </div>
744
+ `;
745
+
746
+ galleryItem.addEventListener('click', () => openImageModal(category, image.id));
747
+ gallery.appendChild(galleryItem);
748
+ });
749
+ }
750
+
751
+ // Page navigation functions
752
+ function showHomePage() {
753
+ homePage.classList.remove('hidden');
754
+ artistPage.classList.add('hidden');
755
+ photographerPage.classList.add('hidden');
756
+ aboutPage.classList.add('hidden');
757
+ currentPage = 'home';
758
+ document.title = "Art & Lens | Creative Portfolio";
759
+ }
760
+
761
+ function showArtistPage() {
762
+ homePage.classList.add('hidden');
763
+ artistPage.classList.remove('hidden');
764
+ photographerPage.classList.add('hidden');
765
+ aboutPage.classList.add('hidden');
766
+ currentPage = 'artist';
767
+ document.title = "Art & Lens | Artist Gallery";
768
+ toggleMobileMenu();
769
+ }
770
+
771
+ function showPhotographerPage() {
772
+ homePage.classList.add('hidden');
773
+ artistPage.classList.add('hidden');
774
+ photographerPage.classList.remove('hidden');
775
+ aboutPage.classList.add('hidden');
776
+ currentPage = 'photographer';
777
+ document.title = "Art & Lens | Photography Gallery";
778
+ toggleMobileMenu();
779
+ }
780
+
781
+ function showAboutPage() {
782
+ homePage.classList.add('hidden');
783
+ artistPage.classList.add('hidden');
784
+ photographerPage.classList.add('hidden');
785
+ aboutPage.classList.remove('hidden');
786
+ currentPage = 'about';
787
+ document.title = "Art & Lens | About the Creators";
788
+ toggleMobileMenu();
789
+ }
790
+
791
+ // Image modal functions
792
+ function openImageModal(category, id) {
793
+ currentCategory = category;
794
+ const image = images[category].find(img => img.id === id);
795
+ currentImage = image;
796
+
797
+ modalImage.src = image.imageUrl;
798
+ modalImage.alt = image.title;
799
+ modalTitle.textContent = image.title;
800
+ modalDescription.textContent = image.description;
801
+ modalDate.textContent = `Added on ${image.date}`;
802
+ likeCount.textContent = image.likes;
803
+
804
+ if (image.liked) {
805
+ likeIcon.className = 'fas fa-heart text-2xl text-red-500';
806
+ } else {
807
+ likeIcon.className = 'far fa-heart text-2xl text-gray-500';
808
+ }
809
+
810
+ // Show delete button only for logged in users
811
+ if (currentUser) {
812
+ deleteBtn.classList.remove('hidden');
813
+ } else {
814
+ deleteBtn.classList.add('hidden');
815
+ }
816
+
817
+ imageModal.classList.remove('hidden');
818
+ }
819
+
820
+ function closeImageModal() {
821
+ imageModal.classList.add('hidden');
822
+ }
823
+
824
+ function toggleLike() {
825
+ if (!currentUser) {
826
+ toggleAuthModal();
827
+ return;
828
+ }
829
+
830
+ const image = currentImage;
831
+ const category = currentCategory;
832
+
833
+ const imageIndex = images[category].findIndex(img => img.id === image.id);
834
+
835
+ if (images[category][imageIndex].liked) {
836
+ images[category][imageIndex].liked = false;
837
+ images[category][imageIndex].likes--;
838
+ likeIcon.className = 'far fa-heart text-2xl text-gray-500';
839
+ } else {
840
+ images[category][imageIndex].liked = true;
841
+ images[category][imageIndex].likes++;
842
+ likeIcon.className = 'fas fa-heart text-2xl text-red-500';
843
+ likeIcon.classList.add('like-animation');
844
+ setTimeout(() => {
845
+ likeIcon.classList.remove('like-animation');
846
+ }, 700);
847
+ }
848
+
849
+ likeCount.textContent = images[category][imageIndex].likes;
850
+ renderGalleries();
851
+ }
852
+
853
+ function deleteImage() {
854
+ if (!currentUser) return;
855
+
856
+ const category = currentCategory;
857
+ const id = currentImage.id;
858
+
859
+ images[category] = images[category].filter(img => img.id !== id);
860
+ renderGalleries();
861
+ closeImageModal();
862
+ }
863
+
864
+ // Add image modal functions
865
+ function showAddImageModal(category) {
866
+ if (!currentUser) {
867
+ toggleAuthModal();
868
+ return;
869
+ }
870
+
871
+ imageCategory.value = category;
872
+ addModalTitle.textContent = category === 'artist' ? 'Add New Artwork' : 'Add New Photo';
873
+ document.getElementById('image-title').value = '';
874
+ document.getElementById('image-description').value = '';
875
+ imageUpload.value = '';
876
+ imagePreview.classList.add('hidden');
877
+ addImageModal.classList.remove('hidden');
878
+ }
879
+
880
+ function closeAddImageModal() {
881
+ addImageModal.classList.add('hidden');
882
+ }
883
+
884
+ function addNewImage(e) {
885
+ e.preventDefault();
886
+
887
+ const category = imageCategory.value;
888
+ const title = document.getElementById('image-title').value;
889
+ const description = document.getElementById('image-description').value;
890
+ const file = imageUpload.files[0];
891
+
892
+ if (!file) return;
893
+
894
+ // In a real app, you would upload the file to a server
895
+ // For this demo, we'll use a placeholder
896
+ const reader = new FileReader();
897
+ reader.onload = function(event) {
898
+ const newImage = {
899
+ id: images[category].length + 1,
900
+ title: title,
901
+ description: description,
902
+ imageUrl: event.target.result,
903
+ likes: 0,
904
+ date: new Date().toISOString().split('T')[0],
905
+ liked: false
906
+ };
907
+
908
+ images[category].unshift(newImage);
909
+ renderGalleries();
910
+ closeAddImageModal();
911
+
912
+ // Open the new image in the modal
913
+ setTimeout(() => {
914
+ openImageModal(category, newImage.id);
915
+ }, 300);
916
+ };
917
+
918
+ reader.readAsDataURL(file);
919
+ }
920
+
921
+ // Auth functions
922
+ function toggleAuthModal() {
923
+ if (authModal.classList.contains('hidden')) {
924
+ authModal.classList.remove('hidden');
925
+ showLoginForm();
926
+ } else {
927
+ authModal.classList.add('hidden');
928
+ }
929
+ }
930
+
931
+ function showLoginForm() {
932
+ loginForm.classList.remove('hidden');
933
+ registerForm.classList.add('hidden');
934
+ authModalTitle.textContent = 'Login';
935
+ }
936
+
937
+ function showRegisterForm() {
938
+ loginForm.classList.add('hidden');
939
+ registerForm.classList.remove('hidden');
940
+ authModalTitle.textContent = 'Register';
941
+ }
942
+
943
+ function login() {
944
+ const email = document.getElementById('login-email').value;
945
+ const password = document.getElementById('login-password').value;
946
+
947
+ // In a real app, you would validate against a backend
948
+ if (email && password) {
949
+ currentUser = {
950
+ email: email,
951
+ name: email.split('@')[0]
952
+ };
953
+
954
+ authBtn.innerHTML = `<i class="fas fa-user-circle mr-2"></i>${currentUser.name}`;
955
+ toggleAuthModal();
956
+
957
+ // Show add buttons if on artist or photographer page
958
+ if (currentPage === 'artist') {
959
+ addArtistBtn.classList.remove('hidden');
960
+ } else if (currentPage === 'photographer') {
961
+ addPhotographerBtn.classList.remove('hidden');
962
+ }
963
+
964
+ // Update delete button visibility in modal if open
965
+ if (!imageModal.classList.contains('hidden')) {
966
+ deleteBtn.classList.remove('hidden');
967
+ }
968
+ }
969
+ }
970
+
971
+ function register() {
972
+ const name = document.getElementById('register-name').value;
973
+ const email = document.getElementById('register-email').value;
974
+ const password = document.getElementById('register-password').value;
975
+
976
+ // In a real app, you would send this to a backend
977
+ if (name && email && password) {
978
+ currentUser = {
979
+ email: email,
980
+ name: name
981
+ };
982
+
983
+ authBtn.innerHTML = `<i class="fas fa-user-circle mr-2"></i>${currentUser.name}`;
984
+ toggleAuthModal();
985
+ showLoginForm();
986
+
987
+ // Show add buttons if on artist or photographer page
988
+ if (currentPage === 'artist') {
989
+ addArtistBtn.classList.remove('hidden');
990
+ } else if (currentPage === 'photographer') {
991
+ addPhotographerBtn.classList.remove('hidden');
992
+ }
993
+ }
994
+ }
995
+
996
+ function logout() {
997
+ currentUser = null;
998
+ authBtn.textContent = 'Login';
999
+
1000
+ // Hide add buttons
1001
+ addArtistBtn.classList.add('hidden');
1002
+ addPhotographerBtn.classList.add('hidden');
1003
+
1004
+ // Update delete button visibility in modal if open
1005
+ if (!imageModal.classList.contains('hidden')) {
1006
+ deleteBtn.classList.add('hidden');
1007
+ }
1008
+ }
1009
+
1010
+ // Mobile menu toggle
1011
+ function toggleMobileMenu() {
1012
+ if (mobileMenu.classList.contains('hidden')) {
1013
+ mobileMenu.classList.remove('hidden');
1014
+ } else {
1015
+ mobileMenu.classList.add('hidden');
1016
+ }
1017
+ }
1018
+
1019
+ // Initialize the app
1020
+ init();
1021
+ </script>
1022
+ <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=Doces/portfolio-3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1023
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Добавь дизайна навигации, добавь больше дизайна и информации для главной страницы