GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Tasks UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #2e2e2e;14 }15 16 /* Top bars */17 .statusbar {18 height: 110px;19 background: #4c86f3;20 color: #eaf1ff;21 display: flex;22 align-items: center;23 padding: 0 36px;24 font-size: 34px;25 letter-spacing: 0.2px;26 }27 .statusbar .left { display: flex; align-items: center; gap: 24px; }28 .statusbar .right { margin-left: auto; display: flex; align-items: center; gap: 28px; }29 30 .appbar {31 height: 150px;32 background: #5ea3f7;33 display: flex;34 align-items: center;35 padding: 0 34px;36 color: #fff;37 }38 .appbar .title {39 font-size: 64px;40 font-weight: 600;41 margin-left: 24px;42 }43 .appbar .actions {44 margin-left: auto;45 display: flex;46 align-items: center;47 gap: 48px;48 }49 .icon {50 width: 60px;51 height: 60px;52 }53 .icon.small { width: 42px; height: 42px; }54 55 /* Sections */56 .section-header {57 height: 88px;58 display: flex;59 align-items: center;60 padding: 0 32px;61 color: #fff;62 font-size: 54px;63 font-weight: 600;64 }65 .sec-overdue { background: #e74c3c; }66 .sec-today { background: #e74c3c; }67 .sec-tomorrow { background: #f4c242; color: #263238; }68 .sec-next { background: #5ea3f7; }69 .sec-upcoming { background: #a7d348; color: #263238; }70 71 /* Cards */72 .card {73 background: #3b3b3b;74 color: #f4f4f4;75 padding: 36px 32px;76 border-top: 1px solid #4a4a4a;77 border-bottom: 1px solid #2a2a2a;78 position: relative;79 }80 .card-title {81 font-size: 58px;82 font-weight: 600;83 margin-bottom: 22px;84 }85 .meta-row {86 display: flex;87 align-items: center;88 gap: 22px;89 color: #c8c8c8;90 font-size: 36px;91 margin-bottom: 14px;92 }93 .meta-row .sep { margin: 0 8px; opacity: 0.8; }94 .missed {95 position: absolute;96 right: 28px;97 top: 46px;98 color: #ff8a80;99 font-size: 34px;100 }101 .chevron {102 position: absolute;103 right: 28px;104 top: 50%;105 transform: translateY(-50%);106 opacity: 0.6;107 }108 109 /* Floating action button */110 .fab {111 position: absolute;112 right: 44px;113 bottom: 420px;114 width: 140px;115 height: 140px;116 border-radius: 70px;117 background: #5ea3f7;118 box-shadow: 0 8px 18px rgba(0,0,0,0.35);119 display: flex;120 align-items: center;121 justify-content: center;122 }123 .fab .ring {124 position: absolute;125 inset: 10px;126 border-radius: 60px;127 border: 10px solid rgba(255,255,255,0.35);128 }129 130 /* Bottom ad placeholder */131 .ad-banner {132 position: absolute;133 left: 0; right: 0;134 bottom: 180px;135 height: 220px;136 background: #E0E0E0;137 border-top: 1px solid #BDBDBD;138 border-bottom: 1px solid #BDBDBD;139 display: flex;140 justify-content: center;141 align-items: center;142 color: #757575;143 font-size: 40px;144 letter-spacing: 0.5px;145 }146 147 /* Gesture bar */148 .gesture {149 position: absolute;150 bottom: 96px;151 left: 50%;152 transform: translateX(-50%);153 width: 320px;154 height: 16px;155 background: #e9e9e9;156 border-radius: 10px;157 opacity: 0.85;158 }159</style>160</head>161<body>162<div id="render-target">163 164 <!-- Status bar -->165 <div class="statusbar">166 <div class="left">167 <span>9:10</span>168 <!-- simple status glyphs -->169 <svg class="icon small" viewBox="0 0 24 24">170 <circle cx="12" cy="12" r="10" fill="none" stroke="#eaf1ff" stroke-width="2"></circle>171 </svg>172 <svg class="icon small" viewBox="0 0 24 24">173 <path d="M12 3v18M3 12h18" stroke="#eaf1ff" stroke-width="2"></path>174 </svg>175 <svg class="icon small" viewBox="0 0 24 24">176 <path d="M12 2l5 5-5 5-5-5 5-5z" fill="#eaf1ff"></path>177 </svg>178 <span>•</span>179 </div>180 <div class="right">181 <svg class="icon small" viewBox="0 0 24 24">182 <path d="M2 16c3-4 7-6 10-6s7 2 10 6" stroke="#eaf1ff" stroke-width="2" fill="none"></path>183 <circle cx="20" cy="16" r="2" fill="#eaf1ff"></circle>184 </svg>185 <svg class="icon small" viewBox="0 0 24 24">186 <rect x="3" y="7" width="16" height="10" stroke="#eaf1ff" stroke-width="2" fill="none"></rect>187 <rect x="20" y="9" width="2" height="6" fill="#eaf1ff"></rect>188 </svg>189 </div>190 </div>191 192 <!-- App bar -->193 <div class="appbar">194 <!-- Hamburger -->195 <svg class="icon" viewBox="0 0 24 24">196 <path d="M3 5h18M3 12h18M3 19h18" stroke="#ffffff" stroke-width="2" stroke-linecap="round"></path>197 </svg>198 <div class="title">Tasks</div>199 <div class="actions">200 <!-- Alarm + -->201 <svg class="icon" viewBox="0 0 24 24">202 <circle cx="12" cy="13" r="6.5" stroke="#ffffff" stroke-width="2" fill="none"></circle>203 <path d="M12 10v6M9 13h6" stroke="#ffffff" stroke-width="2" stroke-linecap="round"></path>204 <path d="M5 6l3-3M19 6l-3-3" stroke="#ffffff" stroke-width="2" stroke-linecap="round"></path>205 </svg>206 <!-- Check -->207 <svg class="icon" viewBox="0 0 24 24">208 <path d="M4 13l5 5 11-11" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"></path>209 </svg>210 <!-- Search -->211 <svg class="icon" viewBox="0 0 24 24">212 <circle cx="10" cy="10" r="6" stroke="#ffffff" stroke-width="2" fill="none"></circle>213 <path d="M15 15l6 6" stroke="#ffffff" stroke-width="2" stroke-linecap="round"></path>214 </svg>215 </div>216 </div>217 218 <!-- Content -->219 <div class="section-header sec-overdue">Overdue</div>220 <div class="card">221 <div class="card-title">Call Janet</div>222 <div class="missed">(Missed)</div>223 <div class="meta-row">224 <!-- clock -->225 <svg class="icon small" viewBox="0 0 24 24">226 <circle cx="12" cy="12" r="9" stroke="#cfcfcf" stroke-width="2" fill="none"></circle>227 <path d="M12 7v6l4 2" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"></path>228 </svg>229 <span>03:30 PM</span>230 <span class="sep">•</span>231 <!-- refresh -->232 <svg class="icon small" viewBox="0 0 24 24">233 <path d="M4 12a8 8 0 0 1 14-4l2-2v6h-6l2-2A6 6 0 1 0 6 16" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round"></path>234 </svg>235 <span>S</span>236 </div>237 <div class="meta-row">238 <!-- calendar -->239 <svg class="icon small" viewBox="0 0 24 24">240 <rect x="3" y="5" width="18" height="16" rx="2" stroke="#cfcfcf" stroke-width="2" fill="none"></rect>241 <path d="M3 9h18" stroke="#cfcfcf" stroke-width="2"></path>242 </svg>243 <span>Sun, Sep 03, 2023</span>244 </div>245 <svg class="icon chevron" viewBox="0 0 24 24">246 <path d="M6 9l6 6 6-6" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round"></path>247 </svg>248 </div>249 250 <div class="section-header sec-today">Today</div>251 <div class="card">252 <div class="card-title">Yoga classes</div>253 <div class="meta-row">254 <svg class="icon small" viewBox="0 0 24 24">255 <circle cx="12" cy="12" r="9" stroke="#cfcfcf" stroke-width="2" fill="none"></circle>256 <path d="M12 7v6l4 2" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"></path>257 </svg>258 <span>11:00 AM</span>259 <span class="sep">•</span>260 <span>1 day</span>261 </div>262 <div class="meta-row">263 <svg class="icon small" viewBox="0 0 24 24">264 <rect x="3" y="5" width="18" height="16" rx="2" stroke="#cfcfcf" stroke-width="2" fill="none"></rect>265 <path d="M3 9h18" stroke="#cfcfcf" stroke-width="2"></path>266 </svg>267 <span>Thu, Aug 31, 2023</span>268 </div>269 <svg class="icon chevron" viewBox="0 0 24 24">270 <path d="M6 9l6 6 6-6" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round"></path>271 </svg>272 </div>273 274 <div class="section-header sec-tomorrow">Tomorrow</div>275 <div class="card">276 <div class="card-title">Catch Subway</div>277 <div class="meta-row">278 <svg class="icon small" viewBox="0 0 24 24">279 <circle cx="12" cy="12" r="9" stroke="#cfcfcf" stroke-width="2" fill="none"></circle>280 <path d="M12 7v6l4 2" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"></path>281 </svg>282 <span>08:00 AM</span>283 <span class="sep">•</span>284 <span>1 day</span>285 </div>286 <div class="meta-row">287 <svg class="icon small" viewBox="0 0 24 24">288 <rect x="3" y="5" width="18" height="16" rx="2" stroke="#cfcfcf" stroke-width="2" fill="none"></rect>289 <path d="M3 9h18" stroke="#cfcfcf" stroke-width="2"></path>290 </svg>291 <span>Fri, Sep 01, 2023</span>292 </div>293 <svg class="icon chevron" viewBox="0 0 24 24">294 <path d="M6 9l6 6 6-6" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round"></path>295 </svg>296 </div>297 298 <div class="section-header sec-next">Next 7 days</div>299 <div class="card">300 <div class="card-title">Visit Mom at Arizona</div>301 <div class="meta-row">302 <svg class="icon small" viewBox="0 0 24 24">303 <circle cx="12" cy="12" r="9" stroke="#cfcfcf" stroke-width="2" fill="none"></circle>304 <path d="M12 7v6l4 2" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"></path>305 </svg>306 <span>11:30 AM</span>307 <span class="sep">•</span>308 <span>Once</span>309 </div>310 <div class="meta-row">311 <svg class="icon small" viewBox="0 0 24 24">312 <rect x="3" y="5" width="18" height="16" rx="2" stroke="#cfcfcf" stroke-width="2" fill="none"></rect>313 <path d="M3 9h18" stroke="#cfcfcf" stroke-width="2"></path>314 </svg>315 <span>Sat, Sep 02, 2023</span>316 </div>317 <svg class="icon chevron" viewBox="0 0 24 24">318 <path d="M6 9l6 6 6-6" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round"></path>319 </svg>320 </div>321 322 <div class="card">323 <div class="card-title">Call Mom</div>324 <div class="meta-row">325 <svg class="icon small" viewBox="0 0 24 24">326 <circle cx="12" cy="12" r="9" stroke="#cfcfcf" stroke-width="2" fill="none"></circle>327 <path d="M12 7v6l4 2" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"></path>328 </svg>329 <span>02:00 PM</span>330 <span class="sep">•</span>331 <!-- refresh icon reused to imply schedule -->332 <svg class="icon small" viewBox="0 0 24 24">333 <path d="M4 12a8 8 0 0 1 14-4l2-2v6h-6l2-2A6 6 0 1 0 6 16" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round"></path>334 </svg>335 <span>S</span>336 </div>337 <div class="meta-row">338 <svg class="icon small" viewBox="0 0 24 24">339 <rect x="3" y="5" width="18" height="16" rx="2" stroke="#cfcfcf" stroke-width="2" fill="none"></rect>340 <path d="M3 9h18" stroke="#cfcfcf" stroke-width="2"></path>341 </svg>342 <span>Sun, Sep 03, 2023</span>343 </div>344 <svg class="icon chevron" viewBox="0 0 24 24">345 <path d="M6 9l6 6 6-6" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round"></path>346 </svg>347 </div>348 349 <div class="section-header sec-upcoming">Upcoming</div>350 <div class="card" style="margin-bottom: 24px;">351 <div class="card-title">Lunch with Janet</div>352 <div class="meta-row">353 <svg class="icon small" viewBox="0 0 24 24">354 <circle cx="12" cy="12" r="9" stroke="#cfcfcf" stroke-width="2" fill="none"></circle>355 <path d="M12 7v6l4 2" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"></path>356 </svg>357 <span>02:30 AM</span>358 <span class="sep">•</span>359 <span>Once</span>360 </div>361 <div class="meta-row">362 <svg class="icon small" viewBox="0 0 24 24">363 <rect x="3" y="5" width="18" height="16" rx="2" stroke="#cfcfcf" stroke-width="2" fill="none"></rect>364 <path d="M3 9h18" stroke="#cfcfcf" stroke-width="2"></path>365 </svg>366 <span>Sat, Sep 09, 2023</span>367 </div>368 <svg class="icon chevron" viewBox="0 0 24 24">369 <path d="M6 9l6 6 6-6" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round"></path>370 </svg>371 </div>372 373 <!-- Floating Action Button -->374 <div class="fab">375 <div class="ring"></div>376 <svg class="icon" viewBox="0 0 24 24">377 <circle cx="12" cy="13" r="6.5" stroke="#ffffff" stroke-width="2" fill="none"></circle>378 <path d="M12 10v6M9 13h6" stroke="#ffffff" stroke-width="2" stroke-linecap="round"></path>379 </svg>380 </div>381 382 <!-- Bottom ad placeholder -->383 <div class="ad-banner">[IMG: Ad Banner]</div>384 385 <!-- Gesture bar -->386 <div class="gesture"></div>387 388</div>389</body>390</html>