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 Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #1C1F24; /* dark app background */15    color: #E8EAF1;16  }17 18  /* Status bar */19  .status-bar {20    height: 96px;21    padding: 0 40px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #F1F3F6;26    font-weight: 600;27    font-size: 42px;28    opacity: 0.95;29  }30  .status-right {31    display: flex;32    gap: 26px;33    align-items: center;34  }35  .icon-plain svg { width: 44px; height: 44px; fill: none; stroke: #F1F3F6; stroke-width: 3; opacity: 0.9; }36 37  /* Content */38  .content {39    padding: 20px 48px 260px 48px;40  }41 42  .hero {43    width: 740px;44    height: 280px;45    margin: 60px auto 20px auto;46    background: #E0E0E0;47    border: 1px solid #BDBDBD;48    color: #757575;49    display: flex;50    align-items: center;51    justify-content: center;52    border-radius: 18px;53    font-size: 36px;54  }55 56  h1 {57    font-size: 54px;58    line-height: 1.22;59    margin: 40px 0 34px 0;60    font-weight: 800;61    color: #F3F5FA;62  }63 64  .feature {65    display: flex;66    align-items: flex-start;67    gap: 24px;68    margin: 26px 0;69  }70  .feature .ico {71    width: 64px;72    height: 64px;73    border-radius: 16px;74    background: #2A2E36;75    display: flex;76    align-items: center;77    justify-content: center;78  }79  .feature .text {80    font-size: 36px;81    line-height: 1.35;82    color: #D7DBE7;83    letter-spacing: 0.2px;84  }85 86  /* Task rows */87  .task-row {88    display: flex;89    align-items: center;90    gap: 28px;91    margin: 38px 0;92  }93  .task-row .plus {94    width: 76px;95    height: 76px;96    border-radius: 38px;97    background: #2A2E36;98    display: flex;99    align-items: center;100    justify-content: center;101  }102  .task-row .label {103    font-size: 42px;104    color: #BFC6D7;105    font-weight: 600;106  }107 108  .date-title {109    font-size: 50px;110    font-weight: 800;111    color: #E9ECF6;112    margin-top: 36px;113    margin-bottom: 10px;114  }115 116  /* FAB */117  .fab {118    position: absolute;119    right: 56px;120    bottom: 360px;121    width: 140px;122    height: 140px;123    border-radius: 36px;124    background: #0B57D0;125    box-shadow: 0 20px 40px rgba(0,0,0,0.45);126    display: flex;127    align-items: center;128    justify-content: center;129  }130  .fab svg { width: 72px; height: 72px; stroke: #FFFFFF; stroke-width: 10; }131 132  /* Bottom nav */133  .bottom-nav {134    position: absolute;135    left: 0;136    right: 0;137    bottom: 0;138    height: 220px;139    background: #23262B;140    border-top: 1px solid rgba(255,255,255,0.08);141    display: flex;142    align-items: center;143    justify-content: space-around;144    padding: 0 20px;145  }146  .nav-item {147    width: 240px;148    height: 160px;149    display: flex;150    flex-direction: column;151    align-items: center;152    justify-content: center;153    gap: 18px;154    color: #C9CEDB;155    font-size: 34px;156    font-weight: 700;157  }158  .nav-icon {159    width: 88px; height: 88px;160    display: flex; align-items: center; justify-content: center;161    border-radius: 24px;162  }163  .nav-item.active .nav-icon {164    background: #313640;165    padding: 8px 14px;166  }167  .nav-item.active { color: #E9ECF6; }168  .nav-icon svg { width: 60px; height: 60px; stroke: #C9CEDB; stroke-width: 5; }169  .nav-item.active .nav-icon svg { stroke: #FFFFFF; }170  .home-indicator {171    position: absolute;172    bottom: 220px;173    left: 50%;174    transform: translateX(-50%);175    width: 420px;176    height: 16px;177    background: #EDEFF5;178    border-radius: 12px;179    opacity: 0.7;180  }181</style>182</head>183<body>184<div id="render-target">185 186  <div class="status-bar">187    <div class="time">1:27</div>188    <div class="status-right">189      <div class="icon-plain">190        <svg viewBox="0 0 24 24"><path d="M3 6h18M6 3h12M5 9h14v10H5z"/></svg>191      </div>192      <div class="icon-plain">193        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 12l4 2M12 6v6"/></svg>194      </div>195      <div class="icon-plain">196        <svg viewBox="0 0 24 24"><path d="M2 12h20M12 2v20"/></svg>197      </div>198      <div class="icon-plain">199        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"/></svg>200      </div>201      <div class="icon-plain">202        <svg viewBox="0 0 24 24"><path d="M3 7h18l-2 14H5L3 7z"/><path d="M8 7V4h8v3"/></svg>203      </div>204      <div class="icon-plain">205        <svg viewBox="0 0 24 24"><path d="M12 2v18"/><path d="M9 22h6"/></svg>206      </div>207    </div>208  </div>209 210  <div class="content">211    <div class="hero">[IMG: Illustration - Notes & Timeline Flow]</div>212 213    <h1>Welcome to your Timeline. Tasks & notes will be shown here day by day</h1>214 215    <div class="feature">216      <div class="ico">217        <svg viewBox="0 0 24 24">218          <rect x="3" y="5" width="18" height="16" rx="2" ry="2" fill="none" stroke="#C9CEDB" stroke-width="2"></rect>219          <path d="M8 3v4M16 3v4M3 10h18" fill="none" stroke="#C9CEDB" stroke-width="2"></path>220          <rect x="6.5" y="12" width="4.5" height="3.5" fill="none" stroke="#C9CEDB" stroke-width="1.8"></rect>221        </svg>222      </div>223      <div class="text">Your tasks & notes will be sorted based on date and time</div>224    </div>225 226    <div class="feature">227      <div class="ico">228        <svg viewBox="0 0 24 24">229          <circle cx="12" cy="12" r="9" fill="none" stroke="#C9CEDB" stroke-width="2"></circle>230          <path d="M12 6v6l4 2" fill="none" stroke="#C9CEDB" stroke-width="2"></path>231        </svg>232      </div>233      <div class="text">Add repeating reminders for important events such as weekly routine, paying bills</div>234    </div>235 236    <div class="feature">237      <div class="ico">238        <svg viewBox="0 0 24 24">239          <rect x="3" y="3" width="8" height="8" fill="none" stroke="#C9CEDB" stroke-width="2"></rect>240          <rect x="13" y="3" width="8" height="8" fill="none" stroke="#C9CEDB" stroke-width="2"></rect>241          <rect x="3" y="13" width="8" height="8" fill="none" stroke="#C9CEDB" stroke-width="2"></rect>242          <rect x="13" y="13" width="8" height="8" fill="none" stroke="#C9CEDB" stroke-width="2"></rect>243        </svg>244      </div>245      <div class="text">Organize your projects. Create plans and ideas</div>246    </div>247 248    <div class="feature">249      <div class="ico">250        <svg viewBox="0 0 24 24">251          <path d="M3 17c3-4 5-5 8-3s6-8 10-9" fill="none" stroke="#C9CEDB" stroke-width="2"></path>252          <circle cx="3" cy="17" r="1.5" fill="#C9CEDB"></circle>253          <circle cx="11" cy="14" r="1.5" fill="#C9CEDB"></circle>254          <circle cx="21" cy="5" r="1.5" fill="#C9CEDB"></circle>255        </svg>256      </div>257      <div class="text">Customize how the timeline appears based on your preferences</div>258    </div>259 260    <div class="task-row">261      <div class="plus">262        <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" stroke="#C9CEDB" stroke-width="2"/></svg>263      </div>264      <div class="label">Add task for today</div>265    </div>266 267    <div class="date-title">Thu, Jul 27</div>268    <div class="task-row">269      <div class="plus">270        <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" stroke="#C9CEDB" stroke-width="2"/></svg>271      </div>272      <div class="label">Add task</div>273    </div>274 275    <div class="date-title">Fri, Jul 28</div>276    <div class="task-row">277      <div class="plus">278        <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" stroke="#C9CEDB" stroke-width="2"/></svg>279      </div>280      <div class="label">Add task</div>281    </div>282 283    <div class="date-title">Sat, Jul 29</div>284    <div class="task-row">285      <div class="plus">286        <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" stroke="#C9CEDB" stroke-width="2"/></svg>287      </div>288      <div class="label">Add task</div>289    </div>290  </div>291 292  <div class="fab">293    <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" fill="none"></path></svg>294  </div>295 296  <div class="home-indicator"></div>297 298  <div class="bottom-nav">299    <div class="nav-item active">300      <div class="nav-icon">301        <svg viewBox="0 0 24 24">302          <path d="M6 4v16" fill="none"></path>303          <rect x="10" y="6" width="8" height="8" rx="2" fill="none"></rect>304          <path d="M13 10l2 2 3-3" fill="none"></path>305        </svg>306      </div>307      <div>Timeline</div>308    </div>309 310    <div class="nav-item">311      <div class="nav-icon">312        <svg viewBox="0 0 24 24">313          <rect x="3" y="3" width="8" height="8" fill="none"></rect>314          <rect x="13" y="3" width="8" height="8" fill="none"></rect>315          <rect x="3" y="13" width="8" height="8" fill="none"></rect>316          <rect x="13" y="13" width="8" height="8" fill="none"></rect>317        </svg>318      </div>319      <div>Board</div>320    </div>321 322    <div class="nav-item">323      <div class="nav-icon">324        <svg viewBox="0 0 24 24">325          <rect x="6" y="3" width="12" height="18" rx="2" fill="none"></rect>326          <path d="M12 9v4M12 15l0 0" fill="none"></path>327          <circle cx="12" cy="14" r="1.2" fill="#C9CEDB"></circle>328        </svg>329      </div>330      <div>Unplanned</div>331    </div>332 333    <div class="nav-item">334      <div class="nav-icon">335        <svg viewBox="0 0 24 24">336          <rect x="3" y="7" width="18" height="12" rx="2" fill="none"></rect>337          <path d="M8 7V5h8v2" fill="none"></path>338        </svg>339      </div>340      <div>Workspace</div>341    </div>342  </div>343 344</div>345</body>346</html>