GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Tasks Sorted Modal</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #F6F7F9;12 box-shadow: 0 8px 30px rgba(0,0,0,0.25);13 }14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0;17 width: 1080px; height: 120px;18 padding: 0 36px;19 display: flex; align-items: center; justify-content: space-between;20 color: #111; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;21 font-size: 36px; letter-spacing: 0.3px;22 background: transparent;23 }24 .status-icons { display: flex; align-items: center; gap: 22px; }25 .icon-dot { width: 12px; height: 12px; background: #2D2D2D; border-radius: 50%; display: inline-block; opacity: 0.8; }26 .battery {27 width: 40px; height: 22px; border: 3px solid #2D2D2D; border-radius: 6px; position: relative;28 }29 .battery::after {30 content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #2D2D2D; border-radius: 2px;31 }32 .battery .level { position: absolute; left: 3px; top: 3px; height: 14px; width: 26px; background: #2D2D2D; border-radius: 2px; }33 /* Chips row */34 .chip-row {35 position: absolute; top: 150px; left: 40px; right: 40px;36 display: flex; gap: 24px; align-items: center;37 }38 .chip {39 padding: 18px 28px; border-radius: 28px; font-size: 34px;40 color: #1f2a37; background: #EDEFF3;41 }42 .chip.active { background: #3D74FF; color: #fff; }43 .more-vert {44 width: 54px; height: 54px; border-radius: 27px; background: #EDEFF3;45 display: flex; align-items: center; justify-content: center;46 }47 /* Section title */48 .section-title {49 position: absolute; top: 260px; left: 40px;50 font-size: 44px; font-weight: 700; color: #2A2A2A; display: flex; align-items: center; gap: 14px;51 }52 .caret-up {53 width: 26px; height: 26px; border-left: 5px solid #777; border-top: 5px solid #777;54 transform: rotate(45deg); margin-top: 6px;55 }56 /* Task card */57 .task-card {58 position: absolute; top: 340px; left: 40px; right: 40px;59 background: #FFFFFF; border-radius: 30px; box-shadow: 0 8px 20px rgba(0,0,0,0.06);60 padding: 34px; display: flex; align-items: flex-start; gap: 26px;61 }62 .task-radio {63 width: 46px; height: 46px; border-radius: 50%; border: 4px solid #A9ADB3; box-sizing: border-box;64 margin-top: 10px;65 }66 .task-content { flex: 1; }67 .task-title { font-size: 42px; color: #2A2A2A; }68 .task-sub { font-size: 32px; color: #8B8F96; margin-top: 10px; }69 .bookmark {70 width: 52px; height: 52px; border-radius: 10px; display: flex; align-items: center; justify-content: center;71 }72 /* Bottom nav */73 .bottom-bar {74 position: absolute; left: 0; bottom: 110px; width: 1080px; height: 160px;75 background: #FFFFFF; border-top: 1px solid #E5E7EB;76 display: flex; justify-content: space-around; align-items: center;77 }78 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 32px; color: #68707A; }79 .nav-item.active { color: #3D74FF; }80 /* FAB */81 .fab {82 position: absolute; right: 80px; bottom: 360px;83 width: 132px; height: 132px; background: #2E6BFF; border-radius: 50%;84 box-shadow: 0 12px 24px rgba(0,0,0,0.25);85 display: flex; align-items: center; justify-content: center;86 }87 /* Gesture bar */88 .gesture {89 position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);90 width: 280px; height: 14px; background: #D1D5DB; border-radius: 8px;91 }92 /* Overlay + Modal */93 .overlay {94 position: absolute; inset: 0; background: rgba(0,0,0,0.45);95 }96 .modal {97 position: absolute; left: 60px; top: 760px; width: 960px; height: 1050px;98 background: #FFFFFF; border-radius: 40px; box-shadow: 0 40px 80px rgba(0,0,0,0.45);99 padding: 50px;100 }101 .modal-title { font-size: 48px; font-weight: 800; color: #1F2937; margin-bottom: 34px; }102 .option {103 display: flex; align-items: center; gap: 34px;104 padding: 30px 10px; border-radius: 18px;105 }106 .radio {107 width: 48px; height: 48px; border-radius: 50%;108 border: 5px solid #AAB0B6; box-sizing: border-box; position: relative;109 }110 .radio.selected { border-color: #3D74FF; }111 .radio.selected::after {112 content: ""; position: absolute; left: 50%; top: 50%;113 width: 22px; height: 22px; border-radius: 50%; background: #3D74FF;114 transform: translate(-50%, -50%);115 }116 .option-label { font-size: 40px; color: #39424E; }117 .select-btn {118 position: absolute; right: 40px; bottom: 36px; color: #6EA1FF;119 font-size: 44px; font-weight: 700;120 }121</style>122</head>123<body>124<div id="render-target">125 <!-- Status bar -->126 <div class="status-bar">127 <div>12:30</div>128 <div class="status-icons">129 <!-- a couple of simple status glyphs -->130 <svg width="34" height="34"><circle cx="17" cy="17" r="12" fill="none" stroke="#2D2D2D" stroke-width="3"/></svg>131 <svg width="34" height="34"><path d="M6 18 L14 26 L28 10" stroke="#2D2D2D" stroke-width="4" fill="none" stroke-linecap="round"/></svg>132 <svg width="34" height="34"><rect x="6" y="6" width="22" height="22" rx="6" fill="none" stroke="#2D2D2D" stroke-width="3"/></svg>133 <div class="icon-dot"></div>134 <div class="battery"><div class="level"></div></div>135 </div>136 </div>137 138 <!-- Chip filters -->139 <div class="chip-row">140 <div class="chip">All</div>141 <div class="chip">Work</div>142 <div class="chip active">Personal</div>143 <div class="chip">Wishlist</div>144 <div class="more-vert">145 <svg width="26" height="26">146 <circle cx="13" cy="6" r="3" fill="#6B7280"></circle>147 <circle cx="13" cy="13" r="3" fill="#6B7280"></circle>148 <circle cx="13" cy="20" r="3" fill="#6B7280"></circle>149 </svg>150 </div>151 </div>152 153 <!-- Section title -->154 <div class="section-title">155 <div>Future</div>156 <div class="caret-up"></div>157 </div>158 159 <!-- Sample task card -->160 <div class="task-card">161 <div class="task-radio"></div>162 <div class="task-content">163 <div class="task-title">Order a new car key</div>164 <div class="task-sub">08-05</div>165 </div>166 <div class="bookmark">167 <svg width="36" height="36" viewBox="0 0 24 24">168 <path d="M6 3h12v18l-6-4-6 4z" fill="#8A8F99"/>169 </svg>170 </div>171 </div>172 173 <!-- Bottom navigation -->174 <div class="bottom-bar">175 <div class="nav-item">176 <svg width="48" height="48" viewBox="0 0 24 24">177 <path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h10v2H4z" fill="#8A8F99"/>178 </svg>179 <div>Menu</div>180 </div>181 <div class="nav-item active">182 <svg width="48" height="48" viewBox="0 0 24 24">183 <path d="M4 5h16v3H4zm0 6h16v3H4zm0 6h16v3H4z" fill="#3D74FF"/>184 </svg>185 <div>Tasks</div>186 </div>187 <div class="nav-item">188 <svg width="48" height="48" viewBox="0 0 24 24">189 <rect x="3" y="4" width="18" height="16" rx="3" fill="none" stroke="#8A8F99" stroke-width="2"/>190 <rect x="6" y="10" width="6" height="2" fill="#8A8F99"/>191 <rect x="6" y="14" width="10" height="2" fill="#8A8F99"/>192 </svg>193 <div>Calendar</div>194 </div>195 <div class="nav-item">196 <svg width="48" height="48" viewBox="0 0 24 24">197 <circle cx="12" cy="8" r="4" fill="#8A8F99"></circle>198 <path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="none" stroke="#8A8F99" stroke-width="2"/>199 </svg>200 <div>Mine</div>201 </div>202 </div>203 204 <!-- Floating action button -->205 <div class="fab">206 <svg width="56" height="56" viewBox="0 0 24 24">207 <path d="M11 5h2v14h-2zM5 11h14v2H5z" fill="#FFFFFF"/>208 </svg>209 </div>210 211 <!-- Gesture bar -->212 <div class="gesture"></div>213 214 <!-- Dim overlay -->215 <div class="overlay"></div>216 217 <!-- Modal bottom sheet -->218 <div class="modal">219 <div class="modal-title">Tasks Sorted by</div>220 221 <div class="option">222 <div class="radio"></div>223 <div class="option-label">Due Date & Time</div>224 </div>225 226 <div class="option">227 <div class="radio"></div>228 <div class="option-label">Task Create Time (Latest at the bottom)</div>229 </div>230 231 <div class="option">232 <div class="radio"></div>233 <div class="option-label">Task Create Time (Latest at the top)</div>234 </div>235 236 <div class="option">237 <div class="radio"></div>238 <div class="option-label">Alphabetical A-Z</div>239 </div>240 241 <div class="option">242 <div class="radio selected"></div>243 <div class="option-label">Alphabetical Z-A</div>244 </div>245 246 <div class="option">247 <div class="radio"></div>248 <div class="option-label">Manual (Long press to order)</div>249 </div>250 251 <div class="select-btn">SELECT</div>252 </div>253</div>254</body>255</html>