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>Reminder List UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #152742; /* deep navy app background */15 color: #fff;16 }17 18 /* Status bar */19 .status-bar {20 height: 100px;21 padding: 0 36px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #e9edf7;26 font-size: 40px;27 letter-spacing: 0.5px;28 }29 .status-icons { display: flex; gap: 24px; align-items: center; }30 .icon-dot {31 width: 12px; height: 12px; background:#e9edf7; border-radius:50%;32 opacity: 0.9;33 }34 .icon-wifi, .icon-battery {35 display: inline-block;36 }37 .icon-wifi svg, .icon-battery svg { display:block; }38 39 /* Toolbar with back + search */40 .toolbar {41 height: 120px;42 display: flex;43 align-items: center;44 padding: 0 28px 0 20px;45 }46 .back-btn {47 width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;48 margin-right: 12px;49 }50 .search-field {51 flex: 1;52 height: 88px;53 border-radius: 12px;54 background: rgba(255,255,255,0.08);55 color: rgba(255,255,255,0.7);56 font-size: 38px;57 display: flex; align-items: center;58 padding: 0 28px;59 }60 61 /* Filter chips */62 .filters {63 display: flex; gap: 22px;64 padding: 30px 28px;65 }66 .chip {67 border: 2px solid rgba(255,255,255,0.25);68 color: #d7deff;69 padding: 18px 28px;70 border-radius: 18px;71 font-size: 34px;72 background: transparent;73 }74 .chip.active {75 background: #FFD95C;76 color: #1b2b45;77 border-color: #FFD95C;78 font-weight: 600;79 }80 81 /* Content area (list) */82 .content {83 background: #f3f5f9;84 color: #111;85 border-top-left-radius: 32px;86 border-top-right-radius: 32px;87 padding-top: 12px;88 height: 1930px;89 }90 91 /* Ad banner placeholder */92 .ad-banner {93 margin: 12px 28px 20px 28px;94 height: 140px;95 background: #E0E0E0;96 border: 1px solid #BDBDBD;97 display: flex; align-items: center; justify-content: center;98 color: #757575;99 font-size: 34px;100 border-radius: 14px;101 }102 103 /* List items */104 .list {105 padding: 0 28px;106 }107 .item {108 display: flex;109 justify-content: space-between;110 padding: 36px 10px 32px 10px;111 border-bottom: 1px solid #e2e6ee;112 }113 .item .title {114 font-size: 50px;115 font-weight: 600;116 margin-bottom: 10px;117 }118 .item .meta {119 font-size: 34px; color: #5b6b7e; margin-bottom: 6px;120 }121 .item .sub { font-size: 32px; color: #7a8a9a; }122 .item .right { text-align: right; }123 .item .days { font-size: 34px; color: #546277; margin-bottom: 6px; }124 .star {125 display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center;126 }127 .star svg { width: 40px; height: 40px; fill: #f3c84e; }128 129 /* Dim overlay for modal */130 .dim {131 position: absolute; left:0; top:0; right:0; bottom:0;132 background: rgba(0,0,0,0.35);133 pointer-events: none;134 }135 136 /* Modal card */137 .modal-card {138 position: absolute;139 left: 80px;140 top: 980px;141 width: 920px;142 border-radius: 28px;143 overflow: hidden;144 box-shadow: 0 22px 40px rgba(0,0,0,0.4);145 }146 .modal-head {147 background: #223c66;148 color: #ffffff;149 height: 120px;150 display: flex; align-items: center; justify-content: center;151 font-size: 54px; font-weight: 600;152 position: relative;153 }154 .modal-head .share {155 position: absolute; right: 26px; top: 30px;156 }157 .modal-body {158 background: #dfe4f1;159 color: #111;160 padding: 36px 34px 24px 34px;161 position: relative;162 }163 .modal-title {164 font-size: 56px;165 font-weight: 700;166 margin-bottom: 26px;167 }168 .modal-text { font-size: 38px; color: #2d3748; margin-bottom: 16px; }169 .kebab {170 position: absolute; right: 24px; top: 34px; opacity: 0.8;171 }172 .modal-footer {173 background: #d7dced;174 display: flex;175 justify-content: space-around;176 align-items: center;177 padding: 22px 0;178 border-top: 1px solid #cad1e4;179 }180 .action {181 display: flex; align-items: center; gap: 16px;182 color: #2d3b55; font-size: 36px;183 }184 .action svg { width: 44px; height: 44px; fill: none; stroke: #2d3b55; stroke-width: 4; }185 186 /* Bottom tabs */187 .tabs {188 position: absolute; bottom: 160px; left: 0; right: 0;189 display: flex; justify-content: space-around;190 color: #1c2b45;191 font-size: 40px;192 font-weight: 700;193 }194 .tabs .inactive { color: #64748b; font-weight: 600; }195 196 /* Floating Action Button */197 .fab {198 position: absolute; right: 90px; bottom: 330px;199 width: 140px; height: 140px; border-radius: 70px;200 background: #0f2747;201 box-shadow: 0 16px 30px rgba(0,0,0,0.35);202 display: flex; align-items: center; justify-content: center;203 color: #ffffff; font-size: 80px;204 }205 206 /* Home indicator */207 .home-indicator {208 position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);209 width: 360px; height: 14px; background: #ffffff; border-radius: 8px; opacity: 0.85;210 }211</style>212</head>213<body>214<div id="render-target">215 <!-- Status bar -->216 <div class="status-bar">217 <div>3:55</div>218 <div class="status-icons">219 <div class="icon-wifi">220 <svg width="46" height="34" viewBox="0 0 46 34">221 <path d="M4 10c8-8 30-8 38 0" stroke="#e9edf7" stroke-width="4" fill="none" />222 <path d="M10 16c6-6 20-6 26 0" stroke="#e9edf7" stroke-width="4" fill="none" />223 <circle cx="23" cy="24" r="3" fill="#e9edf7"/>224 </svg>225 </div>226 <div class="icon-battery">227 <svg width="56" height="30" viewBox="0 0 56 30">228 <rect x="2" y="6" width="44" height="18" rx="3" ry="3" stroke="#e9edf7" stroke-width="3" fill="none"/>229 <rect x="6" y="9" width="28" height="12" fill="#e9edf7"/>230 <rect x="48" y="11" width="6" height="8" fill="#e9edf7"/>231 </svg>232 </div>233 </div>234 </div>235 236 <!-- Toolbar -->237 <div class="toolbar">238 <div class="back-btn">239 <svg width="48" height="48" viewBox="0 0 48 48">240 <path d="M30 10 L16 24 L30 38" stroke="#e9edf7" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>241 </svg>242 </div>243 <div class="search-field">Search...</div>244 </div>245 246 <!-- Filter chips -->247 <div class="filters">248 <div class="chip active">All</div>249 <div class="chip">Default</div>250 <div class="chip">Critical</div>251 <div class="chip">Important</div>252 <div class="chip">Favorites</div>253 </div>254 255 <!-- Main content list -->256 <div class="content">257 <div class="ad-banner">[IMG: Ad Banner - Location/Business]</div>258 259 <div class="list">260 <div class="item">261 <div>262 <div class="title">Reading</div>263 <div class="meta">17/06/2023 8:00 am</div>264 <div class="sub">Every Day</div>265 </div>266 <div class="right">267 <div class="days">in 5 days</div>268 <div class="star">269 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z"/></svg>270 </div>271 </div>272 </div>273 274 <div class="item">275 <div>276 <div class="title">Dbw team meeting</div>277 <div class="meta">18/06/2023 7:30 am</div>278 <div class="sub">One Time</div>279 </div>280 <div class="right">281 <div class="days">in 6 days</div>282 <div class="star">283 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z"/></svg>284 </div>285 </div>286 </div>287 288 <div class="item">289 <div>290 <div class="title">Nbc News</div>291 <div class="meta">19/06/2023 8:00 am</div>292 <div class="sub">One Time</div>293 </div>294 <div class="right">295 <div class="days">in 7 days</div>296 </div>297 </div>298 299 <div class="item">300 <div>301 <div class="title">Ravi</div>302 <div class="meta">20/06/2023 8:00 am</div>303 <div class="sub">One Time</div>304 </div>305 <div class="right">306 <div class="days">in 8 days</div>307 </div>308 </div>309 310 <div class="item">311 <div>312 <div class="title">Pankaj</div>313 <div class="meta">29/06/2023 3:30 pm</div>314 <div class="sub">One Time</div>315 </div>316 <div class="right">317 <div class="days">in 17 days</div>318 </div>319 </div>320 321 <div class="item">322 <div>323 <div class="title">Yoga</div>324 <div class="meta">29/06/2023 9:15 pm</div>325 <div class="sub">One Time</div>326 </div>327 <div class="right">328 <div class="days">in 17 days</div>329 </div>330 </div>331 332 <div class="item">333 <div>334 <div class="title">Remember the medicine</div>335 <div class="meta">10/07/2023 6:00 am</div>336 <div class="sub">One Time</div>337 </div>338 <div class="right">339 <div class="days">in 28 days</div>340 </div>341 </div>342 343 <div class="item">344 <div>345 <div class="title">Beembom</div>346 <div class="meta">27/07/2023 9:00 am</div>347 <div class="sub">One Time</div>348 </div>349 <div class="right">350 <div class="days">in 38 days</div>351 </div>352 </div>353 </div>354 </div>355 356 <!-- Dim overlay to simulate modal focus -->357 <div class="dim"></div>358 359 <!-- Modal card -->360 <div class="modal-card">361 <div class="modal-head">362 <div>in 7 days</div>363 <div class="share">364 <svg width="48" height="48" viewBox="0 0 48 48">365 <circle cx="10" cy="24" r="5" fill="#FFD95C"/>366 <circle cx="38" cy="12" r="5" fill="#FFD95C"/>367 <circle cx="38" cy="36" r="5" fill="#FFD95C"/>368 <path d="M14 23 L33 14 M14 25 L33 34" stroke="#FFD95C" stroke-width="4" fill="none" />369 </svg>370 </div>371 </div>372 <div class="modal-body">373 <div class="modal-title">Nbc News</div>374 <div class="modal-text"><strong>Repeat:</strong> One Time</div>375 <div class="modal-text">Scheduled for 19/06/2023 8:00 am</div>376 <div class="kebab">377 <svg width="32" height="40" viewBox="0 0 8 24">378 <circle cx="4" cy="4" r="2" fill="#333"/>379 <circle cx="4" cy="12" r="2" fill="#333"/>380 <circle cx="4" cy="20" r="2" fill="#333"/>381 </svg>382 </div>383 </div>384 <div class="modal-footer">385 <div class="action">386 <svg viewBox="0 0 24 24"><path d="M4 4 L20 20 M20 4 L4 20"/></svg>387 <span>Dismiss</span>388 </div>389 <div class="action">390 <svg viewBox="0 0 24 24"><path d="M5 13l4 4 10-10"/></svg>391 <span>Complete</span>392 </div>393 <div class="action">394 <svg viewBox="0 0 24 24"><path d="M5 19l14-14M7 7h6v6"/></svg>395 <span>Edit</span>396 </div>397 <div class="action">398 <svg viewBox="0 0 24 24"><path d="M6 6h12M8 6v12m8-12v12M10 6l1-2h2l1 2"/></svg>399 <span>Delete</span>400 </div>401 </div>402 </div>403 404 <!-- Bottom tabs -->405 <div class="tabs">406 <div>ACTIVE</div>407 <div class="inactive">COMPLETED</div>408 </div>409 410 <!-- Floating Action Button -->411 <div class="fab">+</div>412 413 <!-- Home indicator -->414 <div class="home-indicator"></div>415</div>416</body>417</html>