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: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #f5f5f5;15  }16 17  /* Status bar */18  .statusbar {19    height: 120px;20    background: #5b1a12;21    color: #fff;22    position: relative;23    padding: 0 36px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    box-sizing: border-box;28  }29  .status-time {30    font-size: 44px;31    font-weight: 600;32    letter-spacing: 1px;33  }34  .status-icons {35    display: flex; align-items: center; gap: 28px;36  }37  .icon { width: 44px; height: 44px; display: inline-block; }38 39  /* Page content */40  .content {41    padding: 56px 60px;42  }43  .title {44    font-size: 90px;45    font-weight: 800;46    color: #333;47    margin: 20px 0 40px;48  }49 50  .field {51    position: relative;52    width: 960px;53    border: 2px solid #c9c9c9;54    border-radius: 18px;55    padding: 38px 28px 44px;56    box-sizing: border-box;57    margin: 38px 0;58    background: #fafafa;59  }60  .field .label {61    position: absolute;62    top: -18px;63    left: 22px;64    padding: 0 10px;65    background: #f5f5f5;66    color: #8b8b8b;67    font-size: 34px;68  }69  .field .value {70    font-size: 48px;71    color: #222;72    margin-top: 8px;73  }74  .field.active {75    border-color: #333;76    box-shadow: 0 2px 0 #333 inset;77    background: #fff;78  }79  .field .trailing {80    position: absolute;81    right: 18px;82    top: 50%;83    transform: translateY(-50%);84    width: 76px; height: 76px;85    border: 2px solid #bdbdbd;86    border-radius: 50%;87    display: flex; align-items: center; justify-content: center;88  }89 90  /* Scrim overlay (below status bar) */91  .scrim {92    position: absolute;93    top: 120px;94    left: 0;95    right: 0;96    bottom: 0;97    background: rgba(0,0,0,0.5);98    z-index: 4;99  }100 101  /* Dialog */102  .dialog {103    position: absolute;104    left: 50px;105    top: 730px;106    width: 980px;107    background: #fff;108    border-radius: 8px;109    box-shadow: 0 20px 60px rgba(0,0,0,0.35);110    z-index: 5;111    padding: 40px 30px 30px;112    box-sizing: border-box;113  }114 115  .picker {116    display: grid;117    grid-template-columns: 1fr 1fr 1fr;118    column-gap: 40px;119    padding: 30px 40px 10px;120  }121  .col {122    text-align: center;123  }124  .col .faded {125    color: #bdbdbd;126    font-size: 44px;127    line-height: 78px;128  }129  .col .selected {130    color: #111;131    font-size: 56px;132    line-height: 92px;133    font-weight: 600;134    margin: 10px 0;135    position: relative;136  }137  .underline {138    height: 4px;139    background: #bdbdbd;140    margin: 8px 70px 0;141    border-radius: 2px;142  }143 144  .dialog-actions {145    display: flex;146    justify-content: flex-end;147    gap: 60px;148    padding: 24px 36px 10px;149  }150  .action {151    color: #333;152    font-weight: 600;153    font-size: 40px;154    letter-spacing: 1px;155  }156 157  /* Bottom gesture bar */158  .nav-area {159    position: absolute;160    bottom: 0; left: 0; right: 0;161    height: 160px;162    background: #000;163    display: flex; align-items: center; justify-content: center;164  }165  .home-pill {166    width: 240px; height: 14px;167    background: #e6e6e6;168    border-radius: 8px;169  }170</style>171</head>172<body>173<div id="render-target">174  <!-- Status bar -->175  <div class="statusbar">176    <div class="status-time">8:22</div>177    <div class="status-icons">178      <!-- Signal/wifi icon -->179      <svg class="icon" viewBox="0 0 24 24" fill="none">180        <path d="M2 9c4-4 16-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>181        <path d="M6 13c2.8-2.8 9.2-2.8 12 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>182        <path d="M10 17c1.4-1.4 2.6-1.4 4 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>183        <circle cx="12" cy="20" r="1.5" fill="#fff"/>184      </svg>185      <!-- Battery icon -->186      <svg class="icon" viewBox="0 0 28 24" fill="none">187        <rect x="2" y="6" width="20" height="12" rx="2" stroke="#fff" stroke-width="2"/>188        <rect x="4" y="8" width="14" height="8" fill="#fff"/>189        <rect x="22.5" y="9" width="3" height="6" rx="1" fill="#fff"/>190      </svg>191    </div>192  </div>193 194  <!-- Main content -->195  <div class="content">196    <div class="title">Tell us who you are</div>197 198    <div class="field">199      <span class="label">First Name</span>200      <div class="value">ABC</div>201    </div>202 203    <div class="field">204      <span class="label">Last Name</span>205      <div class="value">XYZ</div>206    </div>207 208    <div class="field active">209      <span class="label">Birthdate</span>210      <div class="value">Jan 01, 1979</div>211      <div class="trailing">212        <!-- calendar icon -->213        <svg width="40" height="40" viewBox="0 0 24 24" fill="none">214          <rect x="3" y="5" width="18" height="16" rx="2" stroke="#616161" stroke-width="2"/>215          <path d="M3 9h18" stroke="#616161" stroke-width="2"/>216          <path d="M8 3v4M16 3v4" stroke="#616161" stroke-width="2" stroke-linecap="round"/>217        </svg>218      </div>219    </div>220 221    <div class="field">222      <span class="label">Your Address</span>223      <div class="value" style="color:#9e9e9e">Street, City, ZIP</div>224    </div>225  </div>226 227  <!-- Dim background when dialog is open -->228  <div class="scrim"></div>229 230  <!-- Dialog with date picker wheels -->231  <div class="dialog">232    <div class="picker">233      <!-- Month column -->234      <div class="col">235        <div class="faded">Dec</div>236        <div class="underline"></div>237        <div class="selected">Jan</div>238        <div class="underline"></div>239        <div class="faded">Feb</div>240      </div>241      <!-- Day column -->242      <div class="col">243        <div class="faded">31</div>244        <div class="underline"></div>245        <div class="selected">01</div>246        <div class="underline"></div>247        <div class="faded">02</div>248      </div>249      <!-- Year column -->250      <div class="col">251        <div class="faded">1978</div>252        <div class="underline"></div>253        <div class="selected">1979</div>254        <div class="underline"></div>255        <div class="faded">1980</div>256      </div>257    </div>258 259    <div class="dialog-actions">260      <div class="action">CANCEL</div>261      <div class="action">OK</div>262    </div>263  </div>264 265  <!-- Bottom gesture area -->266  <div class="nav-area">267    <div class="home-pill"></div>268  </div>269</div>270</body>271</html>