<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flores e Letras Poéticas</title>
<style>
body {
margin: 0;
height: 100vh;
background: linear-gradient(to top, #ffe6f0, #fff);
overflow: hidden;
font-family: 'Arial', sans-serif;
position: relative;
}
/* Container mágico para flores e palavras */
.flowers, .words {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
}
/* Cada “flor” ou “palavra” é criada com pseudo-elemento para gerar múltiplas instâncias */
.flower::before, .word::before {
content: attr(data-symbol);
position: absolute;
font-size: var(--size);
left: var(--x);
bottom: -2rem;
color: var(--color, #ff69b4);
animation: float var(--duration) linear infinite;
opacity: 0;
}
/* Animação inovadora: subida + balanço lateral + crescimento leve */
@keyframes float {
0% {
transform: translateY(0) translateX(0) scale(0.5) rotate(0deg);
opacity: 0;
}
20% {
opacity: 1;
}
50% {
transform: translateY(-50vh) translateX(20px) scale(1.2) rotate(180deg);
}
100% {
transform: translateY(-110vh) translateX(-20px) scale(1) rotate(360deg);
opacity: 0;
}
}
/* Exemplos de flores com variações de tamanho, posição e duração */
.flower {
--size: 2rem;
--x: 5vw;
--duration: 12s;
--color: #ff69b4;
}
.flower:nth-child(2) { --size: 2.5rem; --x: 20vw; --duration: 15s; --color: #ff1493; }
.flower:nth-child(3) { --size: 2.2rem; --x: 35vw; --duration: 10s; --color: #db7093; }
.flower:nth-child(4) { --size: 3rem; --x: 50vw; --duration: 18s; --color: #ff85c0; }
.flower:nth-child(5) { --size: 2.8rem; --x: 70vw; --duration: 14s; --color: #ffb6c1; }
/* Palavras com cores, tamanhos e posições diferentes */
.word {
--size: 1.5rem;
--x: 10vw;
--duration: 16s;
--color: #ff69b4;
}
.word:nth-child(2) { --size: 2rem; --x: 30vw; --duration: 18s; --color: #ff1493; }
.word:nth-child(3) { --size: 1.8rem; --x: 50vw; --duration: 12s; --color: #db7093; }
.word:nth-child(4) { --size: 2rem; --x: 70vw; --duration: 14s; --color: #ff85c0; }
.word:nth-child(5) { --size: 1.9rem; --x: 85vw; --duration: 20s; --color: #ffb6c1; }
</style>
</head>
<body>
<div class="flowers">
<div class="flower" data-symbol="🌷"></div>
<div class="flower" data-symbol="🌸"></div>
<div class="flower" data-symbol="🌹"></div>
<div class="flower" data-symbol="🌻"></div>
<div class="flower" data-symbol="🍀"></div>
</div>
<div class="words">
<div class="word" data-symbol="amor"></div>
<div class="word" data-symbol="jesus"></div>
<div class="word" data-symbol="poesia"></div>
<div class="word" data-symbol="🌷"></div>
<div class="word" data-symbol="🌸"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cegonha OS Engine 2026</title>
<style>
body {
font-family: Arial, sans-serif;
background: #fafafa;
}
.cegonha-output {
background: #f0f0f0;
padding: 12px;
margin: 8px 0;
border-left: 4px solid #8B008B; /* Roxo da Cegonha */
font-family: monospace;
white-space: pre-wrap;
color: #8B008B;
}
h1 { text-align:center; color:#8B008B; }
h3 { text-align:center; color:#00008B; }
div[id^="conteudo"] {
padding: 15px;
margin: auto;
max-width: 600px;
}
</style>
</head>
<body>
<h1>Jogar há poesia.</h1>
<div id="conteudo">
<h3>Poesia da infância</h3>
</div>
<div id="conteudo1">
<cegonha>
cegonha("Como foi a tua infância?<br>")
cegonha("Simples e feliz<br>")
ano = 1989
idade = 2026 - ano
cegonha("Idade:")
cegonha(idade)
cegonha("anos")
</cegonha>
</div>
<div id="conteudo4">
<cegonha>
cegonha("vamos criar amor ")
cegonha("vamos ser felizes<br>")
a = (23 * 2 * 45)
cegonha(a)
cegonha(" anos<br>")
a = 23*34/8
cegonha("resultado: ")
cegonha(a)
cegonha("<br>seja feliz por favor<br>")
cegonha("a cegonha tem: ")
# CONTA DIRETA DENTRO DA FUNÇÃO:
cegonha(2026 - 1964)
cegonha(" anos")
</cegonha>
<p><iframe width="569" height="428" src="https://www.youtube.com/embed/8tE0GjSQpes?list=RD8tE0GjSQpes" title="ABBA - The Winner Takes It All (1980)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<cegonha>
cegonha(23+23/2)
cegonha("seja feliz por favor")
</cegonha>
</div>
<script>
/**
* MOTOR CEGONHA 2026 - Versão Fortalecida
*/
function executarCegonhaEngine(html) {
return html.replace(/<cegonha>([\s\S]*?)<\/cegonha>/g, function (_, codigo) {
const linhas = codigo.split(/\r?\n/);
const vars = {};
let saida = "";
// Função interna para processar substituições de variáveis em expressões
function processarExpressao(expr) {
let resultado = expr;
// Substituir variáveis conhecidas por seus valores
for (let v in vars) {
const regex = new RegExp("\\b" + v + "\\b", "g");
resultado = resultado.replace(regex, vars[v]);
}
return resultado;
}
for (let linha of linhas) {
linha = linha.trim();
if (linha === "" || linha.startsWith("#")) continue;
// 1. ATRIBUIÇÃO: var = conta
if (/^[a-zA-Z_]\w*\s*=/.test(linha)) {
let partes = linha.split("=");
let nome = partes.shift().trim();
let expr = processarExpressao(partes.join("=").trim());
try {
// Executa a conta matemática real
vars[nome] = new Function("return (" + expr + ")")();
} catch {
return `<div class="cegonha-output">[ERRO AO CALCULAR: ${nome}]</div>`;
}
continue;
}
// 2. FUNÇÃO CEGONHA(): Aceita texto ou contas diretas
if (/^cegonha\s*\(.+\)$/.test(linha)) {
let conteudo = linha.replace(/^cegonha\s*\(|\)$/g, "").trim();
// Caso A: É uma string literal "texto"
if ((conteudo.startsWith('"') && conteudo.endsWith('"')) ||
(conteudo.startsWith("'") && conteudo.endsWith("'"))) {
saida += conteudo.slice(1, -1);
}
// Caso B: É uma variável ou uma conta direta (ex: 2026-1964)
else {
let exprFinal = processarExpressao(conteudo);
try {
// O motor tenta calcular o que está dentro do parêntese
saida += new Function("return (" + exprFinal + ")")();
} catch {
saida += "[ERRO NA CONTA]";
}
}
saida += "\n";
continue;
}
return `<div class="cegonha-output">[COMANDO NÃO SUPORTADO: ${linha}]</div>`;
}
return `<div class="cegonha-output">${saida}</div>`;
});
}
window.addEventListener("load", () => {
document.querySelectorAll("div[id^='conteudo']").forEach(div => {
div.innerHTML = executarCegonhaEngine(div.innerHTML);
});
});
</script>
</body>
</html>