GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Time Picker Modal - Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">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: #0c0f14;14    color: #fff;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 130px;24    color: #ffffff;25    display: flex;26    align-items: center;27    padding: 0 36px;28    box-sizing: border-box;29  }30  .status-time { font-size: 40px; letter-spacing: 1px; }31  .status-icons {32    margin-left: auto;33    display: flex;34    align-items: center;35    gap: 22px;36  }37  .dot { width: 10px; height: 10px; background: #ffffff; border-radius: 50%; opacity: 0.8; }38  .wifi, .battery {39    width: 44px; height: 24px; position: relative;40  }41  .wifi:before {42    content: ''; position: absolute; inset: 0;43    border: 3px solid #fff; border-top-left-radius: 28px; border-top-right-radius: 28px;44    border-bottom: none; opacity: 0.8;45  }46  .battery {47    border: 3px solid #fff; border-radius: 6px;48  }49  .battery:after {50    content: ''; position: absolute; right: -10px; top: 6px; width: 8px; height: 12px; background: #fff; border-radius: 2px;51  }52 53  /* Dimmed app content behind modal */54  .app-fake {55    position: absolute;56    top: 130px;57    left: 0;58    width: 1080px;59    height: calc(100% - 130px);60    background: rgba(0,0,0,0.55);61  }62 63  /* Modal */64  .modal {65    position: absolute;66    left: 60px;67    top: 520px;68    width: 960px;69    height: 1220px;70    background: #23262b;71    border-radius: 24px;72    box-shadow: 0 30px 60px rgba(0,0,0,0.6);73    padding-top: 90px;74    box-sizing: border-box;75  }76 77  /* Time wheel */78  .time-picker {79    width: 100%;80    display: flex;81    justify-content: center;82    align-items: stretch;83    gap: 40px;84    position: relative;85  }86 87  .column {88    width: 260px;89    height: 420px;90    position: relative;91    display: flex;92    flex-direction: column;93    align-items: center;94    justify-content: space-between;95    padding: 12px 0;96    box-sizing: border-box;97  }98 99  .column .top,100  .column .bottom {101    font-size: 48px;102    color: #7f8691;103    opacity: 0.8;104  }105  .column .center {106    font-size: 92px;107    color: #ffffff;108    line-height: 1.1;109    margin-top: 6px;110    margin-bottom: 6px;111  }112  .colon {113    font-size: 92px;114    line-height: 1;115    color: #ffffff;116    display: flex;117    align-items: center;118    justify-content: center;119    width: 30px;120  }121 122  .pick-lines {123    position: absolute;124    left: 0;125    right: 0;126    top: 140px;127    height: 140px;128    pointer-events: none;129  }130  .pick-lines::before,131  .pick-lines::after {132    content: "";133    position: absolute;134    left: 0; right: 0;135    height: 3px;136    background: #3a3f46;137  }138  .pick-lines::before { top: 0; }139  .pick-lines::after { bottom: 0; }140 141  /* Group lines per column */142  .column .pick-lines { left: 30px; right: 30px; }143 144  /* Date selector row */145  .date-row {146    margin-top: 120px;147    width: 100%;148    height: 120px;149    border-top: 2px solid #2f343a;150    border-bottom: 2px solid #2f343a;151    display: flex;152    align-items: center;153    justify-content: center;154    position: relative;155    color: #dfe3ea;156    font-size: 54px;157    letter-spacing: 0.5px;158  }159  .date-row .nav {160    position: absolute;161    width: 70px; height: 70px;162    display: flex; align-items: center; justify-content: center;163    top: 25px;164    cursor: default;165  }166  .date-row .nav.left { left: 36px; }167  .date-row .nav.right { right: 36px; }168 169  .btn {170    width: 820px;171    height: 140px;172    background: #e55374;173    border-radius: 18px;174    margin: 110px auto 0;175    display: flex; align-items: center; justify-content: center;176    color: #ffffff;177    font-size: 56px;178    font-weight: 600;179    letter-spacing: 0.4px;180  }181  .cancel {182    text-align: center;183    margin-top: 60px;184    font-size: 46px;185    color: #ff6e8d;186  }187 188  /* Simple chevron icon */189  .chev {190    width: 40px; height: 40px;191  }192  .am-text .top, .am-text .bottom { font-size: 54px; }193  .am-text .center { font-size: 72px; }194</style>195</head>196<body>197<div id="render-target">198 199  <!-- Status bar -->200  <div class="status-bar">201    <div class="status-time">8:29</div>202    <div class="status-icons">203      <div class="dot"></div>204      <div class="wifi"></div>205      <div class="battery"></div>206      <div style="font-size:38px;">95%</div>207    </div>208  </div>209 210  <!-- Dimmed content behind (placeholder) -->211  <div class="app-fake">212    <div style="position:absolute; top:220px; left:140px; width:800px; height:120px; background:#101419; border-radius:14px; opacity:0.5;"></div>213    <div style="position:absolute; top:360px; left:140px; width:800px; height:120px; background:#101419; border-radius:14px; opacity:0.5;"></div>214    <div style="position:absolute; top:540px; left:40px; right:40px; height:2px; background:#1a1f25; opacity:0.7;"></div>215  </div>216 217  <!-- Modal -->218  <div class="modal">219 220    <!-- Time spinner -->221    <div class="time-picker">222      <!-- Hours -->223      <div class="column">224        <div class="top">6</div>225        <div class="pick-lines"></div>226        <div class="center">7</div>227        <div class="bottom">8</div>228      </div>229 230      <div class="colon">:</div>231 232      <!-- Minutes -->233      <div class="column">234        <div class="top">59</div>235        <div class="pick-lines"></div>236        <div class="center">00</div>237        <div class="bottom">01</div>238      </div>239 240      <!-- AM/PM -->241      <div class="column am-text">242        <div class="top"></div>243        <div class="pick-lines"></div>244        <div class="center">AM</div>245        <div class="bottom">PM</div>246      </div>247    </div>248 249    <!-- Date row -->250    <div class="date-row">251      <div class="nav left">252        <svg class="chev" viewBox="0 0 24 24" fill="#dfe3ea">253          <path d="M15.5 4l-8 8 8 8 1.5-1.5L10.5 12 17 5.5 15.5 4z"/>254        </svg>255      </div>256      Sun, Nov 5257      <div class="nav right">258        <svg class="chev" viewBox="0 0 24 24" fill="#dfe3ea">259          <path d="M8.5 20l8-8-8-8L7 5.5 13.5 12 7 18.5 8.5 20z"/>260        </svg>261      </div>262    </div>263 264    <!-- Done button -->265    <div class="btn">Done</div>266    <div class="cancel">Cancel</div>267  </div>268</div>269</body>270</html>