Local Artists Showcase<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fredoka+One:wght@400&family=Comic+Neue:wght@300;400;700&family=Bubblegum+Sans&family=Kalam:wght@300;400;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n .font-fredoka { font-family : 'Fredoka One', cursive; }\r\n .font-comic { font-family: 'Comic Neue', cursive; }\r\n .font-bubblegum { font-family: 'Bubblegum Sans', cursive; }\r\n .font-kalam { font-family: 'Kalam', cursive; }\r\n @keyframes float {\r\n 0%, 100% { transform: translateY(0px) rotate(0deg); }\r\n 25% { transform: translateY(-20px) rotate(5deg); }\r\n 50% { transform: translateY(-10px) rotate(-3deg); }\r\n 75% { transform: translateY(-15px) rotate(2deg); }\r\n }\r\n \r\n @keyframes flutter {\r\n 0%, 100% { transform: translateX(0px) translateY(0px) rotate(0deg); }\r\n 25% { transform: translateX(10px) translateY(-15px) rotate(10deg); }\r\n 50% { transform: translateX(-5px) translateY(-25px) rotate(-5deg); }\r\n 75% { transform: translateX(15px) translateY(-10px) rotate(8deg); }\r\n }\r\n \r\n @keyframes soar {\r\n 0% { transform: translateX(-100px) translateY(20px) rotate(-10deg); }\r\n 50% { transform: translateX(50px) translateY(-30px) rotate(15deg); }\r\n 100% { transform: translateX(200px) translateY(10px) rotate(-5deg); }\r\n }\r\n \r\n @keyframes cloudDrift {\r\n 0% { transform: translateX(-100px); }\r\n 100% { transform: translateX(calc(100vw + 100px)); }\r\n }\r\n \r\n @keyframes bubbleRise {\r\n 0% { \r\n transform: translateY(100vh) scale(0);\r\n opacity: 0;\r\n }\r\n 10% {\r\n opacity: 1;\r\n }\r\n 90% {\r\n opacity: 1;\r\n }\r\n 100% { \r\n transform: translateY(-100px) scale(1);\r\n opacity: 0;\r\n }\r\n }\r\n \r\n @keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n \r\n @keyframes slideInLeft {\r\n from {\r\n opacity: 0;\r\n transform: translateX(-50px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n }\r\n \r\n @keyframes slideInRight {\r\n from {\r\n opacity: 0;\r\n transform: translateX(50px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n }\r\n \r\n @keyframes scaleIn {\r\n from {\r\n opacity: 0;\r\n transform: scale(0.8);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n }\r\n \r\n @keyframes pulse {\r\n 0%, 100% {\r\n transform: scale(1);\r\n }\r\n 50% {\r\n transform: scale(1.05);\r\n }\r\n }\r\n \r\n .animate-fade-in-up {\r\n animation: fadeInUp 0.8s ease-out forwards;\r\n }\r\n \r\n .animate-slide-in-left {\r\n animation: slideInLeft 0.8s ease-out forwards;\r\n }\r\n \r\n .animate-slide-in-right {\r\n animation: slideInRight 0.8s ease-out forwards;\r\n }\r\n \r\n .animate-scale-in {\r\n animation: scaleIn 0.6s ease-out forwards;\r\n }\r\n \r\n .animate-pulse-hover:hover {\r\n animation: pulse 0.6s ease-in-out;\r\n }\r\n \r\n .animate-delay-1 {\r\n animation-delay: 0.2s;\r\n }\r\n \r\n .animate-delay-2 {\r\n animation-delay: 0.4s;\r\n }\r\n \r\n .animate-delay-3 {\r\n animation-delay: 0.6s;\r\n }\r\n \r\n .animated-bg {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(135deg, #87CEEB 0%, #98D8E8 50%, #B0E0E6 100%);\r\n z-index: -1;\r\n overflow: hidden;\r\n }\r\n \r\n .cloud {\r\n position: absolute;\r\n background: rgba(255, 255, 255, 0.8);\r\n border-radius: 50px;\r\n opacity: 0.7;\r\n }\r\n \r\n .cloud:before,\r\n .cloud:after {\r\n content: '';\r\n position: absolute;\r\n background: rgba(255, 255, 255, 0.8);\r\n border-radius: 50px;\r\n }\r\n \r\n .cloud1 {\r\n width: 80px;\r\n height: 40px;\r\n animation: cloudDrift 20s linear infinite;\r\n top: 20%;\r\n }\r\n \r\n .cloud1:before {\r\n width: 50px;\r\n height: 50px;\r\n top: -25px;\r\n left: 10px;\r\n }\r\n \r\n .cloud1:after {\r\n width: 60px;\r\n height: 40px;\r\n top: -15px;\r\n right: 10px;\r\n }\r\n \r\n .cloud2 {\r\n width: 60px;\r\n height: 30px;\r\n animation: cloudDrift 25s linear infinite;\r\n top: 40%;\r\n animation-delay: -5s;\r\n }\r\n \r\n .cloud2:before {\r\n width: 40px;\r\n height: 40px;\r\n top: -20px;\r\n left: 8px;\r\n }\r\n \r\n .cloud2:after {\r\n width: 50px;\r\n height: 30px;\r\n top: -10px;\r\n right: 8px;\r\n }\r\n \r\n .cloud3 {\r\n width: 100px;\r\n height: 50px;\r\n animation: cloudDrift 30s linear infinite;\r\n top: 60%;\r\n animation-delay: -10s;\r\n }\r\n \r\n .cloud3:before {\r\n width: 60px;\r\n height: 60px;\r\n top: -30px;\r\n left: 15px;\r\n }\r\n \r\n .cloud3:after {\r\n width: 70px;\r\n height: 50px;\r\n top: -20px;\r\n right: 15px;\r\n }\r\n \r\n .bubble {\r\n position: absolute;\r\n border-radius: 50%;\r\n background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.3));\r\n border: 1px solid rgba(255, 255, 255, 0.5);\r\n }\r\n \r\n .bubble1 {\r\n width: 20px;\r\n height: 20px;\r\n left: 10%;\r\n animation: bubbleRise 8s linear infinite;\r\n }\r\n \r\n .bubble2 {\r\n width: 15px;\r\n height: 15px;\r\n left: 30%;\r\n animation: bubbleRise 10s linear infinite;\r\n animation-delay: -2s;\r\n }\r\n \r\n .bubble3 {\r\n width: 25px;\r\n height: 25px;\r\n left: 60%;\r\n animation: bubbleRise 12s linear infinite;\r\n animation-delay: -4s;\r\n }\r\n \r\n .bubble4 {\r\n width: 18px;\r\n height: 18px;\r\n left: 80%;\r\n animation: bubbleRise 9s linear infinite;\r\n animation-delay: -6s;\r\n }\r\n \r\n .bubble5 {\r\n width: 12px;\r\n height: 12px;\r\n left: 15%;\r\n animation: bubbleRise 11s linear infinite;\r\n animation-delay: -1s;\r\n }\r\n \r\n .bubble6 {\r\n width: 22px;\r\n height: 22px;\r\n left: 45%;\r\n animation: bubbleRise 13s linear infinite;\r\n animation-delay: -3s;\r\n }\r\n \r\n .bubble7 {\r\n width: 16px;\r\n height: 16px;\r\n left: 70%;\r\n animation: bubbleRise 7s linear infinite;\r\n animation-delay: -5s;\r\n }\r\n \r\n .bubble8 {\r\n width: 14px;\r\n height: 14px;\r\n left: 25%;\r\n animation: bubbleRise 14s linear infinite;\r\n animation-delay: -7s;\r\n }\r\n \r\n .bubble9 {\r\n width: 20px;\r\n height: 20px;\r\n left: 55%;\r\n animation: bubbleRise 6s linear infinite;\r\n animation-delay: -2s;\r\n }\r\n \r\n .bubble10 {\r\n width: 17px;\r\n height: 17px;\r\n left: 90%;\r\n animation: bubbleRise 15s linear infinite;\r\n animation-delay: -8s;\r\n }\r\n \r\n .creature {\r\n position: absolute;\r\n pointer-events: none;\r\n z-index: 10;\r\n }\r\n \r\n .ladybug {\r\n animation: float 4s ease-in-out infinite;\r\n animation-delay: 0s;\r\n }\r\n \r\n .butterfly {\r\n animation: flutter 6s ease-in-out infinite;\r\n animation-delay: 2s;\r\n }\r\n \r\n .dragon {\r\n animation: soar 12s linear infinite;\r\n animation-delay: 4s;\r\n }\r\n \r\n .gallery-container {\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .gallery-image {\r\n transition: opacity 1s ease-in-out;\r\n }\r\n \r\n .fade-enter {\r\n opacity: 0;\r\n }\r\n \r\n .fade-enter-active {\r\n opacity: 1;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"min-h-screen relative\">\r\n \r\n <div class=\"animated-bg\">\r\n \r\n <div class=\"cloud cloud1\"><\/div>\r\n <div class=\"cloud cloud2\"><\/div>\r\n <div class=\"cloud cloud3\"><\/div>\r\n \r\n \r\n <div class=\"bubble bubble1\"><\/div>\r\n <div class=\"bubble bubble2\"><\/div>\r\n <div class=\"bubble bubble3\"><\/div>\r\n <div class=\"bubble bubble4\"><\/div>\r\n <div class=\"bubble bubble5\"><\/div>\r\n <div class=\"bubble bubble6\"><\/div>\r\n <div class=\"bubble bubble7\"><\/div>\r\n <div class=\"bubble bubble8\"><\/div>\r\n <div class=\"bubble bubble9\"><\/div>\r\n <div class=\"bubble bubble10\"><\/div>\r\n <\/div>\r\n \r\n <nav class=\"relative z-20 bg-white\/90 backdrop-blur-sm shadow-lg animate-slide-in-left\">\r\n <div class=\"container mx-auto px-8 py-6\">\r\n <div class=\"flex justify-between items-center\">\r\n <div class=\"text-4xl font-fredoka text-gray-800 animate-pulse-hover\">\r\n \ud83c\udfa8 ArtHub\r\n <\/div>\r\n \r\n <div class=\"flex items-center space-x-6\">\r\n <div id=\"authButtons\" class=\"flex space-x-4\">\r\n <button onclick=\"showLogin()\" class=\"bg-red-600 hover:bg-red-700 text-white px-8 py-3 rounded-lg font-comic font-bold text-lg transition-all duration-300 transform hover:scale-105 animate-pulse-hover\">\r\n Login\r\n <\/button>\r\n <button onclick=\"showSignup()\" class=\"bg-blue-900 hover:bg-blue-800 text-white px-8 py-3 rounded-lg font-comic font-bold text-lg transition-all duration-300 transform hover:scale-105 animate-pulse-hover\">\r\n Sign Up\r\n <\/button>\r\n <\/div>\r\n \r\n <div id=\"userSection\" class=\"hidden flex items-center space-x-4\">\r\n <span id=\"welcomeText\" class=\"text-gray-700 font-comic font-bold text-lg\"><\/span>\r\n <button onclick=\"showDashboard()\" class=\"bg-blue-900 hover:bg-blue-800 text-white px-8 py-3 rounded-lg font-comic font-bold text-lg transition-all duration-300 transform hover:scale-105 animate-pulse-hover\">\r\n Dashboard\r\n <\/button>\r\n <button onclick=\"logout()\" class=\"bg-red-600 hover:bg-red-700 text-white px-8 py-3 rounded-lg font-comic font-bold text-lg transition-all duration-300 transform hover:scale-105 animate-pulse-hover\">\r\n Logout\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n\r\n \r\n <div id=\"loginModal\" class=\"hidden fixed inset-0 bg-black\/50 backdrop-blur-sm z-50 flex items-center justify-center\">\r\n <div class=\"bg-white rounded-2xl p-12 max-w-lg w-full mx-4 shadow-2xl animate-scale-in\">\r\n <h2 class=\"text-4xl font-bubblegum text-gray-800 mb-8 text-center animate-fade-in-up\">Welcome Back<\/h2>\r\n <form onsubmit=\"handleLogin(event)\">\r\n <div class=\"mb-6 animate-fade-in-up animate-delay-1\">\r\n <label class=\"block text-gray-700 font-comic font-bold mb-3 text-lg\">Email<\/label>\r\n <input type=\"email\" id=\"loginEmail\" required class=\"w-full px-6 py-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-lg font-kalam transition-all duration-300\">\r\n <\/div>\r\n <div class=\"mb-8 animate-fade-in-up animate-delay-2\">\r\n <label class=\"block text-gray-700 font-comic font-bold mb-3 text-lg\">Password<\/label>\r\n <input type=\"password\" id=\"loginPassword\" required class=\"w-full px-6 py-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-lg font-kalam transition-all duration-300\">\r\n <\/div>\r\n <div class=\"flex space-x-4 animate-fade-in-up animate-delay-3\">\r\n <button type=\"submit\" class=\"flex-1 bg-red-600 hover:bg-red-700 text-white py-4 rounded-lg font-comic font-bold text-lg transition-all duration-300 transform hover:scale-105\">\r\n Login\r\n <\/button>\r\n <button type=\"button\" onclick=\"closeModal()\" class=\"flex-1 bg-gray-300 hover:bg-gray-400 text-gray-700 py-4 rounded-lg font-comic font-bold text-lg transition-all duration-300 transform hover:scale-105\">\r\n Cancel\r\n <\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"signupModal\" class=\"hidden fixed inset-0 bg-black\/50 backdrop-blur-sm z-50 flex items-center justify-center\">\r\n <div class=\"bg-white rounded-2xl p-12 max-w-lg w-full mx-4 shadow-2xl animate-scale-in\">\r\n <h2 class=\"text-4xl font-bubblegum text-gray-800 mb-8 text-center animate-fade-in-up\">Join ArtHub<\/h2>\r\n <form onsubmit=\"handleSignup(event)\">\r\n <div class=\"mb-6 animate-fade-in-up animate-delay-1\">\r\n <label class=\"block text-gray-700 font-comic font-bold mb-3 text-lg\">Full Name<\/label>\r\n <input type=\"text\" id=\"signupName\" required class=\"w-full px-6 py-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent text-lg font-kalam transition-all duration-300\">\r\n <\/div>\r\n <div class=\"mb-6 animate-fade-in-up animate-delay-2\">\r\n <label class=\"block text-gray-700 font-comic font-bold mb-3 text-lg\">Email<\/label>\r\n <input type=\"email\" id=\"signupEmail\" required class=\"w-full px-6 py-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent text-lg font-kalam transition-all duration-300\">\r\n <\/div>\r\n <div class=\"mb-8 animate-fade-in-up animate-delay-3\">\r\n <label class=\"block text-gray-700 font-comic font-bold mb-3 text-lg\">Password<\/label>\r\n <input type=\"password\" id=\"signupPassword\" required class=\"w-full px-6 py-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent text-lg font-kalam transition-all duration-300\">\r\n <\/div>\r\n <div class=\"flex space-x-4 animate-fade-in-up animate-delay-3\">\r\n <button type=\"submit\" class=\"flex-1 bg-blue-900 hover:bg-blue-800 text-white py-4 rounded-lg font-comic font-bold text-lg transition-all duration-300 transform hover:scale-105\">\r\n Sign Up\r\n <\/button>\r\n <button type=\"button\" onclick=\"closeModal()\" class=\"flex-1 bg-gray-300 hover:bg-gray-400 text-gray-700 py-4 rounded-lg font-comic font-bold text-lg transition-all duration-300 transform hover:scale-105\">\r\n Cancel\r\n <\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"dashboardModal\" class=\"hidden fixed inset-0 bg-black\/50 backdrop-blur-sm z-50 flex items-center justify-center\">\r\n <div class=\"bg-white rounded-2xl p-12 max-w-5xl w-full mx-4 shadow-2xl max-h-[90vh] overflow-y-auto animate-scale-in\">\r\n <div class=\"flex justify-between items-center mb-8 animate-fade-in-up\">\r\n <h2 class=\"text-4xl font-bubblegum text-gray-800\">Artist Dashboard<\/h2>\r\n <button onclick=\"closeModal()\" class=\"text-gray-500 hover:text-gray-700 text-3xl transition-all duration-300 hover:scale-110\">\u00d7<\/button>\r\n <\/div>\r\n \r\n <form onsubmit=\"updateProfile(event)\" class=\"space-y-8\">\r\n <div class=\"animate-fade-in-up animate-delay-1\">\r\n <label class=\"block text-gray-700 font-comic font-bold mb-3 text-lg\">Artist Name<\/label>\r\n <input type=\"text\" id=\"dashboardName\" required class=\"w-full px-6 py-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-lg font-kalam transition-all duration-300\">\r\n <\/div>\r\n \r\n <div class=\"animate-fade-in-up animate-delay-2\">\r\n <label class=\"block text-gray-700 font-comic font-bold mb-3 text-lg\">Short Bio<\/label>\r\n <textarea id=\"dashboardBio\" rows=\"5\" required class=\"w-full px-6 py-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none text-lg font-kalam transition-all duration-300\"><\/textarea>\r\n <\/div>\r\n \r\n <div class=\"animate-fade-in-up animate-delay-3\">\r\n <label class=\"block text-gray-700 font-comic font-bold mb-6 text-lg\">Gallery Images<\/label>\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6 mb-6\">\r\n <div class=\"space-y-3\">\r\n <label class=\"block text-base text-gray-600 font-comic font-bold\">Image 1 Title<\/label>\r\n <input type=\"text\" id=\"image1Title\" placeholder=\"e.g., Mountain Sunrise\" class=\"w-full px-4 py-3 border border-gray-300 rounded-lg text-base font-kalam transition-all duration-300\">\r\n <div class=\"bg-gray-100 rounded-lg h-40 flex items-center justify-center\">\r\n <span class=\"text-gray-500 text-base font-comic\">Preview 1<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"space-y-3\">\r\n <label class=\"block text-base text-gray-600 font-comic font-bold\">Image 2 Title<\/label>\r\n <input type=\"text\" id=\"image2Title\" placeholder=\"e.g., Ocean Waves\" class=\"w-full px-4 py-3 border border-gray-300 rounded-lg text-base font-kalam transition-all duration-300\">\r\n <div class=\"bg-gray-100 rounded-lg h-40 flex items-center justify-center\">\r\n <span class=\"text-gray-500 text-base font-comic\">Preview 2<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"space-y-3\">\r\n <label class=\"block text-base text-gray-600 font-comic font-bold\">Image 3 Title<\/label>\r\n <input type=\"text\" id=\"image3Title\" placeholder=\"e.g., City Life\" class=\"w-full px-4 py-3 border border-gray-300 rounded-lg text-base font-kalam transition-all duration-300\">\r\n <div class=\"bg-gray-100 rounded-lg h-40 flex items-center justify-center\">\r\n <span class=\"text-gray-500 text-base font-comic\">Preview 3<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-base text-gray-500\">Note: Image upload functionality would connect to a backend service in a real application.<\/p>\r\n <\/div>\r\n \r\n <div class=\"flex space-x-4 pt-6 animate-fade-in-up animate-delay-3\">\r\n <button type=\"submit\" class=\"flex-1 bg-blue-900 hover:bg-blue-800 text-white py-4 rounded-lg font-comic font-bold text-lg transition-all duration-300 transform hover:scale-105\">\r\n Save Changes\r\n <\/button>\r\n <button type=\"button\" onclick=\"closeModal()\" class=\"flex-1 bg-gray-300 hover:bg-gray-400 text-gray-700 py-4 rounded-lg font-comic font-bold text-lg transition-all duration-300 transform hover:scale-105\">\r\n Cancel\r\n <\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"container mx-auto px-8 py-16 relative z-10\">\r\n <div class=\"text-center mb-20 animate-fade-in-up\">\r\n <h1 class=\"text-8xl lg:text-9xl font-fredoka text-blue-600 mb-12 animate-pulse-hover\">Local Artists Showcase<\/h1>\r\n <p class=\"text-3xl lg:text-4xl text-gray-600 max-w-6xl mx-auto leading-relaxed animate-fade-in-up animate-delay-1\">\r\n Discover the incredible talent in our community. Each artist brings their unique vision and creativity, \r\n transforming ordinary moments into extraordinary art. Explore their stories and immerse yourself in their beautiful works.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div id=\"artistsGrid\" class=\"columns-1 md:columns-2 lg:columns-3 xl:columns-4 gap-8 max-w-8xl mx-auto space-y-8\">\r\n \r\n <div id=\"noArtistsMessage\" class=\"w-full text-center py-20 animate-scale-in break-inside-avoid\">\r\n <div class=\"bg-white\/80 backdrop-blur-sm rounded-2xl p-16 shadow-lg animate-pulse-hover\">\r\n <div class=\"text-8xl mb-8\">\ud83c\udfa8<\/div>\r\n <h3 class=\"text-4xl lg:text-5xl font-bold text-gray-800 mb-8\">No Artists Yet<\/h3>\r\n <p class=\"text-gray-600 text-2xl lg:text-3xl mb-10\">Be the first artist to join our community showcase!<\/p>\r\n <button onclick=\"showSignup()\" class=\"bg-blue-900 hover:bg-blue-800 text-white px-12 py-6 rounded-lg font-comic font-bold text-xl lg:text-2xl transition-all duration-300 transform hover:scale-105\">\r\n Join as Artist\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Gallery rotation functionality\r\n const galleries = {};\r\n let currentImages = {};\r\n\r\n function rotateGallery(artistId) {\r\n const galleryElement = document.querySelector(`[data-gallery=\"${artistId}\"]`);\r\n if (!galleryElement || !galleries[artistId]) return;\r\n \r\n const images = galleries[artistId];\r\n \r\n \/\/ Fade out\r\n galleryElement.style.opacity = '0';\r\n \r\n setTimeout(() => {\r\n \/\/ Change image\r\n currentImages[artistId] = (currentImages[artistId] + 1) % images.length;\r\n galleryElement.innerHTML = images[currentImages[artistId]];\r\n \r\n \/\/ Fade in\r\n galleryElement.style.opacity = '1';\r\n }, 500);\r\n }\r\n\r\n \/\/ Authentication functionality\r\n let currentUser = null;\r\n let artistProfiles = {};\r\n\r\n function showLogin() {\r\n document.getElementById('loginModal').classList.remove('hidden');\r\n }\r\n\r\n function showSignup() {\r\n document.getElementById('signupModal').classList.remove('hidden');\r\n }\r\n\r\n function closeModal() {\r\n document.getElementById('loginModal').classList.add('hidden');\r\n document.getElementById('signupModal').classList.add('hidden');\r\n document.getElementById('dashboardModal').classList.add('hidden');\r\n }\r\n\r\n function handleLogin(event) {\r\n event.preventDefault();\r\n const email = document.getElementById('loginEmail').value;\r\n const password = document.getElementById('loginPassword').value;\r\n \r\n \/\/ Simulate login (in real app, this would connect to a backend)\r\n if (email && password) {\r\n if (artistProfiles[email]) {\r\n currentUser = { name: artistProfiles[email].name, email };\r\n showNotification('Welcome back! You are now logged in.', 'success');\r\n } else {\r\n showNotification('Account not found. Please sign up first.', 'error');\r\n return;\r\n }\r\n \r\n updateAuthUI();\r\n closeModal();\r\n \r\n \/\/ Clear form\r\n document.getElementById('loginEmail').value = '';\r\n document.getElementById('loginPassword').value = '';\r\n }\r\n }\r\n\r\n function handleSignup(event) {\r\n event.preventDefault();\r\n const name = document.getElementById('signupName').value;\r\n const email = document.getElementById('signupEmail').value;\r\n const password = document.getElementById('signupPassword').value;\r\n \r\n \/\/ Simulate signup (in real app, this would connect to a backend)\r\n if (name && email && password) {\r\n if (artistProfiles[email]) {\r\n showNotification('Account already exists. Please login instead.', 'error');\r\n return;\r\n }\r\n \r\n currentUser = { name, email };\r\n \r\n \/\/ Create new artist profile\r\n const artistId = generateArtistId(email);\r\n artistProfiles[email] = {\r\n id: artistId,\r\n name: name,\r\n bio: 'New artist - please update your bio in the dashboard.',\r\n galleryTitles: ['Artwork 1', 'Artwork 2', 'Artwork 3']\r\n };\r\n \r\n \/\/ Create default gallery\r\n createDefaultGallery(artistId);\r\n \r\n \/\/ Add artist card to the page\r\n addArtistCard(artistProfiles[email]);\r\n \r\n updateAuthUI();\r\n closeModal();\r\n \r\n \/\/ Clear form\r\n document.getElementById('signupName').value = '';\r\n document.getElementById('signupEmail').value = '';\r\n document.getElementById('signupPassword').value = '';\r\n \r\n \/\/ Show success message\r\n showNotification('Account created successfully! Welcome to ArtHub.', 'success');\r\n }\r\n }\r\n\r\n function generateArtistId(email) {\r\n return email.replace(\/[^a-zA-Z0-9]\/g, '').toLowerCase();\r\n }\r\n\r\n function createDefaultGallery(artistId) {\r\n galleries[artistId] = [\r\n `<svg viewBox=\"0 0 300 200\" class=\"w-full h-full\">\r\n <rect width=\"300\" height=\"200\" fill=\"#f0f0f0\"\/>\r\n <circle cx=\"150\" cy=\"100\" r=\"40\" fill=\"#e0e0e0\"\/>\r\n <text x=\"150\" y=\"105\" text-anchor=\"middle\" fill=\"#999\" font-size=\"16\" font-weight=\"bold\">Artwork 1<\/text>\r\n <\/svg>`,\r\n `<svg viewBox=\"0 0 300 200\" class=\"w-full h-full\">\r\n <rect width=\"300\" height=\"200\" fill=\"#f5f5f5\"\/>\r\n <rect x=\"100\" y=\"75\" width=\"100\" height=\"50\" fill=\"#d0d0d0\"\/>\r\n <text x=\"150\" y=\"105\" text-anchor=\"middle\" fill=\"#999\" font-size=\"16\" font-weight=\"bold\">Artwork 2<\/text>\r\n <\/svg>`,\r\n `<svg viewBox=\"0 0 300 200\" class=\"w-full h-full\">\r\n <rect width=\"300\" height=\"200\" fill=\"#fafafa\"\/>\r\n <polygon points=\"150,60 120,140 180,140\" fill=\"#c0c0c0\"\/>\r\n <text x=\"150\" y=\"160\" text-anchor=\"middle\" fill=\"#999\" font-size=\"16\" font-weight=\"bold\">Artwork 3<\/text>\r\n <\/svg>`\r\n ];\r\n currentImages[artistId] = 0;\r\n \r\n \/\/ Start gallery rotation for this artist\r\n setInterval(() => rotateGallery(artistId), 4000 + Math.random() * 2000);\r\n }\r\n\r\n function addArtistCard(profile) {\r\n const noArtistsMessage = document.getElementById('noArtistsMessage');\r\n if (noArtistsMessage) {\r\n noArtistsMessage.remove();\r\n }\r\n \r\n const artistsGrid = document.getElementById('artistsGrid');\r\n const artistCard = document.createElement('div');\r\n artistCard.className = 'bg-white rounded-2xl shadow-xl p-8 relative overflow-hidden animate-scale-in transition-all duration-300 hover:shadow-2xl transform hover:scale-105 break-inside-avoid mb-8 inline-block w-full';\r\n artistCard.id = `artist-${profile.id}`;\r\n \r\n artistCard.innerHTML = `\r\n \r\n <div class=\"creature butterfly\" style=\"top: 25px; left: 35px; font-size: 28px;\">\r\n \ud83e\udd8b\r\n <\/div>\r\n <div class=\"creature ladybug\" style=\"top: 70px; right: 45px; font-size: 24px;\">\r\n \ud83d\udc1e\r\n <\/div>\r\n <div class=\"creature dragon\" style=\"top: 15px; right: 15px; font-size: 32px;\">\r\n \ud83d\udc09\r\n <\/div>\r\n \r\n <div class=\"mb-8\">\r\n <h2 class=\"text-5xl lg:text-6xl font-bold text-gray-800 mb-6\">${profile.name}<\/h2>\r\n <p class=\"text-gray-600 leading-relaxed text-xl lg:text-2xl\">\r\n ${profile.bio}\r\n <\/p>\r\n <\/div>\r\n \r\n <div class=\"gallery-container bg-gray-100 rounded-xl h-80 lg:h-96 relative\">\r\n <div class=\"gallery-image absolute inset-0 flex items-center justify-center\" data-gallery=\"${profile.id}\">\r\n ${galleries[profile.id][0]}\r\n <\/div>\r\n <\/div>\r\n `;\r\n \r\n artistsGrid.appendChild(artistCard);\r\n }\r\n\r\n function showDashboard() {\r\n if (!currentUser) return;\r\n \r\n const profile = artistProfiles[currentUser.email];\r\n if (profile) {\r\n \/\/ Populate dashboard form with current data\r\n document.getElementById('dashboardName').value = profile.name;\r\n document.getElementById('dashboardBio').value = profile.bio;\r\n document.getElementById('image1Title').value = profile.galleryTitles[0] || '';\r\n document.getElementById('image2Title').value = profile.galleryTitles[1] || '';\r\n document.getElementById('image3Title').value = profile.galleryTitles[2] || '';\r\n }\r\n \r\n document.getElementById('dashboardModal').classList.remove('hidden');\r\n }\r\n\r\n function updateProfile(event) {\r\n event.preventDefault();\r\n if (!currentUser) return;\r\n \r\n const name = document.getElementById('dashboardName').value;\r\n const bio = document.getElementById('dashboardBio').value;\r\n const image1Title = document.getElementById('image1Title').value;\r\n const image2Title = document.getElementById('image2Title').value;\r\n const image3Title = document.getElementById('image3Title').value;\r\n \r\n const profile = artistProfiles[currentUser.email];\r\n \r\n \/\/ Update profile\r\n profile.name = name;\r\n profile.bio = bio;\r\n profile.galleryTitles = [\r\n image1Title || 'Artwork 1',\r\n image2Title || 'Artwork 2', \r\n image3Title || 'Artwork 3'\r\n ];\r\n \r\n \/\/ Update gallery with new titles\r\n updateGalleryTitles(profile.id, profile.galleryTitles);\r\n \r\n \/\/ Update current user name\r\n currentUser.name = name;\r\n updateAuthUI();\r\n \r\n \/\/ Update the artist card on the main page\r\n updateArtistCard(profile);\r\n \r\n closeModal();\r\n showNotification('Profile updated successfully!', 'success');\r\n }\r\n\r\n function updateGalleryTitles(artistId, titles) {\r\n if (!galleries[artistId]) return;\r\n \r\n galleries[artistId] = [\r\n `<svg viewBox=\"0 0 300 200\" class=\"w-full h-full\">\r\n <rect width=\"300\" height=\"200\" fill=\"#f0f0f0\"\/>\r\n <circle cx=\"150\" cy=\"100\" r=\"40\" fill=\"#e0e0e0\"\/>\r\n <text x=\"150\" y=\"105\" text-anchor=\"middle\" fill=\"#999\" font-size=\"16\" font-weight=\"bold\">${titles[0]}<\/text>\r\n <\/svg>`,\r\n `<svg viewBox=\"0 0 300 200\" class=\"w-full h-full\">\r\n <rect width=\"300\" height=\"200\" fill=\"#f5f5f5\"\/>\r\n <rect x=\"100\" y=\"75\" width=\"100\" height=\"50\" fill=\"#d0d0d0\"\/>\r\n <text x=\"150\" y=\"105\" text-anchor=\"middle\" fill=\"#999\" font-size=\"16\" font-weight=\"bold\">${titles[1]}<\/text>\r\n <\/svg>`,\r\n `<svg viewBox=\"0 0 300 200\" class=\"w-full h-full\">\r\n <rect width=\"300\" height=\"200\" fill=\"#fafafa\"\/>\r\n <polygon points=\"150,60 120,140 180,140\" fill=\"#c0c0c0\"\/>\r\n <text x=\"150\" y=\"160\" text-anchor=\"middle\" fill=\"#999\" font-size=\"16\" font-weight=\"bold\">${titles[2]}<\/text>\r\n <\/svg>`\r\n ];\r\n }\r\n\r\n function updateArtistCard(profile) {\r\n const artistCard = document.getElementById(`artist-${profile.id}`);\r\n if (!artistCard) return;\r\n \r\n const nameElement = artistCard.querySelector('h2');\r\n const bioElement = artistCard.querySelector('p');\r\n \r\n if (nameElement) nameElement.textContent = profile.name;\r\n if (bioElement) bioElement.textContent = profile.bio;\r\n }\r\n\r\n function logout() {\r\n currentUser = null;\r\n updateAuthUI();\r\n showNotification('You have been logged out successfully.', 'info');\r\n \r\n \/\/ Redirect to main artist hub page after logout\r\n setTimeout(() => {\r\n window.location.reload();\r\n }, 1500);\r\n }\r\n\r\n function updateAuthUI() {\r\n const authButtons = document.getElementById('authButtons');\r\n const userSection = document.getElementById('userSection');\r\n const welcomeText = document.getElementById('welcomeText');\r\n \r\n if (currentUser) {\r\n authButtons.classList.add('hidden');\r\n userSection.classList.remove('hidden');\r\n welcomeText.textContent = `Welcome, ${currentUser.name}!`;\r\n } else {\r\n authButtons.classList.remove('hidden');\r\n userSection.classList.add('hidden');\r\n }\r\n }\r\n\r\n function showNotification(message, type) {\r\n const notification = document.createElement('div');\r\n notification.className = `fixed top-4 right-4 z-50 px-6 py-4 rounded-lg shadow-lg text-white font-medium transform transition-all duration-300 translate-x-full`;\r\n \r\n if (type === 'success') {\r\n notification.classList.add('bg-green-600');\r\n } else if (type === 'info') {\r\n notification.classList.add('bg-blue-600');\r\n } else {\r\n notification.classList.add('bg-red-600');\r\n }\r\n \r\n notification.textContent = message;\r\n document.body.appendChild(notification);\r\n \r\n \/\/ Animate in\r\n setTimeout(() => {\r\n notification.classList.remove('translate-x-full');\r\n }, 100);\r\n \r\n \/\/ Remove after 3 seconds\r\n setTimeout(() => {\r\n notification.classList.add('translate-x-full');\r\n setTimeout(() => {\r\n document.body.removeChild(notification);\r\n }, 300);\r\n }, 3000);\r\n }\r\n\r\n \/\/ Close modals when clicking outside\r\n document.getElementById('loginModal').addEventListener('click', function(e) {\r\n if (e.target === this) closeModal();\r\n });\r\n\r\n document.getElementById('signupModal').addEventListener('click', function(e) {\r\n if (e.target === this) closeModal();\r\n });\r\n\r\n document.getElementById('dashboardModal').addEventListener('click', function(e) {\r\n if (e.target === this) closeModal();\r\n });\r\n\r\n \/\/ Close modals with Escape key\r\n document.addEventListener('keydown', function(e) {\r\n if (e.key === 'Escape') closeModal();\r\n });\r\n <\/script>\r\n<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9801460f117524d9',t:'MTc1ODAzNTI0OC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Local Artists Showcase \ud83c\udfa8 ArtHub Login Sign Up Dashboard Logout Welcome Back Email Password Login Cancel Join ArtHub Full Name Email Password Sign Up Cancel Artist Dashboard \u00d7 Artist Name Short Bio Gallery Images Image 1 Title Preview 1 Image 2 Title Preview 2 Image 3 Title Preview 3 Note: Image upload functionality would connect […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"_eb_attr":"","ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","omw_enable_modal_window":"enable","footnotes":""},"class_list":["post-469","page","type-page","status-publish","hentry","entry","owp-thumbs-layout-horizontal","owp-btn-normal","owp-tabs-layout-horizontal","has-no-thumbnails","has-product-nav","circle-sale"],"acf":[],"_links":{"self":[{"href":"https:\/\/lovebugdesigns.us\/index.php\/wp-json\/wp\/v2\/pages\/469","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lovebugdesigns.us\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lovebugdesigns.us\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lovebugdesigns.us\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lovebugdesigns.us\/index.php\/wp-json\/wp\/v2\/comments?post=469"}],"version-history":[{"count":16,"href":"https:\/\/lovebugdesigns.us\/index.php\/wp-json\/wp\/v2\/pages\/469\/revisions"}],"predecessor-version":[{"id":535,"href":"https:\/\/lovebugdesigns.us\/index.php\/wp-json\/wp\/v2\/pages\/469\/revisions\/535"}],"wp:attachment":[{"href":"https:\/\/lovebugdesigns.us\/index.php\/wp-json\/wp\/v2\/media?parent=469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Local Artists Showcase<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fredoka+One:wght@400&family=Comic+Neue:wght@300;400;700&family=Bubblegum+Sans&family=Kalam:wght@300;400;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n .font-fredoka { font-family : 'Fredoka One', cursive; }\r\n .font-comic { font-family: 'Comic Neue', cursive; }\r\n .font-bubblegum { font-family: 'Bubblegum Sans', cursive; }\r\n .font-kalam { font-family: 'Kalam', cursive; }\r\n @keyframes float {\r\n 0%, 100% { transform: translateY(0px) rotate(0deg); }\r\n 25% { transform: translateY(-20px) rotate(5deg); }\r\n 50% { transform: translateY(-10px) rotate(-3deg); }\r\n 75% { transform: translateY(-15px) rotate(2deg); }\r\n }\r\n \r\n @keyframes flutter {\r\n 0%, 100% { transform: translateX(0px) translateY(0px) rotate(0deg); }\r\n 25% { transform: translateX(10px) translateY(-15px) rotate(10deg); }\r\n 50% { transform: translateX(-5px) translateY(-25px) rotate(-5deg); }\r\n 75% { transform: translateX(15px) translateY(-10px) rotate(8deg); }\r\n }\r\n \r\n @keyframes soar {\r\n 0% { transform: translateX(-100px) translateY(20px) rotate(-10deg); }\r\n 50% { transform: translateX(50px) translateY(-30px) rotate(15deg); }\r\n 100% { transform: translateX(200px) translateY(10px) rotate(-5deg); }\r\n }\r\n \r\n @keyframes cloudDrift {\r\n 0% { transform: translateX(-100px); }\r\n 100% { transform: translateX(calc(100vw + 100px)); }\r\n }\r\n \r\n @keyframes bubbleRise {\r\n 0% { \r\n transform: translateY(100vh) scale(0);\r\n opacity: 0;\r\n }\r\n 10% {\r\n opacity: 1;\r\n }\r\n 90% {\r\n opacity: 1;\r\n }\r\n 100% { \r\n transform: translateY(-100px) scale(1);\r\n opacity: 0;\r\n }\r\n }\r\n \r\n @keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n \r\n @keyframes slideInLeft {\r\n from {\r\n opacity: 0;\r\n transform: translateX(-50px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n }\r\n \r\n @keyframes slideInRight {\r\n from {\r\n opacity: 0;\r\n transform: translateX(50px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n }\r\n \r\n @keyframes scaleIn {\r\n from {\r\n opacity: 0;\r\n transform: scale(0.8);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n }\r\n \r\n @keyframes pulse {\r\n 0%, 100% {\r\n transform: scale(1);\r\n }\r\n 50% {\r\n transform: scale(1.05);\r\n }\r\n }\r\n \r\n .animate-fade-in-up {\r\n animation: fadeInUp 0.8s ease-out forwards;\r\n }\r\n \r\n .animate-slide-in-left {\r\n animation: slideInLeft 0.8s ease-out forwards;\r\n }\r\n \r\n .animate-slide-in-right {\r\n animation: slideInRight 0.8s ease-out forwards;\r\n }\r\n \r\n .animate-scale-in {\r\n animation: scaleIn 0.6s ease-out forwards;\r\n }\r\n \r\n .animate-pulse-hover:hover {\r\n animation: pulse 0.6s ease-in-out;\r\n }\r\n \r\n .animate-delay-1 {\r\n animation-delay: 0.2s;\r\n }\r\n \r\n .animate-delay-2 {\r\n animation-delay: 0.4s;\r\n }\r\n \r\n .animate-delay-3 {\r\n animation-delay: 0.6s;\r\n }\r\n \r\n .animated-bg {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(135deg, #87CEEB 0%, #98D8E8 50%, #B0E0E6 100%);\r\n z-index: -1;\r\n overflow: hidden;\r\n }\r\n \r\n .cloud {\r\n position: absolute;\r\n background: rgba(255, 255, 255, 0.8);\r\n border-radius: 50px;\r\n opacity: 0.7;\r\n }\r\n \r\n .cloud:before,\r\n .cloud:after {\r\n content: '';\r\n position: absolute;\r\n background: rgba(255, 255, 255, 0.8);\r\n border-radius: 50px;\r\n }\r\n \r\n .cloud1 {\r\n width: 80px;\r\n height: 40px;\r\n animation: cloudDrift 20s linear infinite;\r\n top: 20%;\r\n }\r\n \r\n .cloud1:before {\r\n width: 50px;\r\n height: 50px;\r\n top: -25px;\r\n left: 10px;\r\n }\r\n \r\n .cloud1:after {\r\n width: 60px;\r\n height: 40px;\r\n top: -15px;\r\n right: 10px;\r\n }\r\n \r\n .cloud2 {\r\n width: 60px;\r\n height: 30px;\r\n animation: cloudDrift 25s linear infinite;\r\n top: 40%;\r\n animation-delay: -5s;\r\n }\r\n \r\n .cloud2:before {\r\n width: 40px;\r\n height: 40px;\r\n top: -20px;\r\n left: 8px;\r\n }\r\n \r\n .cloud2:after {\r\n width: 50px;\r\n height: 30px;\r\n top: -10px;\r\n right: 8px;\r\n }\r\n \r\n .cloud3 {\r\n width: 100px;\r\n height: 50px;\r\n animation: cloudDrift 30s linear infinite;\r\n top: 60%;\r\n animation-delay: -10s;\r\n }\r\n \r\n .cloud3:before {\r\n width: 60px;\r\n height: 60px;\r\n top: -30px;\r\n left: 15px;\r\n }\r\n \r\n .cloud3:after {\r\n width: 70px;\r\n height: 50px;\r\n top: -20px;\r\n right: 15px;\r\n }\r\n \r\n .bubble {\r\n position: absolute;\r\n border-radius: 50%;\r\n background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.3));\r\n border: 1px solid rgba(255, 255, 255, 0.5);\r\n }\r\n \r\n .bubble1 {\r\n width: 20px;\r\n height: 20px;\r\n left: 10%;\r\n animation: bubbleRise 8s linear infinite;\r\n }\r\n \r\n .bubble2 {\r\n width: 15px;\r\n height: 15px;\r\n left: 30%;\r\n animation: bubbleRise 10s linear infinite;\r\n animation-delay: -2s;\r\n }\r\n \r\n .bubble3 {\r\n width: 25px;\r\n height: 25px;\r\n left: 60%;\r\n animation: bubbleRise 12s linear infinite;\r\n animation-delay: -4s;\r\n }\r\n \r\n .bubble4 {\r\n width: 18px;\r\n height: 18px;\r\n left: 80%;\r\n animation: bubbleRise 9s linear infinite;\r\n animation-delay: -6s;\r\n }\r\n \r\n .bubble5 {\r\n width: 12px;\r\n height: 12px;\r\n left: 15%;\r\n animation: bubbleRise 11s linear infinite;\r\n animation-delay: -1s;\r\n }\r\n \r\n .bubble6 {\r\n width: 22px;\r\n height: 22px;\r\n left: 45%;\r\n animation: bubbleRise 13s linear infinite;\r\n animation-delay: -3s;\r\n }\r\n \r\n .bubble7 {\r\n width: 16px;\r\n height: 16px;\r\n left: 70%;\r\n animation: bubbleRise 7s linear infinite;\r\n animation-delay: -5s;\r\n }\r\n \r\n .bubble8 {\r\n width: 14px;\r\n height: 14px;\r\n left: 25%;\r\n animation: bubbleRise 14s linear infinite;\r\n animation-delay: -7s;\r\n }\r\n \r\n .bubble9 {\r\n width: 20px;\r\n height: 20px;\r\n left: 55%;\r\n animation: bubbleRise 6s linear infinite;\r\n animation-delay: -2s;\r\n }\r\n \r\n .bubble10 {\r\n width: 17px;\r\n height: 17px;\r\n left: 90%;\r\n animation: bubbleRise 15s linear infinite;\r\n animation-delay: -8s;\r\n }\r\n \r\n .creature {\r\n position: absolute;\r\n pointer-events: none;\r\n z-index: 10;\r\n }\r\n \r\n .ladybug {\r\n animation: float 4s ease-in-out infinite;\r\n animation-delay: 0s;\r\n }\r\n \r\n .butterfly {\r\n animation: flutter 6s ease-in-out infinite;\r\n animation-delay: 2s;\r\n }\r\n \r\n .dragon {\r\n animation: soar 12s linear infinite;\r\n animation-delay: 4s;\r\n }\r\n \r\n .gallery-container {\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .gallery-image {\r\n transition: opacity 1s ease-in-out;\r\n }\r\n \r\n .fade-enter {\r\n opacity: 0;\r\n }\r\n \r\n .fade-enter-active {\r\n opacity: 1;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"min-h-screen relative\">\r\n \r\n <div class=\"animated-bg\">\r\n \r\n <div class=\"cloud cloud1\"><\/div>\r\n <div class=\"cloud cloud2\"><\/div>\r\n <div class=\"cloud cloud3\"><\/div>\r\n \r\n \r\n <div class=\"bubble bubble1\"><\/div>\r\n <div class=\"bubble bubble2\"><\/div>\r\n <div class=\"bubble bubble3\"><\/div>\r\n <div class=\"bubble bubble4\"><\/div>\r\n <div class=\"bubble bubble5\"><\/div>\r\n <div class=\"bubble bubble6\"><\/div>\r\n <div class=\"bubble bubble7\"><\/div>\r\n <div class=\"bubble bubble8\"><\/div>\r\n <div class=\"bubble bubble9\"><\/div>\r\n <div class=\"bubble bubble10\"><\/div>\r\n <\/div>\r\n \r\n <nav class=\"relative z-20 bg-white\/90 backdrop-blur-sm shadow-lg animate-slide-in-left\">\r\n <div class=\"container mx-auto px-8 py-6\">\r\n <div class=\"flex justify-between items-center\">\r\n <div class=\"text-4xl font-fredoka text-gray-800 animate-pulse-hover\">\r\n \ud83c\udfa8 ArtHub\r\n <\/div>\r\n \r\n <div class=\"flex items-center space-x-6\">\r\n <div id=\"authButtons\" class=\"flex space-x-4\">\r\n <button onclick=\"showLogin()\" class=\"bg-red-600 hover:bg-red-700 text-white px-8 py-3 rounded-lg font-comic font-bold text-lg transition-all duration-300 transform hover:scale-105 animate-pulse-hover\">\r\n Login\r\n <\/button>\r\n <button onclick=\"showSignup()\" class=\"bg-blue-900 hover:bg-blue-800 text-white px-8 py-3 rounded-lg font-comic font-bold text-lg transition-all duration-300 transform hover:scale-105 animate-pulse-hover\">\r\n Sign Up\r\n <\/button>\r\n <\/div>\r\n \r\n <div id=\"userSection\" class=\"hidden flex items-center space-x-4\">\r\n <span id=\"welcomeText\" class=\"text-gray-700 font-comic font-bold text-lg\"><\/span>\r\n <button onclick=\"showDashboard()\" class=\"bg-blue-900 hover:bg-blue-800 text-white px-8 py-3 rounded-lg font-comic font-bold text-lg transition-all duration-300 transform hover:scale-105 animate-pulse-hover\">\r\n Dashboard\r\n <\/button>\r\n <button onclick=\"logout()\" class=\"bg-red-600 hover:bg-red-700 text-white px-8 py-3 rounded-lg font-comic font-bold text-lg transition-all duration-300 transform hover:scale-105 animate-pulse-hover\">\r\n Logout\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n\r\n \r\n <div id=\"loginModal\" class=\"hidden fixed inset-0 bg-black\/50 backdrop-blur-sm z-50 flex items-center justify-center\">\r\n <div class=\"bg-white rounded-2xl p-12 max-w-lg w-full mx-4 shadow-2xl animate-scale-in\">\r\n <h2 class=\"text-4xl font-bubblegum text-gray-800 mb-8 text-center animate-fade-in-up\">Welcome Back<\/h2>\r\n <form onsubmit=\"handleLogin(event)\">\r\n <div class=\"mb-6 animate-fade-in-up animate-delay-1\">\r\n <label class=\"block text-gray-700 font-comic font-bold mb-3 text-lg\">Email<\/label>\r\n <input type=\"email\" id=\"loginEmail\" required class=\"w-full px-6 py-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-lg font-kalam transition-all duration-300\">\r\n <\/div>\r\n <div class=\"mb-8 animate-fade-in-up animate-delay-2\">\r\n <label class=\"block text-gray-700 font-comic font-bold mb-3 text-lg\">Password<\/label>\r\n <input type=\"password\" id=\"loginPassword\" required class=\"w-full px-6 py-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-lg font-kalam transition-all duration-300\">\r\n <\/div>\r\n <div class=\"flex space-x-4 animate-fade-in-up animate-delay-3\">\r\n <button type=\"submit\" class=\"flex-1 bg-red-600 hover:bg-red-700 text-white py-4 rounded-lg font-comic font-bold text-lg transition-all duration-300 transform hover:scale-105\">\r\n Login\r\n <\/button>\r\n <button type=\"button\" onclick=\"closeModal()\" class=\"flex-1 bg-gray-300 hover:bg-gray-400 text-gray-700 py-4 rounded-lg font-comic font-bold text-lg transition-all duration-300 transform hover:scale-105\">\r\n Cancel\r\n <\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"signupModal\" class=\"hidden fixed inset-0 bg-black\/50 backdrop-blur-sm z-50 flex items-center justify-center\">\r\n <div class=\"bg-white rounded-2xl p-12 max-w-lg w-full mx-4 shadow-2xl animate-scale-in\">\r\n <h2 class=\"text-4xl font-bubblegum text-gray-800 mb-8 text-center animate-fade-in-up\">Join ArtHub<\/h2>\r\n <form onsubmit=\"handleSignup(event)\">\r\n <div class=\"mb-6 animate-fade-in-up animate-delay-1\">\r\n <label class=\"block text-gray-700 font-comic font-bold mb-3 text-lg\">Full Name<\/label>\r\n <input type=\"text\" id=\"signupName\" required class=\"w-full px-6 py-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent text-lg font-kalam transition-all duration-300\">\r\n <\/div>\r\n <div class=\"mb-6 animate-fade-in-up animate-delay-2\">\r\n <label class=\"block text-gray-700 font-comic font-bold mb-3 text-lg\">Email<\/label>\r\n <input type=\"email\" id=\"signupEmail\" required class=\"w-full px-6 py-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent text-lg font-kalam transition-all duration-300\">\r\n <\/div>\r\n <div class=\"mb-8 animate-fade-in-up animate-delay-3\">\r\n <label class=\"block text-gray-700 font-comic font-bold mb-3 text-lg\">Password<\/label>\r\n <input type=\"password\" id=\"signupPassword\" required class=\"w-full px-6 py-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent text-lg font-kalam transition-all duration-300\">\r\n <\/div>\r\n <div class=\"flex space-x-4 animate-fade-in-up animate-delay-3\">\r\n <button type=\"submit\" class=\"flex-1 bg-blue-900 hover:bg-blue-800 text-white py-4 rounded-lg font-comic font-bold text-lg transition-all duration-300 transform hover:scale-105\">\r\n Sign Up\r\n <\/button>\r\n <button type=\"button\" onclick=\"closeModal()\" class=\"flex-1 bg-gray-300 hover:bg-gray-400 text-gray-700 py-4 rounded-lg font-comic font-bold text-lg transition-all duration-300 transform hover:scale-105\">\r\n Cancel\r\n <\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"dashboardModal\" class=\"hidden fixed inset-0 bg-black\/50 backdrop-blur-sm z-50 flex items-center justify-center\">\r\n <div class=\"bg-white rounded-2xl p-12 max-w-5xl w-full mx-4 shadow-2xl max-h-[90vh] overflow-y-auto animate-scale-in\">\r\n <div class=\"flex justify-between items-center mb-8 animate-fade-in-up\">\r\n <h2 class=\"text-4xl font-bubblegum text-gray-800\">Artist Dashboard<\/h2>\r\n <button onclick=\"closeModal()\" class=\"text-gray-500 hover:text-gray-700 text-3xl transition-all duration-300 hover:scale-110\">\u00d7<\/button>\r\n <\/div>\r\n \r\n <form onsubmit=\"updateProfile(event)\" class=\"space-y-8\">\r\n <div class=\"animate-fade-in-up animate-delay-1\">\r\n <label class=\"block text-gray-700 font-comic font-bold mb-3 text-lg\">Artist Name<\/label>\r\n <input type=\"text\" id=\"dashboardName\" required class=\"w-full px-6 py-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-lg font-kalam transition-all duration-300\">\r\n <\/div>\r\n \r\n <div class=\"animate-fade-in-up animate-delay-2\">\r\n <label class=\"block text-gray-700 font-comic font-bold mb-3 text-lg\">Short Bio<\/label>\r\n <textarea id=\"dashboardBio\" rows=\"5\" required class=\"w-full px-6 py-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none text-lg font-kalam transition-all duration-300\"><\/textarea>\r\n <\/div>\r\n \r\n <div class=\"animate-fade-in-up animate-delay-3\">\r\n <label class=\"block text-gray-700 font-comic font-bold mb-6 text-lg\">Gallery Images<\/label>\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6 mb-6\">\r\n <div class=\"space-y-3\">\r\n <label class=\"block text-base text-gray-600 font-comic font-bold\">Image 1 Title<\/label>\r\n <input type=\"text\" id=\"image1Title\" placeholder=\"e.g., Mountain Sunrise\" class=\"w-full px-4 py-3 border border-gray-300 rounded-lg text-base font-kalam transition-all duration-300\">\r\n <div class=\"bg-gray-100 rounded-lg h-40 flex items-center justify-center\">\r\n <span class=\"text-gray-500 text-base font-comic\">Preview 1<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"space-y-3\">\r\n <label class=\"block text-base text-gray-600 font-comic font-bold\">Image 2 Title<\/label>\r\n <input type=\"text\" id=\"image2Title\" placeholder=\"e.g., Ocean Waves\" class=\"w-full px-4 py-3 border border-gray-300 rounded-lg text-base font-kalam transition-all duration-300\">\r\n <div class=\"bg-gray-100 rounded-lg h-40 flex items-center justify-center\">\r\n <span class=\"text-gray-500 text-base font-comic\">Preview 2<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"space-y-3\">\r\n <label class=\"block text-base text-gray-600 font-comic font-bold\">Image 3 Title<\/label>\r\n <input type=\"text\" id=\"image3Title\" placeholder=\"e.g., City Life\" class=\"w-full px-4 py-3 border border-gray-300 rounded-lg text-base font-kalam transition-all duration-300\">\r\n <div class=\"bg-gray-100 rounded-lg h-40 flex items-center justify-center\">\r\n <span class=\"text-gray-500 text-base font-comic\">Preview 3<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-base text-gray-500\">Note: Image upload functionality would connect to a backend service in a real application.<\/p>\r\n <\/div>\r\n \r\n <div class=\"flex space-x-4 pt-6 animate-fade-in-up animate-delay-3\">\r\n <button type=\"submit\" class=\"flex-1 bg-blue-900 hover:bg-blue-800 text-white py-4 rounded-lg font-comic font-bold text-lg transition-all duration-300 transform hover:scale-105\">\r\n Save Changes\r\n <\/button>\r\n <button type=\"button\" onclick=\"closeModal()\" class=\"flex-1 bg-gray-300 hover:bg-gray-400 text-gray-700 py-4 rounded-lg font-comic font-bold text-lg transition-all duration-300 transform hover:scale-105\">\r\n Cancel\r\n <\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"container mx-auto px-8 py-16 relative z-10\">\r\n <div class=\"text-center mb-20 animate-fade-in-up\">\r\n <h1 class=\"text-8xl lg:text-9xl font-fredoka text-blue-600 mb-12 animate-pulse-hover\">Local Artists Showcase<\/h1>\r\n <p class=\"text-3xl lg:text-4xl text-gray-600 max-w-6xl mx-auto leading-relaxed animate-fade-in-up animate-delay-1\">\r\n Discover the incredible talent in our community. Each artist brings their unique vision and creativity, \r\n transforming ordinary moments into extraordinary art. Explore their stories and immerse yourself in their beautiful works.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div id=\"artistsGrid\" class=\"columns-1 md:columns-2 lg:columns-3 xl:columns-4 gap-8 max-w-8xl mx-auto space-y-8\">\r\n \r\n <div id=\"noArtistsMessage\" class=\"w-full text-center py-20 animate-scale-in break-inside-avoid\">\r\n <div class=\"bg-white\/80 backdrop-blur-sm rounded-2xl p-16 shadow-lg animate-pulse-hover\">\r\n <div class=\"text-8xl mb-8\">\ud83c\udfa8<\/div>\r\n <h3 class=\"text-4xl lg:text-5xl font-bold text-gray-800 mb-8\">No Artists Yet<\/h3>\r\n <p class=\"text-gray-600 text-2xl lg:text-3xl mb-10\">Be the first artist to join our community showcase!<\/p>\r\n <button onclick=\"showSignup()\" class=\"bg-blue-900 hover:bg-blue-800 text-white px-12 py-6 rounded-lg font-comic font-bold text-xl lg:text-2xl transition-all duration-300 transform hover:scale-105\">\r\n Join as Artist\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Gallery rotation functionality\r\n const galleries = {};\r\n let currentImages = {};\r\n\r\n function rotateGallery(artistId) {\r\n const galleryElement = document.querySelector(`[data-gallery=\"${artistId}\"]`);\r\n if (!galleryElement || !galleries[artistId]) return;\r\n \r\n const images = galleries[artistId];\r\n \r\n \/\/ Fade out\r\n galleryElement.style.opacity = '0';\r\n \r\n setTimeout(() => {\r\n \/\/ Change image\r\n currentImages[artistId] = (currentImages[artistId] + 1) % images.length;\r\n galleryElement.innerHTML = images[currentImages[artistId]];\r\n \r\n \/\/ Fade in\r\n galleryElement.style.opacity = '1';\r\n }, 500);\r\n }\r\n\r\n \/\/ Authentication functionality\r\n let currentUser = null;\r\n let artistProfiles = {};\r\n\r\n function showLogin() {\r\n document.getElementById('loginModal').classList.remove('hidden');\r\n }\r\n\r\n function showSignup() {\r\n document.getElementById('signupModal').classList.remove('hidden');\r\n }\r\n\r\n function closeModal() {\r\n document.getElementById('loginModal').classList.add('hidden');\r\n document.getElementById('signupModal').classList.add('hidden');\r\n document.getElementById('dashboardModal').classList.add('hidden');\r\n }\r\n\r\n function handleLogin(event) {\r\n event.preventDefault();\r\n const email = document.getElementById('loginEmail').value;\r\n const password = document.getElementById('loginPassword').value;\r\n \r\n \/\/ Simulate login (in real app, this would connect to a backend)\r\n if (email && password) {\r\n if (artistProfiles[email]) {\r\n currentUser = { name: artistProfiles[email].name, email };\r\n showNotification('Welcome back! You are now logged in.', 'success');\r\n } else {\r\n showNotification('Account not found. Please sign up first.', 'error');\r\n return;\r\n }\r\n \r\n updateAuthUI();\r\n closeModal();\r\n \r\n \/\/ Clear form\r\n document.getElementById('loginEmail').value = '';\r\n document.getElementById('loginPassword').value = '';\r\n }\r\n }\r\n\r\n function handleSignup(event) {\r\n event.preventDefault();\r\n const name = document.getElementById('signupName').value;\r\n const email = document.getElementById('signupEmail').value;\r\n const password = document.getElementById('signupPassword').value;\r\n \r\n \/\/ Simulate signup (in real app, this would connect to a backend)\r\n if (name && email && password) {\r\n if (artistProfiles[email]) {\r\n showNotification('Account already exists. Please login instead.', 'error');\r\n return;\r\n }\r\n \r\n currentUser = { name, email };\r\n \r\n \/\/ Create new artist profile\r\n const artistId = generateArtistId(email);\r\n artistProfiles[email] = {\r\n id: artistId,\r\n name: name,\r\n bio: 'New artist - please update your bio in the dashboard.',\r\n galleryTitles: ['Artwork 1', 'Artwork 2', 'Artwork 3']\r\n };\r\n \r\n \/\/ Create default gallery\r\n createDefaultGallery(artistId);\r\n \r\n \/\/ Add artist card to the page\r\n addArtistCard(artistProfiles[email]);\r\n \r\n updateAuthUI();\r\n closeModal();\r\n \r\n \/\/ Clear form\r\n document.getElementById('signupName').value = '';\r\n document.getElementById('signupEmail').value = '';\r\n document.getElementById('signupPassword').value = '';\r\n \r\n \/\/ Show success message\r\n showNotification('Account created successfully! Welcome to ArtHub.', 'success');\r\n }\r\n }\r\n\r\n function generateArtistId(email) {\r\n return email.replace(\/[^a-zA-Z0-9]\/g, '').toLowerCase();\r\n }\r\n\r\n function createDefaultGallery(artistId) {\r\n galleries[artistId] = [\r\n `<svg viewBox=\"0 0 300 200\" class=\"w-full h-full\">\r\n <rect width=\"300\" height=\"200\" fill=\"#f0f0f0\"\/>\r\n <circle cx=\"150\" cy=\"100\" r=\"40\" fill=\"#e0e0e0\"\/>\r\n <text x=\"150\" y=\"105\" text-anchor=\"middle\" fill=\"#999\" font-size=\"16\" font-weight=\"bold\">Artwork 1<\/text>\r\n <\/svg>`,\r\n `<svg viewBox=\"0 0 300 200\" class=\"w-full h-full\">\r\n <rect width=\"300\" height=\"200\" fill=\"#f5f5f5\"\/>\r\n <rect x=\"100\" y=\"75\" width=\"100\" height=\"50\" fill=\"#d0d0d0\"\/>\r\n <text x=\"150\" y=\"105\" text-anchor=\"middle\" fill=\"#999\" font-size=\"16\" font-weight=\"bold\">Artwork 2<\/text>\r\n <\/svg>`,\r\n `<svg viewBox=\"0 0 300 200\" class=\"w-full h-full\">\r\n <rect width=\"300\" height=\"200\" fill=\"#fafafa\"\/>\r\n <polygon points=\"150,60 120,140 180,140\" fill=\"#c0c0c0\"\/>\r\n <text x=\"150\" y=\"160\" text-anchor=\"middle\" fill=\"#999\" font-size=\"16\" font-weight=\"bold\">Artwork 3<\/text>\r\n <\/svg>`\r\n ];\r\n currentImages[artistId] = 0;\r\n \r\n \/\/ Start gallery rotation for this artist\r\n setInterval(() => rotateGallery(artistId), 4000 + Math.random() * 2000);\r\n }\r\n\r\n function addArtistCard(profile) {\r\n const noArtistsMessage = document.getElementById('noArtistsMessage');\r\n if (noArtistsMessage) {\r\n noArtistsMessage.remove();\r\n }\r\n \r\n const artistsGrid = document.getElementById('artistsGrid');\r\n const artistCard = document.createElement('div');\r\n artistCard.className = 'bg-white rounded-2xl shadow-xl p-8 relative overflow-hidden animate-scale-in transition-all duration-300 hover:shadow-2xl transform hover:scale-105 break-inside-avoid mb-8 inline-block w-full';\r\n artistCard.id = `artist-${profile.id}`;\r\n \r\n artistCard.innerHTML = `\r\n \r\n <div class=\"creature butterfly\" style=\"top: 25px; left: 35px; font-size: 28px;\">\r\n \ud83e\udd8b\r\n <\/div>\r\n <div class=\"creature ladybug\" style=\"top: 70px; right: 45px; font-size: 24px;\">\r\n \ud83d\udc1e\r\n <\/div>\r\n <div class=\"creature dragon\" style=\"top: 15px; right: 15px; font-size: 32px;\">\r\n \ud83d\udc09\r\n <\/div>\r\n \r\n <div class=\"mb-8\">\r\n <h2 class=\"text-5xl lg:text-6xl font-bold text-gray-800 mb-6\">${profile.name}<\/h2>\r\n <p class=\"text-gray-600 leading-relaxed text-xl lg:text-2xl\">\r\n ${profile.bio}\r\n <\/p>\r\n <\/div>\r\n \r\n <div class=\"gallery-container bg-gray-100 rounded-xl h-80 lg:h-96 relative\">\r\n <div class=\"gallery-image absolute inset-0 flex items-center justify-center\" data-gallery=\"${profile.id}\">\r\n ${galleries[profile.id][0]}\r\n <\/div>\r\n <\/div>\r\n `;\r\n \r\n artistsGrid.appendChild(artistCard);\r\n }\r\n\r\n function showDashboard() {\r\n if (!currentUser) return;\r\n \r\n const profile = artistProfiles[currentUser.email];\r\n if (profile) {\r\n \/\/ Populate dashboard form with current data\r\n document.getElementById('dashboardName').value = profile.name;\r\n document.getElementById('dashboardBio').value = profile.bio;\r\n document.getElementById('image1Title').value = profile.galleryTitles[0] || '';\r\n document.getElementById('image2Title').value = profile.galleryTitles[1] || '';\r\n document.getElementById('image3Title').value = profile.galleryTitles[2] || '';\r\n }\r\n \r\n document.getElementById('dashboardModal').classList.remove('hidden');\r\n }\r\n\r\n function updateProfile(event) {\r\n event.preventDefault();\r\n if (!currentUser) return;\r\n \r\n const name = document.getElementById('dashboardName').value;\r\n const bio = document.getElementById('dashboardBio').value;\r\n const image1Title = document.getElementById('image1Title').value;\r\n const image2Title = document.getElementById('image2Title').value;\r\n const image3Title = document.getElementById('image3Title').value;\r\n \r\n const profile = artistProfiles[currentUser.email];\r\n \r\n \/\/ Update profile\r\n profile.name = name;\r\n profile.bio = bio;\r\n profile.galleryTitles = [\r\n image1Title || 'Artwork 1',\r\n image2Title || 'Artwork 2', \r\n image3Title || 'Artwork 3'\r\n ];\r\n \r\n \/\/ Update gallery with new titles\r\n updateGalleryTitles(profile.id, profile.galleryTitles);\r\n \r\n \/\/ Update current user name\r\n currentUser.name = name;\r\n updateAuthUI();\r\n \r\n \/\/ Update the artist card on the main page\r\n updateArtistCard(profile);\r\n \r\n closeModal();\r\n showNotification('Profile updated successfully!', 'success');\r\n }\r\n\r\n function updateGalleryTitles(artistId, titles) {\r\n if (!galleries[artistId]) return;\r\n \r\n galleries[artistId] = [\r\n `<svg viewBox=\"0 0 300 200\" class=\"w-full h-full\">\r\n <rect width=\"300\" height=\"200\" fill=\"#f0f0f0\"\/>\r\n <circle cx=\"150\" cy=\"100\" r=\"40\" fill=\"#e0e0e0\"\/>\r\n <text x=\"150\" y=\"105\" text-anchor=\"middle\" fill=\"#999\" font-size=\"16\" font-weight=\"bold\">${titles[0]}<\/text>\r\n <\/svg>`,\r\n `<svg viewBox=\"0 0 300 200\" class=\"w-full h-full\">\r\n <rect width=\"300\" height=\"200\" fill=\"#f5f5f5\"\/>\r\n <rect x=\"100\" y=\"75\" width=\"100\" height=\"50\" fill=\"#d0d0d0\"\/>\r\n <text x=\"150\" y=\"105\" text-anchor=\"middle\" fill=\"#999\" font-size=\"16\" font-weight=\"bold\">${titles[1]}<\/text>\r\n <\/svg>`,\r\n `<svg viewBox=\"0 0 300 200\" class=\"w-full h-full\">\r\n <rect width=\"300\" height=\"200\" fill=\"#fafafa\"\/>\r\n <polygon points=\"150,60 120,140 180,140\" fill=\"#c0c0c0\"\/>\r\n <text x=\"150\" y=\"160\" text-anchor=\"middle\" fill=\"#999\" font-size=\"16\" font-weight=\"bold\">${titles[2]}<\/text>\r\n <\/svg>`\r\n ];\r\n }\r\n\r\n function updateArtistCard(profile) {\r\n const artistCard = document.getElementById(`artist-${profile.id}`);\r\n if (!artistCard) return;\r\n \r\n const nameElement = artistCard.querySelector('h2');\r\n const bioElement = artistCard.querySelector('p');\r\n \r\n if (nameElement) nameElement.textContent = profile.name;\r\n if (bioElement) bioElement.textContent = profile.bio;\r\n }\r\n\r\n function logout() {\r\n currentUser = null;\r\n updateAuthUI();\r\n showNotification('You have been logged out successfully.', 'info');\r\n \r\n \/\/ Redirect to main artist hub page after logout\r\n setTimeout(() => {\r\n window.location.reload();\r\n }, 1500);\r\n }\r\n\r\n function updateAuthUI() {\r\n const authButtons = document.getElementById('authButtons');\r\n const userSection = document.getElementById('userSection');\r\n const welcomeText = document.getElementById('welcomeText');\r\n \r\n if (currentUser) {\r\n authButtons.classList.add('hidden');\r\n userSection.classList.remove('hidden');\r\n welcomeText.textContent = `Welcome, ${currentUser.name}!`;\r\n } else {\r\n authButtons.classList.remove('hidden');\r\n userSection.classList.add('hidden');\r\n }\r\n }\r\n\r\n function showNotification(message, type) {\r\n const notification = document.createElement('div');\r\n notification.className = `fixed top-4 right-4 z-50 px-6 py-4 rounded-lg shadow-lg text-white font-medium transform transition-all duration-300 translate-x-full`;\r\n \r\n if (type === 'success') {\r\n notification.classList.add('bg-green-600');\r\n } else if (type === 'info') {\r\n notification.classList.add('bg-blue-600');\r\n } else {\r\n notification.classList.add('bg-red-600');\r\n }\r\n \r\n notification.textContent = message;\r\n document.body.appendChild(notification);\r\n \r\n \/\/ Animate in\r\n setTimeout(() => {\r\n notification.classList.remove('translate-x-full');\r\n }, 100);\r\n \r\n \/\/ Remove after 3 seconds\r\n setTimeout(() => {\r\n notification.classList.add('translate-x-full');\r\n setTimeout(() => {\r\n document.body.removeChild(notification);\r\n }, 300);\r\n }, 3000);\r\n }\r\n\r\n \/\/ Close modals when clicking outside\r\n document.getElementById('loginModal').addEventListener('click', function(e) {\r\n if (e.target === this) closeModal();\r\n });\r\n\r\n document.getElementById('signupModal').addEventListener('click', function(e) {\r\n if (e.target === this) closeModal();\r\n });\r\n\r\n document.getElementById('dashboardModal').addEventListener('click', function(e) {\r\n if (e.target === this) closeModal();\r\n });\r\n\r\n \/\/ Close modals with Escape key\r\n document.addEventListener('keydown', function(e) {\r\n if (e.key === 'Escape') closeModal();\r\n });\r\n <\/script>\r\n<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9801460f117524d9',t:'MTc1ODAzNTI0OC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Local Artists Showcase \ud83c\udfa8 ArtHub Login Sign Up Dashboard Logout Welcome Back Email Password Login Cancel Join ArtHub Full Name Email Password Sign Up Cancel Artist Dashboard \u00d7 Artist Name Short Bio Gallery Images Image 1 Title Preview 1 Image 2 Title Preview 2 Image 3 Title Preview 3 Note: Image upload functionality would connect […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"_eb_attr":"","ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","omw_enable_modal_window":"enable","footnotes":""},"class_list":["post-469","page","type-page","status-publish","hentry","entry","owp-thumbs-layout-horizontal","owp-btn-normal","owp-tabs-layout-horizontal","has-no-thumbnails","has-product-nav","circle-sale"],"acf":[],"_links":{"self":[{"href":"https:\/\/lovebugdesigns.us\/index.php\/wp-json\/wp\/v2\/pages\/469","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lovebugdesigns.us\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lovebugdesigns.us\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lovebugdesigns.us\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lovebugdesigns.us\/index.php\/wp-json\/wp\/v2\/comments?post=469"}],"version-history":[{"count":16,"href":"https:\/\/lovebugdesigns.us\/index.php\/wp-json\/wp\/v2\/pages\/469\/revisions"}],"predecessor-version":[{"id":535,"href":"https:\/\/lovebugdesigns.us\/index.php\/wp-json\/wp\/v2\/pages\/469\/revisions\/535"}],"wp:attachment":[{"href":"https:\/\/lovebugdesigns.us\/index.php\/wp-json\/wp\/v2\/media?parent=469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}