GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Who's flying UI</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Arial, Helvetica, sans-serif;12    color: #212121;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #FFFFFF;20  }21 22  /* Header */23  .top-actions {24    position: absolute;25    top: 150px;26    right: 52px;27    font-size: 40px;28    color: #1a73e8;29  }30 31  .page-title {32    position: absolute;33    top: 260px;34    left: 60px;35    font-size: 68px;36    font-weight: 800;37    letter-spacing: 0.2px;38  }39  .divider {40    position: absolute;41    top: 400px;42    left: 0;43    width: 100%;44    height: 2px;45    background: #E0E0E0;46  }47 48  /* Content area */49  .content {50    position: absolute;51    left: 60px;52    right: 60px;53    top: 450px;54  }55 56  .section-title {57    font-size: 42px;58    font-weight: 700;59    margin-bottom: 40px;60  }61 62  .row {63    display: flex;64    align-items: center;65    justify-content: space-between;66    margin: 34px 0;67  }68  .row .label {69    font-size: 40px;70    font-weight: 500;71  }72 73  /* Stepper */74  .stepper {75    width: 420px;76    height: 120px;77    border: 2px solid #BDBDBD;78    border-radius: 26px;79    display: flex;80    align-items: center;81    justify-content: space-between;82    padding: 0 36px;83    box-sizing: border-box;84  }85  .stepper .value {86    font-size: 44px;87    color: #212121;88  }89  .icon-btn {90    width: 56px;91    height: 56px;92    display: flex;93    align-items: center;94    justify-content: center;95  }96  .minus svg path { stroke: #9E9E9E; }97  .plus svg path { stroke: #1a73e8; }98 99  /* Cabin class */100  .cabin-section {101    margin-top: 70px;102  }103  .radio-item {104    display: flex;105    align-items: center;106    margin: 38px 0;107  }108  .radio-circle {109    width: 48px;110    height: 48px;111    border-radius: 50%;112    border: 3px solid #BDBDBD;113    background: #fff;114    margin-right: 28px;115    position: relative;116    box-sizing: border-box;117  }118  .radio-circle.selected {119    border: 7px solid #1a73e8;120  }121  .radio-circle.selected::after {122    content: "";123    position: absolute;124    width: 26px;125    height: 26px;126    border-radius: 50%;127    background: #fff;128    top: 50%;129    left: 50%;130    transform: translate(-50%, -50%);131  }132  .radio-label {133    font-size: 40px;134    color: #333;135  }136 137  /* Bottom bar */138  .bottom-bar {139    position: absolute;140    left: 0;141    bottom: 0;142    width: 100%;143    height: 210px;144    background: #fff;145    border-top: 2px solid #EAEAEA;146  }147  .primary-btn {148    position: absolute;149    right: 60px;150    top: 46px;151    width: 540px;152    height: 120px;153    background: #0b69e3;154    color: #fff;155    border-radius: 24px;156    display: flex;157    align-items: center;158    justify-content: center;159    font-size: 44px;160    font-weight: 600;161    box-shadow: 0 3px 0 rgba(0,0,0,0.08);162  }163</style>164</head>165<body>166<div id="render-target">167  <div class="top-actions">Cancel</div>168 169  <div class="page-title">Who's flying?</div>170  <div class="divider"></div>171 172  <div class="content">173    <div class="section-title">Travelers</div>174 175    <div class="row">176      <div class="label">Adults</div>177      <div class="stepper">178        <div class="icon-btn minus">179          <svg width="40" height="40" viewBox="0 0 40 40">180            <path d="M8 20 H32" stroke-width="4" stroke-linecap="round"></path>181          </svg>182        </div>183        <div class="value">1</div>184        <div class="icon-btn plus">185          <svg width="40" height="40" viewBox="0 0 40 40">186            <path d="M8 20 H32 M20 8 V32" stroke-width="4" stroke-linecap="round"></path>187          </svg>188        </div>189      </div>190    </div>191 192    <div class="row">193      <div class="label">Children</div>194      <div class="stepper">195        <div class="icon-btn minus">196          <svg width="40" height="40" viewBox="0 0 40 40">197            <path d="M8 20 H32" stroke-width="4" stroke-linecap="round"></path>198          </svg>199        </div>200        <div class="value">0</div>201        <div class="icon-btn plus">202          <svg width="40" height="40" viewBox="0 0 40 40">203            <path d="M8 20 H32 M20 8 V32" stroke-width="4" stroke-linecap="round"></path>204          </svg>205        </div>206      </div>207    </div>208 209    <div class="cabin-section">210      <div class="section-title">Cabin class</div>211 212      <div class="radio-item">213        <div class="radio-circle selected"></div>214        <div class="radio-label">Economy</div>215      </div>216 217      <div class="radio-item">218        <div class="radio-circle"></div>219        <div class="radio-label">Premium economy</div>220      </div>221 222      <div class="radio-item">223        <div class="radio-circle"></div>224        <div class="radio-label">Business</div>225      </div>226 227      <div class="radio-item">228        <div class="radio-circle"></div>229        <div class="radio-label">First-class</div>230      </div>231    </div>232  </div>233 234  <div class="bottom-bar">235    <div class="primary-btn">Done</div>236  </div>237</div>238</body>239</html>