GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Tasks - Time Picker</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    border-radius: 0;16    box-shadow: none;17    color: #eaeaea;18  }19 20  /* Status bar */21  .status-bar {22    position: absolute;23    top: 0;24    left: 0;25    width: 1080px;26    height: 90px;27    background: #0f4d83;28    color: #ffffff;29    display: flex;30    align-items: center;31    padding: 0 32px;32    box-sizing: border-box;33    font-size: 34px;34    letter-spacing: 0.5px;35  }36  .status-bar .right {37    margin-left: auto;38    display: flex;39    align-items: center;40    gap: 22px;41  }42  .status-icon {43    width: 36px; height: 36px;44  }45 46  /* App bar */47  .app-bar {48    position: absolute;49    top: 90px;50    left: 0;51    width: 1080px;52    height: 150px;53    background: #0f4d83;54    display: flex;55    align-items: center;56    padding: 0 36px;57    box-sizing: border-box;58  }59  .hamburger {60    width: 60px; height: 60px; margin-right: 24px;61  }62  .app-title {63    font-size: 64px;64    color: #c6e3ff;65    font-weight: 600;66  }67  .actions {68    margin-left: auto;69    display: flex;70    align-items: center;71    gap: 42px;72  }73  .app-icon { width: 60px; height: 60px; opacity: 0.9; }74 75  /* Warning banner */76  .warning {77    position: absolute;78    top: 240px;79    left: 0;80    width: 1080px;81    height: 90px;82    background: #1b1b1b;83    display: flex;84    align-items: center;85    padding: 0 36px;86    box-sizing: border-box;87    border-top: 1px solid #222;88    border-bottom: 1px solid #222;89  }90  .warning .text {91    color: #e53935;92    font-size: 34px;93    display: flex;94    align-items: center;95    gap: 18px;96  }97  .warning .enable-btn {98    margin-left: auto;99    background: #1e6fbf;100    color: #e7f0ff;101    padding: 16px 32px;102    border-radius: 8px;103    font-size: 34px;104    box-shadow: inset 0 -2px 0 rgba(0,0,0,.25);105  }106 107  /* Underlying reminder header (behind dialog) */108  .reminder-header {109    position: absolute;110    top: 540px;111    left: 60px;112    width: 960px;113    height: 110px;114    background: #0f6fb5;115    border-radius: 10px 10px 0 0;116    display: flex;117    align-items: center;118    padding: 0 24px;119    box-shadow: 0 20px 50px rgba(0,0,0,0.5);120    box-sizing: border-box;121  }122  .reminder-header .title {123    font-size: 46px;124    font-weight: 600;125    color: #d6ecff;126    margin-left: 18px;127  }128  .reminder-header .save {129    margin-left: auto;130    background: #e0eef8;131    color: #0f4d83;132    padding: 14px 26px;133    border-radius: 10px;134    font-weight: 700;135    font-size: 36px;136  }137 138  /* Modal overlay */139  .overlay {140    position: absolute;141    top: 0; left: 0;142    width: 1080px; height: 2400px;143    background: rgba(0,0,0,0.6);144  }145  .dialog {146    position: absolute;147    top: 820px;148    left: 150px;149    width: 780px;150    height: 620px;151    background: #3f3f3f;152    border-radius: 12px;153    box-shadow: 0 18px 50px rgba(0,0,0,0.6);154    padding: 40px 50px;155    box-sizing: border-box;156  }157  .dialog .top-row {158    display: flex;159    justify-content: space-between;160    color: #bdbdbd;161    font-size: 38px;162    margin-bottom: 30px;163  }164  .picker {165    display: grid;166    grid-template-columns: 1fr 100px 1fr 1.2fr;167    align-items: center;168    column-gap: 20px;169    margin-bottom: 22px;170  }171  .picker .value {172    font-size: 88px;173    color: #ffffff;174    text-align: center;175  }176  .picker .colon {177    font-size: 80px;178    color: #bdbdbd;179    text-align: center;180  }181  .picker .line {182    height: 4px;183    background: #3ab1d6;184    margin-top: 14px;185    margin-bottom: 22px;186  }187  .picker-lines {188    display: grid;189    grid-template-columns: 1fr 100px 1fr 1.2fr;190    column-gap: 20px;191    align-items: center;192  }193  .picker-lines .below {194    color: #a6a6a6;195    font-size: 44px;196    text-align: center;197    padding-top: 10px;198  }199  .dialog .actions {200    position: absolute;201    bottom: 30px;202    right: 50px;203    display: flex;204    gap: 38px;205    font-size: 40px;206    color: #2ea2ff;207    font-weight: 600;208  }209 210  /* Bottom ad */211  .ad-bar {212    position: absolute;213    bottom: 140px;214    left: 0;215    width: 1080px;216    height: 160px;217    background: #1b1b1b;218    display: flex;219    align-items: center;220    padding: 0 24px;221    box-sizing: border-box;222  }223  .ad-content {224    width: 1032px;225    height: 140px;226    background: #17a85b;227    border-radius: 8px;228    display: flex;229    align-items: center;230    padding: 20px;231    box-sizing: border-box;232    color: #eafff3;233    font-size: 42px;234    font-weight: 700;235    gap: 20px;236  }237  .ad-img {238    width: 170px;239    height: 100px;240    background: #E0E0E0;241    border: 1px solid #BDBDBD;242    display: flex;243    justify-content: center;244    align-items: center;245    color: #757575;246    font-size: 26px;247    border-radius: 6px;248  }249  .ad-cta {250    margin-left: auto;251    background: #106d2f;252    color: #eafff3;253    padding: 12px 22px;254    border-radius: 8px;255    font-size: 34px;256    font-weight: 700;257  }258 259  /* Gesture pill */260  .gesture {261    position: absolute;262    bottom: 40px;263    left: 50%;264    transform: translateX(-50%);265    width: 300px;266    height: 12px;267    background: #cfcfcf;268    border-radius: 20px;269    opacity: 0.6;270  }271</style>272</head>273<body>274<div id="render-target">275 276  <!-- Status bar -->277  <div class="status-bar">278    <div>6:18</div>279    <div class="right">280      <!-- simple dots to mimic small icons -->281      <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#fff"/></svg>282      <svg class="status-icon" viewBox="0 0 24 24"><rect x="4" y="8" width="16" height="10" rx="2" fill="#fff"/></svg>283      <svg class="status-icon" viewBox="0 0 24 24"><path d="M3 18h18v2H3z" fill="#fff"/><path d="M6 10h12v8H6z" fill="#fff"/></svg>284    </div>285  </div>286 287  <!-- App bar -->288  <div class="app-bar">289    <svg class="hamburger" viewBox="0 0 24 24">290      <path d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z" fill="#c6e3ff"/>291    </svg>292    <div class="app-title">Tasks</div>293    <div class="actions">294      <!-- add reminder icon (plus in alarm) -->295      <svg class="app-icon" viewBox="0 0 24 24">296        <circle cx="12" cy="14" r="6" fill="none" stroke="#cdd8e6" stroke-width="2"/>297        <path d="M12 11v6M9 14h6" stroke="#cdd8e6" stroke-width="2" stroke-linecap="round"/>298        <path d="M6 6l3 2M18 6l-3 2" stroke="#cdd8e6" stroke-width="2" stroke-linecap="round"/>299      </svg>300      <!-- check circle -->301      <svg class="app-icon" viewBox="0 0 24 24">302        <circle cx="12" cy="12" r="9" fill="none" stroke="#cdd8e6" stroke-width="2"/>303        <path d="M7 12l3 3 6-6" stroke="#cdd8e6" stroke-width="2" fill="none" stroke-linecap="round"/>304      </svg>305      <!-- search -->306      <svg class="app-icon" viewBox="0 0 24 24">307        <circle cx="11" cy="11" r="6" fill="none" stroke="#cdd8e6" stroke-width="2"/>308        <path d="M16 16l5 5" stroke="#cdd8e6" stroke-width="2" stroke-linecap="round"/>309      </svg>310    </div>311  </div>312 313  <!-- Warning banner -->314  <div class="warning">315    <div class="text">316      <svg width="40" height="40" viewBox="0 0 24 24">317        <circle cx="12" cy="12" r="10" fill="#e53935"/>318        <rect x="11" y="6" width="2" height="8" fill="#fff"/>319        <rect x="11" y="15.5" width="2" height="2.5" fill="#fff"/>320      </svg>321      <span>Please allow app to send you notification</span>322    </div>323    <div class="enable-btn">Enable</div>324  </div>325 326  <!-- Underlying reminder header -->327  <div class="reminder-header">328    <svg width="42" height="42" viewBox="0 0 24 24">329      <path d="M6 6l12 12M18 6L6 18" stroke="#d6ecff" stroke-width="2" stroke-linecap="round"/>330    </svg>331    <div class="title">Add Reminder</div>332    <div class="save">SAVE</div>333  </div>334 335  <!-- Modal overlay and dialog -->336  <div class="overlay"></div>337  <div class="dialog">338    <div class="top-row">339      <div>12</div>340      <div>16</div>341      <div>AM</div>342    </div>343 344    <div class="picker">345      <div class="value">1</div>346      <div class="colon">:</div>347      <div class="value">17</div>348      <div class="value">PM</div>349    </div>350    <div class="picker">351      <div class="line"></div>352      <div class="line" style="opacity:0"></div>353      <div class="line"></div>354      <div class="line"></div>355    </div>356    <div class="picker-lines">357      <div class="below">2</div>358      <div class="below"></div>359      <div class="below">18</div>360      <div class="below"></div>361    </div>362 363    <div class="actions">364      <div>CANCEL</div>365      <div>OK</div>366    </div>367  </div>368 369  <!-- Bottom ad -->370  <div class="ad-bar">371    <div class="ad-content">372      <div class="ad-img">[IMG: Milk Product Ad]</div>373      <div>Cow Milk at ₹25.5/Packet</div>374      <div class="ad-cta">Start VIP Trial @ ₹35</div>375    </div>376  </div>377 378  <!-- Gesture pill -->379  <div class="gesture"></div>380</div>381</body>382</html>