remove this gallery block and create a block section for the about artist and some natural things about how i got intrested in arts and why only arts and as a ai student like this write a story and follow the ui ux in the project only don't mess up just clean and smooth - Initial Deployment
1805970
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>Artistry | Modern Artist Gallery</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> | |
| /* 3D and Apple/GitHub-inspired effects */ | |
| .glass { | |
| background: rgba(255,255,255,0.7); | |
| backdrop-filter: blur(12px) saturate(180%); | |
| border-radius: 1.5rem; | |
| box-shadow: 0 8px 32px 0 rgba(31,38,135,0.10); | |
| } | |
| .hero-3d { | |
| perspective: 1200px; | |
| } | |
| .hero-inner { | |
| transform-style: preserve-3d; | |
| transition: transform 0.5s cubic-bezier(.4,2,.3,1); | |
| } | |
| .hero-inner:hover { | |
| transform: rotateY(8deg) scale(1.03); | |
| } | |
| .fade-in { | |
| animation: fadeIn 1.2s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(30px);} | |
| to { opacity: 1; transform: none;} | |
| } | |
| .subscribe-success { | |
| background: #10b981; | |
| color: white; | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 0.5rem; | |
| margin-top: 1rem; | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-gray-50 to-gray-200 min-h-screen font-sans antialiased"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full bg-white/80 shadow-lg z-50 backdrop-blur-lg"> | |
| <div class="max-w-7xl mx-auto px-4 flex justify-between items-center h-20"> | |
| <a href="#" class="text-3xl font-bold tracking-tight text-gray-900">Artistry</a> | |
| <div class="hidden md:flex space-x-8 items-center"> | |
| <a href="#gallery" class="text-gray-700 hover:text-indigo-600 transition">Gallery</a> | |
| <a href="#shop" class="text-gray-700 hover:text-indigo-600 transition">Shop</a> | |
| <a href="#about" class="text-gray-700 hover:text-indigo-600 transition">About</a> | |
| <a href="#journal" class="text-gray-700 hover:text-indigo-600 transition">Journal</a> | |
| <a href="#contact" class="text-gray-700 hover:text-indigo-600 transition">Contact</a> | |
| <button id="adminLoginBtn" class="px-4 py-2 rounded-lg bg-gray-900 text-white hover:bg-indigo-700 shadow transition">Admin's Den</button> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="mobileMenuBtn" class="text-2xl text-gray-700"><i class="fas fa-bars"></i></button> | |
| </div> | |
| </div> | |
| <div id="mobileMenu" class="hidden md:hidden bg-white shadow-lg"> | |
| <div class="flex flex-col space-y-2 px-4 py-2"> | |
| <a href="#gallery" class="text-gray-700 hover:text-indigo-600">Gallery</a> | |
| <a href="#shop" class="text-gray-700 hover:text-indigo-600">Shop</a> | |
| <a href="#about" class="text-gray-700 hover:text-indigo-600">About</a> | |
| <a href="#journal" class="text-gray-700 hover:text-indigo-600">Journal</a> | |
| <a href="#contact" class="text-gray-700 hover:text-indigo-600">Contact</a> | |
| <button id="mobileAdminLoginBtn" class="text-gray-700 hover:text-indigo-600 text-left">Admin's Den</button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Admin Login Modal --> | |
| <div id="adminModal" class="fixed inset-0 bg-black bg-opacity-60 flex items-center justify-center z-50 hidden"> | |
| <div class="glass p-8 max-w-md w-full mx-4"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Admin's Den</h2> | |
| <form id="adminLoginForm"> | |
| <div class="mb-4"> | |
| <label for="adminId" class="block text-gray-700 mb-2">Admin ID</label> | |
| <input type="text" id="adminId" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"/> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="adminPassword" class="block text-gray-700 mb-2">Password</label> | |
| <input type="password" id="adminPassword" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"/> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <button type="button" id="closeAdminModal" class="text-gray-600 hover:text-gray-900">Cancel</button> | |
| <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition">Login</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Admin Dashboard (hidden by default) --> | |
| <div id="adminPanel" class="admin-panel fixed inset-0 bg-gray-100 z-50 overflow-y-auto hidden"> | |
| <div class="container mx-auto py-8 px-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h1 class="text-3xl font-bold text-gray-800">Admin Dashboard</h1> | |
| <button id="logoutBtn" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition">Logout</button> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Upload Artwork Form --> | |
| <div class="bg-white p-6 rounded-lg shadow-md md:col-span-1"> | |
| <h2 class="text-xl font-semibold mb-4">Upload New Artwork</h2> | |
| <form id="uploadArtForm"> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">Artwork Image</label> | |
| <input type="file" id="artImage" accept="image/*" class="w-full"/> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="artTitle" class="block text-gray-700 mb-2">Title</label> | |
| <input type="text" id="artTitle" class="w-full px-3 py-2 border border-gray-300 rounded-md"/> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="artDescription" class="block text-gray-700 mb-2">Description</label> | |
| <textarea id="artDescription" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md"></textarea> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="artCategory" class="block text-gray-700 mb-2">Category</label> | |
| <select id="artCategory" class="w-full px-3 py-2 border border-gray-300 rounded-md"> | |
| <option value="painting">Painting</option> | |
| <option value="print">Print</option> | |
| <option value="digital">Digital</option> | |
| <option value="sculpture">Sculpture</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="artPrice" class="block text-gray-700 mb-2">Price ($)</label> | |
| <input type="number" id="artPrice" class="w-full px-3 py-2 border border-gray-300 rounded-md"/> | |
| </div> | |
| <button type="submit" class="w-full px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition">Upload Artwork</button> | |
| </form> | |
| </div> | |
| <!-- Artwork Management --> | |
| <div class="bg-white p-6 rounded-lg shadow-md md:col-span-2"> | |
| <h2 class="text-xl font-semibold mb-4">Manage Artworks</h2> | |
| <div class="mb-4"> | |
| <label for="filterCategory" class="block text-gray-700 mb-2">Filter by Category</label> | |
| <select id="filterCategory" class="w-full md:w-1/3 px-3 py-2 border border-gray-300 rounded-md"> | |
| <option value="all">All Categories</option> | |
| <option value="painting">Painting</option> | |
| <option value="print">Print</option> | |
| <option value="digital">Digital</option> | |
| <option value="sculpture">Sculpture</option> | |
| </select> | |
| </div> | |
| <div id="artworkList" class="space-y-4"> | |
| <div class="text-center py-8 text-gray-500"> | |
| <p>No artworks uploaded yet. Start by uploading your first artwork.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero-3d relative h-screen flex items-center justify-center overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-indigo-800/70 via-indigo-400/40 to-white"></div> | |
| <div class="absolute inset-0" style="background-image: url('https://images.unsplash.com/photo-1579547945413-497e1b99dac0?auto=format&fit=crop&w=1350&q=80'); background-size: cover; background-position: center;"></div> | |
| <div class="relative z-10 hero-inner text-center fade-in"> | |
| <h1 class="text-5xl md:text-7xl font-extrabold text-white mb-6 drop-shadow-lg">Artistry Unleashed</h1> | |
| <p class="text-2xl md:text-3xl text-white mb-8 max-w-2xl mx-auto">A new dimension of contemporary art. Explore, collect, and get inspired.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#gallery" class="px-8 py-4 bg-indigo-600 text-white rounded-xl text-lg font-semibold hover:bg-indigo-700 transition transform hover:scale-105">Explore Gallery</a> | |
| <a href="#shop" class="px-8 py-4 bg-white text-indigo-700 rounded-xl text-lg font-semibold hover:bg-gray-100 transition transform hover:scale-105">Shop Artworks</a> | |
| </div> | |
| <!-- Subscribe Button --> | |
| <form id="subscribeForm" class="mt-10 flex flex-col sm:flex-row justify-center gap-2"> | |
| <input type="email" id="subscribeEmail" placeholder="Get updates on new art & deals" required class="px-4 py-3 rounded-l-xl border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 w-64"/> | |
| <button type="submit" class="px-6 py-3 bg-indigo-500 text-white rounded-r-xl font-semibold hover:bg-indigo-700 transition">Subscribe</button> | |
| </form> | |
| <div id="subscribeSuccess" class="subscribe-success">Subscribed! Check your inbox for updates.</div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-4xl font-bold text-gray-900 mb-4">My Artistic Journey</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">From algorithms to abstracts - how technology shaped my artistic vision</p> | |
| </div> | |
| <div class="max-w-4xl mx-auto glass p-8 rounded-2xl"> | |
| <div class="grid md:grid-cols-2 gap-8 items-center"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-4">The Intersection of Art & AI</h3> | |
| <p class="text-gray-600 mb-4">As an AI student, I discovered art through the lens of machine learning. The patterns in neural networks mirrored the brushstrokes of abstract expressionism, sparking my creative journey.</p> | |
| <p class="text-gray-600 mb-4">Nature became my muse - the fractal patterns in leaves, the fluid dynamics of water, and the emergent complexity of ecosystems all found their way into my digital canvases.</p> | |
| <p class="text-gray-600">Art became my bridge between the precision of code and the chaos of creativity. Each piece is a conversation between artificial intelligence and human emotion.</p> | |
| </div> | |
| <div class="relative"> | |
| <div class="aspect-w-16 aspect-h-9 rounded-xl overflow-hidden shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?auto=format&fit=crop&w=800&q=80" alt="AI meets Art" class="w-full h-full object-cover"/> | |
| </div> | |
| <div class="absolute -bottom-4 -right-4 bg-indigo-600 text-white px-4 py-2 rounded-lg shadow-md"> | |
| <p class="font-medium">Digital Alchemy</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Shop, About, Journal, Contact, etc. (Add similar sections as above, with modern UI/UX) --> | |
| <script> | |
| // Responsive mobile menu | |
| document.getElementById('mobileMenuBtn').onclick = function() { | |
| document.getElementById('mobileMenu').classList.toggle('hidden'); | |
| }; | |
| document.getElementById('mobileAdminLoginBtn').onclick = function() { | |
| document.getElementById('adminModal').classList.remove('hidden'); | |
| document.getElementById('mobileMenu').classList.add('hidden'); | |
| }; | |
| // Admin login modal logic | |
| document.getElementById('adminLoginBtn').onclick = function() { | |
| document.getElementById('adminModal').classList.remove('hidden'); | |
| }; | |
| document.getElementById('closeAdminModal').onclick = function() { | |
| document.getElementById('adminModal').classList.add('hidden'); | |
| }; | |
| document.getElementById('adminLoginForm').onsubmit = function(e) { | |
| e.preventDefault(); | |
| if ( | |
| document.getElementById('adminId').value === 'adminUser' && | |
| document.getElementById('adminPassword').value === 'SecurePass2025!' | |
| ) { | |
| document.getElementById('adminModal').classList.add('hidden'); | |
| document.getElementById('adminPanel').classList.remove('hidden'); | |
| } else { | |
| alert('Invalid admin credentials!'); | |
| } | |
| }; | |
| document.getElementById('logoutBtn').onclick = function() { | |
| document.getElementById('adminPanel').classList.add('hidden'); | |
| }; | |
| // Artwork upload and gallery logic (demo, local only) | |
| let artworks = []; | |
| document.getElementById('uploadArtForm').onsubmit = function(e) { | |
| e.preventDefault(); | |
| const imgInput = document.getElementById('artImage'); | |
| const reader = new FileReader(); | |
| reader.onload = function(evt) { | |
| artworks.push({ | |
| img: evt.target.result, | |
| title: document.getElementById('artTitle').value, | |
| desc: document.getElementById('artDescription').value, | |
| cat: document.getElementById('artCategory').value, | |
| price: document.getElementById('artPrice').value | |
| }); | |
| renderGallery(); | |
| renderAdminList(); | |
| }; | |
| if (imgInput.files[0]) reader.readAsDataURL(imgInput.files[0]); | |
| else alert('Please select an image.'); | |
| document.getElementById('uploadArtForm').reset(); | |
| }; | |
| function renderGallery(filter = 'all') { | |
| const grid = document.getElementById('galleryGrid'); | |
| grid.innerHTML = ''; | |
| let filtered = artworks; | |
| if (filter !== 'all') filtered = artworks.filter(a => a.cat === filter); | |
| if (!filtered.length) { | |
| grid.innerHTML = '<div class="col-span-3 text-center text-gray-400">No artworks yet.</div>'; | |
| return; | |
| } | |
| filtered.forEach(a => { | |
| grid.innerHTML += ` | |
| <div class="art-card bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition duration-300 relative fade-in"> | |
| <img src="${a.img}" class="w-full h-64 object-cover"/> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">${a.title}</h3> | |
| <p class="text-gray-600 mb-2">${a.desc}</p> | |
| <span class="inline-block bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full text-xs">${a.cat}</span> | |
| <div class="mt-4 text-lg font-semibold text-gray-900">$${a.price}</div> | |
| </div> | |
| </div> | |
| `; | |
| }); | |
| } | |
| // Gallery filter | |
| document.querySelectorAll('.gallery-filter').forEach(btn => { | |
| btn.onclick = function() { | |
| document.querySelectorAll('.gallery-filter').forEach(b => b.classList.remove('bg-indigo-600','text-white')); | |
| this.classList.add('bg-indigo-600','text-white'); | |
| renderGallery(this.dataset.category); | |
| }; | |
| }); | |
| // Admin artwork management list | |
| function renderAdminList() { | |
| const list = document.getElementById('artworkList'); | |
| if (!artworks.length) { | |
| list.innerHTML = '<div class="text-center py-8 text-gray-500"><p>No artworks uploaded yet. Start by uploading your first artwork.</p></div>'; | |
| return; | |
| } | |
| list.innerHTML = ''; | |
| artworks.forEach((a, i) => { | |
| list.innerHTML += ` | |
| <div class="flex items-center gap-4 bg-gray-50 p-4 rounded-lg shadow fade-in"> | |
| <img src="${a.img}" class="w-20 h-20 object-cover rounded-lg"/> | |
| <div class="flex-1"> | |
| <h4 class="font-bold">${a.title}</h4> | |
| <p class="text-xs text-gray-500">${a.cat}</p> | |
| </div> | |
| <button onclick="deleteArtwork(${i})" class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button> | |
| </div> | |
| `; | |
| }); | |
| } | |
| window.deleteArtwork = function(idx) { | |
| artworks.splice(idx,1); | |
| renderGallery(); | |
| renderAdminList(); | |
| }; | |
| // Subscribe logic (demo, local only) | |
| document.getElementById('subscribeForm').onsubmit = function(e) { | |
| e.preventDefault(); | |
| document.getElementById('subscribeSuccess').style.display = 'block'; | |
| setTimeout(()=>document.getElementById('subscribeSuccess').style.display='none', 3000); | |
| document.getElementById('subscribeForm').reset(); | |
| }; | |
| // Initial render | |
| renderGallery(); | |
| renderAdminList(); | |
| </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=Harsha14/arty" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> | |