GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Tasks - Time Picker</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: #0e2a53; /* app blue background on top */13 border-radius: 0;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 90px;23 color: #fff;24 padding: 0 28px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 box-sizing: border-box;29 }30 .status-left { font-size: 34px; letter-spacing: 1px; opacity: 0.95; }31 .status-right { display:flex; gap:22px; align-items:center; }32 .dot { width:10px; height:10px; background:#fff; border-radius:50%; opacity:0.9; margin-left:10px; }33 .status-icon {34 width: 36px; height: 36px; opacity: 0.95;35 }36 37 /* App bar */38 .app-bar {39 position: absolute;40 top: 90px;41 left: 0;42 width: 1080px;43 height: 150px;44 background: #1b4f8e;45 color: #fff;46 display: flex;47 align-items: center;48 padding: 0 28px;49 box-sizing: border-box;50 box-shadow: inset 0 -1px rgba(255,255,255,0.06);51 }52 .app-title {53 font-size: 54px;54 font-weight: 700;55 margin-left: 22px;56 }57 .app-actions {58 margin-left: auto;59 display: flex;60 gap: 34px;61 }62 .icon-btn { width:64px; height:64px; display:flex; align-items:center; justify-content:center; border-radius:50%; }63 64 /* Main content background */65 .content {66 position: absolute;67 top: 240px;68 left: 0;69 right: 0;70 bottom: 0;71 background: #0d0f14;72 color: #e9edf5;73 overflow: hidden;74 }75 .scroll {76 position: absolute;77 top: 0;78 left: 0;79 right: 0;80 bottom: 0;81 overflow-y: auto;82 padding-bottom: 280px;83 }84 85 .section-label {86 background: #9b7b00;87 color: #fff4c2;88 font-size: 44px;89 padding: 22px 28px;90 letter-spacing: 0.5px;91 }92 93 .card {94 margin: 18px 26px;95 background: #11161f;96 border-radius: 18px;97 padding: 28px;98 box-shadow: 0 2px 0 rgba(255,255,255,0.04) inset;99 }100 .card-title {101 font-size: 48px;102 font-weight: 700;103 color: #f4f7ff;104 margin-bottom: 16px;105 }106 .meta {107 display: flex;108 gap: 22px;109 color: #a9b4c6;110 font-size: 34px;111 align-items: center;112 }113 .meta span::before{114 content: "•";115 margin-right: 12px;116 color:#6b7c95;117 }118 119 /* Add Reminder sticky bar */120 .reminder-bar {121 position: absolute;122 top: 96px;123 left: 26px;124 right: 26px;125 height: 110px;126 background: #2169d6;127 border-radius: 10px 10px 0 0;128 display: flex;129 align-items: center;130 padding: 0 20px 0 20px;131 box-sizing: border-box;132 }133 .reminder-bar .title {134 color:#fff;135 font-weight:700;136 font-size: 46px;137 margin-left: 18px;138 }139 .save-btn {140 margin-left: auto;141 background: #e6eefc;142 color: #0f3c91;143 font-weight: 700;144 padding: 18px 26px;145 border-radius: 12px;146 font-size: 36px;147 }148 149 /* Floating action button */150 .fab {151 position: absolute;152 right: 36px;153 bottom: 330px;154 width: 130px;155 height: 130px;156 background: #2e86ff;157 border-radius: 50%;158 display:flex;159 align-items:center;160 justify-content:center;161 box-shadow: 0 10px 24px rgba(0,0,0,0.35);162 }163 164 /* Ad banner placeholder */165 .ad {166 position: absolute;167 left: 0;168 right: 0;169 bottom: 82px;170 height: 180px;171 background:#E0E0E0;172 border-top: 1px solid #BDBDBD;173 display:flex;174 align-items:center;175 justify-content:center;176 color:#757575;177 font-size: 40px;178 }179 180 /* Android gesture bar */181 .gesture {182 position: absolute;183 bottom: 22px;184 left: 50%;185 transform: translateX(-50%);186 width: 280px;187 height: 10px;188 background: #ffffff;189 opacity: 0.85;190 border-radius: 6px;191 }192 193 /* Dim overlay for dialog */194 .dim {195 position: absolute;196 left:0; right:0; top:0; bottom:0;197 background: rgba(0,0,0,0.55);198 }199 200 /* Time picker dialog */201 .dialog {202 position: absolute;203 width: 880px;204 height: 720px;205 left: 100px;206 top: 720px;207 background: #2a2e37;208 border-radius: 10px;209 box-shadow: 0 20px 60px rgba(0,0,0,0.6);210 color: #dfe6f3;211 padding: 36px 40px;212 box-sizing: border-box;213 }214 215 .spinner-head {216 display:flex;217 justify-content: space-between;218 align-items:center;219 padding: 8px 12px 18px;220 color:#a7b0c0;221 letter-spacing: 2px;222 }223 224 .spinners {225 margin-top: 16px;226 display: grid;227 grid-template-columns: 1fr 1fr 1fr;228 gap: 26px;229 align-items: center;230 }231 232 .col {233 height: 280px;234 background: #20242c;235 border-radius: 6px;236 position: relative;237 overflow: hidden;238 box-shadow: inset 0 -2px 0 rgba(255,255,255,0.05), inset 0 2px 0 rgba(255,255,255,0.05);239 }240 .col .row {241 height: 70px;242 display:flex;243 align-items:center;244 justify-content:center;245 font-size: 52px;246 color:#b9c4d3;247 }248 .col .row.sel {249 color:#ffffff;250 border-top: 4px solid #2c9bff;251 border-bottom: 4px solid #2c9bff;252 background: #263042;253 }254 255 .ampm {256 text-align:center;257 font-size: 58px;258 }259 260 .dialog-actions {261 position: absolute;262 right: 40px;263 bottom: 26px;264 display:flex;265 gap: 46px;266 font-size: 42px;267 }268 .btn-text { color:#6fb0ff; }269 .btn-strong { color:#4aa3ff; font-weight: 700; }270 271 /* lines under selected row (visual) */272 .col::before,273 .col::after{274 content:"";275 position:absolute;276 left:0; right:0;277 height:4px;278 background:#2c9bff;279 opacity:0.8;280 }281 .col::before{ top: 104px; }282 .col::after { top: 178px; }283</style>284</head>285<body>286<div id="render-target">287 288 <!-- Status bar -->289 <div class="status-bar">290 <div class="status-left">6:51 <span class="dot"></span><span class="dot"></span><span class="dot"></span></div>291 <div class="status-right">292 <!-- WiFi icon -->293 <svg class="status-icon" viewBox="0 0 24 24" fill="#fff"><path d="M12 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6.6-7.2a10 10 0 0 0-13.2 0l1.6 1.2a8 8 0 0 1 10 0l1.6-1.2zm3-3.2A16 16 0 0 0 2.4 9.6l1.6 1.2a14 14 0 0 1 16 0l1.6-1.2z"/></svg>294 <!-- Battery icon -->295 <svg class="status-icon" viewBox="0 0 24 24" fill="#fff"><path d="M17 6h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2v-2h2V8h-2V6z"/><rect x="3" y="7" width="12" height="10" rx="2" ry="2" stroke="#fff" fill="none" stroke-width="2"/></svg>296 </div>297 </div>298 299 <!-- App bar -->300 <div class="app-bar">301 <!-- Hamburger -->302 <div class="icon-btn">303 <svg width="52" height="52" viewBox="0 0 24 24" fill="#ffffff"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>304 </div>305 <div class="app-title">Tasks</div>306 <div class="app-actions">307 <div class="icon-btn">308 <svg width="56" height="56" viewBox="0 0 24 24" fill="#ffffff"><circle cx="12" cy="12" r="10" stroke="#fff" fill="none" stroke-width="2"/><path d="M12 7v10M7 12h10" stroke="#fff" stroke-width="2"/></svg>309 </div>310 <div class="icon-btn">311 <svg width="56" height="56" viewBox="0 0 24 24" fill="#ffffff"><path d="M9 16.2l-3.5-3.5 1.4-1.4L9 13.4l7.1-7.1 1.4 1.4z"/></svg>312 </div>313 <div class="icon-btn">314 <svg width="56" height="56" viewBox="0 0 24 24" fill="#ffffff"><path d="M10 2a8 8 0 105.3 14.1l4.3 4.3 1.4-1.4-4.3-4.3A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z"/></svg>315 </div>316 </div>317 </div>318 319 <!-- Content area -->320 <div class="content">321 <div class="scroll">322 323 <!-- Add Reminder bar overlapping content (as in screenshot) -->324 <div class="reminder-bar">325 <svg width="48" height="48" viewBox="0 0 24 24" fill="#ffffff"><path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/></svg>326 <div class="title">Add Reminder</div>327 <div class="save-btn">SAVE</div>328 </div>329 330 <div class="section-label">Tomorrow</div>331 332 <div class="card">333 <div class="card-title">Catch Subway</div>334 <div class="meta">335 <span>08:00 AM</span>336 <span>1 day</span>337 <span>Thu, Sep 28, 2023</span>338 </div>339 </div>340 341 <div class="card">342 <div class="card-title">Yoga classes</div>343 </div>344 345 <div class="card">346 <div class="card-title">Dance performance</div>347 </div>348 349 <div class="card">350 <div class="card-title">Christmas Dinner with family</div>351 <div class="meta">352 <span>10:30 PM</span>353 <span>Once</span>354 <span>Mon, Dec 25, 2023</span>355 </div>356 </div>357 358 <div class="card">359 <div class="card-title">Cooking Lunch</div>360 <div class="meta">361 <span>02:00 PM</span>362 <span>Once</span>363 </div>364 </div>365 366 <!-- Red note under reminder -->367 <div style="margin: 18px 28px; color:#ff6a6a; font-size:34px;">368 NOTE: You can change a Date Time picker from app settings.369 </div>370 371 </div>372 373 <!-- Floating action button -->374 <div class="fab">375 <svg width="70" height="70" viewBox="0 0 24 24" fill="#fff"><path d="M11 5h2v14h-2zM5 11h14v2H5z"/></svg>376 </div>377 378 <!-- Ad banner -->379 <div class="ad">[IMG: Ad Banner]</div>380 <div class="gesture"></div>381 </div>382 383 <!-- Modal overlay -->384 <div class="dim"></div>385 <div class="dialog">386 <div class="spinner-head">387 <div>12</div>388 <div>29</div>389 <div>AM</div>390 </div>391 392 <div style="display:flex; justify-content:center; gap:40px; color:#7aaeff; font-size:62px; margin:10px 0 0 0;">393 <div>1</div><div>:</div><div>30</div><div>PM</div>394 </div>395 396 <div class="spinners">397 <!-- hours -->398 <div class="col">399 <div class="row">12</div>400 <div class="row sel">1</div>401 <div class="row">2</div>402 </div>403 404 <!-- minutes -->405 <div class="col">406 <div class="row">29</div>407 <div class="row sel">30</div>408 <div class="row">31</div>409 </div>410 411 <!-- AM/PM -->412 <div class="col">413 <div class="row">AM</div>414 <div class="row sel">PM</div>415 <div class="row">AM</div>416 </div>417 </div>418 419 <div class="dialog-actions">420 <div class="btn-text">CANCEL</div>421 <div class="btn-strong">OK</div>422 </div>423 </div>424 425</div>426</body>427</html>