← back to Costa Rica App
tmp/shots-html/04-trips.html
68 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>My Bookings</div>
<div class="body">
<div style="font-size:52px;font-weight:800;color:#1a2b22;margin-bottom:8px">Your trips, all in one place</div>
<div style="background:#fff;border:2px solid #e8ebe6;border-radius:28px;padding:40px;margin-top:30px">
<div style="display:flex;justify-content:space-between;align-items:center">
<div style="font-size:50px;font-weight:700;color:#1a2b22;flex:1">Villa Pacífica — Tamarindo</div>
<div class="badge" style="color:#0a7d55">Confirmed</div>
</div>
<div style="color:#6b756e;font-size:36px;margin-top:16px">CR-8F42A · Sep 10 → Sep 13</div>
<div style="color:#0a7d55;font-size:48px;font-weight:700;margin-top:22px">$668</div>
</div>
<div style="background:#fff;border:2px solid #e8ebe6;border-radius:28px;padding:40px;margin-top:30px">
<div style="display:flex;justify-content:space-between;align-items:center">
<div style="font-size:50px;font-weight:700;color:#1a2b22;flex:1">Arenal Volcano Sunrise Hike</div>
<div class="badge" style="color:#0a7d55">Confirmed</div>
</div>
<div style="color:#6b756e;font-size:36px;margin-top:16px">CR-2B19C · Sep 14</div>
<div style="color:#0a7d55;font-size:48px;font-weight:700;margin-top:22px">$130</div>
</div>
<div style="background:#fff;border:2px solid #e8ebe6;border-radius:28px;padding:40px;margin-top:30px">
<div style="display:flex;justify-content:space-between;align-items:center">
<div style="font-size:50px;font-weight:700;color:#1a2b22;flex:1">Nosara Beachfront Casa</div>
<div class="badge" style="color:#b8860b">Pending</div>
</div>
<div style="color:#6b756e;font-size:36px;margin-top:16px">CR-9C55D · Oct 02 → Oct 06</div>
<div style="color:#0a7d55;font-size:48px;font-weight:700;margin-top:22px">$960</div>
</div>
<div style="background:#fff;border:2px solid #e8ebe6;border-radius:28px;padding:40px;margin-top:30px">
<div style="display:flex;justify-content:space-between;align-items:center">
<div style="font-size:50px;font-weight:700;color:#1a2b22;flex:1">Monteverde Zipline</div>
<div class="badge" style="color:#356">Completed</div>
</div>
<div style="color:#6b756e;font-size:36px;margin-top:16px">CR-3A77E · Aug 22</div>
<div style="color:#0a7d55;font-size:48px;font-weight:700;margin-top:22px">$158</div>
</div>
</div>
</body></html>