GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Tasks UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #3f4042;13 font-family: Arial, Helvetica, sans-serif;14 color: #fff;15 }16 .statusbar {17 height: 80px;18 background: linear-gradient(#2a89ea, #2a89ea);19 display: flex;20 align-items: center;21 padding: 0 30px;22 font-size: 34px;23 color: #fff;24 }25 .statusbar .right {26 margin-left: auto;27 display: flex;28 gap: 22px;29 align-items: center;30 }31 .appbar {32 height: 140px;33 background: linear-gradient(#1e88e5, #2196f3);34 display: flex;35 align-items: center;36 padding: 0 30px;37 }38 .appbar .title {39 font-size: 56px;40 font-weight: 600;41 margin-left: 24px;42 }43 .appbar .actions {44 margin-left: auto;45 display: flex;46 gap: 40px;47 align-items: center;48 }49 50 .section-header {51 height: 90px;52 display: flex;53 align-items: center;54 padding: 0 30px;55 font-size: 42px;56 font-weight: 600;57 color: #fff;58 }59 .sec-yellow { background: #f5a623; }60 .sec-blue { background: #2a89ea; }61 .sec-green { background: #8bc34a; }62 63 .list {64 background: #3f4042;65 }66 67 .task {68 position: relative;69 padding: 28px 30px 26px 30px;70 border-bottom: 1px solid #595a5c;71 background: #444547;72 }73 .task .task-title {74 font-size: 48px;75 font-weight: 600;76 margin-bottom: 18px;77 color: #fff;78 }79 .meta-row {80 display: flex;81 gap: 28px;82 align-items: center;83 color: #c9c9c9;84 font-size: 30px;85 margin-bottom: 12px;86 }87 .meta {88 display: inline-flex;89 align-items: center;90 gap: 10px;91 }92 .meta svg { width: 34px; height: 34px; fill: none; stroke: #bdbdbd; stroke-width: 3; }93 .calendar-row {94 display: flex; align-items: center; gap: 12px;95 color: #c9c9c9; font-size: 30px;96 }97 .desc {98 color: #d3d3d3;99 font-size: 32px;100 margin-top: 12px;101 }102 .chevron {103 position: absolute;104 right: 26px; top: 42px;105 }106 .chevron svg { width: 44px; height: 44px; stroke: #bdbdbd; stroke-width: 6; fill: none; }107 108 .actionbar {109 height: 110px;110 background: #2a89ea;111 display: flex;112 align-items: center;113 justify-content: space-around;114 font-size: 36px;115 font-weight: 600;116 color: #fff;117 }118 119 .fab {120 position: absolute;121 right: 40px;122 bottom: 420px;123 width: 140px; height: 140px;124 background: radial-gradient(circle at 30% 30%, #4fc3f7, #1e88e5);125 border-radius: 50%;126 box-shadow: 0 10px 24px rgba(0,0,0,0.35);127 display: flex; align-items: center; justify-content: center;128 border: 4px solid rgba(255,255,255,0.15);129 }130 .fab svg { width: 70px; height: 70px; fill: none; stroke: #fff; stroke-width: 6; }131 132 .ad-banner {133 position: absolute;134 left: 0; bottom: 220px;135 width: 1080px; height: 160px;136 background: #ffffff;137 color: #333;138 display: flex; align-items: center;139 padding: 0 18px;140 box-shadow: 0 -6px 12px rgba(0,0,0,0.25);141 }142 .ad-banner .image {143 width: 340px; height: 124px;144 background: #E0E0E0;145 border: 1px solid #BDBDBD;146 display: flex; justify-content: center; align-items: center;147 color: #757575; font-size: 28px;148 }149 .ad-info {150 margin-left: 24px;151 display: flex; flex-direction: column;152 gap: 8px;153 }154 .ad-title { font-size: 38px; font-weight: 700; color: #111; }155 .ad-meta { font-size: 28px; color: #666; }156 .ad-action {157 margin-left: auto;158 margin-right: 16px;159 }160 .ad-button {161 background: #1faa00;162 color: #fff; border: none; border-radius: 40px;163 padding: 18px 38px; font-size: 34px; font-weight: 700;164 }165 166 /* Simple icon helpers */167 .icon { width: 56px; height: 56px; }168 .icon svg { width: 56px; height: 56px; stroke: #fff; stroke-width: 5; fill: none; }169 170</style>171</head>172<body>173<div id="render-target">174 175 <!-- Status bar -->176 <div class="statusbar">177 7:05178 <div class="right">179 <svg viewBox="0 0 24 24" width="26" height="26"><circle cx="12" cy="12" r="8" fill="white"/></svg>180 <svg viewBox="0 0 24 24" width="26" height="26"><circle cx="12" cy="12" r="8" fill="white"/></svg>181 <svg viewBox="0 0 24 24" width="26" height="26"><circle cx="12" cy="12" r="8" fill="white"/></svg>182 <svg viewBox="0 0 24 24" width="26" height="26"><circle cx="12" cy="12" r="8" fill="white"/></svg>183 <span style="font-weight:700;">•</span>184 <svg viewBox="0 0 24 24" width="30" height="30"><path d="M5 16h14l-2-8H7z"/></svg>185 <svg viewBox="0 0 24 24" width="30" height="30"><rect x="7" y="4" width="10" height="16" rx="2" fill="white"/></svg>186 </div>187 </div>188 189 <!-- App bar -->190 <div class="appbar">191 <div class="icon">192 <!-- Hamburger -->193 <svg viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18" stroke="#fff"/></svg>194 </div>195 <div class="title">Tasks</div>196 <div class="actions">197 <!-- alarm+ -->198 <svg viewBox="0 0 24 24" class="icon">199 <circle cx="12" cy="13" r="7" />200 <path d="M12 9v8M8 13h8" />201 <path d="M5 5l3 2M19 5l-3 2" />202 </svg>203 <!-- check circle -->204 <svg viewBox="0 0 24 24" class="icon">205 <circle cx="12" cy="12" r="9" />206 <path d="M7 12l3 3 7-7" />207 </svg>208 <!-- search -->209 <svg viewBox="0 0 24 24" class="icon">210 <circle cx="10.5" cy="10.5" r="6.5" />211 <path d="M16 16l5 5" />212 </svg>213 </div>214 </div>215 216 <!-- Sections & list -->217 <div class="section-header sec-yellow">Tomorrow</div>218 219 <div class="list">220 <!-- Task 1 -->221 <div class="task">222 <div class="task-title">Catch Subway</div>223 <div class="meta-row">224 <div class="meta">225 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="M12 7v5l4 2"/></svg>226 <span>08:00 AM</span>227 </div>228 <div class="meta">229 <svg viewBox="0 0 24 24"><path d="M6 8l-2 2 6 6 2-2M14 6l4 4-6 6-4-4"/></svg>230 <span>1 day</span>231 </div>232 </div>233 <div class="calendar-row">234 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M7 3v4M17 3v4M3 10h18"/></svg>235 <span>Thu, Sep 28, 2023</span>236 </div>237 <div class="chevron">238 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>239 </div>240 </div>241 242 <!-- Task 2 -->243 <div class="task">244 <div class="task-title">Yoga classes</div>245 <div class="meta-row">246 <div class="meta">247 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="M12 7v5l4 2"/></svg>248 <span>11:00 AM</span>249 </div>250 <div class="meta">251 <svg viewBox="0 0 24 24"><path d="M6 8l-2 2 6 6 2-2M14 6l4 4-6 6-4-4"/></svg>252 <span>1 day</span>253 </div>254 </div>255 <div class="calendar-row">256 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M7 3v4M17 3v4M3 10h18"/></svg>257 <span>Thu, Sep 28, 2023</span>258 </div>259 <div class="chevron">260 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>261 </div>262 </div>263 264 <!-- Task 3 -->265 <div class="task">266 <div class="task-title">Renew Peloton and Soul cycle membership</div>267 <div class="meta-row">268 <div class="meta">269 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="M12 7v5l4 2"/></svg>270 <span>05:00 PM</span>271 </div>272 <div class="meta">273 <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>274 <span>Once</span>275 </div>276 </div>277 <div class="calendar-row">278 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M7 3v4M17 3v4M3 10h18"/></svg>279 <span>Thu, Sep 28, 2023</span>280 </div>281 <div class="desc">Renew the cycling membership</div>282 <div class="chevron">283 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>284 </div>285 </div>286 </div>287 288 <!-- Action bar -->289 <div class="actionbar">290 <div>Complete</div>291 <div>Edit</div>292 <div>Share</div>293 <div>Delete</div>294 </div>295 296 <!-- Next section -->297 <div class="section-header sec-blue">Next 7 days</div>298 299 <div class="list">300 <!-- Task 4 -->301 <div class="task">302 <div class="task-title">Call Mom</div>303 <div class="meta-row">304 <div class="meta">305 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="M12 7v5l4 2"/></svg>306 <span>02:00 PM</span>307 </div>308 <div class="meta">309 <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5v14"/></svg>310 <span>S</span>311 </div>312 </div>313 <div class="calendar-row">314 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M7 3v4M17 3v4M3 10h18"/></svg>315 <span>Sun, Oct 01, 2023</span>316 </div>317 <div class="chevron">318 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>319 </div>320 </div>321 322 <!-- Task 5 -->323 <div class="task">324 <div class="task-title">Call Janet</div>325 <div class="meta-row">326 <div class="meta">327 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="M12 7v5l4 2"/></svg>328 <span>03:30 PM</span>329 </div>330 <div class="meta">331 <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5v14"/></svg>332 <span>S</span>333 </div>334 </div>335 <div class="calendar-row">336 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M7 3v4M17 3v4M3 10h18"/></svg>337 <span>Sun, Oct 01, 2023</span>338 </div>339 <div class="chevron">340 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>341 </div>342 </div>343 </div>344 345 <!-- Upcoming -->346 <div class="section-header sec-green">Upcoming</div>347 348 <div class="list">349 <!-- Task 6 -->350 <div class="task" style="padding-bottom: 40px;">351 <div class="task-title">Dance performance</div>352 <div class="meta-row">353 <div class="meta">354 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="M12 7v5l4 2"/></svg>355 <span>03:00 PM</span>356 </div>357 <div class="meta">358 <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>359 <span>Once</span>360 </div>361 </div>362 <div class="calendar-row">363 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M7 3v4M17 3v4M3 10h18"/></svg>364 <span>Sat, Oct 07, 2023</span>365 </div>366 </div>367 </div>368 369 <!-- Floating Action Button -->370 <div class="fab">371 <svg viewBox="0 0 24 24">372 <circle cx="12" cy="12" r="8"/>373 <path d="M12 8v8M8 12h8"/>374 </svg>375 </div>376 377 <!-- Ad Banner -->378 <div class="ad-banner">379 <div class="image">[IMG: Ad Banner]</div>380 <div class="ad-info">381 <div class="ad-title">Omio</div>382 <div class="ad-meta">4.6 ★ FREE</div>383 </div>384 <div class="ad-action">385 <button class="ad-button">Open</button>386 </div>387 </div>388 389</div>390</body>391</html>