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>Tasks - Time Picker</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #111314;15 color: #eaeff4;16 }17 18 /* Top App Bar */19 .appbar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 190px;25 background: #0F5586;26 box-shadow: 0 2px 6px rgba(0,0,0,0.4);27 }28 .status-row {29 position: absolute;30 top: 18px;31 left: 30px;32 right: 30px;33 height: 40px;34 color: #DAE8F6;35 font-size: 34px;36 display: flex;37 align-items: center;38 justify-content: space-between;39 opacity: 0.95;40 }41 .status-icons {42 display: flex;43 align-items: center;44 gap: 26px;45 }46 .toolbar {47 position: absolute;48 top: 88px;49 left: 24px;50 right: 24px;51 height: 78px;52 display: flex;53 align-items: center;54 }55 .title {56 font-size: 58px;57 color: #CFE6FF;58 margin-left: 24px;59 }60 .actions {61 margin-left: auto;62 display: flex;63 gap: 44px;64 }65 .icon {66 width: 60px; height: 60px;67 }68 .icon path, .icon circle, .icon line {69 stroke: #B9D3E9; stroke-width: 6; fill: none;70 }71 72 /* Red warning bar */73 .warning {74 position: absolute;75 top: 200px;76 left: 24px;77 right: 24px;78 height: 96px;79 border-radius: 8px;80 display: flex;81 align-items: center;82 padding: 0 20px;83 gap: 20px;84 color: #FF5A60;85 background: rgba(0,0,0,0.25);86 border: 1px solid rgba(255,90,96,0.25);87 }88 .warning .enable-btn {89 margin-left: auto;90 background: #2D6FA8;91 color: #EAF4FF;92 padding: 14px 26px;93 border-radius: 8px;94 font-weight: bold;95 letter-spacing: 1px;96 box-shadow: 0 1px 0 rgba(0,0,0,0.2) inset;97 }98 .warn-icon {99 width: 44px; height: 44px; border-radius: 50%;100 border: 3px solid #FF5A60;101 display: flex; align-items: center; justify-content: center;102 color: #FF5A60; font-weight: 900;103 }104 .warning span.text {105 font-size: 40px;106 color: #E76167;107 }108 109 /* Dim overlay */110 .overlay {111 position: absolute;112 inset: 0;113 background: rgba(0,0,0,0.55);114 z-index: 20;115 }116 117 /* Underlay sheet (Add Reminder - behind dialog) */118 .sheet {119 position: absolute;120 top: 560px;121 left: 48px;122 width: 984px;123 height: 520px;124 background: #1C1F21;125 border-radius: 10px;126 box-shadow: 0 16px 40px rgba(0,0,0,0.6);127 }128 .sheet .sheet-header {129 height: 92px;130 background: #0F75B8;131 border-top-left-radius: 10px;132 border-top-right-radius: 10px;133 display: flex;134 align-items: center;135 padding: 0 24px;136 gap: 18px;137 color: #D7EEFF;138 font-size: 46px;139 font-weight: 600;140 }141 .sheet .save-chip {142 margin-left: auto;143 background: #E8EEF5;144 color: #0F75B8;145 padding: 10px 20px;146 border-radius: 10px;147 font-size: 34px;148 font-weight: bold;149 }150 .sheet .content-fade {151 padding: 20px 24px;152 color: #9AA5AE;153 font-size: 40px;154 opacity: 0.6;155 }156 157 /* Center Dialog - Time Picker */158 .dialog {159 position: absolute;160 left: 120px;161 right: 120px;162 top: 740px;163 height: 760px;164 background: #3E3E3E;165 border-radius: 10px;166 box-shadow: 0 20px 60px rgba(0,0,0,0.6);167 z-index: 30;168 color: #DDE6F1;169 }170 .picker-area {171 position: absolute;172 top: 150px;173 left: 80px;174 right: 80px;175 height: 420px;176 display: grid;177 grid-template-columns: 1fr 120px 1fr 1fr;178 align-items: center;179 column-gap: 20px;180 }181 .col {182 text-align: center;183 }184 .prev, .next { color: #B0B0B0; font-size: 54px; line-height: 70px; }185 .selected { color: #FFFFFF; font-size: 96px; font-weight: 700; line-height: 120px; }186 .underline {187 margin: 8px auto 0;188 width: 90%;189 height: 6px;190 background: #4CB1E6;191 }192 .colon {193 font-size: 110px;194 color: #BFDDF6;195 font-weight: 700;196 }197 .dialog-actions {198 position: absolute;199 bottom: 36px;200 right: 60px;201 display: flex;202 gap: 50px;203 font-size: 44px;204 font-weight: 700;205 }206 .action-cancel { color: #2D8AE6; opacity: 0.95; }207 .action-ok { color: #2D8AE6; }208 209 /* Bottom Ad banner */210 .ad-bar {211 position: absolute;212 left: 0;213 right: 0;214 bottom: 84px;215 height: 180px;216 background: #ECEFF1;217 border-top: 1px solid #C9D3DA;218 display: flex;219 align-items: center;220 padding: 0 24px;221 gap: 20px;222 color: #1B2B3B;223 }224 .ad-img {225 width: 120px; height: 120px;226 background: #E0E0E0; border: 1px solid #BDBDBD;227 display: flex; align-items: center; justify-content: center;228 color: #757575; font-size: 28px; text-align: center;229 border-radius: 60px;230 }231 .ad-text {232 display: flex; flex-direction: column; gap: 10px;233 }234 .ad-title { font-size: 54px; font-weight: 700; }235 .ad-sub { font-size: 42px; color: #1F5DAF; }236 .ad-cta {237 margin-left: auto;238 width: 90px; height: 90px; border-radius: 20%;239 background: #2A66B7;240 clip-path: polygon(35% 20%, 85% 50%, 35% 80%, 35% 60%, 15% 60%, 15% 40%, 35% 40%);241 }242 243 /* Gesture bar */244 .gesture {245 position: absolute;246 bottom: 18px;247 left: 50%;248 transform: translateX(-50%);249 width: 260px;250 height: 12px;251 background: #FFFFFF;252 border-radius: 10px;253 opacity: 0.9;254 }255</style>256</head>257<body>258<div id="render-target">259 260 <!-- Top app bar -->261 <div class="appbar">262 <div class="status-row">263 <div>6:18</div>264 <div class="status-icons">265 <!-- simple glyph circles as placeholders -->266 <svg width="36" height="36"><circle cx="18" cy="18" r="4" fill="#DAE8F6"/></svg>267 <svg width="36" height="36"><circle cx="18" cy="18" r="4" fill="#DAE8F6"/></svg>268 <svg width="36" height="36"><circle cx="18" cy="18" r="4" fill="#DAE8F6"/></svg>269 <svg width="12" height="12"><circle cx="6" cy="6" r="5" fill="#DAE8F6"/></svg>270 <!-- WiFi -->271 <svg width="48" height="36" viewBox="0 0 24 24">272 <path d="M2 8c5-4 15-4 20 0" stroke="#DAE8F6" stroke-width="2" fill="none"/>273 <path d="M6 12c3-2 9-2 12 0" stroke="#DAE8F6" stroke-width="2" fill="none"/>274 <circle cx="12" cy="17" r="2" fill="#DAE8F6"/>275 </svg>276 <!-- Battery -->277 <svg width="60" height="36" viewBox="0 0 30 16">278 <rect x="1" y="3" width="24" height="10" stroke="#DAE8F6" fill="none" stroke-width="2"/>279 <rect x="3" y="5" width="16" height="6" fill="#DAE8F6"/>280 <rect x="25" y="6" width="4" height="4" fill="#DAE8F6"/>281 </svg>282 </div>283 </div>284 285 <div class="toolbar">286 <!-- Hamburger -->287 <svg class="icon" viewBox="0 0 24 24">288 <line x1="3" y1="6" x2="21" y2="6"></line>289 <line x1="3" y1="12" x2="21" y2="12"></line>290 <line x1="3" y1="18" x2="21" y2="18"></line>291 </svg>292 <div class="title">Tasks</div>293 <div class="actions">294 <!-- Add/Alarm -->295 <svg class="icon" viewBox="0 0 24 24">296 <circle cx="12" cy="12" r="8"></circle>297 <line x1="12" y1="8" x2="12" y2="16"></line>298 <line x1="8" y1="12" x2="16" y2="12"></line>299 </svg>300 <!-- Check -->301 <svg class="icon" viewBox="0 0 24 24">302 <circle cx="12" cy="12" r="9"></circle>303 <path d="M7 12l3 3 6-7" fill="none" stroke="#B9D3E9" stroke-width="6" />304 </svg>305 <!-- Search -->306 <svg class="icon" viewBox="0 0 24 24">307 <circle cx="10" cy="10" r="7"></circle>308 <line x1="15" y1="15" x2="21" y2="21"></line>309 </svg>310 </div>311 </div>312 </div>313 314 <!-- Warning -->315 <div class="warning">316 <div class="warn-icon">!</div>317 <span class="text">Please allow app to send you notification</span>318 <div class="enable-btn">Enable</div>319 </div>320 321 <!-- Dim overlay -->322 <div class="overlay"></div>323 324 <!-- Underlay sheet -->325 <div class="sheet">326 <div class="sheet-header">327 <!-- close icon -->328 <svg width="48" height="48" viewBox="0 0 24 24">329 <line x1="4" y1="4" x2="20" y2="20" stroke="#D7EEFF" stroke-width="3"/>330 <line x1="20" y1="4" x2="4" y2="20" stroke="#D7EEFF" stroke-width="3"/>331 </svg>332 <div>Add Reminder</div>333 <div class="save-chip">SAVE</div>334 </div>335 <div class="content-fade">...form content hidden behind dialog...</div>336 </div>337 338 <!-- Time Picker Dialog -->339 <div class="dialog">340 <div class="picker-area">341 <!-- Hour column -->342 <div class="col">343 <div class="prev">2</div>344 <div class="underline" style="visibility:hidden"></div>345 <div class="selected">3</div>346 <div class="underline"></div>347 <div class="next">4</div>348 </div>349 <!-- Colon -->350 <div class="colon">:</div>351 <!-- Minute column -->352 <div class="col">353 <div class="prev">14</div>354 <div class="underline" style="visibility:hidden"></div>355 <div class="selected">15</div>356 <div class="underline"></div>357 <div class="next">16</div>358 </div>359 <!-- AM/PM column -->360 <div class="col">361 <div class="prev">AM</div>362 <div class="underline" style="visibility:hidden"></div>363 <div class="selected">PM</div>364 <div class="underline"></div>365 <div class="next" style="opacity:0">-</div>366 </div>367 </div>368 <div class="dialog-actions">369 <div class="action-cancel">CANCEL</div>370 <div class="action-ok">OK</div>371 </div>372 </div>373 374 <!-- Bottom Ad -->375 <div class="ad-bar">376 <div class="ad-img">[IMG: LG Logo]</div>377 <div class="ad-text">378 <div class="ad-title">1* Emi Free</div>379 <div class="ad-sub">LG Best Shop (Gandhi...)</div>380 </div>381 <div class="ad-cta"></div>382 </div>383 384 <!-- Gesture bar -->385 <div class="gesture"></div>386</div>387</body>388</html>