Tot funcionant al 100% i amb Looker
This commit is contained in:
+240
-36
@@ -205,9 +205,9 @@
|
||||
padding:26px 26px 0;overflow:hidden;
|
||||
}
|
||||
.card-actions{
|
||||
display:flex;gap:12px;
|
||||
padding:0 26px 6px;
|
||||
margin-top:2px;
|
||||
width:100%;
|
||||
}
|
||||
.media-stage{
|
||||
width:100%;height:100%;border-radius:26px;
|
||||
@@ -223,24 +223,33 @@
|
||||
.media-placeholder strong{display:block;color:var(--text);font-size:18px;margin-bottom:8px}
|
||||
|
||||
.media-actions{
|
||||
display:flex;gap:12px;justify-content:stretch;z-index:3;
|
||||
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.18fr);gap:10px;justify-content:stretch;z-index:3;
|
||||
pointer-events:none;width:100%;
|
||||
}
|
||||
.action-btn{
|
||||
pointer-events:auto;
|
||||
display:inline-flex;align-items:center;justify-content:center;gap:10px;
|
||||
min-height:48px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.12);
|
||||
text-decoration:none;color:#fff;font-weight:900;font-size:14px;backdrop-filter:blur(10px);
|
||||
min-height:48px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.12);
|
||||
text-decoration:none;color:#fff;font-weight:900;font-size:13px;backdrop-filter:blur(10px);
|
||||
box-shadow:0 8px 18px rgba(0,0,0,.22);
|
||||
transition:transform .16s ease, filter .16s ease, border-color .16s ease;
|
||||
cursor:pointer;flex:1;
|
||||
cursor:pointer;min-width:0;white-space:nowrap;line-height:1;
|
||||
}
|
||||
.action-btn:hover{transform:translateY(-1px);filter:brightness(1.04)}
|
||||
.action-wa:hover{animation-play-state:paused}
|
||||
.action-buy:hover{animation-play-state:paused}
|
||||
.action-view{background:rgba(8,15,29,.66)}
|
||||
.action-wa{
|
||||
background:linear-gradient(180deg, rgba(37,211,102,.92), rgba(26,171,79,.92));
|
||||
border-color:rgba(255,255,255,.18);
|
||||
}
|
||||
.action-view,
|
||||
.action-buy,
|
||||
.action-wa{
|
||||
min-width:0;
|
||||
}
|
||||
.action-buy{
|
||||
background:linear-gradient(180deg, rgba(93,154,255,.34), rgba(52,115,214,.28));
|
||||
border-color:rgba(100,196,255,.24);
|
||||
animation:waPulse 2.2s ease-in-out infinite;
|
||||
}
|
||||
@keyframes waPulse{
|
||||
@@ -274,14 +283,16 @@
|
||||
gap:16px;
|
||||
align-items:flex-end;
|
||||
padding:4px 0 2px;
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
.price-box{display:flex;flex-direction:column;gap:6px}
|
||||
.price-label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.16em}
|
||||
.price{font-size:38px;font-weight:1000;line-height:1}
|
||||
.stock-pill{
|
||||
padding:11px 16px;border-radius:999px;background:rgba(40,210,103,.12);
|
||||
border:1px solid rgba(40,210,103,.24);color:#b9ffd2;font-weight:900;white-space:nowrap;
|
||||
box-shadow:0 8px 18px rgba(0,0,0,.16);
|
||||
padding:9px 14px;border-radius:999px;background:rgba(40,210,103,.12);
|
||||
border:1px solid rgba(40,210,103,.24);color:#b9ffd2;font-weight:900;white-space:normal;
|
||||
box-shadow:0 8px 18px rgba(0,0,0,.16);font-size:11px;line-height:1.2;max-width:100%;
|
||||
overflow-wrap:anywhere;
|
||||
}
|
||||
.sales-hook{
|
||||
margin-top:10px;
|
||||
@@ -363,10 +374,6 @@
|
||||
}
|
||||
|
||||
|
||||
.action-buy{
|
||||
background:linear-gradient(180deg, rgba(93,154,255,.34), rgba(52,115,214,.28));
|
||||
border-color:rgba(100,196,255,.24);
|
||||
}
|
||||
.buy-modal{
|
||||
position:fixed;inset:0;display:none;align-items:center;justify-content:center;
|
||||
background:rgba(0,0,0,.72);backdrop-filter:blur(8px);z-index:1200;padding:20px;
|
||||
@@ -415,8 +422,11 @@
|
||||
.family-pill{white-space:normal}
|
||||
.price-stock{flex-direction:column;align-items:flex-start}
|
||||
.card-actions{padding:0 18px 6px}
|
||||
.media-actions{justify-content:stretch}
|
||||
.action-btn{flex:1}
|
||||
.media-actions{justify-content:stretch;grid-template-columns:1fr}
|
||||
.action-btn{width:100%;font-size:13px;padding:0 12px;gap:8px}
|
||||
.price-stock{gap:12px;align-items:flex-start;flex-direction:column}
|
||||
.price-box{width:100%}
|
||||
.stock-pill{width:100%;font-size:11px;padding:10px 12px;border-radius:18px}
|
||||
}
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
@@ -429,7 +439,153 @@
|
||||
box-shadow: 0 0 0px 1000px rgba(255,255,255,.05) inset !important;
|
||||
border: 1px solid rgba(255,255,255,.10) !important;
|
||||
}
|
||||
.buy-delivery{
|
||||
border:1px solid rgba(255,255,255,.10);
|
||||
background:rgba(255,255,255,.04);
|
||||
border-radius:18px;
|
||||
padding:14px 16px;
|
||||
}
|
||||
|
||||
.buy-check{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:12px;
|
||||
font-weight:800;
|
||||
color:#eef6ff;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.buy-check input{
|
||||
width:18px;
|
||||
height:18px;
|
||||
accent-color:#2563eb;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.buy-delivery-note{
|
||||
margin-top:8px;
|
||||
color:var(--muted);
|
||||
font-size:13px;
|
||||
line-height:1.4;
|
||||
}
|
||||
|
||||
.buy-totals{
|
||||
margin-top:4px;
|
||||
border:1px solid rgba(255,255,255,.10);
|
||||
background:rgba(255,255,255,.04);
|
||||
border-radius:18px;
|
||||
padding:14px 16px;
|
||||
display:grid;
|
||||
gap:10px;
|
||||
}
|
||||
|
||||
.buy-total-row{
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
gap:12px;
|
||||
color:#eef4ff;
|
||||
font-size:15px;
|
||||
}
|
||||
|
||||
.buy-total-final{
|
||||
padding-top:10px;
|
||||
border-top:1px solid rgba(255,255,255,.08);
|
||||
font-size:17px;
|
||||
font-weight:1000;
|
||||
}
|
||||
.buy-head{
|
||||
margin-bottom:18px;
|
||||
}
|
||||
|
||||
.buy-head-brand{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:14px;
|
||||
}
|
||||
|
||||
.buy-head-logo{
|
||||
width:64px;
|
||||
height:64px;
|
||||
object-fit:contain;
|
||||
border-radius:18px;
|
||||
padding:6px;
|
||||
background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
|
||||
border:1px solid rgba(255,255,255,.08);
|
||||
box-shadow:0 16px 32px rgba(0,0,0,.28);
|
||||
flex:0 0 auto;
|
||||
}
|
||||
|
||||
.buy-head h3{
|
||||
margin:0 0 6px;
|
||||
}
|
||||
|
||||
.buy-head p{
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.buy-summary-card{
|
||||
display:grid;
|
||||
grid-template-columns:84px 1fr;
|
||||
gap:16px;
|
||||
align-items:center;
|
||||
border:1px solid rgba(255,255,255,.10);
|
||||
background:rgba(255,255,255,.04);
|
||||
border-radius:18px;
|
||||
padding:14px;
|
||||
}
|
||||
|
||||
.buy-summary-media{
|
||||
width:84px;
|
||||
height:84px;
|
||||
border-radius:16px;
|
||||
background:rgba(255,255,255,.92);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.buy-summary-media img{
|
||||
width:100%;
|
||||
height:100%;
|
||||
object-fit:contain;
|
||||
display:block;
|
||||
}
|
||||
|
||||
.buy-summary-info strong{
|
||||
display:block;
|
||||
font-size:28px;
|
||||
line-height:1.05;
|
||||
margin-bottom:6px;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.buy-summary-info div{
|
||||
color:var(--muted);
|
||||
font-size:15px;
|
||||
line-height:1.45;
|
||||
}
|
||||
|
||||
@media (max-width:640px){
|
||||
.buy-summary-card{
|
||||
grid-template-columns:1fr;
|
||||
}
|
||||
|
||||
.buy-summary-media{
|
||||
width:100%;
|
||||
height:180px;
|
||||
}
|
||||
|
||||
.buy-head-brand{
|
||||
align-items:flex-start;
|
||||
}
|
||||
|
||||
.buy-head-logo{
|
||||
width:56px;
|
||||
height:56px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -501,29 +657,77 @@
|
||||
|
||||
<div id="buyModal" class="buy-modal" aria-hidden="true">
|
||||
<div class="buy-box">
|
||||
<h2 class="buy-title">Comprar ara</h2>
|
||||
<p class="buy-subtitle">Omple les teves dades i et redirigirem al pagament segur amb Stripe.</p>
|
||||
<div id="buySummary" class="buy-summary"></div>
|
||||
<form id="buyForm">
|
||||
<div class="buy-grid">
|
||||
<input class="buy-input full" name="customer_name" autocomplete="name" placeholder="Nom complet" required>
|
||||
<input class="buy-input full" name="address" autocomplete="street-address" placeholder="Adreça postal" required>
|
||||
<input class="buy-input" name="postal_code" autocomplete="postal-code" placeholder="Codi postal" required>
|
||||
<input class="buy-input" name="city" autocomplete="address-level2" placeholder="Ciutat" required>
|
||||
<input class="buy-input" name="province" autocomplete="address-level1" placeholder="Província" required>
|
||||
<input class="buy-input" name="phone" autocomplete="tel" placeholder="Telèfon" required>
|
||||
<input class="buy-input full" type="email" name="email" autocomplete="email" placeholder="Correu electrònic" required>
|
||||
<input type="hidden" name="product_code">
|
||||
<input type="hidden" name="product_name">
|
||||
<input type="hidden" name="price">
|
||||
<input type="hidden" name="quantity" value="1">
|
||||
<div class="buy-head">
|
||||
<div class="buy-head-brand">
|
||||
<img src="assets/logo/bloodbros-sports-logo.png" alt="Blood Bros Sports" class="buy-head-logo">
|
||||
<div>
|
||||
<h2 class="buy-title">Comprar ara</h2>
|
||||
<p class="buy-subtitle">Omple les teves dades i et redirigirem al pagament segur amb Stripe.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="buyError" class="buy-error"></div>
|
||||
<div class="buy-actions">
|
||||
<button type="button" class="buy-btn buy-btn-secondary" id="buyCancel">Cancel·la</button>
|
||||
<button type="submit" class="buy-btn buy-btn-primary">Continuar al pagament</button>
|
||||
</div>
|
||||
<div id="buySummary" class="buy-summary-card">
|
||||
<div class="buy-summary-media">
|
||||
<img id="buySummaryImage" src="" alt="">
|
||||
</div>
|
||||
</form>
|
||||
<div class="buy-summary-info">
|
||||
<strong id="buySummaryCode">-</strong>
|
||||
<div id="buySummaryMeta">Preu: - · Stock visible: -</div>
|
||||
</div>
|
||||
</div>
|
||||
<form id="buyForm">
|
||||
<div class="buy-grid">
|
||||
<input class="buy-input full" name="customer_name" autocomplete="name" placeholder="Nom complet" required>
|
||||
|
||||
<input class="buy-input" name="phone" autocomplete="tel" placeholder="Telèfon" required>
|
||||
<input class="buy-input" type="email" name="email" autocomplete="email" placeholder="Correu electrònic" required>
|
||||
|
||||
<div class="buy-delivery full">
|
||||
<label class="buy-check">
|
||||
<input type="checkbox" id="shippingToggle" name="shipping_requested" value="1">
|
||||
<span>Vull enviament per <strong>7,99 €</strong></span>
|
||||
</label>
|
||||
<div class="buy-delivery-note">
|
||||
Si no marques aquesta opció, quedarem amb tu per WhatsApp per entregar-te les ulleres en persona a Lleida o Mollerussa. Si prefereixes enviament, marca aquesta casella.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="shippingFields" class="buy-grid full" style="display:none;">
|
||||
<input class="buy-input full" name="address" autocomplete="street-address" placeholder="Adreça postal">
|
||||
<input class="buy-input" name="postal_code" autocomplete="postal-code" placeholder="Codi postal">
|
||||
<input class="buy-input" name="city" autocomplete="address-level2" placeholder="Ciutat">
|
||||
<input class="buy-input" name="province" autocomplete="address-level1" placeholder="Província">
|
||||
</div>
|
||||
|
||||
<div id="buyTotals" class="buy-totals full">
|
||||
<div class="buy-total-row">
|
||||
<span>Subtotal producte</span>
|
||||
<strong id="buySubtotal">-</strong>
|
||||
</div>
|
||||
<div class="buy-total-row">
|
||||
<span>Enviament</span>
|
||||
<strong id="buyShippingCost">0,00 €</strong>
|
||||
</div>
|
||||
<div class="buy-total-row buy-total-final">
|
||||
<span>Total</span>
|
||||
<strong id="buyTotalAmount">-</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="shipping_method" value="pickup">
|
||||
<input type="hidden" name="product_code">
|
||||
<input type="hidden" name="product_name">
|
||||
<input type="hidden" name="price">
|
||||
<input type="hidden" name="quantity" value="1">
|
||||
</div>
|
||||
|
||||
<div id="buyError" class="buy-error"></div>
|
||||
|
||||
<div class="buy-actions">
|
||||
<button type="button" class="buy-btn buy-btn-secondary" id="buyCancel">Cancel·la</button>
|
||||
<button type="submit" class="buy-btn buy-btn-primary">Continuar al pagament</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" src="js/app.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user