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 UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #0f1113;15 border-radius: 28px;16 box-shadow: 0 30px 80px rgba(0,0,0,0.45);17 color: #fff;18 }19 20 /* Status + App Bar */21 .status-bar {22 position: absolute;23 top: 0;24 left: 0;25 width: 1080px;26 height: 100px;27 background: #184a82;28 color: #fff;29 display: flex;30 align-items: center;31 padding: 0 32px;32 font-size: 34px;33 letter-spacing: 0.5px;34 }35 .status-left { display: flex; align-items: center; gap: 16px; }36 .status-right { margin-left: auto; display: flex; align-items: center; gap: 24px; }37 .status-dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.9; }38 39 .app-bar {40 position: absolute;41 top: 100px;42 left: 0;43 width: 1080px;44 height: 140px;45 background: #1d5a95;46 display: flex;47 align-items: center;48 padding: 0 30px;49 }50 .app-title {51 font-size: 56px;52 font-weight: 600;53 margin-left: 24px;54 }55 .app-icons {56 margin-left: auto;57 display: flex;58 gap: 40px;59 align-items: center;60 padding-right: 20px;61 }62 .icon-btn svg { width: 52px; height: 52px; fill: none; stroke: #c6d5e6; stroke-width: 6; }63 64 /* Alert banner */65 .alert-banner {66 position: absolute;67 top: 240px;68 left: 0;69 width: 1080px;70 height: 110px;71 background: #2a2a2a;72 display: flex;73 align-items: center;74 padding: 0 24px;75 }76 .alert-inner {77 width: calc(100% - 180px);78 height: 84px;79 background: #3a3a3a;80 border-radius: 8px;81 display: flex;82 align-items: center;83 padding: 0 20px;84 position: relative;85 }86 .alert-text {87 color: #ff6b6b;88 font-size: 34px;89 font-weight: 600;90 margin-left: 16px;91 }92 .alert-btn {93 position: absolute;94 right: 12px;95 top: 12px;96 height: 60px;97 width: 120px;98 background: #4a74a6;99 color: #e9f1ff;100 border-radius: 6px;101 display: flex;102 justify-content: center;103 align-items: center;104 font-size: 34px;105 font-weight: 600;106 }107 108 /* Section header */109 .section-title {110 position: absolute;111 top: 370px;112 left: 24px;113 font-size: 44px;114 color: #89c7ff;115 }116 117 /* Task card */118 .task-card {119 position: absolute;120 top: 440px;121 left: 24px;122 width: 1032px;123 background: #1a1a1a;124 border-radius: 12px;125 box-shadow: 0 8px 20px rgba(0,0,0,0.45);126 padding: 28px 28px 36px 28px;127 }128 .task-title {129 font-size: 56px;130 color: #d6e4f5;131 margin-bottom: 18px;132 }133 .task-meta {134 display: flex;135 align-items: center;136 gap: 16px;137 color: #c2c2c2;138 font-size: 34px;139 margin-bottom: 10px;140 }141 .task-meta svg { width: 34px; height: 34px; stroke: #c2c2c2; }142 .task-date {143 display: flex;144 align-items: center;145 gap: 16px;146 color: #c2c2c2;147 font-size: 34px;148 }149 .task-date svg { width: 34px; height: 34px; stroke: #c2c2c2; }150 151 /* Floating action button */152 .fab {153 position: absolute;154 right: 40px;155 bottom: 300px;156 width: 120px;157 height: 120px;158 background: #2e86d3;159 border-radius: 50%;160 box-shadow: 0 14px 24px rgba(0,0,0,0.5);161 display: flex;162 justify-content: center;163 align-items: center;164 }165 .fab svg { width: 64px; height: 64px; fill: none; stroke: #d8ebff; stroke-width: 6; }166 167 /* Bottom banner/ad */168 .bottom-banner {169 position: absolute;170 bottom: 110px;171 left: 0;172 width: 1080px;173 height: 160px;174 background: #eaf7f6;175 border-top: 1px solid #c9e1de;176 display: flex;177 align-items: center;178 padding: 0 20px;179 color: #0c2c33;180 }181 .banner-left {182 display: flex;183 align-items: center;184 gap: 18px;185 }186 .banner-icon {187 width: 120px;188 height: 120px;189 background: #d6f1ef;190 border: 1px solid #b8dedb;191 display: flex;192 justify-content: center;193 align-items: center;194 color: #258b86;195 border-radius: 16px;196 font-weight: 700;197 }198 .banner-text {199 display: flex;200 flex-direction: column;201 gap: 8px;202 }203 .banner-text .title { font-size: 40px; font-weight: 700; color: #1a3b41; }204 .banner-text .subtitle { font-size: 32px; color: #395a60; }205 .banner-avatars {206 margin-left: auto;207 display: flex;208 gap: 16px;209 padding-right: 18px;210 }211 .avatar {212 width: 120px;213 height: 120px;214 background: #E0E0E0;215 border: 1px solid #BDBDBD;216 border-radius: 60px;217 display: flex;218 justify-content: center;219 align-items: center;220 color: #757575;221 font-size: 24px;222 }223 224 /* Home indicator (pill) */225 .home-indicator {226 position: absolute;227 bottom: 40px;228 left: 50%;229 transform: translateX(-50%);230 width: 300px;231 height: 14px;232 background: #ffffff;233 opacity: 0.8;234 border-radius: 7px;235 }236 237 /* Modal overlay */238 .modal-overlay {239 position: absolute;240 top: 0; left: 0;241 width: 1080px; height: 2400px;242 background: rgba(0,0,0,0.55);243 }244 .modal {245 position: absolute;246 left: 50%;247 top: 1060px;248 transform: translateX(-50%);249 width: 980px;250 background: #2a2a2a;251 border-radius: 8px;252 box-shadow: 0 18px 40px rgba(0,0,0,0.7);253 color: #eaeaea;254 }255 .modal-header {256 display: flex;257 align-items: center;258 height: 110px;259 border-bottom: 3px solid #2f6fb0;260 padding: 0 26px;261 gap: 28px;262 }263 .modal-header .tab-select {264 color: #5aa7ff;265 font-size: 44px;266 font-weight: 700;267 }268 .modal-header .tab-title {269 font-size: 44px;270 font-weight: 600;271 color: #dcdcdc;272 padding: 6px 14px;273 border: 2px solid #6a6a6a;274 border-radius: 6px;275 display: flex;276 align-items: center;277 gap: 12px;278 }279 .dropdown-caret {280 width: 22px;281 height: 22px;282 border-right: 3px solid #bfbfbf;283 border-bottom: 3px solid #bfbfbf;284 transform: rotate(45deg);285 margin-left: 14px;286 }287 .modal-body {288 padding: 24px 36px 28px 36px;289 font-size: 38px;290 }291 .form-row {292 display: flex;293 align-items: center;294 padding: 26px 0;295 color: #efefef;296 }297 .label {298 width: 240px;299 color: #cfcfcf;300 font-weight: 600;301 }302 .value-inline {303 display: inline-flex;304 align-items: center;305 gap: 16px;306 }307 .input-number {308 width: 86px;309 text-align: center;310 font-size: 42px;311 padding: 6px 10px;312 border-bottom: 4px solid #dcdcdc;313 margin: 0 10px;314 }315 .small-muted { color: #cfcfcf; font-size: 36px; }316 .select-box {317 flex: 1;318 height: 86px;319 background: #3a3a3a;320 border: 2px solid #666;321 border-radius: 6px;322 display: flex;323 align-items: center;324 padding: 0 20px;325 gap: 16px;326 font-size: 42px;327 }328 .switch {329 width: 160px;330 height: 56px;331 background: #696969;332 border-radius: 28px;333 position: relative;334 margin-left: 10px;335 }336 .switch::before {337 content: "";338 position: absolute;339 top: 6px; left: 6px;340 width: 44px; height: 44px;341 background: #bfbfbf;342 border-radius: 22px;343 box-shadow: 0 2px 4px rgba(0,0,0,0.4);344 }345 .modal-footer {346 display: flex;347 justify-content: space-between;348 padding: 20px 26px 26px 26px;349 gap: 30px;350 }351 .btn {352 flex: 1;353 height: 100px;354 border-radius: 6px;355 font-size: 44px;356 font-weight: 700;357 display: flex;358 justify-content: center;359 align-items: center;360 }361 .btn-cancel { background: #b72b22; color: #fff; }362 .btn-done { background: #4c9af4; color: #fff; }363 364 /* Simple icon helpers */365 .inline-icon { display: inline-flex; align-items: center; }366</style>367</head>368<body>369<div id="render-target">370 371 <!-- Status bar -->372 <div class="status-bar">373 <div class="status-left">12:27 <span style="font-size:32px; margin-left:8px;">70°</span></div>374 <div class="status-right">375 <!-- simple status icons -->376 <svg viewBox="0 0 24 24"><path d="M3 18h18" stroke="#fff" stroke-width="2"/></svg>377 <div class="status-dot"></div>378 <div class="status-dot"></div>379 <svg viewBox="0 0 24 24"><path d="M2 12l10 10 10-10-10-10-10 10z" stroke="#fff" stroke-width="2" fill="none"/></svg>380 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="3" ry="3" stroke="#fff" stroke-width="2" fill="none"/><rect x="18" y="8" width="2" height="8" fill="#fff"/></svg>381 </div>382 </div>383 384 <!-- App bar -->385 <div class="app-bar">386 <!-- Hamburger -->387 <div class="icon-btn">388 <svg viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18"/></svg>389 </div>390 <div class="app-title">Tasks</div>391 <div class="app-icons">392 <!-- Alarm with plus -->393 <div class="icon-btn">394 <svg viewBox="0 0 24 24">395 <circle cx="12" cy="12" r="8"></circle>396 <path d="M12 8v8M8 12h8"></path>397 </svg>398 </div>399 <!-- Check icon -->400 <div class="icon-btn">401 <svg viewBox="0 0 24 24"><path d="M20 6l-11 12-5-6"/></svg>402 </div>403 <!-- Search icon -->404 <div class="icon-btn">405 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><path d="M21 21l-5-5"></path></svg>406 </div>407 </div>408 </div>409 410 <!-- Alert banner -->411 <div class="alert-banner">412 <div class="alert-inner">413 <div class="inline-icon">414 <svg viewBox="0 0 24 24" width="44" height="44">415 <circle cx="12" cy="12" r="10" fill="none" stroke="#ff6b6b" stroke-width="3"></circle>416 <path d="M12 7v6M12 17h0" stroke="#ff6b6b" stroke-width="3" stroke-linecap="round"></path>417 </svg>418 </div>419 <div class="alert-text">Auto Snooze Un-attended Reminder? Enable/Disable</div>420 <div class="alert-btn">How</div>421 </div>422 </div>423 424 <!-- Section title -->425 <div class="section-title">Next 7 days</div>426 427 <!-- Task card -->428 <div class="task-card">429 <div class="task-title">Buy New Balance Hiking shoes</div>430 <div class="task-meta">431 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none"></circle><path d="M12 6v6l4 2" fill="none"></path></svg>432 12:45 PM433 <svg viewBox="0 0 24 24"><path d="M4 12h16" fill="none"></path></svg>434 Once435 </div>436 <div class="task-date">437 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2" fill="none"></rect><path d="M3 9h18" fill="none"></path></svg>438 Thu, Dec 21, 2023439 </div>440 </div>441 442 <!-- Floating action button -->443 <div class="fab">444 <svg viewBox="0 0 24 24">445 <circle cx="12" cy="12" r="8"></circle>446 <path d="M12 8v8M8 12h8"></path>447 </svg>448 </div>449 450 <!-- Bottom banner/ad -->451 <div class="bottom-banner">452 <div class="banner-left">453 <div class="banner-icon">☎</div>454 <div class="banner-text">455 <div class="title">Speed Dial Widget</div>456 <div class="subtitle">Just tap & dial</div>457 </div>458 </div>459 <div class="banner-avatars">460 <div class="avatar">[IMG: User Avatar]</div>461 <div class="avatar">[IMG: User Avatar]</div>462 <div class="avatar">[IMG: User Avatar]</div>463 </div>464 </div>465 466 <div class="home-indicator"></div>467 468 <!-- Modal overlay -->469 <div class="modal-overlay"></div>470 471 <!-- Modal dialog -->472 <div class="modal">473 <div class="modal-header">474 <div class="tab-select">Select</div>475 <div class="tab-title">REPEAT HOURLY <div class="dropdown-caret"></div></div>476 </div>477 <div class="modal-body">478 <div class="form-row">479 <div class="label">EVERY</div>480 <div class="value-inline">481 <div class="input-number">1</div>482 <span class="small-muted">hour</span>483 </div>484 </div>485 486 <div class="form-row">487 <div class="label">REPEAT ON:</div>488 <div class="select-box">489 Everyday490 <div class="dropdown-caret" style="border-color:#bfbfbf;"></div>491 </div>492 </div>493 494 <div class="form-row">495 <div class="label">ENDS:</div>496 <div class="select-box" style="max-width: 520px;">497 Never498 <div class="dropdown-caret" style="border-color:#bfbfbf;"></div>499 </div>500 </div>501 502 <div class="form-row">503 <div class="label">DO NOT DISTURB:</div>504 <div class="switch"></div>505 </div>506 </div>507 <div class="modal-footer">508 <div class="btn btn-cancel">Cancel</div>509 <div class="btn btn-done">Done</div>510 </div>511 </div>512 513</div>514</body>515</html>