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: #3b3b3b;14 font-family: Arial, Helvetica, sans-serif;15 color: #ffffff;16 }17 /* Top status bar */18 .statusbar {19 height: 110px;20 background: linear-gradient(#2ea2ff, #2386f2);21 display: flex;22 align-items: center;23 padding: 0 36px;24 box-sizing: border-box;25 font-weight: 600;26 letter-spacing: 0.5px;27 }28 .status-time { font-size: 40px; margin-right: 20px; }29 .status-icons { margin-left: auto; display: flex; align-items: center; gap: 24px; }30 .dot { width: 10px; height: 10px; background: #ffffff; border-radius: 50%; display: inline-block; }31 /* App bar */32 .appbar {33 height: 140px;34 background: #2196F3;35 display: flex;36 align-items: center;37 padding: 0 30px;38 box-sizing: border-box;39 box-shadow: 0 2px 0 rgba(255,255,255,0.08);40 }41 .app-title {42 font-size: 64px;43 font-weight: 700;44 margin-left: 24px;45 }46 .app-actions {47 margin-left: auto;48 display: flex;49 align-items: center;50 gap: 42px;51 }52 .icon {53 width: 64px;54 height: 64px;55 fill: none;56 stroke: #ffffff;57 stroke-width: 6;58 }59 .hamburger { width: 70px; height: 70px; }60 /* Section header bars */61 .section {62 font-size: 48px;63 font-weight: 700;64 padding: 22px 28px;65 box-sizing: border-box;66 }67 .sec-orange { background: #f4a622; }68 .sec-blue { background: #2fa1ff; }69 .sec-green { background: #99cc00; }70 /* Task items */71 .task {72 background: #424242;73 padding: 28px;74 box-sizing: border-box;75 border-bottom: 1px solid #5a5a5a;76 position: relative;77 }78 .task-title {79 font-size: 56px;80 font-weight: 700;81 margin-bottom: 20px;82 }83 .meta {84 display: flex;85 align-items: center;86 gap: 20px;87 color: #cfcfcf;88 font-size: 34px;89 margin: 10px 0;90 }91 .meta svg { stroke: #cfcfcf; }92 .right-chevron {93 position: absolute;94 right: 24px;95 top: 36px;96 width: 44px;97 height: 44px;98 }99 /* Floating Action Button */100 .fab {101 position: absolute;102 right: 50px;103 bottom: 380px;104 width: 150px;105 height: 150px;106 border-radius: 50%;107 background: #29b6f6;108 box-shadow: 0 10px 20px rgba(0,0,0,0.4);109 display: flex;110 align-items: center;111 justify-content: center;112 border: 6px solid rgba(255,255,255,0.15);113 }114 .fab svg { width: 84px; height: 84px; stroke: #ffffff; stroke-width: 6; fill: none; }115 /* Ad banner */116 .ad {117 position: absolute;118 left: 0;119 bottom: 170px;120 width: 1080px;121 height: 190px;122 background: #ffffff;123 color: #333;124 display: flex;125 align-items: center;126 padding: 20px 24px;127 box-sizing: border-box;128 gap: 24px;129 border-top: 1px solid #e0e0e0;130 }131 .ad-img {132 width: 240px;133 height: 150px;134 background: #E0E0E0;135 border: 1px solid #BDBDBD;136 display: flex;137 justify-content: center;138 align-items: center;139 color: #757575;140 font-size: 28px;141 }142 .ad-title { font-size: 44px; font-weight: 700; color: #111; }143 .ad-sub { font-size: 32px; color: #666; margin-top: 6px; }144 .ad-cta {145 margin-left: auto;146 background: #1db954;147 color: #fff;148 padding: 20px 50px;149 border-radius: 60px;150 font-size: 40px;151 font-weight: 700;152 }153 /* Gesture pill */154 .gesture {155 position: absolute;156 bottom: 70px;157 left: 50%;158 transform: translateX(-50%);159 width: 350px;160 height: 16px;161 background: #c8c8c8;162 border-radius: 12px;163 opacity: 0.7;164 }165</style>166</head>167<body>168<div id="render-target">169 <!-- Status bar -->170 <div class="statusbar">171 <div class="status-time">7:05</div>172 <div style="display:flex; gap:18px; margin-left: 12px;">173 <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>174 </div>175 <div class="status-icons">176 <!-- Wi-Fi -->177 <svg class="icon" viewBox="0 0 24 24">178 <path d="M2 8c5-4 15-4 20 0M5 12c4-3 10-3 14 0M9 16c2-2 4-2 6 0M12 19l.01 0"></path>179 </svg>180 <!-- Battery -->181 <svg class="icon" viewBox="0 0 24 24">182 <rect x="3" y="7" width="17" height="10" rx="2"></rect>183 <rect x="21" y="10" width="2" height="4"></rect>184 </svg>185 </div>186 </div>187 188 <!-- App bar -->189 <div class="appbar">190 <!-- Hamburger -->191 <svg class="hamburger" viewBox="0 0 24 24">192 <path d="M3 6h18M3 12h18M3 18h18" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>193 </svg>194 <div class="app-title">Tasks</div>195 <div class="app-actions">196 <!-- Add/alarm -->197 <svg class="icon" viewBox="0 0 24 24">198 <circle cx="12" cy="12" r="7"></circle>199 <path d="M12 9v6M9 12h6"></path>200 <path d="M5 5l2 2M19 5l-2 2" stroke-linecap="round"></path>201 </svg>202 <!-- Check circle -->203 <svg class="icon" viewBox="0 0 24 24">204 <circle cx="12" cy="12" r="9"></circle>205 <path d="M8 12l3 3 5-6" stroke-linecap="round"></path>206 </svg>207 <!-- Search -->208 <svg class="icon" viewBox="0 0 24 24">209 <circle cx="11" cy="11" r="7"></circle>210 <path d="M20 20l-4-4" stroke-linecap="round"></path>211 </svg>212 </div>213 </div>214 215 <!-- Content -->216 <div class="section sec-orange">Tomorrow</div>217 218 <div class="task">219 <div class="task-title">Catch Subway</div>220 <div class="meta">221 <svg class="icon" viewBox="0 0 24 24">222 <circle cx="12" cy="12" r="8"></circle>223 <path d="M12 7v6l4 2" stroke-linecap="round"></path>224 </svg>225 <span>08:00 AM</span>226 <svg class="icon" viewBox="0 0 24 24">227 <path d="M4 12a8 8 0 018-8M20 12a8 8 0 01-8 8" stroke-linecap="round"></path>228 <path d="M7 4v4H3" stroke-linecap="round"></path>229 <path d="M21 16h-4v4" stroke-linecap="round"></path>230 </svg>231 <span>1 day</span>232 </div>233 <div class="meta">234 <svg class="icon" viewBox="0 0 24 24">235 <rect x="3" y="5" width="18" height="14" rx="2"></rect>236 <path d="M7 3v4M17 3v4M3 9h18"></path>237 </svg>238 <span>Thu, Sep 28, 2023</span>239 </div>240 <svg class="right-chevron" viewBox="0 0 24 24">241 <path d="M8 10l4 4 4-4" stroke="#bdbdbd" stroke-width="2" fill="none" stroke-linecap="round"/>242 </svg>243 </div>244 245 <div class="task">246 <div class="task-title">Yoga classes</div>247 <div class="meta">248 <svg class="icon" viewBox="0 0 24 24">249 <circle cx="12" cy="12" r="8"></circle>250 <path d="M12 7v6l4 2" stroke-linecap="round"></path>251 </svg>252 <span>11:00 AM</span>253 <svg class="icon" viewBox="0 0 24 24">254 <path d="M4 12a8 8 0 018-8M20 12a8 8 0 01-8 8" stroke-linecap="round"></path>255 <path d="M7 4v4H3" stroke-linecap="round"></path>256 <path d="M21 16h-4v4" stroke-linecap="round"></path>257 </svg>258 <span>1 day</span>259 </div>260 <div class="meta">261 <svg class="icon" viewBox="0 0 24 24">262 <rect x="3" y="5" width="18" height="14" rx="2"></rect>263 <path d="M7 3v4M17 3v4M3 9h18"></path>264 </svg>265 <span>Thu, Sep 28, 2023</span>266 </div>267 <svg class="right-chevron" viewBox="0 0 24 24">268 <path d="M8 10l4 4 4-4" stroke="#bdbdbd" stroke-width="2" fill="none" stroke-linecap="round"/>269 </svg>270 </div>271 272 <div class="section sec-blue">Next 7 days</div>273 274 <div class="task">275 <div class="task-title">Call Mom</div>276 <div class="meta">277 <svg class="icon" viewBox="0 0 24 24">278 <circle cx="12" cy="12" r="8"></circle>279 <path d="M12 7v6l4 2" stroke-linecap="round"></path>280 </svg>281 <span>02:00 PM</span>282 <svg class="icon" viewBox="0 0 24 24">283 <path d="M4 12a8 8 0 018-8M20 12a8 8 0 01-8 8" stroke-linecap="round"></path>284 </svg>285 <span>S</span>286 </div>287 <div class="meta">288 <svg class="icon" viewBox="0 0 24 24">289 <rect x="3" y="5" width="18" height="14" rx="2"></rect>290 <path d="M7 3v4M17 3v4M3 9h18"></path>291 </svg>292 <span>Sun, Oct 01, 2023</span>293 </div>294 <svg class="right-chevron" viewBox="0 0 24 24">295 <path d="M8 10l4 4 4-4" stroke="#bdbdbd" stroke-width="2" fill="none" stroke-linecap="round"/>296 </svg>297 </div>298 299 <div class="task">300 <div class="task-title">Call Janet</div>301 <div class="meta">302 <svg class="icon" viewBox="0 0 24 24">303 <circle cx="12" cy="12" r="8"></circle>304 <path d="M12 7v6l4 2" stroke-linecap="round"></path>305 </svg>306 <span>03:30 PM</span>307 <svg class="icon" viewBox="0 0 24 24">308 <path d="M4 12a8 8 0 018-8M20 12a8 8 0 01-8 8" stroke-linecap="round"></path>309 </svg>310 <span>S</span>311 </div>312 <div class="meta">313 <svg class="icon" viewBox="0 0 24 24">314 <rect x="3" y="5" width="18" height="14" rx="2"></rect>315 <path d="M7 3v4M17 3v4M3 9h18"></path>316 </svg>317 <span>Sun, Oct 01, 2023</span>318 </div>319 <svg class="right-chevron" viewBox="0 0 24 24">320 <path d="M8 10l4 4 4-4" stroke="#bdbdbd" stroke-width="2" fill="none" stroke-linecap="round"/>321 </svg>322 </div>323 324 <div class="section sec-green">Upcoming</div>325 326 <div class="task">327 <div class="task-title">Dance performance</div>328 <div class="meta">329 <svg class="icon" viewBox="0 0 24 24">330 <circle cx="12" cy="12" r="8"></circle>331 <path d="M12 7v6l4 2" stroke-linecap="round"></path>332 </svg>333 <span>03:00 PM</span>334 <svg class="icon" viewBox="0 0 24 24">335 <path d="M4 12a8 8 0 018-8M20 12a8 8 0 01-8 8" stroke-linecap="round"></path>336 </svg>337 <span>Once</span>338 </div>339 <div class="meta">340 <svg class="icon" viewBox="0 0 24 24">341 <rect x="3" y="5" width="18" height="14" rx="2"></rect>342 <path d="M7 3v4M17 3v4M3 9h18"></path>343 </svg>344 <span>Sat, Oct 07, 2023</span>345 </div>346 <svg class="right-chevron" viewBox="0 0 24 24">347 <path d="M8 10l4 4 4-4" stroke="#bdbdbd" stroke-width="2" fill="none" stroke-linecap="round"/>348 </svg>349 </div>350 351 <div class="task">352 <div class="task-title">Christmas Dinner with family</div>353 <div class="meta">354 <svg class="icon" viewBox="0 0 24 24">355 <circle cx="12" cy="12" r="8"></circle>356 <path d="M12 7v6l4 2" stroke-linecap="round"></path>357 </svg>358 <span>10:30 PM</span>359 <svg class="icon" viewBox="0 0 24 24">360 <path d="M4 12a8 8 0 018-8M20 12a8 8 0 01-8 8" stroke-linecap="round"></path>361 </svg>362 <span>Once</span>363 </div>364 <div class="meta">365 <svg class="icon" viewBox="0 0 24 24">366 <rect x="3" y="5" width="18" height="14" rx="2"></rect>367 <path d="M7 3v4M17 3v4M3 9h18"></path>368 </svg>369 <span>Mon, Dec 25, 2023</span>370 </div>371 <svg class="right-chevron" viewBox="0 0 24 24">372 <path d="M8 10l4 4 4-4" stroke="#bdbdbd" stroke-width="2" fill="none" stroke-linecap="round"/>373 </svg>374 </div>375 376 <div class="task">377 <div class="task-title">Cooking Lunch</div>378 <div class="meta">379 <svg class="icon" viewBox="0 0 24 24">380 <circle cx="12" cy="12" r="8"></circle>381 <path d="M12 7v6l4 2" stroke-linecap="round"></path>382 </svg>383 <span>02:00 PM</span>384 <svg class="icon" viewBox="0 0 24 24">385 <path d="M4 12a8 8 0 018-8M20 12a8 8 0 01-8 8" stroke-linecap="round"></path>386 </svg>387 <span>Once</span>388 </div>389 <div class="meta">390 <svg class="icon" viewBox="0 0 24 24">391 <rect x="3" y="5" width="18" height="14" rx="2"></rect>392 <path d="M7 3v4M17 3v4M3 9h18"></path>393 </svg>394 <span>Mon, Oct 09, 2023</span>395 </div>396 <svg class="right-chevron" viewBox="0 0 24 24">397 <path d="M8 10l4 4 4-4" stroke="#bdbdbd" stroke-width="2" fill="none" stroke-linecap="round"/>398 </svg>399 </div>400 401 <!-- Floating button -->402 <div class="fab">403 <svg viewBox="0 0 24 24">404 <circle cx="12" cy="12" r="8"></circle>405 <path d="M12 9v6M9 12h6" stroke-linecap="round"></path>406 <path d="M5 5l2 2M19 5l-2 2" stroke-linecap="round"></path>407 </svg>408 </div>409 410 <!-- Ad banner -->411 <div class="ad">412 <div class="ad-img">[IMG: Ad Graphic]</div>413 <div>414 <div class="ad-title">Omio</div>415 <div class="ad-sub">4.6 ★ FREE</div>416 </div>417 <div class="ad-cta">Open</div>418 </div>419 420 <!-- Gesture pill -->421 <div class="gesture"></div>422</div>423</body>424</html>