diff --git a/css/styles.css b/css/styles.css
index 007b1be..1664c46 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -66,35 +66,39 @@ body{
justify-content:space-between;
gap:10px;
}
-.info-card__text{max-width:150px;}
-.info-card__title{margin:0;font-weight:600;font-size:16px;line-height:1.2;color:#191b1d;}
-.info-card__sub{margin:6px 0 0;font-size:12px;font-weight:400;color:var(--muted);}
+.info-card__text{max-width:160px;}
+.info-card__title{margin:0;font-weight:600;font-size:14px;line-height:1.25;color:var(--ink2);letter-spacing:-.02rem;}
+.info-card__sub{margin:4px 0 0;font-size:12px;font-weight:500;color:var(--ink2);letter-spacing:-.02rem;}
.chip-btn{
border:1px solid var(--chip-border);
background:#fff;
border-radius:13px;
- padding:18px 30px;
+ padding:12px 22px;
font-family:inherit;
- font-size:15px;
+ font-size:14px;
font-weight:500;
- color:#191b1d;
+ color:var(--ink2);
cursor:pointer;
white-space:nowrap;
+ letter-spacing:-.02rem;
+ transition:background .18s ease;
}
+.chip-btn:active{background:#f4f4f4;}
/* ---------- product list ---------- */
-.product-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;}
+.product-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;}
.product{
background:var(--card);
border:1px solid #eaeaea;
border-radius:15px;
- padding:14px 16px;
+ padding:10px 16px 10px 10px;
display:flex;
align-items:center;
- gap:14px;
+ gap:12px;
cursor:pointer;
transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
animation:itemIn .45s cubic-bezier(.22,1,.36,1) both;
+ overflow:hidden;
}
@keyframes itemIn{0%{opacity:0;transform:translateY(14px) scale(.97);}100%{opacity:1;transform:translateY(0) scale(1);}}
.product:active{transform:scale(.99);}
@@ -102,32 +106,63 @@ body{
border-color:#1b1d1f;
border-width:1.5px;
}
-.product__icon{
- width:40px;height:44px;
+
+/* product image */
+.product__img-wrap{
+ width:64px;height:64px;flex:0 0 64px;
+ border-radius:10px;
+ overflow:hidden;
+ background:#f0f0f0;
+}
+.product__img{width:100%;height:100%;object-fit:cover;display:block;}
+
+/* product icon fallback (SVG) */
+.product__icon-wrap{
+ width:64px;height:64px;flex:0 0 64px;
+ border-radius:10px;
+ background:#f6f6f6;
display:flex;align-items:center;justify-content:center;
- flex:0 0 auto;
}
-.product__img{width:42px;height:44px;object-fit:contain;display:block;}
-.product.is-selected .product__icon{animation:pickPop .45s cubic-bezier(.34,1.56,.64,1);}
+.product.is-selected .product__img-wrap,
+.product.is-selected .product__icon-wrap{animation:pickPop .45s cubic-bezier(.34,1.56,.64,1);}
@keyframes pickPop{
0%{transform:scale(1) rotate(0);}
35%{transform:scale(1.22) rotate(-8deg);}
70%{transform:scale(.95) rotate(4deg);}
100%{transform:scale(1) rotate(0);}
}
-.product__name{flex:1;font-weight:600;font-size:16px;color:#191b1d;}
-.checkbox{
- width:23px;height:23px;flex:0 0 auto;
+/* product info */
+.product__info{flex:1;min-width:0;}
+.product__name{
+ margin:0;
+ font-weight:800;
+ font-size:16px;
+ color:var(--ink2);
+ letter-spacing:-.02rem;
+ white-space:nowrap;
+ overflow:hidden;
+ text-overflow:ellipsis;
+}
+
+/* product radio */
+.product__radio{flex:0 0 auto;}
+.product__radio input[type="checkbox"]{
+ position:absolute;opacity:0;width:0;height:0;pointer-events:none;
+}
+.product__radio span{
+ display:block;
+ width:24px;height:24px;
+ border-radius:50%;
border:2px solid #d2d6db;
- border-radius:7px;
- display:flex;align-items:center;justify-content:center;
background:#fff;
- transition:background .2s ease, border-color .2s ease;
+ transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
+}
+.product.is-selected .product__radio span{
+ background:var(--ink2);
+ border-color:var(--ink2);
+ box-shadow:0 0 0 2px rgba(10,17,18,.12);
}
-.checkbox__tick{opacity:0;transform:scale(.3);transition:opacity .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1);}
-.product.is-selected .checkbox{background:#16262c;border-color:#16262c;}
-.product.is-selected .checkbox__tick{opacity:1;transform:scale(1);}
/* ---------- action bar ---------- */
.action-bar{
@@ -136,17 +171,23 @@ body{
background:#f0f0f0;
border-top:1px solid #e2e2e2;
}
-.action-bar__count{font-weight:600;font-size:15px;color:#26292c;min-width:78px;}
+.action-bar__count{
+ font-weight:700;font-size:18px;
+ color:var(--ink2);
+ min-width:100px;
+ letter-spacing:-.02rem;
+}
.confirm-btn{
flex:1;
border:none;
border-radius:24px;
padding:14px 18px;
font-family:inherit;
- font-size:16px;
- font-weight:600;
- color:#9aa0a6;
- background:#d9dadc;
+ font-size:18px;
+ font-weight:500;
+ letter-spacing:-.02rem;
+ color:rgba(10,17,18,.45);
+ background:#dde0e5;
cursor:not-allowed;
transition:background .3s ease, color .3s ease, transform .15s ease;
}
@@ -159,16 +200,35 @@ body{
/* ---------- bottom nav ---------- */
.bottom-nav{
- display:flex;justify-content:space-around;align-items:center;
- padding:11px 8px calc(11px + env(safe-area-inset-bottom));
+ display:flex;align-items:stretch;
+ padding-bottom:env(safe-area-inset-bottom);
background:#fff;
border-top:1px solid #eee;
+ min-height:60px;
+}
+.nav-inner{
+ display:flex;
+ justify-content:space-around;
+ align-items:center;
+ width:100%;
+ padding:8px 0;
}
.nav-item{
- background:none;border:none;padding:6px 14px;cursor:pointer;
- color:#1b1d1f;display:flex;align-items:center;justify-content:center;
+ background:none;border:none;
+ padding:4px 12px;
+ cursor:pointer;
+ display:flex;align-items:center;justify-content:center;
+ flex:1;
+}
+.nav-icon-wrap{
+ color:#1b1d1f;
+ display:flex;align-items:center;justify-content:center;
+ padding:4px;
+ border-radius:10px;
+ transition:background .15s ease;
}
-.nav-item--active{color:var(--green);}
+.nav-item:active .nav-icon-wrap{background:#f0f0f0;}
+.nav-icon-wrap--active{color:var(--green);}
/* ================= RETIRO ================= */
.screen--retiro{background:var(--orange);letter-spacing:-.02rem;}
diff --git a/index.html b/index.html
index 2f6d97b..7791ce6 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
skipit ยท Mis productos
+
@@ -37,18 +38,43 @@ Mis productos
diff --git a/js/app.js b/js/app.js
index 7ef2eb3..2550ae3 100644
--- a/js/app.js
+++ b/js/app.js
@@ -11,7 +11,7 @@
tick();
setInterval(tick, 1000);
- /* ---------- product icons (SVG) ---------- */
+ /* ---------- product icon fallbacks (SVG) ---------- */
var ICONS = {
beer:
''
};
- /* ---------- product datasets (Todos toggles between them) ----------
- A product can use an SVG icon (icon: "...") or a real image (img: "URL"). */
+ /* ---------- product datasets ---------- */
var SETS = [
[
- { name: "Pinta ingreso", icon: "beer" },
- { name: "Pinta ingreso", icon: "beer" }
+ { name: "Pinta ingreso", img: "https://assets.skipit.com.ar/60/cropped_1768234365786.webp" },
+ { name: "Pinta ingreso", img: "https://assets.skipit.com.ar/60/cropped_1768234365786.webp" }
],
[
{ name: "Trago ingreso", img: "images/trago-gintonic.jpeg" }
@@ -58,26 +57,56 @@
var li = document.createElement("li");
li.className = "product";
li.style.animationDelay = (i * 0.07) + "s";
- var iconHtml = item.img
- ? '
'
- : ICONS[item.icon];
+
+ var mediaHtml;
+ if (item.img) {
+ mediaHtml =
+ '' +
+ '
' +
+ '
' + ICONS[item.icon] + '
';
+ }
+
li.innerHTML =
- '' + iconHtml + "" +
- '' + item.name + "" +
- '' +
- '' +
- "";
+ mediaHtml +
+ '' +
+ '
' + item.name + '
' +
+ '
' +
+ '' +
+ '' +
+ '
';
+
+ var radioInput = li.querySelector('.product__radio input');
function toggle() {
- var box = li.querySelector(".checkbox");
var sel = li.classList.toggle("is-selected");
- box.setAttribute("aria-checked", sel ? "true" : "false");
+ radioInput.checked = sel;
refresh();
}
li.addEventListener("click", toggle);
- li.querySelector(".checkbox").addEventListener("keydown", function (e) {
+ li.addEventListener("keydown", function (e) {
+ if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggle(); }
+ });
+ li.setAttribute("tabindex", "0");
+ li.setAttribute("role", "checkbox");
+ li.setAttribute("aria-checked", "false");
+
+ var origToggle = toggle;
+ toggle = function () {
+ var sel = li.classList.toggle("is-selected");
+ radioInput.checked = sel;
+ li.setAttribute("aria-checked", sel ? "true" : "false");
+ refresh();
+ };
+ li.removeEventListener("click", origToggle);
+ li.addEventListener("click", toggle);
+ li.addEventListener("keydown", function (e) {
if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggle(); }
});
+
return li;
}
@@ -110,7 +139,7 @@
});
}
- /* ---------- confirm -> build Retiro ticket from selection ---------- */
+ /* ---------- confirm -> build Retiro ticket ---------- */
var retiroItems = document.getElementById("retiro-items");
var retiroTotal = document.getElementById("retiro-total");
@@ -140,7 +169,6 @@
knob.style.transition = anim ? "left .25s ease" : "none";
fill.style.transition = anim ? "width .25s ease" : "none";
knob.style.left = (6 + x) + "px";
- // No dark fill at rest; it appears and trails the knob as soon as you slide.
fill.style.width = (x <= 0 ? 0 : 6 + x + knob.offsetWidth / 2) + "px";
}