GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Tasks UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #ffffff; color: #212121;12 }13 14 /* Status bar */15 .status-bar {16 height: 88px;17 padding: 0 28px;18 display: flex; align-items: center; justify-content: space-between;19 font-size: 32px; color: #616161;20 }21 .status-icons { display: flex; gap: 24px; align-items: center; }22 .dot { width: 10px; height: 10px; background: #9e9e9e; border-radius: 50%; display: inline-block; }23 24 /* App bar */25 .app-bar {26 height: 118px;27 position: relative;28 border-bottom: 1px solid #eeeeee;29 display: flex; align-items: center; justify-content: center;30 }31 .app-title { font-size: 48px; font-weight: 600; }32 .icon-btn {33 position: absolute; top: 50%; transform: translateY(-50%);34 width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;35 border-radius: 50%;36 }37 .icon-left { left: 24px; }38 .icon-right { right: 24px; }39 40 /* Alert banner */41 .alert {42 background: #e53935; color: #fff;43 padding: 22px 28px;44 display: flex; align-items: center;45 position: relative;46 }47 .alert-content { padding-left: 22px; }48 .alert-title { font-size: 42px; font-weight: 700; line-height: 1.2; }49 .alert-sub { font-size: 30px; opacity: 0.95; margin-top: 6px; }50 .alert-close { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); }51 52 /* Ad header */53 .ad-header {54 display: flex; align-items: center; justify-content: space-between;55 padding: 10px 30px; color: #9e9e9e; font-size: 30px;56 }57 58 /* Ad card */59 .card {60 background: #fff; border-radius: 26px;61 box-shadow: 0 6px 18px rgba(0,0,0,0.12);62 }63 .ad-card { margin: 10px 28px 30px; padding: 26px; }64 .ad-row { display: flex; gap: 28px; align-items: center; }65 .ad-img {66 width: 280px; height: 200px; border-radius: 22px;67 background: #E0E0E0; border: 1px solid #BDBDBD;68 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;69 }70 .ad-text h3 { margin: 0; font-size: 40px; }71 .ad-text .sub { color: #616161; font-size: 28px; margin-top: 6px; }72 .ad-text .desc { color: #424242; font-size: 30px; margin-top: 12px; }73 .cta {74 margin-top: 22px; background: #ef534f; color: #fff;75 height: 92px; border-radius: 16px; display: flex; align-items: center; justify-content: center;76 font-size: 34px; font-weight: 700;77 }78 79 .section-date {80 color: #757575; font-size: 32px;81 margin: 22px 32px;82 }83 84 /* Task cards */85 .task-card {86 margin: 0 28px 26px; padding: 28px; position: relative;87 }88 .task-title { font-size: 40px; font-weight: 700; margin: 8px 0 8px 0; }89 .task-sub { font-size: 34px; color: #616161; margin-bottom: 18px; }90 .chips { display: flex; gap: 18px; flex-wrap: wrap; }91 .chip {92 display: inline-flex; align-items: center; gap: 10px;93 padding: 12px 20px; border-radius: 28px; background: #eeeeee; border: 1px solid #c7c7c7;94 color: #616161; font-size: 30px;95 }96 .card-actions {97 position: absolute; right: 22px; top: 20px; display: flex; gap: 22px;98 }99 .postponed { color: #9e9e9e; font-size: 28px; }100 101 /* FAB */102 .fab {103 position: absolute; right: 38px; bottom: 230px;104 width: 150px; height: 150px; background: #ef534f; border-radius: 50%;105 box-shadow: 0 8px 24px rgba(0,0,0,0.25);106 display: flex; align-items: center; justify-content: center;107 }108 109 /* Bottom navigation */110 .bottom-nav {111 position: absolute; bottom: 0; left: 0; width: 1080px; height: 200px;112 border-top: 1px solid #e0e0e0; background: #fff;113 display: flex; align-items: center; justify-content: space-evenly;114 }115 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #424242; font-size: 28px; }116 .nav-item.active { color: #ef534f; font-weight: 700; }117 .home-indicator {118 position: absolute; bottom: 200px; left: 50%; transform: translateX(-50%);119 width: 300px; height: 12px; background: #bdbdbd; border-radius: 8px;120 }121 122 /* Simple SVG icons defaults */123 svg { display: block; }124</style>125</head>126<body>127<div id="render-target">128 129 <!-- Status bar -->130 <div class="status-bar">131 <div>7:55</div>132 <div class="status-icons">133 <span class="dot"></span>134 <span class="dot"></span>135 <span class="dot"></span>136 <svg width="38" height="38" viewBox="0 0 24 24">137 <path d="M3 11h18v2H3z" fill="#757575"></path>138 </svg>139 <svg width="38" height="38" viewBox="0 0 24 24">140 <rect x="3" y="7" width="18" height="10" rx="2" ry="2" fill="#757575"></rect>141 </svg>142 <svg width="38" height="38" viewBox="0 0 24 24">143 <path d="M6 6h12v12H6z" fill="#757575"></path>144 </svg>145 </div>146 </div>147 148 <!-- App bar -->149 <div class="app-bar">150 <div class="icon-btn icon-left">151 <svg width="48" height="48" viewBox="0 0 24 24">152 <path d="M3 6h18M3 12h18M3 18h18" stroke="#212121" stroke-width="2" fill="none" stroke-linecap="round"></path>153 </svg>154 </div>155 <div class="app-title">Tasks</div>156 <div class="icon-btn icon-right">157 <svg width="48" height="48" viewBox="0 0 24 24">158 <circle cx="11" cy="11" r="7" stroke="#212121" stroke-width="2" fill="none"></circle>159 <path d="M20 20l-4-4" stroke="#212121" stroke-width="2" fill="none" stroke-linecap="round"></path>160 </svg>161 </div>162 </div>163 164 <!-- Alert banner -->165 <div class="alert">166 <div>167 <svg width="56" height="56" viewBox="0 0 24 24">168 <path d="M12 2l10 18H2L12 2z" fill="#fff" opacity="0.9"></path>169 <rect x="11" y="8" width="2" height="6" fill="#e53935"></rect>170 <rect x="11" y="15" width="2" height="2" fill="#e53935"></rect>171 </svg>172 </div>173 <div class="alert-content">174 <div class="alert-title">Critical Permission Not Granted</div>175 <div class="alert-sub">Without this permission the application will not work reliably</div>176 </div>177 <div class="alert-close">178 <svg width="46" height="46" viewBox="0 0 24 24">179 <path d="M5 5l14 14M19 5L5 19" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>180 </svg>181 </div>182 </div>183 184 <!-- Ad header -->185 <div class="ad-header">186 <div>Ad</div>187 <div>188 <svg width="36" height="36" viewBox="0 0 24 24">189 <path d="M5 5l14 14M19 5L5 19" stroke="#9e9e9e" stroke-width="2" stroke-linecap="round"></path>190 </svg>191 </div>192 </div>193 194 <!-- Ad card -->195 <div class="card ad-card">196 <div class="ad-row">197 <div class="ad-img">[IMG: Grocery promo]</div>198 <div class="ad-text" style="flex:1">199 <h3>Use Code: HELLOIM</h3>200 <div class="sub">swiggyinstamartin</div>201 <div class="desc">Quick delivery + Amazing offers</div>202 <div class="cta">ORDER NOW</div>203 </div>204 </div>205 </div>206 207 <!-- Date section -->208 <div class="section-date">9/30/2023</div>209 210 <!-- Task card: Birthday Bash -->211 <div class="card task-card">212 <div class="card-actions">213 <svg width="44" height="44" viewBox="0 0 24 24">214 <path d="M12 3l3 6h6l-5 4 2 7-6-4-6 4 2-7-5-4h6z" fill="none" stroke="#616161" stroke-width="1.5"></path>215 </svg>216 <svg width="44" height="44" viewBox="0 0 24 24">217 <circle cx="12" cy="5" r="1.8" fill="#616161"></circle>218 <circle cx="12" cy="12" r="1.8" fill="#616161"></circle>219 <circle cx="12" cy="19" r="1.8" fill="#616161"></circle>220 </svg>221 </div>222 <div class="task-title">Birthday Bash</div>223 <div class="task-sub">Carlos birthday</div>224 <div class="chips">225 <div class="chip">226 <svg width="34" height="34" viewBox="0 0 24 24">227 <rect x="3" y="5" width="18" height="16" rx="2" ry="2" fill="none" stroke="#616161" stroke-width="2"></rect>228 <path d="M3 9h18" stroke="#616161" stroke-width="2"></path>229 </svg>230 9/30/2023231 </div>232 <div class="chip">233 <svg width="34" height="34" viewBox="0 0 24 24">234 <circle cx="12" cy="12" r="8" fill="none" stroke="#616161" stroke-width="2"></circle>235 <path d="M12 12l4 2M12 6v6" stroke="#616161" stroke-width="2" stroke-linecap="round"></path>236 </svg>237 7:00 PM238 </div>239 <div class="chip">240 <svg width="34" height="34" viewBox="0 0 24 24">241 <path d="M4 12a8 8 0 1115 2" fill="none" stroke="#616161" stroke-width="2"></path>242 <path d="M19 10l-2 3h4z" fill="#616161"></path>243 </svg>244 Yearly245 </div>246 </div>247 </div>248 249 <!-- Task card: Wedding anniversary -->250 <div class="card task-card">251 <div class="card-actions">252 <svg width="44" height="44" viewBox="0 0 24 24">253 <path d="M12 3l3 6h6l-5 4 2 7-6-4-6 4 2-7-5-4h6z" fill="none" stroke="#616161" stroke-width="1.5"></path>254 </svg>255 <svg width="44" height="44" viewBox="0 0 24 24">256 <circle cx="12" cy="5" r="1.8" fill="#616161"></circle>257 <circle cx="12" cy="12" r="1.8" fill="#616161"></circle>258 <circle cx="12" cy="19" r="1.8" fill="#616161"></circle>259 </svg>260 </div>261 <div class="postponed">Postponed: 9/30/2023 at 7:15 PM</div>262 <div class="task-title">Wedding anniversary of Carlos</div>263 <div class="task-sub">To buy gift for carlos</div>264 <div class="chips">265 <div class="chip">266 <svg width="34" height="34" viewBox="0 0 24 24">267 <rect x="3" y="5" width="18" height="16" rx="2" ry="2" fill="none" stroke="#616161" stroke-width="2"></rect>268 <path d="M3 9h18" stroke="#616161" stroke-width="2"></path>269 </svg>270 9/30/2023271 </div>272 <div class="chip">273 <svg width="34" height="34" viewBox="0 0 24 24">274 <circle cx="12" cy="12" r="8" fill="none" stroke="#616161" stroke-width="2"></circle>275 <path d="M12 12l4 2M12 6v6" stroke="#616161" stroke-width="2" stroke-linecap="round"></path>276 </svg>277 7:00 PM278 </div>279 <div class="chip">280 <svg width="34" height="34" viewBox="0 0 24 24">281 <path d="M6 12h12M10 8l4 4-4 4" stroke="#616161" stroke-width="2" fill="none" stroke-linecap="round"></path>282 </svg>283 Once284 </div>285 </div>286 </div>287 288 <!-- Next date section -->289 <div class="section-date">10/3/2023</div>290 291 <!-- Partial card visible behind bottom bar -->292 <div class="card task-card" style="margin-bottom: 320px;">293 <div class="card-actions">294 <svg width="44" height="44" viewBox="0 0 24 24">295 <path d="M12 3l3 6h6l-5 4 2 7-6-4-6 4 2-7-5-4h6z" fill="none" stroke="#616161" stroke-width="1.5"></path>296 </svg>297 <svg width="44" height="44" viewBox="0 0 24 24">298 <circle cx="12" cy="5" r="1.8" fill="#616161"></circle>299 <circle cx="12" cy="12" r="1.8" fill="#616161"></circle>300 <circle cx="12" cy="19" r="1.8" fill="#616161"></circle>301 </svg>302 </div>303 <div class="task-title">My Accounts</div>304 <div class="task-sub">Manage bills and statements</div>305 <div class="chips">306 <div class="chip">307 <svg width="34" height="34" viewBox="0 0 24 24">308 <rect x="3" y="5" width="18" height="16" rx="2" ry="2" fill="none" stroke="#616161" stroke-width="2"></rect>309 <path d="M3 9h18" stroke="#616161" stroke-width="2"></path>310 </svg>311 10/3/2023312 </div>313 </div>314 </div>315 316 <!-- Floating Action Button -->317 <div class="fab">318 <svg width="70" height="70" viewBox="0 0 24 24">319 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="3" stroke-linecap="round"></path>320 </svg>321 </div>322 323 <!-- Home indicator -->324 <div class="home-indicator"></div>325 326 <!-- Bottom Navigation -->327 <div class="bottom-nav">328 <div class="nav-item">329 <svg width="52" height="52" viewBox="0 0 24 24">330 <rect x="3" y="4" width="18" height="16" rx="2" ry="2" stroke="#424242" stroke-width="2" fill="none"></rect>331 <path d="M3 9h18" stroke="#424242" stroke-width="2"></path>332 </svg>333 <div>Calendar</div>334 </div>335 <div class="nav-item active">336 <svg width="52" height="52" viewBox="0 0 24 24">337 <rect x="4" y="4" width="16" height="20" rx="2" ry="2" stroke="#ef534f" stroke-width="2" fill="none"></rect>338 <rect x="8" y="8" width="8" height="2" fill="#ef534f"></rect>339 <rect x="8" y="12" width="8" height="2" fill="#ef534f"></rect>340 <rect x="8" y="16" width="8" height="2" fill="#ef534f"></rect>341 </svg>342 <div>Tasks</div>343 </div>344 <div class="nav-item">345 <svg width="52" height="52" viewBox="0 0 24 24">346 <path d="M12 3l3 6h6l-5 4 2 7-6-4-6 4 2-7-5-4h6z" fill="none" stroke="#424242" stroke-width="1.7"></path>347 </svg>348 <div>Favorites</div>349 </div>350 <div class="nav-item">351 <svg width="52" height="52" viewBox="0 0 24 24">352 <rect x="4" y="4" width="7" height="7" fill="none" stroke="#424242" stroke-width="2"></rect>353 <rect x="13" y="4" width="7" height="7" fill="none" stroke="#424242" stroke-width="2"></rect>354 <rect x="4" y="13" width="7" height="7" fill="none" stroke="#424242" stroke-width="2"></rect>355 <rect x="13" y="13" width="7" height="7" fill="none" stroke="#424242" stroke-width="2"></rect>356 </svg>357 <div>Planning</div>358 </div>359 </div>360 361</div>362</body>363</html>