GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Tasks UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #121419;14 font-family: Arial, Helvetica, sans-serif;15 color: #E6E6E6;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 120px;25 background: #153F71;26 color: #ffffff;27 }28 .status-left {29 position: absolute;30 left: 36px;31 top: 30px;32 font-size: 42px;33 letter-spacing: 1px;34 }35 .status-icons-left {36 position: absolute;37 left: 220px;38 top: 36px;39 display: flex;40 gap: 24px;41 }42 .status-icons-left .dot {43 width: 10px; height: 10px; border-radius: 50%; background: #d9d9d9; margin-top: 18px;44 }45 .status-right {46 position: absolute;47 right: 36px;48 top: 30px;49 display: flex;50 align-items: center;51 gap: 26px;52 }53 .status-svg { fill: none; stroke: #ffffff; stroke-width: 4; }54 55 /* App bar */56 .app-bar {57 position: absolute;58 top: 120px;59 left: 0;60 width: 1080px;61 height: 150px;62 background: #0D5E9A;63 display: flex;64 align-items: center;65 padding: 0 36px;66 }67 .app-title {68 font-size: 56px;69 font-weight: 600;70 margin-left: 24px;71 }72 .app-actions {73 margin-left: auto;74 display: flex;75 gap: 44px;76 align-items: center;77 }78 .app-icon svg { stroke: #C7D9EA; stroke-width: 16; }79 .hamburger svg { stroke: #C7D9EA; stroke-width: 12; }80 81 /* Warning row */82 .warning {83 position: absolute;84 top: 270px;85 left: 0;86 width: 1080px;87 height: 90px;88 display: flex;89 align-items: center;90 padding: 0 36px;91 background: rgba(0,0,0,0.35);92 }93 .warning-text {94 color: #DD3A3A;95 font-size: 38px;96 margin-left: 18px;97 flex: 1;98 }99 .btn-enable {100 background: #215F90;101 color: #EAF4FF;102 padding: 16px 30px;103 border-radius: 8px;104 font-size: 36px;105 border: 1px solid rgba(255,255,255,0.2);106 }107 108 /* Content list (dimmed behind modal) */109 .content {110 position: absolute;111 top: 360px;112 left: 30px;113 right: 30px;114 bottom: 220px;115 border-radius: 18px;116 background: rgba(0,0,0,0.25);117 box-shadow: 0 12px 40px rgba(0,0,0,0.45);118 }119 .list-row {120 height: 120px;121 display: flex;122 align-items: center;123 padding: 0 36px;124 color: #8C8C8C;125 border-bottom: 1px solid rgba(255,255,255,0.06);126 font-size: 40px;127 }128 .list-row svg { stroke: #8C8C8C; margin-right: 24px; }129 130 /* Add Reminder card (background card) */131 .reminder-card {132 position: absolute;133 top: 760px;134 left: 60px;135 width: 960px;136 border-radius: 16px;137 overflow: hidden;138 background: rgba(24, 26, 32, 0.95);139 box-shadow: 0 30px 60px rgba(0,0,0,0.6);140 }141 .reminder-header {142 height: 120px;143 background: #0D6EAA;144 display: flex;145 align-items: center;146 padding: 0 24px;147 }148 .reminder-header .title {149 font-size: 48px;150 margin-left: 18px;151 flex: 1;152 }153 .btn-save {154 background: #E3EEF7;155 color: #0D6EAA;156 padding: 16px 28px;157 border-radius: 12px;158 font-weight: 700;159 font-size: 38px;160 border: 1px solid rgba(0,0,0,0.1);161 }162 .reminder-body { padding: 24px; color: #BDBDBD; font-size: 36px; }163 164 /* Modal overlay */165 .overlay {166 position: absolute;167 top: 0; left: 0; width: 1080px; height: 2400px;168 background: rgba(0,0,0,0.55);169 }170 .time-modal {171 position: absolute;172 top: 1100px;173 left: 120px;174 width: 840px;175 height: 640px;176 background: #3A3A3A;177 border-radius: 12px;178 box-shadow: 0 20px 60px rgba(0,0,0,0.7);179 padding: 36px 48px;180 }181 .time-top-labels {182 display: flex;183 justify-content: space-between;184 color: #BFBFBF;185 font-size: 42px;186 margin-bottom: 40px;187 padding: 0 12px;188 }189 .time-row {190 display: grid;191 grid-template-columns: 1fr 120px 1fr;192 align-items: center;193 gap: 24px;194 margin: 20px 0 16px 0;195 }196 .time-cell {197 text-align: center;198 }199 .time-value {200 font-size: 64px;201 font-weight: 600;202 color: #FFFFFF;203 padding: 10px 0 24px 0;204 border-bottom: 6px solid #2FA6CF;205 }206 .colon {207 font-size: 64px;208 color: #FFFFFF;209 margin-bottom: 18px;210 text-align: center;211 }212 .time-sub-row {213 display: grid;214 grid-template-columns: 1fr 120px 1fr;215 color: #AFAFAF;216 font-size: 40px;217 margin-top: 18px;218 }219 .modal-actions {220 position: absolute;221 bottom: 28px;222 right: 36px;223 display: flex;224 gap: 32px;225 font-size: 40px;226 }227 .modal-btn {228 color: #2EA0E6;229 cursor: default;230 }231 232 /* Bottom ad placeholder */233 .ad-banner {234 position: absolute;235 bottom: 140px;236 left: 24px;237 width: 1032px;238 height: 160px;239 background: #E0E0E0;240 border: 1px solid #BDBDBD;241 display: flex;242 justify-content: center;243 align-items: center;244 color: #757575;245 font-size: 36px;246 border-radius: 10px;247 }248 249 /* Home indicator */250 .home-indicator {251 position: absolute;252 bottom: 60px;253 left: 50%;254 transform: translateX(-50%);255 width: 300px;256 height: 14px;257 background: #EDEDED;258 border-radius: 8px;259 opacity: 0.9;260 }261</style>262</head>263<body>264<div id="render-target">265 266 <!-- Status bar -->267 <div class="status-bar">268 <div class="status-left">6:19</div>269 <div class="status-icons-left">270 <!-- tiny task icons placeholders -->271 <svg width="34" height="34" class="status-svg"><rect x="6" y="6" width="22" height="22" rx="4" /></svg>272 <svg width="34" height="34" class="status-svg"><circle cx="17" cy="17" r="10" /><line x1="17" y1="7" x2="17" y2="27" /></svg>273 <svg width="34" height="34" class="status-svg"><rect x="8" y="8" width="18" height="18" rx="4"/><line x1="13" y1="13" x2="21" y2="21"/><line x1="21" y1="13" x2="13" y2="21"/></svg>274 <div class="dot"></div>275 </div>276 <div class="status-right">277 <!-- Wi-Fi -->278 <svg width="44" height="34" class="status-svg" viewBox="0 0 44 34">279 <path d="M2 12c9-8 31-8 40 0" />280 <path d="M9 18c6-5 20-5 26 0" />281 <path d="M17 24c3-3 7-3 10 0" />282 <circle cx="22" cy="29" r="2" fill="#fff" stroke="none"/>283 </svg>284 <!-- Battery -->285 <svg width="60" height="34" class="status-svg" viewBox="0 0 60 34">286 <rect x="2" y="6" width="50" height="22" rx="4" />287 <rect x="52" y="12" width="6" height="10" rx="2" />288 <rect x="6" y="10" width="34" height="14" fill="#ffffff" stroke="none"/>289 </svg>290 </div>291 </div>292 293 <!-- App bar -->294 <div class="app-bar">295 <div class="hamburger app-icon">296 <svg width="72" height="72" viewBox="0 0 72 72">297 <line x1="10" y1="18" x2="62" y2="18"/>298 <line x1="10" y1="36" x2="62" y2="36"/>299 <line x1="10" y1="54" x2="62" y2="54"/>300 </svg>301 </div>302 <div class="app-title">Tasks</div>303 <div class="app-actions">304 <div class="app-icon">305 <!-- Plus inside alarm circle -->306 <svg width="80" height="80" viewBox="0 0 80 80">307 <circle cx="40" cy="40" r="28" />308 <line x1="40" y1="28" x2="40" y2="52"/>309 <line x1="28" y1="40" x2="52" y2="40"/>310 </svg>311 </div>312 <div class="app-icon">313 <!-- Check in circle -->314 <svg width="80" height="80" viewBox="0 0 80 80">315 <circle cx="40" cy="40" r="28" />316 <path d="M26 41l10 10 18-20" />317 </svg>318 </div>319 <div class="app-icon">320 <!-- Search -->321 <svg width="80" height="80" viewBox="0 0 80 80">322 <circle cx="34" cy="34" r="20" />323 <line x1="50" y1="50" x2="68" y2="68" />324 </svg>325 </div>326 </div>327 </div>328 329 <!-- Warning message -->330 <div class="warning">331 <svg width="54" height="54" viewBox="0 0 54 54">332 <circle cx="27" cy="27" r="24" fill="none" stroke="#DD3A3A" stroke-width="4"/>333 <line x1="27" y1="14" x2="27" y2="32" stroke="#DD3A3A" stroke-width="4"/>334 <circle cx="27" cy="40" r="3" fill="#DD3A3A" stroke="none"/>335 </svg>336 <div class="warning-text">Please allow app to send you notification</div>337 <div class="btn-enable">Enable</div>338 </div>339 340 <!-- Content behind modal -->341 <div class="content">342 <div class="list-row">343 <svg width="48" height="48" viewBox="0 0 48 48"><rect x="6" y="6" width="36" height="28" rx="4"/><line x1="6" y1="18" x2="42" y2="18"/></svg>344 Rosl...345 </div>346 <div class="list-row">347 <svg width="48" height="48" viewBox="0 0 48 48"><circle cx="24" cy="24" r="16"/><line x1="24" y1="12" x2="24" y2="24"/><line x1="24" y1="24" x2="32" y2="30"/></svg>348 Write...349 </div>350 <div class="list-row">351 <svg width="48" height="48" viewBox="0 0 48 48"><rect x="8" y="8" width="32" height="32" rx="6"/></svg>352 Repeat: No repeat353 </div>354 </div>355 356 <!-- Background Add Reminder card -->357 <div class="reminder-card">358 <div class="reminder-header">359 <svg width="60" height="60" viewBox="0 0 60 60" style="stroke:#EAF4FF; fill:none; stroke-width:6;">360 <line x1="12" y1="12" x2="48" y2="48"/>361 <line x1="48" y1="12" x2="12" y2="48"/>362 </svg>363 <div class="title">Add Reminder</div>364 <div class="btn-save">SAVE</div>365 </div>366 <div class="reminder-body">367 <!-- Minimal body placeholder -->368 <div>Details and fields...</div>369 </div>370 </div>371 372 <!-- Modal overlay and time picker -->373 <div class="overlay"></div>374 <div class="time-modal">375 <div class="time-top-labels">376 <div>12</div>377 <div>27</div>378 <div>AM</div>379 </div>380 381 <div class="time-row">382 <div class="time-cell"><div class="time-value">1</div></div>383 <div class="colon">:</div>384 <div class="time-cell"><div class="time-value">28</div></div>385 </div>386 387 <div class="time-row" style="grid-template-columns: 1fr 1fr 1fr; gap: 24px;">388 <div class="time-cell"><div class="time-value" style="border-bottom: 6px solid #2FA6CF; color:#FFFFFF;">PM</div></div>389 <div></div>390 <div></div>391 </div>392 393 <div class="time-sub-row">394 <div style="text-align:center;">2</div>395 <div style="text-align:center;">29</div>396 <div style="text-align:center;"> </div>397 </div>398 399 <div class="modal-actions">400 <div class="modal-btn">CANCEL</div>401 <div class="modal-btn">OK</div>402 </div>403 </div>404 405 <!-- Ad banner placeholder -->406 <div class="ad-banner">[IMG: Ad Banner - Green Cow Milk]</div>407 408 <!-- Home indicator -->409 <div class="home-indicator"></div>410</div>411</body>412</html>