Codigo profissional para gerar combinações da lotofácil e megasena em html5, javascript, tailwind css3, o código documentado passo a passo e explicado, para facilitar o entendimento do seu funcionamento.
Estrutura: Um arquivo HTML único com style extra se necessário, mas Tailwind cuida. Usar fontes padrão. Adicionar lógica para evitar números repetidos dentro de uma combinação, ordenar crescentemente. Para Lotofácil, gerar 15 números distintos de 1-25. Para Mega-Sena, 6 números de 1-60. Permitir selecionar qual loteria? Melhor ter abas ou dois cards separados. Vou fazer dois painéis lado a lado (em telas médias) ou um em cima do outro. Cada um com seu botão "Gerar Combinação" ou "Gerar Jogos". Pode também ter um campo para número de jogos (ex: gerar 1, 2, 5 combinações). Vou fazer simples: cada painel tem um botão para gerar uma combinação aleatória, e um botão para gerar múltiplas (adicionar campo numérico). Mas para não complicar, farei um botão "Gerar Nova Combinação" que gera uma combinação e exibe. E um botão "Gerar +" que adiciona outra combinação abaixo, acumulando. Ou então mostrar lista de combinações geradas. Para simplicidade e profissionalismo, farei um gerador que exibe a(s) combinação(ões) em uma área, com botão para gerar uma nova (substituindo) e botão para adicionar à lista. Mas talvez melhor: cada loteria tem seu próprio bloco, com um botão "Gerar Combinação" que mostra um único jogo, e um campo "Quantidade" para gerar vários jogos de uma vez. Vou fazer assim.
Preciso também de validação: não pode números repetidos, ordenação crescente. Para mostrar os números, usarei badges (span com fundo colorido). Para a Mega-Sena, números de 1 a 60, para Lotofácil 1 a 25.
Design com Tailwind: fundo gradiente, cards com sombra, botões estilizados, responsivo.
Documentação passo a passo: dentro do código HTML, comentários explicando cada seção e função. Fora do código, no texto da resposta, vou explicar a lógica geral.
Vou produzir o código completo em uma única mensagem. Como é um assistente, posso mostrar o código e depois as palavras-chave/hashtags.
Atenção: "15 palavras chave, separadas por vírgulas e 15 hashtags em cada artigo" - provavelmente no final da resposta, após o código, listar palavras-chave e hashtags.
Vou criar um nome profissional para o artigo: "Gerador Lotto Pro: Sistema Dinâmico de Combinações Aleatórias para Lotofácil e Mega-Sena com HTML5, Tailwind CSS e JavaScript"
Começo a escrever.
Aqui está um código profissional e completo para gerar combinações da Lotofácil e Mega-Sena, utilizando HTML5, JavaScript (ES6+) e Tailwind CSS. O sistema é responsivo, documentado passo a passo e pronto para uso.
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>Gerador Lotto Pro | Lotofácil + Mega-Sena</title> <!-- Tailwind CSS v3 + Font Awesome Icons (opcional para ícones, mas agrega profissionalismo) --> <script src="https://cdn.tailwindcss.com"></script> <!-- Custom config para ajustes finos (sombra, etc) --> <style> /* Transições suaves e efeito de hover para cartões */ .card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; } .card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.02); } /* Estilo para os números (badges) */ .numero-badge { transition: all 0.1s ease; display: inline-flex; align-items: center; justify-content: center; width: 2.7rem; height: 2.7rem; border-radius: 9999px; font-weight: 700; font-size: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); } @media (max-width: 480px) { .numero-badge { width: 2.2rem; height: 2.2rem; font-size: 0.85rem; } } /* Rolagem suave para o conteúdo */ html { scroll-behavior: smooth; } </style> </head> <body class="bg-gradient-to-br from-slate-900 via-purple-900 to-indigo-900 min-h-screen font-sans antialiased"> <!-- Container principal com espaçamento responsivo --> <div class="container mx-auto px-4 py-8 max-w-6xl"> <!-- Cabeçalho profissional --> <header class="text-center mb-12"> <h1 class="text-4xl md:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-amber-300 to-yellow-500 inline-block drop-shadow-lg"> 🎲 Gerador Lotto Pro </h1> <p class="text-gray-200 text-lg mt-3 max-w-xl mx-auto"> Combinações aleatórias inteligentes para <span class="font-bold text-yellow-300">Lotofácil</span> e <span class="font-bold text-green-300">Mega-Sena</span><br> Números únicos, ordenados e 100% profissionais. </p> <div class="w-24 h-1 bg-gradient-to-r from-yellow-500 to-orange-500 mx-auto mt-4 rounded-full"></div> </header> <!-- Grid principal: dois cards lado a lado (responsivo) --> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> <!-- ======================= CARD LOTOFÁCIL ======================= --> <div class="bg-white/10 backdrop-blur-sm rounded-2xl shadow-2xl border border-white/20 p-6 md:p-7 card-hover"> <!-- Título do card com ícone fictício (emoji) --> <div class="flex items-center gap-3 border-b border-white/20 pb-4 mb-5"> <div class="bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl p-2 shadow-md"> <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 4h10a2 2 0 012 2v12a2 2 0 01-2 2H7a2 2 0 01-2-2V6a2 2 0 012-2z" /> </svg> </div> <div> <h2 class="text-2xl font-bold text-white">Lotofácil</h2> <p class="text-indigo-200 text-sm">15 números · 1 a 25 · Combinação única</p> </div> </div> <!-- Área de exibição da(s) combinação(ões) geradas --> <div class="mb-6"> <div id="lotofacil-comb-box" class="bg-gray-900/40 rounded-xl p-4 min-h-[140px] border border-white/10"> <!-- Mensagem inicial ou combinações serão inseridas via JS --> <div class="text-center text-gray-300 text-sm flex flex-col items-center justify-center h-full"> <span class="text-3xl mb-2">✨</span> <span>Clique em "Gerar Jogo" para criar sua combinação</span> </div> </div> </div> <!-- Controles: quantidade + botões --> <div class="flex flex-col sm:flex-row gap-3 items-stretch"> <div class="flex-1"> <label class="block text-xs font-semibold text-gray-200 uppercase tracking-wider mb-1">Quantidade de jogos</label> <input type="number" id="lotofacil-qty" value="1" min="1" max="20" class="w-full bg-gray-800 border border-gray-600 text-white rounded-lg px-4 py-2 focus:ring-2 focus:ring-yellow-500 focus:border-transparent transition"> </div> <div class="flex gap-2 items-end"> <button id="btn-gerar-lotofacil" class="bg-gradient-to-r from-indigo-600 to-purple-700 hover:from-indigo-500 hover:to-purple-600 text-white font-bold py-2 px-5 rounded-xl shadow-lg transition-all duration-200 flex items-center gap-2"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg> Gerar Jogo(s) </button> <button id="btn-limpar-lotofacil" class="bg-gray-700/70 hover:bg-gray-600 text-gray-200 font-medium py-2 px-4 rounded-xl transition"> Limpar </button> </div> </div> <!-- Informação extra --> <div class="mt-4 text-xs text-indigo-200/70 flex justify-between"> <span>🎯 Garantia: números aleatórios sem repetição</span> <span>📈 Ordenação crescente</span> </div> </div> <!-- ======================= CARD MEGA-SENA ======================= --> <div class="bg-white/10 backdrop-blur-sm rounded-2xl shadow-2xl border border-white/20 p-6 md:p-7 card-hover"> <div class="flex items-center gap-3 border-b border-white/20 pb-4 mb-5"> <div class="bg-gradient-to-br from-red-600 to-orange-500 rounded-xl p-2 shadow-md"> <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> </div> <div> <h2 class="text-2xl font-bold text-white">Mega-Sena</h2> <p class="text-orange-200 text-sm">6 números · 1 a 60 · Combinação poderosa</p> </div> </div> <div class="mb-6"> <div id="megasena-comb-box" class="bg-gray-900/40 rounded-xl p-4 min-h-[140px] border border-white/10"> <div class="text-center text-gray-300 text-sm flex flex-col items-center justify-center h-full"> <span class="text-3xl mb-2">🎰</span> <span>Clique em "Gerar Aposta" para criar sua combinação</span> </div> </div> </div> <div class="flex flex-col sm:flex-row gap-3 items-stretch"> <div class="flex-1"> <label class="block text-xs font-semibold text-gray-200 uppercase tracking-wider mb-1">Quantidade de apostas</label> <input type="number" id="megasena-qty" value="1" min="1" max="15" class="w-full bg-gray-800 border border-gray-600 text-white rounded-lg px-4 py-2 focus:ring-2 focus:ring-yellow-500 focus:border-transparent transition"> </div> <div class="flex gap-2 items-end"> <button id="btn-gerar-megasena" class="bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-500 hover:to-orange-500 text-white font-bold py-2 px-5 rounded-xl shadow-lg transition-all duration-200 flex items-center gap-2"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg> Gerar Aposta(s) </button> <button id="btn-limpar-megasena" class="bg-gray-700/70 hover:bg-gray-600 text-gray-200 font-medium py-2 px-4 rounded-xl transition"> Limpar </button> </div> </div> <div class="mt-4 text-xs text-orange-200/70 flex justify-between"> <span>🎲 Sem repetições internas</span> <span>⚡ Formato profissional</span> </div> </div> </div> <!-- Rodapé elegante com informações técnicas --> <footer class="mt-12 text-center text-gray-400 text-sm border-t border-white/10 pt-6"> <p>🔢 Algoritmo de amostragem Fisher-Yates para garantia de aleatoriedade e combinações sem repetição.</p> <p class="mt-1">📌 As combinações são geradas localmente no seu navegador — 100% confiável e transparente.</p> <p class="mt-3">© 2025 · Gerador Lotto Pro · v2.0</p> </footer> </div> <script> // ------------------------------------------------------------------ // MÓDULO PROFISSIONAL: Gerador de Combinações para Loterias // Versão: 1.0 - Documentado passo a passo // Funcionalidades: // - Geração de combinações únicas e ordenadas para Lotofácil (15/25) // - Geração de combinações únicas e ordenadas para Mega-Sena (6/60) // - Suporte a múltiplos jogos (quantidade configurável) // - Interface responsiva + TailwindCSS // - Tratamento de erros, validação de parâmetros e performance // ------------------------------------------------------------------ // ======================== FUNÇÕES AUXILIARES (genéricas) ========================= /** * Gera um array com números inteiros aleatórios entre min e max, sem repetição, * com tamanho especificado (quantity). Utiliza algoritmo de embaralhamento parcial (Fisher-Yates) * para alta performance e aleatoriedade confiável. * @param {number} min - Valor mínimo do intervalo (inclusivo) * @param {number} max - Valor máximo do intervalo (inclusivo) * @param {number} quantity - Quantidade de números distintos a serem sorteados * @returns {number[]} Array ordenado de forma crescente com os números sorteados */ function gerarNumerosUnicos(min, max, quantity) { // Validações de integridade if (quantity <= 0) throw new Error("Quantidade deve ser maior que zero."); const totalNumerosDisponiveis = max - min + 1; if (quantity > totalNumerosDisponiveis) { throw new Error(`Não é possível gerar ${quantity} números únicos no intervalo [${min}, ${max}] (máx: ${totalNumerosDisponiveis})`); } // Criamos um array com todos os números do intervalo [min, max] const numeros = []; for (let i = min; i <= max; i++) { numeros.push(i); } // Algoritmo Fisher-Yates parcial (embaralhar apenas os primeiros 'quantity' elementos) for (let i = 0; i < quantity; i++) { // Gera índice aleatório entre i e final do array const randomIndex = i + Math.floor(Math.random() * (numeros.length - i)); // Troca os elementos nas posições i e randomIndex [numeros[i], numeros[randomIndex]] = [numeros[randomIndex], numeros[i]]; } // Seleciona os primeiros 'quantity' números e os ordena de forma crescente const selecionados = numeros.slice(0, quantity); selecionados.sort((a, b) => a - b); return selecionados; } /** * Renderiza uma ou mais combinações dentro de um container HTML. * Cada combinação é exibida como uma linha com badges (círculos com números). * @param {HTMLElement} container - Elemento DOM onde as combinações serão inseridas. * @param {number[][]} combinacoes - Array de arrays, cada sub-array contém números de uma combinação. * @param {string} loteriaNome - Nome apenas para efeito de título (não usado na lógica principal) */ function renderizarCombinacoes(container, combinacoes, loteriaNome = "") { if (!container) return; if (!combinacoes || combinacoes.length === 0) { container.innerHTML = ` <div class="text-center text-gray-300 text-sm flex flex-col items-center justify-center h-full"> <span class="text-3xl mb-2">🎲</span> <span>Nenhuma combinação gerada. Use os botões acima.</span> </div> `; return; } // Cria estrutura HTML com margem entre jogos let html = `<div class="space-y-4">`; for (let i = 0; i < combinacoes.length; i++) { const jogo = combinacoes[i]; // Número do jogo (caso tenha vários) const tituloJogo = combinacoes.length > 1 ? `<div class="text-xs font-semibold text-indigo-200 mb-1 flex items-center gap-2"><span class="w-5 h-5 rounded-full bg-indigo-500/40 inline-flex items-center justify-center text-[11px]">${i+1}</span> Jogo ${i+1}</div>` : ''; // Cria os badges para cada número const badges = jogo.map(num => { return `<span class="numero-badge bg-gradient-to-br from-gray-800 to-gray-700 text-white border border-white/30 shadow-md font-mono">${num}</span>`; }).join(''); html += ` <div class="bg-black/20 rounded-xl p-3 backdrop-blur-sm"> ${tituloJogo} <div class="flex flex-wrap gap-2 justify-start items-center"> ${badges} </div> </div> `; } html += `</div>`; container.innerHTML = html; } // ======================== ESTADOS E DOM ELEMENTS ========================== // Armazenamento das combinações atuais de cada loteria (para possível limpeza futura) let lotofacilCombinacoesAtuais = []; // array de arrays (cada sub-array = jogo) let megasenaCombinacoesAtuais = []; // Elementos DOM const lotofacilContainer = document.getElementById('lotofacil-comb-box'); const megasenaContainer = document.getElementById('megasena-comb-box'); const inputLotofacilQty = document.getElementById('lotofacil-qty'); const inputMegasenaQty = document.getElementById('megasena-qty'); const btnGerarLotofacil = document.getElementById('btn-gerar-lotofacil'); const btnLimparLotofacil = document.getElementById('btn-limpar-lotofacil'); const btnGerarMegasena = document.getElementById('btn-gerar-megasena'); const btnLimparMegasena = document.getElementById('btn-limpar-megasena'); // ======================== LÓGICA PRINCIPAL ============================== /** * Função responsável por gerar combinações da Lotofácil com base na quantidade informada. * Atualiza o estado interno e dispara a renderização. */ function gerarLotofacil() { // 1. Obter e validar quantidade desejada de jogos let quantidade = parseInt(inputLotofacilQty.value, 10); if (isNaN(quantidade) || quantidade < 1) quantidade = 1; if (quantidade > 20) { alert("Máximo de 20 jogos por vez para manter performance e visual limpo."); quantidade = 20; inputLotofacilQty.value = 20; } try { const novasCombinacoes = []; // Parâmetros da Lotofácil: 15 números entre 1 e 25 const MIN_LOTOFACIL = 1; const MAX_LOTOFACIL = 25; const NUMEROS_POR_JOGO = 15; // Gera "quantidade" jogos independentes (cada um com números únicos) for (let i = 0; i < quantidade; i++) { const jogo = gerarNumerosUnicos(MIN_LOTOFACIL, MAX_LOTOFACIL, NUMEROS_POR_JOGO); novasCombinacoes.push(jogo); } // Atualiza estado global lotofacilCombinacoesAtuais = novasCombinacoes; // Renderiza no container específico renderizarCombinacoes(lotofacilContainer, lotofacilCombinacoesAtuais, "Lotofácil"); } catch (erro) { console.error("Erro ao gerar Lotofácil:", erro); alert(`Erro na geração: ${erro.message}`); // Em caso de erro, exibe mensagem amigável lotofacilContainer.innerHTML = `<div class="text-center text-red-300 p-4">⚠️ Erro ao gerar combinação. Verifique os parâmetros.</div>`; } } /** * Gera combinações para a Mega-Sena (6 números de 1 a 60) de acordo com a quantidade solicitada. */ function gerarMegaSena() { let quantidade = parseInt(inputMegasenaQty.value, 10); if (isNaN(quantidade) || quantidade < 1) quantidade = 1; if (quantidade > 15) { alert("Máximo de 15 apostas por solicitação para garantir clareza."); quantidade = 15; inputMegasenaQty.value = 15; } try { const MIN_MEGA = 1; const MAX_MEGA = 60; const NUMEROS_POR_APOSTA = 6; const novasApostas = []; for (let i = 0; i < quantidade; i++) { const aposta = gerarNumerosUnicos(MIN_MEGA, MAX_MEGA, NUMEROS_POR_APOSTA); novasApostas.push(aposta); } megasenaCombinacoesAtuais = novasApostas; renderizarCombinacoes(megasenaContainer, megasenaCombinacoesAtuais, "Mega-Sena"); } catch (erro) { console.error("Erro ao gerar Mega-Sena:", erro); alert(`Erro na geração: ${erro.message}`); megasenaContainer.innerHTML = `<div class="text-center text-red-300 p-4">⚠️ Erro ao gerar aposta. Confira o intervalo.</div>`; } } /** * Limpa as combinações atuais da Lotofácil, resetando o container e o estado interno. */ function limparLotofacil() { lotofacilCombinacoesAtuais = []; renderizarCombinacoes(lotofacilContainer, [], "Lotofácil"); } /** * Limpa as combinações atuais da Mega-Sena. */ function limparMegaSena() { megasenaCombinacoesAtuais = []; renderizarCombinacoes(megasenaContainer, [], "Mega-Sena"); } // ======================== INICIALIZAÇÃO E EVENTOS ========================== // Atribuição dos listeners (modo profissional com verificação de existência) if (btnGerarLotofacil) { btnGerarLotofacil.addEventListener('click', gerarLotofacil); } if (btnLimparLotofacil) { btnLimparLotofacil.addEventListener('click', limparLotofacil); } if (btnGerarMegasena) { btnGerarMegasena.addEventListener('click', gerarMegaSena); } if (btnLimparMegasena) { btnLimparMegasena.addEventListener('click', limparMegaSena); } /* Opcional: permitir gerar com tecla Enter nos inputs (boa prática) */ const inputs = [inputLotofacilQty, inputMegasenaQty]; inputs.forEach(input => { if (input) { input.addEventListener('keypress', (e) => { if (e.key === 'Enter') { e.preventDefault(); if (input.id === 'lotofacil-qty') gerarLotofacil(); if (input.id === 'megasena-qty') gerarMegaSena(); } }); } }); // Pequeno detalhe: gerar uma combinação amigável de demonstração ao carregar a página? // Para não ficar vazio, geramos um jogo exemplo para cada loteria, mostrando capacidade imediata. // Essa ação é puramente estética e demonstra funcionalidade sem necessidade de clique. window.addEventListener('DOMContentLoaded', () => { // Gera APENAS uma combinação inicial para cada modalidade, como boas-vindas interativas. // Isso evita tela totalmente vazia sem prejudicar a usabilidade. try { // Exemplo Lotofácil: 1 jogo const jogoDemoLotofacil = gerarNumerosUnicos(1, 25, 15); lotofacilCombinacoesAtuais = [jogoDemoLotofacil]; renderizarCombinacoes(lotofacilContainer, lotofacilCombinacoesAtuais, "Lotofácil"); // Exemplo Mega-Sena: 1 aposta const apostaDemoMega = gerarNumerosUnicos(1, 60, 6); megasenaCombinacoesAtuais = [apostaDemoMega]; renderizarCombinacoes(megasenaContainer, megasenaCombinacoesAtuais, "Mega-Sena"); } catch (e) { // Fallback silencioso, mensagens padrões já estarão visíveis caso haja erro de intervalo. console.warn("Demonstração inicial não pode ser gerada, mas botões funcionam normalmente."); } }); /* * ================== DOCUMENTAÇÃO PASSO A PASSO (EM COMENTÁRIOS) ================== * * 1. Estrutura HTML semântica: uso de header, main (via grid), footer. * 2. Tailwind CSS + customização: classes utilitárias responsivas, badges customizados, hover. * 3. JavaScript modularizado: funções puras (gerarNumerosUnicos) e funções de renderização. * 4. Algoritmo de geração: Fisher-Yates parcial para sorteio eficiente sem repetições. * 5. Tratamento de erros: validação quantidade vs total de números disponíveis, fallbacks com alertas. * 6. Estado reativo: combinacoesAtuais armazenam os arrays para possível limpeza ou futura exportação. * 7. Eventos: listeners otimizados, suporte a tecla Enter, limitação de máximo de jogos. * 8. Design responsivo: badges ajustam tamanho em mobile, grid muda para coluna única em telas médias/pequenas. * 9. Acessibilidade: contraste de cores razoável, labels nos inputs, botões com descrições. * 10. Extensibilidade: fácil adaptar para outros jogos (Quina, Lotomania) alterando parâmetros. * * Este código segue boas práticas: evita poluição do escopo global (apenas variáveis necessárias), * uso de 'const' e 'let', funções nomeadas claras e comentários descritivos. */ </script> </body> </html>📌 Palavras-chave (15)
gerador de lotofácil, gerador de mega-sena, combinações aleatórias, números da sorte, loteria brasileira, algoritmo fisher-yates, javascript profissional, tailwind css, html5 aplicação web, sorteio sem repetição, front-end loterias, aposta inteligente, ferramenta de palpites, código documentado, sistema de loterias
🔖 Hashtags (15)
#GeradorLottoPro, #Lotofácil, #MegaSena, #CombinaçõesLoteria, #JavaScript, #TailwindCSS, #WebApp, #FrontEndDev, #SorteioOnline, #LoteriasBrasil, #CódigoAberto, #FisherYates, #NúmerosDaSorte, #FullStackLab, #DevProfissional
0 Comentários
Deixe seu comentário e sua sugestão de conteúdo.