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</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #0f1217; color: #e6e9ee;12  }13  .status-bar {14    position: absolute; top: 0; left: 0; width: 1080px; height: 100px;15    color: #dfe3ea; font-weight: 500;16  }17  .status-left { position: absolute; top: 24px; left: 30px; font-size: 38px; opacity: 0.95; }18  .status-right { position: absolute; top: 20px; right: 24px; display: flex; align-items: center; gap: 22px; }19  .status-icon svg { width: 44px; height: 44px; stroke: #dfe3ea; fill: none; stroke-width: 2.2; opacity: 0.9; }20 21  .screen-title {22    position: absolute; top: 130px; left: 30px; font-size: 68px; color: #9ba2aa; letter-spacing: 0.5px;23  }24  .menu-dots {25    position: absolute; top: 180px; right: 38px; display: flex; flex-direction: column; gap: 10px;26  }27  .menu-dots span { width: 10px; height: 10px; background: #7d838b; border-radius: 50%; display: block; }28 29  .card {30    position: absolute; left: 50px; top: 320px; width: 980px; height: 640px;31    background: #121418; border-radius: 48px; box-shadow: 0 40px 80px rgba(0,0,0,0.55);32  }33  .card .header {34    position: absolute; top: 44px; left: 42px; display: flex; align-items: center; gap: 20px; color: #b9bec4; font-size: 36px;35  }36  .card .time {37    position: absolute; top: 130px; left: 42px; font-size: 180px; font-weight: 700; letter-spacing: 2px; color: #e8edf4;38  }39  .card .ampm { position: absolute; top: 170px; left: 680px; font-size: 64px; color: #aeb4bc; }40  .card .days { position: absolute; bottom: 40px; left: 42px; font-size: 40px; color: #9aa0a7; }41  .toggle {42    position: absolute; right: 40px; bottom: 40px; width: 120px; height: 64px; background: #1b2330; border-radius: 34px; box-shadow: inset 0 0 0 2px #2a3646;43  }44  .toggle::after {45    content: ""; position: absolute; top: 6px; left: 8px; width: 52px; height: 52px; border-radius: 50%; background: #5c86c9;46  }47 48  .fab {49    position: absolute; bottom: 520px; left: 50%; transform: translateX(-50%);50    width: 160px; height: 160px; border-radius: 50%;51    background: #4c5c73; display: flex; align-items: center; justify-content: center; color: #e7edf7; font-size: 110px; font-weight: 300;52    box-shadow: 0 18px 40px rgba(0,0,0,0.6);53    z-index: 2;54  }55 56  /* Bottom navigation */57  .bottom-nav {58    position: absolute; bottom: 80px; left: 0; width: 1080px; height: 220px; background: #0f141a; display: flex; justify-content: space-around; align-items: center;59    border-top: 1px solid rgba(255,255,255,0.06);60  }61  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #a8b0bb; }62  .nav-item.active { color: #e6ecf7; }63  .nav-item svg { width: 84px; height: 84px; stroke: currentColor; stroke-width: 2.5; fill: none; opacity: 0.9; }64  .nav-item .label { font-size: 36px; }65 66  .gesture-pill {67    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); width: 320px; height: 16px; background: #f0f2f5; border-radius: 10px; opacity: 0.9;68  }69 70  /* Time Picker Modal */71  .modal {72    position: absolute; left: 80px; top: 600px; width: 920px; height: 1180px; background: #2d3742;73    border-radius: 56px; box-shadow: 0 60px 120px rgba(0,0,0,0.7); z-index: 5;74  }75  .modal .title { position: absolute; top: 40px; left: 46px; font-size: 42px; color: #cfd5dc; }76  .modal .time-row {77    position: absolute; top: 140px; left: 50px; right: 50px; display: flex; align-items: center; gap: 30px;78  }79  .num-box {80    width: 240px; height: 160px; border-radius: 28px; display: flex; align-items: center; justify-content: center; font-size: 110px; font-weight: 700;81  }82  .num-hour { background: #565c64; color: #f2f4f7; }83  .num-minute { background: #1f5aa0; color: #eaf2ff; }84  .colon { font-size: 120px; color: #cbd3da; font-weight: 600; margin-top: -10px; }85  .ampm-box {86    width: 150px; height: 160px; border: 2px solid #77808a; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column;87  }88  .ampm-opt { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 42px; }89  .ampm-opt.am { background: #232a32; color: #e4e8ee; }90  .ampm-opt.pm { background: #6b5680; color: #f0e9ff; }91 92  .dial {93    position: absolute; left: 80px; right: 80px; top: 360px; height: 760px; border-radius: 50%;94    background: #3a414b;95  }96  .dial .labels { position: absolute; inset: 0; color: #cfd6de; font-size: 40px; }97  .dial .labels span { position: absolute; }98  /* approximate positions for 00..55 around the circle */99  .lbl-00 { top: 22px; left: 368px; }100  .lbl-05 { top: 84px; left: 620px; }101  .lbl-10 { top: 170px; left: 696px; }102  .lbl-15 { top: 266px; left: 724px; }103  .lbl-20 { top: 366px; left: 696px; }104  .lbl-25 { top: 466px; left: 620px; }105  .lbl-30 { top: 536px; left: 370px; }106  .lbl-35 { top: 466px; left: 118px; }107  .lbl-40 { top: 366px; left: 44px; }108  .lbl-45 { top: 266px; left: 20px; }109  .lbl-50 { top: 170px; left: 48px; }110  .lbl-55 { top: 84px; left: 118px; }111 112  .hand {113    position: absolute; top: 180px; left: 372px; width: 8px; height: 300px; background: #8ab2ec; border-radius: 4px;114  }115  .hand::before {116    content: "00"; position: absolute; top: -48px; left: -40px; width: 90px; height: 90px;117    border-radius: 50%; background: #97b9f0; color: #1a2635; font-size: 36px; display: flex; align-items: center; justify-content: center; font-weight: 700;118  }119  .hand::after {120    content: ""; position: absolute; bottom: -14px; left: -16px; width: 40px; height: 40px; background: #8ab2ec; border-radius: 50%;121  }122 123  .modal .actions {124    position: absolute; bottom: 34px; left: 42px; right: 42px; display: flex; align-items: center; justify-content: space-between;125  }126  .kbd {127    display: flex; align-items: center; gap: 16px; color: #cdd3db; font-size: 36px;128  }129  .kbd-icon {130    width: 60px; height: 48px; border-radius: 8px; background: #3a4654; position: relative;131  }132  .kbd-icon span {133    position: absolute; left: 8px; right: 8px; height: 6px; border-radius: 3px; background: #aeb6c0;134  }135  .kbd-icon span:nth-child(1){ top: 8px; }136  .kbd-icon span:nth-child(2){ top: 20px; }137  .kbd-icon span:nth-child(3){ top: 32px; }138 139  .modal .confirm { display: flex; align-items: center; gap: 46px; }140  .btn-flat { font-size: 44px; color: #9ec1f4; }141 142</style>143</head>144<body>145<div id="render-target">146 147  <!-- Status bar -->148  <div class="status-bar">149    <div class="status-left">11:31</div>150    <div class="status-right">151      <div class="status-icon">152        <!-- Wi-Fi -->153        <svg viewBox="0 0 24 24">154          <path d="M2 8c5-5 15-5 20 0"/>155          <path d="M6 12c3-3 9-3 12 0"/>156          <path d="M10 16c2-2 4-2 6 0"/>157          <circle cx="12" cy="20" r="1.8" fill="#dfe3ea"></circle>158        </svg>159      </div>160      <div class="status-icon">161        <!-- Battery -->162        <svg viewBox="0 0 24 24">163          <rect x="2" y="6" width="18" height="12" rx="2"></rect>164          <rect x="20" y="10" width="2" height="4" rx="1"></rect>165          <rect x="4" y="8" width="12" height="8" fill="#dfe3ea" stroke="none"></rect>166        </svg>167      </div>168    </div>169  </div>170 171  <!-- Screen title -->172  <div class="screen-title">Alarm</div>173  <div class="menu-dots"><span></span><span></span><span></span></div>174 175  <!-- Alarm card behind modal -->176  <div class="card">177    <div class="header">178      <svg width="40" height="40" viewBox="0 0 24 24" style="stroke:#b9bec4;">179        <circle cx="12" cy="13" r="7" fill="none" stroke-width="2"></circle>180        <path d="M12 10v4h4" stroke-width="2" fill="none"></path>181        <path d="M4 6l3-2M20 6l-3-2" stroke-width="2" fill="none"></path>182      </svg>183      <span>Wakeup</span>184    </div>185    <div class="time">6:10</div>186    <div class="ampm">AM</div>187    <div class="days">Sun, Sat</div>188    <div class="toggle"></div>189  </div>190 191  <!-- Floating add button (behind modal) -->192  <div class="fab">+</div>193 194  <!-- Time Picker Modal -->195  <div class="modal">196    <div class="title">Select time</div>197 198    <div class="time-row">199      <div class="num-box num-hour">08</div>200      <div class="colon">:</div>201      <div class="num-box num-minute">00</div>202      <div class="ampm-box">203        <div class="ampm-opt am">AM</div>204        <div class="ampm-opt pm">PM</div>205      </div>206    </div>207 208    <div class="dial">209      <div class="labels">210        <span class="lbl-00">00</span>211        <span class="lbl-05">05</span>212        <span class="lbl-10">10</span>213        <span class="lbl-15">15</span>214        <span class="lbl-20">20</span>215        <span class="lbl-25">25</span>216        <span class="lbl-30">30</span>217        <span class="lbl-35">35</span>218        <span class="lbl-40">40</span>219        <span class="lbl-45">45</span>220        <span class="lbl-50">50</span>221        <span class="lbl-55">55</span>222      </div>223      <div class="hand"></div>224    </div>225 226    <div class="actions">227      <div class="kbd">228        <div class="kbd-icon"><span></span><span></span><span></span></div>229      </div>230      <div class="confirm">231        <div class="btn-flat">Cancel</div>232        <div class="btn-flat">OK</div>233      </div>234    </div>235  </div>236 237  <!-- Bottom navigation -->238  <div class="bottom-nav">239    <div class="nav-item active">240      <svg viewBox="0 0 24 24">241        <circle cx="12" cy="13" r="7"></circle>242        <path d="M12 13v-3M12 13h3"></path>243        <path d="M4 6l3-2M20 6l-3-2"></path>244      </svg>245      <div class="label">Alarm</div>246    </div>247    <div class="nav-item">248      <svg viewBox="0 0 24 24">249        <circle cx="12" cy="12" r="8"></circle>250        <path d="M12 12l4-3"></path>251      </svg>252      <div class="label">Clock</div>253    </div>254    <div class="nav-item">255      <svg viewBox="0 0 24 24">256        <path d="M7 3h10l-2 16H9L7 3z"></path>257        <path d="M9 7h6"></path>258      </svg>259      <div class="label">Timer</div>260    </div>261    <div class="nav-item">262      <svg viewBox="0 0 24 24">263        <circle cx="12" cy="12" r="8"></circle>264        <path d="M8 4l-2-2M16 4l2-2"></path>265        <path d="M12 7v5h4"></path>266      </svg>267      <div class="label">Stopwatch</div>268    </div>269    <div class="nav-item">270      <svg viewBox="0 0 24 24">271        <rect x="3" y="10" width="18" height="8" rx="2"></rect>272        <path d="M3 10h6v-2a3 3 0 0 1 6 0v2"></path>273      </svg>274      <div class="label">Bedtime</div>275    </div>276  </div>277 278  <div class="gesture-pill"></div>279</div>280</body>281</html>