GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Guest Details UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;15    color: #212121;16  }17 18  /* Status bar */19  .statusbar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    background: #000000;26  }27 28  /* Header */29  .header {30    position: absolute;31    top: 120px;32    left: 0;33    width: 1080px;34    height: 160px;35    background: #ffffff;36    box-shadow: 0 2px 6px rgba(0,0,0,0.06);37    display: flex;38    align-items: center;39    padding: 0 36px;40  }41  .close-btn {42    width: 72px;43    height: 72px;44    display: flex;45    align-items: center;46    justify-content: center;47    margin-right: 24px;48  }49  .header-title {50    font-size: 48px;51    font-weight: 500;52    color: #333333;53  }54 55  /* List area */56  .content {57    position: absolute;58    top: 280px; /* 120 + 160 */59    left: 0;60    width: 100%;61    background: #ffffff;62  }63  .row {64    display: flex;65    align-items: center;66    padding: 40px 36px;67    height: 220px;68    box-sizing: border-box;69    border-bottom: 1.5px solid #E0E0E0;70  }71  .count {72    font-size: 92px;73    font-weight: 400;74    width: 120px;75    color: #333333;76  }77  .label {78    font-size: 44px;79    color: #606060;80    flex: 1;81  }82  .actions {83    display: flex;84    gap: 32px;85    align-items: center;86  }87  .icon-btn {88    width: 88px;89    height: 88px;90    border-radius: 44px;91    display: flex;92    align-items: center;93    justify-content: center;94    box-sizing: border-box;95    background: #ffffff;96  }97  .icon-btn.disabled {98    border: 2px solid #E0E0E0;99    background: #F7F7F7;100  }101  .icon-btn.primary {102    border: 3px solid #3D7BF6;103    background: #ffffff;104  }105  .icon {106    width: 44px;107    height: 44px;108  }109  .icon path {110    stroke-width: 8;111    stroke-linecap: round;112  }113  .icon.primary path { stroke: #3D7BF6; }114  .icon.disabled path { stroke: #BDBDBD; }115 116  /* Bottom button */117  .footer-btn {118    position: absolute;119    left: 60px;120    bottom: 170px; /* above nav bar */121    width: 960px;122    height: 120px;123    background: #3368F3;124    border-radius: 60px;125    display: flex;126    align-items: center;127    justify-content: center;128    color: #ffffff;129    font-size: 42px;130    font-weight: 600;131    letter-spacing: 1px;132  }133 134  /* Navigation bar */135  .nav-bar {136    position: absolute;137    bottom: 0;138    left: 0;139    width: 1080px;140    height: 140px;141    background: #000000;142    display: flex;143    align-items: center;144    justify-content: center;145  }146  .home-indicator {147    width: 260px;148    height: 12px;149    background: #BDBDBD;150    border-radius: 6px;151  }152</style>153</head>154<body>155<div id="render-target">156  <div class="statusbar"></div>157 158  <div class="header">159    <div class="close-btn" aria-label="Close">160      <svg width="48" height="48" viewBox="0 0 48 48">161        <path d="M8 8 L40 40 M40 8 L8 40" stroke="#4A4A4A" stroke-width="4" stroke-linecap="round"></path>162      </svg>163    </div>164    <div class="header-title">Guest details</div>165  </div>166 167  <div class="content">168    <!-- Row 1 -->169    <div class="row">170      <div class="count">1</div>171      <div class="label">Room</div>172      <div class="actions">173        <div class="icon-btn disabled" aria-label="Decrease rooms">174          <svg class="icon disabled" viewBox="0 0 48 48">175            <path d="M12 24 H36" fill="none" stroke="#BDBDBD"></path>176          </svg>177        </div>178        <div class="icon-btn primary" aria-label="Increase rooms">179          <svg class="icon primary" viewBox="0 0 48 48">180            <path d="M24 12 V36 M12 24 H36" fill="none" stroke="#3D7BF6"></path>181          </svg>182        </div>183      </div>184    </div>185 186    <!-- Row 2 -->187    <div class="row">188      <div class="count">2</div>189      <div class="label">Adults</div>190      <div class="actions">191        <div class="icon-btn primary" aria-label="Decrease adults">192          <svg class="icon primary" viewBox="0 0 48 48">193            <path d="M12 24 H36" fill="none" stroke="#3D7BF6"></path>194          </svg>195        </div>196        <div class="icon-btn primary" aria-label="Increase adults">197          <svg class="icon primary" viewBox="0 0 48 48">198            <path d="M24 12 V36 M12 24 H36" fill="none" stroke="#3D7BF6"></path>199          </svg>200        </div>201      </div>202    </div>203 204    <!-- Row 3 -->205    <div class="row">206      <div class="count">0</div>207      <div class="label">Children</div>208      <div class="actions">209        <div class="icon-btn disabled" aria-label="Decrease children">210          <svg class="icon disabled" viewBox="0 0 48 48">211            <path d="M12 24 H36" fill="none" stroke="#BDBDBD"></path>212          </svg>213        </div>214        <div class="icon-btn primary" aria-label="Increase children">215          <svg class="icon primary" viewBox="0 0 48 48">216            <path d="M24 12 V36 M12 24 H36" fill="none" stroke="#3D7BF6"></path>217          </svg>218        </div>219      </div>220    </div>221  </div>222 223  <div class="footer-btn">OK</div>224 225  <div class="nav-bar">226    <div class="home-indicator"></div>227  </div>228</div>229</body>230</html>