GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">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; font-family: Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #2F3136; /* app background */15 color: #FFFFFF;16 }17 18 /* Header */19 .app-header {20 position: relative;21 background: #4FA1F3;22 height: 240px;23 box-sizing: border-box;24 }25 .statusbar {26 height: 90px;27 display: flex;28 align-items: center;29 padding: 0 32px;30 color: #FFFFFF;31 font-size: 36px;32 opacity: 0.95;33 }34 .statusbar .right {35 margin-left: auto;36 display: flex;37 align-items: center;38 gap: 28px;39 }40 .toolbar {41 height: 150px;42 display: flex;43 align-items: center;44 padding: 0 32px;45 }46 .toolbar .title {47 font-size: 64px;48 font-weight: 600;49 margin-left: 28px;50 }51 .toolbar .actions {52 margin-left: auto;53 display: flex;54 gap: 52px;55 align-items: center;56 }57 .icon-btn svg { width: 70px; height: 70px; fill: none; stroke: #FFFFFF; stroke-width: 6; }58 59 /* Banner */60 .banner {61 background: #3E3E3E;62 height: 120px;63 display: flex;64 align-items: center;65 padding: 0 32px;66 box-sizing: border-box;67 border-bottom: 1px solid #2A2A2A;68 }69 .banner .alert-icon {70 width: 56px;71 height: 56px;72 border-radius: 50%;73 background: #FFFFFF;74 display: flex;75 justify-content: center;76 align-items: center;77 margin-right: 18px;78 }79 .banner .alert-icon svg { width: 36px; height: 36px; fill: #E53935; }80 .banner .text {81 color: #FF6D6D;82 font-size: 36px;83 letter-spacing: 0.2px;84 }85 .banner .cta {86 margin-left: auto;87 background: #4A4A4A;88 color: #BFD3FF;89 padding: 14px 26px;90 border-radius: 8px;91 border: 1px solid #5E5E5E;92 font-size: 34px;93 }94 95 /* Section label */96 .section-label {97 color: #7EC3FF;98 font-size: 44px;99 padding: 24px 32px 12px 32px;100 box-sizing: border-box;101 }102 103 /* Task card/list row */104 .task-row {105 padding: 0 32px;106 box-sizing: border-box;107 }108 .task-card {109 position: relative;110 background: transparent;111 border-bottom: 1px solid #434343;112 padding-bottom: 24px;113 }114 .task-title {115 font-size: 60px;116 font-weight: 600;117 color: #FFFFFF;118 margin-top: 8px;119 margin-bottom: 24px;120 line-height: 1.2;121 }122 .chevron {123 position: absolute;124 right: 32px;125 top: 8px;126 width: 60px;127 height: 60px;128 display: flex; align-items: center; justify-content: center;129 opacity: 0.9;130 }131 .meta {132 display: flex;133 align-items: center;134 gap: 18px;135 color: #CFCFCF;136 font-size: 38px;137 margin: 8px 0;138 }139 .meta svg { width: 42px; height: 42px; stroke: #B0B0B0; stroke-width: 5; fill: none; }140 .meta .sep { margin: 0 10px; color: #B0B0B0; }141 .spacer-content {142 height: 1350px; /* empty list area */143 }144 145 /* Floating action button */146 .fab {147 position: absolute;148 right: 48px;149 bottom: 390px;150 width: 150px;151 height: 150px;152 background: #55A8FF;153 border-radius: 50%;154 box-shadow: 0 10px 18px rgba(0,0,0,0.35);155 display: flex;156 align-items: center;157 justify-content: center;158 }159 .fab svg { width: 88px; height: 88px; stroke: #FFFFFF; stroke-width: 6; fill: none; }160 161 /* Bottom ad bar */162 .ad-bar {163 position: absolute;164 left: 0; right: 0; bottom: 180px;165 height: 170px;166 background: #FFFFFF;167 display: flex;168 align-items: center;169 padding: 0 28px;170 box-sizing: border-box;171 color: #333333;172 box-shadow: 0 -4px 10px rgba(0,0,0,0.25);173 }174 .ad-icon {175 width: 120px; height: 120px; border-radius: 18px;176 background: #76D2CF;177 display: flex; align-items: center; justify-content: center;178 margin-right: 24px;179 }180 .ad-icon svg { width: 70px; height: 70px; stroke: #FFFFFF; stroke-width: 6; fill: none; }181 .ad-text {182 flex: 1;183 }184 .ad-title {185 font-size: 48px; color: #33B7AF; font-weight: 700;186 }187 .ad-sub { font-size: 36px; color: #777777; margin-top: 6px; }188 189 .ad-avatars {190 display: flex; align-items: center; gap: 26px; margin-left: 18px;191 }192 .avatar {193 width: 110px; height: 110px; border-radius: 50%;194 background: #E0E0E0; border: 1px solid #BDBDBD;195 display: flex; align-items: center; justify-content: center;196 color: #757575; font-size: 24px; text-align: center; padding: 8px; box-sizing: border-box;197 }198 .avatar-label {199 font-size: 24px; color: #888888; text-align: center; margin-top: 6px;200 }201 .avatar-wrap { display: flex; flex-direction: column; align-items: center; }202 203 /* Navigation pill area */204 .nav-area {205 position: absolute;206 left: 0; right: 0; bottom: 0;207 height: 180px;208 background: #000000;209 display: flex; align-items: center; justify-content: center;210 }211 .gesture-pill {212 width: 280px; height: 12px; background: #FFFFFF; border-radius: 8px;213 opacity: 0.9;214 }215</style>216</head>217<body>218<div id="render-target">219 220 <div class="app-header">221 <div class="statusbar">222 <div>12:25 70°</div>223 <div class="right">224 <span style="font-size:32px; opacity:0.9;">A</span>225 <span style="font-size:32px; opacity:0.9;">✉</span>226 <span style="font-size:32px; opacity:0.9;">•</span>227 <svg width="48" height="32" viewBox="0 0 24 24" style="stroke:#FFFFFF; stroke-width:2; fill:none;">228 <path d="M2 12c4-6 16-6 20 0" />229 <circle cx="12" cy="12" r="2" fill="#FFFFFF"/>230 </svg>231 <svg width="36" height="24" viewBox="0 0 24 24" style="stroke:#FFFFFF; stroke-width:2; fill:none;">232 <rect x="4" y="6" width="16" height="12" rx="2" />233 <rect x="18" y="8" width="2" height="8" fill="#FFFFFF" stroke="none"/>234 </svg>235 </div>236 </div>237 238 <div class="toolbar">239 <div class="icon-btn" aria-label="menu">240 <svg viewBox="0 0 24 24">241 <path d="M3 6h18M3 12h18M3 18h18" />242 </svg>243 </div>244 <div class="title">Tasks</div>245 <div class="actions">246 <div class="icon-btn" aria-label="add-reminder">247 <svg viewBox="0 0 24 24">248 <circle cx="12" cy="12" r="8" />249 <path d="M12 8v8M8 12h8" />250 </svg>251 </div>252 <div class="icon-btn" aria-label="check">253 <svg viewBox="0 0 24 24">254 <path d="M5 12l5 5 9-11" />255 </svg>256 </div>257 <div class="icon-btn" aria-label="search">258 <svg viewBox="0 0 24 24">259 <circle cx="11" cy="11" r="7"></circle>260 <path d="M20 20l-4.5-4.5"></path>261 </svg>262 </div>263 </div>264 </div>265 </div>266 267 <div class="banner">268 <div class="alert-icon">269 <svg viewBox="0 0 24 24">270 <circle cx="12" cy="12" r="10" fill="#E53935"></circle>271 <rect x="11" y="6" width="2" height="8" fill="#FFFFFF"></rect>272 <rect x="11" y="15.5" width="2" height="2.5" fill="#FFFFFF"></rect>273 </svg>274 </div>275 <div class="text">Auto Snooze Un-attended Reminder? Enable/Disable</div>276 <div class="cta">How</div>277 </div>278 279 <div class="section-label">Next 7 days</div>280 281 <div class="task-row">282 <div class="task-card">283 <div class="task-title">Buy New Balance Hiking shoes</div>284 <div class="chevron" aria-hidden="true">285 <svg viewBox="0 0 24 24" style="stroke:#CFCFCF; stroke-width:3; fill:none;">286 <path d="M6 9l6 6 6-6"/>287 </svg>288 </div>289 290 <div class="meta">291 <svg viewBox="0 0 24 24">292 <circle cx="12" cy="12" r="8"></circle>293 <path d="M12 12l4 2M12 7v5"></path>294 </svg>295 <span>12:45 PM</span>296 <span class="sep">|</span>297 <svg viewBox="0 0 24 24">298 <path d="M4 12a8 8 0 0 1 14.3-4.3M20 12a8 8 0 0 1-14.3 4.3"></path>299 <path d="M8 6l0 4M16 18l0-4"></path>300 </svg>301 <span>Once</span>302 </div>303 304 <div class="meta">305 <svg viewBox="0 0 24 24">306 <rect x="4" y="5" width="16" height="14" rx="2"></rect>307 <path d="M8 5v-2M16 5v-2M4 9h16"></path>308 </svg>309 <span>Thu, Dec 21, 2023</span>310 </div>311 </div>312 </div>313 314 <div class="spacer-content"></div>315 316 <div class="fab" aria-label="add">317 <svg viewBox="0 0 24 24">318 <circle cx="12" cy="12" r="8"></circle>319 <path d="M12 8v8M8 12h8"></path>320 </svg>321 </div>322 323 <div class="ad-bar">324 <div class="ad-icon">325 <svg viewBox="0 0 24 24">326 <path d="M6 4l4 4M10 8l4-4M7 9l8 8" />327 </svg>328 </div>329 <div class="ad-text">330 <div class="ad-title">Speed Dial Widget</div>331 <div class="ad-sub">Just tap & dial</div>332 </div>333 <div class="ad-avatars">334 <div class="avatar-wrap">335 <div class="avatar">[IMG: Contact Avatar]</div>336 <div class="avatar-label">Contact</div>337 </div>338 <div class="avatar-wrap">339 <div class="avatar">[IMG: Contact Avatar]</div>340 <div class="avatar-label">Contact</div>341 </div>342 <div class="avatar-wrap">343 <div class="avatar">[IMG: Contact Avatar]</div>344 <div class="avatar-label">Contact</div>345 </div>346 </div>347 </div>348 349 <div class="nav-area">350 <div class="gesture-pill"></div>351 </div>352 353</div>354</body>355</html>