GD-ML/AndroidCode
13.4k
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>Time Picker UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #111;12 }13 14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; width: 100%; height: 100px;17 display: flex; align-items: center; justify-content: space-between;18 color: #fff; padding: 0 32px; font-size: 36px;19 }20 .status-icons { display: flex; align-items: center; gap: 24px; }21 .icon-dot { width: 12px; height: 12px; background: #fff; border-radius: 50%; display: inline-block; }22 .icon-battery {23 width: 56px; height: 28px; border: 3px solid #fff; border-radius: 4px; position: relative; display: inline-block;24 }25 .icon-battery::after { content: ""; position: absolute; right: -8px; top: 8px; width: 6px; height: 12px; background: #fff; border-radius: 2px; }26 .icon-battery .level { position: absolute; left: 3px; top: 3px; height: 20px; width: 38px; background: #fff; }27 .status-text { font-size: 32px; color: #fff; opacity: 0.85; }28 29 /* Background image placeholder */30 .hero {31 position: absolute; left: 0; top: 0; width: 1080px; height: 1200px;32 display: flex; align-items: center; justify-content: center; color: #757575;33 background: #E0E0E0; border: 1px solid #BDBDBD;34 }35 .hero::after { /* dark scrim over image area */36 content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.55);37 }38 39 /* Close icon */40 .close-btn {41 position: absolute; top: 140px; left: 40px; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;42 color: #fff; opacity: 0.85;43 }44 .close-btn svg { width: 44px; height: 44px; }45 46 /* Heading and subheading */47 .content {48 position: absolute; top: 240px; left: 60px; color: #fff; width: 960px;49 }50 .title { font-size: 96px; font-weight: 700; line-height: 1.1; margin-bottom: 28px; opacity: 0.95; }51 .subtitle { font-size: 40px; line-height: 1.45; opacity: 0.85; }52 53 /* Settings area below */54 .settings {55 position: absolute; top: 1140px; left: 0; width: 100%; background: #fff; border-top-left-radius: 18px; border-top-right-radius: 18px;56 box-shadow: 0 -6px 24px rgba(0,0,0,0.25);57 padding: 40px 60px 220px;58 }59 .row {60 display: flex; align-items: center; justify-content: space-between;61 padding: 34px 0; border-bottom: 1px solid #e4e4e4; color: #333; font-size: 42px;62 }63 .row .label { color: #444; }64 .pill {65 display: inline-flex; align-items: center; gap: 20px; font-size: 34px;66 }67 .check {68 width: 64px; height: 64px; border-radius: 50%; background: #1976D2; display: inline-flex;69 align-items: center; justify-content: center; color: #fff; font-weight: 700;70 }71 .toggle {72 width: 112px; height: 64px; background: #e5e5e5; border-radius: 32px; position: relative;73 }74 .toggle.on { background: #c8e6c9; }75 .toggle.on::after { left: 56px; background: #2e7d32; }76 .toggle::after {77 content: ""; position: absolute; top: 6px; left: 6px; width: 52px; height: 52px; background: #888; border-radius: 50%;78 }79 80 /* Bottom continue bar */81 .bottom-bar {82 position: absolute; bottom: 40px; left: 0; width: 100%; height: 140px; background: #0D47A1;83 display: flex; align-items: center; justify-content: center; color: #fff; font-size: 48px; font-weight: 600;84 }85 86 /* Screen scrim for dialog */87 .scrim {88 position: absolute; inset: 0; background: rgba(0,0,0,0.35);89 }90 91 /* Time picker dialog */92 .dialog {93 position: absolute; left: 120px; top: 840px; width: 840px; background: #fff; border-radius: 12px;94 box-shadow: 0 18px 36px rgba(0,0,0,0.35); z-index: 6;95 }96 .dialog-header {97 background: #1976D2; color: #fff; padding: 30px 36px; border-top-left-radius: 12px; border-top-right-radius: 12px;98 display: flex; align-items: flex-end; justify-content: space-between;99 }100 .time-big { font-size: 160px; font-weight: 700; line-height: 1; letter-spacing: 4px; }101 .ampm { display: flex; flex-direction: column; gap: 14px; font-size: 40px; text-transform: uppercase; }102 .ampm .pm { opacity: 0.7; }103 104 .dial {105 position: relative; width: 720px; height: 720px; margin: 40px auto 24px; border-radius: 50%;106 background: #efefef;107 }108 .dial .number {109 position: absolute; font-size: 40px; color: #444;110 }111 /* Manual positions for numbers around the circle */112 .n12 { left: 340px; top: 70px; }113 .n1 { left: 500px; top: 120px; }114 .n2 { left: 600px; top: 220px; }115 .n3 { left: 660px; top: 350px; }116 .n4 { left: 600px; top: 480px; }117 .n5 { left: 520px; top: 580px; }118 .n6 { left: 340px; top: 650px; }119 .n7 { left: 160px; top: 580px; }120 .n8 { left: 60px; top: 480px; }121 .n9 { left: 20px; top: 350px; }122 .n10 { left: 60px; top: 220px; }123 .n11 { left: 160px; top: 120px; }124 125 .center-dot {126 position: absolute; left: 348px; top: 348px; width: 24px; height: 24px; border-radius: 50%; background: #1976D2; opacity: 0.9;127 }128 .hand-line {129 position: absolute; left: 360px; top: 360px; width: 270px; height: 4px; background: #1976D2;130 transform-origin: left center; transform: rotate(55deg);131 }132 .knob {133 position: absolute; left: 520px; top: 560px; width: 116px; height: 116px; border-radius: 50%; background: #1976D2;134 display: flex; align-items: center; justify-content: center; color: #fff; font-size: 54px; font-weight: 700; box-shadow: 0 2px 0 rgba(0,0,0,0.2) inset;135 }136 137 .dialog-footer {138 display: flex; align-items: center; justify-content: space-between;139 padding: 24px 32px 32px;140 }141 .footer-actions { display: flex; align-items: center; gap: 48px; margin-left: auto; }142 .action { color: #1976D2; font-size: 40px; font-weight: 600; }143 144 .keyboard-icon { width: 56px; height: 40px; opacity: 0.6; }145 146</style>147</head>148<body>149<div id="render-target">150 <div class="status-bar">151 <div class="status-text">5:44</div>152 <div class="status-icons">153 <!-- simple mock icons -->154 <svg width="42" height="42" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="#fff" stroke-width="2"/><path d="M8 12l3 3 5-7" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>155 <svg width="42" height="42" viewBox="0 0 24 24" fill="none"><path d="M2 18l8-8 6 6 6-12" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>156 <svg width="42" height="42" viewBox="0 0 24 24" fill="none"><path d="M3 9h18M3 15h12" stroke="#fff" stroke-width="2"/></svg>157 <svg width="42" height="42" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="#fff" stroke-width="2"/><path d="M12 7v5l3 3" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>158 <span class="icon-dot"></span>159 <svg width="42" height="42" viewBox="0 0 24 24" fill="none"><path d="M3 10l6-4 6 4v6a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-6z" stroke="#fff" stroke-width="2"/></svg>160 <svg width="42" height="42" viewBox="0 0 24 24" fill="none"><path d="M4 10a8 8 0 0 1 16 0" stroke="#fff" stroke-width="2"/><path d="M7 10a5 5 0 0 1 10 0" stroke="#fff" stroke-width="2"/></svg>161 <div class="icon-battery"><div class="level"></div></div>162 <div class="status-text">95%</div>163 </div>164 </div>165 166 <div class="hero">167 <div style="position:relative; z-index:1;">[IMG: Blurred subway photo with person wearing earphones]</div>168 </div>169 170 <div class="close-btn">171 <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19" stroke="white" stroke-width="2" stroke-linecap="round"/></svg>172 </div>173 174 <div class="content">175 <div class="title">When would you like to learn?</div>176 <div class="subtitle">Research shows that studying at the same time each day helps form habits.</div>177 </div>178 179 <div class="settings">180 <div class="row">181 <div class="label">Days</div>182 <div class="pill">183 <div class="check">✓</div><div>Mon</div>184 <div style="width:28px;"></div>185 <div class="check">✓</div><div>Sun</div>186 </div>187 </div>188 <div class="row">189 <div class="label">Time</div>190 <div style="font-size:42px; color:#1976D2; font-weight:600;">5:00 AM</div>191 </div>192 <div class="row">193 <div class="label">Minutes</div>194 <div style="font-size:42px; color:#555;">5</div>195 </div>196 <div class="row">197 <div class="label">Notifications</div>198 <div class="toggle on"></div>199 </div>200 <div class="row" style="border-bottom:none;">201 <div class="label">Add study reminders to my calendar</div>202 <div class="toggle"></div>203 </div>204 </div>205 206 <div class="bottom-bar">Continue</div>207 208 <!-- Modal scrim -->209 <div class="scrim"></div>210 211 <!-- Time Picker Dialog -->212 <div class="dialog">213 <div class="dialog-header">214 <div class="time-big">5:00</div>215 <div class="ampm">216 <div class="am">AM</div>217 <div class="pm">PM</div>218 </div>219 </div>220 221 <div class="dial">222 <!-- numbers -->223 <div class="number n12">12</div>224 <div class="number n1">1</div>225 <div class="number n2">2</div>226 <div class="number n3">3</div>227 <div class="number n4">4</div>228 <div class="number n5">5</div>229 <div class="number n6">6</div>230 <div class="number n7">7</div>231 <div class="number n8">8</div>232 <div class="number n9">9</div>233 <div class="number n10">10</div>234 <div class="number n11">11</div>235 236 <div class="center-dot"></div>237 <div class="hand-line"></div>238 <div class="knob">5</div>239 </div>240 241 <div class="dialog-footer">242 <svg class="keyboard-icon" viewBox="0 0 24 24">243 <rect x="2" y="5" width="20" height="14" rx="2" ry="2" fill="none" stroke="#666" stroke-width="2"/>244 <path d="M5 9h2M9 9h2M13 9h2M17 9h2M5 12h2M9 12h2M13 12h2M8 15h8" stroke="#666" stroke-width="2" stroke-linecap="round"/>245 </svg>246 <div class="footer-actions">247 <div class="action">CANCEL</div>248 <div class="action">OK</div>249 </div>250 </div>251 </div>252</div>253</body>254</html>