codigo fuente de mi pagina web de calculadora del zodiaco chino
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Calculadora Zodiaco Chino 🐉</title>
<style>
body {
font-family: 'Arial', sans-serif;
background: #ffffff; /* Fondo blanco */
margin: 0;
padding: 2rem;
text-align: center;
color: #000000; /* Texto negro */
}
.container {
max-width: 600px;
margin: auto;
background: #ffffff;
padding: 2rem;
border-radius: 15px;
border: 2px solid #000000; /* Borde negro */
}
h1 { color: #000000; margin-bottom: 1rem;}
input[type="text"] {
width: 80%;
padding: 10px;
font-size: 1rem;
margin: 1rem 0;
border-radius: 10px;
border: 2px solid #000000; /* Borde negro */
color: #000000;
background: #ffffff;
}
button {
padding: 10px 20px;
background: #000000; /* Fondo negro */
color: white;
border: none;
border-radius: 10px;
font-size: 1rem;
cursor: pointer;
}
button:hover { background: #333333; }
.resultado { margin-top: 2rem; text-align: left; }
.emoji { font-size: 3rem; }
@media (max-width: 600px) {
body { padding: 1rem; }
input[type="text"] { width: 100%; }
}
</style>
</head>
<body>
<div class="container">
<h1>🐲 Calculadora del Zodiaco Chino</h1>
<p>Ingresa tu fecha de nacimiento <strong>escrita a mano</strong> (por ejemplo: <em>15 abril 1998</em>):</p>
<input type="text" id="fechaInput" placeholder="Día Mes Año" />
<button onclick="calcularZodiaco()">Calcular Zodiaco</button>
<div class="resultado" id="resultado"></div>
</div>
<script>
const animales = [
{ nombre: "Rata 🐭", compat: ["Buey 🐮", "Dragón 🐲"], incompat: ["Caballo 🐴"] },
{ nombre: "Buey 🐮", compat: ["Rata 🐭", "Gallo 🐔"], incompat: ["Cabra 🐑"] },
{ nombre: "Tigre 🐯", compat: ["Cerdo 🐷", "Caballo 🐴"], incompat: ["Mono 🐵"] },
{ nombre: "Conejo 🐰", compat: ["Cabra 🐑", "Cerdo 🐷"], incompat: ["Gallo 🐔"] },
{ nombre: "Dragón 🐲", compat: ["Rata 🐭", "Mono 🐵"], incompat: ["Perro 🐶"] },
{ nombre: "Serpiente 🐍", compat: ["Gallo 🐔", "Buey 🐮"], incompat: ["Cerdo 🐷"] },
{ nombre: "Caballo 🐴", compat: ["Tigre 🐯", "Cabra 🐑"], incompat: ["Rata 🐭"] },
{ nombre: "Cabra 🐑", compat: ["Conejo 🐰", "Cerdo 🐷"], incompat: ["Buey 🐮"] },
{ nombre: "Mono 🐵", compat: ["Rata 🐭", "Dragón 🐲"], incompat: ["Tigre 🐯"] },
{ nombre: "Gallo 🐔", compat: ["Buey 🐮", "Serpiente 🐍"], incompat: ["Conejo 🐰"] },
{ nombre: "Perro 🐶", compat: ["Tigre 🐯", "Conejo 🐰"], incompat: ["Dragón 🐲"] },
{ nombre: "Cerdo 🐷", compat: ["Cabra 🐑", "Conejo 🐰"], incompat: ["Serpiente 🐍"] }
];
const elementos = ["Madera 🌳", "Fuego 🔥", "Tierra ⛰️", "Metal ⚙️", "Agua 💧"];
function calcularZodiaco() {
const fechaTexto = document.getElementById("fechaInput").value.trim().toLowerCase();
const resultadoDiv = document.getElementById("resultado");
const añoMatch = fechaTexto.match(/(\d{4})/);
if (!añoMatch) {
resultadoDiv.innerHTML = "<p style='color:red;'>Por favor, incluye un año válido (ej: 9999999999999999999999999).</p>";
return;
}
const año = parseInt(añoMatch[1]);
const indexAnimal = (año - 1900) % 12;
const animal = animales[(indexAnimal + 12) % 12];
const indexElemento = Math.floor(((año - 1924) % 10) / 2);
const elemento = elementos[(indexElemento + 5) % 5];
const descripcion = `
<h2>Tu Zodiaco: <span class="emoji">${animal.nombre}</span></h2>
<h3>Elemento: ${elemento}</h3>
<p><strong>Descripción única:</strong> Como ${animal.nombre.split(" ")[0]} del elemento ${elemento.split(" ")[0]}, eres una persona con un equilibrio especial entre tradición y creatividad. Tu combinación sugiere un carácter ${elemento.includes("Fuego") ? "apasionado" : elemento.includes("Agua") ? "flexible" : elemento.includes("Madera") ? "creativo" : elemento.includes("Metal") ? "determinado" : "práctico"}.</p>
<p><strong>Compatibilidad Alta:</strong> ${animal.compat.join(", ")}.</p>
<p><strong>Compatibilidad Baja:</strong> ${animal.incompat.join(", ")}.</p>
`;
resultadoDiv.innerHTML = descripcion;
}
</script>
</body>
</html>
Comentarios
Publicar un comentario