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>Select passengers</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: #FFFFFF;15    font-family: Arial, Helvetica, sans-serif;16    color: #212121;17  }18 19  /* Top App Bar */20  .appbar {21    position: relative;22    width: 100%;23    height: 220px; /* includes status area */24    background: #0B5D66;25    box-shadow: 0 3px 8px rgba(0,0,0,0.25);26    color: #FFFFFF;27  }28  .appbar .inner {29    position: absolute;30    bottom: 24px;31    left: 0;32    right: 0;33    display: flex;34    align-items: center;35    padding: 0 40px;36  }37  .appbar .title {38    font-size: 56px;39    font-weight: 600;40    margin-left: 20px;41  }42  .spacer { flex: 1; }43 44  /* Content */45  .content {46    padding: 0 40px;47  }48  .row {49    display: flex;50    align-items: center;51    justify-content: space-between;52    padding: 46px 0;53  }54  .row .text {55    max-width: 650px;56  }57  .row .main {58    font-size: 44px;59    line-height: 1.2;60    color: #333333;61  }62  .row .sub {63    font-size: 32px;64    color: #757575;65    margin-top: 12px;66  }67 68  .controls {69    display: flex;70    align-items: center;71    gap: 54px;72    min-width: 300px;73    justify-content: flex-end;74  }75  .count {76    font-size: 52px;77    color: #616161;78    width: 50px;79    text-align: center;80  }81  .icon-btn {82    width: 88px;83    height: 88px;84    display: flex;85    align-items: center;86    justify-content: center;87    border: none;88    background: transparent;89    padding: 0;90    cursor: default;91  }92  .icon {93    width: 60px;94    height: 60px;95  }96  .teal { stroke: #0B5D66; }97  .disabled { stroke: #B0BEC5; }98 99  .divider {100    height: 1px;101    background: #EAEAEA;102    margin: 0 -40px; /* full-bleed divider */103  }104 105  /* Bottom system bar mimic */106  .system-bar {107    position: absolute;108    bottom: 0;109    left: 0;110    width: 100%;111    height: 120px;112    background: #000000;113  }114  .home-pill {115    width: 180px;116    height: 12px;117    background: #E0E0E0;118    border-radius: 6px;119    position: absolute;120    left: 50%;121    top: 50%;122    transform: translate(-50%, -50%);123    opacity: 0.9;124  }125</style>126</head>127<body>128<div id="render-target">129 130  <!-- Top App Bar -->131  <div class="appbar">132    <div class="inner">133      <!-- Back Arrow -->134      <svg class="icon" viewBox="0 0 24 24">135        <path d="M15 6 L9 12 L15 18" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>136      </svg>137      <div class="title">Select passengers</div>138      <div class="spacer"></div>139      <!-- Check Icon -->140      <svg class="icon" viewBox="0 0 24 24">141        <path d="M5 13 L10 18 L19 7" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>142      </svg>143    </div>144  </div>145 146  <!-- Content List -->147  <div class="content">148    <div class="row">149      <div class="text">150        <div class="main">Adult</div>151      </div>152      <div class="controls">153        <button class="icon-btn" aria-label="decrease adult">154          <svg class="icon teal" viewBox="0 0 24 24">155            <path d="M5 12 H19" fill="none" stroke-width="2" stroke-linecap="round"/>156          </svg>157        </button>158        <div class="count">2</div>159        <button class="icon-btn" aria-label="increase adult">160          <svg class="icon teal" viewBox="0 0 24 24">161            <path d="M12 5 V19 M5 12 H19" fill="none" stroke-width="2" stroke-linecap="round"/>162          </svg>163        </button>164      </div>165    </div>166 167    <div class="divider"></div>168 169    <div class="row">170      <div class="text">171        <div class="main">Child (2-15)</div>172      </div>173      <div class="controls">174        <button class="icon-btn" aria-label="decrease child">175          <svg class="icon disabled" viewBox="0 0 24 24">176            <path d="M5 12 H19" fill="none" stroke-width="2" stroke-linecap="round"/>177          </svg>178        </button>179        <div class="count">0</div>180        <button class="icon-btn" aria-label="increase child">181          <svg class="icon teal" viewBox="0 0 24 24">182            <path d="M12 5 V19 M5 12 H19" fill="none" stroke-width="2" stroke-linecap="round"/>183          </svg>184        </button>185      </div>186    </div>187 188    <div class="divider"></div>189 190    <div class="row">191      <div class="text">192        <div class="main">Bike</div>193        <div class="sub">E-bikes are not allowed on buses.</div>194      </div>195      <div class="controls">196        <button class="icon-btn" aria-label="decrease bike">197          <svg class="icon disabled" viewBox="0 0 24 24">198            <path d="M5 12 H19" fill="none" stroke-width="2" stroke-linecap="round"/>199          </svg>200        </button>201        <div class="count">0</div>202        <button class="icon-btn" aria-label="increase bike">203          <svg class="icon teal" viewBox="0 0 24 24">204            <path d="M12 5 V19 M5 12 H19" fill="none" stroke-width="2" stroke-linecap="round"/>205          </svg>206        </button>207      </div>208    </div>209 210    <div class="divider"></div>211 212    <div class="row">213      <div class="text">214        <div class="main">Travel in your wheelchair</div>215        <div class="sub">Please select passenger first</div>216      </div>217      <div class="controls">218        <button class="icon-btn" aria-label="decrease wheelchair">219          <svg class="icon disabled" viewBox="0 0 24 24">220            <path d="M5 12 H19" fill="none" stroke-width="2" stroke-linecap="round"/>221          </svg>222        </button>223        <div class="count">0</div>224        <button class="icon-btn" aria-label="increase wheelchair">225          <svg class="icon teal" viewBox="0 0 24 24">226            <path d="M12 5 V19 M5 12 H19" fill="none" stroke-width="2" stroke-linecap="round"/>227          </svg>228        </button>229      </div>230    </div>231 232    <div class="divider"></div>233  </div>234 235  <!-- Bottom system bar -->236  <div class="system-bar">237    <div class="home-pill"></div>238  </div>239 240</div>241</body>242</html>