GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Tasks Reminder UI</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: "Segoe UI", Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#0d1f3f;10 color:#fff;11 }12 13 /* Top status bar */14 .status-bar {15 position:absolute; top:0; left:0; width:100%; height:120px;16 background:#153a6f;17 display:flex; align-items:center; padding:0 32px; box-sizing:border-box;18 font-weight:600; letter-spacing:0.5px;19 }20 .status-left { display:flex; align-items:center; gap:24px; }21 .status-right { margin-left:auto; display:flex; align-items:center; gap:24px; }22 .dot { width:16px; height:16px; background:#fff; border-radius:50%; opacity:0.9; }23 .wifi, .battery {24 width:34px; height:24px;25 }26 .battery {27 border:2px solid #fff; border-radius:4px; position:relative;28 }29 .battery::after {30 content:""; position:absolute; right:-6px; top:6px; width:6px; height:12px; background:#fff; border-radius:1px;31 }32 .battery .level { position:absolute; left:2px; top:2px; bottom:2px; width:22px; background:#fff; }33 .wifi {34 border-left:4px solid transparent;35 }36 .wifi svg { width:34px; height:24px; }37 38 /* App bar */39 .app-bar {40 position:absolute; top:120px; left:0; width:100%; height:140px;41 background:#133766;42 display:flex; align-items:center; padding:0 30px; box-sizing:border-box;43 }44 .hamburger {45 width:60px; height:60px; display:flex; align-items:center; justify-content:center;46 }47 .hamburger svg { width:44px; height:44px; fill:#fff; }48 .title { font-size:56px; font-weight:700; margin-left:16px; }49 .actions { margin-left:auto; display:flex; gap:36px; }50 .action-icon { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }51 .action-icon svg { width:56px; height:56px; stroke:#fff; fill:none; stroke-width:5; }52 53 /* Content area */54 .content {55 position:absolute; top:260px; left:0; width:100%; bottom:0;56 background:#121417;57 padding-bottom:240px;58 }59 60 .section-label {61 height:110px; display:flex; align-items:center; padding:0 32px;62 background:#9a7b10; font-size:44px; font-weight:700; color:#fff;63 }64 65 .task-card {66 margin:24px 24px; border-radius:12px; background:#1b1f22; padding:26px 28px;67 box-shadow:0 6px 14px rgba(0,0,0,0.35);68 }69 .task-title { font-size:54px; font-weight:700; margin-bottom:18px; }70 .task-meta { display:flex; flex-wrap:wrap; gap:26px; color:#cfd8dc; font-size:34px; align-items:center; }71 .meta-item { display:inline-flex; align-items:center; gap:12px; }72 .meta-item svg { width:34px; height:34px; fill:#cfd8dc; }73 74 /* Floating Add button */75 .fab {76 position:absolute; right:36px; bottom:300px; width:140px; height:140px; border-radius:50%;77 background:#2d5fbf; display:flex; align-items:center; justify-content:center;78 box-shadow:0 10px 24px rgba(0,0,0,0.45);79 }80 .fab svg { width:80px; height:80px; stroke:#fff; stroke-width:6; fill:none; }81 82 /* Bottom ad banner */83 .ad-banner {84 position:absolute; bottom:0; left:0; width:100%; height:200px;85 background:#0f1620; border-top:1px solid #2b3440; display:flex; align-items:center; padding:0 24px; box-sizing:border-box;86 }87 .ad-icon {88 width:150px; height:150px; background:#E0E0E0; border:1px solid #BDBDBD;89 display:flex; align-items:center; justify-content:center; color:#757575; border-radius:26px;90 }91 .ad-text { margin-left:24px; font-size:44px; }92 .ad-sub { font-size:36px; color:#9fd0ff; margin-top:6px; }93 .ad-open {94 margin-left:auto; background:#1fb561; color:#fff; font-weight:700;95 padding:24px 48px; border-radius:16px; font-size:44px;96 }97 98 /* Modal dialog */99 .modal {100 position:absolute; left:30px; right:30px; top:780px;101 z-index:10;102 }103 .dialog {104 width:1020px; margin:0 auto; border-radius:16px; overflow:hidden;105 background:#2b2f35; box-shadow:0 20px 50px rgba(0,0,0,0.6);106 color:#e9eef2;107 }108 .dialog-header {109 background:#3b7ff1; height:110px; display:flex; align-items:center; padding:0 24px;110 }111 .close-btn {112 width:60px; height:60px; color:#fff; font-size:48px; display:flex; align-items:center; justify-content:center; margin-right:18px;113 }114 .dialog-title { font-size:48px; font-weight:700; }115 .save-btn {116 margin-left:auto; background:#fff; color:#2d5fbf; font-weight:800;117 padding:16px 26px; border-radius:14px; font-size:40px;118 }119 120 .dialog-body { padding:16px 20px 26px 20px; }121 .row {122 display:flex; align-items:center; padding:24px 14px; border-bottom:1px solid #3a3f46; font-size:42px;123 }124 .row:last-child { border-bottom:none; }125 .row .label { flex:1; }126 .right-text { color:#7fb7ff; font-size:38px; }127 .pill {128 background:#1f2227; border-radius:12px; padding:10px 16px; font-size:36px; color:#cfd8dc;129 }130 .grey { color:#bfc7ce; }131 .red-note {132 color:#ff6a65; font-size:34px; margin-top:20px; line-height:1.4; padding:0 8px;133 }134 .got-it {135 margin-top:18px; display:flex; justify-content:flex-end;136 }137 .got-it .btn {138 background:#2a3542; color:#90caf9; padding:14px 20px; border-radius:30px; font-size:36px;139 }140 .row .icon {141 width:52px; height:52px; margin-right:16px; display:flex; align-items:center; justify-content:center;142 }143 .row .icon svg { width:48px; height:48px; fill:#b0bec5; }144 145 .arrow-right::after {146 content:"›"; color:#b0bec5; font-size:50px; margin-left:16px;147 }148 .small-x {149 color:#b0bec5; font-size:50px; margin-left:16px;150 }151 152</style>153</head>154<body>155<div id="render-target">156 157 <!-- Status Bar -->158 <div class="status-bar">159 <div class="status-left">160 <div style="font-size:42px;">6:45</div>161 <div class="dot"></div>162 <div class="dot"></div>163 <div class="dot"></div>164 <div class="dot"></div>165 <div class="dot"></div>166 </div>167 <div class="status-right">168 <div class="wifi">169 <svg viewBox="0 0 24 16">170 <path d="M12 15l3-3c-1.7-1.7-4.3-1.7-6 0l3 3zM5 8c4.2-4.2 9.8-4.2 14 0l-2 2c-3.4-3.4-8.6-3.4-12 0L5 8z" fill="#fff"/>171 </svg>172 </div>173 <div class="battery"><div class="level"></div></div>174 </div>175 </div>176 177 <!-- App Bar -->178 <div class="app-bar">179 <div class="hamburger">180 <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z" fill="#fff"/></svg>181 </div>182 <div class="title">Tasks</div>183 <div class="actions">184 <div class="action-icon">185 <svg viewBox="0 0 24 24">186 <circle cx="12" cy="12" r="9"></circle>187 <path d="M12 6v6l4 2" />188 </svg>189 </div>190 <div class="action-icon">191 <svg viewBox="0 0 24 24">192 <circle cx="12" cy="12" r="9"></circle>193 <path d="M7 12l3 3 7-7" />194 </svg>195 </div>196 <div class="action-icon">197 <svg viewBox="0 0 24 24">198 <circle cx="10" cy="10" r="6"></circle>199 <path d="M14 14l6 6" />200 </svg>201 </div>202 </div>203 </div>204 205 <!-- Content -->206 <div class="content">207 <div class="section-label">Tomorrow</div>208 209 <div class="task-card">210 <div class="task-title">Catch Subway</div>211 <div class="task-meta">212 <span class="meta-item">213 <svg viewBox="0 0 24 24"><path d="M12 7v5l4 2" /></svg>214 08:00 AM215 </span>216 <span class="meta-item">217 <svg viewBox="0 0 24 24"><path d="M6 6h12v12H6zM9 9h6v6H9z" /></svg>218 1 day219 </span>220 <span class="meta-item">221 <svg viewBox="0 0 24 24"><path d="M4 6h16v14H4zM4 10h16" /></svg>222 Thu, Sep 28, 2023223 </span>224 </div>225 </div>226 227 <div class="task-card">228 <div class="task-title">Yoga classes</div>229 <div class="task-meta">230 <span class="meta-item">231 <svg viewBox="0 0 24 24"><path d="M12 7v5l4 2" /></svg>232 06:00 PM233 </span>234 <span class="meta-item">235 <svg viewBox="0 0 24 24"><path d="M4 6h16v14H4zM4 10h16" /></svg>236 Wed, Sep 27, 2023237 </span>238 </div>239 </div>240 241 <!-- More content below to simulate list -->242 <div class="task-card" style="opacity:0.65;">243 <div class="task-title">Christmas Dinner with family</div>244 <div class="task-meta">245 <span class="meta-item">246 <svg viewBox="0 0 24 24"><path d="M12 7v5l4 2" /></svg>247 10:30 PM248 </span>249 <span class="meta-item">250 <svg viewBox="0 0 24 24"><path d="M12 3v3M4 6h16v14H4zM4 10h16" /></svg>251 Once252 </span>253 <span class="meta-item">254 <svg viewBox="0 0 24 24"><path d="M4 6h16v14H4zM4 10h16" /></svg>255 Mon, Dec 25, 2023256 </span>257 </div>258 </div>259 260 <div class="task-card" style="opacity:0.6;">261 <div class="task-title">Cooking Lunch</div>262 <div class="task-meta">263 <span class="meta-item">264 <svg viewBox="0 0 24 24"><path d="M12 7v5l4 2" /></svg>265 02:00 PM266 </span>267 <span class="meta-item">268 <svg viewBox="0 0 24 24"><path d="M12 3v3M4 6h16v14H4zM4 10h16" /></svg>269 Once270 </span>271 </div>272 </div>273 </div>274 275 <!-- Floating Action Button -->276 <div class="fab">277 <svg viewBox="0 0 24 24">278 <circle cx="12" cy="12" r="9"></circle>279 <path d="M12 8v8M8 12h8" />280 </svg>281 </div>282 283 <!-- Bottom Ad Banner -->284 <div class="ad-banner">285 <div class="ad-icon">[IMG: Omio logo]</div>286 <div style="display:flex; flex-direction:column;">287 <div class="ad-text">Omio</div>288 <div class="ad-sub">Installed</div>289 </div>290 <div class="ad-open">Open</div>291 </div>292 293 <!-- Modal -->294 <div class="modal">295 <div class="dialog">296 <div class="dialog-header">297 <div class="close-btn">✕</div>298 <div class="dialog-title">Add Reminder</div>299 <div class="save-btn">SAVE</div>300 </div>301 <div class="dialog-body">302 303 <div class="row">304 <div class="icon">305 <svg viewBox="0 0 24 24"><path d="M12 6v6l4 2"/></svg>306 </div>307 <div class="label">Remind me to..</div>308 <div style="width:40px;"></div>309 </div>310 311 <div class="row">312 <div class="icon">313 <svg viewBox="0 0 24 24"><path d="M4 6h16v14H4zM4 10h16"/></svg>314 </div>315 <div class="label grey">Write short note</div>316 </div>317 318 <div class="row">319 <div class="icon">320 <svg viewBox="0 0 24 24"><path d="M4 6h16v14H4zM4 10h16"/></svg>321 </div>322 <div class="label">Wed, Sep 27, 2023</div>323 <div class="small-x">✕</div>324 </div>325 326 <div class="row">327 <div class="icon">328 <svg viewBox="0 0 24 24"><path d="M12 6v6l4 2"/></svg>329 </div>330 <div class="label">06:55 PM</div>331 <div class="right-text">+Add more time</div>332 <div class="small-x" style="margin-left:12px;">✕</div>333 </div>334 335 <div class="row arrow-right">336 <div class="icon">337 <svg viewBox="0 0 24 24"><path d="M12 4a8 8 0 100 16 8 8 0 000-16zm0 3v5l3 2"/></svg>338 </div>339 <div class="label">Remind me before</div>340 </div>341 342 <div class="row arrow-right">343 <div class="icon">344 <svg viewBox="0 0 24 24"><path d="M6 6h12v12H6zM9 9h6v6H9z"/></svg>345 </div>346 <div class="label">Repeat: <span class="pill">No repeat</span></div>347 </div>348 349 <div class="red-note">NOTE: You can change a Date Time picker from app settings.</div>350 351 <div class="got-it"><div class="btn">Got it</div></div>352 </div>353 </div>354 </div>355 356</div>357</body>358</html>