GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Task Detail UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #0f0f10;14 color: #fff;15 }16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 110px;22 color: #eaeaea;23 padding: 0 40px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 font-weight: 600;28 letter-spacing: 0.5px;29 }30 .status-right {31 display: flex;32 align-items: center;33 gap: 22px;34 }35 .icon-svg { width: 38px; height: 38px; opacity: 0.9; }36 /* Header */37 .page {38 position: absolute;39 top: 120px;40 left: 0;41 width: 100%;42 padding: 0 40px;43 }44 .top-title {45 display: flex;46 align-items: center;47 justify-content: space-between;48 margin-top: 18px;49 margin-bottom: 30px;50 }51 .title-text {52 font-size: 54px;53 font-weight: 800;54 }55 .title-actions {56 display: flex; gap: 30px; align-items: center;57 }58 .action-btn {59 width: 60px; height: 60px; border-radius: 14px; background: #1c1c1f; display: flex; align-items: center; justify-content: center;60 }61 /* list items */62 .item {63 display: flex;64 align-items: flex-start;65 gap: 28px;66 padding: 28px 0;67 border-bottom: 1px solid #1e1e22;68 }69 .checkbox {70 width: 48px; height: 48px; border-radius: 50%; border: 3px solid #5f6670;71 margin-top: 4px;72 }73 .item-content { flex: 1; }74 .item-title { font-size: 44px; font-weight: 700; }75 .meta { display: flex; align-items: center; gap: 14px; margin-top: 8px; color: #c3c3c3; font-size: 32px; }76 .calendar-icon { width: 34px; height: 34px; opacity: 0.8; }77 .section-header {78 display: flex; align-items: center; justify-content: space-between;79 margin-top: 36px; margin-bottom: 16px; color: #d9d9d9; font-size: 42px; font-weight: 800;80 }81 .section-header .small { font-size: 40px; font-weight: 700; color: #cfcfcf; }82 .collapse-icon { transform: rotate(180deg); opacity: 0.8; }83 .gray { color: #9da3ad; }84 /* Bottom sheet */85 .sheet {86 position: absolute;87 left: 0;88 bottom: 0;89 width: 1080px;90 height: 1250px;91 background: #161617;92 border-top-left-radius: 30px;93 border-top-right-radius: 30px;94 box-shadow: 0 -20px 60px rgba(0,0,0,0.6);95 }96 .sheet-handle {97 position: absolute; top: 18px; left: 50%;98 width: 120px; height: 12px; border-radius: 10px; background: #4a4a4f; transform: translateX(-50%);99 }100 .sheet-inner {101 padding: 70px 40px 160px 40px;102 }103 .crumb {104 display: flex; align-items: center; justify-content: space-between; color: #c9c9c9; font-size: 38px; margin-bottom: 40px;105 }106 .crumb-left { display: flex; align-items: center; gap: 18px; }107 .crumb-dot { width: 16px; height: 16px; background: #a5a5a5; border-radius: 50%; }108 .task-row { display: flex; align-items: flex-start; gap: 28px; }109 .task-title { font-size: 56px; font-weight: 800; }110 .sheet-meta { margin-top: 26px; display: flex; align-items: center; gap: 16px; color: #d7d7d7; font-size: 36px; }111 .chips { margin-top: 40px; display: flex; gap: 26px; flex-wrap: wrap; }112 .chip {113 background: #1f1f22; border: 1px solid #2b2b30; color: #eaeaea;114 padding: 22px 30px; border-radius: 16px; font-size: 36px; display: inline-flex; align-items: center; gap: 16px;115 }116 .pro { background: #2a2a30; color: #f6b05c; }117 .subtask {118 margin-top: 60px; display: flex; align-items: center; gap: 20px; color: #ffffff; font-size: 44px; font-weight: 700;119 }120 .plus {121 width: 56px; height: 56px; border-radius: 50%; background: #2a2a2e; display: flex; align-items: center; justify-content: center; font-size: 42px;122 }123 /* Comment bar at very bottom of screen */124 .comment-bar {125 position: absolute; bottom: 32px; left: 30px; right: 30px;126 height: 120px; background: #1b1b1f; border-radius: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; color: #bcbcbc; font-size: 38px; border: 1px solid #2b2b32;127 }128 .paperclip {129 width: 44px; height: 44px; opacity: 0.85;130 }131</style>132</head>133<body>134<div id="render-target">135 <!-- Status Bar -->136 <div class="status-bar">137 <div>3:43</div>138 <div class="status-right">139 <!-- Simple icons -->140 <svg class="icon-svg" viewBox="0 0 24 24">141 <path fill="#eaeaea" d="M12 20c-3-3.5-6.2-5.1-9.8-5.2L2 13c4.4-.1 8.5 1.6 10 3 1.4-1.4 5.6-3 10-3l-.2 1.8c-3.6.1-6.8 1.7-9.8 5.2z"/>142 </svg>143 <svg class="icon-svg" viewBox="0 0 24 24">144 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#eaeaea" stroke-width="2"/>145 <rect x="20" y="10" width="2" height="4" fill="#eaeaea"/>146 <rect x="4" y="8" width="10" height="8" fill="#eaeaea"/>147 </svg>148 <svg class="icon-svg" viewBox="0 0 24 24">149 <path fill="#eaeaea" d="M12 4l7 16H5z"/>150 </svg>151 </div>152 </div>153 154 <!-- Page Content -->155 <div class="page">156 <div class="top-title">157 <div class="title-text">My work 🎯</div>158 <div class="title-actions">159 <div class="action-btn">160 <svg class="icon-svg" viewBox="0 0 24 24">161 <circle cx="12" cy="8" r="4" fill="#eaeaea"/>162 <path d="M3 20c1.5-4.5 16.5-4.5 18 0" fill="none" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>163 </svg>164 </div>165 <div class="action-btn">166 <svg class="icon-svg" viewBox="0 0 24 24">167 <circle cx="5" cy="12" r="2" fill="#eaeaea"/>168 <circle cx="12" cy="12" r="2" fill="#eaeaea"/>169 <circle cx="19" cy="12" r="2" fill="#eaeaea"/>170 </svg>171 </div>172 </div>173 </div>174 175 <!-- First task -->176 <div class="item">177 <div class="checkbox"></div>178 <div class="item-content">179 <div class="item-title">women empowerment</div>180 <div class="meta">181 <svg class="calendar-icon" viewBox="0 0 24 24">182 <rect x="3" y="5" width="18" height="16" rx="2" ry="2" fill="none" stroke="#c3c3c3" stroke-width="2"/>183 <path d="M3 9h18" stroke="#c3c3c3" stroke-width="2"/>184 </svg>185 <span>29 Aug 1:00PM</span>186 </div>187 </div>188 </div>189 190 <!-- Section header -->191 <div class="section-header">192 <div class="small">Routines ⤴️ 2</div>193 <div style="display:flex; align-items:center; gap:24px;">194 <svg class="calendar-icon collapse-icon" viewBox="0 0 24 24">195 <path d="M7 10l5 5 5-5" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>196 </svg>197 <svg class="calendar-icon" viewBox="0 0 24 24">198 <circle cx="12" cy="12" r="2" fill="#cfcfcf"/>199 <circle cx="5" cy="12" r="2" fill="#cfcfcf"/>200 <circle cx="19" cy="12" r="2" fill="#cfcfcf"/>201 </svg>202 </div>203 </div>204 205 <!-- Another task -->206 <div class="item" style="border-bottom:none;">207 <div class="checkbox" style="border-color:#4d78ff;"></div>208 <div class="item-content">209 <div class="item-title">Review my day and plan ahead</div>210 <div class="meta">211 <svg class="calendar-icon" viewBox="0 0 24 24">212 <rect x="3" y="5" width="18" height="16" rx="2" ry="2" fill="none" stroke="#c3c3c3" stroke-width="2"/>213 <path d="M3 9h18" stroke="#c3c3c3" stroke-width="2"/>214 </svg>215 <span>Tomorrow 5:00PM</span>216 <svg class="calendar-icon" viewBox="0 0 24 24">217 <path d="M12 6l4 4-4 4" stroke="#c3c3c3" stroke-width="2" fill="none" stroke-linecap="round"/>218 </svg>219 </div>220 </div>221 </div>222 </div>223 224 <!-- Bottom sheet detail -->225 <div class="sheet">226 <div class="sheet-handle"></div>227 <div class="sheet-inner">228 <div class="crumb">229 <div class="crumb-left">230 <div class="crumb-dot"></div>231 <div>My work 🎯</div>232 <div class="gray">›</div>233 </div>234 <svg class="calendar-icon" viewBox="0 0 24 24">235 <circle cx="12" cy="12" r="2" fill="#cfcfcf"/>236 <circle cx="5" cy="12" r="2" fill="#cfcfcf"/>237 <circle cx="19" cy="12" r="2" fill="#cfcfcf"/>238 </svg>239 </div>240 241 <div class="task-row">242 <div class="checkbox"></div>243 <div style="flex:1;">244 <div class="task-title">women empowerment</div>245 <div class="sheet-meta">246 <svg class="calendar-icon" viewBox="0 0 24 24">247 <rect x="3" y="5" width="18" height="16" rx="2" ry="2" fill="none" stroke="#d7d7d7" stroke-width="2"/>248 <path d="M3 9h18" stroke="#d7d7d7" stroke-width="2"/>249 </svg>250 <span>29 Aug 1:00PM</span>251 </div>252 253 <div class="chips">254 <div class="chip">255 <svg class="calendar-icon" viewBox="0 0 24 24">256 <path d="M5 12h14" stroke="#eaeaea" stroke-width="2"/>257 <path d="M5 6h14M5 18h14" stroke="#eaeaea" stroke-width="2"/>258 </svg>259 <span>Priority</span>260 </div>261 <div class="chip">262 <svg class="calendar-icon" viewBox="0 0 24 24">263 <path d="M4 20l8-16 8 16z" fill="none" stroke="#eaeaea" stroke-width="2"/>264 </svg>265 <span>Label</span>266 </div>267 <div class="chip pro">268 <svg class="calendar-icon" viewBox="0 0 24 24">269 <circle cx="12" cy="12" r="8" fill="none" stroke="#f6b05c" stroke-width="2"/>270 <path d="M12 6v6l4 2" stroke="#f6b05c" stroke-width="2" fill="none"/>271 </svg>272 <span>Reminders</span>273 <span style="margin-left:6px; color:#f6b05c; font-weight:700;">PRO</span>274 </div>275 <div class="chip">276 <svg class="calendar-icon" viewBox="0 0 24 24">277 <path d="M12 3C7 3 3 7 3 12s4 9 9 9 9-4 9-9-4-9-9-9zm0 6a3 3 0 110 6 3 3 0 010-6z" fill="none" stroke="#eaeaea" stroke-width="2"/>278 </svg>279 <span>Location</span>280 </div>281 </div>282 283 <div class="subtask">284 <div class="plus">+</div>285 <div>Add sub-task</div>286 </div>287 </div>288 </div>289 </div>290 </div>291 292 <!-- Comment input -->293 <div class="comment-bar">294 <div>Add a comment</div>295 <svg class="paperclip" viewBox="0 0 24 24">296 <path d="M7 13l6-6a4 4 0 115.7 5.7l-8 8a6 6 0 11-8.5-8.5l9-9" fill="none" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>297 </svg>298 </div>299</div>300</body>301</html>