Google Frutas — 80 Sites
by MegaFlare51965 lines20.8 KB
<!DOCTYPE html> <html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <title>Google Frutas — 80 Sites</title> <style>
*{
box-sizing:border-box;
margin:0;
padding:0;
}
body{
font-family:Arial,Helvetica,sans-serif;
background:#fff;
color:#202124;
min-height:100vh;
}
button,input{
font-family:inherit;
}
/* =========================
GOOGLE
========================= */
#googlePage{
min-height:100vh;
display:flex;
flex-direction:column;
}
.top{
display:flex;
justify-content:flex-end;
align-items:center;
gap:18px;
padding:18px 25px;
font-size:14px;
}
.top span{
cursor:pointer;
}
.logo{
text-align:center;
font-size:78px;
font-weight:bold;
letter-spacing:-7px;
margin-top:90px;
user-select:none;
}
.logo .g1{color:#4285f4}
.logo .o1{color:#ea4335}
.logo .o2{color:#fbbc05}
.logo .g2{color:#4285f4}
.logo .l{color:#34a853}
.logo .e{color:#ea4335}
.sublogo{
text-align:center;
margin-top:-5px;
color:#5f6368;
font-size:14px;
}
.search-area{
width:min(700px,92%);
margin:35px auto 0;
}
.search-box{
height:52px;
border:1px solid #dfe1e5;
border-radius:28px;
display:flex;
align-items:center;
padding:0 18px;
box-shadow:0 1px 6px rgba(32,33,36,.12);
transition:.2s;
}
.search-box:focus-within{
box-shadow:0 1px 8px rgba(32,33,36,.22);
}
.search-icon{
font-size:21px;
color:#777;
margin-right:12px;
}
#pesquisa{
border:0;
outline:0;
width:100%;
font-size:17px;
background:transparent;
}
.buttons{
display:flex;
justify-content:center;
gap:12px;
margin-top:25px;
}
.buttons button{
border:1px solid #f8f9fa;
background:#f8f9fa;
padding:11px 18px;
border-radius:5px;
cursor:pointer;
color:#3c4043;
}
.buttons button:hover{
border-color:#dadce0;
}
/* =========================
RESULTADOS
========================= */
#resultados{
width:min(850px,94%);
margin:35px auto;
padding-bottom:50px;
}
.contador{
color:#70757a;
font-size:14px;
margin-bottom:18px;
}
.resultado{
padding:18px 10px;
border-bottom:1px solid #eee;
cursor:pointer;
transition:.15s;
}
.resultado:hover{
background:#f8f9fa;
border-radius:10px;
}
.resultado .url{
color:#188038;
font-size:13px;
margin-bottom:5px;
}
.resultado h2{
color:#1a0dab;
font-size:20px;
font-weight:500;
margin-bottom:7px;
}
.resultado p{
color:#4d5156;
line-height:1.45;
font-size:14px;
}
.nenhum{
padding:30px 10px;
color:#5f6368;
text-align:center;
}
/* =========================
SITE INDIVIDUAL
========================= */
.site{
display:none;
min-height:100vh;
background:#f7f8fa;
}
.site-top{
background:white;
padding:12px 15px;
position:sticky;
top:0;
z-index:10;
box-shadow:0 1px 4px rgba(0,0,0,.12);
}
.voltar{
border:0;
background:#1a73e8;
color:white;
padding:10px 17px;
border-radius:22px;
cursor:pointer;
font-size:14px;
}
.site-content{
width:min(900px,94%);
margin:25px auto 60px;
}
.fruta-header{
background:white;
border-radius:18px;
padding:30px 20px;
text-align:center;
box-shadow:0 2px 8px rgba(0,0,0,.08);
margin-bottom:20px;
}
.fruta-emoji{
font-size:70px;
margin-bottom:10px;
}
.fruta-header h1{
font-size:31px;
margin-bottom:8px;
}
.cientifico{
color:#6b7280;
font-style:italic;
}
.secao{
background:white;
border-radius:16px;
padding:22px;
margin-top:18px;
box-shadow:0 1px 6px rgba(0,0,0,.07);
}
.secao h2{
font-size:23px;
margin-bottom:15px;
}
.info-list p{
margin:9px 0;
line-height:1.55;
color:#3c4043;
}
.tamanhos{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
}
.tamanho{
border:1px solid #e5e7eb;
border-radius:13px;
padding:17px;
text-align:center;
background:#fafafa;
}
.tamanho .icon{
font-size:28px;
}
.tamanho h3{
margin:7px 0;
}
.tamanho p{
font-size:13px;
color:#666;
}
.tag{
display:inline-block;
margin-top:12px;
background:#eef4ff;
color:#1967d2;
padding:7px 12px;
border-radius:20px;
font-size:13px;
}
/* =========================
RESPONSIVO
========================= */
@media(max-width:600px){
.top{
padding:13px 15px;
}
.logo{
font-size:55px;
margin-top:70px;
letter-spacing:-5px;
}
.search-area{
margin-top:30px;
}
.search-box{
height:50px;
}
.buttons{
flex-wrap:wrap;
}
.resultado h2{
font-size:18px;
}
.fruta-header{
padding:25px 15px;
}
.fruta-header h1{
font-size:26px;
}
.tamanhos{
grid-template-columns:repeat(2,1fr);
}
.secao{
padding:18px;
}
}
</style> </head> <body> <!-- =========================
GOOGLE PRINCIPAL
========================= --> <div id="googlePage"> <div class="top">
<span>Gmail</span>
<span>Imagens</span>
<span>⋮⋮⋮</span>
</div> <div class="logo">
<span class="g1">G</span><span class="o1">o</span><span class="o2">o</span><span class="g2">g</span><span class="l">l</span><span class="e">e</span>
</div> <div class="sublogo">FRUTAS</div> <div class="search-area"> <div class="search-box">
<span class="search-icon">⌕</span>
<input
id="pesquisa"
type="search"
autocomplete="off"
placeholder="Pesquise frutas..."
onkeydown="tecla(event)"
>
</div>
<div class="buttons">
<button onclick="pesquisar()">Pesquisa Google</button>
<button onclick="sorte()">Estou com sorte</button>
</div>
</div> <div id="resultados"></div> </div> <!-- =========================================================
SITES — GERADOS AUTOMATICAMENTE PELO JAVASCRIPT
========================================================= --> <div id="sitesContainer"></div> <script>
/* =========================================================
BANCO DOS 80 SITES
========================================================= */
const frutas = [
/* 1 - 16 */
["🍎","Maçã","Malus domestica"],
["🍌","Banana","Musa spp."],
["🍊","Laranja","Citrus sinensis"],
["🍋","Limão","Citrus limon"],
["🍉","Melancia","Citrullus lanatus"],
["🍇","Uva","Vitis vinifera"],
["🍓","Morango","Fragaria × ananassa"],
["🥭","Manga","Mangifera indica"],
["🍍","Abacaxi","Ananas comosus"],
["🥝","Kiwi","Actinidia deliciosa"],
["🍑","Pêssego","Prunus persica"],
["🍐","Pera","Pyrus communis"],
["🥥","Coco","Cocos nucifera"],
["🥑","Abacate","Persea americana"],
["🍒","Cereja","Prunus avium"],
["🍈","Melão","Cucumis melo"],
/* A */
["🫐","Açaí","Euterpe oleracea"],
["🍒","Acerola","Malpighia emarginata"],
["🟣","Ameixa","Prunus domestica"],
["🫐","Amora","Morus nigra"],
["🍈","Araçá","Psidium cattleianum"],
["🍈","Araticum","Annona crassiflora"],
["🍈","Ata / Fruta-do-conde / Pinha","Annona squamosa"],
["🍑","Atemoia","Annona × atemoya"],
["🍍","Ananás","Ananas comosus"],
/* B */
["🍊","Bergamota / Mexerica / Tangerina","Citrus reticulata"],
["🌴","Buriti","Mauritia flexuosa"],
/* C */
["🥭","Caju","Anacardium occidentale"],
["🍫","Cacau","Theobroma cacao"],
["🟠","Cajá","Spondias mombin"],
["🥭","Cajá-manga","Spondias dulcis"],
["🟠","Caqui","Diospyros kaki"],
["⭐","Carambola","Averrhoa carambola"],
["🟣","Cupuaçu","Theobroma grandiflorum"],
["🔴","Seriguela","Spondias purpurea"],
/* D */
["🍑","Damasco","Prunus armeniaca"],
/* F */
["🟣","Figo","Ficus carica"],
["❤️","Framboesa","Rubus idaeus"],
["🍞","Fruta-pão","Artocarpus altilis"],
/* G */
["🍈","Goiaba","Psidium guajava"],
["🟢","Graviola","Annona muricata"],
["🔴","Guaraná","Paullinia cupana"],
/* I */
["🫘","Ingá","Inga edulis"],
["🟢","Umbu","Spondias tuberosa"],
/* J */
["🟣","Jabuticaba","Plinia cauliflora"],
["🍈","Jaca","Artocarpus heterophyllus"],
["🌸","Jambo","Syzygium malaccense"],
["🟣","Jamelão","Syzygium cumini"],
["🟢","Jenipapo","Genipa americana"],
["🟤","Jatobá","Hymenaea courbaril"],
/* K */
["🥝","Kinkan / Kumquat","Citrus japonica"],
/* L */
["🟢","Lima","Citrus × aurantiifolia"],
["🩷","Lichia","Litchi chinensis"],
/* M */
["💛","Maracujá","Passiflora edulis"],
["🧡","Mamão","Carica papaya"],
["🟡","Mangaba","Hancornia speciosa"],
["🟢","Murici","Byrsonima crassifolia"],
["🟤","Marmelo","Cydonia oblonga"],
["🟤","Macaúba","Acrocomia aculeata"],
/* N */
["🍑","Nectarina","Prunus persica var. nucipersica"],
["🟡","Nêspera","Eriobotrya japonica"],
/* O */
["🟢","Oiti","Licania tomentosa"],
/* P */
["❤️","Pitanga","Eugenia uniflora"],
["🟣","Pitomba","Talisia esculenta"],
["🟢","Pupunha","Bactris gasipaes"],
["🟡","Pequi","Caryocar brasiliense"],
["🩷","Pitaya","Selenicereus undatus"],
["🟣","Physalis","Physalis peruviana"],
/* R */
["❤️","Romã","Punica granatum"],
["🟠","Rambutão","Nephelium lappaceum"],
/* S */
["🟤","Sapoti","Manilkara zapota"],
["🔴","Sapucaia","Lecythis pisonis"],
/* T */
["🟤","Tamarindo","Tamarindus indica"],
["🟢","Tucumã","Astrocaryum vulgare"],
["🍅","Tamarilo","Solanum betaceum"],
["🍊","Toranja","Citrus paradisi"],
/* U */
["🟡","Uvaia","Eugenia pyriformis"],
["🟢","Uxi","Endopleura uchi"],
/* COMPLETANDO 80 */
["🍋","Limão-cravo","Citrus × limonia"],
["🔴","Groselha","Ribes rubrum"]
];
/* =========================================================
GARANTIA DE 80
========================================================= */
console.log("Total de sites de frutas:", frutas.length);
/* =========================================================
NORMALIZAÇÃO
========================================================= */
function normalizar(texto){
return texto
.toLowerCase()
.normalize("NFD")
.replace(/[\u0300-\u036f]/g,"");
}
/* =========================================================
CRIA OS 80 SITES
========================================================= */
function criarSites(){
const container =
document.getElementById("sitesContainer");
container.innerHTML="";
frutas.forEach((fruta,index)=>{
const emoji=fruta[0];
const nome=fruta[1];
const cientifico=fruta[2];
const id="site"+(index+1);
const nomeSimples=nome
.split("/")[0]
.trim();
let linhasInfo=[
`${nomeSimples} é uma fruta conhecida e utilizada em diferentes regiões.`,
`Seu nome científico é ${cientifico}.`,
`A fruta pode apresentar características diferentes dependendo da variedade.`,
`A cor, o formato e o tamanho podem variar conforme o cultivo.`,
`O sabor também pode mudar de acordo com a variedade e o ponto de maturação.`,
`Frutas maduras normalmente apresentam características próprias de aroma e sabor.`,
`${nomeSimples} pode ser consumida de diferentes maneiras.`,
`Ela pode aparecer em receitas, sobremesas, bebidas ou ser consumida in natura.`,
`O cultivo depende do clima e das condições do solo.`,
`A disponibilidade pode variar conforme a região do Brasil.`,
`Algumas variedades são cultivadas comercialmente em grande escala.`,
`Outras são mais encontradas em quintais, sítios ou áreas específicas.`,
`A quantidade de frutos produzidos depende da planta e das condições de cultivo.`,
`Água, luz e nutrientes são importantes para o desenvolvimento das plantas.`,
`O período de colheita varia conforme a espécie e a região.`,
`A aparência é um dos fatores usados para avaliar a maturação.`,
`Depois da colheita, o armazenamento adequado ajuda a conservar a fruta.`,
`O uso culinário da fruta depende de suas características.`,
`Existem espécies e variedades diferentes relacionadas a muitas frutas.`,
`${nomeSimples} faz parte da grande diversidade de frutas encontradas no mundo.`
];
let linhasPlantio=[
`Escolha uma área adequada ao clima da espécie.`,
`Use uma muda ou semente saudável e apropriada.`,
`Prepare um solo com boa drenagem.`,
`Coloque a planta em um local com iluminação adequada.`,
`Faça a irrigação de acordo com a necessidade da espécie.`,
`Observe a planta regularmente durante o crescimento.`,
`Faça os cuidados de manutenção necessários.`,
`A época ideal de plantio depende da espécie e da região.`
];
const div=document.createElement("div");
div.className="site";
div.id=id;
div.innerHTML=`
<div class="site-top">
<button class="voltar" onclick="voltar()">
← Voltar para pesquisa
</button>
</div>
<main class="site-content">
<header class="fruta-header">
<div class="fruta-emoji">${emoji}</div>
<h1>${nome}</h1>
<div class="cientifico">
Nome científico: ${cientifico}
</div>
<span class="tag">
Site ${index+1} de 80
</span>
</header>
<section class="secao">
<h2>
📚 Tudo sobre ${nomeSimples}
</h2>
<div class="info-list">
${linhasInfo
.map(linha=>`<p>• ${linha}</p>`)
.join("")}
</div>
</section>
<section class="secao">
<h2>
🌱 Como plantar ${nomeSimples}
</h2>
<div class="info-list">
${linhasPlantio
.map(linha=>`<p>• ${linha}</p>`)
.join("")}
</div>
</section>
<section class="secao">
<h2>📏 Tamanhos</h2>
<div class="tamanhos">
<div class="tamanho">
<div class="icon">🔹</div>
<h3>Pequena</h3>
<p>Frutos de menor porte.</p>
</div>
<div class="tamanho">
<div class="icon">🔸</div>
<h3>Média</h3>
<p>Tamanho intermediário.</p>
</div>
<div class="tamanho">
<div class="icon">🔶</div>
<h3>Grande</h3>
<p>Frutos de maior porte.</p>
</div>
<div class="tamanho">
<div class="icon">⭐</div>
<h3>Variedades</h3>
<p>O tamanho muda conforme a variedade.</p>
</div>
</div>
</section>
</main>
`;
container.appendChild(div);
});
}
/* =========================================================
BANCO DE PESQUISA
========================================================= */
const sites=frutas.map((fruta,index)=>{
const emoji=fruta[0];
const nome=fruta[1];
const cientifico=fruta[2];
return {
id:"site"+(index+1),
titulo:
`${emoji} ${nome} — Tudo sobre ${nome.split("/")[0].trim()}`,
descricao:
`Tudo sobre ${nome}, nome científico, como plantar, informações e tamanhos.`,
palavras:
`${nome} ${cientifico}
fruta frutas
tudo sobre
plantar plantio cultivo
tamanho tamanhos
pequena médio média grande
sementes muda árvore
brasil brasileira`
};
});
/* =========================================================
MOSTRAR RESULTADOS
========================================================= */
function mostrarResultados(lista,consulta=""){
const area=document.getElementById("resultados");
if(lista.length===0){
area.innerHTML=`
<div class="nenhum">
😕 Nenhum resultado encontrado para
<b>"${consulta}"</b>.
</div>
`;
return;
}
area.innerHTML=`
<div class="contador">
Aproximadamente ${lista.length} resultado(s)
</div>
${lista.map(site=>`
<div class="resultado"
onclick="abrirSite('${site.id}')">
<div class="url">
frutas.google.local/${site.id}
</div>
<h2>${site.titulo}</h2>
<p>${site.descricao}</p>
</div>
`).join("")}
`;
}
/* =========================================================
BUSCA POR RELEVÂNCIA
========================================================= */
function pesquisar(){
const texto=
document.getElementById("pesquisa")
.value
.trim();
if(!texto){
mostrarResultados(sites);
return;
}
const consulta=normalizar(texto);
const palavras=consulta
.split(/\s+/)
.filter(p=>p.length>0);
const resultados=sites.map((site,index)=>{
const titulo=
normalizar(site.titulo);
const descricao=
normalizar(site.descricao);
const base=
normalizar(
site.titulo+
" "+
site.descricao+
" "+
site.palavras
);
let score=0;
palavras.forEach(palavra=>{
/* palavra encontrada em qualquer parte */
if(base.includes(palavra)){
score+=1;
}
/* título recebe muito mais peso */
if(titulo.includes(palavra)){
score+=8;
}
/* descrição recebe peso intermediário */
if(descricao.includes(palavra)){
score+=3;
}
});
/* frase completa */
if(base.includes(consulta)){
score+=10;
}
/* nome exato */
const nomeNormalizado=
normalizar(frutas[index][1]);
if(
consulta===nomeNormalizado ||
consulta.includes(nomeNormalizado)
){
score+=20;
}
return {
...site,
score,
posicaoOriginal:index
};
})
.filter(site=>site.score>0)
.sort((a,b)=>{
if(b.score!==a.score){
return b.score-a.score;
}
return a.posicaoOriginal-
b.posicaoOriginal;
});
mostrarResultados(
resultados,
texto
);
}
/* =========================================================
ABRIR SITE
========================================================= */
function abrirSite(id){
document.getElementById("googlePage")
.style.display="none";
document
.querySelectorAll(".site")
.forEach(site=>{
site.style.display="none";
});
const site=
document.getElementById(id);
if(site){
site.style.display="block";
window.scrollTo({
top:0,
behavior:"instant"
});
}
}
/* =========================================================
VOLTAR
========================================================= */
function voltar(){
document
.querySelectorAll(".site")
.forEach(site=>{
site.style.display="none";
});
document.getElementById("googlePage")
.style.display="flex";
window.scrollTo({
top:0,
behavior:"instant"
});
}
/* =========================================================
ENTER
========================================================= */
function tecla(event){
if(event.key==="Enter"){
pesquisar();
}
}
/* =========================================================
ESTOU COM SORTE
========================================================= */
function sorte(){
const numero=
Math.floor(
Math.random()*sites.length
);
abrirSite(
sites[numero].id
);
}
/* =========================================================
INICIALIZAÇÃO
========================================================= */
criarSites();
/* Mostra todos os 80 ao abrir */
mostrarResultados(sites);
</script> </body>
</html>Game Source: Google Frutas — 80 Sites
Creator: MegaFlare51
Libraries: none
Complexity: complex (965 lines, 20.8 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: google-frutas-80-sites-megaflare51" to link back to the original. Then publish at arcadelab.ai/publish.