Tienda modelo en html
- samuel gaitan
- 16 abr
- 2 Min. de lectura
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Tienda de Figuras Geométricas</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
<header class="bg-blue-600 p-4 text-white text-center text-xl font-bold">
Tienda de Figuras Geométricas
</header>
<div class="container mx-auto p-4 grid grid-cols-1 md:grid-cols-3 gap-4">
<!-- Producto 1: Cubo -->
<div class="bg-white p-4 rounded-lg shadow-lg">
<div id="producto3D-cubo" class="w-full h-48"></div>
<h2 class="text-lg font-bold mt-2">Cubo</h2>
<p class="text-gray-600">Figura geométrica cúbica.</p>
<button onclick="agregarAlCarrito('Cubo')" class="block mt-2 bg-green-500 text-white text-center py-2 rounded">Agregar al carrito</button>
</div>
<!-- Producto 2: Esfera -->
<div class="bg-white p-4 rounded-lg shadow-lg">
<div id="producto3D-esfera" class="w-full h-48"></div>
<h2 class="text-lg font-bold mt-2">Esfera</h2>
<p class="text-gray-600">Figura geométrica esférica.</p>
<button onclick="agregarAlCarrito('Esfera')" class="block mt-2 bg-green-500 text-white text-center py-2 rounded">Agregar al carrito</button>
</div>
</div>
<div class="container mx-auto p-4 mt-4 bg-white rounded-lg shadow-lg">
<h2 class="text-lg font-bold">Carrito de Compras</h2>
<ul id="carrito" class="text-gray-600"></ul>
<p id="contador" class="text-gray-800 font-bold">Total de productos: 0</p>
</div>
<script>
let carrito = {};
function agregarAlCarrito(producto) {
carrito[producto] = (carrito[producto] || 0) + 1;
actualizarCarrito();
}
function actualizarCarrito() {
const carritoLista = document.getElementById("carrito");
carritoLista.innerHTML = "";
let total = 0;
for (const producto in carrito) {
total += carrito[producto];
const item = document.createElement("li");
item.textContent = `${producto}: ${carrito[producto]}`;
carritoLista.appendChild(item);
}
document.getElementById("contador").textContent = `Total de productos: ${total}`;
}
function crearModelo3D(id, geometria, color) {
const container = document.getElementById(id);
const width = container.clientWidth;
const height = container.clientHeight;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(width, height);
container.appendChild(renderer.domElement);
const material = new THREE.MeshNormalMaterial({ color, wireframe: false });
const figura = new THREE.Mesh(geometria, material);
scene.add(figura);
camera.position.z = 2;
function animate() {
requestAnimationFrame(animate);
figura.rotation.x += 0.01;
figura.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
}
// Crear figuras 3D
crearModelo3D("producto3D-cubo", new THREE.BoxGeometry(1, 1, 1), 0xff0000);
crearModelo3D("producto3D-esfera", new THREE.SphereGeometry(0.7, 32, 32), 0x0000ff);
</script>
</body>
</html>
Comentarios