Hugging Face's logo

Spaces:
Doces
/
portfolio-5
Running

App Files Community
Doces commited on
Commit
2e0f7fe
·
verified ·
1 Parent(s): c849119

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1641 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Portfolio 5
3
- emoji: 🐢
4
- colorFrom: gray
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: portfolio-5
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: purple
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,1641 @@
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
+ .filter-btn {
80
+ transition: all 0.2s ease;
81
+ }
82
+ .filter-btn.active {
83
+ background-color: #4f46e5;
84
+ color: white;
85
+ }
86
+ </style>
87
+ </head>
88
+ <body class="bg-gray-50 font-sans">
89
+ <!-- Navigation -->
90
+ <nav class="bg-white/90 backdrop-blur-md shadow-sm sticky top-0 z-50 border-b border-gray-100">
91
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
92
+ <div class="flex justify-between items-center h-20">
93
+ <div class="flex items-center">
94
+ <a href="#" class="flex items-center" onclick="showHomePage()">
95
+ <div class="flex items-center">
96
+ <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">
97
+ <i class="fas fa-palette text-white text-lg"></i>
98
+ </div>
99
+ <span class="text-2xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">Art & Lens</span>
100
+ </div>
101
+ </a>
102
+ </div>
103
+ <div class="hidden md:flex items-center space-x-8">
104
+ <a href="#" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium relative" onclick="showHomePage()">Home</a>
105
+ <a href="#" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium relative" onclick="showArtistPage()">Artist</a>
106
+ <a href="#" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium relative" onclick="showPhotographerPage()">Photographer</a>
107
+ <a href="#" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium relative" onclick="showAboutPage()">About</a>
108
+ <a href="#" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium relative">Blog</a>
109
+ <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()">
110
+ <i class="fas fa-user-circle mr-2"></i>Login
111
+ </button>
112
+ </div>
113
+ <div class="md:hidden">
114
+ <button class="text-gray-700 focus:outline-none" onclick="toggleMobileMenu()">
115
+ <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
116
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
117
+ </svg>
118
+ </button>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ <!-- Mobile menu -->
123
+ <div id="mobile-menu" class="md:hidden hidden bg-white/95 backdrop-blur-md">
124
+ <div class="px-2 pt-2 pb-3 space-y-2 sm:px-3">
125
+ <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>
126
+ <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>
127
+ <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>
128
+ <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>
129
+ <a href="#" class="block px-3 py-2 text-gray-700 hover:text-indigo-600 hover:bg-gray-50 rounded-md">Blog</a>
130
+ <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()">
131
+ Login
132
+ </button>
133
+ </div>
134
+ </div>
135
+ </nav>
136
+
137
+ <!-- Main Content -->
138
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
139
+ <!-- Home Page -->
140
+ <div id="home-page">
141
+ <!-- Hero Section -->
142
+ <section class="hero-gradient rounded-3xl p-8 md:p-12 my-12 text-white overflow-hidden relative">
143
+ <div class="max-w-3xl relative z-10">
144
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Where Art Meets Photography</h1>
145
+ <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>
146
+ <div class="flex flex-col sm:flex-row gap-4">
147
+ <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">
148
+ Explore Artworks <i class="fas fa-arrow-right ml-2"></i>
149
+ </button>
150
+ <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">
151
+ View Photography <i class="fas fa-camera ml-2"></i>
152
+ </button>
153
+ </div>
154
+ </div>
155
+ <div class="absolute -right-20 -bottom-20 opacity-20 z-0">
156
+ <i class="fas fa-palette text-[300px]"></i>
157
+ </div>
158
+ </section>
159
+
160
+ <!-- Featured Works -->
161
+ <section class="my-16">
162
+ <div class="flex justify-between items-center mb-10">
163
+ <h2 class="text-3xl font-bold text-gray-800">Featured Works</h2>
164
+ <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
165
+ View all <i class="fas fa-arrow-right ml-2"></i>
166
+ </a>
167
+ </div>
168
+
169
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
170
+ <div class="feature-card bg-white rounded-xl overflow-hidden cursor-pointer" onclick="openImageModal('artist', 1)">
171
+ <div class="h-64 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 relative overflow-hidden">
172
+ <img src="https://source.unsplash.com/random/600x400/?abstract,art" alt="Abstract Harmony" class="w-full h-full object-cover">
173
+ <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-6">
174
+ <div>
175
+ <h3 class="text-white text-xl font-bold">Abstract Harmony</h3>
176
+ <p class="text-white/80">Mixed Media • 2023</p>
177
+ </div>
178
+ </div>
179
+ </div>
180
+ </div>
181
+
182
+ <div class="feature-card bg-white rounded-xl overflow-hidden cursor-pointer" onclick="openImageModal('photographer', 1)">
183
+ <div class="h-64 bg-gradient-to-r from-blue-400 via-green-500 to-teal-500 relative overflow-hidden">
184
+ <img src="https://source.unsplash.com/random/600x400/?mountain" alt="Mountain Dawn" class="w-full h-full object-cover">
185
+ <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-6">
186
+ <div>
187
+ <h3 class="text-white text-xl font-bold">Mountain Dawn</h3>
188
+ <p class="text-white/80">Landscape Photography • 2023</p>
189
+ </div>
190
+ </div>
191
+ </div>
192
+ </div>
193
+
194
+ <div class="feature-card bg-white rounded-xl overflow-hidden cursor-pointer" onclick="openImageModal('artist', 2)">
195
+ <div class="h-64 bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500 relative overflow-hidden">
196
+ <img src="https://source.unsplash.com/random/600x400/?city,art" alt="Urban Dreams" class="w-full h-full object-cover">
197
+ <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-6">
198
+ <div>
199
+ <h3 class="text-white text-xl font-bold">Urban Dreams</h3>
200
+ <p class="text-white/80">Acrylic on Canvas • 2023</p>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ </section>
207
+
208
+ <!-- Stats Section -->
209
+ <section class="my-16 bg-gradient-to-r from-indigo-50 to-purple-50 rounded-3xl p-8 md:p-12">
210
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
211
+ <div class="stats-item p-6 text-center">
212
+ <div class="text-4xl font-bold text-indigo-600 mb-2">42+</div>
213
+ <div class="text-gray-600">Artworks</div>
214
+ </div>
215
+ <div class="stats-item p-6 text-center">
216
+ <div class="text-4xl font-bold text-purple-600 mb-2">36+</div>
217
+ <div class="text-gray-600">Photographs</div>
218
+ </div>
219
+ <div class="stats-item p-6 text-center">
220
+ <div class="text-4xl font-bold text-pink-600 mb-2">8</div>
221
+ <div class="text-gray-600">Exhibitions</div>
222
+ </div>
223
+ <div class="stats-item p-6 text-center">
224
+ <div class="text-4xl font-bold text-blue-600 mb-2">5K+</div>
225
+ <div class="text-gray-600">Visitors</div>
226
+ </div>
227
+ </div>
228
+ </section>
229
+
230
+ <!-- About Creators -->
231
+ <section class="my-16">
232
+ <h2 class="text-3xl font-bold text-gray-800 mb-10 text-center">Meet The Creators</h2>
233
+
234
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
235
+ <div class="bg-white rounded-2xl shadow-md overflow-hidden">
236
+ <div class="h-64 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 flex items-center justify-center relative">
237
+ <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">
238
+ </div>
239
+ <div class="pt-20 pb-8 px-6 text-center">
240
+ <h3 class="text-2xl font-bold text-gray-800 mb-1">Emma Richardson</h3>
241
+ <p class="text-indigo-600 mb-4">Visual Artist</p>
242
+ <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>
243
+ <button onclick="showArtistPage()" class="bg-indigo-600 text-white px-6 py-2 rounded-full hover:bg-indigo-700 transition">
244
+ View Artworks <i class="fas fa-arrow-right ml-2"></i>
245
+ </button>
246
+ </div>
247
+ </div>
248
+
249
+ <div class="bg-white rounded-2xl shadow-md overflow-hidden">
250
+ <div class="h-64 bg-gradient-to-r from-blue-400 via-green-500 to-teal-500 flex items-center justify-center relative">
251
+ <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">
252
+ </div>
253
+ <div class="pt-20 pb-8 px-6 text-center">
254
+ <h3 class="text-2xl font-bold text-gray-800 mb-1">James Carter</h3>
255
+ <p class="text-indigo-600 mb-4">Photographer</p>
256
+ <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>
257
+ <button onclick="showPhotographerPage()" class="bg-indigo-600 text-white px-6 py-2 rounded-full hover:bg-indigo-700 transition">
258
+ View Photos <i class="fas fa-arrow-right ml-2"></i>
259
+ </button>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ </section>
264
+
265
+ <!-- Testimonials -->
266
+ <section class="my-16">
267
+ <h2 class="text-3xl font-bold text-gray-800 mb-10 text-center">What People Say</h2>
268
+
269
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
270
+ <div class="testimonial-card p-8 rounded-2xl">
271
+ <div class="text-yellow-400 text-2xl mb-4">
272
+ <i class="fas fa-star"></i>
273
+ <i class="fas fa-star"></i>
274
+ <i class="fas fa-star"></i>
275
+ <i class="fas fa-star"></i>
276
+ <i class="fas fa-star"></i>
277
+ </div>
278
+ <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>
279
+ <div class="flex items-center">
280
+ <img src="https://source.unsplash.com/random/80x80/?woman" alt="Sarah Johnson" class="w-12 h-12 rounded-full mr-4 object-cover">
281
+ <div>
282
+ <h4 class="font-bold text-gray-800">Sarah Johnson</h4>
283
+ <p class="text-gray-500 text-sm">Art Collector</p>
284
+ </div>
285
+ </div>
286
+ </div>
287
+
288
+ <div class="testimonial-card p-8 rounded-2xl">
289
+ <div class="text-yellow-400 text-2xl mb-4">
290
+ <i class="fas fa-star"></i>
291
+ <i class="fas fa-star"></i>
292
+ <i class="fas fa-star"></i>
293
+ <i class="fas fa-star"></i>
294
+ <i class="fas fa-star"></i>
295
+ </div>
296
+ <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>
297
+ <div class="flex items-center">
298
+ <img src="https://source.unsplash.com/random/80x80/?man" alt="Michael Chen" class="w-12 h-12 rounded-full mr-4 object-cover">
299
+ <div>
300
+ <h4 class="font-bold text-gray-800">Michael Chen</h4>
301
+ <p class="text-gray-500 text-sm">Travel Blogger</p>
302
+ </div>
303
+ </div>
304
+ </div>
305
+
306
+ <div class="testimonial-card p-8 rounded-2xl">
307
+ <div class="text-yellow-400 text-2xl mb-4">
308
+ <i class="fas fa-star"></i>
309
+ <i class="fas fa-star"></i>
310
+ <i class="fas fa-star"></i>
311
+ <i class="fas fa-star"></i>
312
+ <i class="fas fa-star-half-alt"></i>
313
+ </div>
314
+ <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>
315
+ <div class="极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：
316
+
317
+ ```html
318
+ <!DOCTYPE html>
319
+ <html lang="en">
320
+ <head>
321
+ <meta charset="UTF-8">
322
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
323
+ <title>Art & Lens | Creative Portfolio</title>
324
+ <script src="https://cdn.tailwindcss.com"></script>
325
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
326
+ <style>
327
+ .gallery-item {
328
+ transition: all 0.3s ease;
329
+ }
330
+ .gallery-item:hover {
331
+ transform: scale(1.02);
332
+ box-shadow: 0 10px 20px rgba(0,0,0,0.2);
333
+ }
334
+ .modal {
335
+ transition: opacity 0.3s ease;
336
+ }
337
+ .auth-modal {
338
+ animation: slideDown 0.4s ease-out;
339
+ }
340
+ @keyframes slideDown {
341
+ from {
342
+ transform: translateY(-50px);
343
+ opacity: 0;
344
+ }
345
+ to {
346
+ transform: translateY(0);
347
+ opacity: 1;
348
+ }
349
+ }
350
+ .like-animation {
351
+ animation: heartBeat 0.7s;
352
+ }
353
+ @keyframes heartBeat {
354
+ 0% { transform: scale(1); }
355
+ 14% { transform: scale(1.3); }
356
+ 28% { transform: scale(1); }
357
+ 42% { transform: scale(1.3); }
358
+ 70% { transform: scale(1); }
359
+ }
360
+ .nav-link {
361
+ position: relative;
362
+ }
363
+ .nav-link:after {
364
+ content: '';
365
+ position: absolute;
366
+ width: 0;
367
+ height: 2px;
368
+ bottom: 0;
369
+ left: 0;
370
+ background-color: #4f46e5;
371
+ transition: width 0.3s ease;
372
+ }
373
+ .nav-link:hover:after {
374
+ width: 100%;
375
+ }
376
+ .hero-gradient {
377
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
378
+ }
379
+ .feature-card {
380
+ transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
381
+ border-radius: 12px;
382
+ }
383
+ .feature-card:hover {
384
+ transform: translateY(-5px);
385
+ box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.08);
386
+ }
387
+ .testimonial-card {
388
+ background: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%);
389
+ box-shadow: 0 6px 15px rgba(0,0,0,0.05);
390
+ }
391
+ .stats-item {
392
+ background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
393
+ border-radius: 12px;
394
+ box-shadow: 极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：
395
+
396
+ ```html
397
+ <!DOCTYPE html>
398
+ <html lang="en">
399
+ <head>
400
+ <meta charset="UTF-8">
401
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
402
+ <title>Art & Lens | Creative Portfolio</title>
403
+ <script src="https://cdn.tailwindcss.com"></script>
404
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
405
+ <style>
406
+ .gallery-item {
407
+ transition: all 0.3s ease;
408
+ }
409
+ .gallery-item:hover {
410
+ transform: scale(1.02);
411
+ box-shadow: 0 10px 20px rgba(0,0,0,0.2);
412
+ }
413
+ .modal {
414
+ transition: opacity 0.3s ease;
415
+ }
416
+ .auth-modal {
417
+ animation: slideDown 0.4s ease-out;
418
+ }
419
+ @keyframes slideDown {
420
+ from {
421
+ transform: translateY(-50px);
422
+ opacity: 0;
423
+ }
424
+ to {
425
+ transform: translateY(0);
426
+ opacity: 1;
427
+ }
428
+ }
429
+ .like-animation {
430
+ animation: heartBeat 0.7s;
431
+ }
432
+ @keyframes heartBeat {
433
+ 0% { transform: scale(1); }
434
+ 14% { transform: scale(1.3); }
435
+ 28% { transform: scale(1); }
436
+ 42% { transform: scale(1.3); }
437
+ 70% { transform: scale(1); }
438
+ }
439
+ .nav-link {
440
+ position: relative;
441
+ }
442
+ .nav-link:after {
443
+ content: '';
444
+ position: absolute;
445
+ width: 极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：
446
+
447
+ ```html
448
+ <!DOCTYPE html>
449
+ <html lang="en">
450
+ <head>
451
+ <meta charset="UTF-8">
452
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
453
+ <title>Art & Lens | Creative Portfolio</title>
454
+ <script src="https://cdn.tailwindcss.com"></script>
455
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：
456
+
457
+ ```html
458
+ <!DOCTYPE html>
459
+ <html lang="en">
460
+ <head>
461
+ <meta charset="UTF-8">
462
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
463
+ <title>Art & Lens | Creative Portfolio</title>
464
+ <script src="https://cdn.tailwindcss.com"></script>
465
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
466
+ <style>
467
+ .gallery-item {
468
+ transition: all 0.3s ease;
469
+ }
470
+ .gallery-item:hover {
471
+ transform: scale(1.02);
472
+ box-shadow: 0 10px 20px rgba(0,0,0,0.2);
473
+ }
474
+ .modal {
475
+ transition: opacity 0.3s ease;
476
+ }
477
+ .auth-modal {
478
+ animation: slideDown 0.4s ease-out;
479
+ }
480
+ @keyframes slideDown {
481
+ from {
482
+ transform: translateY(-50px);
483
+ opacity: 0;
484
+ }
485
+ to {
486
+ transform: translateY(0);
487
+ opacity: 1;
488
+ }
489
+ }
490
+ .like-animation {
491
+ animation: heartBeat 0.7s;
492
+ }
493
+ @keyframes heartBeat {
494
+ 0% { transform: scale(1); }
495
+ 14% { transform: scale(1.3); }
496
+ 28% { transform: scale(1); }
497
+ 42% { transform: scale(1.3); }
498
+ 70% { transform: scale(1); }
499
+ }
500
+ .nav-link {
501
+ position: relative;
502
+ }
503
+ .nav-link:after {
504
+ content: '';
505
+ position: absolute;
506
+ width: 0;
507
+ height: 2px;
508
+ bottom: 0;
509
+ left: 0;
510
+ background-color: #4f46e5;
511
+ transition: width 0.3s ease;
512
+ }
513
+ .nav-link:hover:after {
514
+ width: 100%;
515
+ }
516
+ .hero-gradient {
517
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
518
+ }
519
+ .feature-card {
520
+ transition: all 0.3s cubic-bezier(0.25, 极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：
521
+
522
+ ```html
523
+ <!DOCTYPE html>
524
+ <html lang="en">
525
+ <head>
526
+ <meta charset="UTF-8">
527
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
528
+ <title>Art & Lens | Creative Portfolio</title>
529
+ <script src="https://cdn.tailwindcss.com"></script>
530
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
531
+ <style>
532
+ .gallery-item {
533
+ transition: all 0.3s ease;
534
+ }
535
+ .gallery-item:hover {
536
+ transform: scale(1.02);
537
+ box-shadow: 0 10px 20px rgba(0,0,0,0.2);
538
+ }
539
+ .modal {
540
+ transition: opacity 0.3s ease;
541
+ }
542
+ .auth-modal {
543
+ animation: slideDown 0.4s ease-out;
544
+ }
545
+ @keyframes slideDown {
546
+ from {
547
+ transform: translateY(-50px);
548
+ opacity: 0;
549
+ }
550
+ to {
551
+ transform: translateY(0);
552
+ opacity: 1;
553
+ }
554
+ }
555
+ .like-animation {
556
+ animation: heartBeat 0.7s;
557
+ }
558
+ @keyframes heartBeat {
559
+ 0% { transform: scale(1); }
560
+ 14% { transform: scale(1.3); }
561
+ 28% { transform: scale(1); }
562
+ 42% { transform: scale(1.3); }
563
+ 70% { transform: scale(1); }
564
+ }
565
+ .nav-link {
566
+ position: relative;
567
+ }
568
+ .nav-link:after {
569
+ content: '';
570
+ position: absolute;
571
+ width: 0;
572
+ height: 2px;
573
+ bottom: 0;
574
+ left: 0;
575
+ background-color: #4f46e5;
576
+ transition: width 0.3s ease;
577
+ }
578
+ .nav-link:hover:after {
579
+ width: 100%;
580
+ }
581
+ .hero-gradient {
582
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
583
+ }
584
+ .feature-card {
585
+ transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
586
+ border-radius: 12px;
587
+ }
588
+ .feature-card:hover {
589
+ transform: translateY(-5px);
590
+ box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.08);
591
+ }
592
+ .testimonial-card {
593
+ background: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%);
594
+ box-shadow: 0 6px 15px rgba(0,0,0,0.05);
595
+ }
596
+ .stats-item {
597
+ background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
598
+ border-radius: 12px;
599
+ box-shadow: 0 4px 6px rgba(0,0,0,0.05);
600
+ }
601
+ .filter-btn {
602
+ transition: all 0.2s ease;
603
+ }
604
+ .filter-btn.active {
605
+ background-color: #4f46e5;
606
+ color: white;
607
+ }
608
+ </style>
609
+ </head>
610
+ <body class="bg-gray-50 font-sans">
611
+ <!-- Navigation -->
612
+ <nav class="bg-white/90 backdrop-blur-md shadow-sm sticky top-0 z-50 border-b border-gray-100">
613
+ <div class="max-w-7xl mx-auto px-4 sm:px极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：
614
+
615
+ ```html
616
+ <!DOCTYPE html>
617
+ <html lang="en">
618
+ <head>
619
+ <meta charset="UTF-8">
620
+ <meta name="viewport" content="width=device-width, initial-scale=1.极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：
621
+
622
+ ```html
623
+ <!DOCTYPE html>
624
+ <html lang="en">
625
+ <head>
626
+ <meta charset="UTF-8">
627
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
628
+ <title>Art & Lens | Creative Portfolio</title>
629
+ <script src="https://cdn.tailwindcss.com"></script>
630
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
631
+ <style>
632
+ .gallery-item {
633
+ transition: all 0.3s ease;
634
+ }
635
+ .gallery-item:hover {
636
+ transform: scale(1.02);
637
+ box-shadow: 0 10px 20px rgba(0,0,0,0.2);
638
+ }
639
+ .modal {
640
+ transition: opacity 0.3s ease;
641
+ }
642
+ .auth-modal {
643
+ animation: slideDown 0.4s ease-out;
644
+ }
645
+ @keyframes slideDown {
646
+ from {
647
+ transform: translateY(-50px);
648
+ opacity: 0;
649
+ }
650
+ to {
651
+ transform: translateY(0);
652
+ opacity: 1;
653
+ }
654
+ }
655
+ .like-animation {
656
+ animation: heartBeat 0.7s;
657
+ }
658
+ @keyframes heartBeat {
659
+ 0% { transform: scale(1); }
660
+ 14% { transform: scale(1.3); }
661
+ 28% { transform: scale(1); }
662
+ 42% { transform: scale(1.3); }
663
+ 70% { transform: scale(1); }
664
+ }
665
+ .nav-link {
666
+ position: relative;
667
+ }
668
+ .nav-link:after {
669
+ content: '';
670
+ position: absolute;
671
+ width: 0;
672
+ height: 2px;
673
+ bottom: 0;
674
+ left: 0;
675
+ background-color: #4f46e5;
676
+ transition: width 0.3s ease;
677
+ }
678
+ .nav-link:hover:after {
679
+ width: 100%;
680
+ }
681
+ .hero-gradient {
682
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
683
+ }
684
+ .feature-card {
685
+ transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
686
+ border-radius: 12px;
687
+ }
688
+ .feature-card:hover {
689
+ transform: translateY(-5px);
690
+ box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：
691
+
692
+ ```html
693
+ <!DOCTYPE html>
694
+ <html lang="en">
695
+ <head>
696
+ <meta charset="UTF-8">
697
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
698
+ <title>Art & Lens | Creative Portfolio</title>
699
+ <script src="https://cdn.tailwindcss.com"></script>
700
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
701
+ <style>
702
+ .gallery-item {
703
+ transition: all 0.3s ease;
704
+ }
705
+ .gallery-item:hover {
706
+ transform: scale(1.02);
707
+ box-shadow: 0 10px 20px rgba(0,0,0,0.2);
708
+ }
709
+ .modal {
710
+ transition: opacity 0.3s ease;
711
+ }
712
+ .auth-modal {
713
+ animation: slideDown 0.4s ease-out;
714
+ }
715
+ @keyframes slideDown {
716
+ from {
717
+ transform: translateY(-50px);
718
+ opacity: 0;
719
+ }
720
+ to {
721
+ transform: translateY(0);
722
+ opacity: 1;
723
+ }
724
+ }
725
+ .like-animation {
726
+ animation: heartBeat 0.7s;
727
+ }
728
+ @keyframes heartBeat {
729
+ 0% { transform: scale(1); }
730
+ 14% { transform: scale(1.3); }
731
+ 28% { transform: scale(1); }
732
+ 42% { transform: scale(1.3); }
733
+ 70% { transform: scale(1); }
734
+ }
735
+ .nav-link {
736
+ position: relative;
737
+ }
738
+ .nav-link:after {
739
+ content: '';
740
+ position: absolute;
741
+ width: 0;
742
+ height: 2px;
743
+ bottom: 0;
744
+ left: 0;
745
+ background-color: #4f46e5;
746
+ transition: width 0.3s ease;
747
+ }
748
+ .nav-link:hover:after {
749
+ width: 100%;
750
+ }
751
+ .hero-gradient {
752
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
753
+ }
754
+ .feature-card {
755
+ transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
756
+ border-radius: 12px;
757
+ }
758
+ .feature-card:hover {
759
+ transform: translateY(-5px);
760
+ box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.08);
761
+ }
762
+ .testimonial-card {
763
+ background: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%);
764
+ box-shadow: 0 6px 15px rgba(0,0,0,0.05);
765
+ }
766
+ .stats-item {
767
+ background: linear-gradient(135deg, #f9fafb 极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：
768
+
769
+ ```html
770
+ <!DOCTYPE html>
771
+ <html lang="en">
772
+ <head>
773
+ <meta charset="UTF-8">
774
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
775
+ <title>Art & Lens | Creative Portfolio</title>
776
+ <script src="https://cdn.tailwindcss.com"></script>
777
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
778
+ <style>
779
+ .gallery-item {
780
+ transition: all 0.3s ease;
781
+ }
782
+ .gallery-item:hover {
783
+ transform: scale(1.02);
784
+ box-shadow: 0 10px 20px rgba(0,0,0,0.2);
785
+ }
786
+ .modal {
787
+ transition: opacity 0.3s ease;
788
+ }
789
+ .auth-modal {
790
+ animation: slideDown 0.4s ease-out;
791
+ }
792
+ @keyframes slideDown {
793
+ from {
794
+ transform: translateY(-50px);
795
+ opacity: 0;
796
+ }
797
+ to {
798
+ transform: translateY(0);
799
+ opacity: 1;
800
+ }
801
+ }
802
+ .like-animation {
803
+ animation: heartBeat 极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：
804
+
805
+ ```html
806
+ <!DOCTYPE html>
807
+ <html lang="en">
808
+ <head>
809
+ <meta charset="UTF-8">
810
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
811
+ <title>Art & Lens | Creative Portfolio</title>
812
+ <script src="https://cdn.tailwindcss.com"></script>
813
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
814
+ <style>
815
+ .gallery-item {
816
+ transition: all 0.3s ease;
817
+ }
818
+ .gallery-item:hover {
819
+ transform: scale(1.02);
820
+ box-shadow: 0 10px 20px rgba(0,0,0,0.2);
821
+ }
822
+ .modal {
823
+ transition: opacity 0.3s ease;
824
+ }
825
+ .auth-modal {
826
+ animation: slideDown 0.4s ease-out;
827
+ }
828
+ @keyframes slideDown {
829
+ from {
830
+ transform: translateY(-50px);
831
+ opacity: 0;
832
+ }
833
+ to {
834
+ transform: translateY(0);
835
+ opacity: 1;
836
+ }
837
+ }
838
+ .like-animation {
839
+ animation: heartBeat 0.7s;
840
+ }
841
+ @keyframes heartBeat {
842
+ 0% { transform: scale(1); }
843
+ 14% { transform: scale(1.3); }
844
+ 28% { transform: scale(1); }
845
+ 42% { transform: scale(1.3); }
846
+ 70% { transform: scale(1); }
847
+ }
848
+ .nav-link {
849
+ position: relative;
850
+ }
851
+ .nav-link:after {
852
+ content: '';
853
+ position: absolute;
854
+ width: 0;
855
+ height: 2px;
856
+ bottom: 0;
857
+ left: 0;
858
+ background-color: #4f46e5;
859
+ transition: width 0.3s ease;
860
+ }
861
+ .nav-link:hover:after {
862
+ width: 100%;
863
+ }
864
+ .hero-gradient {
865
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
866
+ }
867
+ .feature-card {
868
+ transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
869
+ border-radius: 12px;
870
+ }
871
+ .feature-card:hover {
872
+ transform: translateY(-5px);
873
+ box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.08);
874
+ }
875
+ .testimonial-card {
876
+ background: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%);
877
+ box-shadow: 0 6px 15px rgba(0,0,0,0.05);
878
+ }
879
+ .stats-item {
880
+ background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
881
+ border-radius: 12px;
882
+ box-shadow: 0 4px 6px rgba(0,0,0,0.05);
883
+ }
884
+ .filter-btn {
885
+ transition: all 0.2s ease;
886
+ }
887
+ .filter-btn.active {
888
+ background-color: #4f46e5;
889
+ color: white;
890
+ }
891
+ </style>
892
+ </head>
893
+ <body class="bg-gray-50 font-sans">
894
+ <!-- Navigation -->
895
+ <nav class="bg-white/90 backdrop-blur-md shadow-sm sticky top极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：
896
+
897
+ ```html
898
+ <!DOCTYPE html>
899
+ <html lang="en">
900
+ <head>
901
+ <meta charset="UTF-8">
902
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
903
+ <title>Art & Lens | Creative Portfolio</title>
904
+ <script src="https://cdn.tailwindcss.com"></script>
905
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
906
+ <style>
907
+ .gallery-item {
908
+ transition: all 0.3s ease;
909
+ }
910
+ .gallery-item:hover {
911
+ transform: scale(1.02);
912
+ box-shadow: 0 10px 20px rgba(0,0,0,0.2);
913
+ }
914
+ .modal {
915
+ transition: opacity 0.3s ease;
916
+ }
917
+ .auth-modal {
918
+ animation: slideDown 0.4s ease-out;
919
+ }
920
+ @keyframes slideDown {
921
+ from {
922
+ transform: translateY(-50px);
923
+ opacity: 0;
924
+ }
925
+ to {
926
+ transform: translateY(0);
927
+ opacity: 1;
928
+ }
929
+ }
930
+ .like-animation {
931
+ animation: heartBeat 0.7s;
932
+ }
933
+ @keyframes heartBeat {
934
+ 0% { transform: scale(1); }
935
+ 14% { transform: scale(1.3); }
936
+ 28% { transform: scale(1); }
937
+ 42% { transform: scale(1.3); }
938
+ 70% { transform: scale(极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：
939
+
940
+ ```html
941
+ <!DOCTYPE html>
942
+ <html lang="en">
943
+ <head>
944
+ <meta charset="UTF-8">
945
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
946
+ <title>Art & Lens | Creative Portfolio</title>
947
+ <script src="https://cdn.tailwindcss极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：
948
+
949
+ ```html
950
+ <!DOCTYPE html>
951
+ <html lang="en">
952
+ <head>
953
+ <meta charset="UTF-8">
954
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
955
+ <title>Art & Lens | Creative Portfolio</title>
956
+ <script src="https://cdn.tailwindcss.com"></script>
957
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
958
+ <style>
959
+ .gallery-item {
960
+ transition: all 0.3s ease;
961
+ }
962
+ .gallery-item:hover {
963
+ transform: scale(1.02);
964
+ box-shadow: 0 10px 20px rgba(0,0,0,0.2);
965
+ }
966
+ .modal {
967
+ transition: opacity 0.3s ease;
968
+ }
969
+ .auth-modal {
970
+ animation: slideDown 0.4s ease-out;
971
+ }
972
+ @keyframes slideDown {
973
+ from {
974
+ transform: translateY(-50px);
975
+ opacity: 0;
976
+ }
977
+ to {
978
+ transform: translateY(0);
979
+ opacity: 1;
980
+ }
981
+ }
982
+ .like-animation {
983
+ animation: heartBeat 0.7s;
984
+ }
985
+ @keyframes heartBeat {
986
+ 0% { transform: scale(1); }
987
+ 14% { transform: scale(1.3); }
988
+ 28% { transform: scale(1); }
989
+ 42% { transform: scale(1.3); }
990
+ 70% { transform: scale(1); }
991
+ }
992
+ .nav-link {
993
+ position: relative;
994
+ }
995
+ .nav-link:after {
996
+ content: '';
997
+ position: absolute;
998
+ width: 0;
999
+ height: 2px;
1000
+ bottom: 0;
1001
+ left: 0;
1002
+ background-color: #4f46e5;
1003
+ transition: width 0.3s ease;
1004
+ }
1005
+ .nav-link:hover:after {
1006
+ width: 100%;
1007
+ }
1008
+ .hero-gradient {
1009
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
1010
+ }
1011
+ .feature-card {
1012
+ transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
1013
+ border-radius: 12px;
1014
+ }
1015
+ .feature-card:hover {
1016
+ transform: translateY(-5px);
1017
+ box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.08);
1018
+ }
1019
+ .testimonial-card {
1020
+ background: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%);
1021
+ box-shadow: 0 6px 15px rgba(0,0,0,0.05);
1022
+ }
1023
+ .stats-item {
1024
+ background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
1025
+ border-radius: 12px;
1026
+ box-shadow: 0 4px 6px rgba(0,0,0,0.05);
1027
+ }
1028
+ .filter-btn {
1029
+ transition: all 0.2s ease;
1030
+ }
1031
+ .filter-btn.active {
1032
+ background-color: #4f46e5;
1033
+ color: white;
1034
+ }
1035
+ </style>
1036
+ </head>
1037
+ <body class="bg-gray-50 font-sans">
1038
+ <!-- Navigation -->
1039
+ <nav class="bg-white/90 backdrop-blur-md shadow-sm sticky top-0 z-50 border-b border-gray-100">
1040
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
1041
+ <div class="flex justify-between items-center h-20">
1042
+ <div class="flex items-center">
1043
+ <a href="#" class="flex items-center" onclick="showHomePage()">
1044
+ <div class="flex items-center">
1045
+ <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">
1046
+ <i class="fas fa-palette text-white text-lg"></i>
1047
+ </div>
1048
+ <span class="极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：
1049
+
1050
+ ```html
1051
+ <!DOCTYPE html>
1052
+ <html lang="en">
1053
+ <head>
1054
+ <meta charset="UTF-8">
1055
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
1056
+ <title>Art & Lens | Creative Portfolio</title>
1057
+ <script src="https://cdn.tailwindcss.com"></script>
1058
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
1059
+ <style>
1060
+ .gallery-item {
1061
+ transition: all 0.3s ease;
1062
+ }
1063
+ .gallery-item:hover {
1064
+ transform: scale(1.02);
1065
+ box-shadow: 0 10px 20px rgba极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：
1066
+
1067
+ ```html
1068
+ <!DOCTYPE html>
1069
+ <html lang="en">
1070
+ <head>
1071
+ <meta charset="UTF-8">
1072
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
1073
+ <title>Art & Lens | Creative Portfolio</title>
1074
+ <script src="https://cdn.tailwindcss.com"></script>
1075
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
1076
+ <style>
1077
+ .gallery-item {
1078
+ transition: all 0.3s ease;
1079
+ }
1080
+ .gallery-item:hover {
1081
+ transform: scale(1.02);
1082
+ box-shadow: 0 10px 20px rgba(0,0,0,0.2);
1083
+ }
1084
+ .modal {
1085
+ transition: opacity 0.3s ease;
1086
+ }
1087
+ .auth-modal {
1088
+ animation: slideDown 0.4s ease-out;
1089
+ }
1090
+ @keyframes slideDown {
1091
+ from {
1092
+ transform: translateY(-50px);
1093
+ opacity: 0;
1094
+ }
1095
+ to {
1096
+ transform: translateY(0);
1097
+ opacity: 1;
1098
+ }
1099
+ }
1100
+ .like-animation {
1101
+ animation: heartBeat 0.7s;
1102
+ }
1103
+ @keyframes heartBeat {
1104
+ 0% { transform: scale(1); }
1105
+ 14% { transform: scale(1.3); }
1106
+ 28% { transform: scale(1); }
1107
+ 42% { transform: scale(1.3); }
1108
+ 70% { transform: scale(1); }
1109
+ }
1110
+ .nav-link {
1111
+ position: relative;
1112
+ }
1113
+ .nav-link:after {
1114
+ content: '';
1115
+ position: absolute;
1116
+ width: 0;
1117
+ height: 2px;
1118
+ bottom: 0;
1119
+ left: 0;
1120
+ background-color: #4f46e5;
1121
+ transition: width 0.3s ease;
1122
+ }
1123
+ .nav-link:hover:after {
1124
+ width: 100%;
1125
+ }
1126
+ .hero-gradient {
1127
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
1128
+ }
1129
+ .feature-card {
1130
+ transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
1131
+ border-radius: 12px;
1132
+ }
1133
+ .feature-card:hover {
1134
+ transform: translateY(-5px);
1135
+ box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.08);
1136
+ }
1137
+ .testimonial-card {
1138
+ background: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%);
1139
+ box-shadow: 0 6px 15px rgba(0,0,0,0.05);
1140
+ }
1141
+ .stats极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：
1142
+
1143
+ ```html
1144
+ <!DOCTYPE html>
1145
+ <html lang="en">
1146
+ <head>
1147
+ <meta charset="UTF-8">
1148
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
1149
+ <title>Art & Lens | Creative Portfolio</title>
1150
+ <script src="https://cdn.tailwindcss.com"></script>
1151
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
1152
+ <style>
1153
+ .gallery-item {
1154
+ transition: all 0.3s ease;
1155
+ }
1156
+ .gallery-item:hover {
1157
+ transform: scale(1.02);
1158
+ box-shadow: 0 10px 20px rgba(0,0,0,0.2);
1159
+ }
1160
+ .modal {
1161
+ transition: opacity 0.3s ease;
1162
+ }
1163
+ .auth-modal {
1164
+ animation: slideDown 0.4s ease-out;
1165
+ }
1166
+ @极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：
1167
+
1168
+ ```html
1169
+ <!DOCTYPE html>
1170
+ <html lang="en">
1171
+ <head>
1172
+ <meta charset="UTF-8">
1173
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
1174
+ <title>Art & Lens | Creative Portfolio</title>
1175
+ <script src="https://cdn.tailwindcss.com"></script>
1176
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
1177
+ <style>
1178
+ .gallery-item {
1179
+ transition: all 0.3s ease;
1180
+ }
1181
+ .gallery-item:hover {
1182
+ transform: scale(1.02);
1183
+ box-shadow: 0 10px 20px rgba(0,0,0,0.2);
1184
+ }
1185
+ .modal {
1186
+ transition: opacity 0.3s ease;
1187
+ }
1188
+ .auth-modal {
1189
+ animation: slideDown 0.4s ease-out;
1190
+ }
1191
+ @keyframes slideDown {
1192
+ from {
1193
+ transform: translateY(-50px);
1194
+ opacity: 0;
1195
+ }
1196
+ to {
1197
+ transform: translateY(0);
1198
+ opacity: 1;
1199
+ }
1200
+ }
1201
+ .like-animation {
1202
+ animation: heartBeat 0.7s;
1203
+ }
1204
+ @keyframes heartBeat {
1205
+ 0% { transform: scale(1); }
1206
+ 14% { transform: scale(1.3); }
1207
+ 28% { transform: scale(1); }
1208
+ 42% { transform: scale(1.3); }
1209
+ 70% { transform: scale(1); }
1210
+ }
1211
+ .nav-link {
1212
+ position: relative;
1213
+ }
1214
+ .nav-link:after {
1215
+ content: '';
1216
+ position: absolute;
1217
+ width: 0;
1218
+ height: 2px;
1219
+ bottom: 0;
1220
+ left: 0;
1221
+ background-color: #4f46极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：
1222
+
1223
+ ```html
1224
+ <!DOCTYPE html>
1225
+ <html lang="en">
1226
+ <head>
1227
+ <极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：
1228
+
1229
+ ```html
1230
+ <!DOCTYPE html>
1231
+ <html lang="en">
1232
+ <head>
1233
+ <meta charset="UTF-8">
1234
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
1235
+ <title>Art & Lens | Creative Portfolio</title>
1236
+ <script src="https://cdn.tailwindcss.com"></script>
1237
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
1238
+ <style>
1239
+ .gallery-item {
1240
+ transition: all 0.3极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：
1241
+
1242
+ ```html
1243
+ <!DOCTYPE html>
1244
+ <html lang="en">
1245
+ <head>
1246
+ <meta charset="UTF-8">
1247
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
1248
+ <title>Art & Lens | Creative Portfolio</title>
1249
+ <script src="https://cdn.tailwindcss.com"></script>
1250
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
1251
+ <style>
1252
+ .gallery-item {
1253
+ transition: all 0.3s ease;
1254
+ }
1255
+ .gallery-item:hover {
1256
+ transform: scale(1.02);
1257
+ box-shadow: 0 10px 20px rgba(0,0,0,0.2);
1258
+ }
1259
+ .modal {
1260
+ transition: opacity 0.3s ease;
1261
+ }
1262
+ .auth-modal {
1263
+ animation: slideDown 0.4s ease-out;
1264
+ }
1265
+ @keyframes slideDown {
1266
+ from {
1267
+ transform: translateY(-50px);
1268
+ opacity: 0;
1269
+ }
1270
+ to {
1271
+ transform: translateY(0);
1272
+ opacity: 1;
1273
+ }
1274
+ }
1275
+ .like-animation {
1276
+ animation: heartBeat 0.7s;
1277
+ }
1278
+ @keyframes heartBeat {
1279
+ 0% { transform: scale(1); }
1280
+ 14% { transform: scale(1.3); }
1281
+ 28% { transform: scale(1); }
1282
+ 42% { transform: scale(1.3); }
1283
+ 70% { transform: scale(1); }
1284
+ }
1285
+ .nav-link {
1286
+ position: relative;
1287
+ }
1288
+ .nav-link:after {
1289
+ content: '';
1290
+ position: absolute;
1291
+ width: 0;
1292
+ height: 2px;
1293
+ bottom: 0;
1294
+ left: 0;
1295
+ background-color: #4f46e5;
1296
+ transition: width 0.3s ease;
1297
+ }
1298
+ .nav-link:hover:after {
1299
+ width: 100%;
1300
+ }
1301
+ .hero-gradient {
1302
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
1303
+ }
1304
+ .feature-card {
1305
+ transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
1306
+ border-radius: 12px;
1307
+ }
1308
+ .feature-card:hover {
1309
+ transform: translateY(-5px);
1310
+ box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.08);
1311
+ }
1312
+ .testimonial-card {
1313
+ background: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%);
1314
+ box-shadow: 0 6px 15px rgba(0,0,0,0.05);
1315
+ }
1316
+ .stats-item {
1317
+ background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
1318
+ border-radius: 12px;
1319
+ box-shadow: 0 4px 6px rgba(0,0,0,0.05);
1320
+ }
1321
+ .filter-btn {
1322
+ transition: all 0.2s ease;
1323
+ }
1324
+ .filter-btn.active {
1325
+ background-color: #4f46e5;
1326
+ color: white;
1327
+ }
1328
+ </style>
1329
+ </head>
1330
+ <body class="bg-gray-50 font-sans">
1331
+ <!-- Navigation -->
1332
+ <nav class="bg-white/90 backdrop-blur-md shadow-sm sticky top-0 z-50 border-b border-gray-100">
1333
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
1334
+ <div class="flex justify-between items-center h-20">
1335
+ <div class="flex items-center">
1336
+ <a href="#" class="flex items-center" onclick="showHomePage()">
1337
+ <div class="flex items-center">
1338
+ <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">
1339
+ <i class="fas fa-palette text-white text-lg"></i>
1340
+ </div>
1341
+ <span class="text-2xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">Art & Lens</span>
1342
+ </div>
1343
+ </a>
1344
+ </div>
1345
+ <div class="hidden md:flex items-center space极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：
1346
+
1347
+ ```html
1348
+ <!DOCTYPE html>
1349
+ <html lang="en">
1350
+ <head>
1351
+ <meta charset="UTF-8">
1352
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
1353
+ <title>Art & Lens | Creative Portfolio</title>
1354
+ <script src="https://cdn.tailwindcss.com"></script>
1355
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
1356
+ <style>
1357
+ .gallery-item {
1358
+ transition: all 0.3s ease;
1359
+ }
1360
+ .gallery-item:hover {
1361
+ transform: scale(1.02);
1362
+ box-shadow: 0 10px 20px rgba(0,0,0,0.2);
1363
+ }
1364
+ .modal {
1365
+ transition: opacity 极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：
1366
+
1367
+ ```html
1368
+ <!DOCTYPE html>
1369
+ <html lang="en">
1370
+ <head>
1371
+ <meta charset="UTF-8">
1372
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
1373
+ <title>Art & Lens | Creative Portfolio</title>
1374
+ <script src="https://cdn.tailwindcss.com"></script>
1375
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
1376
+ <style>
1377
+ .gallery-item {
1378
+ transition: all 0.3s ease;
1379
+ }
1380
+ .gallery-item:hover {
1381
+ transform: scale(1.02);
1382
+ box-shadow: 0 10px 20px rgba(0,0,0,0.2);
1383
+ }
1384
+ .modal {
1385
+ transition: opacity 0.3s ease;
1386
+ }
1387
+ .auth-modal {
1388
+ animation: slideDown 0.4s ease-out;
1389
+ }
1390
+ @keyframes slideDown {
1391
+ from {
1392
+ transform: translateY(-50px);
1393
+ opacity: 0;
1394
+ }
1395
+ to {
1396
+ transform: translateY(0);
1397
+ opacity: 1;
1398
+ }
1399
+ }
1400
+ .like-animation {
1401
+ animation: heartBeat 0.7s;
1402
+ }
1403
+ @keyframes heartBeat {
1404
+ 0% { transform: scale(1); }
1405
+ 14% { transform: scale(1.3); }
1406
+ 28% { transform: scale(1); }
1407
+ 42% { transform: scale(1.3); }
1408
+ 70% { transform: scale(1); }
1409
+ }
1410
+ .nav-link {
1411
+ position: relative;
1412
+ }
1413
+ .nav-link:after {
1414
+ content: '';
1415
+ position: absolute;
1416
+ width: 0;
1417
+ height: 2px;
1418
+ bottom: 0;
1419
+ left: 0;
1420
+ background-color: #4f46e5;
1421
+ transition: width 0.3s ease;
1422
+ }
1423
+ .nav-link:hover极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：
1424
+
1425
+ ```html
1426
+ <!DOCTYPE html>
1427
+ <html lang="en">
1428
+ <head>
1429
+ <meta charset="UTF-8">
1430
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
1431
+ <title>Art & Lens | Creative Portfolio</title>
1432
+ <script src="https://cdn.tailwindcss.com"></script>
1433
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
1434
+ <style>
1435
+ .gallery-item {
1436
+ transition: all 0.3s ease;
1437
+ }
1438
+ .gallery-item:hover {
1439
+ transform: scale(1.02);
1440
+ box-shadow: 0 10px 20px rgba(0,0,0,0.2);
1441
+ }
1442
+ .modal {
1443
+ transition: opacity 0.3s ease;
1444
+ }
1445
+ .auth-modal {
1446
+ animation: slideDown 0.4s ease-out;
1447
+ }
1448
+ @keyframes slideDown {
1449
+ from {
1450
+ transform: translateY(-50px);
1451
+ opacity: 0;
1452
+ }
1453
+ to {
1454
+ transform: translateY(0);
1455
+ opacity: 1;
1456
+ }
1457
+ }
1458
+ .like-animation {
1459
+ animation: heartBeat 0.7s;
1460
+ }
1461
+ @keyframes heartBeat {
1462
+ 0% { transform: scale(1); }
1463
+ 14% { transform: scale(1.3); }
1464
+ 28% { transform: scale(1); }
1465
+ 42% { transform: scale(1.3); }
1466
+ 70% { transform: scale(1); }
1467
+ }
1468
+ .nav-link {
1469
+ position: relative;
1470
+ }
1471
+ .nav-link:after {
1472
+ content: '';
1473
+ position: absolute;
1474
+ width: 0;
1475
+ height: 2px;
1476
+ bottom: 0;
1477
+ left: 0;
1478
+ background-color: #4f46e5;
1479
+ transition: width 0.3s ease;
1480
+ }
1481
+ .nav-link:hover:after {
1482
+ width: 100%;
1483
+ }
1484
+ .hero-gradient {
1485
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
1486
+ }
1487
+ .feature-card {
1488
+ transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
1489
+ border-radius: 12px;
1490
+ }
1491
+ .feature-card:hover {
1492
+ transform: translateY(-5px);
1493
+ box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.08);
1494
+ }
1495
+ .testimonial-card {
1496
+ background: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%);
1497
+ box-shadow: 0 6px 15px rgba(0,0,0,极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：
1498
+
1499
+ ```html
1500
+ <!DOCTYPE html>
1501
+ <html lang="en">
1502
+ <head>
1503
+ <meta charset="UTF-8">
1504
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
1505
+ <title>Art & Lens | Creative Portfolio</title>
1506
+ <script src="https://cdn.tailwindcss.com"></script>
1507
+ <link rel="stylesheet极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：
1508
+
1509
+ ```html
1510
+ <!DOCTYPE html>
1511
+ <html lang="en">
1512
+ <head>
1513
+ <meta charset="UTF-8">
1514
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
1515
+ <title>Art & Lens | Creative Portfolio</title>
1516
+ <script src="https://cdn.tailwindcss.com"></script>
1517
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
1518
+ <style>
1519
+ .gallery-item {
1520
+ transition: all 0.3s ease;
1521
+ }
1522
+ .gallery-item:hover {
1523
+ transform: scale(1.02);
1524
+ box-shadow: 0 10px 20px rgba(0,0,0,0.2);
1525
+ }
1526
+ .modal {
1527
+ transition: opacity 0.3s ease;
1528
+ }
1529
+ .auth-modal {
1530
+ animation: slideDown 0.4s ease-out;
1531
+ }
1532
+ @keyframes slideDown {
1533
+ from {
1534
+ transform: translateY(-50px);
1535
+ opacity: 0;
1536
+ }
1537
+ to {
1538
+ transform: translateY(0);
1539
+ opacity: 1;
1540
+ }
1541
+ }
1542
+ .like-animation {
1543
+ animation: heartBeat 0.7s;
1544
+ }
1545
+ @keyframes heartBeat {
1546
+ 0% { transform: scale(1); }
1547
+ 14% { transform: scale(1.3); }
1548
+ 28% { transform: scale(1); }
1549
+ 42% { transform: scale极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：
1550
+
1551
+ ```html
1552
+ <!DOCTYPE html>
1553
+ <html lang="en">
1554
+ <head>
1555
+ <meta charset="UTF-8">
1556
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
1557
+ <title>Art & Lens | Creative Portfolio</title>
1558
+ <script src="https://cdn.tailwindcss.com"></script>
1559
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
1560
+ <style>
1561
+ .gallery-item {
1562
+ transition: all 0.3s ease;
1563
+ }
1564
+ .gallery-item:hover {
1565
+ transform: scale(1.02);
1566
+ box-shadow: 0 10px 20px rgba(0,0,0,0.2);
1567
+ }
1568
+ .modal {
1569
+ transition: opacity 0.3s ease;
1570
+ }
1571
+ .auth-modal {
1572
+ animation: slideDown 0.4s极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：
1573
+
1574
+ ```html
1575
+ <!DOCTYPE html>
1576
+ <html lang="en">
1577
+ <head>
1578
+ <meta charset="UTF-8">
1579
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
1580
+ <title>Art & Lens | Creative Portfolio</title>
1581
+ <script src="https://cdn.tailwindcss.com"></script>
1582
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
1583
+ <style>
1584
+ .gallery-item {
1585
+ transition: all 0.3s ease;
1586
+ }
1587
+ .gallery-item:hover {
1588
+ transform: scale(1.02);
1589
+ box-shadow: 0 10px 20px rgba(0,0,0,0.2);
1590
+ }
1591
+ .modal {
1592
+ transition: opacity 0.3s ease;
1593
+ }
1594
+ .auth-modal {
1595
+ animation: slideDown 0.4s ease-out;
1596
+ }
1597
+ @keyframes slideDown {
1598
+ from {
1599
+ transform: translateY(-50px);
1600
+ opacity: 0;
1601
+ }
1602
+ to {
1603
+ transform: translateY(0);
1604
+ opacity: 1;
1605
+ }
1606
+ }
1607
+ .like-animation {
1608
+ animation: heartBeat 0.7s;
1609
+ }
1610
+ @keyframes heartBeat {
1611
+ 0% { transform: scale(1); }
1612
+ 14% { transform: scale(1.3); }
1613
+ 28% { transform: scale(1); }
1614
+ 42% { transform: scale(1.3); }
1615
+ 70% { transform: scale(1); }
1616
+ }
1617
+ .nav-link {
1618
+ position: relative;
1619
+ }
1620
+ .nav-link:after {
1621
+ content: '';
1622
+ position: absolute;
1623
+ width: 0;
1624
+ height: 2px;
1625
+ bottom: 0;
1626
+ left: 0;
1627
+ background-color: #4f46e5;
1628
+ transition: width 0.3s ease;
1629
+ }
1630
+ .nav-link:hover:after {
1631
+ width: 100%;
1632
+ }
1633
+ .hero-gradient {
1634
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
1635
+ }
1636
+ .feature-card {
1637
+ transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
1638
+ border-radius: 12px;
1639
+ }
1640
+ .feature-card
1641
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Добавь фильтры в галереи