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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #f6f6f6;15    border-radius: 0;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0; left: 0; right: 0;22    height: 120px;23    background: #651a14;24    color: #fff;25    display: flex;26    align-items: center;27    justify-content: space-between;28    padding: 0 36px;29    font-weight: 600;30    letter-spacing: 0.5px;31  }32  .status-left { font-size: 38px; }33  .status-right {34    display: flex; align-items: center; gap: 28px;35  }36  .icon { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 3; }37 38  /* Content */39  .content {40    position: absolute;41    top: 120px; left: 0; right: 0; bottom: 0;42    padding: 48px 56px 220px 56px;43  }44 45  .title {46    font-size: 90px;47    font-weight: 800;48    color: #222;49    margin: 24px 0 36px 8px;50  }51 52  .form {53    display: flex;54    flex-direction: column;55    gap: 44px;56    padding-top: 12px;57  }58 59  .field {60    background: #fff;61    border: 2px solid #c7c7c7;62    border-radius: 20px;63    padding: 26px 28px 32px 28px;64    box-shadow: 0 2px 0 rgba(0,0,0,0.02);65  }66  .field.active {67    border: 3px solid #1f1f1f;68    position: relative;69  }70 71  .label-row {72    display: flex;73    align-items: center;74    gap: 14px;75    margin-bottom: 18px;76  }77  .label-row .label {78    font-size: 30px;79    color: #7a7a7a;80  }81  .label-row .line {82    height: 2px;83    background: #c7c7c7;84    flex: 1;85    border-radius: 1px;86  }87  .value {88    font-size: 54px;89    color: #1b1b1b;90    letter-spacing: 0.5px;91  }92 93  .calendar-icon {94    position: absolute;95    right: 20px;96    top: 16px;97    width: 88px; height: 88px;98    border-radius: 50%;99    border: 2px solid #9e9e9e;100    display: flex; align-items: center; justify-content: center;101    background: #fff;102  }103  .calendar-icon svg { width: 46px; height: 46px; fill: none; stroke: #555; stroke-width: 3.2; }104 105  /* Scrim + dialog */106  .scrim {107    position: absolute;108    inset: 0;109    background: rgba(0,0,0,0.45);110  }111  .dialog {112    position: absolute;113    left: 54px; right: 54px;114    top: 720px;115    background: #fff;116    border-radius: 8px;117    box-shadow: 0 20px 40px rgba(0,0,0,0.35);118    padding: 48px 40px 36px 40px;119  }120  .picker {121    padding: 18px 14px 6px 14px;122  }123  .picker-grid {124    display: grid;125    grid-template-columns: 1fr 1fr 1fr;126    column-gap: 34px;127    text-align: center;128  }129  .picker-item-faded {130    color: #bdbdbd;131    font-size: 44px;132    margin-bottom: 36px;133  }134  .picker-active {135    display: contents;136  }137  .picker-active div {138    font-size: 52px;139    color: #111;140    padding: 22px 0 20px 0;141    position: relative;142  }143  .picker-active div::after {144    content: "";145    position: absolute;146    left: 70px; right: 70px; bottom: 0;147    height: 3px; background: #9e9e9e;148    border-radius: 2px;149  }150  .picker-item-faded.bottom {151    margin-top: 24px;152  }153 154  .dialog-actions {155    display: flex;156    justify-content: flex-end;157    gap: 60px;158    padding: 24px 8px 0 8px;159  }160  .action-btn {161    font-size: 38px;162    letter-spacing: 2px;163    color: #444;164  }165 166  /* Bottom gesture bar */167  .nav-area {168    position: absolute;169    left: 0; right: 0; bottom: 0;170    height: 160px;171    background: #000;172    display: flex; align-items: center; justify-content: center;173  }174  .home-pill {175    width: 220px; height: 14px; background: #eaeaea; border-radius: 10px;176    opacity: 0.95;177  }178</style>179</head>180<body>181<div id="render-target">182 183  <!-- Status bar -->184  <div class="status-bar">185    <div class="status-left">8:23</div>186    <div class="status-right">187      <!-- WiFi icon -->188      <svg class="icon" viewBox="0 0 24 24">189        <path d="M2 9c5-4 15-4 20 0M6 13c3-3 9-3 12 0M10 17c2-2 4-2 6 0M12 20h0"/>190      </svg>191      <!-- Battery icon -->192      <svg class="icon" viewBox="0 0 24 24">193        <rect x="2" y="6" width="18" height="12" rx="2"></rect>194        <rect x="20" y="10" width="2" height="4"></rect>195        <rect x="4" y="8" width="14" height="8" fill="#fff" stroke="none"></rect>196      </svg>197    </div>198  </div>199 200  <!-- Page content -->201  <div class="content">202    <div class="title">Tell us who you are</div>203 204    <div class="form">205      <div class="field">206        <div class="label-row">207          <span class="label">First Name</span>208          <div class="line"></div>209        </div>210        <div class="value">ABC</div>211      </div>212 213      <div class="field">214        <div class="label-row">215          <span class="label">Last Name</span>216          <div class="line"></div>217        </div>218        <div class="value">XYZ</div>219      </div>220 221      <div class="field active">222        <div class="label-row">223          <span class="label">Birthdate</span>224          <div class="line" style="background:#1f1f1f; opacity:0.9;"></div>225        </div>226        <div class="value" style="color:#616161;">Select date</div>227 228        <div class="calendar-icon" aria-hidden="true">229          <svg viewBox="0 0 24 24">230            <rect x="3" y="4" width="18" height="16" rx="2"></rect>231            <path d="M3 8h18"></path>232            <path d="M8 2v4M16 2v4"></path>233          </svg>234        </div>235      </div>236 237      <!-- Placeholder to suggest more fields below -->238      <div class="field">239        <div class="label-row">240          <span class="label">Your info</span>241          <div class="line"></div>242        </div>243        <div class="value" style="color:#9e9e9e;">Additional details...</div>244      </div>245    </div>246  </div>247 248  <!-- Scrim + Date picker dialog -->249  <div class="scrim"></div>250  <div class="dialog">251    <div class="picker">252      <div class="picker-grid">253        <div class="picker-item-faded">Dec</div>254        <div class="picker-item-faded">31</div>255        <div class="picker-item-faded">1983</div>256 257        <div class="picker-active">258          <div>Jan</div>259          <div>01</div>260          <div>1984</div>261        </div>262 263        <div class="picker-item-faded bottom">Feb</div>264        <div class="picker-item-faded bottom">02</div>265        <div class="picker-item-faded bottom">1985</div>266      </div>267    </div>268 269    <div class="dialog-actions">270      <div class="action-btn">CANCEL</div>271      <div class="action-btn">OK</div>272    </div>273  </div>274 275  <!-- Bottom gesture bar -->276  <div class="nav-area">277    <div class="home-pill"></div>278  </div>279</div>280</body>281</html>