JUAN CARLOS ARCADIPANE
Pregunta<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Calculador de Peso</title> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <h1 class="h-1 mt-5 pt-5" >Tu peso en otro planeta</h1> <p>en la tierra pesas menos que en marte o jupiter</p> <button type="button" class="btn btn-outline-primary">Peso Final</button> <button type="button" class="btn btn-outline-danger"> <script> var g_tierra = 9.8; var g_marte = 3.7; var g_jupiter = 24.8; var peso = 90; var peso_final; peso_final = peso * g_marte / g_tierra; peso_final = parseInt(peso_final); document.write(peso_final); </script> </body> </html>
- Registrate gratis y probá creando 2 canciones
- Usá nuestro editor para letras
Eduin Ruiz
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Animación simplificada</title>
<style>
body {
margin: 0;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
/* Contenedor principal */
.container {
position: .container {
position: relative;
width: 400px;
height: 600px;
}
/* Imagen fija */
.image {
width: 100%;
height: 100%;
background-image: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.1\&auto=format\&fit=crop\&w=800\&q=80'); /* Cambia por tu imagen */
background-size: cover;
background-position: center;
border-radius: 20px;
opacity: 0;
animation: fadeIn 2s forwards;
}
/* Mano y celular - aparece después */
.hand-phone {
position: absolute;
bottom: 10%;
right: 10%;
width: 150px;
height: 300px;
opacity: 0;
animation: fadeIn 2s 2s forwards; /* aparece después */
}
/* Mano y celular simple: solo un rectángulo con borde */
.hand {
width: 100px;
height: 150px;
background: #ffe0b2;
border-radius: 20px;
position: absolute;
bottom: 0;
right: 25px;
}
.phone {
width: 60px;
height: 120px;
background: #222;
border-radius: 10px;
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
}
/* Pantalla del celular con la foto */
.screen {
width: 40px;
height: 80px;
background-image: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.1\&auto=format\&fit=crop\&w=800\&q=80'); /* misma imagen */
background-size: cover;
background-position: center;
margin: 10px auto;
border-radius: 5px;
}
/* Ojo con reflejo (simulado) */
.eye {
position: absolute;
top: 30%;
left: 20%;
width: 80px;
height: 80px;
background: transparent;
transform: translate(-50%, -50%);
}
/* Pupila con reflejo */
.pupil {
width: 20px;
height: 20px;
background: black;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Brillo en pupila para reflejo */
.reflection {
width: 8px;
height: 8px;
background: white;
tion: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Brillo en pupila para reflejo */
.reflection {
width: 8px;
height: 8px;
background: white;
border-radius: 50%;
position: absolute;
top: 20%;
left: 70%;
}
/* Animaciones */
@keyframes fadeIn {
to {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="container">
<!-- Imagen fija -->
<div class="image"></div>
<!-- Mano con celular -->
<div class="hand-phone">
<div class="hand"></div>
<div class="phone">
<div class="screen"></div>
</div>
</div>
<!-- Ojo con reflejo -->
<div class="eye">
<div class="pupil">
<div class="reflection"></div>
</div>
</div>
</div>
</body>
</html>
adrian porucznik
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CreaTuHit 🎵</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
margin: 0;
padding: 0;
background: #111;
color: #fff;
line-height: 1.6;
}
header {
background: linear-gradient(90deg, #ff0033, #ff8800);
padding: 20px;
text-align: center;
}
header h1 {
margin: 0;
font-size: 2.5em;
}
.container {
padding: 30px 20px;
max-width: 900px;
margin: auto;
}
h2 {
color: #ffcc00;
margin-top: 40px;
}
ul {
padding-left: 20px;
}
li {
margin-bottom: 10px;
}
.planes {
background: #222;
padding: 20px;
border-radius: 10px;
margin-top: 30px;
}
.plan {
margin-bottom: 15px;
}
footer {
background: #000;
text-align: center;
padding: 20px;
margin-top: 50px;
font-size: 0.9em;
color: #aaa;
}
</style>
</head>
<body>
<header>
<h2>🎵 CreaTuHit</h2>
<p>¡Creá música con ritmos de Argentina y el mundo!</p>
</header>
<div class="container">
<section>
<h3>🎧 ¿Cómo funciona?</h3>
<ul>
<li>🎤 Registrate gratis y empezá a crear</li>
<li>🎶 Probá con <strong>2 canciones gratis</strong></li>
<li>🛠️ Usá nuestro editor para letras, pistas y bases musicales</li>
<li>🎼 Elegí ritmos, instrumentos y estilos únicos</li>
<li>🚀 Subí tus temas y compartilos con la comunidad</li>
</ul>
</section>
<section class="planes">
<h3>💎 Planes</h3>
<div class="plan">💰 <strong>Plata</strong>: 10 canciones por solo <strong>$5 USD</strong></div>
<div class="plan">💎 <strong>Diamante</strong>: 20 canciones y beneficios exclusivos por <strong>$15 USD</strong></div>
<div class="plan">👑 <strong>Diamante PRO</strong>: ¡creá sin límites y con calidad de estudio!</div>
</section>
<section>
<h3>🎬 ¡Crea. Experimentá. Subí tu Hit!</h3>
</section>
</div>
<footer>
© 2025 CreaTuHit. Todos los derechos reservados.
</footer>
</body>
</html>
adrian porucznik
CreaTuHit 🎵
¡Creá música con ritmos de Argentina y el mundo!
🎧 ¿Cómo funciona?
Leonardo Sanchez
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <title>Panda Disparando Amor</title> <style> body { margin: 0; background: #fff0f5; overflow: hidden; font-family: Arial, sans-serif; }
.container { position: relative; width: 100vw; height: 100vh; }
/* Panda más pequeño al fondo */ .panda { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-size: 12em; user-select: none; }
/* Dedo animado disparando en dirección diagonal */ .finger { position: absolute; bottom: 140px; left: 50%; transform: translateX(-50%) rotate(-40deg); font-size: 2.8em; cursor: pointer; animation: wiggle 1.4s infinite ease-in-out; transform-origin: bottom right; }
@keyframes wiggle { 0% { transform: translateX(-50%) rotate(-40deg); } 50% { transform: translateX(-50%) rotate(-30deg); } 100% { transform: translateX(-50%) rotate(-40deg); } }
/* Corazones que salen disparados desde el dedo */ .heart { position: absolute; color: red; font-size: 1em; animation: fly 3s linear forwards; }
@keyframes fly { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(80px, -400px) scale(1.5); } }
/* Corazón gigante en la parte superior */ .big-heart { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); font-size: 20em; color: #ff1a57; opacity: 0; animation: pop 1s ease-out forwards; }
@keyframes pop { 0% { transform: translateX(-50%) scale(0.4); opacity: 0; } 50% { transform: translateX(-50%) scale(1.2); opacity: 1; } 100% { transform: translateX(-50%) scale(1); opacity: 0; } }
/* "TE AMO" animado con corazones */ .text-display { position: absolute; top: 10%; width: 100%; text-align: center; font-size: 6em; pointer-events: none; display: flex; justify-content: center; gap: 10px; }
.letter { opacity: 0; animation: appear 0.6s forwards; color: red; }
@keyframes appear { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1); opacity: 1; } } </style> </head> <body> <div class="container"> <div class="text-display" id="teAmoText"></div> <div class="panda">🐼</div> <div class="finger" onclick="shoot()">👉</div> <div id="bigHeartContainer"></div> </div>
<script> const container = document.querySelector(".container"); const teAmoText = document.getElementById("teAmoText");
function displayTeAmo() { const text = "TE AMO"; teAmoText.innerHTML = ""; [...text].forEach((char, i) => { const span = document.createElement("span"); span.className = "letter"; span.textContent = char === " " ? "\u00A0" : "❤️"; span.style.animationDelay =
${i \* 0.2}sfunction shoot() { // Corazones voladores for (let i = 0; i < 8; i++) { const heart = document.createElement("div"); heart.className = "heart"; heart.textContent = "❤️"; heart.style.left =
calc(50% + ${Math.random() \* 60 - 30}px)// Corazón grande const bigHeart = document.createElement("div"); bigHeart.className = "big-heart"; bigHeart.textContent = "❤️"; document.getElementById("bigHeartContainer").appendChild(bigHeart); setTimeout(() => bigHeart.remove(), 1200);
// Frase TE AMO (animada con corazones) displayTeAmo(); }
// Inicial displayTeAmo(); </script> </body> </html>
Heidi Herrera
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aurum & Blanc - Joyería de Lujo</title>
<style>
/* Estilos generales */
body {
font-family: 'Cormorant Garamond', serif;
margin: 0;
padding: 0;
background-color: #fffaf5;
color: #3a3226;
overflow-x: hidden;
}
.container {
width: 50%;
height: 11in;
float: left;
position: relative;
box-sizing: border-box;
padding: 30px;
background: linear-gradient(to bottom, #ffffff 0%, #fff9f0 100%);
border-right: 1px solid #f0e6d8;
}
/* Encabezado */
header {
text-align: center;
margin-bottom: 40px;
position: relative;
}
.logo {
font-size: 3.2rem;
font-weight: 700;
color: #c0a062;
text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
letter-spacing: 1px;
margin-bottom: 5px;
}
.logo span {
color: #3a3226;
font-weight: 300;
}
.slogan {
font-size: 0.85rem;
letter-spacing: 4px;
text-transform: uppercase;
color: #a09070;
margin-top: 5px;
font-style: italic;
}
/* Galería de joyas */
.gallery {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 30px;
}
.jewel {
position: relative;
cursor: pointer;
transition: all 0.4s ease;
overflow: hidden;
border-radius: 5px;
}
.jewel:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(192, 160, 98, 0.2);
}
.jewel-img {
width: 100%;
height: 140px;
background-color: #f9f5ee;
object-fit: cover;
border: 1px solid #f0e6d8;
transition: transform 0.5s ease;
}
.jewel:hover .jewel-img {
transform: scale(1.05);
}
.jewel-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
padding: 15px 10px;
color: white;
}
.jewel-name {
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 3px;
letter-spacing: 0.5px;
}
.jewel-price {
font-size: 0.8rem;
color: #c0a062;
font-weight: 500;
}
/* Llamado a la acción */
.cta {
position: absolute;
bottom: 40px;
left: 0;
right: 0;
text-align: center;
padding: 0 30px;
}
.cta-button {
background: linear-gradient(to right, #c0a062 0%, #d4b87a 100%);
color: white;
border: none;
padding: 14px 35px;
font-size: 0.9rem;
border-radius: 30px;
cursor: pointer;
transition: all 0.4s;
letter-spacing: 1.5px;
box-shadow: 0 4px 15px rgba(192, 160, 98, 0.4);
text-transform: uppercase;
font-weight: 500;
}
.cta-button:hover {
background: linear-gradient(to right, #b59558 0%, #c8ae70 100%);
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(192, 160, 98, 0.5);
}
/* Elementos decorativos */
.gold-line {
height: 1px;
background: linear-gradient(to right, transparent, #c0a062, transparent);
margin: 25px auto;
width: 80%;
}
/* Modal */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.85);
z-index: 1000;
justify-content: center;
align-items: center;
}
.modal-content {
background-color: #fffaf5;
padding: 40px;
border-radius: 5px;
max-width: 500px;
text-align: center;
position: relative;
border: 1px solid #f0e6d8;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.close-modal {
position: absolute;
top: 15px;
right: 20px;
font-size: 1.8rem;
cursor: pointer;
color: #c0a062;
transition: color 0.3s;
}
.close-modal:hover {
color: #a58a4d;
}
/* Responsivo */
@media (max-width: 768px) {
.container {
width: 100%;
float: none;
}
.logo {
font-size: 2.5rem;
}
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600;700\&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<div class="logo">AURUM<span> & BLANC</span></div>
<div class="slogan">Elegancia atemporal en oro y diamantes</div>
<div class="gold-line"></div>
</header>
<div class="gallery">
<div class="jewel" onclick="openModal('Collar Diamante Étoile', '$2,450')">
<img src="https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?ixlib=rb-1.2.1\&auto=format\&fit=crop\&w=500\&q=80" alt="Collar Diamante Étoile" class="jewel-img">
<div class="jewel-overlay">
<div class="jewel-name">Collar Diamante Étoile</div>
<div class="jewel-price">$2,450</div>
</div>
</div>
<div class="jewel" onclick="openModal('Anillo Oro Solaire', '$1,890')">
<img src="https://images.unsplash.com/photo-1605100804763-247f67b3557e?ixlib=rb-1.2.1\&auto=format\&fit=crop\&w=500\&q=80" alt="Anillo Oro Solaire" class="jewel-img">
<div class="jewel-overlay">
<div class="jewel-name">Anillo Oro Solaire</div>
<div class="jewel-price">$1,890</div>
</div>
</div>
<div class="jewel" onclick="openModal('Pendientes Perla Lune', '$1,650')">
<img src="https://images.unsplash.com/photo-1602173574767-37ac01994b2a?ixlib=rb-1.2.1\&auto=format\&fit=crop\&w=500\&q=80" alt="Pendientes Perla Lune" class="jewel-img">
<div class="jewel-overlay">
<div class="jewel-name">Pendientes Perla Lune</div>
<div class="jewel-price">$1,650</div>
</div>
</div>
<div class="jewel" onclick="openModal('Brazalete Platino Luxe', '$3,200')">
<img src="https://images.unsplash.com/photo-1611591437281-460bfbe1220a?ixlib=rb-1.2.1\&auto=format\&fit=crop\&w=500\&q=80" alt="Brazalete Platino Luxe" class="jewel-img">
<div class="jewel-overlay">
<div class="jewel-name">Brazalete Platino Luxe</div>
<div class="jewel-price">$3,200</div>
</div>
</div>
</div>
<div class="cta">
<button class="cta-button">Reserve una cita privada</button>
</div>
</div>
<!-- Modal -->
<div class="modal" id="productModal">
<div class="modal-content">
<span class="close-modal" onclick="closeModal()">×</span>
<h2 id="modalTitle" style="color: #c0a062; margin-bottom: 5px;"></h3>
<p id="modalPrice" style="font-size: 1.2rem; margin-bottom: 20px;"></p>
<p style="line-height: 1.6; margin-bottom: 25px;">Cada pieza Aurum & Blanc es creada con los más altos estándares de calidad, combinando oro de 18k con diamantes de conflicto cero.</p>
<button class="cta-button" style="margin-top: 10px;">Consulta personalizada</button>
</div>
</div>
<script>
// Función para abrir el modal
function openModal(name, price) {
document.getElementById('modalTitle').textContent = name;
document.getElementById('modalPrice').textContent = price;
document.getElementById('productModal').style.display = 'flex';
document.body.style.overflow = 'hidden';
}
// Función para cerrar el modal
function closeModal() {
document.getElementById('productModal').style.display = 'none';
document.body.style.overflow = 'auto';
}
// Cerrar modal al hacer clic fuera del contenido
window.onclick = function(event) {
const modal = document.getElementById('productModal');
if (event.target === modal) {
closeModal();
}
}
// Efecto de scroll suave para los botones
document.querySelector('.cta-button').addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// Efecto de parpadeo sutil en el logo
const logo = document.querySelector('.logo');
setInterval(() => {
logo.style.textShadow = '0 0 8px rgba(192, 160, 98, 0.3)';
setTimeout(() => {
logo.style.textShadow = '1px 1px 3px rgba(0,0,0,0.1)';
}, 500);
}, 3000);
</script>
</body>
</html>
Heidi Herrera
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Aurum & Blanc Joyería</title>
<style>
body {
margin: 0;
padding: 0;
background: linear-gradient(to bottom, #ffffff, #fdf5e6);
font-family: 'Georgia', serif;
color: #a67c00; /* Dorado */
}
.portada {
width: 792px; /* 1/2 tabloide horizontal */
height: 612px; /* 1/2 tabloide vertical */
margin: 0 auto;
border: 5px solid #a67c00;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, #fffaf0, #ffffff);
}
.titulo {
font-size: 48px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 4px;
text-align: center;
margin-bottom: 20px;
}
.subtitulo {
font-size: 24px;
text-align: center;
margin-bottom: 40px;
color: #d4af37;
}
.decoracion {
width: 100px;
height: 4px;
background-color: #d4af37;
margin: 10px 0;
}
.eslogan {
font-size: 20px;
font-style: italic;
text-align: center;
color: #a67c00;
}
</style>
</head>
<body>
<div class="portada">
<div class="titulo">Aurum & Blanc</div>
<div class="subtitulo">Joyería de Lujo</div>
<div class="decoracion"></div>
<div class="eslogan">"La elegancia que perdura en el tiempo"</div>
</div>
</body>
</html>
Daniel Flores
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>danfcutz - Barbería Profesional</title>
<style>
body {
margin: 0;
font-family: 'Segoe UI', sans-serif;
background: #111;
color: #fff;
}
header {
background: #000;
text-align: center;
padding: 2rem 1rem;
}
header h1 {
font-size: 2.5rem;
color: #0f0;
margin-bottom: 0.5rem;
}
header p {
font-size: 1.1rem;
color: #ccc;
}
section {
padding: 2rem 1rem;
max-width: 800px;
margin: auto;
}
.servicios {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.servicio {
background: #222;
padding: 1rem;
border-radius: 10px;
border: 1px solid #333;
}
.servicio h3 {
color: #0f0;
}
.whatsapp-btn {
display: block;
margin: 3rem auto;
padding: 1rem 2rem;
background: #25D366;
color: #000;
text-align: center;
font-size: 1.2rem;
border-radius: 8px;
text-decoration: none;
transition: background 0.3s ease;
max-width: 300px;
}
.whatsapp-btn:hover {
background: #1ebc5b;
}
footer {
text-align: center;
padding: 2rem 1rem;
font-size: 0.9rem;
color: #555;
}
@media (max-width: 600px) {
.servicios {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<header>
<h2>danfcutz</h2>
<p>Estilo, precisión y cortes con personalidad. Agenda tu cita ahora.</p>
</header>
<section>
<h3>Servicios</h3>
<div class="servicios">
<div class="servicio">
<h4>Corte Clásico</h4>
<p>Estilo limpio y profesional para cualquier ocasión.</p>
</div>
<div class="servicio">
<h4>Fade / Degradado</h4>
<p>Transiciones suaves para un look moderno.</p>
</div>
<div class="servicio">
<h4>Barba & Afeitado</h4>
<p>Recorte detallado o afeitado al ras con toalla caliente.</p>
</div>
<div class="servicio">
<h4>Diseños</h4>
<p>Rayas, figuras y arte urbano en el corte.</p>
</div>
</div>
<a class="whatsapp-btn" href="https://wa.me/52TU\_NUMERO" target="_blank">
📲 Agendar cita por WhatsApp
</a>
</section>
<footer>
© 2025 danfcutz. Todos los derechos reservados.
</footer>
</body>
</html>
Marcel Rodríguez
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Simulador de Cubos</title>
<style>
body {
font-family: sans-serif; text-align: center;
background: #f8f8f8;
}
.grid {
display: grid;
grid-template-columns: 100px 100px;
gap: 10px;
margin: 20px auto;
width: max-content;
}
.cube {
width: 100px; height: 100px;
background: #d0eaff;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
border: 2px solid #0077cc;
border-radius: 12px;
flex-direction: column;
}
.direction {
font-weight: bold;
font-size: 18px;
}
button {
margin: 6px;
padding: 10px 20px;
font-size: 16px;
}
</style>
</head>
<body>
<h2>Simulador de Cubos 🧊</h2>
<p>Haz clic en un cubo para girarlo con sus vecinos. Objetivo: todos mirando al <strong>NORTE</strong>.</p>
<div class="grid">
<div class="cube" id="Q1">Q1<br><span class="direction"></span></div>
<div class="cube" id="Q2">Q2<br><span class="direction"></span></div>
<div class="cube" id="C">C<br>🧭<br><strong>NORTE</strong></div>
<div class="cube" id="Q4">Q4<br><span class="direction"></span></div>
<div class="cube" id="Q3">Q3<br><span class="direction"></span></div>
</div>
<div>
<button onclick="touch('Q1')">Tocar Q1</button>
<button onclick="touch('Q2')">Tocar Q2</button>
<button onclick="touch('Q3')">Tocar Q3</button>
<button onclick="touch('Q4')">Tocar Q4</button>
<button onclick="reset()">Reiniciar</button>
</div>
<h3 id="status"></h4>
<script>
const directions = ['NORTE', 'ESTE', 'SUR', 'OESTE'];
// Estado inicial personalizado
let cubeStates = {
Q1: 3, // Oeste
Q2: 2, // Sur
Q3: 0, // Norte
Q4: 1 // Este
};
const neighbors = {
Q1: ['Q1', 'Q2', 'Q3'],
Q2: ['Q2', 'Q1', 'Q4'],
Q3: ['Q3', 'Q1', 'Q4'],
Q4: ['Q4', 'Q2', 'Q3']
};
function updateDisplay() {
for (let id of ['Q1', 'Q2', 'Q3', 'Q4']) {
document.querySelector(
#${id} .direction}
checkWin();
}
function touch(id) {
for (let cube of neighbors[id]) {
cubeStates[cube] = (cubeStates[cube] + 1) % 4;
}
updateDisplay();
}
function reset() {
cubeStates = {
Q1: 3, // Oeste
Q2: 2, // Sur
Q3: 0, // Norte
Q4: 1 // Este
};
updateDisplay();
}
function checkWin() {
const allNorth = Object.values(cubeStates).every(dir => dir === 0);
document.getElementById("status").textContent = allNorth
? "🎉 ¡Ganaste! Todos los cubos miran al NORTE."
: "📌 Alinea todos los cubos con el centro.";
}
updateDisplay();
</script>
</body>
</html>
Lucia Ramos
<!DOCTYPE html><html lang="es"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Generador de Imágenes</title><script src="https://cdn.tailwindcss.com">\</script><style>body {font-family: 'Inter', sans-serif;background-color: #f0f0f0;display: flex;justify-content: center;align-items: center;min-height: 100vh;margin: 0;}.container {background-color: #ffffff;padding: 2rem;border-radius: 1rem;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);text-align: center;max-width: 90%;width: 500px;}img {max-width: 100%;height: auto;border-radius: 0.5rem;margin-top: 1.5rem;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);}.loader {border: 4px solid #f3f3f3;border-top: 4px solid #3498db;border-radius: 50%;width: 30px;height: 30px;animation: spin 1s linear infinite;margin: 2rem auto;}@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}</style></head><body><div class="container"><h1 class="text-2xl font-bold text-gray-800 mb-4">Imagen Generada</h2><div id="loading" class="loader"></div><img id="generatedImage" src="" alt="Imagen generada" class="hidden"><p id="errorText" class="text-red-500 mt-4 hidden">Error al generar la imagen. Por favor, inténtalo de nuevo.</p></div>
<script>document.addEventListener('DOMContentLoaded', async () => {const loadingDiv = document.getElementById('loading');const generatedImage = document.getElementById('generatedImage');const errorText = document.getElementById('errorText');
try {// Prompt para la generación de la imagenconst prompt = "un dibujo en una libreta de una chica morena con gafas y mirada profunda , la chica es adolescente y tiene un lunar a la derecha arriba del labio , es pequeño";
// Payload para la API de generación de imágenesconst payload = {instances: { prompt: prompt },parameters: { "sampleCount": 1 }};
// Clave de API (vacía, se gestionará automáticamente en Canvas)const apiKey = "";const apiUrl =
https://generativelanguage.googleapis.com/v1beta/models/imagen-3.0-generate-002:predict?key=${apiKey}// Realizar la solicitud a la APIconst response = await fetch(apiUrl, {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify(payload)});
const result = await response.json();
// Verificar la estructura de la respuesta y mostrar la imagenif (result.predictions && result.predictions.length > 0 && result.predictions[0].bytesBase64Encoded) {const imageUrl =
data:image/png;base64,${result.predictions\[0].bytesBase64Encoded}Frank García
!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Llueve Amor</title> <style> body { margin: 0; background: black; overflow: hidden; cursor: default; }
canvas { display: block; position: absolute; top: 0; left: 0; z-index: 1; }
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.center-message { font-family: 'Courier New', monospace; color: #ff69b4; font-size: 3rem; text-align: center; opacity: 0.5; } </style> </head> <body>
<canvas id="canvas"></canvas>
<div class="overlay"> <div class="center-message">SELENE 💖</div> </div>
<script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth; canvas.height = window.innerHeight;
const text = "TE QUIERO"; const fontSize = 16; const columns = Math.floor(canvas.width / (fontSize * 4)); const drops = new Array(columns).fill(1);
ctx.font = fontSize + "px monospace";
function draw() { ctx.fillStyle = "rgba(0, 0, 0, 0.05)"; ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#ff69b4"; for (let i = 0; i < drops.length; i++) { const x = i * fontSize * 4; const y = drops[i] * fontSize; ctx.fillText(text, x, y);
if (y > canvas.height && Math.random() > 0.975) { drops[i] = 0; }
drops[i]++; } }
setInterval(draw, 50);
window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); </script>
</body> </html> """
# Guardar archivo file_path = "/mnt/data/llueve_amor_selene_te_quiero.html" with open(file_path, "w", encoding="utf-8") as f: f.write(html_content_selene_quiero)
