GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Task List UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #F7FAFC;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 120px;22 padding: 0 32px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #2E2E2E;27 font-weight: 600;28 font-size: 36px;29 }30 .status-left {31 display: flex;32 align-items: center;33 gap: 18px;34 }35 .status-icons {36 display: flex;37 align-items: center;38 gap: 18px;39 color: #6D6D6D;40 font-size: 28px;41 }42 .dot { width: 10px; height: 10px; background: #6D6D6D; border-radius: 50%; display: inline-block; }43 44 /* Top actions (overflow menu) */45 .top-actions {46 position: absolute;47 top: 128px;48 right: 24px;49 display: flex;50 align-items: center;51 gap: 16px;52 }53 .kebab {54 width: 54px; height: 54px; border-radius: 12px;55 display: flex; align-items: center; justify-content: center;56 color: #7A7A7A;57 }58 .kebab svg { width: 24px; height: 24px; }59 60 /* Chip row */61 .chip-row {62 position: absolute;63 top: 132px;64 left: 24px;65 right: 100px;66 display: flex;67 gap: 24px;68 }69 .chip {70 padding: 18px 28px;71 border-radius: 40px;72 font-size: 36px;73 color: #3A4760;74 background: #E6EFFC;75 }76 .chip.active {77 background: #6F9EF7;78 color: #FFFFFF;79 box-shadow: 0 6px 12px rgba(111,158,247,0.35);80 }81 82 /* Sections */83 .content {84 position: absolute;85 top: 270px;86 left: 24px;87 right: 24px;88 bottom: 240px;89 overflow-y: auto;90 padding-bottom: 80px;91 }92 .section {93 margin-top: 40px;94 }95 .section-title {96 display: flex;97 align-items: center;98 gap: 18px;99 font-weight: 700;100 font-size: 48px;101 color: #2E3A4A;102 padding: 8px 8px 20px 8px;103 }104 .section-title svg { width: 26px; height: 26px; fill: #8AA0B5; }105 106 /* Task card */107 .card {108 background: #FFFFFF;109 border-radius: 28px;110 box-shadow: 0 10px 22px rgba(0,0,0,0.06);111 padding: 30px 32px;112 margin-bottom: 26px;113 display: flex;114 align-items: center;115 position: relative;116 }117 .check {118 width: 64px;119 height: 64px;120 border: 4px solid #AEB7C4;121 border-radius: 50%;122 margin-right: 28px;123 }124 .task-text {125 font-size: 44px;126 color: #1F2A36;127 line-height: 1.2;128 }129 .task-sub {130 font-size: 32px;131 color: #9AA6B2;132 margin-top: 12px;133 }134 .task-date-red { color: #D34A4A; font-weight: 600; }135 .right-flag {136 position: absolute;137 right: 32px;138 top: 36px;139 width: 48px; height: 48px;140 display: flex; align-items: center; justify-content: center;141 }142 .right-flag svg { width: 36px; height: 36px; stroke: #AEB7C4; fill: none; stroke-width: 4; }143 144 .sub-line {145 display: flex; align-items: center; gap: 16px;146 }147 .sub-line svg { width: 34px; height: 34px; fill: #AEB7C4; }148 149 /* Bottom nav */150 .bottom-nav {151 position: absolute;152 left: 0;153 bottom: 0;154 width: 1080px;155 height: 210px;156 background: #FFFFFF;157 border-top: 1px solid #E6E8EE;158 display: flex;159 align-items: flex-start;160 justify-content: space-around;161 padding-top: 26px;162 }163 .nav-item {164 display: flex;165 flex-direction: column;166 align-items: center;167 color: #98A6B5;168 font-size: 34px;169 }170 .nav-item.active { color: #3E6EF2; font-weight: 700; }171 .nav-icon {172 width: 68px; height: 68px; border-radius: 16px;173 display: flex; align-items: center; justify-content: center;174 margin-bottom: 12px;175 }176 .nav-item.active .nav-icon { color: #3E6EF2; }177 .home-indicator {178 position: absolute;179 left: 50%;180 transform: translateX(-50%);181 bottom: 16px;182 width: 480px; height: 14px;183 background: #111111; border-radius: 8px;184 opacity: 0.75;185 }186 187 /* Floating action button */188 .fab {189 position: absolute;190 right: 46px;191 bottom: 260px;192 width: 190px; height: 190px;193 background: #6F9EF7;194 border-radius: 50%;195 box-shadow: 0 18px 30px rgba(111,158,247,0.45);196 display: flex; align-items: center; justify-content: center;197 }198 .fab svg { width: 84px; height: 84px; fill: #FFFFFF; }199 200 /* Small red dot near left in bottom bar */201 .red-dot {202 position: absolute;203 left: 88px;204 bottom: 222px;205 width: 20px; height: 20px; background: #FF6B6B; border-radius: 50%;206 }207</style>208</head>209<body>210<div id="render-target">211 212 <!-- Status Bar -->213 <div class="status-bar">214 <div class="status-left">215 <div>9:22</div>216 <div class="status-icons">217 <span>โ</span>218 <span>88ยฐ</span>219 <span>๐</span>220 <span>ฮ</span>221 <span class="dot"></span>222 </div>223 </div>224 <div class="status-icons">225 <span>๐ถ</span>226 <span>๐</span>227 </div>228 </div>229 230 <!-- Chips -->231 <div class="chip-row">232 <div class="chip active">All</div>233 <div class="chip">Work</div>234 <div class="chip">Personal</div>235 <div class="chip">Wishlist</div>236 </div>237 238 <!-- Top right kebab -->239 <div class="top-actions">240 <div class="kebab">241 <svg viewBox="0 0 24 24">242 <circle cx="12" cy="4" r="2"></circle>243 <circle cx="12" cy="12" r="2"></circle>244 <circle cx="12" cy="20" r="2"></circle>245 </svg>246 </div>247 </div>248 249 <!-- Content -->250 <div class="content">251 <!-- Previous -->252 <div class="section">253 <div class="section-title">254 <span>Previous</span>255 <svg viewBox="0 0 24 24"><path d="M6 14l6-6 6 6"></path></svg>256 </div>257 258 <div class="card">259 <div class="check"></div>260 <div>261 <div class="task-text">Buy groceries</div>262 <div class="task-sub task-date-red">12-21</div>263 </div>264 <div class="right-flag">265 <svg viewBox="0 0 24 24"><path d="M6 21V5h9l-2 3 2 3H6"></path></svg>266 </div>267 </div>268 </div>269 270 <!-- Today -->271 <div class="section">272 <div class="section-title">273 <span>Today</span>274 <svg viewBox="0 0 24 24"><path d="M6 14l6-6 6 6"></path></svg>275 </div>276 277 <div class="card">278 <div class="check"></div>279 <div>280 <div class="task-text">Buy Milk and Chicken</div>281 </div>282 <div class="right-flag">283 <svg viewBox="0 0 24 24"><path d="M6 21V5h9l-2 3 2 3H6"></path></svg>284 </div>285 </div>286 </div>287 288 <!-- Future -->289 <div class="section">290 <div class="section-title">291 <span>Future</span>292 <svg viewBox="0 0 24 24"><path d="M6 14l6-6 6 6"></path></svg>293 </div>294 295 <div class="card">296 <div class="check"></div>297 <div>298 <div class="task-text">Buy New Balance Hiking shoes</div>299 <div class="task-sub sub-line">300 <span>12-23 07:00 AM</span>301 <svg viewBox="0 0 24 24"><path d="M12 2a6 6 0 016 6v5l2 3H4l2-3V8a6 6 0 016-6zm0 20a3 3 0 003-3H9a3 3 0 003 3z"></path></svg>302 </div>303 </div>304 <div class="right-flag">305 <svg viewBox="0 0 24 24"><path d="M6 21V5h9l-2 3 2 3H6"></path></svg>306 </div>307 </div>308 </div>309 </div>310 311 <!-- Floating Action Button -->312 <div class="fab">313 <svg viewBox="0 0 24 24"><path d="M11 5h2v14h-2zM5 11h14v2H5z"></path></svg>314 </div>315 316 <!-- Bottom Navigation -->317 <div class="bottom-nav">318 <div class="nav-item">319 <div class="nav-icon">320 <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 6h14v2H3zm0 6h10v2H3z"></path></svg>321 </div>322 <div>Menu</div>323 </div>324 <div class="nav-item active">325 <div class="nav-icon">326 <svg viewBox="0 0 24 24"><path d="M6 4h12v4H6zm0 6h12v10H6z"></path></svg>327 </div>328 <div>Tasks</div>329 </div>330 <div class="nav-item">331 <div class="nav-icon">332 <svg viewBox="0 0 24 24"><path d="M7 2v3H4v4h16V5h-3V2h-2v3H9V2H7zm-3 9v9h16v-9H4z"></path></svg>333 </div>334 <div>Calendar</div>335 </div>336 <div class="nav-item">337 <div class="nav-icon">338 <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm-8 9c0-5 4-8 8-8s8 3 8 8H4z"></path></svg>339 </div>340 <div>Mine</div>341 </div>342 <div class="home-indicator"></div>343 </div>344 345 <div class="red-dot"></div>346</div>347</body>348</html>