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>Timeline UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #111317;15    color: #EAEAF0;16  }17 18  /* Top segmented bar */19  .top-pill {20    position: absolute;21    top: 140px;22    left: 60px;23    width: 960px;24    height: 96px;25    background: #6436C6;26    border-radius: 24px;27    display: flex;28    align-items: center;29    padding: 0 32px;30    box-sizing: border-box;31  }32  .top-pill span {33    font-size: 38px;34    font-weight: 600;35    color: #EEE2FF;36    opacity: 0.95;37  }38  .top-pill .right {39    margin-left: auto;40  }41 42  /* Dates list */43  .content {44    position: absolute;45    top: 280px;46    left: 60px;47    right: 60px;48  }49  .day {50    font-size: 44px;51    font-weight: 700;52    margin: 48px 0 8px 0;53    color: #DDE0E6;54  }55  /* Task item */56  .task-row {57    display: flex;58    align-items: flex-start;59    margin-top: 20px;60    margin-left: 0;61  }62  .task-row .circle {63    width: 54px;64    height: 54px;65    border-radius: 50%;66    border: 4px solid #6E7AFF;67    margin-right: 24px;68    box-sizing: border-box;69  }70  .task-title {71    font-size: 40px;72    font-weight: 600;73    color: #E9ECF6;74  }75  .task-meta {76    display: flex;77    align-items: center;78    gap: 16px;79    margin-top: 12px;80    color: #9AA1AD;81    font-size: 30px;82  }83  .task-meta svg { width: 36px; height: 36px; fill: none; stroke: #9AA1AD; stroke-width: 3; }84 85  /* Today summary */86  .today-title {87    text-align: center;88    font-size: 60px;89    font-weight: 800;90    margin-top: 140px;91    color: #F0F3FA;92  }93  .stats {94    display: flex;95    justify-content: space-between;96    margin-top: 40px;97    padding: 0 30px;98  }99  .card {100    width: 320px;101    height: 220px;102    background: #1A1D23;103    border-radius: 32px;104    box-shadow: 0 18px 34px rgba(0,0,0,0.35);105    display: flex;106    flex-direction: column;107    align-items: center;108    justify-content: center;109  }110  .card .num {111    font-size: 70px;112    font-weight: 800;113    color: #F0F3FA;114    margin-bottom: 8px;115  }116  .card .label {117    font-size: 34px;118    color: #B8BFCA;119  }120 121  /* Illustration placeholder */122  .illustration {123    position: absolute;124    left: 315px;125    top: 1640px;126    width: 450px;127    height: 280px;128    background: #E0E0E0;129    border: 1px solid #BDBDBD;130    display: flex;131    justify-content: center;132    align-items: center;133    color: #757575;134    border-radius: 12px;135  }136 137  /* Floating add button */138  .fab {139    position: absolute;140    right: 60px;141    top: 1620px;142    width: 150px;143    height: 150px;144    border-radius: 32px;145    background: #0B57D0;146    display: flex;147    justify-content: center;148    align-items: center;149    box-shadow: 0 18px 34px rgba(11,87,208,0.45);150  }151  .fab svg { width: 80px; height: 80px; stroke: #FFFFFF; stroke-width: 10; }152 153  /* Bottom nav bar */154  .bottom-bar {155    position: absolute;156    left: 0;157    bottom: 0;158    width: 1080px;159    height: 220px;160    background: #25282E;161    box-shadow: 0 -8px 24px rgba(0,0,0,0.4);162    display: flex;163    align-items: center;164    justify-content: space-around;165    padding-bottom: 26px;166    box-sizing: border-box;167  }168  .nav-item {169    width: 220px;170    text-align: center;171    color: #C7CCD6;172    font-size: 32px;173  }174  .nav-item .icon-wrap {175    width: 160px;176    height: 86px;177    margin: 0 auto 10px;178    border-radius: 36px;179    display: flex;180    align-items: center;181    justify-content: center;182  }183  .nav-item svg { width: 64px; height: 64px; fill: none; stroke: #C7CCD6; stroke-width: 4; }184  .nav-item.active .icon-wrap {185    background: #3A3F48;186  }187  .nav-item.active svg {188    stroke: #EAF0FF;189  }190  .nav-label { opacity: 0.95; }191 192  /* Small divider line to hint the gesture bar above */193  .gesture {194    position: absolute;195    left: 420px;196    bottom: 12px;197    width: 240px;198    height: 10px;199    background: #C9CDD6;200    border-radius: 5px;201    opacity: 0.55;202  }203</style>204</head>205<body>206<div id="render-target">207 208  <div class="top-pill">209    <span>Later</span>210    <span class="right">Settings</span>211  </div>212 213  <div class="content">214    <div class="day">Fri, Jul 21</div>215    <div class="day">Sat, Jul 22</div>216    <div class="day">Sun, Jul 23</div>217    <div class="day">Mon, Jul 24</div>218 219    <div class="day">Tue, Jul 25</div>220    <div class="task-row">221      <div class="circle"></div>222      <div class="task-col">223        <div class="task-title">Dance class</div>224        <div class="task-meta">225          <svg viewBox="0 0 24 24" aria-label="clock">226            <circle cx="12" cy="12" r="9"></circle>227            <path d="M12 6v6l4 2"></path>228          </svg>229          <span>8:00 AM</span>230          <svg viewBox="0 0 24 24" aria-label="bell">231            <path d="M12 4c-3 0-5 2.5-5 5.5V14L5 16h14l-2-2V9.5C17 6.5 15 4 12 4z"></path>232            <path d="M10 18c.5 1 1.5 2 2 2s1.5-1 2-2"></path>233          </svg>234        </div>235      </div>236    </div>237 238    <div class="day" style="margin-top: 48px;">Wed, Jul 26</div>239 240    <div class="today-title">Today</div>241    <div class="stats">242      <div class="card">243        <div class="num">0</div>244        <div class="label">To Do</div>245      </div>246      <div class="card">247        <div class="num">1</div>248        <div class="label">Overdue</div>249      </div>250      <div class="card">251        <div class="num">0</div>252        <div class="label">Unplanned</div>253      </div>254    </div>255  </div>256 257  <div class="illustration">[IMG: Workflow Illustration]</div>258 259  <div class="fab" aria-label="Add">260    <svg viewBox="0 0 48 48">261      <path d="M24 10v28M10 24h28"></path>262    </svg>263  </div>264 265  <div class="bottom-bar">266    <div class="nav-item active">267      <div class="icon-wrap">268        <svg viewBox="0 0 24 24" aria-label="timeline">269          <path d="M5 4v16"></path>270          <rect x="9" y="5" width="6" height="6" rx="1"></rect>271          <path d="M12 13l3 3"></path>272        </svg>273      </div>274      <div class="nav-label">Timeline</div>275    </div>276    <div class="nav-item">277      <div class="icon-wrap">278        <svg viewBox="0 0 24 24" aria-label="board">279          <rect x="3" y="3" width="8" height="8" rx="1"></rect>280          <rect x="13" y="3" width="8" height="8" rx="1"></rect>281          <rect x="3" y="13" width="8" height="8" rx="1"></rect>282          <rect x="13" y="13" width="8" height="8" rx="1"></rect>283        </svg>284      </div>285      <div class="nav-label">Board</div>286    </div>287    <div class="nav-item">288      <div class="icon-wrap">289        <svg viewBox="0 0 24 24" aria-label="unplanned">290          <rect x="3" y="5" width="18" height="16" rx="2"></rect>291          <path d="M7 5v-2M17 5v-2"></path>292          <path d="M12 11c0-2 3-2 3-4s-2-3-3-3-2 1-2 2"></path>293          <circle cx="12" cy="17" r="1.5"></circle>294        </svg>295      </div>296      <div class="nav-label">Unplanned</div>297    </div>298    <div class="nav-item">299      <div class="icon-wrap">300        <svg viewBox="0 0 24 24" aria-label="workspace">301          <rect x="4" y="8" width="16" height="10" rx="2"></rect>302          <path d="M9 8V6h6v2"></path>303          <path d="M8 13h8"></path>304        </svg>305      </div>306      <div class="nav-label">Workspace</div>307    </div>308  </div>309 310  <div class="gesture"></div>311</div>312</body>313</html>