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 - Edit Reminder UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #121314;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 110px;24 background: #164f8f;25 color: #ffffff;26 display: flex;27 align-items: center;28 padding: 0 32px;29 font-size: 36px;30 letter-spacing: 0.5px;31 }32 .status-left { flex: 1; }33 .status-right {34 display: flex; align-items: center; gap: 28px;35 }36 .sb-icon {37 width: 36px; height: 36px; border-radius: 4px; opacity: 0.9;38 background: rgba(255,255,255,0.9);39 }40 41 /* App bar */42 .app-bar {43 position: absolute;44 top: 110px;45 left: 0;46 width: 1080px;47 height: 140px;48 background: #1e63b3;49 display: flex;50 align-items: center;51 padding: 0 28px;52 color: #fff;53 }54 .icon-btn {55 width: 96px; height: 96px;56 display: flex; align-items: center; justify-content: center;57 border: none; background: transparent; padding: 0; margin: 0;58 }59 .app-title {60 font-size: 60px; font-weight: 600; margin-left: 10px;61 }62 .app-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }63 64 /* Warning banner */65 .warning-banner {66 position: absolute;67 top: 250px;68 left: 0;69 width: 1080px;70 height: 110px;71 background: #232425;72 display: flex;73 align-items: center;74 padding: 0 28px;75 color: #f55d5d;76 }77 .warning-banner .warn-text {78 font-size: 38px; flex: 1; margin-left: 16px;79 }80 .how-btn {81 background: #3a6fb5; color: #fff;82 border: none; font-size: 36px; padding: 16px 28px; border-radius: 8px;83 }84 85 /* Section label */86 .section-label {87 position: absolute;88 top: 360px;89 left: 28px;90 font-size: 44px;91 color: #56a3ff;92 letter-spacing: 0.3px;93 }94 95 /* Task preview card behind sheet */96 .task-preview {97 position: absolute;98 top: 420px;99 left: 0;100 width: 1080px;101 padding: 36px 28px;102 color: #eaeaea;103 }104 .task-title {105 font-size: 56px; font-weight: 600; margin-bottom: 24px;106 }107 .task-row { display: flex; align-items: center; gap: 18px; color: #cfd8dc; font-size: 38px; margin: 16px 0; }108 .inline-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }109 110 /* Bottom sheet */111 .sheet {112 position: absolute;113 left: 40px;114 top: 680px;115 width: 1000px;116 border-radius: 16px;117 box-shadow: 0 18px 48px rgba(0,0,0,0.45);118 }119 .sheet-header {120 height: 120px;121 background: #4ea2ff;122 border-top-left-radius: 16px; border-top-right-radius: 16px;123 display: flex; align-items: center;124 padding: 0 24px;125 color: #fff;126 }127 .sheet-title { font-size: 48px; font-weight: 600; margin-left: 16px; }128 .save-btn {129 margin-left: auto;130 background: #ffffff;131 color: #1e63b3;132 font-weight: 700; border: none;133 padding: 16px 24px; font-size: 40px; border-radius: 12px;134 }135 .sheet-body {136 background: #3a3a3a;137 border-bottom-left-radius: 16px; border-bottom-right-radius: 16px;138 padding: 16px 0;139 }140 .field-row {141 display: flex; align-items: center;142 padding: 28px 28px;143 color: #e5e5e5; font-size: 42px;144 }145 .field-row .muted { color: #b6b6b6; }146 .divider {147 height: 2px; background: #4a4a4a; margin: 0 28px;148 }149 .field-row .label { flex: 1; }150 .field-row .field-text { flex: 1; }151 .right-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }152 .left-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; margin-right: 24px; }153 154 /* FAB */155 .fab {156 position: absolute;157 right: 48px;158 bottom: 360px;159 width: 150px; height: 150px;160 border-radius: 75px;161 background: #2f85e0;162 box-shadow: 0 12px 24px rgba(0,0,0,0.5);163 display: flex; align-items: center; justify-content: center;164 }165 166 /* Ad bar */167 .ad-bar {168 position: absolute;169 left: 0;170 bottom: 180px;171 width: 1080px;172 height: 180px;173 background: #1d1d1d;174 display: flex; align-items: center;175 padding: 0 24px;176 color: #e8f5ff;177 }178 .ad-img {179 width: 150px; height: 120px; display: flex; align-items: center; justify-content: center;180 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;181 margin-right: 24px;182 }183 .ad-text { flex: 1; }184 .ad-title { font-size: 46px; font-weight: 700; color: #9be2f9; }185 .ad-sub { font-size: 36px; color: #cfe9f6; }186 .ad-avatars { display: flex; align-items: center; gap: 18px; }187 .avatar {188 width: 110px; height: 110px; border-radius: 55px; overflow: hidden;189 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;190 display: flex; align-items: center; justify-content: center; font-size: 26px; text-align: center; padding: 6px;191 }192 193 /* Home indicator */194 .home-indicator {195 position: absolute;196 left: 50%;197 bottom: 60px;198 transform: translateX(-50%);199 width: 180px; height: 12px;200 background: #ffffff; border-radius: 6px; opacity: 0.8;201 }202 203 /* SVG colors */204 svg { display: block; }205 .svg-stroke { stroke: #ffffff; fill: none; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }206 .svg-stroke-dark { stroke: #d9d9d9; fill: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }207 .svg-stroke-light { stroke: #e5e5e5; fill: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }208 .svg-red { stroke: #ff6b6b; }209 .svg-gray { stroke: #b6b6b6; }210</style>211</head>212<body>213<div id="render-target">214 215 <!-- Status bar -->216 <div class="status-bar">217 <div class="status-left">12:27 70° ∆ en •</div>218 <div class="status-right">219 <div class="sb-icon" style="clip-path: polygon(10% 40%, 50% 5%, 90% 40%, 90% 80%, 10% 80%); opacity:0.95;"></div>220 <div class="sb-icon" style="border-radius: 50%;"></div>221 </div>222 </div>223 224 <!-- App bar -->225 <div class="app-bar">226 <button class="icon-btn" aria-label="Open menu">227 <svg width="60" height="60" viewBox="0 0 24 24">228 <path class="svg-stroke" d="M3 6h18M3 12h18M3 18h18"/>229 </svg>230 </button>231 <div class="app-title">Tasks</div>232 <div class="app-actions">233 <button class="icon-btn" aria-label="Add reminder">234 <svg width="60" height="60" viewBox="0 0 24 24">235 <circle class="svg-stroke" cx="12" cy="13" r="8"/>236 <path class="svg-stroke" d="M12 9v8M8 13h8"/>237 <path class="svg-stroke" d="M7 6c3-2 7-2 10 0"/>238 </svg>239 </button>240 <button class="icon-btn" aria-label="Mark done">241 <svg width="60" height="60" viewBox="0 0 24 24">242 <path class="svg-stroke" d="M4 12l6 6L20 6"/>243 </svg>244 </button>245 <button class="icon-btn" aria-label="Search">246 <svg width="60" height="60" viewBox="0 0 24 24">247 <circle class="svg-stroke" cx="10" cy="10" r="6"/>248 <path class="svg-stroke" d="M15 15l6 6"/>249 </svg>250 </button>251 </div>252 </div>253 254 <!-- Warning banner -->255 <div class="warning-banner">256 <div class="inline-icon">257 <svg width="44" height="44" viewBox="0 0 24 24">258 <circle class="svg-red" cx="12" cy="12" r="10"/>259 <path class="svg-red" d="M12 7v6M12 17h0.01"/>260 </svg>261 </div>262 <div class="warn-text">Auto Snooze Un-attended Reminder? Enable/Disable</div>263 <button class="how-btn">How</button>264 </div>265 266 <!-- Section label -->267 <div class="section-label">Next 7 days</div>268 269 <!-- Task preview (background content) -->270 <div class="task-preview">271 <div class="task-title">Buy New Balance Hiking shoes</div>272 <div class="task-row">273 <div class="inline-icon">274 <svg width="44" height="44" viewBox="0 0 24 24">275 <circle class="svg-stroke-light" cx="12" cy="13" r="8"/>276 <path class="svg-stroke-light" d="M7 6c3-2 7-2 10 0"/>277 <path class="svg-stroke-light" d="M12 9v4l3 2"/>278 </svg>279 </div>280 <div>12:45 PM</div>281 <div style="opacity:0.7;">•</div>282 <div>Once</div>283 </div>284 <div class="task-row">285 <div class="inline-icon">286 <svg width="44" height="44" viewBox="0 0 24 24">287 <rect class="svg-stroke-light" x="3" y="5" width="18" height="16" rx="2"/>288 <path class="svg-stroke-light" d="M7 3v4M17 3v4"/>289 <path class="svg-stroke-light" d="M3 10h18"/>290 </svg>291 </div>292 <div>Thu, Dec 21, 2023</div>293 </div>294 </div>295 296 <!-- Bottom sheet -->297 <div class="sheet">298 <div class="sheet-header">299 <button class="icon-btn" aria-label="Close">300 <svg width="60" height="60" viewBox="0 0 24 24">301 <path class="svg-stroke" d="M5 5l14 14M19 5L5 19"/>302 </svg>303 </button>304 <div class="sheet-title">Edit Reminder</div>305 <button class="save-btn">SAVE</button>306 </div>307 <div class="sheet-body">308 <div class="field-row">309 <div class="field-text">Buy New Balance Hiking shoes</div>310 <div class="right-icon">311 <svg width="40" height="40" viewBox="0 0 24 24">312 <path class="svg-stroke-dark" d="M12 3a5 5 0 015 5v3l3 2v2l-3-1v3a5 5 0 01-10 0V9a5 5 0 015-6z"/>313 </svg>314 </div>315 </div>316 <div class="divider"></div>317 <div class="field-row">318 <div class="label muted">Write short note</div>319 <div class="right-icon">320 <svg width="40" height="40" viewBox="0 0 24 24">321 <path class="svg-stroke-dark" d="M12 3a5 5 0 015 5v3l3 2v2l-3-1v3a5 5 0 01-10 0V9a5 5 0 015-6z"/>322 </svg>323 </div>324 </div>325 <div class="divider"></div>326 <div class="field-row">327 <div class="left-icon">328 <svg width="40" height="40" viewBox="0 0 24 24">329 <rect class="svg-stroke-dark" x="3" y="5" width="18" height="16" rx="2"/>330 <path class="svg-stroke-dark" d="M7 3v4M17 3v4M3 10h18"/>331 </svg>332 </div>333 <div class="label">Thu, Dec 21, 2023</div>334 <div class="right-icon">335 <svg width="40" height="40" viewBox="0 0 24 24">336 <path class="svg-stroke-dark" d="M5 5l14 14M19 5L5 19"/>337 </svg>338 </div>339 </div>340 <div class="divider"></div>341 <div class="field-row">342 <div class="left-icon">343 <svg width="40" height="40" viewBox="0 0 24 24">344 <circle class="svg-stroke-dark" cx="12" cy="12" r="8"/>345 <path class="svg-stroke-dark" d="M12 8v5l3 2"/>346 </svg>347 </div>348 <div class="label">12:45 PM</div>349 <div class="right-icon">350 <svg width="40" height="40" viewBox="0 0 24 24">351 <path class="svg-stroke-dark" d="M5 5l14 14M19 5L5 19"/>352 </svg>353 </div>354 </div>355 <div class="divider"></div>356 <div class="field-row">357 <div class="left-icon">358 <svg width="40" height="40" viewBox="0 0 24 24">359 <circle class="svg-stroke-dark" cx="12" cy="12" r="9"/>360 <path class="svg-stroke-dark" d="M12 12l0.01-6M12 12l6 0.01"/>361 </svg>362 </div>363 <div class="label">Remind me before</div>364 <div class="right-icon">365 <svg width="40" height="40" viewBox="0 0 24 24">366 <path class="svg-stroke-dark" d="M9 6l6 6-6 6"/>367 </svg>368 </div>369 </div>370 <div class="divider"></div>371 <div class="field-row">372 <div class="left-icon">373 <svg width="40" height="40" viewBox="0 0 24 24">374 <path class="svg-stroke-dark" d="M4 12h6V6M20 12h-6v6"/>375 <circle class="svg-stroke-dark" cx="4" cy="12" r="1.5"/>376 <circle class="svg-stroke-dark" cx="20" cy="12" r="1.5"/>377 </svg>378 </div>379 <div class="label">Repeat every 1 hour</div>380 <div class="right-icon">381 <svg width="40" height="40" viewBox="0 0 24 24">382 <path class="svg-stroke-dark" d="M5 5l14 14M19 5L5 19"/>383 </svg>384 </div>385 </div>386 </div>387 </div>388 389 <!-- Floating action button -->390 <div class="fab" aria-label="Add">391 <svg width="88" height="88" viewBox="0 0 24 24">392 <circle class="svg-stroke" cx="12" cy="13" r="8"/>393 <path class="svg-stroke" d="M12 9v8M8 13h8"/>394 <path class="svg-stroke" d="M7 6c3-2 7-2 10 0"/>395 </svg>396 </div>397 398 <!-- Bottom ad bar -->399 <div class="ad-bar">400 <div class="ad-img">[IMG: Phone app graphic]</div>401 <div class="ad-text">402 <div class="ad-title">Speed Dial Widget</div>403 <div class="ad-sub">Just tap & dial</div>404 </div>405 <div class="ad-avatars">406 <div class="avatar">[IMG: Contact avatar]</div>407 <div class="avatar">[IMG: Contact avatar]</div>408 <div class="avatar">[IMG: Contact avatar]</div>409 <div class="avatar">[IMG: Contact avatar]</div>410 </div>411 </div>412 413 <!-- Home indicator -->414 <div class="home-indicator"></div>415 416</div>417</body>418</html>