magia css

<!DOCTYPE html>

<head>

<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>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<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>

<h3>Poesia da infância</h3>

</div>

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>

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>

cegonha(23+23/2)

cegonha("seja feliz por favor")

</cegonha>

</div>

/**

* 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>