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 Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #2f3439; color: #fff;13 }14 15 /* Status bar */16 .status-bar {17 height: 92px;18 background: #4a90e2;19 display: flex;20 align-items: center;21 padding: 0 36px;22 font-size: 34px;23 color: #fff;24 letter-spacing: 0.5px;25 }26 .status-left { display: flex; align-items: center; gap: 18px; }27 .status-right { margin-left: auto; display: flex; align-items: center; gap: 28px; }28 29 /* Top app bar */30 .app-bar {31 height: 152px;32 background: #4a90e2;33 display: flex;34 align-items: center;35 padding: 0 28px;36 }37 .app-title {38 font-size: 64px;39 font-weight: 500;40 margin-left: 20px;41 }42 .app-actions {43 margin-left: auto;44 display: flex;45 align-items: center;46 gap: 42px;47 padding-right: 20px;48 }49 .icon-btn { width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; }50 51 /* Alert banner */52 .alert-banner {53 background: #4a4a4a;54 color: #ff6e6e;55 display: flex;56 align-items: center;57 padding: 22px 28px;58 font-size: 36px;59 border-bottom: 1px solid rgba(255,255,255,0.1);60 }61 .alert-text {62 display: flex; flex-direction: column;63 line-height: 1.35;64 }65 .alert-text .secondary { color: #ff8e8e; font-size: 32px; }66 .alert-spacer { width: 24px; }67 .alert-button {68 margin-left: auto;69 background: #5c84c3;70 color: #dfe9ff;71 padding: 14px 28px;72 border-radius: 8px;73 font-size: 34px;74 }75 76 /* Section header */77 .section-header {78 color: #7ec3ff;79 font-size: 48px;80 font-weight: 500;81 padding: 28px;82 border-top: 1px solid rgba(255,255,255,0.06);83 }84 85 /* Task card */86 .task-card {87 padding: 20px 28px 26px 28px;88 background: #2f3439;89 border-top: 1px solid rgba(255,255,255,0.06);90 position: relative;91 }92 .task-title {93 font-size: 58px;94 font-weight: 500;95 color: #ffffff;96 margin-bottom: 28px;97 }98 .task-meta { display: flex; align-items: center; gap: 26px; color: #cfd8dc; font-size: 36px; margin-bottom: 18px; }99 .task-meta .separator { margin: 0 8px; color: #9aa6ac; }100 .task-date { display: flex; align-items: center; gap: 18px; color: #cfd8dc; font-size: 36px; }101 .chevron {102 position: absolute; right: 28px; top: 62px;103 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;104 }105 106 /* Content filler area */107 .content-fill {108 height: 1300px;109 background: #2f3439;110 }111 112 /* Floating action button */113 .fab {114 position: absolute;115 right: 44px;116 bottom: 340px;117 width: 150px; height: 150px;118 border-radius: 50%;119 background: #5aa9f4;120 box-shadow: 0 10px 24px rgba(0,0,0,0.35);121 display: flex; align-items: center; justify-content: center;122 }123 124 /* Bottom banner (ad-like) */125 .bottom-bar {126 position: absolute;127 bottom: 120px;128 left: 0; right: 0;129 height: 170px;130 background: #ffffff;131 color: #333;132 display: flex;133 align-items: center;134 padding: 20px 24px;135 box-shadow: 0 -6px 18px rgba(0,0,0,0.25);136 }137 .promo-left {138 display: flex; align-items: center;139 gap: 24px;140 flex: 1;141 }142 .promo-tile {143 width: 120px; height: 120px;144 background: #8ddbd1;145 border-radius: 16px;146 display: flex; align-items: center; justify-content: center;147 color: #075e56;148 font-size: 40px;149 font-weight: 600;150 }151 .promo-text {152 display: flex; flex-direction: column;153 line-height: 1.2;154 }155 .promo-text .title { color: #24a6a0; font-size: 48px; font-weight: 700; }156 .promo-text .subtitle { color: #444; font-size: 36px; margin-top: 8px; }157 158 .promo-avatars {159 display: flex; align-items: center; gap: 24px;160 }161 .avatar {162 display: flex; flex-direction: column; align-items: center; gap: 8px;163 }164 .avatar .img {165 width: 96px; height: 96px;166 background: #E0E0E0; border: 1px solid #BDBDBD;167 border-radius: 50%;168 display: flex; align-items: center; justify-content: center;169 color: #757575; font-size: 20px; text-align: center; padding: 6px;170 }171 .avatar .label { font-size: 24px; color: #777; }172 173 /* Bottom system gesture area */174 .gesture-bar {175 position: absolute;176 bottom: 28px; left: 50%;177 transform: translateX(-50%);178 width: 240px; height: 10px;179 background: #d9d9d9;180 border-radius: 6px;181 }182 183 /* Simple icon color helpers */184 .icon-white svg { fill: none; stroke: #ffffff; }185 .icon-gray svg { fill: none; stroke: #cfd8dc; }186 .icon-blue svg { fill: none; stroke: #ffffff; }187 .icon-red svg { fill: none; stroke: #ff6e6e; }188 189 /* Utility */190 .spacer-8 { width: 8px; }191</style>192</head>193<body>194<div id="render-target">195 196 <!-- Status Bar -->197 <div class="status-bar">198 <div class="status-left">199 <div>12:28</div>200 <div>70°</div>201 <div style="opacity:.85">•</div>202 <div style="opacity:.85">⌁</div>203 <div style="opacity:.85">✉</div>204 </div>205 <div class="status-right">206 <!-- Wifi -->207 <svg width="44" height="44" viewBox="0 0 24 24" stroke="#fff" fill="none" stroke-width="1.8">208 <path d="M3 9c4.97-4 13.03-4 18 0" />209 <path d="M6 12c3.31-3 8.69-3 12 0" />210 <path d="M9 15c1.66-2 4.34-2 6 0" />211 <circle cx="12" cy="18" r="1.2" fill="#fff" stroke="none"/>212 </svg>213 <!-- Battery -->214 <svg width="44" height="44" viewBox="0 0 24 24" stroke="#fff" fill="none" stroke-width="1.6">215 <rect x="3" y="7" width="16" height="10" rx="2"></rect>216 <rect x="5" y="9" width="12" height="6" fill="#fff" stroke="none"></rect>217 <rect x="20" y="10" width="2" height="6" rx="1"></rect>218 </svg>219 </div>220 </div>221 222 <!-- App Bar -->223 <div class="app-bar">224 <!-- Hamburger -->225 <div class="icon-btn">226 <svg width="72" height="72" viewBox="0 0 24 24" stroke="#fff" stroke-width="2" fill="none">227 <path d="M3 6h18M3 12h18M3 18h18"/>228 </svg>229 </div>230 <div class="app-title">Tasks</div>231 <div class="app-actions">232 <!-- Alarm + -->233 <div class="icon-btn">234 <svg width="72" height="72" viewBox="0 0 24 24" stroke="#fff" stroke-width="2" fill="none">235 <circle cx="12" cy="13" r="6"></circle>236 <path d="M12 10v6M9 13h6"/>237 <path d="M6 5l2 2M18 5l-2 2" stroke-linecap="round"/>238 </svg>239 </div>240 <!-- Check circle -->241 <div class="icon-btn">242 <svg width="72" height="72" viewBox="0 0 24 24" stroke="#fff" stroke-width="2" fill="none">243 <circle cx="12" cy="12" r="9"></circle>244 <path d="M8 12l3 3 5-6" stroke-linecap="round" stroke-linejoin="round"/>245 </svg>246 </div>247 <!-- Search -->248 <div class="icon-btn">249 <svg width="72" height="72" viewBox="0 0 24 24" stroke="#fff" stroke-width="2" fill="none">250 <circle cx="11" cy="11" r="6"></circle>251 <path d="M16 16l5 5" stroke-linecap="round"/>252 </svg>253 </div>254 </div>255 </div>256 257 <!-- Alert Banner -->258 <div class="alert-banner">259 <div class="icon-red" style="margin-right: 18px;">260 <svg width="52" height="52" viewBox="0 0 24 24" stroke="#ff6e6e" stroke-width="2" fill="none">261 <circle cx="12" cy="12" r="9"></circle>262 <path d="M12 7v6M12 16v1" stroke-linecap="round"/>263 </svg>264 </div>265 <div class="alert-text">266 <div>Auto Snooze Un-attended Reminder?</div>267 <div class="secondary">Enable/Disable</div>268 </div>269 <div class="alert-spacer"></div>270 <div class="alert-button">How</div>271 </div>272 273 <!-- Section Header -->274 <div class="section-header">Next 7 days</div>275 276 <!-- Task Card -->277 <div class="task-card">278 <div class="task-title">Buy New Balance Hiking shoes</div>279 <div class="task-meta">280 <!-- time -->281 <svg width="42" height="42" viewBox="0 0 24 24" stroke="#cfd8dc" stroke-width="1.8" fill="none">282 <circle cx="12" cy="12" r="9"></circle>283 <path d="M12 7v5l4 2" stroke-linecap="round"/>284 </svg>285 <div>12:45 PM</div>286 <span class="separator">•</span>287 <!-- duration (refresh style) -->288 <svg width="40" height="40" viewBox="0 0 24 24" stroke="#cfd8dc" stroke-width="1.8" fill="none">289 <path d="M12 6a6 6 0 1 1-4.24 10.24" stroke-linecap="round"/>290 <path d="M7 6h5v5" stroke-linecap="round"/>291 </svg>292 <div>1hour</div>293 </div>294 <div class="task-date">295 <!-- calendar -->296 <svg width="42" height="42" viewBox="0 0 24 24" stroke="#cfd8dc" stroke-width="1.8" fill="none">297 <rect x="3" y="5" width="18" height="16" rx="2"></rect>298 <path d="M7 3v4M17 3v4M3 10h18"/>299 </svg>300 <div>Thu, Dec 21, 2023</div>301 </div>302 <div class="chevron">303 <svg width="64" height="64" viewBox="0 0 24 24" stroke="#9aa6ac" stroke-width="2" fill="none">304 <path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round"/>305 </svg>306 </div>307 </div>308 309 <!-- Filler content area (empty list background) -->310 <div class="content-fill"></div>311 312 <!-- Floating Action Button -->313 <div class="fab">314 <svg width="96" height="96" viewBox="0 0 24 24" stroke="#fff" stroke-width="2" fill="none">315 <circle cx="12" cy="13" r="6"></circle>316 <path d="M12 10v6M9 13h6" />317 <path d="M6 5l2 2M18 5l-2 2" stroke-linecap="round"/>318 </svg>319 </div>320 321 <!-- Bottom Banner -->322 <div class="bottom-bar">323 <div class="promo-left">324 <div class="promo-tile">☎</div>325 <div class="promo-text">326 <div class="title">Speed Dial Widget</div>327 <div class="subtitle">Just tap & dial</div>328 </div>329 </div>330 <div class="promo-avatars">331 <div class="avatar">332 <div class="img">[IMG: Avatar Dad]</div>333 <div class="label">Dad</div>334 </div>335 <div class="avatar">336 <div class="img">[IMG: Avatar Big Bro]</div>337 <div class="label">Big Bro</div>338 </div>339 <div class="avatar">340 <div class="img">[IMG: Avatar Mom]</div>341 <div class="label">Mom</div>342 </div>343 </div>344 </div>345 346 <!-- Bottom gesture bar -->347 <div class="gesture-bar"></div>348 349</div>350</body>351</html>