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 Trip UI</title>7<style>8  * { box-sizing: border-box; }9  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #121827; }10  #render-target {11    width: 1080px;12    height: 2400px;13    position: relative;14    overflow: hidden;15    background: #F5F3F2;16  }17 18  /* Status bar */19  .status-bar {20    height: 120px;21    padding: 24px 32px 0 32px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #1f2433;26    font-weight: 600;27    font-size: 34px;28  }29  .status-icons {30    display: flex;31    align-items: center;32    gap: 26px;33  }34  .icon {35    display: inline-flex;36    width: 42px;37    height: 42px;38    align-items: center;39    justify-content: center;40  }41  .icon svg { width: 100%; height: 100%; }42 43  /* App bar */44  .app-bar {45    height: 220px;46    padding: 24px 40px 32px 40px;47    border-bottom: 1px solid #E5E6EA;48    display: flex;49    align-items: flex-start;50    gap: 24px;51  }52  .back-btn {53    width: 64px;54    height: 64px;55    display: inline-flex;56    align-items: center;57    justify-content: center;58  }59  .title-wrap h1 {60    margin: 0;61    font-size: 56px;62    line-height: 1.15;63    font-weight: 800;64    color: #0F1D3A;65    letter-spacing: 0.2px;66  }67  .title-wrap .sub {68    margin-top: 12px;69    font-size: 28px;70    color: #6F7281;71    font-weight: 500;72  }73 74  /* Top subtle pill */75  .soft-pill {76    margin: 24px 40px 24px 40px;77    width: 720px;78    height: 28px;79    border-radius: 14px;80    background: #CFCFD1;81  }82 83  /* Cards */84  .card {85    width: 1000px;86    margin: 24px 40px;87    background: #ffffff;88    border-radius: 32px;89    padding: 48px;90    box-shadow: 0 0 0 1px rgba(0,0,0,0.03);91  }92  .card h2 {93    margin: 0 0 22px 0;94    font-size: 52px;95    font-weight: 800;96    color: #0F1D3A;97  }98  .airline-row {99    display: flex;100    align-items: center;101    gap: 18px;102    color: #5F6475;103    font-size: 30px;104    font-weight: 600;105  }106  .img-ph {107    width: 44px;108    height: 44px;109    background: #E0E0E0;110    border: 1px solid #BDBDBD;111    border-radius: 6px;112    display: flex;113    align-items: center;114    justify-content: center;115    color: #757575;116    font-size: 18px;117  }118  .divider {119    height: 2px;120    background: #C6CBD4;121    margin: 38px 0 28px 0;122  }123  .pill {124    height: 42px;125    border-radius: 21px;126    background: #C5C6CB;127    margin-bottom: 18px;128  }129  .pill.short { width: 280px; }130  .pill.med { width: 520px; }131  .pill.long { width: 720px; }132 133  /* Bottom sheet */134  .bottom-sheet {135    position: absolute;136    left: 0;137    right: 0;138    bottom: 120px;139    height: 240px;140    background: #ffffff;141    border-top: 1px solid #D9DCE4;142    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);143    padding: 36px 40px;144    display: flex;145    align-items: center;146    justify-content: space-between;147  }148  .total-wrap {149    display: flex;150    flex-direction: column;151    gap: 16px;152  }153  .total-title {154    font-size: 30px;155    color: #4A4F61;156    font-weight: 700;157  }158  .checkout-btn {159    background: #C4D0FB;160    color: #0F1D3A;161    font-size: 36px;162    font-weight: 800;163    padding: 34px 44px;164    border: none;165    border-radius: 28px;166    box-shadow: 0 1px 0 rgba(0,0,0,0.04);167  }168 169  /* System gesture bar */170  .gesture-bar {171    position: absolute;172    left: 0;173    right: 0;174    bottom: 0;175    height: 120px;176    background: #000000;177  }178  .gesture-pill {179    width: 220px;180    height: 14px;181    background: #CFCFD2;182    border-radius: 7px;183    position: absolute;184    left: 50%;185    top: 54%;186    transform: translate(-50%, -50%);187    opacity: 0.85;188  }189</style>190</head>191<body>192<div id="render-target">193 194  <!-- Status Bar -->195  <div class="status-bar">196    <div class="time">4:11</div>197    <div class="status-icons">198      <!-- “ovo” small text substitute -->199      <div style="font-size:22px; color:#6A6E7F; font-weight:700;">ovo</div>200      <!-- cloud icon -->201      <div class="icon">202        <svg viewBox="0 0 24 24">203          <path d="M7 15h9a4 4 0 0 0 0-8c-1 0-2 .3-2.7.8A5 5 0 0 0 5 9.5a3.5 3.5 0 0 0 2 6.5z" fill="#6A6E7F"></path>204        </svg>205      </div>206      <!-- signal icon -->207      <div class="icon">208        <svg viewBox="0 0 24 24">209          <path d="M3 18h2v3H3zm4-5h2v8H7zm4-3h2v11h-2zm4-4h2v15h-2z" fill="#6A6E7F"></path>210        </svg>211      </div>212      <!-- battery icon -->213      <div class="icon">214        <svg viewBox="0 0 28 24">215          <rect x="1" y="6" width="22" height="12" rx="2" fill="none" stroke="#6A6E7F" stroke-width="2"></rect>216          <rect x="3" y="8" width="18" height="8" rx="1" fill="#6A6E7F"></rect>217          <rect x="23" y="9" width="3" height="6" rx="0.8" fill="#6A6E7F"></rect>218        </svg>219      </div>220    </div>221  </div>222 223  <!-- App Bar -->224  <div class="app-bar">225    <div class="back-btn">226      <svg viewBox="0 0 24 24">227        <path d="M15 5L7 12l8 7" fill="none" stroke="#344053" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>228      </svg>229    </div>230    <div class="title-wrap">231      <h1>Review your trip to BOM</h1>232      <div class="sub">Jul 22 - Jul 28, 2 travelers</div>233    </div>234  </div>235 236  <div class="soft-pill"></div>237 238  <!-- Card 1 -->239  <div class="card">240    <h2>Abu Dhabi to Mumbai</h2>241    <div class="airline-row">242      <div class="img-ph">[IMG]</div>243      <div>Etihad Airways • Sat, Jul 22</div>244    </div>245    <div class="divider"></div>246    <div class="pill long"></div>247    <div class="pill short" style="width:300px;"></div>248  </div>249 250  <!-- Card 2 -->251  <div class="card">252    <h2>Mumbai to Abu Dhabi</h2>253    <div class="airline-row">254      <div class="img-ph">[IMG]</div>255      <div>Etihad Airways • Fri, Jul 28</div>256    </div>257    <div class="divider"></div>258    <div class="pill med"></div>259    <div class="pill short"></div>260  </div>261 262  <!-- Bottom Sheet -->263  <div class="bottom-sheet">264    <div class="total-wrap">265      <div class="total-title">Trip Total</div>266      <div class="pill med" style="width:520px;"></div>267      <div class="pill short" style="width:300px;"></div>268    </div>269    <button class="checkout-btn">Check Out</button>270  </div>271 272  <!-- Gesture Bar -->273  <div class="gesture-bar">274    <div class="gesture-pill"></div>275  </div>276 277</div>278</body>279</html>