Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sorteio Shopee Style</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> | |
| .confetti { | |
| position: fixed; | |
| width: 10px; | |
| height: 10px; | |
| background-color: #f00; | |
| opacity: 0; | |
| animation: confetti-fall 3s ease-in-out forwards; | |
| z-index: 1000; | |
| } | |
| @keyframes confetti-fall { | |
| 0% { | |
| transform: translateY(-100vh) rotate(0deg); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translateY(100vh) rotate(360deg); | |
| opacity: 0; | |
| } | |
| } | |
| .winner-card { | |
| animation: winner-pop 0.5s ease-out forwards; | |
| transform: scale(0); | |
| } | |
| @keyframes winner-pop { | |
| 0% { transform: scale(0); } | |
| 80% { transform: scale(1.1); } | |
| 100% { transform: scale(1); } | |
| } | |
| .participant-input { | |
| transition: all 0.3s ease; | |
| } | |
| .participant-input:focus { | |
| transform: scale(1.02); | |
| box-shadow: 0 0 0 2px rgba(238, 77, 45, 0.5); | |
| } | |
| #namesTextarea { | |
| min-height: 200px; | |
| } | |
| .shopee-orange { | |
| background-color: #EE4D2D; | |
| } | |
| .shopee-orange-text { | |
| color: #EE4D2D; | |
| } | |
| .shopee-gradient { | |
| background: linear-gradient(90deg, #EE4D2D 0%, #FF7337 100%); | |
| } | |
| .shopee-gradient:hover { | |
| background: linear-gradient(90deg, #DD3D1D 0%, #EE6327 100%); | |
| } | |
| .meme-container { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0,0,0,0.8); | |
| z-index: 1001; | |
| display: none; | |
| justify-content: center; | |
| align-items: center; | |
| flex-direction: column; | |
| } | |
| .meme-image { | |
| max-width: 80%; | |
| max-height: 70%; | |
| border-radius: 10px; | |
| box-shadow: 0 0 30px rgba(255,255,255,0.3); | |
| } | |
| .meme-text { | |
| color: white; | |
| font-size: 1.5rem; | |
| margin-top: 20px; | |
| text-align: center; | |
| max-width: 80%; | |
| } | |
| .loading-dots { | |
| display: flex; | |
| justify-content: center; | |
| margin-top: 20px; | |
| } | |
| .loading-dots span { | |
| width: 10px; | |
| height: 10px; | |
| margin: 0 5px; | |
| background-color: white; | |
| border-radius: 50%; | |
| display: inline-block; | |
| animation: bounce 1.4s infinite ease-in-out both; | |
| } | |
| .loading-dots span:nth-child(1) { | |
| animation-delay: -0.32s; | |
| } | |
| .loading-dots span:nth-child(2) { | |
| animation-delay: -0.16s; | |
| } | |
| @keyframes bounce { | |
| 0%, 80%, 100% { | |
| transform: scale(0); | |
| } 40% { | |
| transform: scale(1); | |
| } | |
| } | |
| .shopee-header { | |
| background: linear-gradient(90deg, #EE4D2D 0%, #FF7337 100%); | |
| color: white; | |
| padding: 15px 0; | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.1); | |
| } | |
| .shopee-logo { | |
| font-weight: bold; | |
| font-size: 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .shopee-logo i { | |
| margin-right: 10px; | |
| } | |
| .shopee-card { | |
| border-radius: 10px; | |
| box-shadow: 0 2px 15px rgba(238, 77, 45, 0.1); | |
| border: 1px solid rgba(238, 77, 45, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <!-- Header Shopee Style --> | |
| <header class="shopee-header"> | |
| <div class="container mx-auto px-4"> | |
| <div class="shopee-logo"> | |
| <i class="fas fa-gift"></i> | |
| <span>SORTEIO SHOPEE STYLE</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Container de Memes (hidden inicialmente) --> | |
| <div id="memeContainer" class="meme-container"> | |
| <img id="memeImage" class="meme-image" src="" alt="Meme"> | |
| <div id="memeText" class="meme-text">Processando o sorteio...</div> | |
| <div class="loading-dots"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </div> | |
| <div class="container mx-auto px-4 py-8 max-w-4xl"> | |
| <main class="bg-white shopee-card overflow-hidden"> | |
| <div class="p-6 md:p-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Configuração do Sorteio --> | |
| <div> | |
| <h2 class="text-2xl font-semibold shopee-orange-text mb-6 flex items-center"> | |
| <i class="fas fa-cog mr-3"></i> Configurações | |
| </h2> | |
| <div class="mb-6"> | |
| <label for="winnersCount" class="block text-gray-700 font-medium mb-2"> | |
| <i class="fas fa-trophy mr-2 text-yellow-500"></i> Número de Ganhadores | |
| </label> | |
| <div class="flex items-center"> | |
| <button id="decreaseWinners" class="bg-orange-100 shopee-orange-text px-4 py-2 rounded-l-lg hover:bg-orange-200 transition"> | |
| <i class="fas fa-minus"></i> | |
| </button> | |
| <input type="number" id="winnersCount" min="1" value="1" | |
| class="w-16 text-center border-t border-b border-orange-200 py-2 bg-white"> | |
| <button id="increaseWinners" class="bg-orange-100 shopee-orange-text px-4 py-2 rounded-r-lg hover:bg-orange-200 transition"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="prizeDescription" class="block text-gray-700 font-medium mb-2"> | |
| <i class="fas fa-gift mr-2 text-orange-500"></i> Descrição do Prêmio | |
| </label> | |
| <input type="text" id="prizeDescription" placeholder="Ex: Vale-presente de R$100" | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2"> | |
| <i class="fas fa-image mr-2 text-blue-500"></i> Memes para o sorteio | |
| </label> | |
| <div class="flex flex-wrap gap-2"> | |
| <button class="meme-btn px-3 py-1 bg-gray-100 rounded-full text-sm" data-meme="https://i.imgur.com/Vk9K5JX.jpg" data-text="Será que vai ser você?">Meme 1</button> | |
| <button class="meme-btn px-3 py-1 bg-gray-100 rounded-full text-sm" data-meme="https://i.imgur.com/3ZQ3ZJX.jpg" data-text="Aguarde... o sistema está pensando">Meme 2</button> | |
| <button class="meme-btn px-3 py-1 bg-gray-100 rounded-full text-sm" data-meme="https://i.imgur.com/5ZQ3ZJX.jpg" data-text="Quem será o sortudo?">Meme 3</button> | |
| <button class="meme-btn px-3 py-1 bg-gray-100 rounded-full text-sm" data-meme="https://i.imgur.com/7ZQ3ZJX.jpg" data-text="O suspense está matando!">Meme 4</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Participantes --> | |
| <div> | |
| <h2 class="text-2xl font-semibold shopee-orange-text mb-6 flex items-center"> | |
| <i class="fas fa-users mr-3"></i> Participantes | |
| </h2> | |
| <div class="mb-4"> | |
| <label for="namesTextarea" class="block text-gray-700 font-medium mb-2"> | |
| <i class="fas fa-paste mr-2 text-blue-500"></i> Cole os nomes aqui | |
| </label> | |
| <textarea id="namesTextarea" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500" placeholder="Insira os nomes dos participantes, um por linha ou separados por vírgula"></textarea> | |
| </div> | |
| <div class="flex space-x-3 mb-6"> | |
| <button id="processNames" class="shopee-gradient text-white px-4 py-2 rounded-lg hover:bg-orange-600 transition flex-1"> | |
| <i class="fas fa-check mr-2"></i> Processar Nomes | |
| </button> | |
| <button id="clearAll" class="bg-white border border-orange-500 text-orange-600 px-4 py-2 rounded-lg hover:bg-orange-50 transition flex-1"> | |
| <i class="fas fa-trash mr-2"></i> Limpar | |
| </button> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm font-medium text-gray-700"> | |
| <i class="fas fa-list mr-1"></i> Lista de Participantes | |
| </span> | |
| <span id="participantCount" class="bg-orange-100 shopee-orange-text text-xs font-medium px-2.5 py-0.5 rounded-full">0</span> | |
| </div> | |
| <div id="participantsList" class="max-h-40 overflow-y-auto text-sm text-gray-600 border border-gray-200 rounded p-2 bg-white"> | |
| Nenhum participante adicionado | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Botão de Sortear --> | |
| <div class="mt-10 text-center"> | |
| <button id="drawButton" class="shopee-gradient text-white px-8 py-4 rounded-full text-lg font-semibold hover:from-orange-600 hover:to-orange-700 transform hover:scale-105 transition duration-300 shadow-lg"> | |
| <i class="fas fa-random mr-2"></i> REALIZAR SORTEIO | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Resultados --> | |
| <div id="resultsSection" class="bg-orange-50 p-6 hidden"> | |
| <h2 class="text-2xl font-semibold shopee-orange-text mb-6 text-center"> | |
| <i class="fas fa-award mr-2"></i> Vencedores | |
| </h2> | |
| <div id="prizeDisplay" class="text-center mb-6 hidden"> | |
| <span class="bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full text-sm font-medium"> | |
| Prêmio: <span id="prizeText"></span> | |
| </span> | |
| </div> | |
| <div id="winnersContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <!-- Winners will be inserted here --> | |
| </div> | |
| <div class="mt-8 text-center"> | |
| <button id="newDraw" class="bg-orange-100 shopee-orange-text px-6 py-3 rounded-lg hover:bg-orange-200 transition"> | |
| <i class="fas fa-redo mr-2"></i> Novo Sorteio | |
| </button> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="mt-12 text-center text-gray-600 text-sm"> | |
| <p>© 2025 Sorteio Shopee Style - Todos os direitos reservados Ulysses Inocencio </p> | |
| </footer> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Elementos do DOM | |
| const winnersCountInput = document.getElementById('winnersCount'); | |
| const decreaseWinnersBtn = document.getElementById('decreaseWinners'); | |
| const increaseWinnersBtn = document.getElementById('increaseWinners'); | |
| const namesTextarea = document.getElementById('namesTextarea'); | |
| const processNamesBtn = document.getElementById('processNames'); | |
| const clearAllBtn = document.getElementById('clearAll'); | |
| const drawButton = document.getElementById('drawButton'); | |
| const resultsSection = document.getElementById('resultsSection'); | |
| const winnersContainer = document.getElementById('winnersContainer'); | |
| const newDrawBtn = document.getElementById('newDraw'); | |
| const prizeDescription = document.getElementById('prizeDescription'); | |
| const prizeDisplay = document.getElementById('prizeDisplay'); | |
| const prizeText = document.getElementById('prizeText'); | |
| const participantsList = document.getElementById('participantsList'); | |
| const participantCount = document.getElementById('participantCount'); | |
| const memeContainer = document.getElementById('memeContainer'); | |
| const memeImage = document.getElementById('memeImage'); | |
| const memeText = document.getElementById('memeText'); | |
| const memeButtons = document.querySelectorAll('.meme-btn'); | |
| // Variável para armazenar os participantes | |
| let participants = []; | |
| let currentMeme = ''; | |
| let currentMemeText = ''; | |
| // Configurar memes | |
| memeButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| currentMeme = this.getAttribute('data-meme'); | |
| currentMemeText = this.getAttribute('data-text'); | |
| // Resetar todos os botões | |
| memeButtons.forEach(btn => { | |
| btn.classList.remove('shopee-orange', 'text-white'); | |
| btn.classList.add('bg-gray-100'); | |
| }); | |
| // Destacar o botão selecionado | |
| this.classList.remove('bg-gray-100'); | |
| this.classList.add('shopee-orange', 'text-white'); | |
| }); | |
| }); | |
| // Selecionar primeiro meme por padrão | |
| if (memeButtons.length > 0) { | |
| memeButtons[0].click(); | |
| } | |
| // Controles do número de ganhadores | |
| decreaseWinnersBtn.addEventListener('click', () => { | |
| const currentValue = parseInt(winnersCountInput.value); | |
| if (currentValue > 1) { | |
| winnersCountInput.value = currentValue - 1; | |
| } | |
| }); | |
| increaseWinnersBtn.addEventListener('click', () => { | |
| const currentValue = parseInt(winnersCountInput.value); | |
| winnersCountInput.value = currentValue + 1; | |
| }); | |
| // Processar nomes inseridos | |
| processNamesBtn.addEventListener('click', () => { | |
| const namesText = namesTextarea.value.trim(); | |
| if (!namesText) { | |
| alert('Por favor, insira os nomes dos participantes'); | |
| return; | |
| } | |
| // Processar nomes (separados por vírgula ou por linha) | |
| if (namesText.includes(',')) { | |
| participants = namesText.split(',').map(name => name.trim()).filter(name => name); | |
| } else { | |
| participants = namesText.split('\n').map(name => name.trim()).filter(name => name); | |
| } | |
| // Atualizar a lista de participantes | |
| updateParticipantsList(); | |
| }); | |
| // Atualizar a lista de participantes na tela | |
| function updateParticipantsList() { | |
| if (participants.length === 0) { | |
| participantsList.innerHTML = 'Nenhum participante adicionado'; | |
| participantCount.textContent = '0'; | |
| return; | |
| } | |
| participantCount.textContent = participants.length; | |
| participantsList.innerHTML = participants.map(name => | |
| `<div class="py-1 px-2 hover:bg-orange-50 rounded">${name}</div>` | |
| ).join(''); | |
| } | |
| // Limpar todos os participantes | |
| clearAllBtn.addEventListener('click', () => { | |
| if (confirm('Tem certeza que deseja limpar todos os participantes?')) { | |
| participants = []; | |
| namesTextarea.value = ''; | |
| updateParticipantsList(); | |
| } | |
| }); | |
| // Realizar sorteio | |
| drawButton.addEventListener('click', async () => { | |
| if (participants.length === 0) { | |
| alert('Adicione pelo menos um participante!'); | |
| return; | |
| } | |
| const winnersCount = parseInt(winnersCountInput.value); | |
| if (winnersCount > participants.length) { | |
| alert(`O número de ganhadores (${winnersCount}) não pode ser maior que o número de participantes (${participants.length})!`); | |
| return; | |
| } | |
| // Mostrar tela de memes | |
| memeImage.src = currentMeme; | |
| memeText.textContent = currentMemeText; | |
| memeContainer.style.display = 'flex'; | |
| // Embaralhar participantes | |
| const shuffled = [...participants].sort(() => 0.5 - Math.random()); | |
| // Selecionar ganhadores | |
| const winners = shuffled.slice(0, winnersCount); | |
| // Mostrar memes por 3 segundos antes de mostrar os resultados | |
| await new Promise(resolve => setTimeout(resolve, 3000)); | |
| // Esconder tela de memes | |
| memeContainer.style.display = 'none'; | |
| // Exibir resultados | |
| displayResults(winners); | |
| // Mostrar seção de resultados | |
| resultsSection.classList.remove('hidden'); | |
| // Rolar até os resultados | |
| resultsSection.scrollIntoView({ behavior: 'smooth' }); | |
| }); | |
| function displayResults(winners) { | |
| // Limpar resultados anteriores | |
| winnersContainer.innerHTML = ''; | |
| // Mostrar descrição do prêmio se existir | |
| if (prizeDescription.value.trim()) { | |
| prizeDisplay.classList.remove('hidden'); | |
| prizeText.textContent = prizeDescription.value.trim(); | |
| } else { | |
| prizeDisplay.classList.add('hidden'); | |
| } | |
| // Adicionar cada ganhador | |
| winners.forEach((winner, index) => { | |
| const winnerCard = document.createElement('div'); | |
| winnerCard.className = 'winner-card bg-white p-4 rounded-lg shadow-md text-center border-l-4 border-orange-500'; | |
| winnerCard.innerHTML = ` | |
| <div class="text-4xl shopee-orange-text mb-2">${index + 1}º</div> | |
| <div class="text-xl font-semibold text-gray-800">${winner}</div> | |
| <div class="mt-2 text-sm text-gray-500">Ganhador</div> | |
| `; | |
| winnersContainer.appendChild(winnerCard); | |
| // Animação de confete para cada ganhador (com atraso) | |
| setTimeout(() => { | |
| createConfetti(winnerCard); | |
| }, index * 300); | |
| }); | |
| } | |
| function createConfetti(element) { | |
| const rect = element.getBoundingClientRect(); | |
| const centerX = rect.left + rect.width / 2; | |
| const centerY = rect.top + rect.height / 2; | |
| for (let i = 0; i < 50; i++) { | |
| const confetti = document.createElement('div'); | |
| confetti.className = 'confetti'; | |
| // Cores aleatórias (com ênfase no laranja) | |
| const colors = ['#EE4D2D', '#FF7337', '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722']; | |
| const randomColor = colors[Math.floor(Math.random() * colors.length)]; | |
| confetti.style.backgroundColor = randomColor; | |
| confetti.style.left = `${centerX + (Math.random() - 0.5) * 100}px`; | |
| confetti.style.top = `${centerY - 50}px`; | |
| confetti.style.width = `${Math.random() * 8 + 4}px`; | |
| confetti.style.height = `${Math.random() * 8 + 4}px`; | |
| confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '0'; | |
| // Animação aleatória | |
| confetti.style.animationDuration = `${Math.random() * 2 + 2}s`; | |
| document.body.appendChild(confetti); | |
| // Remover após a animação | |
| setTimeout(() => { | |
| confetti.remove(); | |
| }, 3000); | |
| } | |
| } | |
| // Novo sorteio | |
| newDrawBtn.addEventListener('click', () => { | |
| resultsSection.classList.add('hidden'); | |
| winnersContainer.innerHTML = ''; | |
| }); | |
| }); | |
| </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=ulyssesIA/sorteio-shopee" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |