| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> |
| <meta name="theme-color" content="#0f0c29"> |
| <meta name="apple-mobile-web-app-capable" content="yes"> |
| <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> |
| <title>PixelNerd - Wallpapers Gamer Pro</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> |
| .wallpaper-item { |
| transition: transform 0.3s ease, box-shadow 0.3s ease; |
| touch-action: manipulation; |
| } |
| @media (max-width: 768px) { |
| .mobile-nav { |
| display: none; |
| position: absolute; |
| top: 100%; |
| left: 0; |
| right: 0; |
| background: #0f0c29; |
| z-index: 100; |
| border-bottom: 1px solid #8b5cf6; |
| flex-direction: column; |
| padding: 1rem; |
| text-align: center; |
| } |
| .mobile-nav.show { |
| display: flex; |
| } |
| .wallpaper-item { |
| min-width: 0; |
| } |
| } |
| .wallpaper-item:hover { |
| transform: scale(1.03); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); |
| } |
| .category-btn.active { |
| background-color: #8b5cf6; |
| color: white; |
| } |
| .search-bar:focus { |
| outline: none; |
| box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.5); |
| } |
| .loading-spinner { |
| animation: spin 1s linear infinite; |
| } |
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| |
| .gamer-bg { |
| background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%); |
| background-image: radial-gradient(circle at 10% 20%, rgba(255, 0, 255, 0.05) 0%, transparent 20%), |
| radial-gradient(circle at 90% 80%, rgba(0, 255, 255, 0.05) 0%, transparent 20%); |
| } |
| .neon-text { |
| text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 40px #00ffff; |
| } |
| .neon-border { |
| border: 2px solid #00ffff; |
| box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff; |
| } |
| .pixel-border { |
| border: 4px solid #8b5cf6; |
| position: relative; |
| } |
| .pixel-border::before { |
| content: ""; |
| position: absolute; |
| top: -4px; |
| left: -4px; |
| right: -4px; |
| bottom: -4px; |
| border: 2px solid #00ffff; |
| pointer-events: none; |
| } |
| .gamer-card { |
| background: rgba(30, 30, 46, 0.8); |
| border: 1px solid rgba(139, 92, 246, 0.3); |
| backdrop-filter: blur(10px); |
| } |
| .gamer-card:hover { |
| border-color: #8b5cf6; |
| box-shadow: 0 0 15px rgba(139, 92, 246, 0.5); |
| } |
| </style> |
| </head> |
| <body class="gamer-bg text-white font-sans"> |
| |
| <header class="gamer-bg text-white shadow-lg sticky top-0 z-50 border-b border-purple-500"> |
| <div class="container mx-auto px-4 py-4 flex flex-col md:flex-row justify-between items-center"> |
| <div class="flex items-center justify-between w-full md:w-auto"> |
| <div class="flex items-center"> |
| <i class="fas fa-gamepad text-purple-500 text-2xl mr-3 animate-pulse"></i> |
| <h1 class="text-xl md:text-2xl font-bold neon-text">Pixel<span class="text-green-400">Nerd</span></h1> |
| </div> |
| |
| <button id="mobile-menu-button" class="md:hidden text-2xl"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| |
| <div class="relative w-full mt-4 md:mt-0 md:w-96"> |
| <input type="text" placeholder="Buscar wallpapers..." |
| class="search-bar w-full px-4 py-2 rounded-full text-gray-800 focus:outline-none text-base"> |
| <button class="absolute right-3 top-2 text-gray-500"> |
| <i class="fas fa-search"></i> |
| </button> |
| </div> |
| |
| <nav id="main-nav" class="hidden md:flex space-x-6 mt-4 md:mt-0 mobile-nav"> |
| <a href="#" class="hover:text-purple-400 transition py-2">Início</a> |
| <a href="#" class="hover:text-purple-400 transition py-2">Populares</a> |
| <a href="#" class="hover:text-purple-400 transition py-2">Categorias</a> |
| <a href="#" class="hover:text-purple-400 transition py-2" id="upload-tab">Enviar</a> |
| <a href="#" class="hover:text-purple-400 transition py-2">Sobre</a> |
| </nav> |
| </div> |
| </header> |
|
|
| |
| <section class="gamer-bg text-white py-16 relative overflow-hidden"> |
| <div class="absolute inset-0 opacity-20"> |
| <div class="absolute top-10 left-10 w-32 h-32 border-t-2 border-l-2 border-purple-500"></div> |
| <div class="absolute top-10 right-10 w-32 h-32 border-t-2 border-r-2 border-purple-500"></div> |
| <div class="absolute bottom-10 left-10 w-32 h-32 border-b-2 border-l-2 border-purple-500"></div> |
| <div class="absolute bottom-10 right-10 w-32 h-32 border-b-2 border-r-2 border-purple-500"></div> |
| </div> |
| <div class="container mx-auto px-4 text-center relative z-10"> |
| <h2 class="text-4xl md:text-5xl font-bold mb-4 neon-text">WALLPAPERS 4K/8K GAMER</h2> |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Coleção premium para seu setup RGB! Wallpapers otimizados para PC, mobile e streaming.</p> |
| <div class="flex justify-center space-x-4"> |
| <button class="bg-gradient-to-r from-purple-600 to-green-500 hover:from-purple-700 hover:to-green-600 px-6 py-3 rounded font-bold transition pixel-border hover:neon-border"> |
| <i class="fas fa-joystick mr-2"></i> EXPLORAR |
| </button> |
| <button class="bg-transparent border-2 border-purple-500 hover:bg-purple-900/50 px-6 py-3 rounded font-bold transition hover:neon-border"> |
| <i class="fas fa-keyboard mr-2"></i> TUTORIAL |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <main class="container mx-auto px-4 py-12"> |
| |
| <div class="mb-12"> |
| <h3 class="text-2xl font-bold mb-6 text-white">Categorias Gamer & Nerd</h3> |
| <div class="flex flex-wrap gap-3"> |
| <button class="category-btn px-4 py-2 bg-gray-800 rounded hover:bg-gray-700 transition active" data-category="all"> |
| <i class="fas fa-star mr-1"></i> Todos |
| </button> |
| <button class="category-btn px-4 py-2 bg-gray-800 rounded hover:bg-gray-700 transition hover:neon-border" data-category="games"> |
| <i class="fas fa-headset mr-1"></i> Esports |
| </button> |
| <button class="category-btn px-4 py-2 bg-gray-800 rounded hover:bg-gray-700 transition hover:neon-border" data-category="anime"> |
| <i class="fas fa-naruto-sign mr-1"></i> Anime |
| </button> |
| <button class="category-btn px-4 py-2 bg-gray-800 rounded hover:bg-gray-700 transition" data-category="scifi"> |
| <i class="fas fa-robot mr-1"></i> Sci-Fi |
| </button> |
| <button class="category-btn px-4 py-2 bg-gray-800 rounded hover:bg-gray-700 transition" data-category="fantasy"> |
| <i class="fas fa-hat-wizard mr-1"></i> Fantasia |
| </button> |
| <button class="category-btn px-4 py-2 bg-gray-800 rounded hover:bg-gray-700 transition" data-category="space"> |
| <i class="fas fa-rocket mr-1"></i> Espaço |
| </button> |
| <button class="category-btn px-4 py-2 bg-gray-800 rounded hover:bg-gray-700 transition hover:neon-border" data-category="superheroes"> |
| <i class="fas fa-shield-alt mr-1"></i> RPG |
| </button> |
| <button class="category-btn px-4 py-2 bg-gray-800 rounded hover:bg-gray-700 transition" data-category="cyberpunk"> |
| <i class="fas fa-microchip mr-1"></i> Cyberpunk |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-gradient-to-r from-purple-900 to-gray-900 p-6 rounded-xl mb-8 neon-border"> |
| <div class="flex flex-wrap justify-center gap-4"> |
| <div class="text-center p-4"> |
| <i class="fas fa-mobile-alt text-3xl text-green-400 mb-2"></i> |
| <h4 class="font-bold">Mobile</h4> |
| <p class="text-sm text-gray-300">1080x1920</p> |
| <p class="text-sm text-gray-300">1440x2560</p> |
| </div> |
| <div class="text-center p-4"> |
| <i class="fas fa-desktop text-3xl text-blue-400 mb-2"></i> |
| <h4 class="font-bold">Desktop</h4> |
| <p class="text-sm text-gray-300">1920x1080</p> |
| <p class="text-sm text-gray-300">4K/8K</p> |
| </div> |
| <div class="text-center p-4"> |
| <i class="fas fa-tablet-alt text-3xl text-purple-400 mb-2"></i> |
| <h4 class="font-bold">Tablet</h4> |
| <p class="text-sm text-gray-300">1600x2560</p> |
| <p class="text-sm text-gray-300">2048x2732</p> |
| </div> |
| <div class="text-center p-4"> |
| <i class="fas fa-tv text-3xl text-red-400 mb-2"></i> |
| <h4 class="font-bold">Ultrawide</h4> |
| <p class="text-sm text-gray-300">2560x1080</p> |
| <p class="text-sm text-gray-300">3440x1440</p> |
| </div> |
| </form> |
| </div> |
|
|
| |
| <div class="mb-12"> |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4"> |
| <h3 class="text-xl md:text-2xl font-bold text-white">Wallpapers em Destaque</h3> |
| <div class="flex items-center w-full md:w-auto"> |
| <span class="mr-2 text-gray-300 text-sm md:text-base">Ordenar por:</span> |
| <select class="bg-gray-800 text-white px-3 py-1 rounded border border-purple-500 text-sm md:text-base"> |
| <option>Mais populares</option> |
| <option>Mais recentes</option> |
| <option>Melhor avaliados</option> |
| </select> |
| </div> |
| </div> |
|
|
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6" id="wallpapers-grid"> |
| |
| </div> |
|
|
| <div class="flex justify-center mt-10"> |
| <button id="load-more" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-full font-medium transition flex items-center"> |
| <span>Carregar mais</span> |
| <i class="fas fa-arrow-down ml-2"></i> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-gradient-to-r from-blue-600 to-blue-800 text-white rounded-xl p-8 mb-12"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-2/3 mb-6 md:mb-0"> |
| <h3 class="text-2xl font-bold mb-3">Wallpapers Premium</h3> |
| <p class="mb-4">Acesse nossa coleção exclusiva de wallpapers em 8K, sem marcas d'água e com downloads ilimitados.</p> |
| <button class="bg-white text-blue-600 hover:bg-gray-100 px-6 py-2 rounded-full font-medium transition"> |
| Assinar por R$9,90/mês |
| </button> |
| </div> |
| <div class="md:w-1/3 flex justify-center"> |
| <i class="fas fa-crown text-6xl md:text-8xl opacity-50"></i> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="upload-section" class="hidden gamer-card rounded-xl p-8 mb-12 neon-border"> |
| <h3 class="text-2xl font-bold mb-6 text-white flex items-center"> |
| <i class="fas fa-upload mr-3 text-purple-500"></i> Enviar Wallpaper Gamer |
| </h3> |
| <form class="grid md:grid-cols-2 gap-8"> |
| <div> |
| <div class="mb-6"> |
| <label class="block text-gray-300 mb-2">Título do Wallpaper</label> |
| <input type="text" class="w-full px-4 py-2 bg-gray-800 border border-purple-500 rounded focus:outline-none focus:neon-border"> |
| </div> |
| <div class="mb-6"> |
| <label class="block text-gray-300 mb-2">Categoria</label> |
| <select class="w-full px-4 py-2 bg-gray-800 border border-purple-500 rounded focus:outline-none focus:neon-border"> |
| <option>Esports</option> |
| <option>Anime</option> |
| <option>Cyberpunk</option> |
| <option>FPS</option> |
| <option>RPG</option> |
| <option>Retro</option> |
| </select> |
| </div> |
| <div class="mb-6"> |
| <label class="block text-gray-300 mb-2">Resolução</label> |
| <div class="flex space-x-2"> |
| <label class="inline-flex items-center"> |
| <input type="checkbox" class="bg-gray-800 border-purple-500 rounded text-purple-500" checked> |
| <span class="ml-2 text-gray-300">1920x1080</span> |
| </label> |
| <label class="inline-flex items-center"> |
| <input type="checkbox" class="bg-gray-800 border-purple-500 rounded text-purple-500"> |
| <span class="ml-2 text-gray-300">4K</span> |
| </label> |
| <label class="inline-flex items-center"> |
| <input type="checkbox" class="bg-gray-800 border-purple-500 rounded text-purple-500"> |
| <span class="ml-2 text-gray-300">Mobile</span> |
| </label> |
| </div> |
| </div> |
| <div class="mb-6"> |
| <label class="block text-gray-300 mb-2">Tags (separadas por vírgulas)</label> |
| <input type="text" class="w-full px-4 py-2 bg-gray-800 border border-purple-500 rounded focus:outline-none focus:neon-border" placeholder="Ex: valorant, neon, purple, gaming"> |
| </div> |
| </div> |
| <div> |
| <div id="drop-area" class="border-2 border-dashed border-purple-500 rounded-lg p-8 text-center mb-6 h-64 flex flex-col items-center justify-center hover:neon-border transition cursor-pointer"> |
| <i class="fas fa-image text-4xl text-purple-500 mb-4"></i> |
| <input type="file" id="fileInput" accept="image/*" class="hidden"> |
| <p class="text-gray-300 mb-2">Arraste e solte sua imagem aqui</p> |
| <p class="text-gray-400 text-sm mb-4">ou</p> |
| <button id="selectFiles" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-full transition"> |
| Selecione do computador |
| </button> |
| <p class="text-gray-500 text-xs mt-4">Formatos suportados: JPG, PNG, WEBP (Max. 10MB)</p> |
| </div> |
| <div id="preview" class="hidden mb-4"> |
| <img id="preview-image" class="max-h-64 mx-auto rounded-lg neon-border"> |
| </div> |
| <div class="flex justify-between"> |
| <button class="bg-gray-700 hover:bg-gray-600 text-white px-6 py-2 rounded transition"> |
| Limpar |
| </button> |
| <button class="bg-gradient-to-r from-purple-600 to-green-500 hover:from-purple-700 hover:to-green-600 text-white px-6 py-2 rounded font-bold transition pixel-border hover:neon-border"> |
| <i class="fas fa-cloud-upload-alt mr-2"></i> Enviar |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-md p-8 mb-12"> |
| <h3 class="text-2xl font-bold mb-6 text-gray-800">Como baixar wallpapers</h3> |
| <div class="grid md:grid-cols-3 gap-6"> |
| <div class="text-center"> |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-search text-blue-600 text-2xl"></i> |
| </div> |
| <h4 class="font-bold mb-2">1. Encontre seu wallpaper</h4> |
| <p class="text-gray-600">Navegue pelas categorias ou use nossa barra de pesquisa.</p> |
| </div> |
| <div class="text-center"> |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-expand text-blue-600 text-2xl"></i> |
| </div> |
| <h4 class="font-bold mb-2">2. Visualize em tela cheia</h4> |
| <p class="text-gray-600">Clique no wallpaper para ver em alta resolução.</p> |
| </div> |
| <div class="text-center"> |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-download text-blue-600 text-2xl"></i> |
| </div> |
| <h4 class="font-bold mb-2">3. Baixe gratuitamente</h4> |
| <p class="text-gray-600">Clique no botão de download e escolha a resolução.</p> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <footer class="bg-gray-900 text-white py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <h4 class="text-xl font-bold mb-4 flex items-center"> |
| <i class="fas fa-gamepad text-purple-500 mr-2"></i> PixelNerd |
| </h4> |
| <p class="text-gray-400">Sua fonte premium de wallpapers gamer para todos os dispositivos e setups RGB!</p> |
| </div> |
| <div> |
| <h4 class="text-lg font-bold mb-4">Links Rápidos</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Início</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Populares</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Categorias</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Sobre</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-lg font-bold mb-4">Categorias</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Natureza</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Cidades</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Espaço</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Abstrato</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-lg font-bold mb-4">Redes Sociais</h4> |
| <div class="flex space-x-4"> |
| <a href="#" class="bg-gray-800 hover:bg-blue-600 w-10 h-10 rounded-full flex items-center justify-center transition"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="bg-gray-800 hover:bg-pink-600 w-10 h-10 rounded-full flex items-center justify-center transition"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="bg-gray-800 hover:bg-blue-400 w-10 h-10 rounded-full flex items-center justify-center transition"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="bg-gray-800 hover:bg-red-600 w-10 h-10 rounded-full flex items-center justify-center transition"> |
| <i class="fab fa-youtube"></i> |
| </a> |
| </div> |
| <p class="text-gray-400 mt-4">Inscreva-se para atualizações</p> |
| <div class="flex mt-2"> |
| <input type="email" placeholder="Seu email" class="px-3 py-2 text-gray-800 rounded-l w-full"> |
| <button class="bg-blue-600 hover:bg-blue-700 px-4 rounded-r"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> |
| <p>© 2023 WallpaperHub. Todos os direitos reservados.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <div id="wallpaper-modal" class="fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center hidden"> |
| <div class="relative max-w-6xl w-full p-4"> |
| <button id="close-modal" class="absolute top-4 right-4 text-white text-3xl z-50 hover:text-blue-400 transition"> |
| <i class="fas fa-times"></i> |
| </button> |
| <div class="bg-white rounded-lg overflow-hidden"> |
| <div class="flex flex-col md:flex-row"> |
| <div class="md:w-3/4"> |
| <img id="modal-image" src="" alt="" class="w-full h-auto max-h-screen"> |
| </div> |
| <div class="md:w-1/4 bg-gray-100 p-6"> |
| <h3 id="modal-title" class="text-xl font-bold mb-4"></h3> |
| <div class="mb-4"> |
| <span class="block text-gray-600 mb-1">Resolução:</span> |
| <span id="modal-resolution" class="font-medium"></span> |
| </div> |
| <div class="mb-4"> |
| <span class="block text-gray-600 mb-1">Categoria:</span> |
| <span id="modal-category" class="font-medium"></span> |
| </div> |
| <div class="mb-6"> |
| <span class="block text-gray-600 mb-1">Downloads:</span> |
| <span id="modal-downloads" class="font-medium"></span> |
| </div> |
| <div class="space-y-3"> |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded flex items-center justify-center"> |
| <i class="fas fa-download mr-2"></i> Baixar (Original) |
| </button> |
| <button class="w-full bg-gray-300 hover:bg-gray-400 text-gray-800 py-2 rounded flex items-center justify-center"> |
| <i class="fas fa-mobile-alt mr-2"></i> Versão Mobile |
| </button> |
| <button class="w-full bg-gray-300 hover:bg-gray-400 text-gray-800 py-2 rounded flex items-center justify-center"> |
| <i class="fas fa-desktop mr-2"></i> Versão Desktop |
| </button> |
| </div> |
| <div class="mt-6 pt-4 border-t border-gray-300"> |
| <h4 class="font-bold mb-2">Compartilhar:</h4> |
| <div class="flex space-x-2"> |
| <button class="bg-blue-600 text-white p-2 rounded-full hover:bg-blue-700"> |
| <i class="fab fa-facebook-f"></i> |
| </button> |
| <button class="bg-blue-400 text-white p-2 rounded-full hover:bg-blue-500"> |
| <i class="fab fa-twitter"></i> |
| </button> |
| <button class="bg-pink-600 text-white p-2 rounded-full hover:bg-pink-700"> |
| <i class="fab fa-instagram"></i> |
| </button> |
| <button class="bg-gray-800 text-white p-2 rounded-full hover:bg-gray-900"> |
| <i class="fab fa-whatsapp"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const wallpapers = [ |
| { id: 1, title: "Montanhas ao Amanhecer", category: "nature", resolution: "3840x2160", downloads: 12453, url: "https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" }, |
| { id: 2, title: "Cidade Noturna", category: "city", resolution: "5120x2880", downloads: 8765, url: "https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" }, |
| { id: 3, title: "Galáxia Distante", category: "space", resolution: "4096x2304", downloads: 15678, url: "https://images.unsplash.com/photo-1462331940025-496dfbfc7564?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" }, |
| { id: 4, title: "Floresta Tropical", category: "nature", resolution: "3840x2160", downloads: 9876, url: "https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" }, |
| { id: 5, title: "Carro Esportivo", category: "cars", resolution: "5120x2880", downloads: 6543, url: "https://images.unsplash.com/photo-1494976388531-d1058494cdd8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" }, |
| { id: 6, title: "Padrão Abstrato", category: "abstract", resolution: "3840x2160", downloads: 7654, url: "https://images.unsplash.com/photo-1550684376-efcbd01e4065?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" }, |
| { id: 7, title: "Leão na Savana", category: "animals", resolution: "4096x2304", downloads: 10987, url: "https://images.unsplash.com/photo-1534188753412-5e6738475f6f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" }, |
| { id: 8, title: "Cenário de Jogo", category: "games", resolution: "5120x2880", downloads: 12345, url: "https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" }, |
| { id: 9, title: "Praia Tropical", category: "nature", resolution: "3840x2160", downloads: 8765, url: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" }, |
| { id: 10, title: "Arranha-céus", category: "city", resolution: "4096x2304", downloads: 7654, url: "https://images.unsplash.com/photo-1487958449943-2429e8be8625?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" }, |
| { id: 11, title: "Nebulosa Colorida", category: "space", resolution: "5120x2880", downloads: 9876, url: "https://images.unsplash.com/photo-1462332420958-a05d1e002413?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" }, |
| { id: 12, title: "Cachorro no Campo", category: "animals", resolution: "3840x2160", downloads: 6543, url: "https://images.unsplash.com/photo-1586671267731-da2cf3ceeb20?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" } |
| ]; |
| |
| |
| const wallpapersGrid = document.getElementById('wallpapers-grid'); |
| const categoryButtons = document.querySelectorAll('.category-btn'); |
| const loadMoreBtn = document.getElementById('load-more'); |
| const wallpaperModal = document.getElementById('wallpaper-modal'); |
| const closeModalBtn = document.getElementById('close-modal'); |
| const modalImage = document.getElementById('modal-image'); |
| const modalTitle = document.getElementById('modal-title'); |
| const modalResolution = document.getElementById('modal-resolution'); |
| const modalCategory = document.getElementById('modal-category'); |
| const modalDownloads = document.getElementById('modal-downloads'); |
| const searchBar = document.querySelector('.search-bar'); |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); |
| const mainNav = document.getElementById('main-nav'); |
| |
| |
| mobileMenuButton.addEventListener('click', function() { |
| mainNav.classList.toggle('show'); |
| }); |
| |
| |
| document.addEventListener('click', function(e) { |
| if (!mainNav.contains(e.target) && e.target !== mobileMenuButton) { |
| mainNav.classList.remove('show'); |
| } |
| }); |
| |
| |
| function toggleBodyScroll(enable) { |
| document.body.style.overflow = enable ? '' : 'hidden'; |
| } |
| |
| |
| function openModal(wallpaper) { |
| modalImage.src = wallpaper.url; |
| modalImage.alt = wallpaper.title; |
| modalTitle.textContent = wallpaper.title; |
| modalResolution.textContent = wallpaper.resolution; |
| modalCategory.textContent = wallpaper.category.charAt(0).toUpperCase() + wallpaper.category.slice(1); |
| modalDownloads.textContent = wallpaper.downloads.toLocaleString(); |
| wallpaperModal.classList.remove('hidden'); |
| toggleBodyScroll(false); |
| } |
| |
| function closeModal() { |
| wallpaperModal.classList.add('hidden'); |
| toggleBodyScroll(true); |
| } |
| |
| |
| let currentCategory = 'all'; |
| let displayedCount = 8; |
| const itemsPerLoad = 4; |
| |
| |
| document.getElementById('upload-tab').addEventListener('click', function(e) { |
| e.preventDefault(); |
| const uploadSection = document.getElementById('upload-section'); |
| if (uploadSection.classList.contains('hidden')) { |
| uploadSection.classList.remove('hidden'); |
| uploadSection.scrollIntoView({ behavior: 'smooth' }); |
| } else { |
| uploadSection.classList.add('hidden'); |
| } |
| }); |
| |
| |
| function init() { |
| renderWallpapers(); |
| setupEventListeners(); |
| } |
| |
| |
| function renderWallpapers() { |
| wallpapersGrid.innerHTML = ''; |
| |
| const filteredWallpapers = currentCategory === 'all' |
| ? wallpapers |
| : wallpapers.filter(wp => wp.category === currentCategory); |
| |
| const wallpapersToShow = filteredWallpapers.slice(0, displayedCount); |
| |
| if (wallpapersToShow.length === 0) { |
| wallpapersGrid.innerHTML = ` |
| <div class="col-span-full text-center py-12"> |
| <i class="fas fa-image text-5xl text-gray-400 mb-4"></i> |
| <h4 class="text-xl font-medium text-gray-600">Nenhum wallpaper encontrado</h4> |
| <p class="text-gray-500">Tente outra categoria ou termo de busca</p> |
| </div> |
| `; |
| return; |
| } |
| |
| wallpapersToShow.forEach(wallpaper => { |
| const wallpaperItem = document.createElement('div'); |
| wallpaperItem.className = 'wallpaper-item bg-white rounded-lg overflow-hidden shadow-md cursor-pointer'; |
| wallpaperItem.innerHTML = ` |
| <div class="relative overflow-hidden" style="padding-bottom: 56.25%;"> |
| <img src="${wallpaper.url}" alt="${wallpaper.title}" |
| class="absolute h-full w-full object-cover hover:opacity-90 transition"> |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4 text-white"> |
| <h4 class="font-bold truncate">${wallpaper.title}</h4> |
| <div class="flex justify-between items-center text-sm opacity-80"> |
| <span>${wallpaper.resolution}</span> |
| <span><i class="fas fa-download mr-1"></i>${wallpaper.downloads.toLocaleString()}</span> |
| </div> |
| </div> |
| </div> |
| `; |
| wallpaperItem.addEventListener('click', () => openModal(wallpaper)); |
| wallpapersGrid.appendChild(wallpaperItem); |
| }); |
| |
| |
| loadMoreBtn.style.display = filteredWallpapers.length > displayedCount ? 'flex' : 'none'; |
| } |
| |
| |
| function openModal(wallpaper) { |
| modalImage.src = wallpaper.url; |
| modalImage.alt = wallpaper.title; |
| modalTitle.textContent = wallpaper.title; |
| modalResolution.textContent = wallpaper.resolution; |
| modalCategory.textContent = wallpaper.category.charAt(0).toUpperCase() + wallpaper.category.slice(1); |
| modalDownloads.textContent = wallpaper.downloads.toLocaleString(); |
| wallpaperModal.classList.remove('hidden'); |
| document.body.style.overflow = 'hidden'; |
| } |
| |
| |
| function closeModal() { |
| wallpaperModal.classList.add('hidden'); |
| document.body.style.overflow = ''; |
| } |
| |
| |
| function setupEventListeners() { |
| |
| categoryButtons.forEach(btn => { |
| btn.addEventListener('click', () => { |
| categoryButtons.forEach(b => b.classList.remove('active')); |
| btn.classList.add('active'); |
| currentCategory = btn.dataset.category; |
| displayedCount = 8; |
| renderWallpapers(); |
| }); |
| }); |
| |
| |
| loadMoreBtn.addEventListener('click', () => { |
| displayedCount += itemsPerLoad; |
| renderWallpapers(); |
| |
| wallpapersGrid.lastElementChild.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); |
| }); |
| |
| |
| searchBar.addEventListener('input', (e) => { |
| const searchTerm = e.target.value.toLowerCase(); |
| if (searchTerm.length > 2) { |
| const filtered = wallpapers.filter(wp => |
| wp.title.toLowerCase().includes(searchTerm) || |
| wp.category.toLowerCase().includes(searchTerm) |
| ); |
| |
| wallpapersGrid.innerHTML = ''; |
| |
| if (filtered.length === 0) { |
| wallpapersGrid.innerHTML = ` |
| <div class="col-span-full text-center py-12"> |
| <i class="fas fa-search text-5xl text-gray-400 mb-4"></i> |
| <h4 class="text-xl font-medium text-gray-600">Nenhum resultado encontrado</h4> |
| <p class="text-gray-500">Tente outro termo de busca</p> |
| </div> |
| `; |
| loadMoreBtn.style.display = 'none'; |
| return; |
| } |
| |
| filtered.forEach(wallpaper => { |
| const wallpaperItem = document.createElement('div'); |
| wallpaperItem.className = 'wallpaper-item bg-white rounded-lg overflow-hidden shadow-md cursor-pointer'; |
| wallpaperItem.innerHTML = ` |
| <div class="relative overflow-hidden" style="padding-bottom: 56.25%;"> |
| <img src="${wallpaper.url}" alt="${wallpaper.title}" |
| class="absolute h-full w-full object-cover hover:opacity-90 transition"> |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4 text-white"> |
| <h4 class="font-bold truncate">${wallpaper.title}</h4> |
| <div class="flex justify-between items-center text-sm opacity-80"> |
| <span>${wallpaper.resolution}</span> |
| <span><i class="fas fa-download mr-1"></i>${wallpaper.downloads.toLocaleString()}</span> |
| </div> |
| </div> |
| </div> |
| `; |
| wallpaperItem.addEventListener('click', () => openModal(wallpaper)); |
| wallpapersGrid.appendChild(wallpaperItem); |
| }); |
| |
| loadMoreBtn.style.display = 'none'; |
| } else if (searchTerm.length === 0) { |
| |
| displayedCount = 8; |
| renderWallpapers(); |
| } |
| }); |
| |
| |
| closeModalBtn.addEventListener('click', closeModal); |
| |
| |
| wallpaperModal.addEventListener('click', (e) => { |
| if (e.target === wallpaperModal) { |
| closeModal(); |
| } |
| }); |
| |
| |
| document.addEventListener('keydown', (e) => { |
| if (e.key === 'Escape' && !wallpaperModal.classList.contains('hidden')) { |
| closeModal(); |
| } |
| }); |
| } |
| |
| |
| const dropArea = document.getElementById('drop-area'); |
| const fileInput = document.getElementById('fileInput'); |
| const selectFilesBtn = document.getElementById('selectFiles'); |
| const preview = document.getElementById('preview'); |
| const previewImage = document.getElementById('preview-image'); |
| let uploadedFile = null; |
| |
| |
| selectFilesBtn.addEventListener('click', () => fileInput.click()); |
| |
| |
| fileInput.addEventListener('change', function(e) { |
| handleFiles(this.files); |
| }); |
| |
| |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
| dropArea.addEventListener(eventName, preventDefaults, false); |
| document.body.addEventListener(eventName, preventDefaults, false); |
| }); |
| |
| |
| ['dragenter', 'dragover'].forEach(eventName => { |
| dropArea.addEventListener(eventName, highlight, false); |
| }); |
| |
| ['dragleave', 'drop'].forEach(eventName => { |
| dropArea.addEventListener(eventName, unhighlight, false); |
| }); |
| |
| |
| dropArea.addEventListener('drop', handleDrop, false); |
| |
| function preventDefaults(e) { |
| e.preventDefault(); |
| e.stopPropagation(); |
| } |
| |
| function highlight() { |
| dropArea.classList.add('neon-border'); |
| } |
| |
| function unhighlight() { |
| dropArea.classList.remove('neon-border'); |
| } |
| |
| function handleDrop(e) { |
| const dt = e.dataTransfer; |
| const files = dt.files; |
| handleFiles(files); |
| } |
| |
| function handleFiles(files) { |
| if (files.length > 0) { |
| const file = files[0]; |
| |
| if (!file.type.match('image.*')) { |
| alert('Por favor, selecione apenas imagens!'); |
| return; |
| } |
| |
| if (file.size > 10 * 1024 * 1024) { |
| alert('Arquivo muito grande! Máximo permitido: 10MB'); |
| return; |
| } |
| |
| uploadedFile = file; |
| |
| |
| const reader = new FileReader(); |
| reader.onload = function(e) { |
| previewImage.src = e.target.result; |
| preview.classList.remove('hidden'); |
| }; |
| reader.readAsDataURL(file); |
| } |
| } |
| |
| |
| document.querySelector('#upload-section button.bg-purple-600').addEventListener('click', function(e) { |
| e.preventDefault(); |
| |
| if (!uploadedFile) { |
| alert('Por favor, selecione uma imagem para enviar!'); |
| return; |
| } |
| |
| const title = document.querySelector('#upload-section input[type="text"]').value; |
| if (!title) { |
| alert('Por favor, adicione um título para o wallpaper!'); |
| return; |
| } |
| |
| const category = document.querySelector('#upload-section select').value; |
| const tags = document.querySelector('#upload-section input[placeholder="Ex: valorant, neon, purple, gaming"]').value; |
| |
| |
| |
| const newWallpaper = { |
| id: wallpapers.length + 1, |
| title: title, |
| category: category.toLowerCase(), |
| resolution: '3840x2160', |
| downloads: 0, |
| url: previewImage.src |
| }; |
| |
| wallpapers.unshift(newWallpaper); |
| |
| alert('Wallpaper enviado com sucesso! Obrigado por sua contribuição.'); |
| |
| |
| document.querySelector('#upload-section form').reset(); |
| preview.classList.add('hidden'); |
| uploadedFile = null; |
| |
| |
| currentCategory = 'all'; |
| displayedCount = 8; |
| renderWallpapers(); |
| }); |
| |
| |
| init(); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=BerserkFG/pixelnerd" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
