devops
9f417c2674
Build, Push and Validate Frontend / build (push) Successful in 4m14s
Primera versión profesional preparada Generé un frontend inicial completamente renovado con: Marca Ari Shopping, reemplazando CruzCloud Shop. Diseño moderno, profesional y adaptable a celular, tablet y escritorio. Hero comercial y categorías. Juguetes, minifiguras, bolsos, mochilas y regalos. Buscador funcional. Filtros por categoría. Productos dinámicos. Carrito lateral funcional. Formato de precios en pesos colombianos. Integración inicial con Instagram. Sección de confianza: envíos, pagos y atención. Base JavaScript preparada para sustituir los productos simulados por una API. Imágenes de demostración que luego reemplazaremos con fotografías reales.
88 lines
24 KiB
HTML
88 lines
24 KiB
HTML
<!doctype html>
|
||
<html lang="es">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<meta name="description" content="Ari Shopping: juguetes, minifiguras, bolsos y regalos en un solo lugar.">
|
||
<meta name="theme-color" content="#121318">
|
||
<title>Ari Shopping | Tu tienda online</title>
|
||
<style>
|
||
:root{--ink:#17181d;--muted:#6c6e75;--line:#e9e6e1;--soft:#f7f5f2;--brand:#cc2b63;--brand2:#a31f4c;--gold:#f3b33f;--ok:#168252;--shadow:0 18px 55px rgba(20,20,24,.12);--r:22px;--max:1220px}
|
||
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:#fff}button,input{font:inherit}a{color:inherit;text-decoration:none}img{display:block;width:100%;object-fit:cover}.wrap{width:min(calc(100% - 32px),var(--max));margin:auto}
|
||
.top{padding:9px 15px;color:#fff;background:var(--ink);font-size:.85rem;text-align:center}.top b{color:#ffd582}
|
||
header{position:sticky;top:0;z-index:30;border-bottom:1px solid rgba(233,230,225,.9);background:rgba(255,255,255,.92);backdrop-filter:blur(14px)}
|
||
.head{min-height:76px;display:grid;grid-template-columns:auto minmax(250px,1fr) auto;align-items:center;gap:24px}.brand{display:flex;align-items:center;gap:11px;white-space:nowrap}.logo{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;color:#fff;background:linear-gradient(145deg,#111 20%,var(--brand));font:italic 700 1.2rem Georgia;box-shadow:0 8px 22px rgba(204,43,99,.25)}.brand strong{display:block}.brand small{display:block;color:var(--muted)}
|
||
.search{position:relative}.search span{position:absolute;left:17px;top:50%;transform:translateY(-50%);color:var(--muted)}.search input{width:100%;height:48px;padding:0 18px 0 46px;border:1px solid var(--line);border-radius:999px;outline:none;background:var(--soft)}.search input:focus{border-color:#dc86a6;box-shadow:0 0 0 4px rgba(204,43,99,.1);background:#fff}
|
||
.actions{display:flex;gap:9px}.btn,.icon{border:1px solid var(--line);border-radius:999px;background:#fff;cursor:pointer;font-weight:750}.btn{height:44px;padding:0 18px}.btn.primary{border-color:var(--brand);color:#fff;background:var(--brand)}.icon{position:relative;width:44px;height:44px;display:grid;place-items:center}.count{position:absolute;right:-3px;top:-5px;min-width:19px;height:19px;padding:0 5px;display:grid;place-items:center;border:2px solid #fff;border-radius:99px;color:#fff;background:var(--brand);font-size:.67rem}
|
||
nav{border-top:1px solid var(--line)}.nav{min-height:46px;display:flex;align-items:center;gap:7px;overflow:auto;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}.nav button{padding:8px 14px;border:0;border-radius:999px;color:#555861;background:transparent;white-space:nowrap;cursor:pointer;font-weight:700}.nav button:hover,.nav button.active{color:var(--brand2);background:#fff0f5}
|
||
.hero{padding:42px 0 18px}.heroGrid{min-height:510px;display:grid;grid-template-columns:1.08fr .92fr;overflow:hidden;border-radius:32px;background:linear-gradient(135deg,#fff7fa,#f0dbe4);box-shadow:var(--shadow)}.heroCopy{align-self:center;padding:clamp(34px,6vw,72px)}.tag{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid rgba(204,43,99,.2);border-radius:999px;color:var(--brand2);background:rgba(255,255,255,.7);font-size:.78rem;font-weight:850;text-transform:uppercase}.dot{width:8px;height:8px;border-radius:50%;background:var(--brand)}h1{max-width:680px;margin:22px 0 0;font-size:clamp(2.7rem,5.2vw,5rem);line-height:.97;letter-spacing:-.065em}h1 em{color:var(--brand);font-family:Georgia;font-weight:500}.hero p{max-width:590px;margin:23px 0 29px;color:#555861;font-size:1.08rem;line-height:1.65}.heroActions{display:flex;flex-wrap:wrap;gap:11px}.cta{min-height:50px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(23,24,29,.12);border-radius:999px;background:rgba(255,255,255,.78);font-weight:850}.cta.primary{border-color:var(--brand);color:#fff;background:var(--brand);box-shadow:0 12px 28px rgba(204,43,99,.24)}.heroMedia{position:relative;min-height:480px}.heroMedia img{height:100%;min-height:480px}.heroMedia:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#efdfe5 0%,transparent 25%)}.float{position:absolute;right:24px;bottom:24px;z-index:2;max-width:250px;padding:18px;border:1px solid rgba(255,255,255,.8);border-radius:18px;background:rgba(255,255,255,.91);box-shadow:var(--shadow);backdrop-filter:blur(12px)}.float strong{display:block;margin-bottom:5px}.float span{color:var(--muted);font-size:.85rem;line-height:1.45}
|
||
.trust{padding:18px 0 24px}.trustGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.trustCard{padding:18px;display:flex;gap:13px;align-items:center;border:1px solid var(--line);border-radius:15px}.trustIcon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;color:var(--brand2);background:#fff0f5;font-size:1.2rem}.trustCard strong{display:block;font-size:.93rem}.trustCard small{color:var(--muted)}
|
||
section.block{padding:72px 0}.soft{background:var(--soft)}.heading{margin-bottom:28px;display:flex;align-items:end;justify-content:space-between;gap:20px}.heading h2{margin:0;font-size:clamp(2rem,4vw,3.1rem);letter-spacing:-.05em}.heading p{max-width:520px;margin:8px 0 0;color:var(--muted);line-height:1.55}.link{color:var(--brand2);font-weight:850;white-space:nowrap}
|
||
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.cat{position:relative;min-height:300px;overflow:hidden;border-radius:var(--r);cursor:pointer;box-shadow:0 8px 28px rgba(20,20,24,.07)}.cat img{height:100%;min-height:300px;transition:.35s}.cat:hover img{transform:scale(1.045)}.cat:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(8,9,11,.82))}.catText{position:absolute;left:20px;right:20px;bottom:19px;z-index:2;color:#fff}.catText strong{display:block;font-size:1.2rem}.catText small{color:rgba(255,255,255,.78)}
|
||
.filters{margin-bottom:22px;display:flex;flex-wrap:wrap;gap:8px}.filter{padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;cursor:pointer;font-weight:750}.filter.active{border-color:var(--ink);color:#fff;background:var(--ink)}.products{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.card{overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:#fff;transition:.2s}.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.pic{position:relative;aspect-ratio:1/1.05;overflow:hidden;background:#eee}.pic img{height:100%;transition:.32s}.card:hover .pic img{transform:scale(1.035)}.badge{position:absolute;left:13px;top:13px;padding:7px 10px;border-radius:99px;color:#fff;background:var(--ink);font-size:.7rem;font-weight:850}.badge.sale{background:var(--brand)}.body{padding:16px}.kicker{color:var(--brand2);font-size:.72rem;font-weight:850;text-transform:uppercase}.body h3{min-height:47px;margin:8px 0 10px;font-size:1rem;line-height:1.4}.rating{margin-bottom:12px;color:#e29a1a;font-size:.82rem}.rating span{color:var(--muted)}.foot{display:flex;align-items:center;justify-content:space-between;gap:10px}.price{font-size:1.15rem;font-weight:900}.price del{display:block;color:#9a9ba0;font-size:.75rem;font-weight:600}.add{width:42px;height:42px;border:0;border-radius:50%;color:#fff;background:var(--brand);cursor:pointer;font-size:1.3rem}.empty{grid-column:1/-1;padding:50px;text-align:center;color:var(--muted);border:1px dashed #d4d0ca;border-radius:var(--r);background:#fff}
|
||
.insta{padding:80px 0;color:#fff;background:radial-gradient(circle at 15% 0%,rgba(204,43,99,.6),transparent 36%),linear-gradient(135deg,#15161b,#28262d)}.instaGrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center}.insta h2{margin:20px 0 16px;font-size:clamp(2.3rem,4.5vw,4.1rem);line-height:1;letter-spacing:-.055em}.insta p{max-width:520px;margin:0 0 25px;color:rgba(255,255,255,.75);line-height:1.65}.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.tile{aspect-ratio:1;overflow:hidden;border-radius:16px}.tile img{height:100%;transition:.3s}.tile:hover img{transform:scale(1.05)}
|
||
footer{padding:50px 0 24px;color:rgba(255,255,255,.74);background:#121318}.footerGrid{display:grid;grid-template-columns:1.35fr repeat(3,1fr);gap:35px}.footerGrid h3{margin:0 0 15px;color:#fff;font-size:.95rem}.links{display:grid;gap:10px;font-size:.87rem}.about{max-width:350px;line-height:1.6}.bottom{margin-top:38px;padding-top:20px;display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(255,255,255,.1);font-size:.8rem}
|
||
.overlay{position:fixed;inset:0;z-index:80;opacity:0;visibility:hidden;background:rgba(8,9,11,.55);transition:.2s}.overlay.open{opacity:1;visibility:visible}.drawer{position:fixed;right:0;top:0;z-index:90;width:min(430px,100%);height:100%;padding:24px;display:flex;flex-direction:column;transform:translateX(100%);background:#fff;box-shadow:-20px 0 60px rgba(0,0,0,.2);transition:.24s}.drawer.open{transform:none}.drawerHead{padding-bottom:17px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.drawerHead h2{margin:0}.close{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:#fff;cursor:pointer;font-size:1.2rem}.cartList{flex:1;overflow:auto}.cartEmpty{height:100%;display:grid;place-items:center;color:var(--muted);text-align:center}.cartItem{padding:14px 0;display:grid;grid-template-columns:68px 1fr auto;gap:11px;align-items:center;border-bottom:1px solid var(--line)}.cartItem img{width:68px;height:68px;border-radius:11px}.cartItem strong{display:block;font-size:.88rem}.cartItem small{color:var(--brand2);font-weight:800}.remove{border:0;color:#9f2929;background:none;cursor:pointer}.drawerFoot{padding-top:16px;border-top:1px solid var(--line)}.total{margin-bottom:14px;display:flex;justify-content:space-between;font-weight:900}.drawerFoot .cta{width:100%}.toast{position:fixed;left:50%;bottom:24px;z-index:100;padding:12px 17px;opacity:0;transform:translate(-50%,15px);border-radius:99px;color:#fff;background:var(--ink);box-shadow:var(--shadow);transition:.18s;pointer-events:none;font-weight:750}.toast.show{opacity:1;transform:translate(-50%,0)}
|
||
@media(max-width:1000px){.head{grid-template-columns:auto 1fr auto;gap:13px}.brandText{display:none}.actions .btn{display:none}.heroGrid,.instaGrid{grid-template-columns:1fr}.heroMedia,.heroMedia img{min-height:380px}.heroMedia:after{background:linear-gradient(180deg,#efdfe5 0%,transparent 22%)}.cats,.products{grid-template-columns:repeat(2,1fr)}.footerGrid{grid-template-columns:repeat(2,1fr)}}
|
||
@media(max-width:680px){.wrap{width:min(calc(100% - 20px),var(--max))}.head{padding:11px 0}.logo{width:41px;height:41px}.search input{height:42px;font-size:.85rem}.hero{padding-top:20px}.heroCopy{padding:34px 23px}.heroMedia,.heroMedia img{min-height:315px}.float{left:15px;right:15px;bottom:15px;max-width:none}.trustGrid{grid-template-columns:1fr}section.block{padding:52px 0}.heading{align-items:flex-start;flex-direction:column}.cats{display:flex;overflow:auto;scroll-snap-type:x mandatory}.cat{min-width:78vw;scroll-snap-align:start}.products{gap:12px}.body{padding:13px}.body h3{min-height:58px;font-size:.92rem}.footerGrid{grid-template-columns:1fr}.bottom{flex-direction:column}}
|
||
@media(max-width:430px){.products{grid-template-columns:1fr}.body h3{min-height:0}.heroActions .cta{width:100%}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="top"><b>Envíos seguros</b> · Pagos fáciles · Atención personalizada</div>
|
||
<header>
|
||
<div class="wrap head">
|
||
<a class="brand" href="#inicio"><span class="logo">ARI</span><span class="brandText"><strong>Ari Shopping</strong><small>Detalles que te encantan</small></span></a>
|
||
<label class="search"><span>⌕</span><input id="search" type="search" placeholder="Buscar juguetes, bolsos, regalos..."></label>
|
||
<div class="actions"><a class="btn primary" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/">Escríbenos</a><button id="cartBtn" class="icon" aria-label="Abrir carrito">🛒<span id="count" class="count">0</span></button></div>
|
||
</div>
|
||
<nav><div class="wrap nav" id="nav"></div></nav>
|
||
</header>
|
||
|
||
<main id="inicio">
|
||
<section class="hero"><div class="wrap"><div class="heroGrid">
|
||
<div class="heroCopy"><span class="tag"><span class="dot"></span>Nueva colección</span><h1>Encuentra ese detalle que hace el día más <em>especial.</em></h1><p>Juguetes, minifiguras, bolsos y regalos seleccionados para sorprender. Compra fácil y recibe atención personalizada.</p><div class="heroActions"><a class="cta primary" href="#productos">Explorar productos</a><a class="cta" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/">Ver Instagram</a></div></div>
|
||
<div class="heroMedia"><img src="https://images.unsplash.com/photo-1566576912321-d58ddd7a6088?auto=format&fit=crop&w=1200&q=85" alt="Juguetes coloridos"><div class="float"><strong>Compra con acompañamiento</strong><span>Te ayudamos a elegir, confirmar disponibilidad y coordinar tu envío.</span></div></div>
|
||
</div></div></section>
|
||
|
||
<section class="trust"><div class="wrap trustGrid"><article class="trustCard"><span class="trustIcon">🚚</span><div><strong>Envíos seguros</strong><small>Coordinación y seguimiento.</small></div></article><article class="trustCard"><span class="trustIcon">💳</span><div><strong>Pagos fáciles</strong><small>Opciones claras para comprar.</small></div></article><article class="trustCard"><span class="trustIcon">💗</span><div><strong>Atención cercana</strong><small>Antes y después de tu compra.</small></div></article></div></section>
|
||
|
||
<section class="block"><div class="wrap"><div class="heading"><div><h2>Compra por categoría</h2><p>Encuentra rápido el regalo, juguete o accesorio ideal.</p></div><a class="link" href="#productos">Ver todo →</a></div><div class="cats">
|
||
<article class="cat" data-cat="juguetes"><img src="https://images.unsplash.com/photo-1594787318286-3d835c1d207f?auto=format&fit=crop&w=800&q=82" alt="Juguetes"><div class="catText"><strong>Juguetes</strong><small>Diversión para todas las edades</small></div></article>
|
||
<article class="cat" data-cat="minifiguras"><img src="https://images.unsplash.com/photo-1560961911-ba7ef651a56c?auto=format&fit=crop&w=800&q=82" alt="Minifiguras"><div class="catText"><strong>Minifiguras</strong><small>Personajes para coleccionar</small></div></article>
|
||
<article class="cat" data-cat="bolsos"><img src="https://images.unsplash.com/photo-1553062407-98eeb64c6a62?auto=format&fit=crop&w=800&q=82" alt="Mochilas"><div class="catText"><strong>Bolsos y mochilas</strong><small>Estilo para cada aventura</small></div></article>
|
||
<article class="cat" data-cat="regalos"><img src="https://images.unsplash.com/photo-1549465220-1a8b9238cd48?auto=format&fit=crop&w=800&q=82" alt="Regalos"><div class="catText"><strong>Regalos</strong><small>Detalles que emocionan</small></div></article>
|
||
</div></div></section>
|
||
|
||
<section id="productos" class="block soft"><div class="wrap"><div class="heading"><div><h2>Productos destacados</h2><p>Catálogo demostrativo listo para conectarse después con el microservicio de productos.</p></div><a class="link" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/">Consultar disponibilidad →</a></div><div id="filters" class="filters"></div><div id="products" class="products"></div></div></section>
|
||
|
||
<section class="insta"><div class="wrap instaGrid"><div><span class="tag"><span class="dot"></span>@ari_shopping1</span><h2>Descubre novedades todos los días.</h2><p>Sigue la cuenta para conocer productos recién llegados, promociones y disponibilidad. La tienda online transformará esa comunidad en una experiencia de compra completa.</p><a class="cta primary" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/">Seguir en Instagram</a></div><div class="tiles"><a class="tile" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/"><img src="https://images.unsplash.com/photo-1599443015574-be5fe8a05783?auto=format&fit=crop&w=500&q=80" alt="Producto"></a><a class="tile" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/"><img src="https://images.unsplash.com/photo-1594787318286-3d835c1d207f?auto=format&fit=crop&w=500&q=80" alt="Juguetes"></a><a class="tile" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/"><img src="https://images.unsplash.com/photo-1553062407-98eeb64c6a62?auto=format&fit=crop&w=500&q=80" alt="Mochila"></a><a class="tile" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/"><img src="https://images.unsplash.com/photo-1607453998774-d533f65dac99?auto=format&fit=crop&w=500&q=80" alt="Regalo"></a><a class="tile" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/"><img src="https://images.unsplash.com/photo-1566576912321-d58ddd7a6088?auto=format&fit=crop&w=500&q=80" alt="Juguetes"></a><a class="tile" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/"><img src="https://images.unsplash.com/photo-1549465220-1a8b9238cd48?auto=format&fit=crop&w=500&q=80" alt="Regalos"></a></div></div></section>
|
||
</main>
|
||
|
||
<footer><div class="wrap"><div class="footerGrid"><div><a class="brand" href="#inicio"><span class="logo">ARI</span><span><strong style="color:#fff">Ari Shopping</strong><small style="display:block;color:#aaa">Tu tienda virtual</small></span></a><p class="about">Variedad de productos y marcas en un solo lugar, con atención personalizada y una experiencia de compra cada vez más completa.</p></div><div><h3>Comprar</h3><div class="links"><a href="#productos">Productos</a><a href="#productos">Novedades</a><a href="#productos">Ofertas</a></div></div><div><h3>Ayuda</h3><div class="links"><a target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/">Contacto</a><a href="#">Envíos</a><a href="#">Cambios y devoluciones</a></div></div><div><h3>Síguenos</h3><div class="links"><a target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/">Instagram @ari_shopping1</a><a href="#">WhatsApp próximamente</a></div></div></div><div class="bottom"><span>© <span id="year"></span> Ari Shopping.</span><span>Front MVP listo para evolución a microservicios.</span></div></div></footer>
|
||
|
||
<div id="overlay" class="overlay"></div><aside id="drawer" class="drawer" aria-hidden="true"><div class="drawerHead"><h2>Tu carrito</h2><button id="close" class="close">×</button></div><div id="cartList" class="cartList"></div><div class="drawerFoot"><div class="total"><span>Total estimado</span><span id="total">$0</span></div><a class="cta primary" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/">Finalizar por Instagram</a></div></aside><div id="toast" class="toast"></div>
|
||
|
||
<script>
|
||
const data=[
|
||
{id:1,n:'Figura coleccionable edición especial',c:'minifiguras',tag:'Nuevo',p:79000,old:0,img:'https://images.unsplash.com/photo-1560961911-ba7ef651a56c?auto=format&fit=crop&w=800&q=82'},
|
||
{id:2,n:'Set creativo de bloques y personajes',c:'juguetes',tag:'Favorito',p:119000,old:139000,img:'https://images.unsplash.com/photo-1566576912321-d58ddd7a6088?auto=format&fit=crop&w=800&q=82'},
|
||
{id:3,n:'Mochila urbana compacta',c:'bolsos',tag:'Nuevo',p:89000,old:0,img:'https://images.unsplash.com/photo-1553062407-98eeb64c6a62?auto=format&fit=crop&w=800&q=82'},
|
||
{id:4,n:'Caja sorpresa para regalo',c:'regalos',tag:'Oferta',p:59000,old:69000,img:'https://images.unsplash.com/photo-1549465220-1a8b9238cd48?auto=format&fit=crop&w=800&q=82'},
|
||
{id:5,n:'Vehículo de juguete colección',c:'juguetes',tag:'Nuevo',p:69000,old:0,img:'https://images.unsplash.com/photo-1594787318286-3d835c1d207f?auto=format&fit=crop&w=800&q=82'},
|
||
{id:6,n:'Kit de arte y creatividad',c:'regalos',tag:'Favorito',p:74000,old:0,img:'https://images.unsplash.com/photo-1607453998774-d533f65dac99?auto=format&fit=crop&w=800&q=82'},
|
||
{id:7,n:'Figura decorativa de colección',c:'minifiguras',tag:'Oferta',p:65000,old:79000,img:'https://images.unsplash.com/photo-1599443015574-be5fe8a05783?auto=format&fit=crop&w=800&q=82'},
|
||
{id:8,n:'Bolso casual de uso diario',c:'bolsos',tag:'Nuevo',p:99000,old:0,img:'https://images.unsplash.com/photo-1559563458-527698bf5295?auto=format&fit=crop&w=800&q=82'}
|
||
];
|
||
const labels={todos:'Todos',nuevo:'Lo nuevo',juguetes:'Juguetes',minifiguras:'Minifiguras',bolsos:'Bolsos',regalos:'Regalos',ofertas:'Ofertas'},state={f:'todos',q:'',cart:[]},money=new Intl.NumberFormat('es-CO',{style:'currency',currency:'COP',maximumFractionDigits:0});
|
||
const $=s=>document.querySelector(s), nav=$('#nav'),filters=$('#filters'),grid=$('#products'),search=$('#search'),drawer=$('#drawer'),overlay=$('#overlay'),cartList=$('#cartList');
|
||
function match(x,f){return f==='todos'||f==='nuevo'&&x.tag==='Nuevo'||f==='ofertas'&&x.old||x.c===f}function renderNav(){nav.innerHTML=Object.entries(labels).map(([k,v])=>`<button data-filter="${k}" class="${state.f===k?'active':''}">${v}</button>`).join('');filters.innerHTML=Object.entries(labels).map(([k,v])=>`<button data-filter="${k}" class="filter ${state.f===k?'active':''}">${v}</button>`).join('')}
|
||
function render(){renderNav();const q=state.q.trim().toLowerCase(),rows=data.filter(x=>match(x,state.f)&&(!q||(x.n+' '+x.c).toLowerCase().includes(q)));grid.innerHTML=rows.length?rows.map(x=>`<article class="card"><div class="pic"><img loading="lazy" src="${x.img}" alt="${x.n}"><span class="badge ${x.old?'sale':''}">${x.tag}</span></div><div class="body"><span class="kicker">${labels[x.c]}</span><h3>${x.n}</h3><div class="rating">★★★★★ <span>4.8</span></div><div class="foot"><div class="price">${money.format(x.p)}${x.old?`<del>${money.format(x.old)}</del>`:''}</div><button class="add" data-add="${x.id}" aria-label="Agregar">+</button></div></div></article>`).join(''):'<div class="empty"><strong>No encontramos productos.</strong><br>Prueba otra búsqueda o categoría.</div>'}
|
||
function toast(t){const el=$('#toast');el.textContent=t;el.classList.add('show');clearTimeout(toast.t);toast.t=setTimeout(()=>el.classList.remove('show'),2000)}function add(id){const x=data.find(p=>p.id===id),e=state.cart.find(p=>p.id===id);e?e.qty++:state.cart.push({...x,qty:1});renderCart();toast('Producto agregado al carrito')}function remove(id){state.cart=state.cart.filter(x=>x.id!==id);renderCart()}
|
||
function renderCart(){const n=state.cart.reduce((s,x)=>s+x.qty,0),t=state.cart.reduce((s,x)=>s+x.p*x.qty,0);$('#count').textContent=n;$('#total').textContent=money.format(t);cartList.innerHTML=state.cart.length?state.cart.map(x=>`<div class="cartItem"><img src="${x.img}" alt="${x.n}"><div><strong>${x.n}</strong><small>${money.format(x.p)} · Cant. ${x.qty}</small></div><button class="remove" data-remove="${x.id}">Eliminar</button></div>`).join(''):'<div class="cartEmpty"><div><strong>Tu carrito está vacío</strong><br><small>Agrega productos para comenzar.</small></div></div>'}
|
||
function openCart(){drawer.classList.add('open');overlay.classList.add('open');drawer.setAttribute('aria-hidden','false')}function closeCart(){drawer.classList.remove('open');overlay.classList.remove('open');drawer.setAttribute('aria-hidden','true')}
|
||
document.addEventListener('click',e=>{const f=e.target.closest('[data-filter]'),cat=e.target.closest('[data-cat]'),a=e.target.closest('[data-add]'),r=e.target.closest('[data-remove]');if(f||cat){state.f=(f?.dataset.filter||cat.dataset.cat);render();$('#productos').scrollIntoView({behavior:'smooth'})}if(a)add(+a.dataset.add);if(r)remove(+r.dataset.remove)});search.addEventListener('input',e=>{state.q=e.target.value;render()});$('#cartBtn').onclick=openCart;$('#close').onclick=closeCart;overlay.onclick=closeCart;document.addEventListener('keydown',e=>{if(e.key==='Escape')closeCart()});$('#year').textContent=new Date().getFullYear();render();renderCart();
|
||
</script>
|
||
</body>
|
||
</html>
|