Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GOn - Galeria Online</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| :root { | |
| --primary: #16a34a; | |
| --primary-light: #22c55e; | |
| --primary-dark: #15803d; | |
| --secondary: #86efac; | |
| --background: #f0fdf4; | |
| --card: #ffffff; | |
| --text: #1c1917; | |
| --text-light: #78716c; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: var(--background); | |
| color: var(--text); | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); | |
| } | |
| .album-card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| } | |
| .album-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .btn-primary { | |
| background-color: var(--primary); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| background-color: var(--primary-dark); | |
| } | |
| .btn-outline { | |
| border: 1px solid var(--primary); | |
| color: var(--primary); | |
| } | |
| .btn-outline:hover { | |
| background-color: var(--primary); | |
| color: white; | |
| } | |
| .nav-link { | |
| color: var(--text-light); | |
| } | |
| .nav-link:hover, .nav-link.active { | |
| color: var(--primary); | |
| } | |
| .avatar { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| } | |
| .grid-gallery { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .media-thumbnail { | |
| aspect-ratio: 1/1; | |
| object-fit: cover; | |
| border-radius: 0.5rem; | |
| transition: transform 0.3s ease; | |
| } | |
| .media-thumbnail:hover { | |
| transform: scale(1.03); | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.4); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(22, 163, 74, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); | |
| } | |
| } | |
| /* Modal styles */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| z-index: 50; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| } | |
| .modal-content { | |
| background-color: var(--card); | |
| margin: 10% auto; | |
| padding: 2rem; | |
| border-radius: 0.5rem; | |
| max-width: 500px; | |
| width: 90%; | |
| } | |
| .close-btn { | |
| color: var(--text-light); | |
| float: right; | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| cursor: pointer; | |
| } | |
| .close-btn:hover { | |
| color: var(--text); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="container mx-auto px-4 py-3"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-images text-2xl text-green-600"></i> | |
| <h1 class="text-xl font-bold">G<span class="font-light">On</span></h1> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-6"> | |
| <a href="#" class="nav-link active">Início</a> | |
| <a href="#" class="nav-link">Explorar</a> | |
| <a href="#" class="nav-link">Álbuns</a> | |
| <a href="#" class="nav-link">Espectadores</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Buscar..." class="pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"> | |
| <i class="fas fa-search absolute left-3 top-2.5 text-gray-400"></i> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="avatar cursor-pointer" id="profileDropdown"> | |
| <div class="relative"> | |
| <div id="dropdownMenu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Meu Perfil</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Configurações</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sair</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="md:hidden text-gray-600"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <!-- Left Sidebar --> | |
| <div class="w-full md:w-1/4"> | |
| <!-- User Profile Card --> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <div class="flex flex-col items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-24 h-24 rounded-full object-cover mb-4"> | |
| <h2 class="text-xl font-semibold">Ana Silva</h2> | |
| <p class="text-gray-500 mb-4">@anasilva</p> | |
| <div class="flex justify-between w-full mb-4"> | |
| <div class="text-center"> | |
| <p class="font-bold">24</p> | |
| <p class="text-sm text-gray-500">Álbuns</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="font-bold">1.2K</p> | |
| <p class="text-sm text-gray-500">Mídias</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="font-bold">5.7K</p> | |
| <p class="text-sm text-gray-500">Espectadores</p> | |
| </div> | |
| </div> | |
| <button class="w-full py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition"> | |
| Editar Perfil | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <h3 class="font-semibold mb-4">Ações Rápidas</h3> | |
| <button id="newAlbumBtn" class="w-full py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition mb-3"> | |
| <i class="fas fa-plus mr-2"></i> Novo Álbum | |
| </button> | |
| <button class="w-full py-2 border border-green-600 text-green-600 rounded-lg hover:bg-green-50 transition"> | |
| <i class="fas fa-upload mr-2"></i> Enviar Mídia | |
| </button> | |
| </div> | |
| <!-- Recent Spectators --> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <h3 class="font-semibold mb-4">Novos Espectadores</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <p class="font-medium">Carlos Oliveira</p> | |
| <p class="text-xs text-gray-500">Há 2 horas</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <p class="font-medium">Mariana Costa</p> | |
| <p class="text-xs text-gray-500">Hoje</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <p class="font-medium">Pedro Santos</p> | |
| <p class="text-xs text-gray-500">Ontem</p> | |
| </div> | |
| </div> | |
| </div> | |
| <a href="#" class="block text-center text-green-600 mt-4 text-sm hover:underline">Ver todos</a> | |
| </div> | |
| </div> | |
| <!-- Main Feed --> | |
| <div class="w-full md:w-2/4"> | |
| <!-- Create Post --> | |
| <div class="bg-white rounded-lg shadow-md p-4 mb-6"> | |
| <div class="flex items-start"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-10 h-10 rounded-full mr-3"> | |
| <div class="flex-1"> | |
| <textarea placeholder="Compartilhe algo sobre seu álbum..." class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent resize-none" rows="2"></textarea> | |
| <div class="flex justify-between items-center mt-3"> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 text-gray-500 hover:text-green-600"> | |
| <i class="fas fa-image"></i> | |
| </button> | |
| <button class="p-2 text-gray-500 hover:text-green-600"> | |
| <i class="fas fa-video"></i> | |
| </button> | |
| <button class="p-2 text-gray-500 hover:text-green-600"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </button> | |
| </div> | |
| <button class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition"> | |
| Publicar | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Feed Content --> | |
| <div class="space-y-6"> | |
| <!-- Album Post --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <p class="font-medium">Ana Silva</p> | |
| <p class="text-xs text-gray-500">2 dias atrás · <span class="text-green-600">Público</span></p> | |
| </div> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2">Férias na Praia 2023</h3> | |
| <p class="text-gray-700 mb-4">Compartilhando alguns momentos incríveis das minhas férias no litoral norte!</p> | |
| <div class="grid grid-cols-2 gap-2 mb-4"> | |
| <img src="https://source.unsplash.com/random/600x400/?beach" alt="Media" class="w-full h-48 object-cover rounded-lg"> | |
| <img src="https://source.unsplash.com/random/600x400/?ocean" alt="Media" class="w-full h-48 object-cover rounded-lg"> | |
| <img src="https://source.unsplash.com/random/600x400/?sunset" alt="Media" class="w-full h-48 object-cover rounded-lg"> | |
| <div class="relative"> | |
| <img src="https://source.unsplash.com/random/600x400/?palm" alt="Media" class="w-full h-48 object-cover rounded-lg"> | |
| <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center rounded-lg"> | |
| <span class="text-white font-bold text-xl">+12</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-gray-500 border-t border-b border-gray-100 py-2 mb-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-eye mr-1"></i> | |
| <span>1.2K visualizações</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-comment mr-1"></i> | |
| <span>48 comentários</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button class="flex items-center text-gray-500 hover:text-green-600"> | |
| <i class="far fa-heart mr-2"></i> Curtir | |
| </button> | |
| <button class="flex items-center text-gray-500 hover:text-green-600"> | |
| <i class="far fa-comment mr-2"></i> Comentar | |
| </button> | |
| <button class="flex items-center text-gray-500 hover:text-green-600"> | |
| <i class="far fa-share-square mr-2"></i> Compartilhar | |
| </button> | |
| <button class="flex items-center text-gray-500 hover:text-green-600"> | |
| <i class="far fa-bookmark mr-2"></i> Salvar | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Single Media Post --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <p class="font-medium">Carlos Oliveira</p> | |
| <p class="text-xs text-gray-500">1 semana atrás · <span class="text-green-600">Público</span></p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-4">Pôr do sol incrível que capturei ontem. Natureza é arte!</p> | |
| <div class="mb-4"> | |
| <img src="https://source.unsplash.com/random/800x600/?sunset" alt="Media" class="w-full rounded-lg"> | |
| </div> | |
| <div class="flex justify-between text-gray-500 border-t border-b border-gray-100 py-2 mb-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-eye mr-1"></i> | |
| <span>845 visualizações</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-comment mr-1"></i> | |
| <span>32 comentários</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button class="flex items-center text-gray-500 hover:text-green-600"> | |
| <i class="far fa-heart mr-2"></i> Curtir | |
| </button> | |
| <button class="flex items-center text-gray-500 hover:text-green-600"> | |
| <i class="far fa-comment mr-2"></i> Comentar | |
| </button> | |
| <button class="flex items-center text-gray-500 hover:text-green-600"> | |
| <i class="far fa-share-square mr-2"></i> Compartilhar | |
| </button> | |
| <button class="flex items-center text-gray-500 hover:text-green-600"> | |
| <i class="far fa-bookmark mr-2"></i> Salvar | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Sidebar --> | |
| <div class="w-full md:w-1/4"> | |
| <!-- Suggested Albums --> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <h3 class="font-semibold mb-4">Álbuns Sugeridos</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <img src="https://source.unsplash.com/random/100x100/?nature" alt="Album" class="w-12 h-12 rounded-lg object-cover mr-3"> | |
| <div> | |
| <p class="font-medium">Natureza Brasileira</p> | |
| <p class="text-xs text-gray-500">por @ecofotografo</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <img src="https://source.unsplash.com/random/100x100/?city" alt="Album" class="w-12 h-12 rounded-lg object-cover mr-3"> | |
| <div> | |
| <p class="font-medium">Arquitetura Urbana</p> | |
| <p class="text-xs text-gray-500">por @urbanview</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <img src="https://source.unsplash.com/random/100x100/?food" alt="Album" class="w-12 h-12 rounded-lg object-cover mr-3"> | |
| <div> | |
| <p class="font-medium">Gastronomia</p> | |
| <p class="text-xs text-gray-500">por @chefdigital</p> | |
| </div> | |
| </div> | |
| </div> | |
| <a href="#" class="block text-center text-green-600 mt-4 text-sm hover:underline">Ver mais</a> | |
| </div> | |
| <!-- Popular Tags --> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <h3 class="font-semibold mb-4">Tags Populares</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <a href="#" class="px-3 py-1 bg-green-50 text-green-600 rounded-full text-sm hover:bg-green-100">#fotografia</a> | |
| <a href="#" class="px-3 py-1 bg-green-50 text-green-600 rounded-full text-sm hover:bg-green-100">#natureza</a> | |
| <a href="#" class="px-3 py-1 bg-green-50 text-green-600 rounded-full text-sm hover:bg-green-100">#viagem</a> | |
| <a href="#" class="px-3 py-1 bg-green-50 text-green-600 rounded-full text-sm hover:bg-green-100">#arte</a> | |
| <a href="#" class="px-3 py-1 bg-green-50 text-green-600 rounded-full text-sm hover:bg-green-100">#design</a> | |
| <a href="#" class="px-3 py-1 bg-green-50 text-green-600 rounded-full text-sm hover:bg-green-100">#cultura</a> | |
| <a href="#" class="px-3 py-1 bg-green-50 text-green-600 rounded-full text-sm hover:bg-green-100">#paisagem</a> | |
| <a href="#" class="px-3 py-1 bg-green-50 text-green-600 rounded-full text-sm hover:bg-green-100">#memories</a> | |
| </div> | |
| </div> | |
| <!-- New Features --> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <h3 class="font-semibold mb-4">Novidades</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-mobile-alt text-green-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">App GOn disponível</p> | |
| <p class="text-xs text-gray-500">Baixe agora na App Store e Google Play</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-cloud-upload-alt text-green-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Armazenamento ampliado</p> | |
| <p class="text-xs text-gray-500">Agora com 50GB grátis para todos os usuários</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- New Album Modal --> | |
| <div id="newAlbumModal" class="modal"> | |
| <div class="modal-content"> | |
| <span class="close-btn" id="closeModal">×</span> | |
| <h2 class="text-xl font-semibold mb-6">Criar Novo Álbum</h2> | |
| <form id="albumForm"> | |
| <div class="mb-4"> | |
| <label for="albumName" class="block text-sm font-medium text-gray-700 mb-1">Nome do Álbum</label> | |
| <input type="text" id="albumName" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent" placeholder="Minhas Férias 2023"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="albumDescription" class="block text-sm font-medium text-gray-700 mb-1">Descrição</label> | |
| <textarea id="albumDescription" rows="3" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent" placeholder="Compartilhe detalhes sobre este álbum..."></textarea> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Visibilidade</label> | |
| <div class="space-y-2"> | |
| <div class="flex items-center"> | |
| <input type="radio" id="public" name="visibility" value="public" class="h-4 w-4 text-green-600 focus:ring-green-500" checked> | |
| <label for="public" class="ml-2 block text-sm text-gray-700"> | |
| Público (qualquer pessoa pode ver) | |
| </label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="private" name="visibility" value="private" class="h-4 w-4 text-green-600 focus:ring-green-500"> | |
| <label for="private" class="ml-2 block text-sm text-gray-700"> | |
| Privado (somente eu) | |
| </label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="limited" name="visibility" value="limited" class="h-4 w-4 text-green-600 focus:ring-green-500"> | |
| <label for="limited" class="ml-2 block text-sm text-gray-700"> | |
| Limitado (somente espectadores) | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Capa do Álbum</label> | |
| <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg"> | |
| <div class="space-y-1 text-center"> | |
| <div class="flex text-sm text-gray-600"> | |
| <label for="albumCover" class="relative cursor-pointer bg-white rounded-md font-medium text-green-600 hover:text-green-500 focus-within:outline-none"> | |
| <span>Enviar uma imagem</span> | |
| <input id="albumCover" name="albumCover" type="file" class="sr-only"> | |
| </label> | |
| <p class="pl-1">ou arraste e solte</p> | |
| </div> | |
| <p class="text-xs text-gray-500">PNG, JPG, GIF até 10MB</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button type="button" id="cancelAlbum" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50"> | |
| Cancelar | |
| </button> | |
| <button type="submit" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700"> | |
| Criar Álbum | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Sign Up Modal --> | |
| <div id="signupModal" class="modal"> | |
| <div class="modal-content"> | |
| <span class="close-btn" id="closeSignupModal">×</span> | |
| <div class="text-center"> | |
| <i class="fas fa-images text-5xl text-green-600 mb-4"></i> | |
| <h2 class="text-2xl font-semibold mb-2">Junte-se ao GOn</h2> | |
| <p class="text-gray-600 mb-6">Compartilhe suas memórias com o mundo</p> | |
| <button class="w-full py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition mb-3 flex items-center justify-center"> | |
| <i class="fab fa-google mr-3"></i> Continuar com Google | |
| </button> | |
| <button class="w-full py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition mb-6 flex items-center justify-center"> | |
| <i class="fab fa-facebook-f mr-3"></i> Continuar com Facebook | |
| </button> | |
| <div class="flex items-center mb-6"> | |
| <div class="flex-1 border-t border-gray-300"></div> | |
| <span class="px-3 text-gray-500">ou</span> | |
| <div class="flex-1 border-t border-gray-300"></div> | |
| </div> | |
| <form id="signupForm"> | |
| <div class="mb-4"> | |
| <input type="email" placeholder="Seu e-mail" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"> | |
| </div> | |
| <div class="mb-4"> | |
| <input type="password" placeholder="Crie uma senha" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"> | |
| </div> | |
| <div class="mb-6"> | |
| <input type="password" placeholder="Confirme sua senha" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"> | |
| </div> | |
| <button type="submit" class="w-full py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition mb-4"> | |
| Criar Conta | |
| </button> | |
| <p class="text-sm text-gray-600"> | |
| Ao se inscrever, você concorda com nossos <a href="#" class="text-green-600 hover:underline">Termos</a> e <a href="#" class="text-green-600 hover:underline">Política de Privacidade</a>. | |
| </p> | |
| </form> | |
| <p class="mt-6 text-gray-600"> | |
| Já tem uma conta? <a href="#" class="text-green-600 hover:underline">Entrar</a> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // DOM Elements | |
| const profileDropdown = document.getElementById('profileDropdown'); | |
| const dropdownMenu = document.getElementById('dropdownMenu'); | |
| const newAlbumBtn = document.getElementById('newAlbumBtn'); | |
| const newAlbumModal = document.getElementById('newAlbumModal'); | |
| const closeModal = document.getElementById('closeModal'); | |
| const cancelAlbum = document.getElementById('cancelAlbum'); | |
| const signupModal = document.getElementById('signupModal'); | |
| const closeSignupModal = document.getElementById('closeSignupModal'); | |
| // Profile dropdown toggle | |
| profileDropdown.addEventListener('click', () => { | |
| dropdownMenu.classList.toggle('hidden'); | |
| }); | |
| // Close dropdown when clicking outside | |
| document.addEventListener('click', (e) => { | |
| if (!profileDropdown.contains(e.target) && !dropdownMenu.contains(e.target)) { | |
| dropdownMenu.classList.add('hidden'); | |
| } | |
| }); | |
| // New Album Modal | |
| newAlbumBtn.addEventListener('click', () => { | |
| newAlbumModal.style.display = 'block'; | |
| }); | |
| closeModal.addEventListener('click', () => { | |
| newAlbumModal.style.display = 'none'; | |
| }); | |
| cancelAlbum.addEventListener('click', () => { | |
| newAlbumModal.style.display = 'none'; | |
| }); | |
| // Close modal when clicking outside | |
| window.addEventListener('click', (e) => { | |
| if (e.target === newAlbumModal) { | |
| newAlbumModal.style.display = 'none'; | |
| } | |
| if (e.target === signupModal) { | |
| signupModal.style.display = 'none'; | |
| } | |
| }); | |
| // Form submission | |
| document.getElementById('albumForm').addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| alert('Álbum criado com sucesso!'); | |
| newAlbumModal.style.display = 'none'; | |
| // Here you would typically send the data to your backend | |
| }); | |
| // Signup Modal - This would typically be triggered by a "Sign Up" button | |
| // For demo purposes, we'll show it after 2 seconds | |
| setTimeout(() => { | |
| signupModal.style.display = 'block'; | |
| }, 2000); | |
| closeSignupModal.addEventListener('click', () => { | |
| signupModal.style.display = 'none'; | |
| }); | |
| // Form validation for signup | |
| document.getElementById('signupForm').addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| alert('Conta criada com sucesso! Bem-vindo ao GOn.'); | |
| signupModal.style.display = 'none'; | |
| // Here you would typically send the data to your backend | |
| }); | |
| // Simulate backend functionality | |
| // In a real app, this would be handled by your backend API | |
| class GOnBackend { | |
| constructor() { | |
| this.users = []; | |
| this.albums = []; | |
| this.media = []; | |
| this.spectators = []; | |
| } | |
| createUser(email, password) { | |
| const user = { | |
| id: this.users.length + 1, | |
| email, | |
| password, // In real app, this would be hashed | |
| username: email.split('@')[0], | |
| joinDate: new Date(), | |
| albums: [], | |
| spectators: [] | |
| }; | |
| this.users.push(user); | |
| return user; | |
| } | |
| createAlbum(userId, name, description, isPublic) { | |
| const album = { | |
| id: this.albums.length + 1, | |
| userId, | |
| name, | |
| description, | |
| isPublic, | |
| coverImage: null, | |
| creationDate: new Date(), | |
| mediaIds: [] | |
| }; | |
| this.albums.push(album); | |
| // Add to user's albums | |
| const user = this.users.find(u => u.id === userId); | |
| if (user) { | |
| user.albums.push(album.id); | |
| } | |
| return album; | |
| } | |
| // Other backend methods would go here... | |
| } | |
| // Initialize backend | |
| const backend = new GOnBackend(); | |
| </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=DestroXyz/tangent-data-base" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |