GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Trip Review UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #f6f6f8;14 color: #202124;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 100px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 padding: 0 40px;28 font-size: 34px;29 color: #4a4a4a;30 background: #ffffff;31 }32 .status-icons {33 display: flex;34 gap: 26px;35 align-items: center;36 }37 .icon {38 width: 36px;39 height: 36px;40 }41 42 /* App bar */43 .app-bar {44 position: absolute;45 top: 100px;46 left: 0;47 width: 1080px;48 height: 180px;49 background: #ffffff;50 border-bottom: 1px solid #e0e0e0;51 display: flex;52 align-items: center;53 padding: 24px 40px;54 box-sizing: border-box;55 }56 .app-bar .back {57 width: 72px;58 height: 72px;59 display: flex;60 align-items: center;61 justify-content: center;62 margin-right: 16px;63 }64 .app-title {65 display: flex;66 flex-direction: column;67 gap: 6px;68 }69 .title {70 font-size: 52px;71 font-weight: 700;72 color: #202124;73 }74 .subtitle {75 font-size: 30px;76 color: #5f6368;77 }78 79 /* Main content */80 .content {81 position: absolute;82 top: 280px;83 left: 0;84 width: 1080px;85 height: 1820px;86 padding: 24px 32px 260px 32px;87 box-sizing: border-box;88 overflow: hidden;89 }90 91 .card {92 background: #ffffff;93 border-radius: 26px;94 box-shadow: 0 1px 0 rgba(0,0,0,0.08);95 padding: 36px;96 margin: 24px 8px;97 }98 99 .divider {100 height: 1px;101 background: #e0e0e0;102 margin: 8px 0 24px 0;103 }104 105 .label-strong {106 font-weight: 700;107 font-size: 34px;108 color: #202124;109 }110 .info-row {111 display: flex;112 align-items: center;113 gap: 18px;114 color: #3c4043;115 font-size: 30px;116 margin: 18px 0 6px 0;117 }118 .upgrade-btn {119 display: inline-flex;120 align-items: center;121 justify-content: center;122 padding: 22px 32px;123 border: 2px solid #d9dce2;124 border-radius: 20px;125 font-size: 32px;126 color: #1a73e8;127 background: #ffffff;128 margin-top: 22px;129 width: 460px;130 }131 132 .section-title {133 font-size: 48px;134 font-weight: 700;135 color: #202124;136 margin-bottom: 8px;137 }138 .section-sub {139 font-size: 30px;140 color: #5f6368;141 margin-bottom: 14px;142 }143 .airline-row {144 display: flex;145 align-items: center;146 gap: 14px;147 font-size: 30px;148 color: #3c4043;149 margin-bottom: 12px;150 }151 .airline-logo {152 width: 42px;153 height: 42px;154 background: #E0E0E0;155 border: 1px solid #BDBDBD;156 display: flex;157 align-items: center;158 justify-content: center;159 color: #757575;160 font-size: 20px;161 border-radius: 4px;162 }163 .link {164 color: #1a73e8;165 font-size: 30px;166 margin: 8px 0 22px 0;167 }168 169 .flight-row {170 display: flex;171 align-items: flex-start;172 gap: 16px;173 margin: 12px 0 6px 0;174 }175 .flight-time {176 font-size: 38px;177 font-weight: 700;178 color: #202124;179 }180 .flight-airport {181 font-size: 30px;182 color: #5f6368;183 margin-left: 56px;184 margin-top: 4px;185 }186 .bullet {187 font-size: 30px;188 color: #3c4043;189 margin: 12px 0 0 56px;190 line-height: 1.6;191 }192 193 /* Bottom checkout bar */194 .checkout-bar {195 position: absolute;196 bottom: 52px;197 left: 0;198 width: 1080px;199 background: #ffffff;200 box-shadow: 0 -3px 12px rgba(0,0,0,0.10);201 padding: 24px 40px;202 display: flex;203 align-items: center;204 justify-content: space-between;205 box-sizing: border-box;206 height: 170px;207 }208 .total {209 display: flex;210 flex-direction: column;211 gap: 8px;212 }213 .total .label {214 font-size: 28px;215 color: #5f6368;216 }217 .price {218 font-size: 56px;219 font-weight: 800;220 color: #202124;221 }222 .view-link {223 font-size: 30px;224 color: #1a73e8;225 }226 .primary-btn {227 background: #3b6ee6;228 color: #ffffff;229 font-size: 36px;230 font-weight: 600;231 padding: 26px 48px;232 border-radius: 22px;233 border: none;234 min-width: 280px;235 }236 237 /* Bottom gesture bar */238 .gesture {239 position: absolute;240 bottom: 12px;241 left: 50%;242 transform: translateX(-50%);243 width: 300px;244 height: 10px;245 background: #000000;246 opacity: 0.15;247 border-radius: 6px;248 }249</style>250</head>251<body>252<div id="render-target">253 254 <!-- Status Bar -->255 <div class="status-bar">256 <div>4:14</div>257 <div class="status-icons">258 <!-- small dots/clouds as placeholders -->259 <svg class="icon" viewBox="0 0 24 24">260 <circle cx="6" cy="12" r="3" fill="#9aa0a6"></circle>261 <circle cx="14" cy="12" r="3" fill="#9aa0a6"></circle>262 </svg>263 <svg class="icon" viewBox="0 0 24 24">264 <path d="M3 18h18l-4-6-4 4-3-5z" fill="#5f6368"></path>265 </svg>266 <svg class="icon" viewBox="0 0 24 24">267 <rect x="9" y="2" width="6" height="20" fill="#5f6368"></rect>268 </svg>269 </div>270 </div>271 272 <!-- App Bar -->273 <div class="app-bar">274 <div class="back">275 <svg width="56" height="56" viewBox="0 0 24 24">276 <path d="M15 18L9 12l6-6" stroke="#1a73e8" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>277 </svg>278 </div>279 <div class="app-title">280 <div class="title">Review your trip to BOM</div>281 <div class="subtitle">Jul 22 - Jul 28, 2 travelers</div>282 </div>283 </div>284 285 <!-- Content -->286 <div class="content">287 288 <!-- Fare snippet card -->289 <div class="card">290 <div class="divider"></div>291 <div class="label-strong">Your fare: Economy Hbo</div>292 293 <div class="info-row">294 <svg width="34" height="34" viewBox="0 0 24 24">295 <path d="M3 7l8-3 10 10-7 4L3 7z" fill="#5f6368"></path>296 <circle cx="8" cy="9" r="1.3" fill="#ffffff"></circle>297 </svg>298 <span>Upgrade for $57 roundtrip to get 1st checked bag included.</span>299 </div>300 301 <div class="upgrade-btn">See upgrade options</div>302 </div>303 304 <!-- Trip segment card -->305 <div class="card">306 <div class="section-title">Mumbai to Abu Dhabi</div>307 <div class="section-sub">9:55pm - 11:20pm (2h 55m, nonstop)</div>308 <div class="airline-row">309 <div class="airline-logo">[IMG]</div>310 <span>Etihad Airways · Fri, Jul 28</span>311 </div>312 <div class="link">Hide details</div>313 314 <div class="flight-row">315 <svg width="44" height="44" viewBox="0 0 24 24">316 <path d="M2 17h20" stroke="#5f6368" stroke-width="1.8"></path>317 <path d="M3 13l7-2 2 2 7-1-3 2-7 2-4-2z" fill="#5f6368"></path>318 </svg>319 <div>320 <div class="flight-time">9:55pm - Mumbai</div>321 <div class="flight-airport">Chhatrapati Shivaji Intl. (BOM)</div>322 </div>323 </div>324 325 <div class="bullet">2h 55m flight</div>326 <div class="bullet">Etihad Airways 203</div>327 <div class="bullet">Airbus A350-1000</div>328 <div class="bullet">Economy/Coach (E)</div>329 330 <div class="flight-row" style="margin-top: 20px;">331 <svg width="44" height="44" viewBox="0 0 24 24">332 <path d="M2 17h20" stroke="#5f6368" stroke-width="1.8"></path>333 <path d="M3 13l7-2 2 2 7-1-3 2-7 2-4-2z" fill="#5f6368"></path>334 </svg>335 <div>336 <div class="flight-time">11:20pm - Abu Dhabi</div>337 <div class="flight-airport">Abu Dhabi Intl. (AUH)</div>338 </div>339 </div>340 341 <div class="divider" style="margin-top: 24px;"></div>342 343 <div class="label-strong">Your fare: Economy Hbo</div>344 <div class="info-row">345 <svg width="34" height="34" viewBox="0 0 24 24">346 <path d="M3 7l8-3 10 10-7 4L3 7z" fill="#5f6368"></path>347 <circle cx="8" cy="9" r="1.3" fill="#ffffff"></circle>348 </svg>349 <span>Upgrade for $57 roundtrip to get 1st checked bag included.</span>350 </div>351 </div>352 353 </div>354 355 <!-- Bottom checkout bar -->356 <div class="checkout-bar">357 <div class="total">358 <div class="label">Trip total</div>359 <div class="price">$547</div>360 <div class="view-link">View price summary</div>361 </div>362 <button class="primary-btn">Check out</button>363 </div>364 365 <!-- Gesture bar -->366 <div class="gesture"></div>367 368</div>369</body>370</html>