GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Form with Date Picker</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: #f5f5f5;14    font-family: Arial, Helvetica, sans-serif;15    color: #222;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    background: #5E1A12;26    color: #fff;27  }28  .status-content {29    position: absolute;30    top: 30px;31    left: 32px;32    right: 32px;33    display: flex;34    align-items: center;35    justify-content: space-between;36    font-size: 42px;37    letter-spacing: 0.5px;38  }39  .status-left {40    display: flex;41    align-items: center;42    gap: 18px;43  }44  .status-right {45    display: flex;46    align-items: center;47    gap: 28px;48  }49  .icon {50    width: 44px;51    height: 44px;52  }53 54  /* Main content */55  .content {56    position: absolute;57    top: 120px;58    left: 0;59    right: 0;60    bottom: 0;61    padding: 60px 54px;62  }63  .title {64    font-size: 80px;65    font-weight: 800;66    margin: 20px 0 50px 0;67  }68 69  .input-group {70    position: relative;71    margin-bottom: 44px;72  }73  .input-label {74    position: absolute;75    top: -18px;76    left: 26px;77    padding: 0 10px;78    background: #f5f5f5;79    color: #888;80    font-size: 34px;81  }82  .input-field {83    height: 150px;84    border: 2px solid #bdbdbd;85    border-radius: 20px;86    padding: 34px 28px;87    font-size: 44px;88    color: #333;89    box-sizing: border-box;90    background: #fff;91  }92  .input-group.birthdate .input-field {93    border: 3px solid #333;94  }95  .suffix-icon {96    position: absolute;97    right: 26px;98    top: 50%;99    transform: translateY(-50%);100    width: 70px;101    height: 70px;102    border-radius: 50%;103    border: 2px solid #888;104    display: flex;105    align-items: center;106    justify-content: center;107    background: #fff;108  }109 110  /* Dim overlay for modal */111  .modal-overlay {112    position: absolute;113    inset: 0;114    background: rgba(0,0,0,0.50);115  }116 117  /* Modal dialog */118  .dialog {119    position: absolute;120    left: 50px;121    top: 760px;122    width: 980px;123    background: #ffffff;124    border-radius: 10px;125    box-shadow: 0 30px 60px rgba(0,0,0,0.35);126    padding: 70px 60px 40px 60px;127  }128 129  .picker {130    width: 100%;131  }132  .picker-columns {133    display: grid;134    grid-template-columns: 1fr 1fr 1fr;135    column-gap: 40px;136    text-align: center;137  }138  .row {139    padding: 28px 0;140    font-size: 44px;141    color: #b2b2b2;142  }143  .row.selected {144    color: #000;145    font-size: 54px;146    font-weight: 600;147    padding: 34px 0 20px;148  }149  .underline {150    height: 2px;151    background: #bdbdbd;152    margin: 18px 0 10px;153  }154 155  .dialog-actions {156    display: flex;157    justify-content: flex-end;158    gap: 60px;159    padding-top: 30px;160  }161  .action-btn {162    font-size: 40px;163    letter-spacing: 2px;164    color: #333;165  }166 167  /* Gesture bar */168  .gesture-bar {169    position: absolute;170    bottom: 0;171    left: 0;172    width: 1080px;173    height: 140px;174    background: #000;175  }176  .gesture-pill {177    position: absolute;178    bottom: 52px;179    left: 50%;180    transform: translateX(-50%);181    width: 320px;182    height: 12px;183    background: #e8e8e8;184    border-radius: 12px;185  }186</style>187</head>188<body>189<div id="render-target">190 191  <!-- Status bar -->192  <div class="status-bar">193    <div class="status-content">194      <div class="status-left">195        <div>8:25</div>196        <!-- simple device icon -->197        <svg class="icon" viewBox="0 0 24 24">198          <rect x="6" y="2" width="12" height="20" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"></rect>199          <rect x="10" y="18" width="4" height="2" fill="#fff"></rect>200        </svg>201      </div>202      <div class="status-right">203        <!-- wifi icon -->204        <svg class="icon" viewBox="0 0 24 24">205          <path d="M2 8c5-4 15-4 20 0" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>206          <path d="M5 12c4-3 10-3 14 0" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>207          <circle cx="12" cy="16" r="2" fill="#fff"></circle>208        </svg>209        <!-- battery icon -->210        <svg class="icon" viewBox="0 0 24 24">211          <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"></rect>212          <rect x="20" y="10" width="2" height="4" fill="#fff"></rect>213          <rect x="4" y="8" width="14" height="8" fill="#fff"></rect>214        </svg>215      </div>216    </div>217  </div>218 219  <!-- Main content -->220  <div class="content">221    <div class="title">Tell us who you are</div>222 223    <div class="input-group">224      <div class="input-label">First Name</div>225      <div class="input-field">ABC</div>226    </div>227 228    <div class="input-group">229      <div class="input-label">Last Name</div>230      <div class="input-field">XYZ</div>231    </div>232 233    <div class="input-group birthdate">234      <div class="input-label">Birthdate</div>235      <div class="input-field"></div>236      <div class="suffix-icon">237        <!-- simple calendar icon -->238        <svg width="40" height="40" viewBox="0 0 24 24">239          <rect x="3" y="5" width="18" height="16" rx="2" fill="none" stroke="#666" stroke-width="2"></rect>240          <line x1="3" y1="9" x2="21" y2="9" stroke="#666" stroke-width="2"></line>241          <line x1="8" y1="3" x2="8" y2="7" stroke="#666" stroke-width="2"></line>242          <line x1="16" y1="3" x2="16" y2="7" stroke="#666" stroke-width="2"></line>243        </svg>244      </div>245    </div>246 247  </div>248 249  <!-- Modal overlay -->250  <div class="modal-overlay"></div>251 252  <!-- Date picker dialog -->253  <div class="dialog">254    <div class="picker">255      <!-- Top faded row -->256      <div class="picker-columns row">257        <div>Dec</div>258        <div>31</div>259        <div>1997</div>260      </div>261 262      <!-- Selected row -->263      <div class="picker-columns">264        <div>265          <div class="underline"></div>266          <div class="row selected">Jan</div>267        </div>268        <div>269          <div class="underline"></div>270          <div class="row selected">01</div>271        </div>272        <div>273          <div class="underline"></div>274          <div class="row selected">1998</div>275        </div>276      </div>277 278      <!-- Bottom faded row -->279      <div class="picker-columns row" style="margin-top: 6px;">280        <div>Feb</div>281        <div>02</div>282        <div>1999</div>283      </div>284 285      <div class="dialog-actions">286        <div class="action-btn">CANCEL</div>287        <div class="action-btn">OK</div>288      </div>289    </div>290  </div>291 292  <!-- Gesture bar -->293  <div class="gesture-bar">294    <div class="gesture-pill"></div>295  </div>296 297</div>298</body>299</html>