GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile UI - Date Picker Modal</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #FFFFFF;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 110px;23    background: #5d1a10;24    color: #fff;25    display: flex;26    align-items: center;27    padding: 0 36px;28    box-sizing: border-box;29  }30  .status-time {31    font-size: 40px;32    font-weight: 600;33  }34  .status-icons {35    margin-left: auto;36    display: flex;37    align-items: center;38    gap: 28px;39  }40  .icon { width: 44px; height: 44px; }41 42  /* Content */43  .content {44    position: absolute;45    top: 110px;46    left: 0;47    right: 0;48    bottom: 120px;49    padding: 56px;50    box-sizing: border-box;51    overflow: hidden;52  }53  .title {54    font-size: 92px;55    font-weight: 800;56    color: #212121;57    line-height: 1.1;58    margin: 20px 0 40px 0;59  }60 61  .form {62    margin-top: 30px;63    width: 100%;64  }65  .field {66    position: relative;67    border: 2px solid #c9c9c9;68    border-radius: 18px;69    height: 170px;70    margin: 34px 10px;71    padding: 44px 32px 26px 32px;72    box-sizing: border-box;73    background: #fff;74  }75  .field .label {76    position: absolute;77    top: -18px;78    left: 28px;79    font-size: 34px;80    color: #757575;81    background: #fff;82    padding: 0 12px;83  }84  .field .value {85    font-size: 54px;86    color: #212121;87    margin-top: 12px;88  }89  .field.active {90    border-color: #212121;91    border-width: 3px;92    box-shadow: 0 2px 0 rgba(0,0,0,0.2);93  }94  .field .trailing-icon {95    position: absolute;96    right: 20px;97    top: 50%;98    transform: translateY(-50%);99    width: 90px;100    height: 90px;101    border: 2px solid #9e9e9e;102    border-radius: 50%;103    display: flex;104    align-items: center;105    justify-content: center;106  }107 108  /* Scrim */109  .scrim {110    position: absolute;111    left: 0;112    top: 110px; /* keep status bar visible like in screenshot */113    width: 1080px;114    height: calc(2400px - 110px - 120px);115    background: rgba(0,0,0,0.55);116  }117 118  /* Dialog */119  .dialog {120    position: absolute;121    left: 50%;122    top: 860px;123    transform: translateX(-50%);124    width: 980px;125    background: #fff;126    border-radius: 12px;127    box-shadow: 0 20px 60px rgba(0,0,0,0.35);128    padding: 40px 48px 32px 48px;129    box-sizing: border-box;130  }131  .picker {132    margin-top: 10px;133    margin-bottom: 40px;134  }135  .picker .row {136    display: flex;137    justify-content: space-between;138    align-items: center;139  }140  .col {141    width: 30%;142    text-align: center;143  }144  .text-faded {145    font-size: 44px;146    color: #bdbdbd;147  }148  .text-active {149    font-size: 56px;150    color: #212121;151    font-weight: 600;152    letter-spacing: 1px;153  }154  .picker .lines {155    display: flex;156    justify-content: space-between;157    margin: 26px 0 18px;158  }159  .picker .lines .line {160    width: 30%;161    height: 6px;162    background: #bdbdbd;163    border-radius: 4px;164  }165 166  .dialog-actions {167    display: flex;168    justify-content: flex-end;169    gap: 48px;170    padding-top: 8px;171  }172  .dialog-actions .btn {173    color: #3c4043;174    font-size: 44px;175    letter-spacing: 1px;176  }177 178  /* Navigation bar */179  .nav {180    position: absolute;181    bottom: 0;182    left: 0;183    width: 1080px;184    height: 120px;185    background: #000000;186    display: flex;187    align-items: center;188    justify-content: center;189  }190  .nav .pill {191    width: 210px;192    height: 12px;193    border-radius: 10px;194    background: #e0e0e0;195    opacity: 0.95;196  }197</style>198</head>199<body>200<div id="render-target">201 202  <!-- Status Bar -->203  <div class="status-bar">204    <div class="status-time">8:22</div>205    <div class="status-icons">206      <!-- Simple Wi-Fi icon -->207      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">208        <path d="M2 8c5.5-4.5 14.5-4.5 20 0"/>209        <path d="M5 11c4-3 10-3 14 0"/>210        <path d="M8 14c2.5-1.8 5.5-1.8 8 0"/>211        <circle cx="12" cy="18" r="2" fill="#ffffff" stroke="none"/>212      </svg>213      <!-- Battery icon -->214      <svg class="icon" viewBox="0 0 28 18">215        <rect x="1" y="3" width="22" height="12" rx="2" fill="none" stroke="#ffffff" stroke-width="2"/>216        <rect x="3" y="5" width="14" height="8" rx="1" fill="#ffffff"/>217        <rect x="24" y="7" width="3" height="6" rx="1" fill="#ffffff"/>218      </svg>219    </div>220  </div>221 222  <!-- Content underneath -->223  <div class="content">224    <div class="title">Tell us who you are</div>225 226    <div class="form">227      <div class="field">228        <div class="label">First Name</div>229        <div class="value">ABC</div>230      </div>231 232      <div class="field">233        <div class="label">Last Name</div>234        <div class="value">XYZ</div>235      </div>236 237      <div class="field active">238        <div class="label">Birthdate</div>239        <div class="value">Jan 01, 1971</div>240        <div class="trailing-icon">241          <!-- Calendar icon -->242          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2">243            <rect x="3" y="5" width="18" height="16" rx="2"></rect>244            <line x1="3" y1="9" x2="21" y2="9"></line>245            <line x1="8" y1="3" x2="8" y2="7"></line>246            <line x1="16" y1="3" x2="16" y2="7"></line>247          </svg>248        </div>249      </div>250    </div>251  </div>252 253  <!-- Scrim -->254  <div class="scrim"></div>255 256  <!-- Dialog -->257  <div class="dialog">258    <div class="picker">259      <div class="row">260        <div class="col text-faded">Dec</div>261        <div class="col text-faded">31</div>262        <div class="col text-faded">1970</div>263      </div>264 265      <div class="lines">266        <div class="line"></div>267        <div class="line"></div>268        <div class="line"></div>269      </div>270 271      <div class="row">272        <div class="col text-active">Jan</div>273        <div class="col text-active">01</div>274        <div class="col text-active">1971</div>275      </div>276 277      <div class="lines" style="opacity:0.0; height:24px;"></div>278 279      <div class="row" style="margin-top: 24px;">280        <div class="col text-faded">Feb</div>281        <div class="col text-faded">02</div>282        <div class="col text-faded">1972</div>283      </div>284    </div>285 286    <div class="dialog-actions">287      <div class="btn">CANCEL</div>288      <div class="btn">OK</div>289    </div>290  </div>291 292  <!-- Navigation bar -->293  <div class="nav">294    <div class="pill"></div>295  </div>296 297</div>298</body>299</html>