Spaces:

Doces
/

portfolio-5

Running

App Files Files Community

portfolio-5 / index.html

Doces

Add 3 files

2e0f7fe verified 11 months ago

raw

history blame contribute delete

63 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Art & Lens \| Creative Portfolio</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	.gallery-item {
	transition: all 0.3s ease;
	}
	.gallery-item:hover {
	transform: scale(1.02);
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);
	}
	.modal {
	transition: opacity 0.3s ease;
	}
	.auth-modal {
	animation: slideDown 0.4s ease-out;
	}
	@keyframes slideDown {
	from {
	transform: translateY(-50px);
	opacity: 0;
	}
	to {
	transform: translateY(0);
	opacity: 1;
	}
	}
	.like-animation {
	animation: heartBeat 0.7s;
	}
	@keyframes heartBeat {
	0% { transform: scale(1); }
	14% { transform: scale(1.3); }
	28% { transform: scale(1); }
	42% { transform: scale(1.3); }
	70% { transform: scale(1); }
	}
	.nav-link {
	position: relative;
	}
	.nav-link:after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: #4f46e5;
	transition: width 0.3s ease;
	}
	.nav-link:hover:after {
	width: 100%;
	}
	.hero-gradient {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}
	.feature-card {
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	border-radius: 12px;
	}
	.feature-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.08);
	}
	.testimonial-card {
	background: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%);
	box-shadow: 0 6px 15px rgba(0,0,0,0.05);
	}
	.stats-item {
	background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
	border-radius: 12px;
	box-shadow: 0 4px 6px rgba(0,0,0,0.05);
	}
	.filter-btn {
	transition: all 0.2s ease;
	}
	.filter-btn.active {
	background-color: #4f46e5;
	color: white;
	}
	</style>
	</head>
	<body class="bg-gray-50 font-sans">
	<!-- Navigation -->
	<nav class="bg-white/90 backdrop-blur-md shadow-sm sticky top-0 z-50 border-b border-gray-100">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="flex justify-between items-center h-20">
	<div class="flex items-center">
	<a href="#" class="flex items-center" onclick="showHomePage()">
	<div class="flex items-center">
	<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">
	<i class="fas fa-palette text-white text-lg"></i>
	</div>
	<span class="text-2xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">Art & Lens</span>
	</div>
	</a>
	</div>
	<div class="hidden md:flex items-center space-x-8">
	<a href="#" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium relative" onclick="showHomePage()">Home</a>
	<a href="#" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium relative" onclick="showArtistPage()">Artist</a>
	<a href="#" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium relative" onclick="showPhotographerPage()">Photographer</a>
	<a href="#" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium relative" onclick="showAboutPage()">About</a>
	<a href="#" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium relative">Blog</a>
	<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()">
	<i class="fas fa-user-circle mr-2"></i>Login
	</button>
	</div>
	<div class="md:hidden">
	<button class="text-gray-700 focus:outline-none" onclick="toggleMobileMenu()">
	<svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
	</svg>
	</button>
	</div>
	</div>
	</div>
	<!-- Mobile menu -->
	<div id="mobile-menu" class="md:hidden hidden bg-white/95 backdrop-blur-md">
	<div class="px-2 pt-2 pb-3 space-y-2 sm:px-3">
	<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>
	<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>
	<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>
	<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>
	<a href="#" class="block px-3 py-2 text-gray-700 hover:text-indigo-600 hover:bg-gray-50 rounded-md">Blog</a>
	<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()">
	Login
	</button>
	</div>
	</div>
	</nav>

	<!-- Main Content -->
	<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<!-- Home Page -->
	<div id="home-page">
	<!-- Hero Section -->
	<section class="hero-gradient rounded-3xl p-8 md:p-12 my-12 text-white overflow-hidden relative">
	<div class="max-w-3xl relative z-10">
	<h1 class="text-4xl md:text-5xl font-bold mb-6">Where Art Meets Photography</h1>
	<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>
	<div class="flex flex-col sm:flex-row gap-4">
	<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">
	Explore Artworks <i class="fas fa-arrow-right ml-2"></i>
	</button>
	<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">
	View Photography <i class="fas fa-camera ml-2"></i>
	</button>
	</div>
	</div>
	<div class="absolute -right-20 -bottom-20 opacity-20 z-0">
	<i class="fas fa-palette text-[300px]"></i>
	</div>
	</section>

	<!-- Featured Works -->
	<section class="my-16">
	<div class="flex justify-between items-center mb-10">
	<h2 class="text-3xl font-bold text-gray-800">Featured Works</h2>
	<a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
	View all <i class="fas fa-arrow-right ml-2"></i>
	</a>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
	<div class="feature-card bg-white rounded-xl overflow-hidden cursor-pointer" onclick="openImageModal('artist', 1)">
	<div class="h-64 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 relative overflow-hidden">
	<img src="https://source.unsplash.com/random/600x400/?abstract,art" alt="Abstract Harmony" class="w-full h-full object-cover">
	<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-6">
	<div>
	<h3 class="text-white text-xl font-bold">Abstract Harmony</h3>
	<p class="text-white/80">Mixed Media • 2023</p>
	</div>
	</div>
	</div>
	</div>

	<div class="feature-card bg-white rounded-xl overflow-hidden cursor-pointer" onclick="openImageModal('photographer', 1)">
	<div class="h-64 bg-gradient-to-r from-blue-400 via-green-500 to-teal-500 relative overflow-hidden">
	<img src="https://source.unsplash.com/random/600x400/?mountain" alt="Mountain Dawn" class="w-full h-full object-cover">
	<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-6">
	<div>
	<h3 class="text-white text-xl font-bold">Mountain Dawn</h3>
	<p class="text-white/80">Landscape Photography • 2023</p>
	</div>
	</div>
	</div>
	</div>

	<div class="feature-card bg-white rounded-xl overflow-hidden cursor-pointer" onclick="openImageModal('artist', 2)">
	<div class="h-64 bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500 relative overflow-hidden">
	<img src="https://source.unsplash.com/random/600x400/?city,art" alt="Urban Dreams" class="w-full h-full object-cover">
	<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-6">
	<div>
	<h3 class="text-white text-xl font-bold">Urban Dreams</h3>
	<p class="text-white/80">Acrylic on Canvas • 2023</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Stats Section -->
	<section class="my-16 bg-gradient-to-r from-indigo-50 to-purple-50 rounded-3xl p-8 md:p-12">
	<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
	<div class="stats-item p-6 text-center">
	<div class="text-4xl font-bold text-indigo-600 mb-2">42+</div>
	<div class="text-gray-600">Artworks</div>
	</div>
	<div class="stats-item p-6 text-center">
	<div class="text-4xl font-bold text-purple-600 mb-2">36+</div>
	<div class="text-gray-600">Photographs</div>
	</div>
	<div class="stats-item p-6 text-center">
	<div class="text-4xl font-bold text-pink-600 mb-2">8</div>
	<div class="text-gray-600">Exhibitions</div>
	</div>
	<div class="stats-item p-6 text-center">
	<div class="text-4xl font-bold text-blue-600 mb-2">5K+</div>
	<div class="text-gray-600">Visitors</div>
	</div>
	</div>
	</section>

	<!-- About Creators -->
	<section class="my-16">
	<h2 class="text-3xl font-bold text-gray-800 mb-10 text-center">Meet The Creators</h2>

	<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
	<div class="bg-white rounded-2xl shadow-md overflow-hidden">
	<div class="h-64 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 flex items-center justify-center relative">
	<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">
	</div>
	<div class="pt-20 pb-8 px-6 text-center">
	<h3 class="text-2xl font-bold text-gray-800 mb-1">Emma Richardson</h3>
	<p class="text-indigo-600 mb-4">Visual Artist</p>
	<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>
	<button onclick="showArtistPage()" class="bg-indigo-600 text-white px-6 py-2 rounded-full hover:bg-indigo-700 transition">
	View Artworks <i class="fas fa-arrow-right ml-2"></i>
	</button>
	</div>
	</div>

	<div class="bg-white rounded-2xl shadow-md overflow-hidden">
	<div class="h-64 bg-gradient-to-r from-blue-400 via-green-500 to-teal-500 flex items-center justify-center relative">
	<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">
	</div>
	<div class="pt-20 pb-8 px-6 text-center">
	<h3 class="text-2xl font-bold text-gray-800 mb-1">James Carter</h3>
	<p class="text-indigo-600 mb-4">Photographer</p>
	<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>
	<button onclick="showPhotographerPage()" class="bg-indigo-600 text-white px-6 py-2 rounded-full hover:bg-indigo-700 transition">
	View Photos <i class="fas fa-arrow-right ml-2"></i>
	</button>
	</div>
	</div>
	</div>
	</section>

	<!-- Testimonials -->
	<section class="my-16">
	<h2 class="text-3xl font-bold text-gray-800 mb-10 text-center">What People Say</h2>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
	<div class="testimonial-card p-8 rounded-2xl">
	<div class="text-yellow-400 text-2xl mb-4">
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	</div>
	<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>
	<div class="flex items-center">
	<img src="https://source.unsplash.com/random/80x80/?woman" alt="Sarah Johnson" class="w-12 h-12 rounded-full mr-4 object-cover">
	<div>
	<h4 class="font-bold text-gray-800">Sarah Johnson</h4>
	<p class="text-gray-500 text-sm">Art Collector</p>
	</div>
	</div>
	</div>

	<div class="testimonial-card p-8 rounded-2xl">
	<div class="text-yellow-400 text-2xl mb-4">
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	</div>
	<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>
	<div class="flex items-center">
	<img src="https://source.unsplash.com/random/80x80/?man" alt="Michael Chen" class="w-12 h-12 rounded-full mr-4 object-cover">
	<div>
	<h4 class="font-bold text-gray-800">Michael Chen</h4>
	<p class="text-gray-500 text-sm">Travel Blogger</p>
	</div>
	</div>
	</div>

	<div class="testimonial-card p-8 rounded-2xl">
	<div class="text-yellow-400 text-2xl mb-4">
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star-half-alt"></i>
	</div>
	<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>
	<div class="极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：

	```html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Art & Lens \| Creative Portfolio</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	.gallery-item {
	transition: all 0.3s ease;
	}
	.gallery-item:hover {
	transform: scale(1.02);
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);
	}
	.modal {
	transition: opacity 0.3s ease;
	}
	.auth-modal {
	animation: slideDown 0.4s ease-out;
	}
	@keyframes slideDown {
	from {
	transform: translateY(-50px);
	opacity: 0;
	}
	to {
	transform: translateY(0);
	opacity: 1;
	}
	}
	.like-animation {
	animation: heartBeat 0.7s;
	}
	@keyframes heartBeat {
	0% { transform: scale(1); }
	14% { transform: scale(1.3); }
	28% { transform: scale(1); }
	42% { transform: scale(1.3); }
	70% { transform: scale(1); }
	}
	.nav-link {
	position: relative;
	}
	.nav-link:after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: #4f46e5;
	transition: width 0.3s ease;
	}
	.nav-link:hover:after {
	width: 100%;
	}
	.hero-gradient {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}
	.feature-card {
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	border-radius: 12px;
	}
	.feature-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.08);
	}
	.testimonial-card {
	background: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%);
	box-shadow: 0 6px 15px rgba(0,0,0,0.05);
	}
	.stats-item {
	background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
	border-radius: 12px;
	box-shadow: 极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：

	```html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Art & Lens \| Creative Portfolio</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	.gallery-item {
	transition: all 0.3s ease;
	}
	.gallery-item:hover {
	transform: scale(1.02);
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);
	}
	.modal {
	transition: opacity 0.3s ease;
	}
	.auth-modal {
	animation: slideDown 0.4s ease-out;
	}
	@keyframes slideDown {
	from {
	transform: translateY(-50px);
	opacity: 0;
	}
	to {
	transform: translateY(0);
	opacity: 1;
	}
	}
	.like-animation {
	animation: heartBeat 0.7s;
	}
	@keyframes heartBeat {
	0% { transform: scale(1); }
	14% { transform: scale(1.3); }
	28% { transform: scale(1); }
	42% { transform: scale(1.3); }
	70% { transform: scale(1); }
	}
	.nav-link {
	position: relative;
	}
	.nav-link:after {
	content: '';
	position: absolute;
	width: 极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：

	```html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Art & Lens \| Creative Portfolio</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：

	```html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Art & Lens \| Creative Portfolio</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	.gallery-item {
	transition: all 0.3s ease;
	}
	.gallery-item:hover {
	transform: scale(1.02);
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);
	}
	.modal {
	transition: opacity 0.3s ease;
	}
	.auth-modal {
	animation: slideDown 0.4s ease-out;
	}
	@keyframes slideDown {
	from {
	transform: translateY(-50px);
	opacity: 0;
	}
	to {
	transform: translateY(0);
	opacity: 1;
	}
	}
	.like-animation {
	animation: heartBeat 0.7s;
	}
	@keyframes heartBeat {
	0% { transform: scale(1); }
	14% { transform: scale(1.3); }
	28% { transform: scale(1); }
	42% { transform: scale(1.3); }
	70% { transform: scale(1); }
	}
	.nav-link {
	position: relative;
	}
	.nav-link:after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: #4f46e5;
	transition: width 0.3s ease;
	}
	.nav-link:hover:after {
	width: 100%;
	}
	.hero-gradient {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}
	.feature-card {
	transition: all 0.3s cubic-bezier(0.25, 极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：

	```html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Art & Lens \| Creative Portfolio</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	.gallery-item {
	transition: all 0.3s ease;
	}
	.gallery-item:hover {
	transform: scale(1.02);
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);
	}
	.modal {
	transition: opacity 0.3s ease;
	}
	.auth-modal {
	animation: slideDown 0.4s ease-out;
	}
	@keyframes slideDown {
	from {
	transform: translateY(-50px);
	opacity: 0;
	}
	to {
	transform: translateY(0);
	opacity: 1;
	}
	}
	.like-animation {
	animation: heartBeat 0.7s;
	}
	@keyframes heartBeat {
	0% { transform: scale(1); }
	14% { transform: scale(1.3); }
	28% { transform: scale(1); }
	42% { transform: scale(1.3); }
	70% { transform: scale(1); }
	}
	.nav-link {
	position: relative;
	}
	.nav-link:after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: #4f46e5;
	transition: width 0.3s ease;
	}
	.nav-link:hover:after {
	width: 100%;
	}
	.hero-gradient {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}
	.feature-card {
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	border-radius: 12px;
	}
	.feature-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.08);
	}
	.testimonial-card {
	background: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%);
	box-shadow: 0 6px 15px rgba(0,0,0,0.05);
	}
	.stats-item {
	background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
	border-radius: 12px;
	box-shadow: 0 4px 6px rgba(0,0,0,0.05);
	}
	.filter-btn {
	transition: all 0.2s ease;
	}
	.filter-btn.active {
	background-color: #4f46e5;
	color: white;
	}
	</style>
	</head>
	<body class="bg-gray-50 font-sans">
	<!-- Navigation -->
	<nav class="bg-white/90 backdrop-blur-md shadow-sm sticky top-0 z-50 border-b border-gray-100">
	<div class="max-w-7xl mx-auto px-4 sm:px极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：

	```html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：

	```html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Art & Lens \| Creative Portfolio</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	.gallery-item {
	transition: all 0.3s ease;
	}
	.gallery-item:hover {
	transform: scale(1.02);
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);
	}
	.modal {
	transition: opacity 0.3s ease;
	}
	.auth-modal {
	animation: slideDown 0.4s ease-out;
	}
	@keyframes slideDown {
	from {
	transform: translateY(-50px);
	opacity: 0;
	}
	to {
	transform: translateY(0);
	opacity: 1;
	}
	}
	.like-animation {
	animation: heartBeat 0.7s;
	}
	@keyframes heartBeat {
	0% { transform: scale(1); }
	14% { transform: scale(1.3); }
	28% { transform: scale(1); }
	42% { transform: scale(1.3); }
	70% { transform: scale(1); }
	}
	.nav-link {
	position: relative;
	}
	.nav-link:after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: #4f46e5;
	transition: width 0.3s ease;
	}
	.nav-link:hover:after {
	width: 100%;
	}
	.hero-gradient {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}
	.feature-card {
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	border-radius: 12px;
	}
	.feature-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：

	```html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Art & Lens \| Creative Portfolio</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	.gallery-item {
	transition: all 0.3s ease;
	}
	.gallery-item:hover {
	transform: scale(1.02);
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);
	}
	.modal {
	transition: opacity 0.3s ease;
	}
	.auth-modal {
	animation: slideDown 0.4s ease-out;
	}
	@keyframes slideDown {
	from {
	transform: translateY(-50px);
	opacity: 0;
	}
	to {
	transform: translateY(0);
	opacity: 1;
	}
	}
	.like-animation {
	animation: heartBeat 0.7s;
	}
	@keyframes heartBeat {
	0% { transform: scale(1); }
	14% { transform: scale(1.3); }
	28% { transform: scale(1); }
	42% { transform: scale(1.3); }
	70% { transform: scale(1); }
	}
	.nav-link {
	position: relative;
	}
	.nav-link:after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: #4f46e5;
	transition: width 0.3s ease;
	}
	.nav-link:hover:after {
	width: 100%;
	}
	.hero-gradient {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}
	.feature-card {
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	border-radius: 12px;
	}
	.feature-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.08);
	}
	.testimonial-card {
	background: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%);
	box-shadow: 0 6px 15px rgba(0,0,0,0.05);
	}
	.stats-item {
	background: linear-gradient(135deg, #f9fafb 极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：

	```html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Art & Lens \| Creative Portfolio</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	.gallery-item {
	transition: all 0.3s ease;
	}
	.gallery-item:hover {
	transform: scale(1.02);
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);
	}
	.modal {
	transition: opacity 0.3s ease;
	}
	.auth-modal {
	animation: slideDown 0.4s ease-out;
	}
	@keyframes slideDown {
	from {
	transform: translateY(-50px);
	opacity: 0;
	}
	to {
	transform: translateY(0);
	opacity: 1;
	}
	}
	.like-animation {
	animation: heartBeat 极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：

	```html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Art & Lens \| Creative Portfolio</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	.gallery-item {
	transition: all 0.3s ease;
	}
	.gallery-item:hover {
	transform: scale(1.02);
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);
	}
	.modal {
	transition: opacity 0.3s ease;
	}
	.auth-modal {
	animation: slideDown 0.4s ease-out;
	}
	@keyframes slideDown {
	from {
	transform: translateY(-50px);
	opacity: 0;
	}
	to {
	transform: translateY(0);
	opacity: 1;
	}
	}
	.like-animation {
	animation: heartBeat 0.7s;
	}
	@keyframes heartBeat {
	0% { transform: scale(1); }
	14% { transform: scale(1.3); }
	28% { transform: scale(1); }
	42% { transform: scale(1.3); }
	70% { transform: scale(1); }
	}
	.nav-link {
	position: relative;
	}
	.nav-link:after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: #4f46e5;
	transition: width 0.3s ease;
	}
	.nav-link:hover:after {
	width: 100%;
	}
	.hero-gradient {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}
	.feature-card {
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	border-radius: 12px;
	}
	.feature-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.08);
	}
	.testimonial-card {
	background: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%);
	box-shadow: 0 6px 15px rgba(0,0,0,0.05);
	}
	.stats-item {
	background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
	border-radius: 12px;
	box-shadow: 0 4px 6px rgba(0,0,0,0.05);
	}
	.filter-btn {
	transition: all 0.2s ease;
	}
	.filter-btn.active {
	background-color: #4f46e5;
	color: white;
	}
	</style>
	</head>
	<body class="bg-gray-50 font-sans">
	<!-- Navigation -->
	<nav class="bg-white/90 backdrop-blur-md shadow-sm sticky top极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：

	```html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Art & Lens \| Creative Portfolio</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	.gallery-item {
	transition: all 0.3s ease;
	}
	.gallery-item:hover {
	transform: scale(1.02);
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);
	}
	.modal {
	transition: opacity 0.3s ease;
	}
	.auth-modal {
	animation: slideDown 0.4s ease-out;
	}
	@keyframes slideDown {
	from {
	transform: translateY(-50px);
	opacity: 0;
	}
	to {
	transform: translateY(0);
	opacity: 1;
	}
	}
	.like-animation {
	animation: heartBeat 0.7s;
	}
	@keyframes heartBeat {
	0% { transform: scale(1); }
	14% { transform: scale(1.3); }
	28% { transform: scale(1); }
	42% { transform: scale(1.3); }
	70% { transform: scale(极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：

	```html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Art & Lens \| Creative Portfolio</title>
	<script src="https://cdn.tailwindcss极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：

	```html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Art & Lens \| Creative Portfolio</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	.gallery-item {
	transition: all 0.3s ease;
	}
	.gallery-item:hover {
	transform: scale(1.02);
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);
	}
	.modal {
	transition: opacity 0.3s ease;
	}
	.auth-modal {
	animation: slideDown 0.4s ease-out;
	}
	@keyframes slideDown {
	from {
	transform: translateY(-50px);
	opacity: 0;
	}
	to {
	transform: translateY(0);
	opacity: 1;
	}
	}
	.like-animation {
	animation: heartBeat 0.7s;
	}
	@keyframes heartBeat {
	0% { transform: scale(1); }
	14% { transform: scale(1.3); }
	28% { transform: scale(1); }
	42% { transform: scale(1.3); }
	70% { transform: scale(1); }
	}
	.nav-link {
	position: relative;
	}
	.nav-link:after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: #4f46e5;
	transition: width 0.3s ease;
	}
	.nav-link:hover:after {
	width: 100%;
	}
	.hero-gradient {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}
	.feature-card {
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	border-radius: 12px;
	}
	.feature-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.08);
	}
	.testimonial-card {
	background: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%);
	box-shadow: 0 6px 15px rgba(0,0,0,0.05);
	}
	.stats-item {
	background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
	border-radius: 12px;
	box-shadow: 0 4px 6px rgba(0,0,0,0.05);
	}
	.filter-btn {
	transition: all 0.2s ease;
	}
	.filter-btn.active {
	background-color: #4f46e5;
	color: white;
	}
	</style>
	</head>
	<body class="bg-gray-50 font-sans">
	<!-- Navigation -->
	<nav class="bg-white/90 backdrop-blur-md shadow-sm sticky top-0 z-50 border-b border-gray-100">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="flex justify-between items-center h-20">
	<div class="flex items-center">
	<a href="#" class="flex items-center" onclick="showHomePage()">
	<div class="flex items-center">
	<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">
	<i class="fas fa-palette text-white text-lg"></i>
	</div>
	<span class="极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：

	```html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Art & Lens \| Creative Portfolio</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	.gallery-item {
	transition: all 0.3s ease;
	}
	.gallery-item:hover {
	transform: scale(1.02);
	box-shadow: 0 10px 20px rgba极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：

	```html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Art & Lens \| Creative Portfolio</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	.gallery-item {
	transition: all 0.3s ease;
	}
	.gallery-item:hover {
	transform: scale(1.02);
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);
	}
	.modal {
	transition: opacity 0.3s ease;
	}
	.auth-modal {
	animation: slideDown 0.4s ease-out;
	}
	@keyframes slideDown {
	from {
	transform: translateY(-50px);
	opacity: 0;
	}
	to {
	transform: translateY(0);
	opacity: 1;
	}
	}
	.like-animation {
	animation: heartBeat 0.7s;
	}
	@keyframes heartBeat {
	0% { transform: scale(1); }
	14% { transform: scale(1.3); }
	28% { transform: scale(1); }
	42% { transform: scale(1.3); }
	70% { transform: scale(1); }
	}
	.nav-link {
	position: relative;
	}
	.nav-link:after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: #4f46e5;
	transition: width 0.3s ease;
	}
	.nav-link:hover:after {
	width: 100%;
	}
	.hero-gradient {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}
	.feature-card {
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	border-radius: 12px;
	}
	.feature-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.08);
	}
	.testimonial-card {
	background: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%);
	box-shadow: 0 6px 15px rgba(0,0,0,0.05);
	}
	.stats极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：

	```html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Art & Lens \| Creative Portfolio</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	.gallery-item {
	transition: all 0.3s ease;
	}
	.gallery-item:hover {
	transform: scale(1.02);
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);
	}
	.modal {
	transition: opacity 0.3s ease;
	}
	.auth-modal {
	animation: slideDown 0.4s ease-out;
	}
	@极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：

	```html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Art & Lens \| Creative Portfolio</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	.gallery-item {
	transition: all 0.3s ease;
	}
	.gallery-item:hover {
	transform: scale(1.02);
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);
	}
	.modal {
	transition: opacity 0.3s ease;
	}
	.auth-modal {
	animation: slideDown 0.4s ease-out;
	}
	@keyframes slideDown {
	from {
	transform: translateY(-50px);
	opacity: 0;
	}
	to {
	transform: translateY(0);
	opacity: 1;
	}
	}
	.like-animation {
	animation: heartBeat 0.7s;
	}
	@keyframes heartBeat {
	0% { transform: scale(1); }
	14% { transform: scale(1.3); }
	28% { transform: scale(1); }
	42% { transform: scale(1.3); }
	70% { transform: scale(1); }
	}
	.nav-link {
	position: relative;
	}
	.nav-link:after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: #4f46极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：

	```html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：

	```html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Art & Lens \| Creative Portfolio</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	.gallery-item {
	transition: all 0.3极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：

	```html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Art & Lens \| Creative Portfolio</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	.gallery-item {
	transition: all 0.3s ease;
	}
	.gallery-item:hover {
	transform: scale(1.02);
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);
	}
	.modal {
	transition: opacity 0.3s ease;
	}
	.auth-modal {
	animation: slideDown 0.4s ease-out;
	}
	@keyframes slideDown {
	from {
	transform: translateY(-50px);
	opacity: 0;
	}
	to {
	transform: translateY(0);
	opacity: 1;
	}
	}
	.like-animation {
	animation: heartBeat 0.7s;
	}
	@keyframes heartBeat {
	0% { transform: scale(1); }
	14% { transform: scale(1.3); }
	28% { transform: scale(1); }
	42% { transform: scale(1.3); }
	70% { transform: scale(1); }
	}
	.nav-link {
	position: relative;
	}
	.nav-link:after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: #4f46e5;
	transition: width 0.3s ease;
	}
	.nav-link:hover:after {
	width: 100%;
	}
	.hero-gradient {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}
	.feature-card {
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	border-radius: 12px;
	}
	.feature-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.08);
	}
	.testimonial-card {
	background: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%);
	box-shadow: 0 6px 15px rgba(0,0,0,0.05);
	}
	.stats-item {
	background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
	border-radius: 12px;
	box-shadow: 0 4px 6px rgba(0,0,0,0.05);
	}
	.filter-btn {
	transition: all 0.2s ease;
	}
	.filter-btn.active {
	background-color: #4f46e5;
	color: white;
	}
	</style>
	</head>
	<body class="bg-gray-50 font-sans">
	<!-- Navigation -->
	<nav class="bg-white/90 backdrop-blur-md shadow-sm sticky top-0 z-50 border-b border-gray-100">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="flex justify-between items-center h-20">
	<div class="flex items-center">
	<a href="#" class="flex items-center" onclick="showHomePage()">
	<div class="flex items-center">
	<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">
	<i class="fas fa-palette text-white text-lg"></i>
	</div>
	<span class="text-2xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">Art & Lens</span>
	</div>
	</a>
	</div>
	<div class="hidden md:flex items-center space极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：

	```html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Art & Lens \| Creative Portfolio</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	.gallery-item {
	transition: all 0.3s ease;
	}
	.gallery-item:hover {
	transform: scale(1.02);
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);
	}
	.modal {
	transition: opacity 极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：

	```html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Art & Lens \| Creative Portfolio</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	.gallery-item {
	transition: all 0.3s ease;
	}
	.gallery-item:hover {
	transform: scale(1.02);
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);
	}
	.modal {
	transition: opacity 0.3s ease;
	}
	.auth-modal {
	animation: slideDown 0.4s ease-out;
	}
	@keyframes slideDown {
	from {
	transform: translateY(-50px);
	opacity: 0;
	}
	to {
	transform: translateY(0);
	opacity: 1;
	}
	}
	.like-animation {
	animation: heartBeat 0.7s;
	}
	@keyframes heartBeat {
	0% { transform: scale(1); }
	14% { transform: scale(1.3); }
	28% { transform: scale(1); }
	42% { transform: scale(1.3); }
	70% { transform: scale(1); }
	}
	.nav-link {
	position: relative;
	}
	.nav-link:after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: #4f46e5;
	transition: width 0.3s ease;
	}
	.nav-link:hover极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：

	```html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Art & Lens \| Creative Portfolio</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	.gallery-item {
	transition: all 0.3s ease;
	}
	.gallery-item:hover {
	transform: scale(1.02);
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);
	}
	.modal {
	transition: opacity 0.3s ease;
	}
	.auth-modal {
	animation: slideDown 0.4s ease-out;
	}
	@keyframes slideDown {
	from {
	transform: translateY(-50px);
	opacity: 0;
	}
	to {
	transform: translateY(0);
	opacity: 1;
	}
	}
	.like-animation {
	animation: heartBeat 0.7s;
	}
	@keyframes heartBeat {
	0% { transform: scale(1); }
	14% { transform: scale(1.3); }
	28% { transform: scale(1); }
	42% { transform: scale(1.3); }
	70% { transform: scale(1); }
	}
	.nav-link {
	position: relative;
	}
	.nav-link:after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: #4f46e5;
	transition: width 0.3s ease;
	}
	.nav-link:hover:after {
	width: 100%;
	}
	.hero-gradient {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}
	.feature-card {
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	border-radius: 12px;
	}
	.feature-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.08);
	}
	.testimonial-card {
	background: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%);
	box-shadow: 0 6px 15px rgba(0,0,0,极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：

	```html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Art & Lens \| Creative Portfolio</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：

	```html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Art & Lens \| Creative Portfolio</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	.gallery-item {
	transition: all 0.3s ease;
	}
	.gallery-item:hover {
	transform: scale(1.02);
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);
	}
	.modal {
	transition: opacity 0.3s ease;
	}
	.auth-modal {
	animation: slideDown 0.4s ease-out;
	}
	@keyframes slideDown {
	from {
	transform: translateY(-50px);
	opacity: 0;
	}
	to {
	transform: translateY(0);
	opacity: 1;
	}
	}
	.like-animation {
	animation: heartBeat 0.7s;
	}
	@keyframes heartBeat {
	0% { transform: scale(1); }
	14% { transform: scale(1.3); }
	28% { transform: scale(1); }
	42% { transform: scale极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：

	```html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Art & Lens \| Creative Portfolio</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	.gallery-item {
	transition: all 0.3s ease;
	}
	.gallery-item:hover {
	transform: scale(1.02);
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);
	}
	.modal {
	transition: opacity 0.3s ease;
	}
	.auth-modal {
	animation: slideDown 0.4s极好的！我已经添加了画廊过滤器功能。以下是更新后的HTML文件，包含了艺术家和摄影师画廊的过滤选项：

	```html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Art & Lens \| Creative Portfolio</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	.gallery-item {
	transition: all 0.3s ease;
	}
	.gallery-item:hover {
	transform: scale(1.02);
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);
	}
	.modal {
	transition: opacity 0.3s ease;
	}
	.auth-modal {
	animation: slideDown 0.4s ease-out;
	}
	@keyframes slideDown {
	from {
	transform: translateY(-50px);
	opacity: 0;
	}
	to {
	transform: translateY(0);
	opacity: 1;
	}
	}
	.like-animation {
	animation: heartBeat 0.7s;
	}
	@keyframes heartBeat {
	0% { transform: scale(1); }
	14% { transform: scale(1.3); }
	28% { transform: scale(1); }
	42% { transform: scale(1.3); }
	70% { transform: scale(1); }
	}
	.nav-link {
	position: relative;
	}
	.nav-link:after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: #4f46e5;
	transition: width 0.3s ease;
	}
	.nav-link:hover:after {
	width: 100%;
	}
	.hero-gradient {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}
	.feature-card {
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	border-radius: 12px;
	}
	.feature-card
	</html>