GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Tasks - Time Picker</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #111213;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 110px;23 background: #0d4a7b;24 color: #fff;25 display: flex;26 align-items: center;27 padding: 0 30px;28 box-sizing: border-box;29 }30 .status-left {31 display: flex;32 align-items: center;33 gap: 22px;34 }35 .status-time {36 font-size: 44px;37 font-weight: 500;38 letter-spacing: 0.5px;39 }40 .status-icons { display: flex; align-items: center; gap: 20px; margin-left: 18px; }41 .status-dot { width: 12px; height: 12px; background: #cfe4ff; border-radius: 50%; }42 .status-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }43 44 /* App bar */45 .app-bar {46 position: absolute;47 top: 110px;48 left: 0;49 width: 1080px;50 height: 120px;51 background: #134e89;52 color: #cfe4ff;53 display: flex;54 align-items: center;55 padding: 0 34px;56 box-sizing: border-box;57 }58 .app-title {59 font-size: 56px;60 font-weight: 500;61 margin-left: 22px;62 }63 .app-actions {64 margin-left: auto;65 display: flex;66 align-items: center;67 gap: 44px;68 }69 .app-icon { width: 60px; height: 60px; }70 71 /* Warning banner */72 .warning-banner {73 position: absolute;74 top: 230px;75 left: 0;76 width: 1080px;77 height: 90px;78 display: flex;79 align-items: center;80 padding: 0 34px;81 box-sizing: border-box;82 color: #d83b35;83 font-size: 38px;84 gap: 20px;85 }86 .warning-badge {87 display: inline-flex;88 align-items: center;89 justify-content: center;90 width: 46px;91 height: 46px;92 border-radius: 50%;93 background: transparent;94 color: #d83b35;95 border: 3px solid #d83b35;96 font-weight: 700;97 }98 .enable-btn {99 margin-left: auto;100 background: #225e92;101 color: #cfe4ff;102 border-radius: 8px;103 padding: 16px 28px;104 font-size: 36px;105 box-shadow: 0 2px 0 rgba(0,0,0,0.3) inset;106 }107 108 /* Background content card behind modal */109 .reminder-card {110 position: absolute;111 top: 550px;112 left: 38px;113 width: 1004px;114 height: 620px;115 background: #1b1b1d;116 border-radius: 14px;117 box-shadow: 0 14px 26px rgba(0,0,0,0.5);118 overflow: hidden;119 }120 .reminder-header {121 height: 110px;122 background: #1565c0;123 color: #cfe4ff;124 display: flex;125 align-items: center;126 padding: 0 24px;127 box-sizing: border-box;128 gap: 24px;129 }130 .reminder-title { font-size: 48px; font-weight: 500; }131 .save-chip {132 margin-left: auto;133 background: #e3eefb;134 color: #134e89;135 font-weight: 700;136 border-radius: 12px;137 padding: 16px 24px;138 font-size: 36px;139 }140 141 /* Modal overlay and dialog */142 .overlay {143 position: absolute;144 left: 0; top: 0; width: 1080px; height: 2400px;145 background: rgba(0,0,0,0.55);146 }147 .dialog {148 position: absolute;149 left: 120px;150 top: 980px;151 width: 840px;152 background: #3a3a3c;153 color: #cfe4ff;154 border-radius: 10px;155 box-shadow: 0 26px 40px rgba(0,0,0,0.6);156 padding: 40px;157 box-sizing: border-box;158 }159 .picker-header {160 display: flex;161 justify-content: space-between;162 color: #aeb6bf;163 font-size: 42px;164 margin-bottom: 20px;165 }166 .time-row {167 display: grid;168 grid-template-columns: 1fr 80px 1fr 1fr;169 align-items: end;170 gap: 30px;171 margin-top: 30px;172 }173 .time-cell {174 color: #ffffff;175 font-size: 86px;176 font-weight: 700;177 text-align: center;178 padding-bottom: 12px;179 border-bottom: 6px solid #4ab0e6;180 }181 .colon {182 font-size: 86px;183 color: #d2e9ff;184 border-bottom: none;185 padding-bottom: 0;186 }187 .below-row {188 display: grid;189 grid-template-columns: 1fr 80px 1fr 1fr;190 align-items: start;191 gap: 30px;192 margin-top: 26px;193 }194 .muted {195 color: #9aa0a6;196 font-size: 46px;197 text-align: center;198 }199 .dialog-actions {200 margin-top: 50px;201 display: flex;202 justify-content: flex-end;203 gap: 40px;204 }205 .action-text {206 color: #3ea6ff;207 font-size: 42px;208 font-weight: 500;209 }210 211 /* Bottom ad banner */212 .ad-banner {213 position: absolute;214 bottom: 140px;215 left: 0;216 width: 1080px;217 height: 190px;218 background: #e8e8ea;219 display: flex;220 align-items: center;221 padding: 0 24px;222 box-sizing: border-box;223 gap: 26px;224 }225 .img-placeholder {226 width: 120px; height: 120px;227 background: #E0E0E0;228 border: 1px solid #BDBDBD;229 display: flex; justify-content: center; align-items: center;230 color: #757575; font-size: 26px; text-align: center;231 border-radius: 60px;232 }233 .ad-text {234 display: flex; flex-direction: column; gap: 16px;235 font-size: 44px; color: #2b2b2d;236 }237 .ad-line { display: flex; align-items: center; gap: 18px; }238 .check {239 width: 40px; height: 40px; border-radius: 8px; background: #2aa84a;240 display: inline-flex; align-items: center; justify-content: center;241 color: #fff; font-size: 28px; font-weight: 700;242 }243 .ad-arrow {244 margin-left: auto;245 width: 84px; height: 84px;246 background: #2c5aa0;247 border-radius: 18px;248 display: flex; align-items: center; justify-content: center;249 }250 .nav-pill {251 position: absolute;252 bottom: 54px;253 left: 50%;254 transform: translateX(-50%);255 width: 230px; height: 16px;256 background: #ffffff;257 border-radius: 10px;258 opacity: 0.9;259 }260 261 /* Simple icon styles */262 .icon { fill: none; stroke: #cfe4ff; stroke-width: 6; }263 .icon-solid { fill: #cfe4ff; stroke: none; }264 265</style>266</head>267<body>268<div id="render-target">269 270 <!-- Status bar -->271 <div class="status-bar">272 <div class="status-left">273 <div class="status-time">6:17</div>274 <div class="status-icons">275 <svg width="32" height="32"><rect x="6" y="6" width="20" height="20" rx="4" class="icon-solid"/></svg>276 <svg width="32" height="32"><circle cx="16" cy="16" r="10" class="icon-solid"/></svg>277 <svg width="32" height="32"><rect x="6" y="6" width="20" height="20" rx="4" class="icon-solid"/></svg>278 <div class="status-dot"></div>279 </div>280 </div>281 <div class="status-right">282 <!-- Wi-Fi -->283 <svg width="46" height="32">284 <path d="M3 12 Q23 -2 43 12" class="icon"></path>285 <path d="M10 18 Q23 8 36 18" class="icon"></path>286 <circle cx="23" cy="26" r="4" class="icon-solid"></circle>287 </svg>288 <!-- Battery -->289 <svg width="52" height="32">290 <rect x="2" y="6" width="40" height="20" rx="3" class="icon"></rect>291 <rect x="44" y="12" width="6" height="8" class="icon-solid"></rect>292 <rect x="6" y="10" width="30" height="12" class="icon-solid"></rect>293 </svg>294 </div>295 </div>296 297 <!-- App bar -->298 <div class="app-bar">299 <!-- Hamburger -->300 <svg class="app-icon" viewBox="0 0 24 24">301 <path d="M3 5 H21 M3 12 H21 M3 19 H21" class="icon" stroke-width="3"></path>302 </svg>303 <div class="app-title">Tasks</div>304 <div class="app-actions">305 <!-- Alarm + -->306 <svg class="app-icon" viewBox="0 0 24 24">307 <circle cx="12" cy="12" r="8" class="icon"></circle>308 <path d="M12 8 V16 M8 12 H16" class="icon" stroke-width="3"></path>309 </svg>310 <!-- Check -->311 <svg class="app-icon" viewBox="0 0 24 24">312 <circle cx="12" cy="12" r="9" class="icon"></circle>313 <path d="M7 12 L10 15 L17 8" class="icon" stroke-width="3"></path>314 </svg>315 <!-- Search -->316 <svg class="app-icon" viewBox="0 0 24 24">317 <circle cx="10" cy="10" r="7" class="icon"></circle>318 <path d="M15 15 L21 21" class="icon"></path>319 </svg>320 </div>321 </div>322 323 <!-- Warning banner -->324 <div class="warning-banner">325 <div class="warning-badge">!</div>326 <div>Please allow app to send you notification</div>327 <div class="enable-btn">Enable</div>328 </div>329 330 <!-- Background content card (behind modal) -->331 <div class="reminder-card">332 <div class="reminder-header">333 <!-- Close X -->334 <svg width="44" height="44" viewBox="0 0 24 24">335 <path d="M4 4 L20 20 M20 4 L4 20" class="icon" stroke-width="3"></path>336 </svg>337 <div class="reminder-title">Add Reminder</div>338 <div class="save-chip">SAVE</div>339 </div>340 </div>341 342 <!-- Modal overlay and time picker dialog -->343 <div class="overlay"></div>344 <div class="dialog">345 <div class="picker-header">346 <div>4</div>347 <div>14</div>348 <div>AM</div>349 </div>350 351 <div class="time-row">352 <div class="time-cell">5</div>353 <div class="colon">:</div>354 <div class="time-cell">15</div>355 <div class="time-cell">PM</div>356 </div>357 358 <div class="below-row">359 <div class="muted">6</div>360 <div></div>361 <div class="muted">16</div>362 <div></div>363 </div>364 365 <div class="dialog-actions">366 <div class="action-text">CANCEL</div>367 <div class="action-text">OK</div>368 </div>369 </div>370 371 <!-- Bottom ad banner -->372 <div class="ad-banner">373 <div class="img-placeholder">[IMG: LG logo]</div>374 <div class="ad-text">375 <div class="ad-line"><span class="check">✓</span> <span>In-store shopping</span></div>376 <div class="ad-line"><span class="check">✓</span> <span>Delivery</span></div>377 </div>378 <div class="ad-arrow">379 <svg width="50" height="50" viewBox="0 0 24 24">380 <path d="M6 4 L18 12 L6 20 Z" class="icon-solid"></path>381 </svg>382 </div>383 </div>384 385 <!-- Navigation pill -->386 <div class="nav-pill"></div>387 388</div>389</body>390</html>