GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Alarm Time Picker UI</title>6<style>7 body { margin:0; padding:0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target{9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#0f0d12; color:#e6e0e9;11 }12 13 /* Status bar */14 .status-bar{15 position:absolute; top:0; left:0; right:0; height:120px; color:#fff;16 display:flex; align-items:center; justify-content:space-between;17 padding:0 32px; font-size:36px; letter-spacing:1px; opacity:.9;18 }19 .status-right{ display:flex; gap:24px; align-items:center; }20 .icon-battery, .icon-signal{ width:44px; height:44px; }21 .icon-wifi{ width:44px; height:44px; }22 23 /* Background content (Alarm list + FAB) */24 .page-title{25 position:absolute; top:170px; left:48px; font-size:80px; color:#b8b2be22;26 }27 .alarm-card{28 position:absolute; top:340px; left:48px; right:48px; height:240px;29 background:#16141a; border-radius:36px; opacity:.75;30 }31 .alarm-time{32 position:absolute; left:48px; top:60px; font-size:140px; color:#ffffff1f;33 }34 .fab{35 position:absolute; bottom:500px; left:50%; transform:translateX(-50%);36 width:170px; height:170px; border-radius:50%;37 background:#6b4ea1; display:flex; align-items:center; justify-content:center;38 color:#f1e6ff; font-size:110px; box-shadow:0 18px 40px rgba(0,0,0,.45);39 opacity:.9;40 }41 42 /* Bottom navigation */43 .bottom-nav{44 position:absolute; left:0; right:0; bottom:120px; height:200px;45 background:#15121a; display:flex; align-items:center; justify-content:space-around;46 color:#bcb3c9;47 }48 .nav-item{ display:flex; flex-direction:column; align-items:center; gap:14px; font-size:36px; }49 .nav-item svg{ width:64px; height:64px; opacity:.9; }50 .nav-active{51 color:#e7d1ff;52 }53 .nav-active .pill{54 position:absolute; width:140px; height:100px; border-radius:60px;55 background:#3b2b45; transform:translateY(-14px); z-index:0; opacity:.9;56 }57 .nav-item .label{ position:relative; z-index:1; }58 .home-indicator{59 position:absolute; left:50%; bottom:48px; transform:translateX(-50%);60 width:380px; height:12px; border-radius:12px; background:#ffffffa8;61 }62 63 /* Dialog (time picker) */64 .dialog{65 position:absolute; left:70px; right:70px; top:620px;66 background:#2f2835; border-radius:46px; padding:48px 48px 38px;67 box-shadow:0 32px 90px rgba(0,0,0,.6);68 }69 .dialog-title{ font-size:42px; color:#e8e0ee; opacity:.9; margin-bottom:36px; }70 .time-row{71 display:flex; align-items:center; gap:26px; margin-bottom:34px;72 }73 .tile{74 height:140px; width:220px; border-radius:26px; display:flex; align-items:center; justify-content:center;75 font-weight:700; font-size:86px;76 }77 .hour-tile{ background:#5a545f; color:#fff; }78 .minute-tile{ background:#6b4ea1; color:#f6e9ff; }79 .colon{ font-size:86px; color:#e9d9ff; opacity:.9; }80 .ampm{81 margin-left:auto; display:flex; flex-direction:column; gap:16px;82 }83 .ampm .opt{84 width:140px; height:66px; border-radius:18px; display:flex; align-items:center; justify-content:center;85 font-size:42px; border:2px solid #8a7f91;86 color:#e6ddea; background:#201b22;87 }88 .ampm .opt.active{ background:#6d4a51; border-color:#a196a7; color:#ffeef4; }89 90 .dial{91 width:820px; height:820px; border-radius:50%;92 margin:26px auto 0; position:relative;93 background:#3a3440;94 box-shadow: inset 0 0 0 2px rgba(255,255,255,.05);95 }96 .dial::after{97 content:""; position:absolute; inset:24px; border-radius:50%;98 box-shadow: inset 0 0 0 2px rgba(255,255,255,.03);99 }100 .mark{101 position:absolute; left:50%; top:50%; width:0; height:0; transform-origin:center center;102 font-size:42px; color:#d7d2dc;103 }104 .mark span{105 display:block; transform: translate(-50%, -410px) rotate(var(--inv, 0deg));106 }107 /* Pointer to 15 (3 o'clock) */108 .hand{109 position:absolute; left:50%; top:50%; width:300px; height:4px; background:#d9b7f5;110 transform:translate(-2px, -2px) rotate(0deg); border-radius:3px;111 }112 .hand .nub{113 position:absolute; left:-16px; top:50%; transform:translateY(-50%);114 width:18px; height:18px; background:#d9b7f5; border-radius:50%;115 }116 .hand .knob{117 position:absolute; right:-58px; top:50%; transform:translateY(-50%);118 width:116px; height:116px; border-radius:50%; background:#d9b7f5;119 display:flex; align-items:center; justify-content:center; color:#3b2b45; font-weight:700; font-size:42px;120 box-shadow:0 6px 0 rgba(0,0,0,.1) inset;121 }122 123 .dialog-footer{124 display:flex; align-items:center; justify-content:space-between;125 margin-top:36px; padding:0 8px;126 }127 .footer-left{ display:flex; align-items:center; gap:14px; color:#e6dff0; opacity:.9; }128 .footer-right{ display:flex; gap:46px; }129 .dialog-btn{ font-size:46px; color:#e7c7ff; }130 .kbd-icon{ width:60px; height:60px; }131 132 /* subtle rounded corners at dialog edges (matches screenshot) */133 .dialog .corner{134 position:absolute; width:120px; height:120px; border-radius:50%;135 background:transparent; right:-60px; top:-60px; box-shadow: 0 0 0 9999px #2f2835;136 pointer-events:none; display:none; /* helper (not visible) */137 }138</style>139</head>140<body>141<div id="render-target">142 143 <!-- Status bar -->144 <div class="status-bar">145 <div class="status-left">10:12</div>146 <div class="status-right">147 <svg class="icon-signal" viewBox="0 0 24 24" fill="#fff"><path d="M2 20h2v-4H2v4zm4 0h2v-7H6v7zm4 0h2v-10h-2V20zm4 0h2v-13h-2V20zm4 0h2V5h-2v15z"/></svg>148 <svg class="icon-wifi" viewBox="0 0 24 24" fill="#fff"><path d="M12 20a2 2 0 1 0 .001-4.001A2 2 0 0 0 12 20zm6.93-6.36-1.41 1.41A8.003 8.003 0 0 0 6.5 15l-1.42-1.42a10 10 0 0 1 13.85 0zM4.07 9.93 5.5 11.36a12 12 0 0 1 12.99 0l1.42-1.43a14 14 0 0 0-15.84 0z"/></svg>149 <svg class="icon-battery" viewBox="0 0 24 24" fill="#fff"><path d="M16 7H3c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h13c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zm0 8H3V9h13v6zm4-5v4h1a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-1z"/></svg>150 </div>151 </div>152 153 <!-- Background content -->154 <div class="page-title">Alarm</div>155 <div class="alarm-card">156 <div class="alarm-time">8:30 AM</div>157 </div>158 159 <div class="fab">+</div>160 161 <!-- Time Picker Dialog -->162 <div class="dialog">163 <div class="dialog-title">Select time</div>164 165 <div class="time-row">166 <div class="tile hour-tile">09</div>167 <div class="colon">:</div>168 <div class="tile minute-tile">15</div>169 170 <div class="ampm">171 <div class="opt active">AM</div>172 <div class="opt">PM</div>173 </div>174 </div>175 176 <div class="dial">177 <!-- minute labels -->178 <div class="mark" style="transform:rotate(0deg);"><span style="--inv:0deg;">00</span></div>179 <div class="mark" style="transform:rotate(30deg);"><span style="transform: translate(-50%, -410px) rotate(-30deg);">05</span></div>180 <div class="mark" style="transform:rotate(60deg);"><span style="transform: translate(-50%, -410px) rotate(-60deg);">10</span></div>181 <div class="mark" style="transform:rotate(90deg);"><span style="transform: translate(-50%, -410px) rotate(-90deg);">15</span></div>182 <div class="mark" style="transform:rotate(120deg);"><span style="transform: translate(-50%, -410px) rotate(-120deg);">20</span></div>183 <div class="mark" style="transform:rotate(150deg);"><span style="transform: translate(-50%, -410px) rotate(-150deg);">25</span></div>184 <div class="mark" style="transform:rotate(180deg);"><span style="transform: translate(-50%, -410px) rotate(-180deg);">30</span></div>185 <div class="mark" style="transform:rotate(210deg);"><span style="transform: translate(-50%, -410px) rotate(-210deg);">35</span></div>186 <div class="mark" style="transform:rotate(240deg);"><span style="transform: translate(-50%, -410px) rotate(-240deg);">40</span></div>187 <div class="mark" style="transform:rotate(270deg);"><span style="transform: translate(-50%, -410px) rotate(-270deg);">45</span></div>188 <div class="mark" style="transform:rotate(300deg);"><span style="transform: translate(-50%, -410px) rotate(-300deg);">50</span></div>189 <div class="mark" style="transform:rotate(330deg);"><span style="transform: translate(-50%, -410px) rotate(-330deg);">55</span></div>190 191 <!-- pointer to 15 -->192 <div class="hand">193 <div class="nub"></div>194 <div class="knob">15</div>195 </div>196 </div>197 198 <div class="dialog-footer">199 <div class="footer-left">200 <svg class="kbd-icon" viewBox="0 0 24 24" fill="#e6dff0">201 <rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="none" stroke="currentColor" stroke-width="2"/>202 <rect x="4" y="9" width="3" height="2" fill="currentColor"/>203 <rect x="8" y="9" width="3" height="2" fill="currentColor"/>204 <rect x="12" y="9" width="3" height="2" fill="currentColor"/>205 <rect x="16" y="9" width="3" height="2" fill="currentColor"/>206 <rect x="6" y="12" width="12" height="2" fill="currentColor"/>207 </svg>208 </div>209 <div class="footer-right">210 <div class="dialog-btn">Cancel</div>211 <div class="dialog-btn">OK</div>212 </div>213 </div>214 </div>215 216 <!-- Bottom navigation -->217 <div class="bottom-nav">218 <div class="nav-item nav-active" style="position:relative;">219 <div class="pill"></div>220 <svg viewBox="0 0 24 24" fill="#e7d1ff" style="z-index:1;">221 <path d="M12 7a5 5 0 1 0 .001 10.001A5 5 0 0 0 12 7zm0 1.8a3.2 3.2 0 1 1 0 6.4 3.2 3.2 0 0 1 0-6.4z"/>222 <path d="M12 4v2M12 18v2M4 12H2M22 12h-2" stroke="#e7d1ff" stroke-width="1.5" fill="none"/>223 </svg>224 <div class="label">Alarm</div>225 </div>226 <div class="nav-item">227 <svg viewBox="0 0 24 24" fill="#bcb3c9">228 <circle cx="12" cy="12" r="8" stroke="currentColor" stroke-width="2" fill="none"/>229 <path d="M12 12V7M12 12h5" stroke="currentColor" stroke-width="2"/>230 </svg>231 <div class="label">Clock</div>232 </div>233 <div class="nav-item">234 <svg viewBox="0 0 24 24" fill="#bcb3c9">235 <path d="M7 3h10l-2 8 2 10H7l2-10L7 3z" stroke="currentColor" stroke-width="1.5" fill="none"/>236 </svg>237 <div class="label">Timer</div>238 </div>239 <div class="nav-item">240 <svg viewBox="0 0 24 24" fill="#bcb3c9">241 <circle cx="12" cy="12" r="8" stroke="currentColor" stroke-width="2" fill="none"/>242 <path d="M12 8v5l3 2" stroke="currentColor" stroke-width="2" fill="none"/>243 </svg>244 <div class="label">Stopwatch</div>245 </div>246 <div class="nav-item">247 <svg viewBox="0 0 24 24" fill="#bcb3c9">248 <path d="M3 11h18v7H3zM3 11V8h8v3" stroke="currentColor" stroke-width="2" fill="none"/>249 </svg>250 <div class="label">Bedtime</div>251 </div>252 </div>253 <div class="home-indicator"></div>254</div>255</body>256</html>