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>Guest details</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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;16    color: #222;17  }18 19  /* Status bar (top) */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 120px;26    background: #000000;27  }28 29  /* App bar */30  .app-bar {31    position: absolute;32    top: 120px;33    left: 0;34    width: 1080px;35    height: 180px;36    background: #ffffff;37    box-shadow: 0 2px 4px rgba(0,0,0,0.08);38    display: flex;39    align-items: center;40    padding: 0 40px;41  }42  .app-title {43    font-size: 54px;44    font-weight: 600;45    color: #333;46    margin-left: 24px;47  }48  .icon-btn {49    width: 72px;50    height: 72px;51    display: inline-flex;52    align-items: center;53    justify-content: center;54  }55 56  /* List area */57  .content {58    position: absolute;59    top: 300px; /* below app bar */60    left: 0;61    right: 0;62    bottom: 320px; /* leave space for bottom button and nav bar */63    padding: 20px 40px 0 40px;64    background: #fff;65  }66 67  .row {68    height: 240px;69    display: flex;70    align-items: center;71  }72  .count {73    width: 140px;74    font-size: 120px;75    font-weight: 400;76    color: #3b3b3b;77    line-height: 1;78  }79  .label {80    flex: 1;81    font-size: 52px;82    color: #666;83    padding-left: 20px;84  }85  .actions {86    display: flex;87    align-items: center;88    gap: 40px;89    margin-right: 10px;90  }91  .circle-btn {92    width: 92px;93    height: 92px;94    border-radius: 50%;95    display: inline-flex;96    align-items: center;97    justify-content: center;98  }99 100  .divider {101    height: 1px;102    background: #E0E0E0;103    margin: 0 0 0 140px; /* align with text content */104  }105 106  /* Bottom primary button */107  .primary-btn {108    position: absolute;109    left: 60px;110    bottom: 200px;111    width: 960px;112    height: 120px;113    background: #3367D6;114    border-radius: 60px;115    color: #fff;116    font-size: 48px;117    font-weight: 600;118    display: flex;119    align-items: center;120    justify-content: center;121    box-shadow: 0 6px 12px rgba(51,103,214,0.3);122  }123 124  /* Bottom system nav bar */125  .nav-bar {126    position: absolute;127    bottom: 0;128    left: 0;129    width: 1080px;130    height: 140px;131    background: #000000;132  }133  .gesture-pill {134    position: absolute;135    bottom: 36px;136    left: 50%;137    transform: translateX(-50%);138    width: 420px;139    height: 12px;140    background: #C5C5C5;141    border-radius: 6px;142    opacity: 0.9;143  }144</style>145</head>146<body>147<div id="render-target">148 149  <div class="status-bar"></div>150 151  <div class="app-bar">152    <div class="icon-btn">153      <svg width="48" height="48" viewBox="0 0 48 48">154        <path d="M8 8 L40 40 M40 8 L8 40" stroke="#606060" stroke-width="6" stroke-linecap="round"></path>155      </svg>156    </div>157    <div class="app-title">Guest details</div>158  </div>159 160  <div class="content">161    <!-- Row: Room -->162    <div class="row">163      <div class="count">1</div>164      <div class="label">Room</div>165      <div class="actions">166        <div class="circle-btn">167          <svg width="92" height="92" viewBox="0 0 92 92">168            <circle cx="46" cy="46" r="42" fill="none" stroke="#D5D5D5" stroke-width="4"></circle>169            <path d="M26 46 H66" stroke="#BDBDBD" stroke-width="8" stroke-linecap="round"></path>170          </svg>171        </div>172        <div class="circle-btn">173          <svg width="92" height="92" viewBox="0 0 92 92">174            <circle cx="46" cy="46" r="42" fill="none" stroke="#3A73F3" stroke-width="4"></circle>175            <path d="M26 46 H66 M46 26 V66" stroke="#3A73F3" stroke-width="8" stroke-linecap="round"></path>176          </svg>177        </div>178      </div>179    </div>180    <div class="divider"></div>181 182    <!-- Row: Adult -->183    <div class="row">184      <div class="count">1</div>185      <div class="label">Adult</div>186      <div class="actions">187        <div class="circle-btn">188          <svg width="92" height="92" viewBox="0 0 92 92">189            <circle cx="46" cy="46" r="42" fill="none" stroke="#D5D5D5" stroke-width="4"></circle>190            <path d="M26 46 H66" stroke="#BDBDBD" stroke-width="8" stroke-linecap="round"></path>191          </svg>192        </div>193        <div class="circle-btn">194          <svg width="92" height="92" viewBox="0 0 92 92">195            <circle cx="46" cy="46" r="42" fill="none" stroke="#3A73F3" stroke-width="4"></circle>196            <path d="M26 46 H66 M46 26 V66" stroke="#3A73F3" stroke-width="8" stroke-linecap="round"></path>197          </svg>198        </div>199      </div>200    </div>201    <div class="divider"></div>202 203    <!-- Row: Children -->204    <div class="row">205      <div class="count">0</div>206      <div class="label">Children</div>207      <div class="actions">208        <div class="circle-btn">209          <svg width="92" height="92" viewBox="0 0 92 92">210            <circle cx="46" cy="46" r="42" fill="none" stroke="#D5D5D5" stroke-width="4"></circle>211            <path d="M26 46 H66" stroke="#BDBDBD" stroke-width="8" stroke-linecap="round"></path>212          </svg>213        </div>214        <div class="circle-btn">215          <svg width="92" height="92" viewBox="0 0 92 92">216            <circle cx="46" cy="46" r="42" fill="none" stroke="#3A73F3" stroke-width="4"></circle>217            <path d="M26 46 H66 M46 26 V66" stroke="#3A73F3" stroke-width="8" stroke-linecap="round"></path>218          </svg>219        </div>220      </div>221    </div>222    <div class="divider"></div>223  </div>224 225  <div class="primary-btn">OK</div>226 227  <div class="nav-bar">228    <div class="gesture-pill"></div>229  </div>230 231</div>232</body>233</html>