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>Who's flying</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Top area */18  .cancel {19    position: absolute;20    right: 48px;21    top: 140px;22    color: #1a73e8;23    font-size: 46px;24    text-decoration: none;25  }26 27  /* Heading */28  .page-title {29    font-weight: 700;30    font-size: 78px;31    color: #111;32    margin: 220px 48px 32px 48px;33  }34  .divider {35    height: 2px;36    background: #e5e5e5;37    margin: 0 0 20px 0;38  }39 40  /* Sections */41  .section {42    padding: 20px 48px 10px 48px;43  }44  .section h3 {45    margin: 24px 0 28px 0;46    font-size: 46px;47    color: #222;48    font-weight: 700;49  }50 51  /* Rows with counter */52  .row {53    display: flex;54    align-items: center;55    justify-content: space-between;56    margin: 32px 0;57  }58  .label {59    font-size: 44px;60    color: #222;61    font-weight: 500;62  }63  .counter {64    width: 430px;65    height: 128px;66    border: 4px solid #bdbdbd;67    border-radius: 26px;68    display: grid;69    grid-template-columns: 1fr 1fr 1fr;70    align-items: center;71    justify-items: center;72    box-shadow: 0 2px 0 rgba(0,0,0,0.06);73  }74  .counter .value {75    font-size: 46px;76    color: #333;77    font-weight: 500;78  }79  .icon-btn {80    width: 120px;81    height: 88px;82    border: none;83    background: transparent;84    cursor: default;85    display: flex;86    align-items: center;87    justify-content: center;88  }89  .icon {90    width: 56px;91    height: 56px;92  }93 94  /* Cabin class radio list */95  .radio-list { margin-top: 28px; }96  .radio-item {97    display: flex;98    align-items: center;99    margin: 34px 0;100  }101  .radio-bullet {102    width: 54px;103    height: 54px;104    border-radius: 50%;105    border: 6px solid #b5b5b5;106    margin-right: 26px;107    box-sizing: border-box;108  }109  .radio-item.selected .radio-bullet {110    border-color: #1a73e8;111  }112  .radio-item .text {113    font-size: 42px;114    color: #333;115  }116 117  /* Bottom bar */118  .bottom-bar {119    position: absolute;120    left: 0; right: 0; bottom: 0;121    height: 230px;122    border-top: 2px solid #e6e6e6;123    background: #fff;124  }125  .done-btn {126    position: absolute;127    right: 48px;128    bottom: 40px;129    width: 480px;130    height: 120px;131    background: #0b69f2;132    color: #fff;133    font-size: 46px;134    font-weight: 700;135    border-radius: 20px;136    display: flex;137    align-items: center;138    justify-content: center;139  }140</style>141</head>142<body>143<div id="render-target">144  <a href="#" class="cancel">Cancel</a>145 146  <div class="page-title">Who's flying?</div>147  <div class="divider"></div>148 149  <div class="section">150    <h3>Travelers</h3>151 152    <div class="row">153      <div class="label">Adults</div>154      <div class="counter">155        <button class="icon-btn">156          <svg class="icon" viewBox="0 0 24 24">157            <path d="M3 12h18" stroke="#1a73e8" stroke-width="2" fill="none" stroke-linecap="round"/>158          </svg>159        </button>160        <div class="value">3</div>161        <button class="icon-btn">162          <svg class="icon" viewBox="0 0 24 24">163            <path d="M12 3v18M3 12h18" stroke="#1a73e8" stroke-width="2" fill="none" stroke-linecap="round"/>164          </svg>165        </button>166      </div>167    </div>168 169    <div class="row">170      <div class="label">Children</div>171      <div class="counter">172        <button class="icon-btn">173          <svg class="icon" viewBox="0 0 24 24">174            <path d="M3 12h18" stroke="#9e9e9e" stroke-width="2" fill="none" stroke-linecap="round"/>175          </svg>176        </button>177        <div class="value">0</div>178        <button class="icon-btn">179          <svg class="icon" viewBox="0 0 24 24">180            <path d="M12 3v18M3 12h18" stroke="#1a73e8" stroke-width="2" fill="none" stroke-linecap="round"/>181          </svg>182        </button>183      </div>184    </div>185 186    <h3>Cabin class</h3>187 188    <div class="radio-list">189      <div class="radio-item selected">190        <div class="radio-bullet"></div>191        <div class="text">Economy</div>192      </div>193      <div class="radio-item">194        <div class="radio-bullet"></div>195        <div class="text">Premium economy</div>196      </div>197      <div class="radio-item">198        <div class="radio-bullet"></div>199        <div class="text">Business</div>200      </div>201      <div class="radio-item">202        <div class="radio-bullet"></div>203        <div class="text">First-class</div>204      </div>205    </div>206  </div>207 208  <div class="bottom-bar">209    <div class="done-btn">Done</div>210  </div>211</div>212</body>213</html>