← back to Costa Rica App
tmp/shots-html/03-booking.html
53 lines
<!doctype html><html><head><meta charset="utf-8">
<style>
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}
html,body{width:1320px;height:2868px;overflow:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:#f6f7f5;color:#1a2b22}
.status{height:120px;background:#0a7d55;display:flex;align-items:flex-end;justify-content:space-between;padding:0 60px 14px;color:#fff;font-weight:600;font-size:40px}
.status .right{display:flex;gap:18px;align-items:center;font-size:34px}
.nav{background:#0a7d55;color:#fff;height:150px;display:flex;align-items:center;padding:0 48px;font-size:56px;font-weight:800;letter-spacing:.3px}
.nav .back{font-size:64px;font-weight:400;margin-right:28px}
.banner{background:#0a7d55;color:#fff;text-align:center;padding:70px 48px 84px}
.banner h1{font-size:78px;font-weight:900;line-height:1.05;letter-spacing:.5px}
.banner p{font-size:44px;opacity:.92;margin-top:26px;font-weight:500;line-height:1.3}
.body{padding:44px 48px}
.search{background:#fff;border:2px solid #e2e5e0;border-radius:22px;height:110px;display:flex;align-items:center;padding:0 40px;color:#9aa39c;font-size:42px;flex:1}
.chips{display:flex;gap:22px;margin:36px 0 12px;flex-wrap:wrap}
.chip{border:3px solid #0a7d55;color:#0a7d55;border-radius:44px;padding:22px 44px;font-size:40px;font-weight:600;background:#fff}
.chip.on{background:#0a7d55;color:#fff}
.card{background:#fff;border:2px solid #e8ebe6;border-radius:28px;padding:40px;margin-top:30px;position:relative}
.card .name{font-size:52px;font-weight:800;color:#1a2b22}
.card .meta{color:#6b756e;font-size:38px;margin-top:12px}
.card .price{color:#0a7d55;font-size:50px;font-weight:800;margin-top:26px}
.card .price .per{color:#6b756e;font-weight:400;font-size:38px}
.card .star{position:absolute;top:40px;right:44px;color:#b8860b;font-size:44px;font-weight:700}
.badge{font-weight:800;text-transform:capitalize;font-size:42px}
</style></head><body>
<div class="status"><span>9:41</span><span class="right">●●● 5G ▮▮▮</span></div>
<div class="nav"><span class="back">‹</span>Book</div>
<div class="body">
<div style="font-size:54px;font-weight:800;color:#1a2b22">Villa Pacífica — Tamarindo</div>
<div style="background:#fff;border:2px solid #e8ebe6;border-radius:28px;padding:40px 48px;margin-top:36px">
<div style="display:flex;justify-content:space-between;align-items:center">
<div><div style="color:#6b756e;font-size:34px">Check-in</div><div style="font-weight:800;color:#1a2b22;font-size:46px;margin-top:6px">Fri, Mar 6</div></div>
<div style="color:#6b756e;font-size:44px">→</div>
<div style="text-align:right"><div style="color:#6b756e;font-size:34px">Check-out</div><div style="font-weight:800;color:#1a2b22;font-size:46px;margin-top:6px">Wed, Mar 11</div></div>
</div>
<div style="height:2px;background:#eee;margin:26px 0"></div>
<div style="display:flex;justify-content:space-between;color:#33413a;font-size:42px"><span>5 nights · 4 guests</span><span style="font-weight:700">$113/night</span></div>
</div>
<div style="background:#fff;border:2px solid #e8ebe6;border-radius:28px;padding:48px;margin-top:32px">
<div style="display:flex;justify-content:space-between;padding:14px 0;font-size:42px;color:#6b756e"><span>Subtotal</span><span style="color:#1a2b22">$567</span></div>
<div style="display:flex;justify-content:space-between;padding:14px 0;font-size:42px;color:#6b756e"><span>Cleaning</span><span style="color:#1a2b22">$40</span></div>
<div style="display:flex;justify-content:space-between;padding:14px 0;font-size:42px;color:#6b756e"><span>Service fee</span><span style="color:#1a2b22">$61</span></div>
<div style="height:2px;background:#eee;margin:20px 0"></div>
<div style="display:flex;justify-content:space-between;padding:14px 0;font-size:52px;font-weight:800;color:#1a2b22"><span>Total</span><span style="color:#1a2b22">$668</span></div>
</div>
<div style="margin-top:48px;font-weight:700;color:#1a2b22;font-size:48px">Pay with</div>
<div style="background:#0a7d55;height:150px;border-radius:30px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:50px;font-weight:700;margin-top:32px">💳 Card (USD/CRC)</div>
<div style="background:#fff;border:4px solid #0a7d55;height:150px;border-radius:30px;display:flex;align-items:center;justify-content:center;color:#0a7d55;font-size:50px;font-weight:700;margin-top:30px">📱 SINPE Móvil</div>
<div style="text-align:center;color:#6b756e;font-size:40px;margin-top:40px;line-height:1.35">Pay by international card or locally with SINPE Móvil — the way Costa Rica actually pays.</div>
<div style="display:flex;align-items:center;justify-content:center;gap:18px;background:#eef6f1;border-radius:26px;padding:34px;margin-top:40px;color:#1a2b22;font-size:40px;font-weight:600">🛡️ Free cancellation before check-in · Booking protected</div>
</div>
</body></html>