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, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #111316;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    background: #0E4A80;25    color: #ffffff;26    display: flex;27    align-items: center;28    padding: 0 36px;29    box-sizing: border-box;30    font-weight: 600;31  }32  .status-time { font-size: 42px; margin-right: 24px; }33  .status-icons-left { display: flex; gap: 20px; margin-right: auto; }34  .status-dot {35    width: 28px; height: 28px; border-radius: 6px;36    border: 2px solid rgba(255,255,255,0.6);37    opacity: 0.9;38  }39  .status-icons-right { display: flex; gap: 28px; align-items: center; }40  .status-icons-right svg { fill: none; stroke: #fff; stroke-width: 4; }41 42  /* App bar */43  .app-bar {44    position: absolute;45    top: 120px;46    left: 0;47    width: 1080px;48    height: 160px;49    background: #0E4A80;50    color: #e9f3ff;51    display: flex;52    align-items: center;53    padding: 0 36px;54    box-sizing: border-box;55  }56  .app-actions {57    margin-left: auto;58    display: flex;59    align-items: center;60    gap: 42px;61  }62  .app-title {63    font-size: 64px;64    font-weight: 600;65    margin-left: 28px;66  }67  .icon-btn svg { stroke: #cfe3ff; fill: none; stroke-width: 4; }68 69  /* Notice banner */70  .notice-banner {71    position: absolute;72    top: 280px;73    left: 0;74    width: 1080px;75    padding: 24px 36px;76    box-sizing: border-box;77    display: flex;78    align-items: center;79    gap: 24px;80  }81  .notice-text {82    color: #d9534f;83    font-size: 40px;84    flex: 1;85  }86  .notice-btn {87    background: #1E73B8;88    color: #eaf4ff;89    padding: 18px 26px;90    border-radius: 10px;91    font-size: 38px;92    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);93  }94  .notice-icon {95    width: 48px; height: 48px; border-radius: 50%;96    background: #ff4b4b; color: #fff;97    display: flex; align-items: center; justify-content: center;98    font-weight: 700;99  }100 101  /* Background list area */102  .content-bg {103    position: absolute;104    top: 360px;105    left: 0;106    width: 1080px;107    height: 1730px;108    background: #121212;109  }110 111  /* Underlying "Add Reminder" sheet */112  .reminder-card {113    position: absolute;114    top: 700px;115    left: 60px;116    width: 960px;117    background: #1a1a1a;118    border-radius: 18px;119    box-shadow: 0 20px 60px rgba(0,0,0,0.6);120    overflow: hidden;121    opacity: 0.85;122  }123  .reminder-header {124    background: #1976d2;125    color: #d7ecff;126    display: flex;127    align-items: center;128    padding: 22px 24px;129    font-size: 46px;130    font-weight: 600;131  }132  .reminder-header .close-x {133    width: 44px; height: 44px; border-radius: 8px; border: 3px solid rgba(255,255,255,0.7);134    display: inline-flex; align-items: center; justify-content: center;135    color: #eaf4ff; font-weight: 800; margin-right: 18px;136  }137  .reminder-header .save-btn {138    margin-left: auto;139    background: #e1edf9;140    color: #1b4f7f;141    padding: 10px 22px;142    border-radius: 12px;143    font-size: 40px;144    font-weight: 700;145  }146  .reminder-body {147    padding: 24px;148    color: #bdbdbd;149  }150  .reminder-row {151    height: 70px;152    border-bottom: 1px solid #2b2b2b;153    display: flex;154    align-items: center;155    font-size: 34px;156  }157 158  /* Modal time picker */159  .modal {160    position: absolute;161    top: 960px;162    left: 50%;163    transform: translateX(-50%);164    width: 820px;165    background: #3a3a3a;166    border-radius: 16px;167    box-shadow: 0 20px 60px rgba(0,0,0,0.7);168    padding: 40px 48px;169    color: #bfbfbf;170  }171  .modal-top {172    display: flex;173    justify-content: space-between;174    margin-bottom: 24px;175    font-size: 40px;176    color: #9e9e9e;177  }178  .time-row {179    display: grid;180    grid-template-columns: 1fr 80px 1fr 1fr;181    align-items: center;182    gap: 18px;183    margin: 22px 0 8px;184  }185  .time-value {186    color: #ffffff;187    font-size: 84px;188    font-weight: 600;189    text-align: center;190  }191  .colon {192    color: #b5e5f7;193    font-size: 68px;194    text-align: center;195    font-weight: 700;196  }197  .underline {198    height: 4px;199    background: #2ea4c7;200    margin: 10px 12px 24px;201  }202  .time-row-secondary {203    display: grid;204    grid-template-columns: 1fr 80px 1fr 1fr;205    align-items: center;206    gap: 18px;207    margin-top: 8px;208    color: #8c8c8c;209    font-size: 40px;210    text-align: center;211  }212  .modal-actions {213    display: flex;214    justify-content: flex-end;215    gap: 40px;216    margin-top: 36px;217    font-size: 44px;218    font-weight: 700;219  }220  .action-cancel { color: #1E88E5; }221  .action-ok { color: #1E88E5; }222 223  /* Bottom ad banner */224  .ad-banner {225    position: absolute;226    bottom: 120px;227    left: 0;228    width: 1080px;229    height: 210px;230    background: #E0E0E0;231    border-top: 1px solid #BDBDBD;232    border-bottom: 1px solid #BDBDBD;233    display: flex;234    align-items: center;235    justify-content: center;236    color: #757575;237    font-size: 44px;238  }239 240  /* Gesture bar */241  .gesture-bar {242    position: absolute;243    bottom: 40px;244    left: 50%;245    transform: translateX(-50%);246    width: 300px;247    height: 14px;248    background: #e6e6e6;249    border-radius: 8px;250    opacity: 0.9;251  }252</style>253</head>254<body>255<div id="render-target">256 257  <!-- Status bar -->258  <div class="status-bar">259    <div class="status-time">6:18</div>260    <div class="status-icons-left">261      <div class="status-dot"></div>262      <div class="status-dot"></div>263      <div class="status-dot"></div>264      <div class="status-dot"></div>265      <div style="width:10px;height:10px;border-radius:50%;background:#fff;opacity:0.8;"></div>266    </div>267    <div class="status-icons-right">268      <!-- Wi-Fi -->269      <svg width="44" height="44" viewBox="0 0 24 24">270        <path d="M2 8c5-4 15-4 20 0" />271        <path d="M5 11c4-3 10-3 14 0" />272        <path d="M8 14c3-2 5-2 8 0" />273        <circle cx="12" cy="18" r="1.5" fill="#fff" stroke="none"/>274      </svg>275      <!-- Battery -->276      <svg width="44" height="44" viewBox="0 0 24 24">277        <rect x="2" y="6" width="18" height="12" rx="2" />278        <rect x="20.5" y="9" width="2" height="6" rx="1" />279        <rect x="4" y="8" width="12" height="8" fill="#fff" stroke="none"/>280      </svg>281    </div>282  </div>283 284  <!-- App bar -->285  <div class="app-bar">286    <!-- Hamburger -->287    <div class="icon-btn">288      <svg width="64" height="64" viewBox="0 0 24 24">289        <path d="M3 6h18M3 12h18M3 18h18" />290      </svg>291    </div>292    <div class="app-title">Tasks</div>293    <div class="app-actions">294      <!-- Plus in circle -->295      <div class="icon-btn">296        <svg width="64" height="64" viewBox="0 0 24 24">297          <circle cx="12" cy="12" r="9" />298          <path d="M12 7v10M7 12h10" />299        </svg>300      </div>301      <!-- Check circle -->302      <div class="icon-btn">303        <svg width="64" height="64" viewBox="0 0 24 24">304          <circle cx="12" cy="12" r="9" />305          <path d="M7 12l3 3 7-7" />306        </svg>307      </div>308      <!-- Search -->309      <div class="icon-btn">310        <svg width="64" height="64" viewBox="0 0 24 24">311          <circle cx="10" cy="10" r="6" />312          <path d="M15 15l5 5" />313        </svg>314      </div>315    </div>316  </div>317 318  <!-- Notice banner -->319  <div class="notice-banner">320    <div class="notice-icon">!</div>321    <div class="notice-text">Please allow app to send you notification</div>322    <div class="notice-btn">Enable</div>323  </div>324 325  <!-- Background content area -->326  <div class="content-bg"></div>327 328  <!-- Underlying Add Reminder card -->329  <div class="reminder-card">330    <div class="reminder-header">331      <div class="close-x">×</div>332      <div>Add Reminder</div>333      <div class="save-btn">SAVE</div>334    </div>335    <div class="reminder-body">336      <div class="reminder-row">Title</div>337      <div class="reminder-row">Notes</div>338      <div class="reminder-row">Schedule</div>339      <div class="reminder-row">Repeat: No repeat</div>340    </div>341  </div>342 343  <!-- Modal time picker -->344  <div class="modal">345    <div class="modal-top">346      <div>12</div>347      <div>14</div>348      <div>AM</div>349    </div>350 351    <div class="time-row">352      <div class="time-value">1</div>353      <div class="colon">:</div>354      <div class="time-value">15</div>355      <div class="time-value">PM</div>356    </div>357    <div class="underline"></div>358 359    <div class="time-row-secondary">360      <div>2</div>361      <div></div>362      <div>16</div>363      <div></div>364    </div>365 366    <div class="modal-actions">367      <div class="action-cancel">CANCEL</div>368      <div class="action-ok">OK</div>369    </div>370  </div>371 372  <!-- Bottom ad banner -->373  <div class="ad-banner">[IMG: Advertisement Banner]</div>374 375  <!-- Gesture bar -->376  <div class="gesture-bar"></div>377 378</div>379</body>380</html>