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