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: "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width:1080px; height:2400px;11    position:relative; overflow:hidden;12    background:#1f2328; color:#e9eef5;13  }14 15  /* Status bar */16  .status-bar {17    position:absolute; top:0; left:0; right:0;18    height:96px; padding:24px 28px;19    display:flex; align-items:center; justify-content:space-between;20    color:#e9eef5; font-weight:600; font-size:40px;21  }22  .sb-left { display:flex; align-items:center; gap:26px; }23  .sb-right { display:flex; align-items:center; gap:26px; font-size:34px; }24  .sb-icon { width:40px; height:40px; opacity:0.9; }25  .wifi, .battery {26    width:44px; height:44px; fill:#e9eef5;27  }28 29  /* Content area */30  .content {31    position:absolute; top:120px; left:40px; right:40px; bottom:680px;32    overflow:hidden;33  }34  .day-section { margin-bottom:48px; }35  .day-title {36    font-size:48px; font-weight:700; color:#f2f5f9; margin:22px 0;37  }38 39  /* Timeline marker and task */40  .timeline { display:flex; align-items:flex-start; gap:28px; padding-left:6px; }41  .marker-wrap { position:relative; width:64px; }42  .marker {43    width:48px; height:48px; border-radius:50%;44    border:4px solid #7aa3ff; background:transparent; margin-top:6px;45  }46  .vline {47    position:absolute; left:28px; top:58px; width:4px; height:86px; background:#2d3340; border-radius:2px;48  }49  .task-card { flex:1; }50  .task-title { font-size:44px; font-weight:600; color:#eaf1ff; margin-bottom:12px; }51  .task-meta { display:flex; align-items:center; gap:16px; color:#a9b1bd; font-size:32px; }52  .meta-icon { width:34px; height:34px; fill:#a9b1bd; }53 54  /* Add task row */55  .add-task { display:flex; align-items:center; gap:20px; margin-top:22px; }56  .plus-circle {57    width:76px; height:76px; border-radius:50%;58    background:#727a88; display:flex; align-items:center; justify-content:center;59    color:#121419; font-size:52px; font-weight:700;60  }61  .add-task span { font-size:42px; color:#b7bfcb; font-weight:600; }62 63  /* Subsequent days */64  .day-empty { padding-left:6px; }65  .spacer-xxl { height:24px; }66 67  /* Floating action button */68  .fab {69    position:absolute; right:56px; bottom:860px;70    width:160px; height:160px; border-radius:34px;71    background:#0b55c9; box-shadow:0 10px 24px rgba(0,0,0,0.35);72    display:flex; align-items:center; justify-content:center;73    color:#fff; font-size:96px; font-weight:700;74  }75 76  /* Bottom sheet */77  .bottom-sheet {78    position:absolute; left:0; right:0; bottom:120px;79    height:560px; background:#272b33; border-top-left-radius:26px; border-top-right-radius:26px;80    box-shadow:0 -10px 28px rgba(0,0,0,0.4);81    padding:28px 36px;82    color:#e9eef5;83  }84 85  .sheet-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }86  .sheet-header .today { font-size:40px; font-weight:700; color:#bcd0ff; }87  .sheet-header .month { font-size:40px; font-weight:700; display:flex; align-items:center; gap:12px; }88  .chev { width:34px; height:34px; fill:#b7bfcb; }89 90  .calendar {91    display:flex; align-items:center; justify-content:space-between;92    padding:18px 8px 26px; margin-bottom:26px; color:#aeb6c3;93  }94  .cal-item { width:120px; text-align:center; }95  .day-label { font-size:30px; margin-bottom:8px; }96  .day-num { font-size:38px; font-weight:700; color:#d6dbe4; }97  .pill {98    background:#b8cbff; color:#1b2a4f; border-radius:22px; padding:18px 8px;99    display:flex; flex-direction:column; align-items:center; justify-content:center;100  }101  .dot { width:10px; height:10px; border-radius:50%; background:#94a0b3; margin:8px auto 0; }102 103  /* Bottom navigation */104  .nav {105    display:flex; align-items:flex-end; justify-content:space-around; padding-top:12px;106  }107  .nav-item { width:208px; text-align:center; color:#b7bfcb; }108  .nav-icon {109    width:120px; height:68px; margin:0 auto 10px; border-radius:22px;110    background:#3a404c; display:flex; align-items:center; justify-content:center;111  }112  .nav-item.active .nav-icon { background:#485166; border:2px solid #8ea6ff; }113  .nav-item span { font-size:32px; }114  .timeline-mark {115    width:62px; height:34px; border:4px dashed #cdd6e7; border-radius:8px; box-sizing:border-box;116  }117  .grid-icon { width:40px; height:40px; background:#cdd6e7; }118  .calendar-icon {119    width:40px; height:36px; border:3px solid #cdd6e7; border-top-width:10px; border-radius:6px;120  }121  .briefcase {122    width:40px; height:28px; border:3px solid #cdd6e7; border-radius:4px; position:relative;123  }124  .briefcase:before {125    content:""; position:absolute; width:16px; height:8px; border:3px solid #cdd6e7; border-bottom:none;126    top:-12px; left:10px; border-radius:4px;127  }128 129  /* Gesture pill */130  .gesture {131    position:absolute; left:50%; transform:translateX(-50%);132    bottom:48px; width:280px; height:14px; border-radius:18px; background:#cfd4db; opacity:0.8;133  }134</style>135</head>136<body>137<div id="render-target">138  <!-- Status bar -->139  <div class="status-bar">140    <div class="sb-left">141      <div>1:37</div>142      <svg class="sb-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#e9eef5"/></svg>143      <svg class="sb-icon" viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="6" fill="#e9eef5"/></svg>144      <div style="font-size:36px; color:#e9eef5;">29°</div>145      <div style="font-size:36px; color:#e9eef5;">•</div>146    </div>147    <div class="sb-right">148      <svg class="wifi" viewBox="0 0 24 24">149        <path d="M2 8c5-5 15-5 20 0M6 12c3-3 9-3 12 0M10 16c2-2 4-2 6 0" stroke="#e9eef5" stroke-width="2" fill="none" stroke-linecap="round"/>150        <circle cx="12" cy="19" r="1.7" fill="#e9eef5"/>151      </svg>152      <svg class="battery" viewBox="0 0 26 24">153        <rect x="2" y="6" width="20" height="12" rx="2" stroke="#e9eef5" stroke-width="2" fill="none"/>154        <rect x="23" y="9" width="3" height="6" rx="1" fill="#e9eef5"/>155        <rect x="4" y="8" width="12" height="8" fill="#e9eef5"/>156      </svg>157    </div>158  </div>159 160  <!-- Main content -->161  <div class="content">162    <div class="day-section">163      <div class="day-title">Sun, Jul 30</div>164      <div class="timeline">165        <div class="marker-wrap">166          <div class="marker"></div>167          <div class="vline"></div>168        </div>169        <div class="task-card">170          <div class="task-title">Driving licence</div>171          <div class="task-meta">172            <svg class="meta-icon" viewBox="0 0 24 24">173              <circle cx="12" cy="12" r="9" stroke="#a9b1bd" stroke-width="2" fill="none"/>174              <path d="M12 6v6l4 2" stroke="#a9b1bd" stroke-width="2" fill="none" stroke-linecap="round"/>175            </svg>176            <span>9:00 AM</span>177            <svg class="meta-icon" viewBox="0 0 24 24">178              <path d="M12 4c-3 0-5 2-5 5v3l-2 2v1h14v-1l-2-2V9c0-3-2-5-5-5zM10 18a2 2 0 0 0 4 0" fill="none" stroke="#a9b1bd" stroke-width="2" stroke-linecap="round"/>179            </svg>180          </div>181          <div class="spacer-xxl"></div>182        </div>183      </div>184      <div class="add-task">185        <div class="plus-circle">+</div>186        <span>Add task</span>187      </div>188    </div>189 190    <div class="day-section">191      <div class="day-title">Mon, Jul 31</div>192      <div class="day-empty add-task">193        <div class="plus-circle">+</div>194        <span>Add task</span>195      </div>196    </div>197 198    <div class="day-section">199      <div class="day-title">Tue, Aug 1</div>200      <div class="day-empty add-task">201        <div class="plus-circle">+</div>202        <span>Add task</span>203      </div>204    </div>205 206    <div class="day-section">207      <div class="day-title">Wed, Aug 2</div>208      <div class="day-empty add-task">209        <div class="plus-circle">+</div>210        <span>Add task</span>211      </div>212    </div>213 214    <div class="day-section">215      <div class="day-title">Thu, Aug 3</div>216      <div class="day-empty add-task">217        <div class="plus-circle">+</div>218        <span>Add task</span>219      </div>220    </div>221 222    <div class="day-section">223      <div class="day-title">Fri, Aug 4</div>224      <div class="day-empty add-task">225        <div class="plus-circle">+</div>226        <span>Add task</span>227      </div>228    </div>229 230    <div class="day-section">231      <div class="day-title">Sat, Aug 5</div>232      <div class="day-empty add-task">233        <div class="plus-circle">+</div>234        <span>Add task</span>235      </div>236    </div>237  </div>238 239  <!-- Floating Action Button -->240  <div class="fab">+</div>241 242  <!-- Bottom sheet with calendar and navigation -->243  <div class="bottom-sheet">244    <div class="sheet-header">245      <div class="today">Today</div>246      <div class="month">July 2023247        <svg class="chev" viewBox="0 0 24 24"><path d="M6 14l6-6 6 6" stroke="#b7bfcb" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>248      </div>249    </div>250 251    <div class="calendar">252      <div class="cal-item">253        <div class="pill">254          <div class="day-label">S</div>255          <div class="day-num">30</div>256        </div>257        <div class="dot"></div>258      </div>259      <div class="cal-item">260        <div class="day-label">M</div>261        <div class="day-num">31</div>262      </div>263      <div class="cal-item">264        <div class="day-label">T</div>265        <div class="day-num">1</div>266      </div>267      <div clas