`html/andre.html`

39 lines
<!doctype html><html><head><meta charset="utf-8"><style>
  *{margin:0;box-sizing:border-box}
  html,body{width:1000px;height:1400px}
  body{font-family:Inter,"SF Pro Display",system-ui,-apple-system,sans-serif;
    background:linear-gradient(165deg,#0b1728 0%,#0a1220 55%,#060c16 100%);color:#eaf2ff;
    display:flex;flex-direction:column;align-items:center;padding:70px 64px;position:relative;overflow:hidden}
  .glow{position:absolute;width:900px;height:900px;border-radius:50%;
    background:radial-gradient(circle, #f5b30122 0%, transparent 60%);top:-260px;right:-260px}
  .brand{display:flex;align-items:center;gap:16px;font-weight:800;font-size:40px;letter-spacing:.5px}
  .logo{width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,#f5b301,#2563eb);
    display:flex;align-items:center;justify-content:center;font-size:34px}
  .region{margin-top:8px;color:#8ea6c4;font-size:24px;letter-spacing:3px;text-transform:uppercase;font-weight:700}
  .who{margin-top:54px;text-align:center}
  .avatar{width:150px;height:150px;border-radius:50%;margin:0 auto 22px;
    background:linear-gradient(135deg,#1c2c46,#0f1a2b);border:3px solid #f5b301;
    display:flex;align-items:center;justify-content:center;font-size:64px;font-weight:800;color:#f5b301}
  .name{font-size:66px;font-weight:900;line-height:1}
  .role{margin-top:12px;font-size:32px;color:#b8c9e0;font-weight:600}
  .scan{margin-top:40px;font-size:38px;font-weight:800;letter-spacing:2px;color:#f5b301;text-transform:uppercase}
  .qrbox{margin-top:26px;background:#fff;border-radius:28px;padding:34px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
  .qrbox img{display:block;width:420px;height:420px;image-rendering:pixelated}
  .handle{margin-top:26px;font-size:30px;color:#dbe7f6;font-weight:700}
  .thanks{margin-top:10px;font-size:26px;color:#9fb3cd}
  .foot{position:absolute;bottom:56px;left:0;right:0;text-align:center;color:#6f88a8;font-size:24px;font-weight:600;letter-spacing:1px}
</style></head><body>
  <div class="glow"></div>
  <div class="brand"><span class="logo">🚗</span> Prestige Car Wash</div>
  <div class="region">San Fernando Valley, CA</div>
  <div class="who">
    <div class="avatar">A</div>
    <div class="name">Andre T.</div>
    <div class="role">Lead Detailer</div>
  </div>
  <div class="scan">Scan to tip me</div>
  <div class="qrbox"><img src="../qr/andre.png"></div>
  <div class="handle">prestigecarwash.com/tip/andre</div>
  <div class="thanks">Every tip goes straight to me — thank you! 🙏</div>
  <div class="foot">First come, first served · 6 lines · no appointment</div>
</body></html>