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; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #f4f4f4;14    border-radius: 0;15    box-shadow: none;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: #5a1a12;26    color: #fff;27    padding: 0 40px;28    box-sizing: border-box;29    display: flex;30    align-items: center;31    justify-content: space-between;32  }33  .status-left {34    font-size: 42px;35    letter-spacing: 1px;36  }37  .status-right { display: flex; align-items: center; gap: 28px; }38  .status-icon { width: 44px; height: 44px; }39 40  /* Content */41  .content {42    position: absolute;43    top: 160px;44    left: 48px;45    right: 48px;46  }47  .title {48    font-size: 88px;49    font-weight: 700;50    color: #222;51    margin: 40px 0 60px 0;52  }53 54  .form-field {55    margin-bottom: 50px;56  }57  .field-label {58    font-size: 28px;59    color: #777;60    margin-bottom: 12px;61  }62  .input {63    height: 140px;64    border: 2px solid #bdbdbd;65    border-radius: 20px;66    background: #fff;67    box-sizing: border-box;68    padding: 34px 36px;69    font-size: 46px;70    color: #222;71    display: flex;72    align-items: center;73    justify-content: space-between;74  }75  .input .value { flex: 1; }76  .calendar-icon {77    width: 68px;78    height: 68px;79    border-radius: 34px;80    border: 2px solid #888;81    display: flex;82    align-items: center;83    justify-content: center;84  }85 86  /* Overlay and dialog */87  .overlay {88    position: absolute;89    top: 0;90    left: 0;91    width: 1080px;92    height: 2400px;93    background: rgba(0,0,0,0.55);94  }95  .dialog {96    position: absolute;97    left: 90px;98    top: 730px;99    width: 900px;100    background: #fff;101    border-radius: 12px;102    box-shadow: 0 30px 60px rgba(0,0,0,0.35);103    overflow: hidden;104  }105  .dialog-inner {106    padding: 40px 40px 30px 40px;107  }108  .wheel-top,109  .wheel-bottom {110    display: grid;111    grid-template-columns: 1fr 1fr 1fr;112    text-align: center;113    color: #b3b3b3;114    font-size: 42px;115    margin: 6px 0;116  }117  .wheel-center {118    display: grid;119    grid-template-columns: 1fr 1fr 1fr;120    text-align: center;121    align-items: center;122    font-size: 52px;123    color: #141414;124    margin: 24px 0;125  }126  .wheel-center div {127    position: relative;128    padding: 26px 0;129  }130  .wheel-center div:before,131  .wheel-center div:after {132    content: "";133    position: absolute;134    left: 12%;135    right: 12%;136    height: 4px;137    background: #bdbdbd;138  }139  .wheel-center div:before { top: 0; }140  .wheel-center div:after { bottom: 0; }141 142  .dialog-actions {143    display: flex;144    justify-content: flex-end;145    gap: 40px;146    padding: 20px 40px 36px 40px;147    font-size: 40px;148    color: #333;149  }150  .action {151    letter-spacing: 2px;152  }153 154  /* Bottom gesture area */155  .gesture {156    position: absolute;157    bottom: 0;158    left: 0;159    width: 1080px;160    height: 140px;161    background: #000;162    display: flex;163    align-items: center;164    justify-content: center;165  }166  .gesture .pill {167    width: 240px;168    height: 16px;169    background: #e5e5e5;170    border-radius: 10px;171  }172</style>173</head>174<body>175<div id="render-target">176  <div class="status-bar">177    <div class="status-left">8:24</div>178    <div class="status-right">179      <!-- Simple phone signal icon -->180      <svg class="status-icon" viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg">181        <path d="M2 14h2v6H2zm4-4h2v10H6zm4-4h2v14h-2zm4-4h2v18h-2z"/>182      </svg>183      <!-- WiFi icon -->184      <svg class="status-icon" viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg">185        <path d="M12 18.5l2.5 2.5-2.5 2.5-2.5-2.5L12 18.5z" opacity="0"/>186        <path d="M12 20a2 2 0 0 0-1.4.6L12 22l1.4-1.4A2 2 0 0 0 12 20zm-6-6.2 1.5 1.5A9 9 0 0 1 12 14a9 9 0 0 1 4.5 1.3l1.5-1.5A11 11 0 0 0 12 12a11 11 0 0 0-6 1.8zm-3-3 1.6 1.6A13 13 0 0 1 12 10a13 13 0 0 1 7.4 2.4L21 10.8A15 15 0 0 0 12 8a15 15 0 0 0-9 2.8z"/>187      </svg>188      <!-- Battery icon -->189      <svg class="status-icon" viewBox="0 0 28 24" xmlns="http://www.w3.org/2000/svg">190        <rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="#fff"/>191        <rect x="4" y="8" width="16" height="8" fill="#5a1a12"/>192        <rect x="22" y="9" width="4" height="6" rx="1" fill="#fff"/>193      </svg>194    </div>195  </div>196 197  <div class="content">198    <div class="title">Tell us who you are</div>199 200    <div class="form-field">201      <div class="field-label">First Name</div>202      <div class="input"><div class="value">ABC</div></div>203    </div>204 205    <div class="form-field">206      <div class="field-label">Last Name</div>207      <div class="input"><div class="value">XYZ</div></div>208    </div>209 210    <div class="form-field">211      <div class="field-label">Birthdate</div>212      <div class="input">213        <div class="value">Jan 01, 1996</div>214        <div class="calendar-icon">215          <svg width="40" height="40" viewBox="0 0 24 24" fill="#555" xmlns="http://www.w3.org/2000/svg">216            <path d="M7 2h2v3H7zm8 0h2v3h-2zM5 5h14v15H5zM7 9h10v2H7z"/>217          </svg>218        </div>219      </div>220    </div>221  </div>222 223  <!-- Dim overlay and date picker dialog -->224  <div class="overlay">225    <div class="dialog">226      <div class="dialog-inner">227        <div class="wheel-top">228          <div>Dec</div>229          <div>31</div>230          <div>1995</div>231        </div>232 233        <div class="wheel-center">234          <div>Jan</div>235          <div>01</div>236          <div>1996</div>237        </div>238 239        <div class="wheel-bottom">240          <div>Feb</div>241          <div>02</div>242          <div>1997</div>243        </div>244      </div>245 246      <div class="dialog-actions">247        <div class="action" style="color:#555">CANCEL</div>248        <div class="action" style="color:#000">OK</div>249      </div>250    </div>251  </div>252 253  <!-- Bottom gesture area -->254  <div class="gesture">255    <div class="pill"></div>256  </div>257</div>258</body>259</html>