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>Alarm Edit - Numeric Time Picker</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #111111;15    color: #FFFFFF;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 110px;25    background: #111111;26    display: flex;27    align-items: center;28    padding: 0 40px;29    box-sizing: border-box;30    font-weight: 500;31    letter-spacing: 1px;32  }33  .status-time { font-size: 36px; color: #EDEDED; }34  .status-icons {35    margin-left: auto;36    display: flex;37    align-items: center;38    gap: 24px;39  }40  .icon-dot {41    width: 14px; height: 14px; background: #EDEDED; border-radius: 50%;42  }43  .icon-triangle {44    width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 22px solid #EDEDED;45  }46  .icon-battery {47    width: 48px; height: 24px; border: 3px solid #EDEDED; border-radius: 4px; position: relative;48  }49  .icon-battery::after {50    content: ""; position: absolute; right: -10px; top: 6px; width: 8px; height: 12px; background: #EDEDED; border-radius: 2px;51  }52  .icon-battery .lvl { position: absolute; left: 4px; top: 4px; width: 28px; height: 12px; background: #EDEDED; }53 54  /* App bar */55  .app-bar {56    position: absolute;57    top: 110px;58    left: 0;59    width: 1080px;60    height: 140px;61    background: #151515;62    display: flex;63    align-items: center;64    padding: 0 40px;65    box-sizing: border-box;66  }67  .app-title { font-size: 44px; color: #E0E0E0; margin-left: 18px; }68  .app-actions { margin-left: auto; display: flex; align-items: center; gap: 30px; }69 70  .icon-btn { width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; }71  .icon-svg { width: 44px; height: 44px; fill: none; stroke: #E0E0E0; stroke-width: 6; }72 73  /* Content behind dialog */74  .content {75    position: absolute;76    top: 250px;77    left: 0;78    width: 1080px;79    padding: 0 40px;80    box-sizing: border-box;81    color: #BDBDBD;82  }83  .time-row {84    display: flex;85    align-items: center;86    padding: 40px 0;87    border-bottom: 1px solid #222;88  }89  .big-time { font-size: 160px; line-height: 1; color: #8E8E8E; }90  .pm { font-size: 80px; margin-left: 16px; color: #757575; }91  .toggle {92    margin-left: auto;93    width: 100px; height: 56px; border-radius: 28px; background: #2A2A2A; position: relative;94  }95  .toggle::after {96    content: ""; position: absolute; left: 6px; top: 6px; width: 44px; height: 44px; background: #505050; border-radius: 50%;97  }98 99  .list {100    margin-top: 20px;101  }102  .list-item {103    height: 120px;104    display: flex;105    align-items: center;106    justify-content: space-between;107    border-bottom: 1px solid #222;108    color: #C7A24A; /* amber-ish label color */109    font-size: 46px;110  }111  .list-item .value { color: #9E9E9E; font-size: 42px; }112 113  /* Overlay and Dialog */114  .overlay {115    position: absolute;116    left: 0; top: 0;117    width: 1080px; height: 2400px;118    background: rgba(0,0,0,0.55);119  }120  .dialog {121    position: absolute;122    left: 90px;123    top: 760px;124    width: 900px;125    height: 980px;126    background: #232323;127    border-radius: 18px;128    box-shadow: 0 30px 60px rgba(0,0,0,0.8);129    padding: 40px;130    box-sizing: border-box;131  }132  .edit-row {133    display: flex;134    align-items: center;135    justify-content: space-between;136    margin-bottom: 40px;137  }138  .edit-time {139    font-size: 120px;140    color: #FFFFFF;141    letter-spacing: 2px;142  }143  .backspace {144    width: 70px; height: 56px; background: #DADADA; border-radius: 6px;145    display: flex; align-items: center; justify-content: center; color: #333; font-weight: 700;146  }147 148  .keypad {149    display: grid;150    grid-template-columns: repeat(3, 1fr);151    grid-auto-rows: 160px;152    gap: 10px;153    margin-top: 10px;154    padding: 10px 20px;155  }156  .key {157    display: flex; align-items: center; justify-content: center;158    color: #9E9E9E;159    font-size: 140px;160  }161  .am-pm-row {162    display: flex;163    justify-content: space-between;164    align-items: center;165    margin: 16px 20px 30px;166    color: #FFFFFF;167    font-size: 72px;168  }169 170  .dialog-actions {171    position: absolute;172    left: 40px;173    right: 40px;174    bottom: 30px;175    display: flex;176    justify-content: space-between;177    align-items: center;178  }179  .btn {180    font-size: 48px;181    letter-spacing: 2px;182  }183  .btn-cancel { color: #FFC107; }184  .btn-ok { color: #777777; }185 186  /* Bottom nav handle indicator */187  .home-indicator {188    position: absolute;189    bottom: 38px;190    left: 50%;191    transform: translateX(-50%);192    width: 280px; height: 10px;193    background: #E0E0E0;194    border-radius: 6px;195    opacity: 0.8;196  }197</style>198</head>199<body>200<div id="render-target">201 202  <!-- Status bar -->203  <div class="status-bar">204    <div class="status-time">12:41</div>205    <div class="status-icons">206      <div style="color:#EDEDED; font-size:28px;">66°</div>207      <div class="icon-dot"></div>208      <div class="icon-triangle"></div>209      <div class="icon-dot"></div>210      <div class="icon-dot"></div>211      <div class="icon-battery"><div class="lvl"></div></div>212    </div>213  </div>214 215  <!-- App bar -->216  <div class="app-bar">217    <div class="icon-btn" aria-label="Back">218      <svg class="icon-svg" viewBox="0 0 24 24">219        <path d="M15 6 L9 12 L15 18" />220      </svg>221    </div>222    <div class="app-title">Alarms</div>223    <div class="app-actions">224      <div class="icon-btn" aria-label="More">225        <svg class="icon-svg" viewBox="0 0 24 24">226          <circle cx="12" cy="5" r="2.2" />227          <circle cx="12" cy="12" r="2.2" />228          <circle cx="12" cy="19" r="2.2" />229        </svg>230      </div>231    </div>232  </div>233 234  <!-- Content behind dialog -->235  <div class="content">236    <div class="time-row">237      <div style="display:flex; align-items:flex-end;">238        <div class="big-time">12:40</div>239        <div class="pm">PM</div>240      </div>241      <div class="toggle"></div>242    </div>243 244    <div class="list">245      <div class="list-item">246        <div>Repeat</div>247        <div class="value">Never</div>248      </div>249      <div class="list-item">250        <div>Ringtone</div>251        <div class="value">Default</div>252      </div>253      <div class="list-item">254        <div>Gentle</div>255        <div class="value"></div>256      </div>257      <div class="list-item">258        <div>Label</div>259        <div class="value"></div>260      </div>261    </div>262  </div>263 264  <!-- Overlay + Dialog -->265  <div class="overlay"></div>266  <div class="dialog">267    <div class="edit-row">268      <div class="edit-time">-5:30--</div>269      <div class="backspace">x</div>270    </div>271 272    <div class="keypad">273      <div class="key">1</div>274      <div class="key">2</div>275      <div class="key">3</div>276      <div class="key">4</div>277      <div class="key">5</div>278      <div class="key">6</div>279      <div class="key">7</div>280      <div class="key">8</div>281      <div class="key">9</div>282      <div class="key" style="grid-column:2;">0</div>283    </div>284 285    <div class="am-pm-row">286      <div>AM</div>287      <div>PM</div>288    </div>289 290    <div class="dialog-actions">291      <div class="btn btn-cancel">CANCEL</div>292      <div class="btn btn-ok">OK</div>293    </div>294  </div>295 296  <!-- Bottom handle -->297  <div class="home-indicator"></div>298</div>299</body>300</html>