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, sans-serif; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: #0e1f3e;13 color: #fff;14 }15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 110px;22 background: #123a6a;23 display: flex;24 align-items: center;25 padding: 0 28px;26 box-sizing: border-box;27 font-size: 40px;28 letter-spacing: 1px;29 }30 .status-icons {31 margin-left: auto;32 display: flex;33 gap: 20px;34 align-items: center;35 }36 .dot { width: 12px; height: 12px; background: #fff; border-radius: 50%; display: inline-block; margin: 0 8px; opacity: 0.9; }37 /* App bar */38 .app-bar {39 position: absolute;40 top: 110px;41 left: 0;42 width: 1080px;43 height: 150px;44 background: #153f77;45 display: flex;46 align-items: center;47 padding: 0 32px;48 box-sizing: border-box;49 }50 .hamburger {51 width: 70px; height: 70px; margin-right: 24px;52 }53 .app-title {54 font-size: 60px;55 font-weight: 600;56 }57 .app-actions {58 margin-left: auto;59 display: flex;60 gap: 36px;61 align-items: center;62 }63 .icon-btn { width: 70px; height: 70px; }64 .search-icon { width: 70px; height: 70px; }65 /* Content area */66 .content {67 position: absolute;68 top: 260px;69 left: 0;70 width: 1080px;71 height: 2140px;72 background: #0b1220;73 box-sizing: border-box;74 }75 .label-bar {76 background: #d9a31c;77 color: #1b1b1b;78 font-weight: 700;79 padding: 22px 32px;80 font-size: 50px;81 }82 .card {83 background: #121827;84 margin: 24px 24px;85 border-radius: 16px;86 padding: 26px 28px;87 box-shadow: 0 2px 6px rgba(0,0,0,0.4);88 }89 .card-title {90 font-size: 60px;91 margin-bottom: 18px;92 color: #e7eaf3;93 }94 .meta-row { display: flex; align-items: center; gap: 20px; color: #b9c2d6; font-size: 38px; margin: 10px 0; }95 .meta-icon { width: 40px; height: 40px; opacity: 0.85; }96 .section-title {97 font-size: 58px;98 color: #cbd3e4;99 padding: 18px 32px 0 32px;100 }101 /* Add Reminder slide panel */102 .reminder-strip {103 position: absolute;104 left: 24px;105 top: 640px;106 width: 1032px;107 height: 120px;108 background: #1f65b3;109 border-radius: 12px 12px 0 0;110 display: flex;111 align-items: center;112 box-sizing: border-box;113 padding: 0 26px;114 z-index: 3;115 }116 .reminder-strip .title { font-size: 54px; font-weight: 600; }117 .save-btn {118 margin-left: auto;119 background: #e6eefc;120 color: #0b2b5d;121 padding: 20px 28px;122 border-radius: 12px;123 font-size: 44px;124 font-weight: 700;125 }126 /* Time picker modal */127 .modal {128 position: absolute;129 left: 160px;130 top: 780px;131 width: 760px;132 height: 680px;133 background: #2c2f36;134 border-radius: 16px;135 box-shadow: 0 8px 30px rgba(0,0,0,0.6);136 z-index: 4;137 padding: 40px 30px;138 box-sizing: border-box;139 }140 .spinner-row {141 display: flex;142 justify-content: space-between;143 align-items: center;144 margin-top: 80px;145 margin-bottom: 80px;146 padding: 0 10px;147 }148 .spinner-col {149 width: 230px;150 text-align: center;151 color: #e4edf9;152 }153 .spinner-top, .spinner-bottom {154 color: #8d919a;155 font-size: 54px;156 margin: 22px 0;157 }158 .spinner-value {159 font-size: 72px;160 border-bottom: 4px solid #67a6ff;161 padding-bottom: 10px;162 display: inline-block;163 min-width: 160px;164 }165 .colon {166 font-size: 72px;167 color: #e4edf9;168 margin: 0 10px;169 }170 .dialog-actions {171 position: absolute;172 bottom: 36px;173 right: 30px;174 display: flex;175 gap: 40px;176 font-size: 44px;177 color: #70a5ff;178 }179 /* Red note */180 .note {181 position: absolute;182 left: 28px;183 top: 1580px;184 color: #ff5b5b;185 font-size: 40px;186 }187 .ad-banner {188 position: absolute;189 left: 0;190 bottom: 140px;191 width: 1080px;192 height: 240px;193 background: #eaeef4;194 display: flex;195 align-items: center;196 padding: 22px 28px;197 box-sizing: border-box;198 color: #1f2a44;199 gap: 22px;200 }201 .ad-image {202 width: 230px; height: 200px;203 background: #E0E0E0; border: 1px solid #BDBDBD;204 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 32px;205 border-radius: 12px;206 }207 .ad-content { flex: 1; }208 .ad-title { font-size: 56px; font-weight: 700; margin-bottom: 8px; }209 .ad-sub { font-size: 34px; color: #58627a; }210 .ad-cta {211 background: #2bb673; color: #fff; padding: 20px 36px; border-radius: 50px; font-size: 42px; font-weight: 700;212 }213 .gesture {214 position: absolute;215 bottom: 48px;216 left: 50%;217 transform: translateX(-50%);218 width: 380px; height: 16px; border-radius: 12px; background: #dcdcdc; opacity: 0.85;219 }220</style>221</head>222<body>223<div id="render-target">224 225 <div class="status-bar">226 <div>6:50 <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span></div>227 <div class="status-icons">228 <!-- wifi -->229 <svg width="48" height="48" viewBox="0 0 24 24" fill="#fff"><path d="M12 18.5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5-1.5-.7-1.5-1.5.7-1.5 1.5-1.5zm-6.4-5.3 1.4 1.4c3-3 7.9-3 10.9 0l1.4-1.4c-3.8-3.8-10-3.8-13.7 0zm3.6 3.6 1.4 1.4c1.8-1.8 4.8-1.8 6.6 0l1.4-1.4c-2.6-2.6-6.8-2.6-9.4 0z"/></svg>230 <!-- battery -->231 <svg width="48" height="48" viewBox="0 0 24 24" fill="#fff"><path d="M18 6h1v3h2v6h-2v3h-1v2H3V4h15v2z"/></svg>232 </div>233 </div>234 235 <div class="app-bar">236 <!-- Hamburger icon -->237 <svg class="hamburger" viewBox="0 0 24 24" fill="#fff">238 <rect x="3" y="5" width="18" height="2"></rect>239 <rect x="3" y="11" width="18" height="2"></rect>240 <rect x="3" y="17" width="18" height="2"></rect>241 </svg>242 <div class="app-title">Tasks</div>243 <div class="app-actions">244 <!-- plus-in-circle/alarm style -->245 <svg class="icon-btn" viewBox="0 0 24 24" fill="#fff">246 <circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="2" fill="none"></circle>247 <path d="M12 7v10M7 12h10" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>248 </svg>249 <svg class="icon-btn" viewBox="0 0 24 24" fill="#fff">250 <circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="2" fill="none"></circle>251 <path d="M8 12l3 3 6-6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>252 </svg>253 <!-- Search -->254 <svg class="search-icon" viewBox="0 0 24 24" fill="#fff">255 <circle cx="10" cy="10" r="6" stroke="#fff" stroke-width="2" fill="none"></circle>256 <path d="M15 15l6 6" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>257 </svg>258 </div>259 </div>260 261 <div class="content">262 <div class="label-bar">Tomorrow</div>263 264 <div class="card">265 <div class="card-title">Catch Subway</div>266 <div class="meta-row">267 <svg class="meta-icon" viewBox="0 0 24 24" fill="#b9c2d6">268 <circle cx="12" cy="12" r="9" stroke="#b9c2d6" stroke-width="2" fill="none"></circle>269 <path d="M12 6v6l4 3" stroke="#b9c2d6" stroke-width="2" stroke-linecap="round"></path>270 </svg>271 <div>08:00 AM</div>272 <svg class="meta-icon" viewBox="0 0 24 24" fill="#b9c2d6"><path d="M12 5l4 4H7l5-5zM7 15h9l-4 4-5-4z" opacity="0"></path><path d="M7 7h10v10H7z" fill="none"></path><path d="M7 12h10M12 7v10" stroke="#b9c2d6" stroke-width="2"></path></svg>273 <div>1 day</div>274 </div>275 <div class="meta-row">276 <svg class="meta-icon" viewBox="0 0 24 24" fill="#b9c2d6"><path d="M19 4H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm-2 3v2H7V7h10z" /></svg>277 <div>Thu, Sep 28, 2023</div>278 </div>279 </div>280 281 <div class="section-title">Yoga classes</div>282 283 <!-- Reminder strip simulating slide panel -->284 <div class="reminder-strip">285 <div class="title">Add Reminder</div>286 <div class="save-btn">SAVE</div>287 </div>288 289 <!-- Modal time picker -->290 <div class="modal">291 <div class="spinner-row">292 <div class="spinner-col">293 <div class="spinner-top">1</div>294 <div class="spinner-value">2</div>295 <div class="spinner-bottom">3</div>296 </div>297 <div class="colon">:</div>298 <div class="spinner-col">299 <div class="spinner-top">54</div>300 <div class="spinner-value">55</div>301 <div class="spinner-bottom">56</div>302 </div>303 <div class="spinner-col">304 <div class="spinner-top">AM</div>305 <div class="spinner-value">PM</div>306 <div class="spinner-bottom"> </div>307 </div>308 </div>309 <div class="dialog-actions">310 <div>CANCEL</div>311 <div>OK</div>312 </div>313 </div>314 315 <div class="card" style="margin-top: 240px;">316 <div class="card-title">Christmas Dinner with family</div>317 <div class="meta-row">318 <svg class="meta-icon" viewBox="0 0 24 24" fill="#b9c2d6">319 <circle cx="12" cy="12" r="9" stroke="#b9c2d6" stroke-width="2" fill="none"></circle>320 <path d="M12 6v6l4 3" stroke="#b9c2d6" stroke-width="2" stroke-linecap="round"></path>321 </svg>322 <div>10:30 PM</div>323 <svg class="meta-icon" viewBox="0 0 24 24" fill="#b9c2d6"><path d="M7 12h10M12 7v10" stroke="#b9c2d6" stroke-width="2"></path></svg>324 <div>Once</div>325 </div>326 <div class="meta-row">327 <svg class="meta-icon" viewBox="0 0 24 24" fill="#b9c2d6"><path d="M19 4H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm-2 3v2H7V7h10z" /></svg>328 <div>Mon, Dec 25, 2023</div>329 </div>330 </div>331 332 <div class="card">333 <div class="card-title">Cooking Lunch</div>334 <div class="meta-row">335 <svg class="meta-icon" viewBox="0 0 24 24" fill="#b9c2d6">336 <circle cx="12" cy="12" r="9" stroke="#b9c2d6" stroke-width="2" fill="none"></circle>337 <path d="M12 6v6l4 3" stroke="#b9c2d6" stroke-width="2" stroke-linecap="round"></path>338 </svg>339 <div>02:00 PM</div>340 <svg class="meta-icon" viewBox="0 0 24 24" fill="#b9c2d6"><path d="M7 12h10M12 7v10" stroke="#b9c2d6" stroke-width="2"></path></svg>341 <div>Once</div>342 </div>343 </div>344 345 <div class="note">NOTE: You can change a Date Time picker from app settings.</div>346 347 <div class="ad-banner">348 <div class="ad-image">[IMG: Omio App Graphic]</div>349 <div class="ad-content">350 <div class="ad-title">Omio</div>351 <div class="ad-sub">4.6 • FREE</div>352 </div>353 <div class="ad-cta">Open</div>354 </div>355 356 <div class="gesture"></div>357 </div>358 359</div>360</body>361</html>