GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Alarm Time Picker</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0f0d0b;14    color: #e9e2d8;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 100px;24    padding: 22px 30px;25    box-sizing: border-box;26    color: #e9e2d8;27    font-weight: 600;28    letter-spacing: 1px;29  }30  .status-left { float: left; font-size: 36px; opacity: 0.95; }31  .status-right { float: right; display: flex; gap: 26px; align-items: center; }32  .dot-icon {33    width: 28px; height: 28px; border-radius: 50%;34    background: #dedede; opacity: 0.9;35  }36  .wifi {37    width: 44px; height: 24px; border-radius: 8px; border: 3px solid #fff; position: relative;38  }39  .wifi::after {40    content: ""; position: absolute; width: 14px; height: 14px; right: -6px; top: -6px;41    border: 3px solid #fff; border-radius: 4px;42  }43 44  /* Page title and faint content behind modal */45  .page-title {46    position: absolute; top: 150px; left: 46px;47    font-size: 74px; font-weight: 700;48    color: #ddd4c8;49  }50  .alarm-card {51    position: absolute; top: 260px; left: 36px;52    width: 1008px; height: 250px; border-radius: 36px;53    background: #1a1612; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);54    opacity: 0.55;55  }56  .alarm-card .time {57    position: absolute; left: 44px; top: 24px;58    font-size: 140px; font-weight: 800; color: #cfc7bf; opacity: 0.7;59  }60  .alarm-card .days {61    position: absolute; left: 44px; bottom: 26px; font-size: 40px; color: #9a9189;62  }63 64  /* Modal dialog */65  .modal {66    position: absolute;67    left: 78px;68    top: 520px;69    width: 924px;70    height: 1190px;71    background: #2b231b;72    border-radius: 36px;73    box-shadow: 0 28px 70px rgba(0,0,0,0.55);74    padding: 34px 40px;75    box-sizing: border-box;76  }77  .modal-title {78    font-size: 40px; color: #e9dac8; margin-bottom: 26px;79  }80 81  .time-row {82    display: flex; align-items: center; gap: 20px;83  }84  .time-box {85    width: 220px; height: 140px; border-radius: 20px;86    display: flex; align-items: center; justify-content: center;87    font-size: 120px; font-weight: 700;88    color: #fff3e7;89  }90  .time-hour { background: #6b3f17; }91  .time-min { background: #5b5048; color: #efe5dc; }92  .colon {93    font-size: 120px; color: #e9dac8; padding: 0 10px; line-height: 140px;94  }95 96  .ampm {97    margin-left: auto; display: flex; flex-direction: column; gap: 18px;98  }99  .ampm .btn {100    width: 150px; height: 110px; border-radius: 18px;101    display: flex; align-items: center; justify-content: center;102    font-size: 48px; font-weight: 700; letter-spacing: 2px;103    background: #161310; color: #efe7de;104  }105  .ampm .btn.active { background: #4f562c; color: #e8e1d6; }106 107  /* Dial */108  .dial-wrap { margin-top: 30px; display: flex; justify-content: center; }109  .dial {110    position: relative;111    width: 720px; height: 720px; border-radius: 50%;112    background: #3b3129;113    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05);114  }115  .num {116    position: absolute; color: #e8ded3; font-size: 44px; opacity: 0.85;117  }118  /* positions */119  .n12 { top: 34px; left: 344px; }120  .n1  { top: 116px; left: 520px; }121  .n2  { top: 228px; left: 620px; }122  .n3  { top: 338px; left: 690px; }123  .n4  { top: 460px; left: 642px; }124  .n5  { top: 560px; left: 520px; }125  .n6  { top: 624px; left: 350px; }126  .n7  { top: 574px; left: 210px; }127  .n8  { top: 474px; left: 118px; }128  .n9  { top: 344px; left: 70px; }129  .n10 { top: 222px; left: 110px; }130  .n11 { top: 116px; left: 210px; }131 132  .hand {133    position: absolute; left: 360px; top: 360px;134    width: 260px; height: 6px; background: #f4b986;135    transform-origin: 0 50%;136    transform: rotate(228deg);137    border-radius: 3px;138  }139  .center-dot {140    position: absolute; left: 351px; top: 351px;141    width: 18px; height: 18px; background: #f4b986;142    border-radius: 50%;143  }144  .selected-bubble {145    position: absolute; width: 134px; height: 134px; border-radius: 50%;146    background: #ffc893; color: #2f2419; font-weight: 700; font-size: 56px;147    display: flex; align-items: center; justify-content: center;148    left: 214px; top: 560px;149    box-shadow: 0 6px 12px rgba(0,0,0,0.25);150  }151 152  /* Bottom controls of modal */153  .modal-footer {154    position: absolute; bottom: 26px; left: 40px; right: 40px;155    display: flex; align-items: center;156  }157  .kbd {158    width: 78px; height: 52px; border-radius: 10px;159    border: 2px solid #d9c8b7; color: #d9c8b7;160    display: flex; align-items: center; justify-content: center;161    font-size: 30px;162  }163  .actions {164    margin-left: auto; display: flex; gap: 46px; font-size: 44px; font-weight: 600;165    color: #ffb984;166  }167 168  /* Bottom nav behind */169  .bottom-nav {170    position: absolute; left: 0; bottom: 0; width: 1080px; height: 180px;171    background: #0e0c0a; display: flex; justify-content: space-around; align-items: center;172    color: #cbbfb4;173  }174  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: 0.85; }175  .nav-item.active { color: #ffcca3; }176  .icon {177    width: 70px; height: 70px; border-radius: 20px; border: 2px solid currentColor;178  }179</style>180</head>181<body>182<div id="render-target">183 184  <div class="status-bar">185    <div class="status-left">7:12</div>186    <div class="status-right">187      <div class="dot-icon"></div>188      <div class="dot-icon" style="background:#fff;"></div>189      <div class="wifi"></div>190    </div>191  </div>192 193  <div class="page-title">Alarm</div>194  <div class="alarm-card">195    <div class="time">5:00 PM</div>196    <div class="days">Mon, Tue, Wed, Thu, Fri</div>197  </div>198 199  <!-- Time Picker Modal -->200  <div class="modal">201    <div class="modal-title">Select time</div>202 203    <div class="time-row">204      <div class="time-box time-hour">07</div>205      <div class="colon">:</div>206      <div class="time-box time-min">00</div>207 208      <div class="ampm">209        <div class="btn">AM</div>210        <div class="btn active">PM</div>211      </div>212    </div>213 214    <div class="dial-wrap">215      <div class="dial">216        <div class="num n12">12</div>217        <div class="num n1">1</div>218        <div class="num n2">2</div>219        <div class="num n3">3</div>220        <div class="num n4">4</div>221        <div class="num n5">5</div>222        <div class="num n6">6</div>223        <div class="num n7">7</div>224        <div class="num n8">8</div>225        <div class="num n9">9</div>226        <div class="num n10">10</div>227        <div class="num n11">11</div>228 229        <div class="hand"></div>230        <div class="center-dot"></div>231        <div class="selected-bubble">7</div>232      </div>233    </div>234 235    <div class="modal-footer">236      <div class="kbd">⌨️</div>237      <div class="actions">238        <div>Cancel</div>239        <div>OK</div>240      </div>241    </div>242  </div>243 244  <!-- Bottom Navigation -->245  <div class="bottom-nav">246    <div class="nav-item active">247      <div class="icon"></div>248      <div>Alarm</div>249    </div>250    <div class="nav-item">251      <div class="icon"></div>252      <div>Clock</div>253    </div>254    <div class="nav-item">255      <div class="icon"></div>256      <div>Timer</div>257    </div>258    <div class="nav-item">259      <div class="icon"></div>260      <div>Stopwatch</div>261    </div>262    <div class="nav-item">263      <div class="icon"></div>264      <div>Bedtime</div>265    </div>266  </div>267 268</div>269</body>270</html>