Inversiones Hernández ULTRle> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap" rel="stylesheet"> <style> body{ font-family:Poppins,sans-serif; margin:0; background:#eef1f7; } /* HEADER */ header{ background:#0a0a0a; color:white; padding:22px; text-align:center; font-size:30px; } input{ width:100%; padding:14px; margin-top:14px; border-radius:10px; border:1px solid #ddd; } button{ width:100%; padding:15px; margin-top:18px; border:none; border-radius:12px; background:#111; color:white; font-size:16px; cursor:pointer; transition:0.3s; } button:hover{ opacity:0.8; } /* TIENDA */ #shop{ display:none; padding:30px; } .products{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:28px; } .card{ background:white; border-radius:20px; padding:18px; text-align:center; box-shadow:0 0 18px rgba(0,0,0,0.08); transition:0.4s; } .card:hover{ transform:translateY(-10px); } .card img{ width:100%; height:180px; object-fit:cover; border-radius:15px; } .price{ color:#27ae60; font-size:22px; font-weight:bold; } /* CARRITO FLOTANTE */ #cart{ position:fixed; right:25px; bottom:25px; background:#111; color:white; padding:20px; border-radius:18px; box-shadow:0 0 20px rgba(0,0,0,0.3); } /* WHATSAPP */ #whatsappBtn{ position:fixed; left:25px; bottom:25px; background:#25D366; color:white; padding:20px; border-radius:50%; font-size:26px; text-decoration:none; } /* ADMIN */ #adminPanel{ display:none; padding:35px; } </style> </head> <body> <header> 🛒 Inversiones Hernández ULTRA GOD </header>  <div id="loginBox"> <h2>🔐 Login</h2> <input id="user" placeholder="Usuario"> <input id="pass" type="password" placeholder="Contraseña"> <button onclick="login()">Entrar</button> </div>  <section id="shop"> <h2>🔥 Productos</h2> <input placeholder="🔎 Buscar producto..." onkeyup="searchProduct(this.value)"> <div class="products" id="productList"></div> </section>  <div id="cart"> 🛍️ Carrito: <span id="cartCount">0</span> <br> Total: $<span id="cartTotal">0</span> </div> <a id="whatsappBtn" target="_blank">📞</a>  <div id="adminPanel"> <h2>⚙️ Panel Administrador</h2> <p>Inventario JSON</p> <textarea id="inventoryText" style="width:100%;height:150px"></textarea> <button onclick="saveInventory()">Guardar inventario</button> </div> <script> /* PRODUCTOS */ let products=[ {name:"Producto Premium",price:25,img:"https://via.placeholder.com/300x180"}, {name:"Producto Especial",price:40,img:"https://via.placeholder.com/300x180"}, {name:"Producto Deluxe",price:60,img:"https://via.placeholder.com/300x180"}, {name:"Producto VIP",price:90,img:"https://via.placeholder.com/300x180"} ]; let cart=[]; let total=0; /* LOGIN */ function login(){ let user=document.getElementById("user").value; let pass=document.getElementById("pass").value; if(user==="admin" && pass==="1234"){ document.getElementById("loginBox").style.display="none"; document.getElementById("shop").style.display="block"; document.getElementById("adminPanel").style.display="block"; loadProducts(); }else{ alert("Credenciales incorrectas"); } } /* CARGAR PRODUCTOS */ function loadProducts(){ let list=document.getElementById("productList"); list.innerHTML=""; products.forEach((p,i)=>{ let div=document.createElement("div"); div.className="card"; div.innerHTML=` <img src="${p.img}"> <h3>${p.name}</h3> <p class="price">$${p.price}</p> <button onclick="addCart(${i})"> Agregar al carrito </button> `; list.appendChild(div); }); } /* CARRITO */ function addCart(index){ cart.push(products[index]); total+=products[index].price; document.getElementById("cartCount").innerText=cart.length; document.getElementById("cartTotal").innerText=total; /* WhatsApp Honduras */ let msg=encodeURIComponent( "Hola, deseo comprar "+cart.length+ " productos. Total $"+total ); document.getElementById("whatsappBtn").href= "https://wa.me/50400000000?text="+msg; } /* BUSCADOR */ function searchProduct(text){ text=text.toLowerCase(); let filtered=products.filter(p=> p.name.toLowerCase().includes(text) ); let list=document.getElementById("productList"); list.innerHTML=""; filtered.forEach((p,i)=>{ let div=document.createElement("div"); div.className="card"; div.innerHTML=` <img src="${p.img}"> <h3>${p.name}</h3> <p class="price">$${p.price}</p> <button onclick="addCart(${i})"> Agregar al carrito </button> `; list.appendChild(div); }); } /* INVENTARIO ADMIN */ function saveInventory(){ try{ products=JSON.parse( document.getElementById("inventoryText").value ); loadProducts(); alert("Inventario actualizado"); }catch{ alert("JSON inválido"); } } /* CARGAR INVENTARIO EN PANEL */ document.getElementById("inventoryText").value= JSON.stringify(products,null,2); </script> </body> </html>