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">6<title>Tasks - Edit Reminder</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #121212;15 color: #fff;16 }17 18 /* Status bar and app bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 100px;25 background: #184C7A;26 display: flex;27 align-items: center;28 padding: 0 24px;29 font-size: 36px;30 color: #E9F2FF;31 box-sizing: border-box;32 }33 .status-left { display: flex; align-items: center; gap: 14px; }34 .status-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }35 .icon-wifi, .icon-battery { width: 40px; height: 40px; }36 37 .app-bar {38 position: absolute;39 top: 100px;40 left: 0;41 width: 1080px;42 height: 170px;43 background: #1E64B7;44 display: flex;45 align-items: center;46 padding: 0 28px;47 box-sizing: border-box;48 }49 .hamburger {50 width: 80px; height: 80px; margin-right: 24px; opacity: 0.9;51 }52 .app-title {53 font-size: 64px; font-weight: 600; letter-spacing: 0.5px;54 }55 .app-actions {56 margin-left: auto; display: flex; align-items: center; gap: 40px;57 }58 .app-actions svg { width: 78px; height: 78px; opacity: 0.9; }59 60 /* Banner message */61 .banner {62 position: absolute;63 top: 270px;64 left: 0;65 width: 1080px;66 height: 120px;67 background: #1B1B1B;68 display: flex;69 align-items: center;70 padding: 0 28px;71 box-sizing: border-box;72 box-shadow: inset 0 -1px 0 rgba(255,255,255,0.06);73 }74 .banner .warn-icon { width: 64px; height: 64px; margin-right: 16px; }75 .banner .text { color: #FF6E6E; font-size: 40px; }76 .banner .how-btn {77 margin-left: auto;78 background: #2E5E9E;79 color: #E6F0FF;80 border-radius: 10px;81 padding: 16px 26px;82 font-size: 36px;83 }84 85 /* Next 7 days */86 .section-label {87 position: absolute;88 top: 390px;89 left: 0;90 width: 1080px;91 height: 90px;92 display: flex;93 align-items: center;94 padding: 0 28px;95 box-sizing: border-box;96 color: #78B7FF;97 font-size: 44px;98 font-weight: 600;99 }100 101 /* Task card preview (behind sheet) */102 .task-card {103 position: absolute;104 top: 480px;105 left: 0;106 width: 1080px;107 background: #0F0F0F;108 padding: 28px;109 box-sizing: border-box;110 }111 .task-title {112 font-size: 58px; color: #EDEDED; margin-bottom: 20px;113 }114 .task-row { display: flex; align-items: center; gap: 16px; color: #C9C9C9; font-size: 38px; margin: 12px 0; }115 .task-row svg { width: 44px; height: 44px; opacity: 0.8; }116 .task-row .meta { margin-left: 8px; }117 .task-row .meta + .meta { margin-left: 24px; }118 119 /* Overlay and edit sheet */120 .overlay {121 position: absolute;122 left: 0;123 top: 0;124 width: 1080px;125 height: 2400px;126 background: rgba(0,0,0,0.35);127 }128 .sheet {129 position: absolute;130 left: 40px;131 top: 690px;132 width: 1000px;133 background: #3A3A3A;134 border-radius: 14px;135 box-shadow: 0 8px 28px rgba(0,0,0,0.6);136 overflow: hidden;137 }138 .sheet-header {139 height: 120px;140 background: #4EA1FF;141 display: flex;142 align-items: center;143 padding: 0 24px;144 box-sizing: border-box;145 }146 .sheet-header .close {147 width: 60px; height: 60px; margin-right: 18px;148 }149 .sheet-title {150 font-size: 52px; font-weight: 600; color: #FFFFFF;151 }152 .save-btn {153 margin-left: auto;154 background: #FFFFFF;155 color: #2F6FD0;156 border-radius: 14px;157 padding: 10px 22px;158 font-size: 40px;159 font-weight: 700;160 }161 .sheet-content { padding: 18px 22px 20px 22px; }162 .field {163 height: 120px;164 display: flex;165 align-items: center;166 padding: 0 16px;167 background: #444444;168 color: #EDEDED;169 border-bottom: 1px solid rgba(255,255,255,0.08);170 box-sizing: border-box;171 }172 .field .label { font-size: 46px; flex: 1; }173 .field .subtle { color: #BDBDBD; font-size: 42px; }174 .field svg { width: 56px; height: 56px; margin-right: 18px; opacity: 0.9; }175 .field .suffix { margin-left: auto; display: flex; align-items: center; gap: 16px; }176 .field .link { color: #70A9FF; font-size: 40px; }177 .chevron { width: 40px; height: 40px; opacity: 0.7; }178 .x-icon { width: 40px; height: 40px; opacity: 0.6; }179 .mic { width: 44px; height: 44px; opacity: 0.8; }180 181 /* FAB */182 .fab {183 position: absolute;184 right: 44px;185 bottom: 360px;186 width: 120px;187 height: 120px;188 background: #3189F6;189 border-radius: 60px;190 box-shadow: 0 8px 18px rgba(0,0,0,0.4);191 display: flex;192 align-items: center;193 justify-content: center;194 }195 .fab svg { width: 68px; height: 68px; }196 197 /* Bottom ad bar */198 .ad-bar {199 position: absolute;200 left: 0;201 bottom: 140px;202 width: 1080px;203 height: 160px;204 background: #F7F7F7;205 color: #2D2D2D;206 display: flex;207 align-items: center;208 padding: 0 24px;209 box-sizing: border-box;210 gap: 18px;211 }212 .img-ph {213 width: 120px; height: 120px;214 background: #E0E0E0;215 border: 1px solid #BDBDBD;216 display: flex; justify-content: center; align-items: center;217 color: #757575; font-size: 26px; text-align: center;218 border-radius: 12px;219 }220 .ad-text { display: flex; flex-direction: column; gap: 4px; }221 .ad-title { font-size: 42px; font-weight: 700; color: #1B5E9E; }222 .ad-sub { font-size: 34px; color: #3C3C3C; }223 .avatars { margin-left: auto; display: flex; gap: 18px; }224 .avatar { width: 120px; height: 120px; border-radius: 60px; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px; }225 226 /* Gesture pill */227 .gesture {228 position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%);229 width: 240px; height: 16px;230 background: #FFFFFF; opacity: 0.9; border-radius: 8px;231 }232</style>233</head>234<body>235<div id="render-target">236 237 <!-- Status bar -->238 <div class="status-bar">239 <div class="status-left">240 <div>12:26</div>241 <div>70°</div>242 <div>en</div>243 <div>•</div>244 </div>245 <div class="status-right">246 <!-- Simple wifi icon -->247 <svg class="icon-wifi" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">248 <path d="M4 8c4-3 12-3 16 0"/><path d="M6 11c3-2 9-2 12 0"/><path d="M8 14c2-1 6-1 8 0"/><circle cx="12" cy="18" r="1.5" fill="#fff"/>249 </svg>250 <!-- Battery icon -->251 <svg class="icon-battery" viewBox="0 0 28 18" fill="none" stroke="#fff" stroke-width="2">252 <rect x="2" y="3" width="20" height="12" rx="2" />253 <rect x="23" y="7" width="3" height="4" />254 <rect x="4" y="5" width="14" height="8" fill="#fff"/>255 </svg>256 </div>257 </div>258 259 <!-- App bar -->260 <div class="app-bar">261 <!-- Hamburger -->262 <svg class="hamburger" viewBox="0 0 24 24" fill="#fff">263 <rect x="3" y="5" width="18" height="2"/><rect x="3" y="11" width="18" height="2"/><rect x="3" y="17" width="18" height="2"/>264 </svg>265 <div class="app-title">Tasks</div>266 <div class="app-actions">267 <!-- Alarm + -->268 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">269 <circle cx="12" cy="13" r="6"/><path d="M12 10v6M9 13h6"/>270 <path d="M5 5l3 2M19 5l-3 2"/>271 </svg>272 <!-- Check -->273 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">274 <path d="M5 12l4 4 10-10"/>275 </svg>276 <!-- Search -->277 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">278 <circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/>279 </svg>280 </div>281 </div>282 283 <!-- Warning banner -->284 <div class="banner">285 <svg class="warn-icon" viewBox="0 0 24 24" fill="none">286 <circle cx="12" cy="12" r="10" fill="#FF3B30"/>287 <rect x="11" y="6" width="2" height="8" fill="#fff"/>288 <rect x="11" y="15.5" width="2" height="2.5" fill="#fff"/>289 </svg>290 <div class="text">Auto Snooze Un-attended Reminder? Enable/Disable</div>291 <div class="how-btn">How</div>292 </div>293 294 <!-- Section label -->295 <div class="section-label">Next 7 days</div>296 297 <!-- Task card preview -->298 <div class="task-card">299 <div class="task-title">Buy New Balance Hiking shoes</div>300 <div class="task-row">301 <svg viewBox="0 0 24 24" fill="none" stroke="#CFCFCF" stroke-width="2">302 <circle cx="12" cy="12" r="8"/><path d="M12 7v6l4 2"/>303 </svg>304 <div class="meta">12:45 PM</div>305 <div class="meta">Once</div>306 </div>307 <div class="task-row">308 <svg viewBox="0 0 24 24" fill="none" stroke="#CFCFCF" stroke-width="2">309 <rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18"/><path d="M8 3v3M16 3v3"/>310 </svg>311 <div class="meta">Thu, Dec 21, 2023</div>312 </div>313 </div>314 315 <!-- Overlay + Edit Reminder sheet -->316 <div class="overlay"></div>317 <div class="sheet">318 <div class="sheet-header">319 <svg class="close" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">320 <path d="M5 5l14 14M19 5L5 19"/>321 </svg>322 <div class="sheet-title">Edit Reminder</div>323 <div class="save-btn">SAVE</div>324 </div>325 <div class="sheet-content">326 <!-- Title field -->327 <div class="field">328 <div class="label">Buy New Balance Hiking shoes</div>329 <div class="suffix">330 <svg class="mic" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2">331 <rect x="8" y="5" width="8" height="10" rx="4"/><path d="M12 15v4M9 19h6"/>332 </svg>333 </div>334 </div>335 <!-- Note field -->336 <div class="field">337 <div class="label" style="color:#CFCFCF;">Write short note</div>338 <div class="suffix">339 <svg class="mic" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2">340 <rect x="8" y="5" width="8" height="10" rx="4"/><path d="M12 15v4M9 19h6"/>341 </svg>342 </div>343 </div>344 <!-- Date row -->345 <div class="field">346 <svg viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2">347 <rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18"/><path d="M8 3v3M16 3v3"/>348 </svg>349 <div class="label">Thu, Dec 21, 2023</div>350 <div class="suffix">351 <svg class="x-icon" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2">352 <path d="M5 5l14 14M19 5L5 19"/>353 </svg>354 </div>355 </div>356 <!-- Time row -->357 <div class="field">358 <svg viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2">359 <circle cx="12" cy="12" r="8"/><path d="M12 7v6l4 2"/>360 </svg>361 <div class="label">12:45 PM</div>362 <div class="suffix">363 <div class="link">+Add more time</div>364 <svg class="x-icon" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2">365 <path d="M5 5l14 14M19 5L5 19"/>366 </svg>367 </div>368 </div>369 <!-- Remind me before -->370 <div class="field">371 <svg viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2">372 <circle cx="12" cy="12" r="9"/><path d="M12 8v4l3 2"/>373 </svg>374 <div class="label">Remind me before</div>375 <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2">376 <path d="M9 6l6 6-6 6"/>377 </svg>378 </div>379 <!-- Repeat -->380 <div class="field" style="border-bottom: none;">381 <svg viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2">382 <path d="M4 7h8a4 4 0 1 1 0 8H7"/><path d="M7 11l-3 3 3 3"/>383 </svg>384 <div class="label">Repeat: No repeat</div>385 <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2">386 <path d="M9 6l6 6-6 6"/>387 </svg>388 </div>389 </div>390 </div>391 392 <!-- Floating action button -->393 <div class="fab">394 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">395 <circle cx="12" cy="12" r="8"/>396 <path d="M12 8v4l3 2"/>397 <path d="M12 6v6M9 9h6"/>398 </svg>399 </div>400 401 <!-- Bottom ad bar -->402 <div class="ad-bar">403 <div class="img-ph">[IMG: Call Icon]</div>404 <div class="ad-text">405 <div class="ad-title">Speed Dial Widget</div>406 <div class="ad-sub">Just tap & dial</div>407 </div>408 <div class="avatars">409 <div class="avatar">[IMG: Contact]</div>410 <div class="avatar">[IMG: Contact]</div>411 <div class="avatar">[IMG: Contact]</div>412 </div>413 </div>414 415 <!-- Gesture bar -->416 <div class="gesture"></div>417</div>418</body>419</html>