GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Overview UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #0b0d10;14 color: #eaeef3;15 }16 /* status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 120px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 padding: 0 40px;27 color: #cfd6dc;28 font-weight: 600;29 font-size: 40px;30 }31 .status-right {32 display: flex;33 gap: 28px;34 align-items: center;35 }36 /* header */37 .header {38 position: absolute;39 top: 140px;40 left: 0;41 width: 1080px;42 padding: 0 40px;43 }44 .back-row {45 height: 80px;46 display: flex;47 align-items: center;48 }49 .back-btn {50 width: 80px;51 height: 80px;52 display: flex;53 align-items: center;54 justify-content: center;55 }56 .title {57 text-align: center;58 font-size: 64px;59 font-weight: 700;60 margin-top: -60px;61 letter-spacing: 0.4px;62 }63 .chips {64 display: flex;65 gap: 24px;66 margin-top: 36px;67 justify-content: center;68 }69 .chip {70 background: #23272d;71 color: #dfe6ee;72 padding: 26px 40px;73 border-radius: 60px;74 font-size: 40px;75 display: inline-flex;76 align-items: center;77 gap: 18px;78 }79 .chip svg { width: 28px; height: 28px; fill: #9aa7b3; }80 .month-label {81 margin-top: 40px;82 text-align: center;83 font-size: 36px;84 color: #a6b0ba;85 letter-spacing: 2px;86 }87 /* chart area */88 .chart {89 position: absolute;90 left: 40px;91 right: 40px;92 top: 420px;93 height: 360px;94 border-radius: 12px;95 }96 .chart .grid {97 position: absolute;98 left: 0; right: 0; top: 0; bottom: 0;99 }100 .grid-line {101 position: absolute;102 left: 0; right: 0;103 height: 2px;104 background: repeating-linear-gradient(to right, transparent, transparent 40px, rgba(205,214,222,0.3) 40px, rgba(205,214,222,0.3) 60px);105 opacity: 0.35;106 }107 .grid-line:nth-child(1) { top: 40px; }108 .grid-line:nth-child(2) { top: 160px; }109 .grid-line:nth-child(3) { top: 280px; }110 .base-line {111 position: absolute;112 left: 0; right: 0; bottom: 6px;113 height: 6px; background: #2f383f;114 border-radius: 3px;115 }116 .spike {117 position: absolute;118 right: 14px;119 bottom: 6px;120 width: 14px;121 height: 330px;122 background: linear-gradient(to top, #35d485 0%, #35d485 88%, transparent 88%);123 border-radius: 10px 10px 0 0;124 box-shadow: 0 0 0 2px rgba(53,212,133,0.05);125 }126 .axis-labels {127 position: absolute;128 left: 0;129 right: 0;130 bottom: -54px;131 font-size: 32px;132 color: #8f9aa6;133 display: flex;134 justify-content: space-between;135 padding: 0 10px;136 }137 /* categories section */138 .section-title {139 position: absolute;140 top: 860px;141 left: 40px;142 font-size: 72px;143 font-weight: 800;144 letter-spacing: 0.5px;145 }146 .cards {147 position: absolute;148 top: 980px;149 left: 40px;150 right: 40px;151 display: flex;152 gap: 28px;153 }154 .card {155 flex: 1;156 background: #2a313a;157 border-radius: 32px;158 padding: 40px;159 min-height: 220px;160 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.04);161 }162 .card.active {163 background: #3a424d;164 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.06);165 }166 .card .amount {167 font-size: 64px;168 font-weight: 800;169 margin-bottom: 16px;170 }171 .red { color: #ff6e70; }172 .green { color: #a8ffd4; }173 .sub {174 color: #b8c1cc;175 font-size: 40px;176 }177 /* donut chart */178 .donut-wrap {179 position: absolute;180 top: 1320px;181 left: 0; right: 0;182 display: flex;183 justify-content: center;184 align-items: center;185 }186 .donut {187 width: 520px;188 height: 520px;189 border-radius: 50%;190 background: radial-gradient(circle at center, transparent 180px, #d279ff 181px, #d279ff 240px, #b04ddf 240px);191 box-shadow: 0 20px 50px rgba(210,121,255,0.25);192 position: relative;193 }194 .donut-center-tag {195 position: absolute;196 bottom: -40px;197 left: 50%;198 transform: translateX(-50%);199 background: #e79aff;200 color: #5a2a7a;201 width: 120px; height: 120px;202 border-radius: 60px;203 display: flex; align-items: center; justify-content: center;204 box-shadow: 0 8px 24px rgba(231,154,255,0.35);205 }206 .donut-percent {207 position: absolute;208 top: 1840px;209 width: 100%;210 text-align: center;211 color: #e0c9ff;212 font-size: 40px;213 letter-spacing: 1px;214 }215 /* shopping item */216 .list {217 position: absolute;218 top: 1940px;219 left: 40px;220 right: 40px;221 display: flex;222 align-items: center;223 justify-content: space-between;224 color: #e7ebf0;225 }226 .list-left {227 display: flex;228 align-items: center;229 gap: 28px;230 }231 .icon-circle {232 width: 96px; height: 96px; border-radius: 48px;233 background: #db87ff;234 display: flex; align-items: center; justify-content: center;235 box-shadow: 0 6px 16px rgba(219,135,255,0.35);236 }237 .list-title { font-size: 52px; font-weight: 700; }238 .list-sub { font-size: 36px; color: #bcc5cf; margin-top: 8px; }239 .list-right { font-size: 52px; color: #ff6e70; font-weight: 800; }240 /* bottom nav */241 .bottom-bar {242 position: absolute;243 bottom: 0;244 left: 0; right: 0;245 height: 180px;246 background: #12161c;247 border-top: 1px solid rgba(255,255,255,0.06);248 display: flex;249 padding: 0 40px;250 align-items: center;251 justify-content: space-between;252 }253 .tab {254 width: 180px;255 display: flex; flex-direction: column;256 align-items: center; justify-content: center;257 color: #9aa7b3;258 font-size: 34px;259 gap: 12px;260 position: relative;261 }262 .tab.active { color: #47df8d; }263 .badge {264 position: absolute;265 top: 12px; right: 38px;266 background: #ff6e70; color: #fff;267 font-size: 28px; font-weight: 700;268 padding: 6px 16px; border-radius: 24px;269 }270 .tab svg { width: 56px; height: 56px; fill: currentColor; }271</style>272</head>273<body>274<div id="render-target">275 276 <!-- Status bar -->277 <div class="status-bar">278 <div class="status-left">12:46</div>279 <div class="status-right">280 <!-- simple phone icon -->281 <svg viewBox="0 0 24 24">282 <path d="M6 2h12v20H6zM8 4v16h8V4z"/>283 </svg>284 <!-- cloud icon -->285 <svg viewBox="0 0 24 24">286 <path d="M8 18h8a4 4 0 000-8 5 5 0 00-9-2 4 4 0 001 10z"/>287 </svg>288 <!-- wifi -->289 <svg viewBox="0 0 24 24">290 <path d="M12 18c.8 0 1.5.7 1.5 1.5S12.8 21 12 21s-1.5-.7-1.5-1.5S11.2 18 12 18zm-6.5-5a10 10 0 0113 0l-1.6 1.6a8 8 0 00-9.8 0L5.5 13zm-3-3a14 14 0 0119 0L20 11a12 12 0 00-16 0L2.5 10z"/>291 </svg>292 <!-- battery -->293 <svg viewBox="0 0 24 24">294 <path d="M2 8h18v8H2zM21 10h2v4h-2z"/>295 </svg>296 </div>297 </div>298 299 <!-- Header -->300 <div class="header">301 <div class="back-row">302 <div class="back-btn">303 <svg viewBox="0 0 24 24" width="48" height="48" style="fill:#cfd6dc">304 <path d="M15 6l-6 6 6 6-1.5 1.5L6 12l7.5-7.5z"/>305 </svg>306 </div>307 </div>308 <div class="title">Overview</div>309 310 <div class="chips">311 <div class="chip">All Wallets312 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6z"/></svg>313 </div>314 <div class="chip">By months315 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6z"/></svg>316 </div>317 </div>318 <div class="month-label">JULY 2023</div>319 </div>320 321 <!-- Chart -->322 <div class="chart">323 <div class="grid">324 <div class="grid-line"></div>325 <div class="grid-line"></div>326 <div class="grid-line"></div>327 <div class="base-line"></div>328 <div class="spike"></div>329 </div>330 <div class="axis-labels">331 <div>Jul 1</div>332 <div>Jul 7</div>333 <div>Jul 14</div>334 <div>Jul 20</div>335 <div>Today</div>336 </div>337 </div>338 339 <!-- Categories -->340 <div class="section-title">Categories</div>341 342 <div class="cards">343 <div class="card active">344 <div class="amount red">-$90</div>345 <div class="sub">Expenses</div>346 </div>347 <div class="card">348 <div class="amount green">$5,000</div>349 <div class="sub">Income</div>350 </div>351 </div>352 353 <!-- Donut chart -->354 <div class="donut-wrap">355 <div class="donut">356 <div class="donut-center-tag">357 <!-- simple bag icon -->358 <svg viewBox="0 0 24 24" width="50" height="50" style="fill:#5a2a7a">359 <path d="M7 8V6a5 5 0 0110 0v2h3v12H4V8h3zm2 0h6V6a3 3 0 00-6 0v2z"/>360 </svg>361 </div>362 </div>363 </div>364 <div class="donut-percent">100%</div>365 366 <!-- Shopping list item -->367 <div class="list">368 <div class="list-left">369 <div class="icon-circle">370 <svg viewBox="0 0 24 24" width="48" height="48" style="fill:#5a2a7a">371 <path d="M7 9V7a5 5 0 0110 0v2h3v11H4V9h3zm2 0h6V7a3 3 0 00-6 0v2z"/>372 </svg>373 </div>374 <div>375 <div class="list-title">Shopping</div>376 <div class="list-sub">1 transaction</div>377 </div>378 </div>379 <div class="list-right">-$90</div>380 </div>381 382 <!-- Bottom navigation -->383 <div class="bottom-bar">384 <div class="tab active">385 <svg viewBox="0 0 24 24"><path d="M4 4h16v2H4zm0 6h12v2H4zm0 6h8v2H4z"/></svg>386 <div>Timeline</div>387 </div>388 <div class="tab">389 <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3zM5 8v8h14V8z"/></svg>390 <div>Wallets</div>391 </div>392 <div class="tab">393 <svg viewBox="0 0 24 24"><path d="M7 9V7a5 5 0 0110 0v2h3v10H4V9h3zm2 0h6V7a3 3 0 00-6 0v2z"/></svg>394 <div>Budgets</div>395 </div>396 <div class="tab">397 <div class="badge">1</div>398 <svg viewBox="0 0 24 24"><path d="M12 2a6 6 0 016 6v4l2 3H4l2-3V8a6 6 0 016-6zm-2 20h4v-2h-4v2z"/></svg>399 <div>Activity</div>400 </div>401 <div class="tab">402 <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>403 <div>More</div>404 </div>405 </div>406 407</div>408</body>409</html>