GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Mobile UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #0E3A66;13 color: #FFF;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 120px;23 background: #153A6A;24 display: flex;25 align-items: center;26 padding: 0 36px;27 box-sizing: border-box;28 font-size: 42px;29 }30 .status-left { display: flex; align-items: center; gap: 22px; }31 .notif-dot {32 width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; opacity: 0.9;33 }34 .status-right {35 margin-left: auto;36 display: flex;37 align-items: center;38 gap: 28px;39 }40 .icon-small svg { width: 44px; height: 44px; fill: none; stroke: #FFF; stroke-width: 3; }41 42 /* App bar */43 .app-bar {44 position: absolute;45 top: 120px;46 left: 0;47 width: 1080px;48 height: 150px;49 background: #0F477D;50 display: flex;51 align-items: center;52 padding: 0 36px;53 box-sizing: border-box;54 border-bottom: 1px solid rgba(255,255,255,0.08);55 }56 .hamburger {57 width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;58 }59 .hamburger svg { width: 60px; height: 60px; fill: none; stroke: #FFF; stroke-width: 8; }60 .app-title {61 font-size: 60px; font-weight: 600; margin-left: 24px;62 }63 .app-actions {64 margin-left: auto; display: flex; gap: 34px; align-items: center;65 }66 .app-actions svg { width: 62px; height: 62px; stroke: #FFF; stroke-width: 6; fill: none; }67 68 /* Content area */69 .content {70 position: absolute;71 top: 270px;72 left: 0;73 width: 1080px;74 height: 2130px;75 background: #121416;76 box-sizing: border-box;77 padding-bottom: 160px;78 color: #EAEAEA;79 }80 81 .section-header {82 height: 110px; display: flex; align-items: center;83 padding: 0 32px; box-sizing: border-box;84 color: #B6DA52; font-size: 56px; background: #1B1C20;85 }86 87 .task-card {88 margin: 16px 24px;89 background: #0E0F11;90 border-radius: 12px;91 padding: 32px;92 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);93 }94 .task-title {95 font-size: 56px; margin-bottom: 18px; color: #FFF;96 }97 .meta-row {98 display: flex; align-items: center; gap: 24px; color: #BFC5CE; font-size: 34px;99 }100 .meta-item { display: flex; align-items: center; gap: 10px; }101 .circle-icon { width: 34px; height: 34px; border-radius: 50%; background: #2A2E35; }102 .meta-date { margin-top: 18px; color: #AAB0B9; font-size: 34px; display: flex; align-items: center; gap: 12px; }103 .meta-date .calendar { width: 34px; height: 34px; border-radius: 6px; background: #2A2E35; }104 105 .list-label {106 margin: 22px 24px;107 font-size: 54px;108 color: #D5D9DF;109 }110 111 /* Add Reminder bar */112 .reminder-bar {113 position: absolute;114 top: 520px;115 left: 24px;116 width: 1032px;117 height: 100px;118 background: #1E64AE;119 border-radius: 8px 8px 0 0;120 display: flex;121 align-items: center;122 padding: 0 24px;123 box-sizing: border-box;124 z-index: 5;125 }126 .reminder-bar .close {127 width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.6);128 display: flex; align-items: center; justify-content: center; margin-right: 18px;129 }130 .reminder-bar .close svg { width: 30px; height: 30px; stroke: #FFF; stroke-width: 7; }131 .reminder-title { font-size: 48px; font-weight: 600; }132 .save-btn {133 margin-left: auto;134 background: #E4EBF6; color: #0E3A66; font-weight: 700;135 padding: 18px 26px; border-radius: 12px; font-size: 40px;136 }137 138 /* Underlay text to mimic "Dance performance" */139 .under-task {140 position: absolute; top: 620px; left: 64px; font-size: 54px; color: #EDEDED; z-index: 1;141 }142 143 /* Time picker modal */144 .overlay {145 position: absolute; top: 470px; left: 90px;146 width: 900px; height: 780px; background: rgba(0,0,0,0.55); border-radius: 12px;147 padding: 40px; box-sizing: border-box; z-index: 10;148 }149 .time-dialog {150 width: 820px; height: 620px; margin: 0 auto;151 background: #2A2B2F; border-radius: 10px; box-shadow: 0 18px 40px rgba(0,0,0,0.6);152 position: relative; padding-top: 54px;153 }154 .picker-row {155 display: flex; justify-content: space-around; align-items: center; margin: 0 40px;156 }157 .picker-col {158 width: 240px; text-align: center;159 }160 .picker-col .label-top {161 font-size: 38px; color: #9AA2AD; margin-bottom: 10px;162 }163 .selected {164 font-size: 74px; font-weight: 700; color: #FFFFFF; padding: 16px 0; border-bottom: 4px solid #3EA3F4;165 }166 .sub-values {167 display: flex; justify-content: center; gap: 120px; color: #999; font-size: 48px; margin-top: 60px;168 }169 .dialog-actions {170 position: absolute; bottom: 30px; right: 36px; display: flex; gap: 40px;171 font-size: 44px; color: #7FB6FF;172 }173 174 .note-row {175 position: absolute; top: 1080px; left: 36px; color: #E35A5A; font-size: 38px; width: 1000px;176 }177 178 /* Additional tasks below */179 .task-card.small { padding: 26px; }180 .task-card.small .task-title { font-size: 52px; margin-bottom: 10px; }181 .task-card.small .meta-row { font-size: 32px; }182 .task-card.small .meta-date { font-size: 32px; }183 184 /* Floating action button */185 .fab {186 position: absolute; bottom: 220px; right: 36px;187 width: 140px; height: 140px; border-radius: 70px; background: #2D8CE8;188 box-shadow: 0 8px 24px rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center;189 }190 .fab svg { width: 72px; height: 72px; stroke: #FFF; stroke-width: 10; fill: none; }191 192 /* Ad banner */193 .ad-banner {194 position: absolute; bottom: 0; left: 0; width: 1080px; height: 180px;195 background: #FFFFFF; color: #222; display: flex; align-items: center; gap: 24px;196 padding: 22px; box-sizing: border-box; border-top: 1px solid #DDD;197 }198 .ad-img {199 width: 250px; height: 130px; background: #E0E0E0; border: 1px solid #BDBDBD;200 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px;201 }202 .ad-title { font-size: 44px; font-weight: 700; }203 .ad-pill {204 margin-left: auto; background: #20A35C; color: #FFF; padding: 18px 32px; border-radius: 45px; font-size: 40px; font-weight: 700;205 }206</style>207</head>208<body>209<div id="render-target">210 211 <!-- Status Bar -->212 <div class="status-bar">213 <div class="status-left">214 <div style="font-weight:700;">6:50</div>215 <div class="notif-dot"></div>216 <div class="notif-dot"></div>217 <div class="notif-dot"></div>218 <div class="notif-dot"></div>219 <div class="notif-dot"></div>220 <div style="width: 16px;"></div>221 <div class="notif-dot" style="opacity:0.6;"></div>222 </div>223 <div class="status-right">224 <div class="icon-small">225 <!-- Wi-Fi -->226 <svg viewBox="0 0 24 24">227 <path d="M2 9c5-5 15-5 20 0M6 13c3-3 9-3 12 0M10 17c1.5-1.5 4.5-1.5 6 0M13 20l-2 2" stroke-linecap="round"/>228 </svg>229 </div>230 <div class="icon-small">231 <!-- Battery -->232 <svg viewBox="0 0 28 24">233 <rect x="2" y="4" width="20" height="16" rx="2" />234 <rect x="23" y="9" width="3" height="6" rx="1" />235 <rect x="4" y="6" width="14" height="12" fill="#FFF" stroke="none"/>236 </svg>237 </div>238 </div>239 </div>240 241 <!-- App Bar -->242 <div class="app-bar">243 <div class="hamburger">244 <svg viewBox="0 0 24 24">245 <path d="M3 5h18M3 12h18M3 19h18" stroke-linecap="round"/>246 </svg>247 </div>248 <div class="app-title">Tasks</div>249 <div class="app-actions">250 <!-- Alarm + -->251 <svg viewBox="0 0 24 24">252 <circle cx="12" cy="13" r="8"/>253 <path d="M12 9v8M8 13h8" stroke-linecap="round"/>254 <path d="M6 5l-3-2M18 5l3-2" stroke-linecap="round"/>255 </svg>256 <!-- Check -->257 <svg viewBox="0 0 24 24">258 <circle cx="12" cy="12" r="9"/>259 <path d="M7 12l3 3 6-7" stroke-linecap="round"/>260 </svg>261 <!-- Search -->262 <svg viewBox="0 0 24 24">263 <circle cx="11" cy="11" r="8"/>264 <path d="M20 20l-4-4" stroke-linecap="round"/>265 </svg>266 </div>267 </div>268 269 <!-- Content Area -->270 <div class="content">271 272 <div class="section-header">Tomorrow</div>273 274 <div class="task-card">275 <div class="task-title">Catch Subway</div>276 <div class="meta-row">277 <div class="meta-item"><div class="circle-icon"></div>08:00 AM</div>278 <div class="meta-item"><div class="circle-icon"></div>1 day</div>279 </div>280 <div class="meta-date"><div class="calendar"></div>Thu, Sep 28, 2023</div>281 </div>282 283 <div class="list-label">Yoga classes</div>284 285 <!-- Underlay task text beneath reminder bar -->286 <div class="under-task">Dance performance</div>287 288 <!-- Add Reminder bar -->289 <div class="reminder-bar">290 <div class="close">291 <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19" stroke-linecap="round"/></svg>292 </div>293 <div class="reminder-title">Add Reminder</div>294 <div class="save-btn">SAVE</div>295 </div>296 297 <!-- Time Picker Modal -->298 <div class="overlay">299 <div class="time-dialog">300 <div class="picker-row">301 <div class="picker-col">302 <div class="label-top">12</div>303 <div class="selected">1</div>304 <div class="label-top" style="margin-top:18px;">2</div>305 </div>306 <div class="picker-col">307 <div class="label-top">54</div>308 <div class="selected">55</div>309 <div class="label-top" style="margin-top:18px;">56</div>310 </div>311 <div class="picker-col">312 <div class="label-top">AM</div>313 <div class="selected">PM</div>314 </div>315 </div>316 <div class="dialog-actions">317 <div style="color:#79B0F3;">CANCEL</div>318 <div style="color:#79B0F3;">OK</div>319 </div>320 </div>321 </div>322 323 <div class="task-card small" style="margin-top: 620px;">324 <div class="meta-row" style="margin-bottom: 10px;">325 <div class="meta-item"><div class="circle-icon"></div>Repeat: No repeat</div>326 </div>327 </div>328 329 <div class="note-row">NOTE: You can change a Date Time picker from app settings.</div>330 331 <div class="task-card small" style="margin-top: 80px;">332 <div class="task-title">Christmas Dinner with family</div>333 <div class="meta-row"><div class="meta-item"><div class="circle-icon"></div>10:30 PM</div><div class="meta-item"><div class="circle-icon"></div>Once</div></div>334 <div class="meta-date"><div class="calendar"></div>Mon, Dec 25, 2023</div>335 </div>336 337 <div class="task-card small">338 <div class="task-title">Cooking Lunch</div>339 <div class="meta-row"><div class="meta-item"><div class="circle-icon"></div>02:00 PM</div><div class="meta-item"><div class="circle-icon"></div>Once</div></div>340 </div>341 342 </div>343 344 <!-- Floating Action Button -->345 <div class="fab">346 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v10M7 12h10" stroke-linecap="round"/></svg>347 </div>348 349 <!-- Ad Banner -->350 <div class="ad-banner">351 <div class="ad-img">[IMG: Train station graphic]</div>352 <div>353 <div class="ad-title">Omio</div>354 <div style="color:#666; font-size:30px;">4.6 • FREE</div>355 </div>356 <div class="ad-pill">Open</div>357 </div>358 359</div>360</body>361</html>