GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Tasks UI</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width:1080px; height:2400px;11 position:relative; overflow:hidden;12 background:#F3F7F8;13 }14 15 /* Top status area */16 .statusbar {17 height:120px;18 padding:32px 40px;19 display:flex;20 align-items:center;21 color:#6C7685;22 font-size:38px;23 }24 .statusbar .time { font-weight:600; margin-right:28px; color:#53616E; }25 .status-icon { width:44px; height:44px; margin-right:22px; opacity:0.7; }26 .status-dot { width:10px; height:10px; background:#8C97A6; border-radius:50%; margin:0 22px; opacity:0.6; }27 .clipboard { transform:translateY(2px); }28 .battery { margin-left:auto; width:50px; height:44px; opacity:0.7; }29 30 /* Chip filters */31 .chips {32 display:flex; align-items:center;33 padding:0 36px; gap:24px;34 }35 .chip {36 padding:22px 32px;37 border-radius:40px;38 font-size:38px;39 color:#6E7A89;40 background:#DFE6F0;41 }42 .chip.selected {43 background:#82A4F5; color:#FFFFFF; font-weight:600;44 }45 .chips .spacer { flex:1; }46 .icon-btn {47 width:80px; height:80px; display:flex; align-items:center; justify-content:center;48 border-radius:50%;49 }50 .icon-btn svg { width:40px; height:40px; fill:#8A95A3; }51 52 /* Section header */53 .section {54 padding:32px 40px 12px 40px;55 display:flex; align-items:center;56 color:#3A4653;57 }58 .section h2 {59 margin:0; font-size:56px; font-weight:700;60 }61 .section .chev {62 margin-left:16px; width:36px; height:36px;63 }64 65 /* Task cards */66 .list {67 padding:0 32px;68 }69 .card {70 background:#ECF2F3;71 border-radius:32px;72 margin:24px 16px;73 padding:36px 40px;74 display:flex; align-items:center;75 box-shadow: 0 2px 0 rgba(0,0,0,0.02) inset;76 }77 .check {78 width:64px; height:64px; border-radius:50%;79 border:6px solid #A7B0BC; margin-right:28px;80 background:#F3F7F8;81 }82 .card .content { flex:1; }83 .card .title {84 font-size:46px; color:#2E3742; margin-bottom:12px;85 }86 .card .date {87 font-size:32px; color:#99A3AF; letter-spacing:0.5px;88 }89 .card .flag {90 width:54px; height:54px; margin-left:24px;91 }92 .card .flag svg { width:54px; height:54px; fill:#A0A8B4; }93 94 /* Floating action button */95 .fab {96 position:absolute; right:64px; bottom:300px;97 width:156px; height:156px; border-radius:50%;98 background:#7EA6F6;99 box-shadow:0 18px 24px rgba(107,133,164,0.3);100 display:flex; align-items:center; justify-content:center;101 }102 .fab::after {103 content:"";104 position:absolute; inset:10px; border-radius:50%;105 border:12px solid rgba(255,255,255,0.35);106 }107 .fab svg { width:64px; height:64px; fill:#FFFFFF; }108 109 /* Bottom nav */110 .bottom-nav {111 position:absolute; left:0; right:0; bottom:0;112 height:220px; background:#FFFFFF;113 border-top:1px solid #E4E8EB;114 display:flex; align-items:center; justify-content:space-around;115 padding:0 20px;116 }117 .nav-item { display:flex; flex-direction:column; align-items:center; color:#96A0AC; font-size:34px; }118 .nav-item .icon { width:64px; height:64px; margin-bottom:16px; }119 .nav-item.active { color:#3F7DF2; }120 .nav-item.active .icon svg { fill:#3F7DF2; }121 .nav-item .badge {122 position:absolute; top:36px; left:140px; width:18px; height:18px; background:#FF4D4D; border-radius:50%;123 box-shadow:0 0 0 3px #FFFFFF;124 }125 126 /* Home indicator */127 .home-indicator {128 position:absolute; bottom:16px; left:50%; transform:translateX(-50%);129 width:300px; height:14px; background:#000; opacity:0.12; border-radius:8px;130 }131</style>132</head>133<body>134<div id="render-target">135 136 <!-- Status bar -->137 <div class="statusbar">138 <div class="time">12:31</div>139 <!-- small icons -->140 <svg class="status-icon clipboard" viewBox="0 0 24 24">141 <path d="M9 3h6l1 2h2v15H6V5h2l1-2zm1 4v2h4V7h-4z"/>142 </svg>143 <svg class="status-icon" viewBox="0 0 24 24">144 <path d="M12 2a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm-1 13l6-6-1.4-1.4L11 11.2 8.4 8.6 7 10l4 5z"/>145 </svg>146 <svg class="status-icon" viewBox="0 0 24 24">147 <path d="M12 21c-4.9 0-9-4.1-9-9v-1h2v1a7 7 0 1 0 14 0v-1h2v1c0 4.9-4.1 9-9 9z"/>148 </svg>149 <svg class="status-icon" viewBox="0 0 24 24">150 <path d="M22 5l-9 9-3-3-6 6v-4l6-6 3 3 7-7z"/>151 </svg>152 <div class="status-dot"></div>153 <svg class="status-icon" viewBox="0 0 24 24">154 <path d="M22 5.9c-.8.3-1.6.5-2.4.6.9-.6 1.6-1.5 1.9-2.6-.9.5-1.8.9-2.8 1.1A4.2 4.2 0 0 0 12 7.9c0 .3 0 .6.1.9-3.5-.2-6.6-1.9-8.7-4.5-.4.6-.6 1.4-.6 2.1 0 1.5.8 2.8 2 3.6-.7 0-1.3-.2-1.9-.5v.1c0 2.1 1.5 3.8 3.5 4.2-.4.1-.9.2-1.3.2-.3 0-.6 0-.9-.1.6 1.8 2.3 3.1 4.3 3.2A8.5 8.5 0 0 1 2 18.4a12 12 0 0 0 6.5 1.9c7.9 0 12.2-6.6 12.2-12.3v-.6c.8-.6 1.5-1.3 2-2.1-.7.3-1.5.6-2.3.7z"/>155 </svg>156 <svg class="battery" viewBox="0 0 24 24">157 <path d="M18 6h2v12h-2v2H4V4h14v2zM6 6v12h10V6H6z"/>158 </svg>159 </div>160 161 <!-- Chips row -->162 <div class="chips">163 <div class="chip">All</div>164 <div class="chip">Work</div>165 <div class="chip selected">Personal</div>166 <div class="chip">Wishlist</div>167 <div class="spacer"></div>168 <div class="icon-btn">169 <svg viewBox="0 0 24 24"><path d="M12 5a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>170 </div>171 </div>172 173 <!-- Section header -->174 <div class="section">175 <h2>Future</h2>176 <svg class="chev" viewBox="0 0 24 24"><path d="M7 14l5-5 5 5z"/></svg>177 </div>178 179 <!-- Task list -->180 <div class="list">181 <div class="card">182 <div class="check"></div>183 <div class="content">184 <div class="title">Buy groceries</div>185 <div class="date">07-29</div>186 </div>187 <div class="flag">188 <svg viewBox="0 0 24 24"><path d="M6 3v18h2v-6l3-1 3 1 4-2V5l-4 2-3-1-3 1V3H6z"/></svg>189 </div>190 </div>191 192 <div class="card">193 <div class="check"></div>194 <div class="content">195 <div class="title">Help sasha with math test</div>196 <div class="date">08-01</div>197 </div>198 <div class="flag">199 <svg viewBox="0 0 24 24"><path d="M6 3v18h2v-6l3-1 3 1 4-2V5l-4 2-3-1-3 1V3H6z"/></svg>200 </div>201 </div>202 203 <div class="card">204 <div class="check"></div>205 <div class="content">206 <div class="title">Order a new car key</div>207 <div class="date">08-05</div>208 </div>209 <div class="flag">210 <svg viewBox="0 0 24 24"><path d="M6 3v18h2v-6l3-1 3 1 4-2V5l-4 2-3-1-3 1V3H6z"/></svg>211 </div>212 </div>213 214 <div class="card">215 <div class="check"></div>216 <div class="content">217 <div class="title">Buy a present for Bill</div>218 <div class="date">08-17</div>219 </div>220 <div class="flag">221 <svg viewBox="0 0 24 24"><path d="M6 3v18h2v-6l3-1 3 1 4-2V5l-4 2-3-1-3 1V3H6z"/></svg>222 </div>223 </div>224 </div>225 226 <!-- Floating Action Button -->227 <div class="fab">228 <svg viewBox="0 0 24 24"><path d="M11 5h2v14h-2zM5 11h14v2H5z"/></svg>229 </div>230 231 <!-- Bottom navigation -->232 <div class="bottom-nav">233 <div class="nav-item" style="position:relative;">234 <div class="icon">235 <svg viewBox="0 0 24 24" fill="#96A0AC">236 <path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/>237 </svg>238 </div>239 <div class="badge"></div>240 <div>Menu</div>241 </div>242 243 <div class="nav-item active">244 <div class="icon">245 <svg viewBox="0 0 24 24" fill="#96A0AC">246 <path d="M5 5h14v2H5V5zm0 4h14v2H5V9zm0 4h10v2H5v-2z"/>247 </svg>248 </div>249 <div>Tasks</div>250 </div>251 252 <div class="nav-item">253 <div class="icon">254 <svg viewBox="0 0 24 24" fill="#96A0AC">255 <path d="M7 3h10v2h2v16H5V5h2V3zm0 4v12h10V7H7zm2 3h2v2H9V10zm4 0h2v2h-2V10z"/>256 </svg>257 </div>258 <div>Calendar</div>259 </div>260 261 <div class="nav-item">262 <div class="icon">263 <svg viewBox="0 0 24 24" fill="#96A0AC">264 <path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5z"/>265 </svg>266 </div>267 <div>Mine</div>268 </div>269 </div>270 271 <div class="home-indicator"></div>272</div>273</body>274</html>