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: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F5F6F8;15    border-radius: 40px;16    box-shadow: 0 8px 24px rgba(0,0,0,0.12);17    color: #1F2A44;18  }19 20  /* Top status bar */21  .statusbar {22    height: 90px;23    display: flex;24    align-items: center;25    padding: 0 36px;26    font-size: 34px;27    color: #4b515b;28  }29  .statusbar .right { margin-left: auto; display: flex; gap: 20px; align-items: center; }30  .status-icon {31    width: 36px; height: 36px; border-radius: 6px; background: #E0E0E0;32    border: 1px solid #BDBDBD; display: flex; justify-content: center; align-items: center; font-size: 22px; color: #757575;33  }34 35  /* Header with back */36  .header {37    background: #FFFFFF;38    padding: 24px 36px 28px 36px;39    border-bottom: 1px solid #E7E7EA;40  }41  .header-top { display: flex; align-items: center; gap: 24px; }42  .back-btn {43    width: 64px; height: 64px; border-radius: 32px; display: flex; justify-content: center; align-items: center;44  }45  .title { font-size: 48px; font-weight: 700; letter-spacing: 0.2px; }46  .subtitle { font-size: 28px; color: #6A6F7C; margin-top: 6px; }47  .airport-line { font-size: 30px; color: #3E4552; margin-top: 20px; opacity: 0.8; }48  .hr { height: 1px; background: #D9DADF; margin: 28px 0 0 0; }49 50  /* Cards */51  .content { padding: 24px; }52  .card {53    background: #FFFFFF;54    border-radius: 28px;55    box-shadow: 0 2px 4px rgba(0,0,0,0.06);56    padding: 40px;57    margin: 24px 12px;58  }59  .section-title {60    font-size: 34px;61    font-weight: 700;62    margin-bottom: 16px;63  }64  .muted { color: #6A6F7C; }65  .row { display: flex; align-items: center; gap: 20px; }66  .tag-icon {67    width: 44px; height: 44px;68    display: inline-flex; justify-content: center; align-items: center;69  }70  .link { color: #3B6EF3; font-size: 30px; margin-top: 22px; }71  .pill-btn {72    margin-top: 24px;73    width: 480px;74    height: 96px;75    border-radius: 24px;76    border: 2px solid #D6D7DA;77    display: flex; align-items: center; justify-content: center;78    color: #3B6EF3;79    font-weight: 700; font-size: 32px; background: #FAFAFB;80  }81 82  .flight-title { font-size: 44px; font-weight: 700; margin-bottom: 12px; }83  .flight-sub { font-size: 30px; color: #6A6F7C; margin-bottom: 16px; }84  .airline-row { display: flex; align-items: center; gap: 16px; font-size: 30px; color: #3E4552; }85  .airline-logo {86    width: 40px; height: 40px; background: #E0E0E0; border: 1px solid #BDBDBD;87    display: flex; justify-content: center; align-items: center; color: #757575; font-size: 18px; border-radius: 6px;88  }89  .divider { height: 1px; background: #D9DADF; margin: 32px 0; }90 91  /* Price Drop Protection */92  .price-header { display: flex; align-items: center; gap: 18px; }93  .shield-icon { width: 48px; height: 48px; }94  .price-row { display: flex; align-items: center; margin-top: 20px; }95  .price-row .desc { flex: 1; font-size: 30px; color: #3E4552; }96  .price-right { display: flex; align-items: center; gap: 20px; }97  .price { font-size: 30px; color: #1F2A44; }98  .toggle {99    width: 132px; height: 64px; border-radius: 32px; background: #C9CBD1; position: relative;100  }101  .toggle .knob {102    width: 64px; height: 64px; border-radius: 32px; background: #FFFFFF; border: 2px solid #D0D3DA;103    position: absolute; right: 0; top: 0; display: flex; align-items: center; justify-content: center; color: #7A7F89; font-weight: 700;104  }105 106  /* Bottom fixed bar */107  .bottom-bar {108    position: absolute;109    left: 0; right: 0; bottom: 0;110    height: 210px;111    background: #FFFFFF;112    box-shadow: 0 -8px 20px rgba(0,0,0,0.08);113    display: flex; align-items: center; justify-content: space-between;114    padding: 32px 36px;115  }116  .total { font-size: 28px; color: #6A6F7C; }117  .amount { font-size: 52px; font-weight: 800; color: #1F2A44; margin-top: 8px; }118  .summary-link { color: #3B6EF3; font-size: 30px; margin-top: 6px; }119  .checkout-btn {120    width: 360px; height: 120px; border-radius: 28px; background: #3B6EF3; color: #FFFFFF;121    display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 700;122  }123</style>124</head>125<body>126<div id="render-target">127 128  <!-- Status bar -->129  <div class="statusbar">130    <div>4:14</div>131    <div class="right">132      <div class="status-icon">WiFi</div>133      <div class="status-icon">🔋</div>134    </div>135  </div>136 137  <!-- Header -->138  <div class="header">139    <div class="header-top">140      <div class="back-btn">141        <svg width="42" height="42" viewBox="0 0 24 24">142          <path d="M15 18l-6-6 6-6" fill="none" stroke="#3367F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>143        </svg>144      </div>145      <div>146        <div class="title">Review your trip to BOM</div>147        <div class="subtitle">Jul 22 - Jul 28, 2 travelers</div>148      </div>149    </div>150    <div class="airport-line">Chhatrapati Shivaji Intl. (BOM)</div>151    <div class="hr"></div>152  </div>153 154  <div class="content">155 156    <!-- Fare card -->157    <div class="card">158      <div class="section-title">Your fare: Economy Hbo</div>159      <div class="row">160        <div class="tag-icon">161          <svg width="44" height="44" viewBox="0 0 24 24">162            <path d="M3 7v10l6 4 12-7V4L9 11V7H3z" fill="#4B5A72"/>163          </svg>164        </div>165        <div class="muted" style="font-size:30px;">Upgrade for $57 roundtrip to get 1st checked bag included.</div>166      </div>167      <div class="pill-btn">See upgrade options</div>168    </div>169 170    <!-- Flight segment card -->171    <div class="card">172      <div class="flight-title">Mumbai to Abu Dhabi</div>173      <div class="flight-sub">9:55pm - 11:20pm (2h 55m, nonstop)</div>174      <div class="airline-row">175        <div class="airline-logo">[IMG: Airline logo]</div>176        <div>Etihad Airways · Fri, Jul 28</div>177      </div>178      <div class="link">Show details</div>179      <div class="divider"></div>180 181      <div class="section-title">Your fare: Economy Hbo</div>182      <div class="row">183        <div class="tag-icon">184          <svg width="44" height="44" viewBox="0 0 24 24">185            <path d="M3 7v10l6 4 12-7V4L9 11V7H3z" fill="#4B5A72"/>186          </svg>187        </div>188        <div class="muted" style="font-size:30px;">Upgrade for $57 roundtrip to get 1st checked bag included.</div>189      </div>190      <div class="pill-btn">See upgrade options</div>191    </div>192 193    <!-- Price Drop Protection -->194    <div class="card">195      <div class="price-header">196        <svg class="shield-icon" viewBox="0 0 24 24">197          <path d="M12 2l7 3v6c0 5-3.5 8-7 11-3.5-3-7-6-7-11V5l7-3z" fill="#4B5A72"/>198          <path d="M7 11l3 3 7-7" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>199        </svg>200        <div class="section-title" style="margin:0;">Price Drop Protection</div>201      </div>202      <div class="price-row">203        <div class="desc">We’ll refund the difference if the price drops before you fly.</div>204        <div class="price-right">205          <div class="price">$11</div>206          <div class="toggle">207            <div class="knob">×</div>208          </div>209        </div>210      </div>211      <div class="link" style="margin-top:24px;">How it works</div>212    </div>213 214  </div>215 216  <!-- Bottom bar -->217  <div class="bottom-bar">218    <div>219      <div class="total">Trip total</div>220      <div class="amount">$547</div>221      <div class="summary-link">View price summary</div>222    </div>223    <div class="checkout-btn">Check out</div>224  </div>225 226</div>227</body>228</html>