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 Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #111214;15 font-family: Arial, Helvetica, sans-serif;16 color: #fff;17 }18 19 /* Top app area */20 .header {21 position: absolute;22 top: 0;23 left: 0;24 width: 1080px;25 background: #0d5a8e;26 box-shadow: 0 2px 0 rgba(0,0,0,0.2);27 }28 .status-bar {29 height: 110px;30 display: flex;31 align-items: center;32 justify-content: space-between;33 padding: 0 32px;34 font-size: 40px;35 color: #eaf6ff;36 opacity: 0.95;37 }38 .status-icons {39 display: flex;40 align-items: center;41 gap: 28px;42 }43 .toolbar {44 height: 120px;45 display: flex;46 align-items: center;47 padding: 0 28px;48 gap: 28px;49 }50 .toolbar-title {51 font-size: 58px;52 font-weight: 600;53 letter-spacing: 0.5px;54 color: #cfe9ff;55 }56 .toolbar-right {57 margin-left: auto;58 display: flex;59 align-items: center;60 gap: 36px;61 opacity: 0.9;62 }63 .icon-btn svg { display: block; }64 65 /* Warning banner */66 .warning {67 position: absolute;68 top: 230px;69 left: 0;70 width: 1080px;71 padding: 22px 28px;72 display: flex;73 align-items: center;74 gap: 22px;75 color: #f26b6b;76 font-size: 42px;77 }78 .warning .enable-btn {79 margin-left: auto;80 background: #224f79;81 color: #d6ecff;82 border: 1px solid rgba(255,255,255,0.25);83 border-radius: 8px;84 padding: 16px 26px;85 font-size: 40px;86 }87 88 /* Simulated content card underneath */89 .reminder-bar {90 position: absolute;91 top: 620px;92 left: 40px;93 width: 1000px;94 height: 118px;95 background: #1976d2;96 border-radius: 10px 10px 6px 6px;97 display: flex;98 align-items: center;99 box-shadow: 0 10px 36px rgba(0,0,0,0.55);100 padding: 0 24px;101 z-index: 2;102 }103 .reminder-bar .title {104 font-size: 52px;105 color: #d7ecff;106 margin-left: 16px;107 }108 .reminder-bar .save {109 margin-left: auto;110 background: #e6eef6;111 color: #1a4f7a;112 border-radius: 12px;113 padding: 14px 24px;114 font-weight: 700;115 font-size: 38px;116 box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);117 }118 119 /* Dim overlay */120 .overlay {121 position: absolute;122 top: 0;123 left: 0;124 width: 1080px;125 height: 2400px;126 background: rgba(0,0,0,0.55);127 z-index: 3;128 }129 130 /* Time picker dialog */131 .dialog {132 position: absolute;133 top: 820px;134 left: 130px;135 width: 820px;136 height: 620px;137 background: #3b3c3f;138 border-radius: 8px;139 box-shadow: 0 26px 60px rgba(0,0,0,0.65);140 z-index: 5;141 padding-top: 60px;142 }143 .picker-rows {144 display: flex;145 align-items: flex-start;146 justify-content: center;147 gap: 36px;148 padding: 0 40px;149 }150 .col {151 width: 220px;152 text-align: center;153 }154 .col.small {155 width: 160px;156 }157 .num-fade {158 font-size: 44px;159 color: #a4a7ab;160 opacity: 0.8;161 margin-bottom: 30px;162 }163 .num-selected {164 font-size: 70px;165 color: #ffffff;166 margin: 6px 0 20px;167 font-weight: 600;168 letter-spacing: 2px;169 }170 .underline {171 height: 4px;172 background: #50bfe6;173 border-radius: 2px;174 margin: 10px 12px 26px;175 }176 .colon {177 font-size: 76px;178 color: #a4a7ab;179 margin-top: 72px;180 }181 .dialog-actions {182 position: absolute;183 right: 36px;184 bottom: 28px;185 display: flex;186 gap: 40px;187 font-size: 42px;188 letter-spacing: 1px;189 }190 .action-cancel { color: #2aa3ff; opacity: 0.95; }191 .action-ok { color: #2aa3ff; font-weight: 600; }192 193 /* Bottom ad */194 .ad-banner {195 position: absolute;196 bottom: 120px;197 left: 0;198 width: 1080px;199 height: 190px;200 background: #efefef;201 border-top: 1px solid #d0d0d0;202 display: flex;203 align-items: center;204 padding: 20px 26px;205 gap: 24px;206 z-index: 6;207 }208 .ad-img {209 width: 120px;210 height: 120px;211 background: #E0E0E0;212 border: 1px solid #BDBDBD;213 display: flex;214 align-items: center;215 justify-content: center;216 color: #757575;217 border-radius: 60px;218 font-size: 20px;219 }220 .ad-content {221 display: flex;222 flex-direction: column;223 gap: 10px;224 }225 .ad-title {226 font-size: 56px;227 color: #111;228 }229 .ad-sub {230 font-size: 42px;231 color: #1b4ea0;232 }233 .ad-cta {234 margin-left: auto;235 width: 80px;236 height: 80px;237 border-radius: 20px;238 background: #2e63a1;239 display: flex;240 align-items: center;241 justify-content: center;242 }243 244 /* Home indicator */245 .home-indicator {246 position: absolute;247 bottom: 40px;248 left: 50%;249 transform: translateX(-50%);250 width: 260px;251 height: 12px;252 background: #e8e8e8;253 border-radius: 8px;254 z-index: 7;255 opacity: 0.9;256 }257</style>258</head>259<body>260<div id="render-target">261 262 <!-- Top App Bar -->263 <div class="header">264 <div class="status-bar">265 <div>6:18</div>266 <div class="status-icons">267 <!-- Small status glyphs -->268 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">269 <circle cx="12" cy="12" r="10" stroke="#ffffff" stroke-width="2" opacity="0.9"/>270 </svg>271 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">272 <path d="M3 18h18l-9-12-9 12z" stroke="#ffffff" stroke-width="2" opacity="0.9"/>273 </svg>274 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">275 <circle cx="12" cy="12" r="3" fill="#fff"/>276 </svg>277 <div style="width:8px;height:8px;background:#fff;border-radius:4px;"></div>278 <!-- WiFi -->279 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">280 <path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M9 16c2-2 6-2 8 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.95"/>281 <circle cx="13" cy="19" r="1.5" fill="#ffffff"/>282 </svg>283 <!-- Battery -->284 <svg width="48" height="48" viewBox="0 0 28 24" fill="none">285 <rect x="2" y="6" width="20" height="12" rx="2" stroke="#ffffff" stroke-width="2"/>286 <rect x="4" y="8" width="16" height="8" fill="#ffffff"/>287 <rect x="22" y="10" width="4" height="4" rx="1" fill="#ffffff"/>288 </svg>289 </div>290 </div>291 <div class="toolbar">292 <!-- Hamburger -->293 <div class="icon-btn">294 <svg width="70" height="70" viewBox="0 0 24 24" fill="none">295 <path d="M3 6h18M3 12h18M3 18h18" stroke="#eaf6ff" stroke-width="2.5" stroke-linecap="round"/>296 </svg>297 </div>298 <div class="toolbar-title">Tasks</div>299 <div class="toolbar-right">300 <!-- Add with alarm -->301 <div class="icon-btn">302 <svg width="70" height="70" viewBox="0 0 24 24" fill="none">303 <circle cx="12" cy="13" r="6.5" stroke="#cfe9ff" stroke-width="2"/>304 <path d="M12 10v6M9 13h6" stroke="#cfe9ff" stroke-width="2" stroke-linecap="round"/>305 <path d="M6 6l-3-2M18 6l3-2" stroke="#cfe9ff" stroke-width="2" stroke-linecap="round"/>306 </svg>307 </div>308 <!-- Check circle -->309 <div class="icon-btn">310 <svg width="70" height="70" viewBox="0 0 24 24" fill="none">311 <circle cx="12" cy="12" r="9" stroke="#cfe9ff" stroke-width="2"/>312 <path d="M7 12l3 3 6-6" stroke="#cfe9ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>313 </svg>314 </div>315 <!-- Search -->316 <div class="icon-btn">317 <svg width="70" height="70" viewBox="0 0 24 24" fill="none">318 <circle cx="11" cy="11" r="7" stroke="#cfe9ff" stroke-width="2"/>319 <path d="M20 20l-4-4" stroke="#cfe9ff" stroke-width="2" stroke-linecap="round"/>320 </svg>321 </div>322 </div>323 </div>324 </div>325 326 <!-- Warning banner -->327 <div class="warning">328 <svg width="54" height="54" viewBox="0 0 24 24" fill="none">329 <circle cx="12" cy="12" r="10" stroke="#ff6b6b" stroke-width="2"/>330 <path d="M12 7v7" stroke="#ff6b6b" stroke-width="2" stroke-linecap="round"/>331 <circle cx="12" cy="17" r="1.3" fill="#ff6b6b"/>332 </svg>333 <div>Please allow app to send you notification</div>334 <div class="enable-btn">Enable</div>335 </div>336 337 <!-- Content card beneath dialog (title bar of a form) -->338 <div class="reminder-bar">339 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">340 <path d="M6 6l12 12M18 6L6 18" stroke="#e1f1ff" stroke-width="2" stroke-linecap="round"/>341 </svg>342 <div class="title">Add Reminder</div>343 <div class="save">SAVE</div>344 </div>345 346 <!-- Dim overlay -->347 <div class="overlay"></div>348 349 <!-- Time Picker Dialog -->350 <div class="dialog">351 <div class="picker-rows">352 <div class="col">353 <div class="num-fade">1</div>354 <div class="underline"></div>355 <div class="num-selected">2</div>356 <div class="underline"></div>357 <div class="num-fade">3</div>358 </div>359 <div class="colon">:</div>360 <div class="col">361 <div class="num-fade">14</div>362 <div class="underline"></div>363 <div class="num-selected">15</div>364 <div class="underline"></div>365 <div class="num-fade">16</div>366 </div>367 <div class="col small">368 <div class="num-fade">AM</div>369 <div class="underline"></div>370 <div class="num-selected">PM</div>371 <div class="underline"></div>372 <div class="num-fade"> </div>373 </div>374 </div>375 <div class="dialog-actions">376 <div class="action-cancel">CANCEL</div>377 <div class="action-ok">OK</div>378 </div>379 </div>380 381 <!-- Bottom Ad -->382 <div class="ad-banner">383 <div class="ad-img">[IMG: LG Logo]</div>384 <div class="ad-content">385 <div class="ad-title">1* Emi Free</div>386 <div class="ad-sub">LG Best Shop (Gandhi...</div>387 </div>388 <div class="ad-cta">389 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">390 <path d="M8 5l8 7-8 7" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>391 </svg>392 </div>393 </div>394 395 <!-- Home indicator -->396 <div class="home-indicator"></div>397</div>398</body>399</html>