Spaces:

Doces
/

portfolio-page

Running

App Files Files Community

Doces commited on Apr 20, 2025

Commit

7cd7be1

verified ·

1 Parent(s): f5b058e

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +761 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Portfolio Page
-emoji: 🐨
-colorFrom: pink
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: portfolio-page
+emoji: 🐳
+colorFrom: blue
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,761 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</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); }
+        }
+    </style>
+</head>
+<body class="bg-gray-50 font-sans">
+    <!-- Navigation -->
+    <nav class="bg-white shadow-lg sticky top-0 z-50">
+        <div class="max-w-7xl mx-auto px-4">
+            <div class="flex justify-between items-center h-16">
+                <div class="flex items-center">
+                    <a href="#" class="flex items-center" onclick="showHomePage()">
+                        <span class="text-2xl font-bold text-indigo-600">Art & Lens</span>
+                    </a>
+                </div>
+                <div class="hidden md:flex items-center space-x-8">
+                    <a href="#" class="text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium" onclick="showHomePage()">Home</a>
+                    <a href="#" class="text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium" onclick="showArtistPage()">Artist</a>
+                    <a href="#" class="text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium" onclick="showPhotographerPage()">Photographer</a>
+                    <a href="#" class="text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium" onclick="showAboutPage()">About</a>
+                    <button id="auth-btn" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition" onclick="toggleAuthModal()">
+                        Login
+                    </button>
+                </div>
+                <div class="md:hidden">
+                    <button class="text-gray-700 focus:outline-none" onclick="toggleMobileMenu()">
+                        <svg class="h-6 w-6" 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">
+            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
+                <a href="#" class="block px-3 py-2 text-gray-700 hover:text-indigo-600" onclick="showHomePage()">Home</a>
+                <a href="#" class="block px-3 py-2 text-gray-700 hover:text-indigo-600" onclick="showArtistPage()">Artist</a>
+                <a href="#" class="block px-3 py-2 text-gray-700 hover:text-indigo-600" onclick="showPhotographerPage()">Photographer</a>
+                <a href="#" class="block px-3 py-2 text-gray-700 hover:text-indigo-600" onclick="showAboutPage()">About</a>
+                <button class="block w-full text-left px-3 py-2 text-gray-700 hover:text-indigo-600" onclick="toggleAuthModal()">
+                    Login
+                </button>
+            </div>
+        </div>
+    </nav>
+    <!-- Main Content -->
+    <main class="max-w-7xl mx-auto px-4 py-8">
+        <!-- Home Page -->
+        <div id="home-page">
+            <div class="text-center mb-12">
+                <h1 class="text-4xl font-bold text-gray-800 mb-4">Welcome to Art & Lens</h1>
+                <p class="text-xl text-gray-600 max-w-3xl mx-auto">A collaborative portfolio showcasing the creative works of our artist and photographer. Explore their unique perspectives and creative expressions.</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
+                <div class="bg-white rounded-xl shadow-md overflow-hidden transition transform hover:-translate-y-2 cursor-pointer" onclick="showArtistPage()">
+                    <div class="h-64 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 flex items-center justify-center">
+                        <i class="fas fa-palette text-white text-7xl"></i>
+                    </div>
+                    <div class="p-6">
+                        <h2 class="text-2xl font-bold text-gray-800 mb-2">The Artist</h2>
+                        <p class="text-gray-600">Explore a world of colors, textures, and imagination through our artist's unique creations.</p>
+                        <button class="mt-4 text-indigo-600 font-medium hover:text-indigo-800">View Gallery →</button>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl shadow-md overflow-hidden transition transform hover:-translate-y-2 cursor-pointer" onclick="showPhotographerPage()">
+                    <div class="h-64 bg-gradient-to-r from-blue-400 via-green-500 to-teal-500 flex items-center justify-center">
+                        <i class="fas fa-camera text-white text-7xl"></i>
+                    </div>
+                    <div class="p-6">
+                        <h2 class="text-2xl font-bold text-gray-800 mb-2">The Photographer</h2>
+                        <p class="text-gray-600">Discover moments frozen in time through our photographer's lens, capturing beauty in the ordinary.</p>
+                        <button class="mt-4 text-indigo-600 font-medium hover:text-indigo-800">View Gallery →</button>
+                    </div>
+                </div>
+            </div>
+            <div class="text-center">
+                <button onclick="showAboutPage()" class="bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition">
+                    Learn About the Creators
+                </button>
+            </div>
+        </div>
+        <!-- Artist Page -->
+        <div id="artist-page" class="hidden">
+            <div class="flex justify-between items-center mb-8">
+                <h1 class="text-3xl font-bold text-gray-800">Artist Gallery</h1>
+                <button id="add-artist-btn" class="hidden bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition" onclick="showAddImageModal('artist')">
+                    <i class="fas fa-plus mr-2"></i>Add Artwork
+                </button>
+            </div>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" id="artist-gallery">
+                <!-- Artist gallery items will be added here by JavaScript -->
+            </div>
+        </div>
+        <!-- Photographer Page -->
+        <div id="photographer-page" class="hidden">
+            <div class="flex justify-between items-center mb-8">
+                <h1 class="text-3xl font-bold text-gray-800">Photography Gallery</h1>
+                <button id="add-photographer-btn" class="hidden bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition" onclick="showAddImageModal('photographer')">
+                    <i class="fas fa-plus mr-2"></i>Add Photo
+                </button>
+            </div>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" id="photographer-gallery">
+                <!-- Photographer gallery items will be added here by JavaScript -->
+            </div>
+        </div>
+        <!-- About Page -->
+        <div id="about-page" class="hidden">
+            <h1 class="text-3xl font-bold text-gray-800 mb-8 text-center">About the Creators</h1>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 mb-16">
+                <div class="bg-white rounded-xl 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">
+                        <i class="fas fa-palette text-white text-7xl"></i>
+                    </div>
+                    <div class="p-6">
+                        <h2 class="text-2xl font-bold text-gray-800 mb-2">Emma Richardson</h2>
+                        <h3 class="text-lg text-indigo-600 mb-4">Visual Artist</h3>
+                        <p class="text-gray-600 mb-4">Emma is a contemporary artist specializing in mixed media and abstract expressionism. Her work explores the intersection of human emotion and the natural world.</p>
+                        <div class="flex space-x-4">
+                            <a href="#" class="text-blue-500 hover:text-blue-700"><i class="fab fa-instagram text-xl"></i></a>
+                            <a href="#" class="text-blue-800 hover:text-blue-900"><i class="fab fa-facebook text-xl"></i></a>
+                            <a href="#" class="text-red-500 hover:text-red-700"><i class="fab fa-youtube text-xl"></i></a>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl 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">
+                        <i class="fas fa-camera text-white text-7xl"></i>
+                    </div>
+                    <div class="p-6">
+                        <h2 class="text-2xl font-bold text-gray-800 mb-2">James Carter</h2>
+                        <h3 class="text-lg text-indigo-600 mb-4">Photographer</h3>
+                        <p class="text-gray-600 mb-4">James is a documentary and landscape photographer with a passion for capturing authentic moments and the beauty of untouched nature.</p>
+                        <div class="flex space-x-4">
+                            <a href="#" class="text-blue-500 hover:text-blue-700"><i class="fab fa-instagram text-xl"></i></a>
+                            <a href="#" class="text-blue-800 hover:text-blue-900"><i class="fab fa-facebook text-xl"></i></a>
+                            <a href="#" class="text-red-500 hover:text-red-700"><i class="fab fa-youtube text-xl"></i></a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="bg-white rounded-xl shadow-md p-8">
+                <h2 class="text-2xl font-bold text-gray-800 mb-4">Their Story</h2>
+                <p class="text-gray-600 mb-6">Emma and James met during an art exhibition in 2015 where James was photographing the event. Recognizing the synergy between their creative visions, they began collaborating on projects that blend painting and photography in innovative ways.</p>
+                <h3 class="text-xl font-semibold text-gray-800 mb-3">Collaborative Projects</h3>
+                <ul class="list-disc pl-5 text-gray-600 space-y-2 mb-6">
+                    <li>"Light & Texture" - 2017 (Exhibited at Modern Art Gallery)</li>
+                    <li>"Urban Perspectives" - 2019 (Featured in Art Monthly)</li>
+                    <li>"Nature Reimagined" - 2021 (Traveling exhibition)</li>
+                </ul>
+                <h3 class="text-xl font-semibold text-gray-800 mb-3">Contact</h3>
+                <p class="text-gray-600">For inquiries about their work or potential collaborations:</p>
+                <p class="text-indigo-600 mt-2">hello@artandlens.com</p>
+                <p class="text-gray-600">+1 (555) 123-4567</p>
+            </div>
+        </div>
+    </main>
+    <!-- Image Modal -->
+    <div id="image-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden modal">
+        <div class="bg-white rounded-lg max-w-4xl w-full max-h-screen overflow-auto">
+            <div class="p-4">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 id="modal-title" class="text-xl font-bold text-gray-800"></h3>
+                    <button onclick="closeImageModal()" class="text-gray-500 hover:text-gray-700">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <div class="bg-gray-100 rounded-lg overflow-hidden">
+                        <img id="modal-image" src="" alt="" class="w-full h-auto object-cover">
+                    </div>
+                    <div>
+                        <div class="flex items-center mb-4">
+                            <div id="like-container" class="mr-4 cursor-pointer" onclick="toggleLike()">
+                                <i id="like-icon" class="far fa-heart text-2xl text-gray-500"></i>
+                                <span id="like-count" class="ml-1 text-gray-700">0</span>
+                            </div>
+                            <div id="delete-btn" class="hidden">
+                                <button onclick="deleteImage()" class="text-red-500 hover:text-red-700">
+                                    <i class="fas fa-trash-alt mr-1"></i> Delete
+                                </button>
+                            </div>
+                        </div>
+                        <p id="modal-description" class="text-gray-700 mb-4"></p>
+                        <p id="modal-date" class="text-sm text-gray-500"></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Add Image Modal -->
+    <div id="add-image-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden modal">
+        <div class="bg-white rounded-lg max-w-md w-full p-6 auth-modal">
+            <div class="flex justify-between items-center mb-4">
+                <h3 id="add-modal-title" class="text-xl font-bold text-gray-800">Add New Image</h3>
+                <button onclick="closeAddImageModal()" class="text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <form id="add-image-form" onsubmit="addNewImage(event)">
+                <div class="mb-4">
+                    <label class="block text-gray-700 mb-2" for="image-title">Title</label>
+                    <input type="text" id="image-title" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
+                </div>
+                <div class="mb-4">
+                    <label class="block text-gray-700 mb-2" for="image-description">Description</label>
+                    <textarea id="image-description" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea>
+                </div>
+                <div class="mb-4">
+                    <label class="block text-gray-700 mb-2" for="image-upload">Image</label>
+                    <div class="border-2 border-dashed border-gray-300 rounded-md p-4 text-center">
+                        <input type="file" id="image-upload" accept="image/*" class="hidden" required>
+                        <label for="image-upload" class="cursor-pointer">
+                            <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-2"></i>
+                            <p class="text-gray-600">Click to upload or drag and drop</p>
+                            <p class="text-sm text-gray-500 mt-1">PNG, JPG, GIF up to 5MB</p>
+                        </label>
+                    </div>
+                    <div id="image-preview" class="mt-2 hidden">
+                        <img id="preview-image" src="" alt="Preview" class="max-h-40 rounded-md">
+                    </div>
+                </div>
+                <input type="hidden" id="image-category">
+                <button type="submit" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 transition">
+                    Add Image
+                </button>
+            </form>
+        </div>
+    </div>
+    <!-- Auth Modal -->
+    <div id="auth-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden modal">
+        <div class="bg-white rounded-lg max-w-md w-full p-6 auth-modal">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-xl font-bold text-gray-800" id="auth-modal-title">Login</h3>
+                <button onclick="toggleAuthModal()" class="text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div id="login-form">
+                <div class="mb-4">
+                    <label class="block text-gray-700 mb-2" for="login-email">Email</label>
+                    <input type="email" id="login-email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
+                </div>
+                <div class="mb-6">
+                    <label class="block text-gray-700 mb-2" for="login-password">Password</label>
+                    <input type="password" id="login-password" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
+                </div>
+                <button onclick="login()" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 transition mb-4">
+                    Login
+                </button>
+                <p class="text-center text-gray-600">
+                    Don't have an account?
+                    <button onclick="showRegisterForm()" class="text-indigo-600 hover:text-indigo-800">Register</button>
+                </p>
+            </div>
+            <div id="register-form" class="hidden">
+                <div class="mb-4">
+                    <label class="block text-gray-700 mb-2" for="register-name">Name</label>
+                    <input type="text" id="register-name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
+                </div>
+                <div class="mb-4">
+                    <label class="block text-gray-700 mb-2" for="register-email">Email</label>
+                    <input type="email" id="register-email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
+                </div>
+                <div class="mb-6">
+                    <label class="block text-gray-700 mb-2" for="register-password">Password</label>
+                    <input type="password" id="register-password" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
+                </div>
+                <button onclick="register()" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 transition mb-4">
+                    Register
+                </button>
+                <p class="text-center text-gray-600">
+                    Already have an account?
+                    <button onclick="showLoginForm()" class="text-indigo-600 hover:text-indigo-800">Login</button>
+                </p>
+            </div>
+        </div>
+    </div>
+    <script>
+        // State management
+        let currentUser = null;
+        let currentPage = 'home';
+        let images = {
+            artist: [
+                {
+                    id: 1,
+                    title: "Abstract Harmony",
+                    description: "A vibrant exploration of color and form, this piece represents the artist's emotional journey through 2020.",
+                    imageUrl: "https://source.unsplash.com/random/600x400/?abstract,art",
+                    likes: 24,
+                    date: "2023-05-15",
+                    liked: false
+                },
+                {
+                    id: 2,
+                    title: "Urban Dreams",
+                    description: "Mixed media on canvas depicting the contrast between urban architecture and natural elements.",
+                    imageUrl: "https://source.unsplash.com/random/600x400/?city,art",
+                    likes: 18,
+                    date: "2023-03-22",
+                    liked: false
+                },
+                {
+                    id: 3,
+                    title: "Ocean Memories",
+                    description: "Acrylic painting inspired by childhood summers spent by the sea.",
+                    imageUrl: "https://source.unsplash.com/random/600x400/?ocean,art",
+                    likes: 31,
+                    date: "2023-01-10",
+                    liked: false
+                }
+            ],
+            photographer: [
+                {
+                    id: 1,
+                    title: "Mountain Dawn",
+                    description: "Captured during a sunrise hike in the Rockies, this photo showcases the breathtaking beauty of alpine light.",
+                    imageUrl: "https://source.unsplash.com/random/600x400/?mountain",
+                    likes: 42,
+                    date: "2023-06-08",
+                    liked: false
+                },
+                {
+                    id: 2,
+                    title: "Street Life",
+                    description: "Candid street photography from downtown Chicago, capturing the energy of urban life.",
+                    imageUrl: "https://source.unsplash.com/random/600x400/?street,photography",
+                    likes: 29,
+                    date: "2023-04-17",
+                    liked: false
+                },
+                {
+                    id: 3,
+                    title: "Silent Forest",
+                    description: "Morning mist in an old-growth forest creates an ethereal atmosphere.",
+                    imageUrl: "https://source.unsplash.com/random/600x400/?forest",
+                    likes: 36,
+                    date: "2023-02-03",
+                    liked: false
+                }
+            ]
+        };
+        // DOM Elements
+        const homePage = document.getElementById('home-page');
+        const artistPage = document.getElementById('artist-page');
+        const photographerPage = document.getElementById('photographer-page');
+        const aboutPage = document.getElementById('about-page');
+        const artistGallery = document.getElementById('artist-gallery');
+        const photographerGallery = document.getElementById('photographer-gallery');
+        const imageModal = document.getElementById('image-modal');
+        const modalImage = document.getElementById('modal-image');
+        const modalTitle = document.getElementById('modal-title');
+        const modalDescription = document.getElementById('modal-description');
+        const modalDate = document.getElementById('modal-date');
+        const likeIcon = document.getElementById('like-icon');
+        const likeCount = document.getElementById('like-count');
+        const deleteBtn = document.getElementById('delete-btn');
+        const addImageModal = document.getElementById('add-image-modal');
+        const addModalTitle = document.getElementById('add-modal-title');
+        const imageCategory = document.getElementById('image-category');
+        const authModal = document.getElementById('auth-modal');
+        const authModalTitle = document.getElementById('auth-modal-title');
+        const loginForm = document.getElementById('login-form');
+        const registerForm = document.getElementById('register-form');
+        const authBtn = document.getElementById('auth-btn');
+        const addArtistBtn = document.getElementById('add-artist-btn');
+        const addPhotographerBtn = document.getElementById('add-photographer-btn');
+        const mobileMenu = document.getElementById('mobile-menu');
+        const imageUpload = document.getElementById('image-upload');
+        const imagePreview = document.getElementById('image-preview');
+        const previewImage = document.getElementById('preview-image');
+        // Current image being viewed in modal
+        let currentImage = null;
+        let currentCategory = null;
+        // Initialize the page
+        function init() {
+            renderGalleries();
+            showHomePage();
+            // Event listener for image upload preview
+            imageUpload.addEventListener('change', function(e) {
+                if (e.target.files.length > 0) {
+                    const file = e.target.files[0];
+                    const reader = new FileReader();
+                    reader.onload = function(event) {
+                        previewImage.src = event.target.result;
+                        imagePreview.classList.remove('hidden');
+                    };
+                    reader.readAsDataURL(file);
+                }
+            });
+        }
+        // Render galleries
+        function renderGalleries() {
+            renderGallery('artist');
+            renderGallery('photographer');
+        }
+        // Render a specific gallery
+        function renderGallery(category) {
+            const gallery = category === 'artist' ? artistGallery : photographerGallery;
+            gallery.innerHTML = '';
+            images[category].forEach(image => {
+                const galleryItem = document.createElement('div');
+                galleryItem.className = 'gallery-item bg-white rounded-lg shadow-md overflow-hidden cursor-pointer';
+                galleryItem.innerHTML = `
+                    <div class="relative">
+                        <img src="${image.imageUrl}" alt="${image.title}" class="w-full h-64 object-cover">
+                        <div class="absolute bottom-2 right-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded flex items-center">
+                            <i class="far fa-heart mr-1"></i>
+                            <span>${image.likes}</span>
+                        </div>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-semibold text-lg text-gray-800 mb-1">${image.title}</h3>
+                        <p class="text-gray-600 text-sm truncate">${image.description}</p>
+                    </div>
+                `;
+                galleryItem.addEventListener('click', () => openImageModal(category, image.id));
+                gallery.appendChild(galleryItem);
+            });
+        }
+        // Page navigation functions
+        function showHomePage() {
+            homePage.classList.remove('hidden');
+            artistPage.classList.add('hidden');
+            photographerPage.classList.add('hidden');
+            aboutPage.classList.add('hidden');
+            currentPage = 'home';
+            document.title = "Art & Lens | Creative Portfolio";
+        }
+        function showArtistPage() {
+            homePage.classList.add('hidden');
+            artistPage.classList.remove('hidden');
+            photographerPage.classList.add('hidden');
+            aboutPage.classList.add('hidden');
+            currentPage = 'artist';
+            document.title = "Art & Lens | Artist Gallery";
+            toggleMobileMenu();
+        }
+        function showPhotographerPage() {
+            homePage.classList.add('hidden');
+            artistPage.classList.add('hidden');
+            photographerPage.classList.remove('hidden');
+            aboutPage.classList.add('hidden');
+            currentPage = 'photographer';
+            document.title = "Art & Lens | Photography Gallery";
+            toggleMobileMenu();
+        }
+        function showAboutPage() {
+            homePage.classList.add('hidden');
+            artistPage.classList.add('hidden');
+            photographerPage.classList.add('hidden');
+            aboutPage.classList.remove('hidden');
+            currentPage = 'about';
+            document.title = "Art & Lens | About the Creators";
+            toggleMobileMenu();
+        }
+        // Image modal functions
+        function openImageModal(category, id) {
+            currentCategory = category;
+            const image = images[category].find(img => img.id === id);
+            currentImage = image;
+            modalImage.src = image.imageUrl;
+            modalImage.alt = image.title;
+            modalTitle.textContent = image.title;
+            modalDescription.textContent = image.description;
+            modalDate.textContent = `Added on ${image.date}`;
+            likeCount.textContent = image.likes;
+            if (image.liked) {
+                likeIcon.className = 'fas fa-heart text-2xl text-red-500';
+            } else {
+                likeIcon.className = 'far fa-heart text-2xl text-gray-500';
+            }
+            // Show delete button only for logged in users
+            if (currentUser) {
+                deleteBtn.classList.remove('hidden');
+            } else {
+                deleteBtn.classList.add('hidden');
+            }
+            imageModal.classList.remove('hidden');
+        }
+        function closeImageModal() {
+            imageModal.classList.add('hidden');
+        }
+        function toggleLike() {
+            if (!currentUser) {
+                toggleAuthModal();
+                return;
+            }
+            const image = currentImage;
+            const category = currentCategory;
+            const imageIndex = images[category].findIndex(img => img.id === image.id);
+            if (images[category][imageIndex].liked) {
+                images[category][imageIndex].liked = false;
+                images[category][imageIndex].likes--;
+                likeIcon.className = 'far fa-heart text-2xl text-gray-500';
+            } else {
+                images[category][imageIndex].liked = true;
+                images[category][imageIndex].likes++;
+                likeIcon.className = 'fas fa-heart text-2xl text-red-500';
+                likeIcon.classList.add('like-animation');
+                setTimeout(() => {
+                    likeIcon.classList.remove('like-animation');
+                }, 700);
+            }
+            likeCount.textContent = images[category][imageIndex].likes;
+            renderGalleries();
+        }
+        function deleteImage() {
+            if (!currentUser) return;
+            const category = currentCategory;
+            const id = currentImage.id;
+            images[category] = images[category].filter(img => img.id !== id);
+            renderGalleries();
+            closeImageModal();
+        }
+        // Add image modal functions
+        function showAddImageModal(category) {
+            if (!currentUser) {
+                toggleAuthModal();
+                return;
+            }
+            imageCategory.value = category;
+            addModalTitle.textContent = category === 'artist' ? 'Add New Artwork' : 'Add New Photo';
+            document.getElementById('image-title').value = '';
+            document.getElementById('image-description').value = '';
+            imageUpload.value = '';
+            imagePreview.classList.add('hidden');
+            addImageModal.classList.remove('hidden');
+        }
+        function closeAddImageModal() {
+            addImageModal.classList.add('hidden');
+        }
+        function addNewImage(e) {
+            e.preventDefault();
+            const category = imageCategory.value;
+            const title = document.getElementById('image-title').value;
+            const description = document.getElementById('image-description').value;
+            const file = imageUpload.files[0];
+            if (!file) return;
+            // In a real app, you would upload the file to a server
+            // For this demo, we'll use a placeholder
+            const reader = new FileReader();
+            reader.onload = function(event) {
+                const newImage = {
+                    id: images[category].length + 1,
+                    title: title,
+                    description: description,
+                    imageUrl: event.target.result,
+                    likes: 0,
+                    date: new Date().toISOString().split('T')[0],
+                    liked: false
+                };
+                images[category].unshift(newImage);
+                renderGalleries();
+                closeAddImageModal();
+                // Open the new image in the modal
+                setTimeout(() => {
+                    openImageModal(category, newImage.id);
+                }, 300);
+            };
+            reader.readAsDataURL(file);
+        }
+        // Auth functions
+        function toggleAuthModal() {
+            if (authModal.classList.contains('hidden')) {
+                authModal.classList.remove('hidden');
+                showLoginForm();
+            } else {
+                authModal.classList.add('hidden');
+            }
+        }
+        function showLoginForm() {
+            loginForm.classList.remove('hidden');
+            registerForm.classList.add('hidden');
+            authModalTitle.textContent = 'Login';
+        }
+        function showRegisterForm() {
+            loginForm.classList.add('hidden');
+            registerForm.classList.remove('hidden');
+            authModalTitle.textContent = 'Register';
+        }
+        function login() {
+            const email = document.getElementById('login-email').value;
+            const password = document.getElementById('login-password').value;
+            // In a real app, you would validate against a backend
+            if (email && password) {
+                currentUser = {
+                    email: email,
+                    name: email.split('@')[0]
+                };
+                authBtn.innerHTML = `<i class="fas fa-user-circle mr-2"></i>${currentUser.name}`;
+                toggleAuthModal();
+                // Show add buttons if on artist or photographer page
+                if (currentPage === 'artist') {
+                    addArtistBtn.classList.remove('hidden');
+                } else if (currentPage === 'photographer') {
+                    addPhotographerBtn.classList.remove('hidden');
+                }
+                // Update delete button visibility in modal if open
+                if (!imageModal.classList.contains('hidden')) {
+                    deleteBtn.classList.remove('hidden');
+                }
+            }
+        }
+        function register() {
+            const name = document.getElementById('register-name').value;
+            const email = document.getElementById('register-email').value;
+            const password = document.getElementById('register-password').value;
+            // In a real app, you would send this to a backend
+            if (name && email && password) {
+                currentUser = {
+                    email: email,
+                    name: name
+                };
+                authBtn.innerHTML = `<i class="fas fa-user-circle mr-2"></i>${currentUser.name}`;
+                toggleAuthModal();
+                showLoginForm();
+                // Show add buttons if on artist or photographer page
+                if (currentPage === 'artist') {
+                    addArtistBtn.classList.remove('hidden');
+                } else if (currentPage === 'photographer') {
+                    addPhotographerBtn.classList.remove('hidden');
+                }
+            }
+        }
+        function logout() {
+            currentUser = null;
+            authBtn.textContent = 'Login';
+            // Hide add buttons
+            addArtistBtn.classList.add('hidden');
+            addPhotographerBtn.classList.add('hidden');
+            // Update delete button visibility in modal if open
+            if (!imageModal.classList.contains('hidden')) {
+                deleteBtn.classList.add('hidden');
+            }
+        }
+        // Mobile menu toggle
+        function toggleMobileMenu() {
+            if (mobileMenu.classList.contains('hidden')) {
+                mobileMenu.classList.remove('hidden');
+            } else {
+                mobileMenu.classList.add('hidden');
+            }
+        }
+        // Initialize the app
+        init();
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Doces/portfolio-page" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ Write a photo portfolio website for two people, an artist and a photographer. The site should have a page for each of the two people. Add the ability to add and delete images, add a description to each photo. Add the authorization option. Add the option to like it. Add a separate page about the authors