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 Time Picker UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;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    padding: 0 40px;26    box-sizing: border-box;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #EDEDED;31    font-size: 40px;32    letter-spacing: 1px;33  }34  .status-left, .status-right { display: flex; align-items: center; gap: 22px; }35  .dot { width: 10px; height: 10px; background: #EDEDED; border-radius: 50%; display: inline-block; }36  .status-icon {37    width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;38  }39  .wifi {40    width: 38px; height: 38px; border: 3px solid #EDEDED; border-top: none; border-radius: 50% 50% 0 0;41    position: relative;42  }43  .wifi::after {44    content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);45    width: 10px; height: 10px; background: #EDEDED; border-radius: 50%;46  }47 48  /* App bar */49  .app-bar {50    position: absolute;51    top: 110px;52    left: 0;53    width: 1080px;54    height: 140px;55    display: flex;56    align-items: center;57    padding: 0 28px;58    box-sizing: border-box;59    color: #EDEDED;60  }61  .app-title {62    font-size: 54px;63    margin-left: 26px;64    letter-spacing: 0.5px;65  }66  .back-icon { width: 60px; height: 60px; }67  .menu {68    margin-left: auto;69    width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;70  }71  .menu .dot {72    width: 10px; height: 10px; margin: 5px 0; background: #9E9E9E;73  }74 75  /* Main content behind dialog */76  .content {77    position: absolute;78    top: 250px;79    left: 0;80    width: 100%;81    padding: 40px;82    box-sizing: border-box;83    color: #BDBDBD;84  }85  .big-time {86    font-size: 150px;87    color: #BDBDBD;88    opacity: 0.5;89    display: flex;90    align-items: center;91    gap: 20px;92  }93  .toggle {94    margin-left: auto;95    width: 120px; height: 60px; background: #2A2A2A; border-radius: 30px; position: relative;96  }97  .toggle::after {98    content: ""; width: 54px; height: 54px; background: #3A3A3A; border-radius: 27px;99    position: absolute; top: 3px; left: 3px;100  }101  .rule { height: 2px; background: #1E1E1E; margin: 40px 0; }102  .row {103    display: flex; align-items: center; justify-content: space-between;104    padding: 28px 0; color: #9E9E9E; font-size: 46px;105  }106  .row .label { color: #D6A84A; }107  .row .value { color: #B0B0B0; }108 109  /* Modal overlay and dialog */110  .overlay {111    position: absolute; top: 0; left: 0; width: 100%; height: 100%;112    background: rgba(0,0,0,0.45);113  }114  .dialog {115    position: absolute;116    top: 780px;117    left: 130px;118    width: 820px;119    height: 980px;120    background: #1E1E1E;121    border-radius: 18px;122    box-shadow: 0 40px 80px rgba(0,0,0,0.6);123    padding: 36px 40px;124    box-sizing: border-box;125  }126  .dialog-top {127    display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;128  }129  .typed {130    font-size: 80px; color: #E0E0E0; letter-spacing: 8px;131  }132  .clear-chip {133    background: #3A3A3A; color: #E0E0E0; border-radius: 8px; padding: 8px 14px; font-size: 38px;134  }135  .keypad {136    margin-top: 30px;137    display: grid; grid-template-columns: repeat(3, 1fr); grid-row-gap: 34px; grid-column-gap: 20px;138    padding: 20px 10px;139  }140  .key {141    height: 160px; display: flex; align-items: center; justify-content: center;142    font-size: 120px; color: #EAEAEA;143  }144  .muted { color: #7F7F7F; }145  .am-pm-row {146    display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 14px;147  }148  .am, .pm, .zero {149    height: 160px; display: flex; align-items: center; justify-content: center;150    font-size: 90px; color: #EAEAEA;151  }152  .actions {153    position: absolute; bottom: 24px; left: 40px; right: 40px;154    display: flex; align-items: center; justify-content: space-between;155    font-size: 44px;156  }157  .cancel { color: #D6A84A; letter-spacing: 2px; }158  .ok { color: #757575; letter-spacing: 2px; }159 160  /* Bottom page actions under dialog */161  .footer {162    position: absolute; bottom: 190px; left: 0; width: 100%;163    padding: 0 40px; box-sizing: border-box;164  }165  .footer .rule { margin: 0 0 26px; }166  .footer-actions {167    display: flex; align-items: center; justify-content: space-between; color: #D6A84A; font-size: 48px;168  }169 170  /* Gesture bar */171  .gesture {172    position: absolute; bottom: 64px; left: 50%; transform: translateX(-50%);173    width: 240px; height: 12px; background: #E0E0E0; border-radius: 6px; opacity: 0.9;174  }175 176  /* Simple inline SVG coloring */177  svg { fill: none; stroke: #EDEDED; stroke-width: 6; }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">186      <div>12:40</div>187      <div class="dot"></div>188      <div>66°</div>189      <div class="status-icon">190        <!-- Simple triangle warning -->191        <svg width="34" height="34" viewBox="0 0 24 24">192          <path d="M12 4 L3 20 H21 Z"></path>193        </svg>194      </div>195      <div class="dot"></div>196    </div>197    <div class="status-right">198      <!-- WiFi -->199      <div class="wifi"></div>200      <!-- Battery icon -->201      <svg width="48" height="36" viewBox="0 0 48 36">202        <rect x="4" y="6" width="34" height="24" rx="4" ry="4" stroke="#EDEDED"></rect>203        <rect x="40" y="12" width="6" height="12" rx="2" ry="2" stroke="#EDEDED"></rect>204        <rect x="8" y="10" width="22" height="16" fill="#EDEDED" stroke="#EDEDED"></rect>205      </svg>206    </div>207  </div>208 209  <!-- App bar -->210  <div class="app-bar">211    <svg class="back-icon" viewBox="0 0 24 24">212      <path d="M15 6 L9 12 L15 18"></path>213    </svg>214    <div class="app-title">Alarms</div>215    <div class="menu">216      <div class="dot"></div>217      <div class="dot"></div>218      <div class="dot"></div>219    </div>220  </div>221 222  <!-- Content behind dialog -->223  <div class="content">224    <div class="big-time">12:40 PM225      <div class="toggle"></div>226    </div>227    <div class="rule"></div>228 229    <div class="row">230      <div class="label">Repeat</div>231      <div class="value">Never</div>232    </div>233    <div class="rule"></div>234 235    <div class="row">236      <div class="label">Ringtone</div>237      <div class="value">Default</div>238    </div>239    <div class="rule"></div>240 241    <div class="row">242      <div class="label">Gentle</div>243      <div class="value">Off</div>244    </div>245    <div class="rule"></div>246 247    <div class="row">248      <div class="label">Label</div>249      <div class="value">Alarm</div>250    </div>251  </div>252 253  <!-- Overlay and dialog -->254  <div class="overlay"></div>255  <div class="dialog">256    <div class="dialog-top">257      <div class="typed">-- : 5 --</div>258      <div class="clear-chip">×</div>259    </div>260 261    <div class="keypad">262      <div class="key">1</div>263      <div class="key">2</div>264      <div class="key">3</div>265      <div class="key">4</div>266      <div class="key">5</div>267      <div class="key muted">6</div>268      <div class="key">7</div>269      <div class="key muted">8</div>270      <div class="key muted">9</div>271    </div>272 273    <div class="am-pm-row">274      <div class="am">AM</div>275      <div class="zero">0</div>276      <div class="pm">PM</div>277    </div>278 279    <div class="actions">280      <div class="cancel">CANCEL</div>281      <div class="ok">OK</div>282    </div>283  </div>284 285  <!-- Footer actions under dialog -->286  <div class="footer">287    <div class="rule"></div>288    <div class="footer-actions">289      <div>CANCEL</div>290      <div>OK</div>291    </div>292  </div>293 294  <!-- Gesture bar -->295  <div class="gesture"></div>296 297</div>298</body>299</html>