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;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #1c1c1c;14 border-radius: 0;15 box-shadow: none;16 color: #fff;17 }18 19 /* Top status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 1080px;25 height: 120px;26 background: #0E4A77;27 display: flex;28 align-items: center;29 padding: 0 32px;30 box-sizing: border-box;31 font-size: 40px;32 letter-spacing: 1px;33 }34 .status-left { display: flex; align-items: center; gap: 22px; }35 .status-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }36 .status-icon {37 width: 38px; height: 38px; opacity: 0.95;38 }39 40 /* App bar */41 .app-bar {42 position: absolute;43 top: 120px;44 left: 0;45 width: 1080px;46 height: 140px;47 background: #135F93;48 display: flex;49 align-items: center;50 padding: 0 28px;51 box-sizing: border-box;52 box-shadow: 0 2px 6px rgba(0,0,0,0.4);53 }54 .menu-btn { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; margin-right: 22px; }55 .title { font-size: 64px; font-weight: 600; flex: 1; }56 .actions { display: flex; align-items: center; gap: 36px; }57 .action-icon { width: 72px; height: 72px; opacity: 0.9; }58 59 /* Alert row */60 .alert-row {61 position: absolute;62 top: 260px;63 left: 0;64 width: 1080px;65 height: 100px;66 display: flex;67 align-items: center;68 padding: 0 32px;69 box-sizing: border-box;70 color: #d32f2f;71 font-size: 40px;72 gap: 20px;73 }74 .enable-btn {75 margin-left: auto;76 background: #2C8CD6;77 color: #e6f3ff;78 padding: 18px 28px;79 border-radius: 12px;80 font-weight: 600;81 box-shadow: 0 2px 0 rgba(0,0,0,0.3);82 }83 84 /* Background list hint */85 .list-area {86 position: absolute;87 top: 360px;88 left: 24px;89 right: 24px;90 bottom: 240px;91 border-radius: 16px;92 background: #141414;93 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);94 }95 .list-item {96 height: 110px;97 border-bottom: 1px solid rgba(255,255,255,0.06);98 display: flex;99 align-items: center;100 padding: 0 24px;101 color: #9e9e9e;102 font-size: 40px;103 gap: 20px;104 }105 .list-item:last-child { border-bottom: none; }106 107 /* Overlay and dialog */108 .overlay {109 position: absolute;110 top: 0; left: 0; right: 0; bottom: 0;111 background: rgba(0,0,0,0.55);112 }113 .sheet {114 position: absolute;115 top: 680px;116 left: 60px;117 width: 960px;118 border-radius: 16px;119 box-shadow: 0 16px 40px rgba(0,0,0,0.6);120 overflow: hidden;121 }122 .sheet-header {123 height: 100px;124 background: #1777B8;125 display: flex;126 align-items: center;127 padding: 0 22px;128 box-sizing: border-box;129 gap: 18px;130 }131 .sheet-header .title {132 font-size: 50px;133 font-weight: 600;134 }135 .save-btn {136 margin-left: auto;137 background: #E3EDF6;138 color: #1c5e8f;139 padding: 14px 24px;140 border-radius: 12px;141 font-weight: 700;142 box-shadow: 0 2px 0 rgba(0,0,0,0.25);143 font-size: 40px;144 }145 146 .time-dialog {147 position: absolute;148 top: 820px;149 left: 120px;150 width: 840px;151 height: 600px;152 background: #3a3a3a;153 border-radius: 10px;154 box-shadow: 0 18px 50px rgba(0,0,0,0.6);155 padding: 48px 56px;156 box-sizing: border-box;157 color: #bdbdbd;158 }159 .spinner {160 display: grid;161 grid-template-columns: 1fr 120px 1fr 1fr;162 align-items: center;163 column-gap: 24px;164 margin-top: 10px;165 }166 .col {167 display: flex;168 flex-direction: column;169 align-items: center;170 gap: 26px;171 font-size: 44px;172 }173 .col .prev, .col .next { color: #8a8a8a; }174 .col .active {175 color: #ffffff;176 font-size: 56px;177 font-weight: 600;178 padding-bottom: 16px;179 border-bottom: 6px solid #4fb3d9;180 width: 100%;181 text-align: center;182 }183 .colon {184 font-size: 70px;185 color: #bdbdbd;186 display: flex;187 align-items: center;188 justify-content: center;189 padding-bottom: 16px;190 }191 .dialog-actions {192 position: absolute;193 bottom: 36px;194 right: 44px;195 display: flex;196 gap: 40px;197 font-size: 44px;198 }199 .action-link { color: #2ea3ff; font-weight: 600; }200 201 /* Bottom ad */202 .ad-wrapper {203 position: absolute;204 left: 60px;205 bottom: 140px;206 width: 960px;207 height: 160px;208 display: flex;209 align-items: center;210 justify-content: center;211 }212 .img-placeholder {213 width: 960px;214 height: 160px;215 background: #E0E0E0;216 border: 1px solid #BDBDBD;217 display: flex;218 justify-content: center;219 align-items: center;220 color: #757575;221 font-size: 40px;222 border-radius: 10px;223 }224 225 /* Home indicator */226 .home-indicator {227 position: absolute;228 bottom: 40px;229 left: 50%;230 transform: translateX(-50%);231 width: 240px;232 height: 16px;233 background: #eaeaea;234 border-radius: 8px;235 opacity: 0.85;236 }237 238 /* Simple icon styles */239 svg { display: block; }240</style>241</head>242<body>243<div id="render-target">244 245 <!-- Status bar -->246 <div class="status-bar">247 <div class="status-left">248 <div style="font-weight: 600;">6:17</div>249 <!-- small dot icons -->250 <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#fff" /></svg>251 <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#fff" /></svg>252 <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#fff" /></svg>253 <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#fff" /></svg>254 <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#fff" /></svg>255 </div>256 <div class="status-right">257 <!-- WiFi -->258 <svg class="status-icon" viewBox="0 0 24 24">259 <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none"/>260 <path d="M5 11c3-3 11-3 14 0" stroke="#fff" stroke-width="2" fill="none"/>261 <path d="M8 14c2-2 6-2 8 0" stroke="#fff" stroke-width="2" fill="none"/>262 <circle cx="12" cy="18" r="2" fill="#fff"/>263 </svg>264 <!-- Battery -->265 <svg class="status-icon" viewBox="0 0 28 24">266 <rect x="2" y="6" width="20" height="12" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"/>267 <rect x="23" y="9" width="3" height="6" fill="#fff"/>268 <rect x="4" y="8" width="14" height="8" fill="#fff"/>269 </svg>270 </div>271 </div>272 273 <!-- App bar -->274 <div class="app-bar">275 <div class="menu-btn">276 <svg width="64" height="64" viewBox="0 0 24 24">277 <path d="M3 6h18M3 12h18M3 18h18" stroke="#fff" stroke-width="2" stroke-linecap="round"/>278 </svg>279 </div>280 <div class="title">Tasks</div>281 <div class="actions">282 <!-- Add reminder icon (plus in alarm circle) -->283 <svg class="action-icon" viewBox="0 0 24 24">284 <circle cx="12" cy="12" r="9" stroke="#cfe3ef" stroke-width="2" fill="none"/>285 <path d="M12 8v8M8 12h8" stroke="#cfe3ef" stroke-width="2" stroke-linecap="round"/>286 </svg>287 <!-- Check circle -->288 <svg class="action-icon" viewBox="0 0 24 24">289 <circle cx="12" cy="12" r="9" stroke="#cfe3ef" stroke-width="2" fill="none"/>290 <path d="M7 12l3 3 7-7" stroke="#cfe3ef" stroke-width="2" fill="none" stroke-linecap="round"/>291 </svg>292 <!-- Search -->293 <svg class="action-icon" viewBox="0 0 24 24">294 <circle cx="11" cy="11" r="7" stroke="#cfe3ef" stroke-width="2" fill="none"/>295 <path d="M16 16l5 5" stroke="#cfe3ef" stroke-width="2" stroke-linecap="round"/>296 </svg>297 </div>298 </div>299 300 <!-- Alert row -->301 <div class="alert-row">302 <svg width="48" height="48" viewBox="0 0 24 24">303 <circle cx="12" cy="12" r="10" fill="#d32f2f"/>304 <rect x="11" y="6" width="2" height="8" fill="#fff"/>305 <rect x="11" y="15" width="2" height="2" fill="#fff"/>306 </svg>307 <div>Please allow app to send you notification</div>308 <div class="enable-btn">Enable</div>309 </div>310 311 <!-- Background list hint -->312 <div class="list-area">313 <div class="list-item">314 <svg width="48" height="48" viewBox="0 0 24 24">315 <rect x="3" y="6" width="18" height="14" rx="2" ry="2" stroke="#787878" stroke-width="2" fill="none"/>316 <path d="M3 9h18" stroke="#787878" stroke-width="2"/>317 </svg>318 <div>Sample task row</div>319 </div>320 <div class="list-item">321 <svg width="48" height="48" viewBox="0 0 24 24">322 <circle cx="12" cy="12" r="9" stroke="#787878" stroke-width="2" fill="none"/>323 <path d="M12 7v6l4 2" stroke="#787878" stroke-width="2" fill="none"/>324 </svg>325 <div>Reminder details</div>326 </div>327 <div class="list-item">328 <svg width="48" height="48" viewBox="0 0 24 24">329 <path d="M4 13h16M10 7h8M6 19h12" stroke="#787878" stroke-width="2" stroke-linecap="round"/>330 </svg>331 <div>Repeat: No repeat</div>332 </div>333 </div>334 335 <!-- Dim overlay -->336 <div class="overlay"></div>337 338 <!-- Add Reminder sheet header -->339 <div class="sheet">340 <div class="sheet-header">341 <svg width="50" height="50" viewBox="0 0 24 24">342 <path d="M6 6l12 12M18 6L6 18" stroke="#d7ecfa" stroke-width="2" stroke-linecap="round"/>343 </svg>344 <div class="title" style="font-size:50px;">Add Reminder</div>345 <div class="save-btn">SAVE</div>346 </div>347 </div>348 349 <!-- Time picker dialog -->350 <div class="time-dialog">351 <div class="spinner">352 <div class="col">353 <div class="prev">5</div>354 <div class="active">6</div>355 <div class="next">7</div>356 </div>357 <div class="colon">:</div>358 <div class="col">359 <div class="prev">14</div>360 <div class="active">15</div>361 <div class="next">16</div>362 </div>363 <div class="col">364 <div class="prev">AM</div>365 <div class="active">PM</div>366 <div class="next" style="opacity:0;"> </div>367 </div>368 </div>369 370 <div class="dialog-actions">371 <div class="action-link" style="opacity:0.9;">CANCEL</div>372 <div class="action-link">OK</div>373 </div>374 </div>375 376 <!-- Bottom ad placeholder -->377 <div class="ad-wrapper">378 <div class="img-placeholder">[IMG: Ad banner - The Grand Sale]</div>379 </div>380 381 <!-- Home indicator -->382 <div class="home-indicator"></div>383 384</div>385</body>386</html>