GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Tasks UI Mock</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;position:relative;overflow:hidden;9 background:#1f1f1f;color:#fff;10 }11 /* Top App Bar */12 .appbar{13 position:absolute;left:0;top:0;width:1080px;height:190px;14 background:#4f8ef8;15 box-shadow:0 2px 6px rgba(0,0,0,0.35);16 }17 .status-row{18 height:70px;display:flex;align-items:center;justify-content:space-between;19 padding:0 28px;color:#dff0ff;font-size:28px;opacity:0.9;20 }21 .title-row{22 height:120px;display:flex;align-items:center;justify-content:flex-start;23 padding:0 24px 0 24px;24 }25 .title{26 font-size:56px;font-weight:700;margin-left:24px;27 }28 .icon-btn{width:72px;height:72px;display:flex;align-items:center;justify-content:center;margin-left:18px;}29 .icon-right-group{margin-left:auto;display:flex;align-items:center;}30 /* Content area */31 .content{32 position:absolute;left:0;top:190px;width:1080px;height:2210px;overflow:hidden;33 }34 .list{35 position:absolute;left:0;top:0;right:0;bottom:0;overflow-y:hidden;padding-bottom:140px;36 }37 .section-bar{38 height:84px;display:flex;align-items:center;padding:0 28px;font-size:44px;font-weight:700;39 }40 .bar-yellow{background:#f0b634;color:#2a2a2a;}41 .bar-blue{background:#5aa2ff;color:#0b2b60;}42 .bar-green{background:#b7e24b;color:#243200;}43 .card{44 background:#2f2f32;margin:0; border-bottom:1px solid #3b3b3e;45 padding:28px;position:relative;46 }47 .card:not(:last-child){margin-bottom:0;}48 .task-title{font-size:54px;font-weight:700;margin:6px 72px 18px 0;color:#fff;}49 .meta-row{display:flex;align-items:center;color:#c9c9c9;font-size:34px;margin-top:6px;}50 .meta{display:flex;align-items:center;margin-right:36px;}51 .meta svg{margin-right:12px;}52 .chev{53 position:absolute;right:28px;top:44px;width:40px;height:40px;opacity:0.9;54 }55 /* FAB */56 .fab{57 position:absolute;right:44px;bottom:280px;width:156px;height:156px;border-radius:50%;58 background:#4aa2ff;box-shadow:0 8px 16px rgba(0,0,0,0.45);59 display:flex;align-items:center;justify-content:center;border:6px solid rgba(255,255,255,0.2);60 }61 /* Bottom ad mock */62 .adbar{63 position:absolute;left:0;bottom:0;width:1080px;height:160px;background:#ffffff;color:#1a1a1a;64 display:flex;align-items:center;padding:0 28px;box-shadow:0 -2px 8px rgba(0,0,0,0.25);65 }66 .ad-logo{67 width:124px;height:124px;border-radius:24px;background:#E0E0E0;border:1px solid #BDBDBD;68 display:flex;align-items:center;justify-content:center;color:#555;font-size:24px;margin-right:28px;69 }70 .ad-title{font-size:46px;font-weight:700;}71 .ad-sub{color:#2f8c46;font-size:32px;margin-left:12px;}72 .ad-btn{73 margin-left:auto;background:#2aa36b;color:#fff;border-radius:64px;padding:22px 64px;font-size:42px;font-weight:700;74 }75 76 /* Small helper for gray icons text */77 .muted{color:#bfbfbf;}78</style>79</head>80<body>81<div id="render-target">82 <!-- Top blue app bar -->83 <div class="appbar">84 <div class="status-row">85 <div>6:44 • • • • •</div>86 <div>📶 🔋</div>87 </div>88 <div class="title-row">89 <!-- Hamburger -->90 <div class="icon-btn">91 <svg width="48" height="48" viewBox="0 0 24 24" fill="#ffffff">92 <rect x="3" y="5" width="18" height="2"></rect>93 <rect x="3" y="11" width="18" height="2"></rect>94 <rect x="3" y="17" width="18" height="2"></rect>95 </svg>96 </div>97 <div class="title">Tasks</div>98 <div class="icon-right-group">99 <div class="icon-btn">100 <!-- alarm add -->101 <svg width="48" height="48" viewBox="0 0 24 24" fill="#ffffff">102 <circle cx="12" cy="13" r="6" fill="none" stroke="#fff" stroke-width="2"></circle>103 <path d="M12 10 v6 M9 13 h6" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>104 <path d="M5 5 L8 3" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>105 <path d="M19 5 L16 3" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>106 </svg>107 </div>108 <div class="icon-btn">109 <!-- check circle -->110 <svg width="48" height="48" viewBox="0 0 24 24" fill="#ffffff">111 <circle cx="12" cy="12" r="9" fill="none" stroke="#fff" stroke-width="2"></circle>112 <path d="M7 12l3 3 6-6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>113 </svg>114 </div>115 <div class="icon-btn" style="margin-right:8px;">116 <!-- search -->117 <svg width="48" height="48" viewBox="0 0 24 24" fill="#ffffff">118 <circle cx="11" cy="11" r="7" fill="none" stroke="#fff" stroke-width="2"></circle>119 <path d="M20 20l-4-4" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>120 </svg>121 </div>122 </div>123 </div>124 </div>125 126 <div class="content">127 <div class="list">128 129 <div class="section-bar bar-yellow">Tomorrow</div>130 131 <!-- Card 1 -->132 <div class="card">133 <div class="task-title">Catch Subway</div>134 <div class="meta-row">135 <div class="meta">136 <!-- time icon -->137 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">138 <circle cx="12" cy="12" r="9" stroke="#c9c9c9" stroke-width="2"></circle>139 <path d="M12 7v6l3 2" stroke="#c9c9c9" stroke-width="2" stroke-linecap="round"></path>140 </svg>141 <span>08:00 AM</span>142 </div>143 <div class="meta">144 <!-- repeat -->145 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">146 <path d="M3 7h10l-2-2m2 2-2 2M21 17H11l2 2m-2-2 2-2" stroke="#c9c9c9" stroke-width="2" stroke-linecap="round"></path>147 </svg>148 <span>1 day</span>149 </div>150 </div>151 <div class="meta-row" style="margin-top:10px;">152 <div class="meta">153 <!-- calendar -->154 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">155 <rect x="3" y="5" width="18" height="16" rx="2" stroke="#c9c9c9" stroke-width="2"></rect>156 <path d="M3 9h18" stroke="#c9c9c9" stroke-width="2"></path>157 </svg>158 <span>Thu, Sep 28, 2023</span>159 </div>160 </div>161 <!-- chevron -->162 <svg class="chev" viewBox="0 0 24 24" fill="none">163 <path d="M8 10l4 4 4-4" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>164 </svg>165 </div>166 167 <!-- Card 2 -->168 <div class="card">169 <div class="task-title">Yoga classes</div>170 <div class="meta-row">171 <div class="meta">172 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">173 <circle cx="12" cy="12" r="9" stroke="#c9c9c9" stroke-width="2"></circle>174 <path d="M12 7v6l3 2" stroke="#c9c9c9" stroke-width="2" stroke-linecap="round"></path>175 </svg>176 <span>11:00 AM</span>177 </div>178 <div class="meta">179 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">180 <path d="M3 7h10l-2-2m2 2-2 2M21 17H11l2 2m-2-2 2-2" stroke="#c9c9c9" stroke-width="2" stroke-linecap="round"></path>181 </svg>182 <span>1 day</span>183 </div>184 </div>185 <div class="meta-row" style="margin-top:10px;">186 <div class="meta">187 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">188 <rect x="3" y="5" width="18" height="16" rx="2" stroke="#c9c9c9" stroke-width="2"></rect>189 <path d="M3 9h18" stroke="#c9c9c9" stroke-width="2"></path>190 </svg>191 <span>Thu, Sep 28, 2023</span>192 </div>193 </div>194 <svg class="chev" viewBox="0 0 24 24" fill="none">195 <path d="M8 10l4 4 4-4" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>196 </svg>197 </div>198 199 <div class="section-bar bar-blue">Next 7 days</div>200 201 <!-- Card 3 -->202 <div class="card">203 <div class="task-title">Call Mom</div>204 <div class="meta-row">205 <div class="meta">206 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">207 <circle cx="12" cy="12" r="9" stroke="#c9c9c9" stroke-width="2"></circle>208 <path d="M12 7v6l3 2" stroke="#c9c9c9" stroke-width="2" stroke-linecap="round"></path>209 </svg>210 <span>02:00 PM</span>211 </div>212 <div class="meta">213 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">214 <path d="M3 7h10l-2-2m2 2-2 2M21 17H11l2 2m-2-2 2-2" stroke="#c9c9c9" stroke-width="2" stroke-linecap="round"></path>215 </svg>216 <span>S</span>217 </div>218 </div>219 <div class="meta-row" style="margin-top:10px;">220 <div class="meta">221 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">222 <rect x="3" y="5" width="18" height="16" rx="2" stroke="#c9c9c9" stroke-width="2"></rect>223 <path d="M3 9h18" stroke="#c9c9c9" stroke-width="2"></path>224 </svg>225 <span>Sun, Oct 01, 2023</span>226 </div>227 </div>228 <svg class="chev" viewBox="0 0 24 24" fill="none">229 <path d="M8 10l4 4 4-4" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>230 </svg>231 </div>232 233 <!-- Card 4 -->234 <div class="card">235 <div class="task-title">Call Janet</div>236 <div class="meta-row">237 <div class="meta">238 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">239 <circle cx="12" cy="12" r="9" stroke="#c9c9c9" stroke-width="2"></circle>240 <path d="M12 7v6l3 2" stroke="#c9c9c9" stroke-width="2" stroke-linecap="round"></path>241 </svg>242 <span>03:30 PM</span>243 </div>244 <div class="meta">245 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">246 <path d="M3 7h10l-2-2m2 2-2 2M21 17H11l2 2m-2-2 2-2" stroke="#c9c9c9" stroke-width="2" stroke-linecap="round"></path>247 </svg>248 <span>S</span>249 </div>250 </div>251 <div class="meta-row" style="margin-top:10px;">252 <div class="meta">253 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">254 <rect x="3" y="5" width="18" height="16" rx="2" stroke="#c9c9c9" stroke-width="2"></rect>255 <path d="M3 9h18" stroke="#c9c9c9" stroke-width="2"></path>256 </svg>257 <span>Sun, Oct 01, 2023</span>258 </div>259 </div>260 <svg class="chev" viewBox="0 0 24 24" fill="none">261 <path d="M8 10l4 4 4-4" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>262 </svg>263 </div>264 265 <div class="section-bar bar-green">Upcoming</div>266 267 <!-- Card 5 -->268 <div class="card">269 <div class="task-title">Renew Peloton and Soul cycle membership</div>270 <div class="meta-row">271 <div class="meta">272 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">273 <circle cx="12" cy="12" r="9" stroke="#c9c9c9" stroke-width="2"></circle>274 <path d="M12 7v6l3 2" stroke="#c9c9c9" stroke-width="2" stroke-linecap="round"></path>275 </svg>276 <span>05:00 PM</span>277 </div>278 <div class="meta">279 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">280 <path d="M3 7h10l-2-2m2 2-2 2M21 17H11l2 2m-2-2 2-2" stroke="#c9c9c9" stroke-width="2" stroke-linecap="round"></path>281 </svg>282 <span>2 months</span>283 </div>284 </div>285 <div class="meta-row" style="margin-top:10px;">286 <div class="meta">287 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">288 <rect x="3" y="5" width="18" height="16" rx="2" stroke="#c9c9c9" stroke-width="2"></rect>289 <path d="M3 9h18" stroke="#c9c9c9" stroke-width="2"></path>290 </svg>291 <span>Thu, Nov 16, 2023</span>292 </div>293 </div>294 <svg class="chev" viewBox="0 0 24 24" fill="none">295 <path d="M8 10l4 4 4-4" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>296 </svg>297 </div>298 299 <!-- Card 6 -->300 <div class="card">301 <div class="task-title">Christmas Dinner with family</div>302 <div class="meta-row">303 <div class="meta">304 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">305 <circle cx="12" cy="12" r="9" stroke="#c9c9c9" stroke-width="2"></circle>306 <path d="M12 7v6l3 2" stroke="#c9c9c9" stroke-width="2" stroke-linecap="round"></path>307 </svg>308 <span>10:30 PM</span>309 </div>310 <div class="meta">311 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">312 <path d="M6 12h12" stroke="#c9c9c9" stroke-width="2" stroke-linecap="round"></path>313 </svg>314 <span>Once</span>315 </div>316 </div>317 <div class="meta-row" style="margin-top:10px;">318 <div class="meta">319 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">320 <rect x="3" y="5" width="18" height="16" rx="2" stroke="#c9c9c9" stroke-width="2"></rect>321 <path d="M3 9h18" stroke="#c9c9c9" stroke-width="2"></path>322 </svg>323 <span>Mon, Dec 25, 2023</span>324 </div>325 </div>326 <svg class="chev" viewBox="0 0 24 24" fill="none">327 <path d="M8 10l4 4 4-4" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>328 </svg>329 </div>330 331 <!-- Card 7 (partially visible in screenshot) -->332 <div class="card" style="padding-bottom:36px;">333 <div class="task-title">Cooking Lunch</div>334 <div class="meta-row">335 <div class="meta">336 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">337 <circle cx="12" cy="12" r="9" stroke="#c9c9c9" stroke-width="2"></circle>338 <path d="M12 7v6l3 2" stroke="#c9c9c9" stroke-width="2" stroke-linecap="round"></path>339 </svg>340 <span>02:00 PM</span>341 </div>342 <div class="meta">343 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">344 <path d="M6 12h12" stroke="#c9c9c9" stroke-width="2" stroke-linecap="round"></path>345 </svg>346 <span>Once</span>347 </div>348 </div>349 </div>350 351 </div>352 </div>353 354 <!-- Floating action button -->355 <div class="fab">356 <svg width="88" height="88" viewBox="0 0 24 24" fill="none">357 <circle cx="12" cy="13" r="6" stroke="#fff" stroke-width="2"></circle>358 <path d="M12 10v6 M9 13h6" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>359 </svg>360 </div>361 362 <!-- Bottom Ad -->363 <div class="adbar">364 <div class="ad-logo">[IMG: App Logo]</div>365 <div class="ad-title">Omio <span class="ad-sub">Installed</span></div>366 <div class="ad-btn">Open</div>367 </div>368 369</div>370</body>371</html>