GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Tasks App UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px; height: 2400px;9 position: relative; overflow: hidden;10 background: #0f1f3d;11 border-radius: 20px;12 box-shadow: 0 10px 30px rgba(0,0,0,0.4);13 color: #fff;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute; top: 0; left: 0; right: 0;19 height: 120px; background: #133a6b;20 display: flex; align-items: center; justify-content: space-between;21 padding: 0 40px; font-size: 36px;22 }23 .status-left { display: flex; align-items: center; gap: 22px; }24 .dot { width: 20px; height: 20px; background: #fff; border-radius: 50%; opacity: 0.9; }25 .status-right { display: flex; align-items: center; gap: 24px; }26 .wifi, .battery { width: 40px; height: 40px; }27 /* App bar */28 .app-bar {29 position: absolute; top: 120px; left: 0; right: 0;30 height: 170px; background: #153f75;31 display: flex; align-items: center; padding: 0 36px;32 box-shadow: 0 2px 0 rgba(0,0,0,0.3);33 }34 .hamburger {35 width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; margin-right: 20px;36 }37 .title { font-size: 58px; font-weight: 700; flex: 1; }38 .app-icons { display: flex; align-items: center; gap: 28px; }39 .icon-btn { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: 40px; }40 /* Section header */41 .section-header {42 position: absolute; top: 290px; left: 0; right: 0;43 height: 90px; background: #c7921f; display: flex; align-items: center; padding: 0 32px; font-size: 44px; font-weight: 700;44 }45 /* Content list area */46 .content {47 position: absolute; top: 380px; left: 0; right: 0; bottom: 0;48 padding: 24px 26px 200px;49 background: #101418;50 }51 .card {52 background: #13161b; color: #eaeaea; border-radius: 18px; padding: 36px; margin-bottom: 26px;53 box-shadow: 0 6px 16px rgba(0,0,0,0.35);54 }55 .card.dark {56 background: #0d0f13;57 }58 .card-title {59 font-size: 56px; font-weight: 700; margin-bottom: 26px;60 }61 .meta { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; color: #b5c0d0; font-size: 34px; }62 .meta .chip { display: inline-flex; align-items: center; gap: 14px; }63 .meta svg { width: 36px; height: 36px; fill: #b5c0d0; }64 .reminder-bar {65 margin-top: 24px;66 background: #246bb4; color: #fff; border-radius: 14px;67 display: flex; align-items: center; justify-content: space-between;68 padding: 22px 24px; font-size: 42px; font-weight: 700;69 }70 .rem-left { display: flex; align-items: center; gap: 18px; }71 .rem-save {72 background: #f1f5fb; color: #1c5ea3; border-radius: 14px;73 padding: 12px 26px; font-size: 36px; font-weight: 700;74 }75 .sub-title { font-size: 46px; font-weight: 700; margin: 22px 0; }76 77 /* Time picker modal */78 .overlay {79 position: absolute; left: 0; top: 0; right: 0; bottom: 0;80 background: rgba(0,0,0,0.55);81 }82 .time-modal {83 position: absolute; left: 50%; top: 50%;84 transform: translate(-50%, -50%);85 width: 820px; height: 720px;86 background: #2b2f35; border-radius: 16px;87 box-shadow: 0 22px 40px rgba(0,0,0,0.6);88 padding: 36px;89 }90 .tp-top {91 display: flex; justify-content: space-between; color: #9aa4b0; font-size: 42px; margin-bottom: 40px;92 }93 .tp-center {94 display: grid; grid-template-columns: 1fr 80px 1fr 1fr; align-items: center;95 gap: 20px; margin-bottom: 46px;96 }97 .tp-num {98 font-size: 96px; color: #ffffff; text-align: center;99 padding-bottom: 14px; border-bottom: 6px solid #3ea3ff;100 }101 .tp-colon { text-align: center; font-size: 96px; color: #cfe3ff; }102 .tp-bottom {103 display: grid; grid-template-columns: 1fr 80px 1fr 1fr; gap: 20px; color: #9aa4b0; font-size: 46px; margin-bottom: 40px; text-align: center;104 }105 .tp-actions {106 display: flex; justify-content: flex-end; gap: 38px; font-size: 42px; color: #6db3ff; font-weight: 700;107 }108 109 /* Note text */110 .note {111 color: #ff6b6b; font-size: 34px; margin: 22px 12px;112 }113 114 /* Floating action button */115 .fab {116 position: absolute; right: 40px; bottom: 340px;117 width: 140px; height: 140px; background: #2c86ea; border-radius: 50%;118 box-shadow: 0 16px 34px rgba(0,0,0,0.5);119 display: flex; align-items: center; justify-content: center;120 }121 122 /* Ad bar */123 .ad-bar {124 position: absolute; left: 0; right: 0; bottom: 160px;125 height: 180px; background: #f5f6fa; color: #222; display: flex; align-items: center; justify-content: space-between; padding: 0 26px; border-top: 1px solid #d1d1d1;126 }127 .ad-left { display: flex; align-items: center; gap: 24px; }128 .ad-img {129 width: 240px; height: 140px; background: #E0E0E0; border: 1px solid #BDBDBD;130 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px;131 }132 .ad-open {133 background: #1ebc5a; color: #fff; border-radius: 40px; padding: 22px 40px; font-size: 40px; font-weight: 700;134 }135 136 /* Home indicator */137 .home-indicator {138 position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%);139 width: 360px; height: 16px; background: #ffffff; border-radius: 10px; opacity: 0.8;140 }141</style>142</head>143<body>144<div id="render-target">145 146 <!-- Status Bar -->147 <div class="status-bar">148 <div class="status-left">149 <div>6:51</div>150 <div class="dot"></div>151 <div class="dot"></div>152 <div class="dot"></div>153 <div class="dot"></div>154 <div class="dot" style="width:10px;height:10px;opacity:0.7;"></div>155 </div>156 <div class="status-right">157 <!-- simple wifi icon -->158 <svg class="wifi" viewBox="0 0 24 24">159 <path fill="#fff" d="M12 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7-6 2 2a9 9 0 0 1 14 0l2-2a12 12 0 0 0-18 0zm3 3 2 2a6 6 0 0 1 10 0l2-2a8 8 0 0 0-14 0z"/>160 </svg>161 <!-- battery icon -->162 <svg class="battery" viewBox="0 0 24 24">163 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="#fff"/>164 <rect x="20" y="9" width="2" height="6" fill="#fff"/>165 <rect x="4" y="8" width="12" height="8" fill="#133a6b"/>166 </svg>167 </div>168 </div>169 170 <!-- App Bar -->171 <div class="app-bar">172 <div class="hamburger">173 <svg width="70" height="70" viewBox="0 0 24 24"><path fill="#fff" d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>174 </div>175 <div class="title">Tasks</div>176 <div class="app-icons">177 <div class="icon-btn">178 <!-- alarm plus -->179 <svg width="64" height="64" viewBox="0 0 24 24">180 <path fill="#fff" d="M7 4 4 7l2 2 3-3zm10 0 3 3-2 2-3-3zM12 7a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm1 4v3h3v2h-3v3h-2v-3H8v-2h3v-3z"/>181 </svg>182 </div>183 <div class="icon-btn">184 <!-- check circle -->185 <svg width="64" height="64" viewBox="0 0 24 24">186 <path fill="#fff" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 14-4-4 1.4-1.4L11 13.2l5.6-5.6L18 9l-7 7z"/>187 </svg>188 </div>189 <div class="icon-btn">190 <!-- search -->191 <svg width="64" height="64" viewBox="0 0 24 24">192 <path fill="#fff" d="M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm10.6 17.2-4.5-4.5-1.4 1.4 4.5 4.5 1.4-1.4z"/>193 </svg>194 </div>195 </div>196 </div>197 198 <!-- Section Header -->199 <div class="section-header">Tomorrow</div>200 201 <!-- Content -->202 <div class="content">203 204 <!-- Catch Subway Card -->205 <div class="card dark">206 <div class="card-title">Catch Subway</div>207 <div class="meta">208 <div class="chip">209 <svg viewBox="0 0 24 24"><path d="M12 8a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm1-6h-2v5h2V2z" /></svg>210 <span>08:00 AM</span>211 </div>212 <div class="chip">213 <svg viewBox="0 0 24 24"><path d="M7 7h10v2H7zm0 4h10v2H7zm0 4h10v2H7z" /></svg>214 <span>1 day</span>215 </div>216 <div class="chip">217 <svg viewBox="0 0 24 24"><path d="M7 3h10v2H7zM5 7h14v12H5z" /></svg>218 <span>Thu, Sep 28, 2023</span>219 </div>220 </div>221 </div>222 223 <!-- Yoga classes + reminder bar -->224 <div class="card">225 <div class="card-title">Yoga classes</div>226 227 <div class="reminder-bar">228 <div class="rem-left">229 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#fff" d="M19 6 6 19l-1.4-1.4L17.6 4z"/></svg>230 <div>Add Reminder</div>231 </div>232 <div class="rem-save">SAVE</div>233 </div>234 235 <div class="sub-title">Dance performance</div>236 <div class="meta">237 <div class="chip">238 <svg viewBox="0 0 24 24"><path d="M12 8a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm1-6h-2v5h2V2z" /></svg>239 <span>04:00 PM</span>240 </div>241 <div class="chip">242 <svg viewBox="0 0 24 24"><path d="M7 3h10v2H7zM5 7h14v12H5z" /></svg>243 <span>Fri, Sep 29, 2023</span>244 </div>245 </div>246 </div>247 248 <!-- Other item -->249 <div class="card">250 <div class="card-title">Christmas Dinner with family</div>251 <div class="meta">252 <div class="chip">253 <svg viewBox="0 0 24 24"><path d="M12 8a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm1-6h-2v5h2V2z" /></svg>254 <span>10:30 PM</span>255 </div>256 <div class="chip">257 <svg viewBox="0 0 24 24"><path d="M12 7a1 1 0 0 1 1 1v8a1 1 0 0 1-2 0V8a1 1 0 0 1 1-1zM7 7h10v2H7z" /></svg>258 <span>Once</span>259 </div>260 <div class="chip">261 <svg viewBox="0 0 24 24"><path d="M7 3h10v2H7zM5 7h14v12H5z" /></svg>262 <span>Mon, Dec 25, 2023</span>263 </div>264 </div>265 </div>266 267 <div class="card">268 <div class="card-title">Cooking Lunch</div>269 <div class="meta">270 <div class="chip">271 <svg viewBox="0 0 24 24"><path d="M12 8a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm1-6h-2v5h2V2z" /></svg>272 <span>02:00 PM</span>273 </div>274 <div class="chip">275 <svg viewBox="0 0 24 24"><path d="M12 7a1 1 0 0 1 1 1v8a1 1 0 0 1-2 0V8a1 1 0 0 1 1-1zM7 7h10v2H7z" /></svg>276 <span>Once</span>277 </div>278 </div>279 </div>280 281 <div class="note">NOTE: You can change a Date Time picker from app settings.</div>282 </div>283 284 <!-- Time Picker Modal -->285 <div class="overlay"></div>286 <div class="time-modal">287 <div class="tp-top">288 <div>12</div>289 <div>32</div>290 <div>AM</div>291 </div>292 <div class="tp-center">293 <div class="tp-num">1</div>294 <div class="tp-colon">:</div>295 <div class="tp-num">33</div>296 <div class="tp-num">PM</div>297 </div>298 <div class="tp-bottom">299 <div>2</div><div></div><div>34</div><div></div>300 </div>301 <div class="tp-actions">302 <div>CANCEL</div>303 <div>OK</div>304 </div>305 </div>306 307 <!-- Floating Action Button -->308 <div class="fab">309 <svg width="84" height="84" viewBox="0 0 24 24">310 <path fill="#fff" d="M7 4 4 7l2 2 3-3zm10 0 3 3-2 2-3-3zM12 7a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm1 4v3h3v2h-3v3h-2v-3H8v-2h3v-3z"/>311 </svg>312 </div>313 314 <!-- Ad Bar -->315 <div class="ad-bar">316 <div class="ad-left">317 <div class="ad-img">[IMG: Station Illustration]</div>318 <div style="font-size:40px; font-weight:700;">Omio • 4.6 • FREE</div>319 </div>320 <div class="ad-open">Open</div>321 </div>322 323 <!-- Home Indicator -->324 <div class="home-indicator"></div>325</div>326</body>327</html>