GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Form with Date Picker</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: #F6F6F6;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0; left: 0; right: 0;20    height: 150px;21    background: #5E1A12;22    color: #fff;23    padding: 0 38px;24    box-sizing: border-box;25    display: flex;26    align-items: center;27    justify-content: space-between;28  }29  .status-left { display: flex; align-items: center; gap: 16px; font-size: 40px; font-weight: 600; }30  .status-right { display: flex; align-items: center; gap: 24px; }31  .status-icon svg { width: 44px; height: 44px; fill: #fff; }32 33  /* Page content */34  .page {35    position: absolute;36    top: 150px; left: 0; right: 0; bottom: 0;37    padding: 56px;38    box-sizing: border-box;39  }40  .title {41    font-size: 96px;42    font-weight: 800;43    color: #212121;44    margin: 40px 0 40px 8px;45    line-height: 1.1;46  }47 48  .field {49    width: 968px;50    margin: 28px 0 36px 8px;51    border: 2px solid #C7C7C7;52    border-radius: 18px;53    background: #FFFFFF;54    box-sizing: border-box;55    padding: 26px 28px;56    position: relative;57  }58  .field .label {59    position: absolute;60    top: -16px;61    left: 24px;62    background: #F6F6F6;63    padding: 0 10px;64    font-size: 34px;65    color: #6F6F6F;66  }67  .field .value {68    font-size: 54px;69    color: #212121;70    margin-top: 10px;71    letter-spacing: 0.5px;72  }73 74  .field.birthdate {75    border-color: #2E2E2E;76    box-shadow: 0 0 0 2px rgba(0,0,0,0.06);77  }78  .calendar-btn {79    position: absolute;80    right: 18px;81    top: 18px;82    width: 84px;83    height: 84px;84    border-radius: 50%;85    border: 2px solid #C7C7C7;86    display: flex;87    justify-content: center;88    align-items: center;89    background: #FFF;90  }91  .calendar-btn svg { width: 44px; height: 44px; fill: #616161; }92 93  /* Dim overlay and dialog */94  .overlay {95    position: absolute;96    inset: 0;97    background: rgba(0,0,0,0.55);98    z-index: 20;99  }100  .dialog {101    position: absolute;102    left: 54px;103    top: 900px;104    width: 972px;105    height: 740px;106    background: #FFFFFF;107    border-radius: 18px;108    box-shadow: 0 20px 60px rgba(0,0,0,0.35);109    z-index: 30;110    padding: 54px 60px;111    box-sizing: border-box;112  }113  .picker {114    display: flex;115    justify-content: space-between;116    margin-top: 20px;117  }118  .col {119    width: 260px;120    text-align: center;121  }122  .col .prev,123  .col .next {124    font-size: 44px;125    color: #BDBDBD;126    margin: 24px 0;127  }128  .col .selected {129    font-size: 56px;130    color: #212121;131    font-weight: 600;132    margin: 22px 0;133  }134  .line {135    height: 0;136    border-top: 4px solid #CFCFCF;137    margin: 18px 0;138  }139 140  .dialog-actions {141    position: absolute;142    bottom: 38px;143    right: 60px;144    display: flex;145    gap: 60px;146  }147  .btn-flat {148    font-size: 42px;149    letter-spacing: 2px;150    color: #444;151    cursor: default;152  }153  .btn-primary { color: #000; font-weight: 600; }154 155  /* Bottom navigation pill */156  .bottom-bar {157    position: absolute;158    bottom: 0; left: 0; right: 0;159    height: 130px;160    background: #000;161    display: flex;162    align-items: center;163    justify-content: center;164  }165  .home-pill {166    width: 260px; height: 10px; border-radius: 8px; background: #EDEDED;167  }168</style>169</head>170<body>171<div id="render-target">172 173  <!-- Status Bar -->174  <div class="status-bar">175    <div class="status-left">176      <div>8:22</div>177      <div class="status-icon">178        <!-- simple device icon -->179        <svg viewBox="0 0 24 24"><rect x="5" y="2" width="14" height="20" rx="2"></rect><rect x="10" y="18" width="4" height="1" fill="#fff"></rect></svg>180      </div>181    </div>182    <div class="status-right">183      <div class="status-icon">184        <!-- WiFi icon -->185        <svg viewBox="0 0 24 24"><path d="M12 18l2 2-2 2-2-2 2-2z"></path><path d="M2 9c5-5 15-5 20 0" stroke="#fff" stroke-width="2" fill="none"></path><path d="M5 12c3.5-3.5 10.5-3.5 14 0" stroke="#fff" stroke-width="2" fill="none"></path><path d="M8 15c2.3-2.3 6.7-2.3 9 0" stroke="#fff" stroke-width="2" fill="none"></path></svg>186      </div>187      <div class="status-icon">188        <!-- Battery icon -->189        <svg viewBox="0 0 28 24"><rect x="2" y="6" width="20" height="12" rx="2" fill="#fff"></rect><rect x="23" y="9" width="3" height="6" rx="1" fill="#fff"></rect><rect x="4" y="8" width="16" height="8" fill="#5E1A12"></rect></svg>190      </div>191    </div>192  </div>193 194  <!-- Page Content -->195  <div class="page">196    <div class="title">Tell us who you are</div>197 198    <div class="field">199      <div class="label">First Name</div>200      <div class="value">ABC</div>201    </div>202 203    <div class="field">204      <div class="label">Last Name</div>205      <div class="value">XYZ</div>206    </div>207 208    <div class="field birthdate">209      <div class="label">Birthdate</div>210      <div class="value">Jan 01, 1973</div>211      <div class="calendar-btn">212        <!-- Calendar icon -->213        <svg viewBox="0 0 24 24">214          <rect x="3" y="5" width="18" height="16" rx="2"></rect>215          <rect x="3" y="9" width="18" height="2" fill="#616161"></rect>216          <rect x="7" y="2" width="2" height="4" fill="#616161"></rect>217          <rect x="15" y="2" width="2" height="4" fill="#616161"></rect>218        </svg>219      </div>220    </div>221 222    <!-- Example additional field behind dialog to show dimmed background -->223    <div class="field">224      <div class="label">Your email</div>225      <div class="value" style="color:#9E9E9E;">example@domain.com</div>226    </div>227  </div>228 229  <!-- Overlay and Date Picker Dialog -->230  <div class="overlay"></div>231 232  <div class="dialog">233    <div class="picker">234      <div class="col">235        <div class="prev">Dec</div>236        <div class="line"></div>237        <div class="selected">Jan</div>238        <div class="line"></div>239        <div class="next">Feb</div>240      </div>241      <div class="col">242        <div class="prev">31</div>243        <div class="line"></div>244        <div class="selected">01</div>245        <div class="line"></div>246        <div class="next">02</div>247      </div>248      <div class="col">249        <div class="prev">1972</div>250        <div class="line"></div>251        <div class="selected">1973</div>252        <div class="line"></div>253        <div class="next">1974</div>254      </div>255    </div>256 257    <div class="dialog-actions">258      <div class="btn-flat">CANCEL</div>259      <div class="btn-flat btn-primary">OK</div>260    </div>261  </div>262 263  <!-- Bottom navigation bar -->264  <div class="bottom-bar">265    <div class="home-pill"></div>266  </div>267 268</div>269</body>270</html>