GD-ML/AndroidCode

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    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0b2e5a;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: 110px;23    background: #123866;24    display: flex;25    align-items: center;26    padding: 0 28px;27    box-sizing: border-box;28  }29  .status-time {30    font-size: 40px;31    letter-spacing: 1px;32  }33  .status-icons {34    margin-left: auto;35    display: flex;36    gap: 26px;37    align-items: center;38  }39  .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.85; }40  .wifi, .battery, .signal {41    width: 40px; height: 40px; opacity: 0.9;42  }43  .wifi svg, .battery svg, .signal svg { width: 100%; height: 100%; fill: #fff; }44 45  /* App bar */46  .app-bar {47    position: absolute;48    top: 110px;49    left: 0;50    width: 1080px;51    height: 150px;52    background: #16497c;53    display: flex;54    align-items: center;55    padding: 0 30px;56    box-sizing: border-box;57    border-bottom: 1px solid rgba(255,255,255,0.1);58  }59  .hamburger {60    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;61    margin-right: 18px;62  }63  .hamburger svg { width: 52px; height: 52px; stroke: #fff; stroke-width: 8; fill: none; }64  .title {65    font-size: 64px; font-weight: 700;66  }67  .app-bar-actions {68    margin-left: auto; display: flex; gap: 26px; align-items: center;69  }70  .action-ic { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; }71  .action-ic svg { width: 60px; height: 60px; fill: none; stroke: #fff; stroke-width: 6; }72 73  /* Main list background */74  .list-area {75    position: absolute;76    top: 260px;77    left: 0;78    width: 1080px;79    height: 2140px;80    background: #0e1116;81  }82 83  .section-header {84    width: 1080px;85    height: 80px;86    background: #b38a08;87    color: #0b0b0b;88    font-weight: 700;89    display: flex; align-items: center;90    padding: 0 28px; box-sizing: border-box;91    font-size: 46px;92  }93 94  .card {95    margin: 18px 24px;96    background: #14171d;97    border-radius: 18px;98    box-shadow: 0 6px 14px rgba(0,0,0,0.35);99    padding: 28px;100  }101  .card-title { font-size: 56px; margin-bottom: 8px; }102  .meta {103    display: flex; gap: 26px; align-items: center; color: #c8d0e0; font-size: 34px; opacity: 0.8;104  }105 106  .subheader {107    font-size: 50px; color: #bfc7d6; margin: 26px 28px 8px;108  }109 110  /* Add Reminder bar behind dialog */111  .reminder-bar {112    margin: 8px 24px;113    background: #1a66a8;114    border-radius: 10px 10px 0 0;115    padding: 22px 26px;116    display: flex; align-items: center;117  }118  .reminder-bar .label { font-size: 44px; font-weight: 700; }119  .save-btn {120    margin-left: auto;121    background: #e1edf9;122    color: #0b3b76;123    font-weight: 700;124    padding: 16px 26px;125    border-radius: 12px;126    font-size: 36px;127  }128  .field {129    margin: 0 24px 18px;130    background: #101419;131    border-bottom: 1px solid #2e3a4a;132    padding: 24px 26px;133    font-size: 50px;134    color: #e8edf7;135  }136 137  .note {138    margin: 14px 28px;139    color: #ff5a5a;140    font-size: 34px;141  }142 143  /* Bottom ad placeholder */144  .ad-bar {145    position: absolute;146    bottom: 0;147    left: 0;148    width: 1080px;149    height: 180px;150    background: #e0e0e0;151    border-top: 1px solid #bdbdbd;152    display: flex; align-items: center; justify-content: space-between;153    padding: 0 24px; box-sizing: border-box;154    color: #4b4b4b;155    font-size: 46px;156  }157  .ad-open {158    background: #2ecc71;159    color: #fff;160    padding: 18px 36px;161    border-radius: 40px;162    font-weight: 700;163    font-size: 40px;164  }165 166  /* Overlay and time picker dialog */167  .overlay {168    position: absolute;169    top: 110px; /* cover below status bar */170    left: 0;171    width: 1080px;172    height: 2290px;173    background: rgba(0,0,0,0.55);174  }175  .dialog {176    position: absolute;177    top: 760px;178    left: 115px;179    width: 850px;180    height: 760px;181    background: #2c2f34;182    border-radius: 18px;183    box-shadow: 0 20px 50px rgba(0,0,0,0.6);184    padding: 40px 40px 120px;185    box-sizing: border-box;186  }187  .wheels {188    display: grid;189    grid-template-columns: 1fr 40px 1fr 1fr;190    align-items: center;191    gap: 30px;192    margin-top: 50px;193  }194  .wheel {195    height: 360px;196    position: relative;197    color: #9fb2c8;198    text-align: center;199  }200  .wheel .top { position: absolute; top: 10px; left: 0; right: 0; font-size: 54px; opacity: 0.6; }201  .wheel .selected {202    position: absolute; top: 140px; left: 0; right: 0;203    font-size: 80px; color: #cfe3ff; font-weight: 700;204    padding-bottom: 20px;205    border-bottom: 6px solid #4aa3ff;206  }207  .colon {208    text-align: center; font-size: 80px; color: #cfe3ff; font-weight: 700; margin-top: 160px;209  }210  .buttons {211    position: absolute;212    bottom: 26px; right: 28px;213    display: flex; gap: 40px; align-items: center;214  }215  .btn {216    font-size: 46px; color: #59a8ff;217  }218</style>219</head>220<body>221<div id="render-target">222 223  <!-- Status Bar -->224  <div class="status-bar">225    <div class="status-time">6:51</div>226    <div class="status-icons">227      <div class="dot"></div>228      <div class="dot"></div>229      <div class="dot"></div>230      <div class="dot"></div>231      <div class="wifi">232        <svg viewBox="0 0 24 24"><path d="M12 20c.8 0 1.5-.7 1.5-1.5S12.8 17 12 17s-1.5.7-1.5 1.5S11.2 20 12 20zm6.3-5.5 1.4-1.4A12 12 0 0 0 12 9c-3 0-5.8 1.1-7.7 4.1l1.4 1.4A8.9 8.9 0 0 1 12 11c2.6 0 5 .9 6.3 3.5zm-3.3 3.3 1.4-1.4A8.2 8.2 0 0 0 12 13a8.2 8.2 0 0 0-4.4 1.9l1.4 1.4A6.1 6.1 0 0 1 12 15c1.5 0 3 .5 3.9 1.8z"/></svg>233      </div>234      <div class="battery">235        <svg viewBox="0 0 24 24"><rect x="2" y="7" width="18" height="10" rx="2" ry="2" fill="#fff"/><rect x="20" y="10" width="2" height="4" fill="#fff"/></svg>236      </div>237    </div>238  </div>239 240  <!-- App Bar -->241  <div class="app-bar">242    <div class="hamburger">243      <svg viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18"/></svg>244    </div>245    <div class="title">Tasks</div>246    <div class="app-bar-actions">247      <div class="action-ic">248        <svg viewBox="0 0 24 24"><circle cx="12" cy="13" r="7" stroke="#fff"/><path d="M12 6V2M12 13V9"/></svg>249      </div>250      <div class="action-ic">251        <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="7"/><path d="M15 15l6 6" stroke="#fff"/></svg>252      </div>253    </div>254  </div>255 256  <!-- Main content list -->257  <div class="list-area">258    <div class="section-header">Tomorrow</div>259 260    <div class="card">261      <div class="card-title">Catch Subway</div>262      <div class="meta">263        <span>08:00 AM</span>264        <span>1 day</span>265        <span>Thu, Sep 28, 2023</span>266      </div>267    </div>268 269    <div class="subheader">Yoga classes</div>270 271    <div class="reminder-bar">272      <div class="label">Add Reminder</div>273      <div class="save-btn">SAVE</div>274    </div>275    <div class="field">Dance performance</div>276 277    <div class="card">278      <div class="card-title">Christmas Dinner with family</div>279      <div class="meta"><span>10:30 PM</span><span>Once</span><span>Mon, Dec 25, 2023</span></div>280    </div>281 282    <div class="card">283      <div class="card-title">Cooking Lunch</div>284      <div class="meta"><span>02:00 PM</span><span>Once</span></div>285    </div>286 287    <div class="note">NOTE: You can change a Date Time picker from app settings.</div>288  </div>289 290  <!-- Semi-transparent overlay + time picker dialog -->291  <div class="overlay">292    <div class="dialog">293      <div class="wheels">294        <div class="wheel">295          <div class="top">12</div>296          <div class="selected">1</div>297        </div>298        <div class="colon">:</div>299        <div class="wheel">300          <div class="top">30</div>301          <div class="selected">31</div>302        </div>303        <div class="wheel">304          <div class="top">AM</div>305          <div class="selected">PM</div>306        </div>307      </div>308      <div class="buttons">309        <div class="btn">CANCEL</div>310        <div class="btn">OK</div>311      </div>312    </div>313  </div>314 315  <!-- Bottom ad -->316  <div class="ad-bar">317    <div>[IMG: Ad Banner - Omio]</div>318    <div class="ad-open">Open</div>319  </div>320 321</div>322</body>323</html>