GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Review your trip to BOM</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F5F6F8;15    border-radius: 36px;16    box-shadow: 0 8px 30px rgba(0,0,0,0.15);17  }18 19  .status-bar {20    height: 120px;21    padding: 0 48px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #1f2b3d;26    font-size: 40px;27  }28  .status-icons { display: flex; gap: 28px; align-items: center; color: #606b80; }29 30  .header {31    padding: 10px 48px 24px 48px;32    border-bottom: 1px solid #E6E8EE;33    background: #fff;34  }35  .header-top {36    display: flex;37    align-items: center;38    gap: 24px;39    margin-top: 8px;40  }41  .back-btn {42    width: 72px; height: 72px;43    display: inline-flex; align-items: center; justify-content: center;44    border-radius: 36px;45    background: #F0F3F7;46  }47  .title {48    font-size: 64px; font-weight: 700; color: #17233b; line-height: 1.15;49  }50  .subtitle {51    font-size: 36px; color: #6b7280; margin-top: 8px;52  }53 54  .breadcrumb {55    background: #F7F5F3;56    padding: 28px 48px;57    border-bottom: 1px solid #E6E8EE;58  }59  .crumb-row {60    display: flex; align-items: center; gap: 24px; color: #25324b; font-size: 40px;61  }62  .crumb-row .bold { font-weight: 700; }63  .change-flight {64    color: #1a73e8; font-size: 36px; margin-top: 14px;65  }66 67  .card {68    background: #ffffff;69    margin: 28px 36px;70    border-radius: 28px;71    box-shadow: 0 2px 6px rgba(0,0,0,0.04);72    padding: 36px;73  }74  .flex {75    display: flex; gap: 28px; align-items: flex-start;76  }77  .img-ph {78    width: 140px; height: 140px;79    background: #E0E0E0;80    border: 1px solid #BDBDBD;81    border-radius: 20px;82    color: #757575;83    display: flex; align-items: center; justify-content: center;84    font-size: 28px; text-align: center; padding: 10px;85  }86  .card h3 {87    margin: 0 0 12px 0; font-size: 48px; color: #19253f; font-weight: 700;88  }89  .card p {90    margin: 8px 0; font-size: 38px; color: #5e677a; line-height: 1.4;91  }92  .link { color: #1a73e8; font-size: 38px; }93 94  .flight-card h2 {95    margin: 0 0 12px 0; font-size: 56px; color: #19253f; font-weight: 800;96  }97  .flight-meta {98    font-size: 38px; color: #5e677a; margin-bottom: 12px;99  }100  .hide-details { color: #1a73e8; font-size: 38px; margin: 12px 0 18px 0; }101 102  .row {103    display: flex; align-items: center; gap: 18px;104    font-size: 48px; color: #19253f; font-weight: 700; margin: 24px 0 6px;105  }106  .row-sub { font-size: 38px; color: #5e677a; margin-left: 76px; }107 108  .spec { margin: 24px 0 0 76px; }109  .spec p { margin: 8px 0; font-size: 38px; color: #5e677a; }110 111  .divider {112    height: 1px; background: #DCE1EA; margin: 36px 0;113  }114 115  .fare-title { font-size: 44px; font-weight: 700; color: #19253f; margin-bottom: 18px; }116  .bullet {117    display: flex; align-items: center; gap: 16px; font-size: 38px; color: #5e677a;118  }119 120  .bottom-sheet {121    position: absolute; left: 0; bottom: 0; width: 100%; height: 240px;122    background: #ffffff;123    border-top: 1px solid #E6E8EE;124    box-shadow: 0 -8px 24px rgba(0,0,0,0.08);125    display: flex; align-items: center; justify-content: space-between;126    padding: 24px 48px;127  }128  .price {129    display: flex; flex-direction: column;130  }131  .price .amount { font-size: 64px; font-weight: 800; color: #19253f; }132  .price .label { font-size: 36px; color: #6b7280; }133  .price .link { font-size: 36px; margin-top: 6px; }134 135  .cta {136    background: #3367d6; color: #fff; font-weight: 700; font-size: 44px;137    border: none; border-radius: 24px; padding: 32px 48px;138  }139 140  .home-indicator {141    position: absolute; bottom: 12px; left: 50%;142    transform: translateX(-50%);143    width: 360px; height: 12px; border-radius: 8px; background: #0a0a0a;144    opacity: 0.8;145  }146 147  /* Simple icons */148  .icon { width: 44px; height: 44px; }149  .airplane path { stroke: #19253f; stroke-width: 4; fill: none; }150  .chev path { fill: #5e677a; }151  .tag path { fill: #5e677a; }152</style>153</head>154<body>155<div id="render-target">156 157  <!-- Status bar -->158  <div class="status-bar">159    <div>4:14</div>160    <div class="status-icons">161      <span>ovo</span>162      <span>☁️</span>163      <span>📶</span>164      <span>🔋</span>165    </div>166  </div>167 168  <!-- Header -->169  <div class="header">170    <div class="header-top">171      <div class="back-btn">172        <svg class="icon" viewBox="0 0 24 24">173          <path d="M15 18l-6-6 6-6" stroke="#1a73e8" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>174        </svg>175      </div>176      <div>177        <div class="title">Review your trip to BOM</div>178        <div class="subtitle">Jul 22 - Jul 28, 2 travelers</div>179      </div>180    </div>181  </div>182 183  <!-- Breadcrumb -->184  <div class="breadcrumb">185    <div class="crumb-row">186      <svg class="icon chev" viewBox="0 0 24 24">187        <path d="M9 6l-6 6 6 6" />188      </svg>189      <div>Etihad Airways • BOM→AUH</div>190      <svg class="icon chev" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>191      <div class="bold">Review your trip</div>192    </div>193    <div class="change-flight">Change flight</div>194  </div>195 196  <!-- Card: Flexible -->197  <div class="card">198    <div class="flex">199      <div class="img-ph">[IMG: Calendar + Shield]</div>200      <div>201        <h3>Stay flexible with no change fees</h3>202        <p>We recommend booking a flight with no change fees in case your plans change.</p>203        <div class="link">Change flights</div>204      </div>205    </div>206  </div>207 208  <!-- Card: Flight details -->209  <div class="card flight-card" style="margin-top: 20px;">210    <h2>Abu Dhabi to Mumbai</h2>211    <div class="flight-meta">3:40pm - 8:25pm (3h 15m, nonstop)</div>212    <div class="flight-meta">🛩️ Etihad Airways • Sat, Jul 22</div>213    <div class="hide-details">Hide details</div>214 215    <div class="row">216      <svg class="icon airplane" viewBox="0 0 24 24"><path d="M2 12h12l4-4m-4 4l4 4"/></svg>217      <div>3:40pm - Abu Dhabi</div>218    </div>219    <div class="row-sub">Abu Dhabi Intl. (AUH)</div>220 221    <div class="spec">222      <p>3h 15m flight</p>223      <p>Etihad Airways 204</p>224      <p>Airbus A350-1000</p>225      <p>Economy/Coach (E)</p>226    </div>227 228    <div class="row" style="margin-top: 36px;">229      <svg class="icon airplane" viewBox="0 0 24 24"><path d="M2 12h12l4-4m-4 4l4 4"/></svg>230      <div>8:25pm - Mumbai</div>231    </div>232    <div class="row-sub">Chhatrapati Shivaji Intl. (BOM)</div>233 234    <div class="divider"></div>235 236    <div class="fare-title">Your fare: Economy Hbo</div>237    <div class="bullet">238      <svg class="icon tag" viewBox="0 0 24 24"><path d="M3 12l9-9h6v6l-9 9-6-6z"/></svg>239      <span>Upgrade for $57 roundtrip to get 1st checked bag included.</span>240    </div>241  </div>242 243  <!-- Bottom sheet -->244  <div class="bottom-sheet">245    <div class="price">246      <div class="label">Trip total</div>247      <div class="amount">$547</div>248      <div class="link">View price summary</div>249    </div>250    <button class="cta">Check out</button>251  </div>252 253  <div class="home-indicator"></div>254</div>255</body>256</html>