GD-ML/AndroidCode

1<!DOCTYPE html>2<html>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; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FAFAFA;15    font-family: "Segoe UI", Arial, sans-serif;16    color: #202124;17  }18  .status-bar {19    height: 120px;20    padding: 0 48px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #5f6368;25    font-size: 34px;26  }27  .header {28    padding: 0 48px 24px 48px;29    border-bottom: 1px solid #eaecef;30  }31  .title-row {32    display: flex;33    align-items: center;34    gap: 24px;35  }36  .title {37    font-size: 56px;38    font-weight: 700;39    color: #1f2937;40    line-height: 1.2;41  }42  .subtitle {43    margin-top: 8px;44    font-size: 32px;45    color: #5f6368;46  }47  .arrow {48    width: 56px;49    height: 56px;50  }51  .breadcrumb {52    background: #F2F3F5;53    margin: 24px 0;54    padding: 28px 48px;55    display: flex;56    align-items: center;57    gap: 24px;58    font-size: 34px;59    color: #374151;60  }61  .crumb-left {62    display: flex;63    align-items: center;64    gap: 18px;65    flex: 1;66  }67  .crumb-right {68    font-weight: 700;69  }70  .crumb-link {71    display: block;72    margin-top: 8px;73    font-size: 32px;74    color: #1a73e8;75  }76  .card {77    background: #ffffff;78    border-radius: 28px;79    margin: 24px 36px;80    padding: 36px;81    box-shadow: 0 1px 0 rgba(0,0,0,0.06);82    border: 1px solid #ededed;83  }84  .flex {85    display: flex;86    align-items: center;87    gap: 28px;88  }89  .img-ph {90    width: 120px;91    height: 120px;92    background: #E0E0E0;93    border: 1px solid #BDBDBD;94    display: flex;95    justify-content: center;96    align-items: center;97    color: #757575;98    font-size: 26px;99    border-radius: 16px;100  }101  .card h3 {102    margin: 0;103    font-size: 40px;104    font-weight: 700;105    color: #1f2937;106  }107  .card p {108    margin: 8px 0 0 0;109    font-size: 32px;110    color: #475569;111    line-height: 1.45;112  }113  .link {114    margin-top: 16px;115    font-size: 32px;116    color: #1a73e8;117  }118  .flight-title {119    font-size: 48px;120    font-weight: 700;121    margin: 0 0 10px 0;122    color: #0f172a;123  }124  .meta {125    font-size: 32px;126    color: #4b5563;127  }128  .airline-row {129    margin-top: 10px;130    display: flex;131    align-items: center;132    gap: 16px;133    font-size: 32px;134    color: #4b5563;135  }136  .divider {137    height: 1px;138    background: #e5e7eb;139    margin: 24px 0;140  }141  .fare-label {142    font-size: 34px;143    font-weight: 700;144    color: #1f2937;145    margin-bottom: 8px;146  }147  .tag-row {148    display: flex;149    align-items: flex-start;150    gap: 16px;151    color: #374151;152    font-size: 32px;153    line-height: 1.4;154    margin-bottom: 24px;155  }156  .tag-icon {157    width: 40px; height: 40px;158  }159  .outline-btn {160    display: inline-flex;161    align-items: center;162    justify-content: center;163    padding: 24px 32px;164    font-size: 34px;165    font-weight: 600;166    color: #1a73e8;167    border: 2px solid #dadce0;168    border-radius: 20px;169    background: #fff;170    width: 460px;171  }172  .show-details {173    margin-top: 12px;174    color: #1a73e8;175    font-size: 32px;176  }177  .checkout-bar {178    position: absolute;179    left: 0; right: 0; bottom: 0;180    height: 220px;181    background: #ffffff;182    box-shadow: 0 -8px 20px rgba(0,0,0,0.08);183    display: flex;184    align-items: center;185    justify-content: space-between;186    padding: 32px 48px;187    border-top: 1px solid #e6e6e6;188  }189  .total-col .label {190    font-size: 28px;191    color: #6b7280;192  }193  .total-col .price {194    font-size: 64px;195    font-weight: 800;196    color: #0f172a;197    margin-top: 6px;198  }199  .total-col .summary {200    margin-top: 6px;201    font-size: 32px;202    color: #1a73e8;203  }204  .checkout-btn {205    width: 320px;206    height: 112px;207    background: #3367D6;208    color: #fff;209    font-size: 38px;210    font-weight: 700;211    border: none;212    border-radius: 28px;213    box-shadow: 0 4px 10px rgba(51,103,214,0.3);214  }215  .home-indicator {216    position: absolute;217    bottom: 10px;218    left: 50%;219    transform: translateX(-50%);220    width: 240px; height: 10px;221    background: #1a1a1a;222    border-radius: 6px;223    opacity: 0.25;224  }225</style>226</head>227<body>228<div id="render-target">229 230  <div class="status-bar">231    <div>4:11</div>232    <div>◦◦◦ 🕸️ ☁️</div>233  </div>234 235  <div class="header">236    <div class="title-row">237      <svg class="arrow" viewBox="0 0 24 24">238        <path d="M15 6l-6 6 6 6" fill="none" stroke="#1a73e8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>239      </svg>240      <div>241        <div class="title">Review your trip to BOM</div>242        <div class="subtitle">Jul 22 - Jul 28, 2 travelers</div>243      </div>244    </div>245  </div>246 247  <div class="breadcrumb">248    <div class="crumb-left">249      <svg width="28" height="28" viewBox="0 0 24 24">250        <path d="M9 4l-6 8 6 8" fill="none" stroke="#cbd5e1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>251      </svg>252      <span>Etihad Airways • BOM→AUH</span>253      <span style="color:#9aa0a6;">›</span>254      <span class="crumb-right">Review your trip</span>255    </div>256    <div style="flex-basis: 100%;"></div>257  </div>258  <div style="padding: 0 48px; margin-top: -12px; color:#1a73e8; font-size:32px;">Change flight</div>259 260  <div class="card">261    <div class="flex">262      <div class="img-ph">[IMG: Calendar + Shield]</div>263      <div>264        <h3>Stay flexible with no change fees</h3>265        <p>We recommend booking a flight with no change fees in case your plans change.</p>266        <div class="link">Change flights</div>267      </div>268    </div>269  </div>270 271  <div class="card">272    <div>273      <div class="flight-title">Abu Dhabi to Mumbai</div>274      <div class="meta">3:40pm - 8:25pm (3h 15m, nonstop)</div>275      <div class="airline-row">276        <div class="img-ph" style="width:44px;height:44px;border-radius:8px;font-size:18px;">[IMG]</div>277        <span>Etihad Airways • Sat, Jul 22</span>278      </div>279      <div class="show-details">Show details</div>280      <div class="divider"></div>281      <div class="fare-label">Your fare: Economy Hbo</div>282      <div class="tag-row">283        <svg class="tag-icon" viewBox="0 0 24 24">284          <path d="M3 7v10a2 2 0 0 0 2 2h8l8-8-8-8H5a2 2 0 0 0-2 2z" fill="none" stroke="#64748b" stroke-width="2" stroke-linejoin="round"></path>285          <circle cx="7" cy="9" r="1.5" fill="#64748b"></circle>286        </svg>287        <div>Upgrade for $57 roundtrip to get 1st checked bag included.</div>288      </div>289      <button class="outline-btn">See upgrade options</button>290    </div>291  </div>292 293  <div class="card">294    <div class="flight-title">Mumbai to Abu Dhabi</div>295    <div class="meta">9:55pm - 11:20pm (2h 55m, nonstop)</div>296    <div class="airline-row">297      <div class="img-ph" style="width:44px;height:44px;border-radius:8px;font-size:18px;">[IMG]</div>298      <span>Etihad Airways • Fri, Jul 28</span>299    </div>300    <div class="show-details">Show details</div>301    <div class="divider"></div>302  </div>303 304  <div class="checkout-bar">305    <div class="total-col">306      <div class="label">Trip total</div>307      <div class="price">$547</div>308      <div class="summary">View price summary</div>309    </div>310    <button class="checkout-btn">Check out</button>311  </div>312 313  <div class="home-indicator"></div>314</div>315</body>316</html>