GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Timeline UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Inter", Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #1f2328; color: #e9eef5;12 }13 14 /* Status bar */15 .status-bar {16 height: 110px;17 padding: 24px 30px 0 30px;18 display: flex; align-items: center; justify-content: space-between;19 color: #d9dce2; font-weight: 600; font-size: 32px;20 opacity: 0.9;21 }22 .status-left { display: flex; align-items: center; gap: 18px; }23 .status-icons { display: flex; align-items: center; gap: 16px; opacity: 0.8; }24 .status-right { display: flex; align-items: center; gap: 18px; }25 26 /* Content area */27 .content {28 position: absolute; left: 0; right: 0; top: 110px; bottom: 220px;29 overflow: hidden; /* static screenshot */30 padding: 10px 48px 0 48px;31 }32 33 .date-section {34 margin: 28px 0 22px 0;35 }36 .date-title {37 font-size: 48px; font-weight: 800; letter-spacing: 0.2px;38 margin-bottom: 24px;39 }40 41 .add-row {42 display: flex; align-items: center; gap: 26px;43 padding-left: 4px;44 }45 .add-row .label {46 font-size: 38px; color: #a7afb8; font-weight: 700;47 }48 49 .plus-circle {50 width: 72px; height: 72px; border-radius: 50%;51 background: #707784;52 display: flex; align-items: center; justify-content: center;53 }54 .plus-circle svg { width: 40px; height: 40px; }55 56 /* Event with timeline indicator */57 .event-block { margin: 18px 0 26px 0; display: flex; }58 .event-left {59 width: 84px; position: relative; display: flex; justify-content: center;60 }61 .event-ring {62 width: 60px; height: 60px; border-radius: 50%;63 border: 6px solid #7aa6ff;64 box-sizing: border-box;65 }66 .event-line {67 position: absolute; top: 60px; left: 41px; width: 4px; height: 110px;68 background: #446cbb; border-radius: 2px;69 }70 .event-right {71 flex: 1;72 padding-left: 24px;73 }74 .event-title {75 font-size: 44px; font-weight: 700; margin-top: 6px; margin-bottom: 14px;76 }77 .event-meta {78 display: flex; align-items: center; gap: 18px;79 color: #aab2bc; font-size: 32px; font-weight: 700;80 }81 .meta-item { display: inline-flex; align-items: center; gap: 10px; }82 83 /* Bottom navigation */84 .bottom-nav {85 position: absolute; left: 0; right: 0; bottom: 0;86 height: 220px; background: #2a2f36;87 box-shadow: 0 -2px 0 rgba(0,0,0,0.3);88 padding: 26px 40px 34px 40px;89 }90 .nav-items { display: flex; justify-content: space-between; align-items: center; }91 .nav-item {92 width: 240px; display: flex; flex-direction: column; align-items: center; gap: 20px;93 color: #b7bec7; font-size: 30px; font-weight: 800;94 }95 .nav-item .icon {96 width: 120px; height: 80px; display: flex; align-items: center; justify-content: center;97 }98 99 .nav-item.active { color: #e7edf6; }100 .timeline-pill {101 width: 150px; height: 80px; background: #3a4049; border-radius: 40px;102 display: flex; align-items: center; justify-content: center;103 border: 2px solid #5c6774;104 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.04);105 }106 107 /* Floating action button */108 .fab {109 position: absolute; right: 40px; bottom: 250px;110 width: 140px; height: 140px; border-radius: 36px;111 background: #0a5fdc; display: flex; align-items: center; justify-content: center;112 box-shadow: 0 12px 24px rgba(7, 60, 153, 0.5);113 }114 .fab svg { width: 64px; height: 64px; }115 116 /* Home indicator */117 .home-indicator {118 position: absolute; left: 50%; transform: translateX(-50%);119 bottom: 12px; width: 300px; height: 16px; background: #e8eaed;120 border-radius: 10px; opacity: 0.85;121 }122 123 /* Helpers for small icons */124 .icon-24 { width: 28px; height: 28px; }125 .icon-28 { width: 34px; height: 34px; }126</style>127</head>128<body>129<div id="render-target">130 131 <!-- Status bar -->132 <div class="status-bar">133 <div class="status-left">134 <div>1:27</div>135 <div class="status-icons">136 <!-- simple dots/icons to mimic system glyphs -->137 <svg class="icon-24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#d1d5db"/></svg>138 <svg class="icon-24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#d1d5db" opacity="0.8"/></svg>139 <svg class="icon-24" viewBox="0 0 24 24"><path d="M3 12h18" stroke="#d1d5db" stroke-width="2" /></svg>140 <div style="font-weight:800;">29°</div>141 <svg class="icon-24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="2" fill="#d1d5db"/></svg>142 </div>143 </div>144 <div class="status-right">145 <!-- Wi-Fi -->146 <svg class="icon-28" viewBox="0 0 24 24"><path d="M2 9c5-4 15-4 20 0M5 12c4-3 10-3 14 0M8 15c3-2 5-2 8 0M12 18l-2 2h4z" stroke="#e5e7eb" stroke-width="2" fill="none" stroke-linecap="round"/></svg>147 <!-- Battery -->148 <svg class="icon-28" viewBox="0 0 28 28">149 <rect x="2" y="6" width="22" height="14" rx="2" ry="2" fill="#e5e7eb"/>150 <rect x="24" y="10" width="3" height="6" fill="#e5e7eb"/>151 <path d="M8 10l4 4-4 4" stroke="#1f2328" stroke-width="2" fill="none"/>152 </svg>153 </div>154 </div>155 156 <!-- Content -->157 <div class="content">158 <div class="date-section">159 <div class="date-title">Fri, Jul 28</div>160 <div class="add-row">161 <div class="plus-circle">162 <svg viewBox="0 0 24 24">163 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="3" stroke-linecap="round"/>164 </svg>165 </div>166 <div class="label">Add task</div>167 </div>168 </div>169 170 <div class="date-section">171 <div class="date-title">Sat, Jul 29</div>172 <div class="add-row">173 <div class="plus-circle">174 <svg viewBox="0 0 24 24">175 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="3" stroke-linecap="round"/>176 </svg>177 </div>178 <div class="label">Add task</div>179 </div>180 </div>181 182 <div class="date-section">183 <div class="date-title">Sun, Jul 30</div>184 185 <div class="event-block">186 <div class="event-left">187 <div class="event-ring"></div>188 <div class="event-line"></div>189 </div>190 <div class="event-right">191 <div class="event-title">Driving licence</div>192 <div class="event-meta">193 <span class="meta-item">194 <svg class="icon-28" viewBox="0 0 24 24">195 <circle cx="12" cy="12" r="9" stroke="#b9c1cb" stroke-width="2" fill="none"/>196 <path d="M12 7v6l4 2" stroke="#b9c1cb" stroke-width="2" stroke-linecap="round" fill="none"/>197 </svg>198 9:00 AM199 </span>200 <span class="meta-item">201 <svg class="icon-28" viewBox="0 0 24 24">202 <path d="M12 3c3 0 6 2 6 5v3c0 2 2 3 2 3H4s2-1 2-3V8c0-3 3-5 6-5zM9 19c1.5 1 4.5 1 6 0" stroke="#b9c1cb" stroke-width="2" fill="none" stroke-linecap="round"/>203 </svg>204 </span>205 </div>206 </div>207 </div>208 209 <div class="add-row" style="margin-top: 28px;">210 <div class="plus-circle">211 <svg viewBox="0 0 24 24">212 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="3" stroke-linecap="round"/>213 </svg>214 </div>215 <div class="label">Add task</div>216 </div>217 </div>218 219 <div class="date-section">220 <div class="date-title">Mon, Jul 31</div>221 <div class="add-row">222 <div class="plus-circle">223 <svg viewBox="0 0 24 24">224 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="3" stroke-linecap="round"/>225 </svg>226 </div>227 <div class="label">Add task</div>228 </div>229 </div>230 231 <div class="date-section">232 <div class="date-title">Tue, Aug 1</div>233 <div class="add-row">234 <div class="plus-circle">235 <svg viewBox="0 0 24 24">236 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="3" stroke-linecap="round"/>237 </svg>238 </div>239 <div class="label">Add task</div>240 </div>241 </div>242 243 <div class="date-section">244 <div class="date-title">Wed, Aug 2</div>245 <div class="add-row">246 <div class="plus-circle">247 <svg viewBox="0 0 24 24">248 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="3" stroke-linecap="round"/>249 </svg>250 </div>251 <div class="label">Add task</div>252 </div>253 </div>254 255 <div class="date-section">256 <div class="date-title">Thu, Aug 3</div>257 <div class="add-row">258 <div class="plus-circle">259 <svg viewBox="0 0 24 24">260 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="3" stroke-linecap="round"/>261 </svg>262 </div>263 <div class="label">Add task</div>264 </div>265 </div>266 267 <div class="date-section" style="margin-bottom: 120px;">268 <div class="date-title">Fri, Aug 4</div>269 <div class="add-row">270 <div class="plus-circle">271 <svg viewBox="0 0 24 24">272 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="3" stroke-linecap="round"/>273 </svg>274 </div>275 <div class="label">Add task</div>276 </div>277 </div>278 </div>279 280 <!-- Floating Action Button -->281 <div class="fab">282 <svg viewBox="0 0 64 64">283 <path d="M32 14v36M14 32h36" stroke="#fff" stroke-width="6" stroke-linecap="round"/>284 </svg>285 </div>286 287 <!-- Bottom Navigation -->288 <div class="bottom-nav">289 <div class="nav-items">290 <div class="nav-item active">291 <div class="timeline-pill">292 <svg viewBox="0 0 48 48">293 <rect x="6" y="6" width="36" height="36" rx="18" fill="#4a515b"/>294 <path d="M16 24l6 6 10-12" stroke="#eaf0f6" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>295 </svg>296 </div>297 <div>Timeline</div>298 </div>299 300 <div class="nav-item">301 <div class="icon">302 <svg viewBox="0 0 64 64">303 <rect x="8" y="8" width="20" height="20" rx="4" fill="#9aa3ad"/>304 <rect x="36" y="8" width="20" height="20" rx="4" fill="#9aa3ad"/>305 <rect x="8" y="36" width="20" height="20" rx="4" fill="#9aa3ad"/>306 <rect x="36" y="36" width="20" height="20" rx="4" fill="#9aa3ad"/>307 </svg>308 </div>309 <div>Board</div>310 </div>311 312 <div class="nav-item">313 <div class="icon">314 <svg viewBox="0 0 64 64">315 <rect x="8" y="12" width="48" height="40" rx="6" ry="6" fill="#9aa3ad"/>316 <rect x="12" y="18" width="40" height="8" fill="#2a2f36"/>317 <path d="M32 30c6 0 10 4 10 9s-4 9-10 9c-5 0-9-2-9-6h6c0 2 1 3 3 3s4-2 4-4-2-4-4-4c-3 0-5-2-5-5h8" stroke="#2a2f36" stroke-width="3" fill="none" stroke-linecap="round"/>318 </svg>319 </div>320 <div>Unplanned</div>321 </div>322 323 <div class="nav-item">324 <div class="icon">325 <svg viewBox="0 0 64 64">326 <rect x="10" y="22" width="44" height="28" rx="6" fill="#9aa3ad"/>327 <rect x="22" y="16" width="20" height="10" rx="3" fill="#9aa3ad"/>328 <path d="M16 28h32" stroke="#2a2f36" stroke-width="3"/>329 </svg>330 </div>331 <div>Workspace</div>332 </div>333 </div>334 </div>335 336 <div class="home-indicator"></div>337</div>338</body>339</html>