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 Sorted Modal</title>7<style>8 body { margin:0; padding:0; background: transparent; }9 #render-target {10 width:1080px; height:2400px;11 position:relative; overflow:hidden;12 background:#f6f7fb;13 font-family: Arial, Helvetica, sans-serif;14 color:#222;15 }16 17 /* Status bar */18 .status {19 position:absolute; top:0; left:0; right:0;20 height:120px;21 display:flex; align-items:center; justify-content:space-between;22 padding:0 40px;23 color:#111;24 font-weight:600;25 font-size:44px;26 }27 .status-icons { display:flex; align-items:center; gap:24px; color:#555; }28 .battery {29 display:flex; align-items:center; gap:12px; color:#555; font-size:38px;30 }31 .icon { width:44px; height:44px; display:inline-block; }32 33 /* Content behind modal */34 .chips {35 position:absolute; top:160px; left:40px; right:40px;36 display:flex; gap:24px;37 }38 .chip {39 padding:18px 32px;40 border-radius:28px;41 background:#e9eef5;42 color:#4a4a4a;43 font-size:36px;44 }45 .chip.active { background:#2e6bf7; color:#fff; }46 .more-dot {47 margin-left:auto; width:72px; height:72px;48 display:flex; align-items:center; justify-content:center;49 border-radius:36px; background:#e9eef5;50 }51 52 .section-title {53 position:absolute; top:300px; left:40px;54 font-weight:700; font-size:54px; color:#333;55 display:flex; align-items:center; gap:16px;56 }57 .task-card {58 position:absolute; top:420px; left:40px; right:40px;59 background:#fff; border-radius:28px; box-shadow:0 2px 8px rgba(0,0,0,0.08);60 padding:36px 32px;61 display:flex; align-items:center; gap:28px;62 }63 .checkbox {64 width:48px; height:48px; border-radius:24px; border:3px solid #bbb;65 }66 .task-info { flex:1; }67 .task-title { font-size:42px; color:#333; }68 .task-date { font-size:34px; color:#888; margin-top:8px; }69 .flag {70 width:48px; height:48px; border-radius:8px; background:#eaeef6;71 display:flex; align-items:center; justify-content:center;72 }73 74 /* Floating action button */75 .fab {76 position:absolute; right:64px; bottom:420px;77 width:140px; height:140px; border-radius:70px;78 background:#2e6bf7; color:#fff;79 display:flex; align-items:center; justify-content:center;80 box-shadow:0 12px 24px rgba(0,0,0,0.25);81 font-size:88px; line-height:0;82 }83 84 /* Bottom navigation */85 .bottom-nav {86 position:absolute; left:0; right:0; bottom:180px;87 height:220px; background:#fff; border-top-left-radius:28px; border-top-right-radius:28px;88 box-shadow:0 -4px 12px rgba(0,0,0,0.06);89 display:flex; align-items:flex-end; justify-content:space-around;90 padding-bottom:28px;91 }92 .nav-item { width:240px; text-align:center; color:#808080; }93 .nav-item .label { font-size:34px; margin-top:8px; }94 .nav-item.active { color:#2e6bf7; }95 .home-indicator {96 position:absolute; left:50%; transform:translateX(-50%);97 bottom:92px; width:260px; height:16px; border-radius:8px; background:#e0e0e0;98 }99 .red-dot {100 position:absolute; left:120px; bottom:330px;101 width:16px; height:16px; background:#e03a3a; border-radius:8px;102 }103 104 /* Modal overlay */105 .overlay {106 position:absolute; inset:0; background:rgba(0,0,0,0.45);107 }108 .modal {109 position:absolute; left:50%; transform:translateX(-50%);110 top:620px; width:940px;111 background:#fff; border-radius:44px;112 box-shadow:0 24px 48px rgba(0,0,0,0.35);113 padding:48px 48px 60px;114 }115 .modal h2 {116 margin:0 0 36px 0; font-size:48px; color:#222; font-weight:800;117 }118 .option {119 display:flex; align-items:center; gap:28px;120 padding:26px 0;121 font-size:40px; color:#333;122 }123 .radio {124 width:50px; height:50px; border-radius:25px;125 border:3px solid #b9b9b9; position:relative; flex:0 0 50px;126 background:#fff;127 }128 .radio.selected { border-color:#2e6bf7; }129 .radio.selected::after {130 content:""; position:absolute; left:50%; top:50%;131 width:24px; height:24px; border-radius:12px; background:#2e6bf7;132 transform:translate(-50%, -50%);133 }134 .modal .footer {135 display:flex; justify-content:flex-end; margin-top:20px;136 }137 .select-link {138 color:#6fa3ff; font-weight:700; font-size:42px; letter-spacing:0.5px;139 }140</style>141</head>142<body>143<div id="render-target">144 145 <!-- Status bar -->146 <div class="status">147 <div>12:31</div>148 <div class="status-icons">149 <!-- bell -->150 <svg class="icon" viewBox="0 0 24 24">151 <path d="M12 2c-3 0-5 2-5 5v4l-2 3h14l-2-3V7c0-3-2-5-5-5z" fill="#666"/>152 </svg>153 <!-- trophy -->154 <svg class="icon" viewBox="0 0 24 24">155 <path d="M5 4h14v3c0 4-3 7-7 7S5 11 5 7V4zM10 15h4v3h-4z" fill="#666"/>156 </svg>157 <!-- check -->158 <svg class="icon" viewBox="0 0 24 24">159 <path d="M20 6l-11 11-5-5 2-2 3 3 9-9z" fill="#666"/>160 </svg>161 <!-- pencil -->162 <svg class="icon" viewBox="0 0 24 24">163 <path d="M3 17l11-11 4 4-11 11H3v-4z" fill="#666"/>164 </svg>165 <!-- twitter-like -->166 <svg class="icon" viewBox="0 0 24 24">167 <path d="M22 5c-1 1-2 1-3 1 1-1 1-2 1-3-1 1-2 2-4 2-2 0-4 2-4 4 0 .3 0 .7.1 1-3 0-6-2-8-4-.3.6-.5 1.3-.5 2 0 2 1 3 3 4-1 0-2-.3-2-.8 0 2 2 3 3 3-.6.2-1.3.2-2 .1 1 1 2 2 4 2-2 1-4 2-7 2h-.9c2 1 4 2 7 2 8 0 12-7 12-13v-.6c.8-.6 1.5-1.3 2-2.1z" fill="#666"/>168 </svg>169 <!-- dot -->170 <svg class="icon" viewBox="0 0 24 24">171 <circle cx="12" cy="12" r="3" fill="#666"/>172 </svg>173 </div>174 <div class="battery">175 <svg class="icon" viewBox="0 0 28 18">176 <rect x="1" y="3" width="22" height="12" rx="2" fill="#666"></rect>177 <rect x="24" y="7" width="3" height="4" fill="#666"></rect>178 <rect x="3" y="5" width="16" height="8" fill="#fff"></rect>179 </svg>180 </div>181 </div>182 183 <!-- Chips row -->184 <div class="chips">185 <div class="chip">All</div>186 <div class="chip">Work</div>187 <div class="chip active">Personal</div>188 <div class="chip">Wishlist</div>189 <div class="more-dot">190 <svg width="30" height="30" viewBox="0 0 8 20">191 <circle cx="4" cy="4" r="3" fill="#666"></circle>192 <circle cx="4" cy="10" r="3" fill="#666"></circle>193 <circle cx="4" cy="16" r="3" fill="#666"></circle>194 </svg>195 </div>196 </div>197 198 <!-- Section and a task card -->199 <div class="section-title">Future200 <svg width="30" height="30" viewBox="0 0 24 24">201 <path d="M6 10l6 6 6-6" fill="#666"/>202 </svg>203 </div>204 <div class="task-card">205 <div class="checkbox"></div>206 <div class="task-info">207 <div class="task-title">Order a new car key</div>208 <div class="task-date">08-05</div>209 </div>210 <div class="flag">211 <svg width="32" height="32" viewBox="0 0 24 24">212 <path d="M6 4v16M8 4h8l-2 3 2 3H8z" fill="#8ea0c6"/>213 </svg>214 </div>215 </div>216 217 <!-- Floating action button -->218 <div class="fab">+</div>219 220 <!-- Bottom navigation -->221 <div class="bottom-nav">222 <div class="nav-item">223 <svg width="64" height="64" viewBox="0 0 24 24">224 <path d="M3 6h18v3H3zM3 11h18v3H3zM3 16h12v3H3z" fill="#808080"/>225 </svg>226 <div class="label">Menu</div>227 </div>228 <div class="nav-item active">229 <svg width="64" height="64" viewBox="0 0 24 24">230 <path d="M5 5h14v14H5zM8 8h8v8H8z" fill="#2e6bf7"/>231 </svg>232 <div class="label">Tasks</div>233 </div>234 <div class="nav-item">235 <svg width="64" height="64" viewBox="0 0 24 24">236 <path d="M7 4h10v4H7zM5 8h14v12H5zM9 12h6v6H9z" fill="#808080"/>237 </svg>238 <div class="label">Calendar</div>239 </div>240 <div class="nav-item">241 <svg width="64" height="64" viewBox="0 0 24 24">242 <path d="M12 6a4 4 0 110 8 4 4 0 010-8zm-7 12c0-4 3-6 7-6s7 2 7 6H5z" fill="#808080"/>243 </svg>244 <div class="label">Mine</div>245 </div>246 </div>247 <div class="home-indicator"></div>248 <div class="red-dot"></div>249 250 <!-- Modal overlay and sheet -->251 <div class="overlay"></div>252 <div class="modal">253 <h2>Tasks Sorted by</h2>254 255 <div class="option">256 <span class="radio selected"></span>257 <span>Due Date & Time</span>258 </div>259 260 <div class="option">261 <span class="radio"></span>262 <span>Task Create Time (Latest at the bottom)</span>263 </div>264 265 <div class="option">266 <span class="radio"></span>267 <span>Task Create Time (Latest at the top)</span>268 </div>269 270 <div class="option">271 <span class="radio"></span>272 <span>Alphabetical A-Z</span>273 </div>274 275 <div class="option">276 <span class="radio"></span>277 <span>Alphabetical Z-A</span>278 </div>279 280 <div class="option">281 <span class="radio"></span>282 <span>Manual (Long press to order)</span>283 </div>284 285 <div class="footer">286 <span class="select-link">SELECT</span>287 </div>288 </div>289 290</div>291</body>292</html>