GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Tasks UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #2f2f33;13 border-radius: 0;14 }15 16 /* Top app bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 110px;23 background: #4f8ef7;24 color: #ffffff;25 font-size: 32px;26 display: flex;27 align-items: center;28 padding: 0 40px;29 box-sizing: border-box;30 }31 .status-right {32 margin-left: auto;33 display: flex;34 align-items: center;35 gap: 20px;36 }37 .app-bar {38 position: absolute;39 top: 110px;40 left: 0;41 width: 1080px;42 height: 170px;43 background: #4f8ef7;44 color: #ffffff;45 display: flex;46 align-items: center;47 box-sizing: border-box;48 padding: 0 36px;49 }50 .title {51 font-size: 64px;52 font-weight: 700;53 margin-left: 24px;54 }55 .app-icons {56 margin-left: auto;57 display: flex;58 gap: 36px;59 }60 .icon {61 width: 56px;62 height: 56px;63 }64 .icon.small { width: 40px; height: 40px; }65 66 /* Content sections */67 .content {68 position: absolute;69 top: 280px;70 left: 0;71 width: 1080px;72 box-sizing: border-box;73 color: #fff;74 }75 .section-header {76 height: 86px;77 display: flex;78 align-items: center;79 padding: 0 34px;80 font-size: 48px;81 font-weight: 700;82 color: #1a1a1a;83 }84 .section-yellow { background: #ffca3a; }85 .section-blue { background: #66aaff; color: #ffffff; }86 .section-green { background: #b4d64d; color: #1a1a1a; }87 88 .card {89 background: #3a3a3f;90 margin: 0;91 padding: 34px;92 border-bottom: 1px solid #2b2b2f;93 position: relative;94 }95 .card-title {96 font-size: 52px;97 font-weight: 700;98 margin-bottom: 26px;99 }100 .meta {101 display: flex;102 align-items: center;103 gap: 26px;104 color: #d0d0d0;105 font-size: 34px;106 }107 .meta .chip {108 display: inline-flex;109 align-items: center;110 gap: 12px;111 }112 .chev {113 position: absolute;114 right: 30px;115 top: 40px;116 opacity: 0.7;117 }118 119 /* Floating action button */120 .fab {121 position: absolute;122 right: 36px;123 bottom: 290px;124 width: 160px;125 height: 160px;126 background: #4f8ef7;127 border-radius: 50%;128 box-shadow: 0 10px 24px rgba(0,0,0,0.45);129 display: flex;130 align-items: center;131 justify-content: center;132 }133 134 /* Ad banner */135 .ad-banner {136 position: absolute;137 left: 0;138 bottom: 110px;139 width: 1080px;140 height: 230px;141 background: #1f2024;142 box-shadow: 0 -6px 16px rgba(0,0,0,0.35);143 display: flex;144 align-items: center;145 padding: 24px 30px;146 box-sizing: border-box;147 color: #fff;148 gap: 26px;149 }150 .ad-img {151 width: 280px;152 height: 180px;153 background: #E0E0E0;154 border: 1px solid #BDBDBD;155 display: flex;156 align-items: center;157 justify-content: center;158 color: #757575;159 border-radius: 8px;160 }161 .ad-details {162 flex: 1;163 }164 .ad-title { font-size: 44px; font-weight: 700; }165 .ad-sub { font-size: 34px; color: #cfd8dc; margin-top: 6px; }166 .ad-open {167 background: #2ecc71;168 color: #0b2e15;169 border-radius: 50px;170 padding: 16px 36px;171 font-size: 40px;172 font-weight: 700;173 margin-left: auto;174 }175 176 /* Home indicator */177 .home-indicator {178 position: absolute;179 bottom: 40px;180 left: 50%;181 transform: translateX(-50%);182 width: 360px;183 height: 12px;184 background: #cfd8dc;185 border-radius: 12px;186 opacity: 0.7;187 }188</style>189</head>190<body>191<div id="render-target">192 193 <!-- Status bar -->194 <div class="status-bar">195 <div>6:52</div>196 <div class="status-right">197 <!-- Simple placeholders for status icons -->198 <svg class="icon small" viewBox="0 0 24 24">199 <circle cx="12" cy="12" r="9" fill="none" stroke="#fff" stroke-width="2"/>200 <path d="M12 7v5l4 2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>201 </svg>202 <svg class="icon small" viewBox="0 0 24 24">203 <path d="M3 8h18v8H3z" fill="none" stroke="#fff" stroke-width="2"/>204 <circle cx="6" cy="20" r="1.5" fill="#fff"/>205 <circle cx="18" cy="20" r="1.5" fill="#fff"/>206 </svg>207 <svg class="icon small" viewBox="0 0 24 24">208 <path d="M3 10l7-6v16l-7-6M13 6h8v12h-8z" fill="#fff"/>209 </svg>210 <svg class="icon small" viewBox="0 0 24 24">211 <rect x="4" y="4" width="16" height="16" rx="3" fill="none" stroke="#fff" stroke-width="2"/>212 <rect x="6" y="6" width="12" height="12" fill="#fff"/>213 </svg>214 </div>215 </div>216 217 <!-- App bar -->218 <div class="app-bar">219 <!-- hamburger -->220 <svg class="icon" viewBox="0 0 24 24">221 <path d="M3 6h18M3 12h18M3 18h18" stroke="#fff" stroke-width="2" stroke-linecap="round"/>222 </svg>223 <div class="title">Tasks</div>224 <div class="app-icons">225 <!-- add with alarm ring -->226 <svg class="icon" viewBox="0 0 24 24">227 <circle cx="12" cy="13" r="7" fill="none" stroke="#fff" stroke-width="2"/>228 <path d="M12 10v6M9 13h6" stroke="#fff" stroke-width="2" stroke-linecap="round"/>229 <path d="M5 5l3 2M19 5l-3 2" stroke="#fff" stroke-width="2" stroke-linecap="round"/>230 </svg>231 <!-- check circle -->232 <svg class="icon" viewBox="0 0 24 24">233 <circle cx="12" cy="12" r="9" fill="none" stroke="#fff" stroke-width="2"/>234 <path d="M7 12l3 3 7-7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>235 </svg>236 <!-- search -->237 <svg class="icon" viewBox="0 0 24 24">238 <circle cx="10" cy="10" r="7" fill="none" stroke="#fff" stroke-width="2"/>239 <path d="M15 15l6 6" stroke="#fff" stroke-width="2" stroke-linecap="round"/>240 </svg>241 </div>242 </div>243 244 <div class="content">245 <!-- Tomorrow -->246 <div class="section-header section-yellow">Tomorrow</div>247 248 <div class="card">249 <div class="card-title">Catch Subway</div>250 <div class="meta">251 <span class="chip">252 <svg class="icon small" viewBox="0 0 24 24">253 <circle cx="12" cy="13" r="7" fill="none" stroke="#d0d0d0" stroke-width="2"/>254 <path d="M12 10v4l3 2" stroke="#d0d0d0" stroke-width="2" fill="none" stroke-linecap="round"/>255 </svg>256 08:00 AM257 </span>258 <span class="chip">259 <svg class="icon small" viewBox="0 0 24 24">260 <path d="M6 18l-2-2m0 0l5-5 4 4 7-7" stroke="#d0d0d0" stroke-width="2" fill="none"/>261 <path d="M21 7a9 9 0 10-3.2 6.9" stroke="#d0d0d0" stroke-width="2" fill="none"/>262 </svg>263 1 day264 </span>265 <span class="chip">266 <svg class="icon small" viewBox="0 0 24 24">267 <rect x="3" y="5" width="18" height="16" rx="2" fill="none" stroke="#d0d0d0" stroke-width="2"/>268 <path d="M3 9h18" stroke="#d0d0d0" stroke-width="2"/>269 </svg>270 Thu, Sep 28, 2023271 </span>272 </div>273 <svg class="chev icon small" viewBox="0 0 24 24">274 <path d="M6 9l6 6 6-6" stroke="#d0d0d0" stroke-width="2" fill="none" stroke-linecap="round"/>275 </svg>276 </div>277 278 <div class="card">279 <div class="card-title">Yoga classes</div>280 <div class="meta">281 <span class="chip">282 <svg class="icon small" viewBox="0 0 24 24">283 <circle cx="12" cy="13" r="7" fill="none" stroke="#d0d0d0" stroke-width="2"/>284 <path d="M12 10v4l3 2" stroke="#d0d0d0" stroke-width="2" fill="none" stroke-linecap="round"/>285 </svg>286 11:00 AM287 </span>288 <span class="chip">289 <svg class="icon small" viewBox="0 0 24 24">290 <path d="M6 18l-2-2m0 0l5-5 4 4 7-7" stroke="#d0d0d0" stroke-width="2" fill="none"/>291 <path d="M21 7a9 9 0 10-3.2 6.9" stroke="#d0d0d0" stroke-width="2" fill="none"/>292 </svg>293 1 day294 </span>295 <span class="chip">296 <svg class="icon small" viewBox="0 0 24 24">297 <rect x="3" y="5" width="18" height="16" rx="2" fill="none" stroke="#d0d0d0" stroke-width="2"/>298 <path d="M3 9h18" stroke="#d0d0d0" stroke-width="2"/>299 </svg>300 Thu, Sep 28, 2023301 </span>302 </div>303 <svg class="chev icon small" viewBox="0 0 24 24">304 <path d="M6 9l6 6 6-6" stroke="#d0d0d0" stroke-width="2" fill="none" stroke-linecap="round"/>305 </svg>306 </div>307 308 <!-- Next 7 days -->309 <div class="section-header section-blue">Next 7 days</div>310 311 <div class="card">312 <div class="card-title">Call Mom</div>313 <div class="meta">314 <span class="chip">315 <svg class="icon small" viewBox="0 0 24 24">316 <circle cx="12" cy="13" r="7" fill="none" stroke="#d0d0d0" stroke-width="2"/>317 <path d="M12 10v4l3 2" stroke="#d0d0d0" stroke-width="2" fill="none" stroke-linecap="round"/>318 </svg>319 02:00 PM320 </span>321 <span class="chip">322 <svg class="icon small" viewBox="0 0 24 24">323 <path d="M6 18l-2-2m0 0l5-5 4 4 7-7" stroke="#d0d0d0" stroke-width="2" fill="none"/>324 <path d="M21 7a9 9 0 10-3.2 6.9" stroke="#d0d0d0" stroke-width="2" fill="none"/>325 </svg>326 S327 </span>328 <span class="chip">329 <svg class="icon small" viewBox="0 0 24 24">330 <rect x="3" y="5" width="18" height="16" rx="2" fill="none" stroke="#d0d0d0" stroke-width="2"/>331 <path d="M3 9h18" stroke="#d0d0d0" stroke-width="2"/>332 </svg>333 Sun, Oct 01, 2023334 </span>335 </div>336 <svg class="chev icon small" viewBox="0 0 24 24">337 <path d="M6 9l6 6 6-6" stroke="#d0d0d0" stroke-width="2" fill="none" stroke-linecap="round"/>338 </svg>339 </div>340 341 <div class="card">342 <div class="card-title">Call Janet</div>343 <div class="meta">344 <span class="chip">345 <svg class="icon small" viewBox="0 0 24 24">346 <circle cx="12" cy="13" r="7" fill="none" stroke="#d0d0d0" stroke-width="2"/>347 <path d="M12 10v4l3 2" stroke="#d0d0d0" stroke-width="2" fill="none" stroke-linecap="round"/>348 </svg>349 03:30 PM350 </span>351 <span class="chip">352 <svg class="icon small" viewBox="0 0 24 24">353 <path d="M6 18l-2-2m0 0l5-5 4 4 7-7" stroke="#d0d0d0" stroke-width="2" fill="none"/>354 <path d="M21 7a9 9 0 10-3.2 6.9" stroke="#d0d0d0" stroke-width="2" fill="none"/>355 </svg>356 S357 </span>358 <span class="chip">359 <svg class="icon small" viewBox="0 0 24 24">360 <rect x="3" y="5" width="18" height="16" rx="2" fill="none" stroke="#d0d0d0" stroke-width="2"/>361 <path d="M3 9h18" stroke="#d0d0d0" stroke-width="2"/>362 </svg>363 Sun, Oct 01, 2023364 </span>365 </div>366 <svg class="chev icon small" viewBox="0 0 24 24">367 <path d="M6 9l6 6 6-6" stroke="#d0d0d0" stroke-width="2" fill="none" stroke-linecap="round"/>368 </svg>369 </div>370 371 <!-- Upcoming -->372 <div class="section-header section-green">Upcoming</div>373 374 <div class="card">375 <div class="card-title">Dance performance</div>376 <div class="meta">377 <span class="chip">378 <svg class="icon small" viewBox="0 0 24 24">379 <circle cx="12" cy="13" r="7" fill="none" stroke="#d0d0d0" stroke-width="2"/>380 <path d="M12 10v4l3 2" stroke="#d0d0d0" stroke-width="2" fill="none" stroke-linecap="round"/>381 </svg>382 01:30 PM383 </span>384 <span class="chip">385 <svg class="icon small" viewBox="0 0 24 24">386 <path d="M6 18l-2-2m0 0l5-5 4 4 7-7" stroke="#d0d0d0" stroke-width="2" fill="none"/>387 <path d="M21 7a9 9 0 10-3.2 6.9" stroke="#d0d0d0" stroke-width="2" fill="none"/>388 </svg>389 Once390 </span>391 <span class="chip">392 <svg class="icon small" viewBox="0 0 24 24">393 <rect x="3" y="5" width="18" height="16" rx="2" fill="none" stroke="#d0d0d0" stroke-width="2"/>394 <path d="M3 9h18" stroke="#d0d0d0" stroke-width="2"/>395 </svg>396 Sat, Oct 07, 2023397 </span>398 </div>399 <svg class="chev icon small" viewBox="0 0 24 24">400 <path d="M6 9l6 6 6-6" stroke="#d0d0d0" stroke-width="2" fill="none" stroke-linecap="round"/>401 </svg>402 </div>403 404 <div class="card">405 <div class="card-title">Renew Peloton and Soul cycle membership</div>406 <div class="meta">407 <span class="chip">408 <svg class="icon small" viewBox="0 0 24 24">409 <circle cx="12" cy="13" r="7" fill="none" stroke="#d0d0d0" stroke-width="2"/>410 <path d="M12 10v4l3 2" stroke="#d0d0d0" stroke-width="2" fill="none" stroke-linecap="round"/>411 </svg>412 05:00 PM413 </span>414 <span class="chip">415 <svg class="icon small" viewBox="0 0 24 24">416 <path d="M12 4a8 8 0 100 16 8 8 0 000-16zm0 0v6l4 2" stroke="#d0d0d0" stroke-width="2" fill="none" stroke-linecap="round"/>417 </svg>418 2 months419 </span>420 <span class="chip">421 <svg class="icon small" viewBox="0 0 24 24">422 <rect x="3" y="5" width="18" height="16" rx="2" fill="none" stroke="#d0d0d0" stroke-width="2"/>423 <path d="M3 9h18" stroke="#d0d0d0" stroke-width="2"/>424 </svg>425 Thu, Nov 16, 2023426 </span>427 </div>428 <svg class="chev icon small" viewBox="0 0 24 24">429 <path d="M6 9l6 6 6-6" stroke="#d0d0d0" stroke-width="2" fill="none" stroke-linecap="round"/>430 </svg>431 </div>432 433 <div class="card">434 <div class="card-title">Christmas Dinner with family</div>435 <div class="meta">436 <span class="chip">437 <svg class="icon small" viewBox="0 0 24 24">438 <circle cx="12" cy="13" r="7" fill="none" stroke="#d0d0d0" stroke-width="2"/>439 <path d="M12 10v4l3 2" stroke="#d0d0d0" stroke-width="2" fill="none" stroke-linecap="round"/>440 </svg>441 10:30 PM442 </span>443 <span class="chip">444 <svg class="icon small" viewBox="0 0 24 24">445 <path d="M6 18l-2-2m0 0l5-5 4 4 7-7" stroke="#d0d0d0" stroke-width="2" fill="none"/>446 <path d="M21 7a9 9 0 10-3.2 6.9" stroke="#d0d0d0" stroke-width="2" fill="none"/>447 </svg>448 Once449 </span>450 <span class="chip">451 <svg class="icon small" viewBox="0 0 24 24">452 <rect x="3" y="5" width="18" height="16" rx="2" fill="none" stroke="#d0d0d0" stroke-width="2"/>453 <path d="M3 9h18" stroke="#d0d0d0" stroke-width="2"/>454 </svg>455 Mon, Dec 25, 2023456 </span>457 </div>458 <svg class="chev icon small" viewBox="0 0 24 24">459 <path d="M6 9l6 6 6-6" stroke="#d0d0d0" stroke-width="2" fill="none" stroke-linecap="round"/>460 </svg>461 </div>462 </div>463 464 <!-- Floating action button -->465 <div class="fab">466 <svg viewBox="0 0 24 24" class="icon">467 <circle cx="12" cy="13" r="7" fill="none" stroke="#fff" stroke-width="2"/>468 <path d="M12 10v6M9 13h6" stroke="#fff" stroke-width="2" stroke-linecap="round"/>469 <path d="M5 5l3 2M19 5l-3 2" stroke="#fff" stroke-width="2" stroke-linecap="round"/>470 </svg>471 </div>472 473 <!-- Ad banner -->474 <div class="ad-banner">475 <div class="ad-img">[IMG: Omio ad Illustration]</div>476 <div class="ad-details">477 <div class="ad-title">Omio</div>478 <div class="ad-sub">4.6 ★ FREE</div>479 </div>480 <div class="ad-open">Open</div>481 </div>482 483 <!-- Home indicator -->484 <div class="home-indicator"></div>485</div>486</body>487</html>