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>Cash Flow 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; height: 2400px;11    position: relative; overflow: hidden;12    background: #0f1416; color: #cfd8dc;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 0; left: 0; right: 0;18    height: 128px; background: #12171a;19    display: flex; align-items: center; padding: 0 36px;20    box-sizing: border-box;21  }22  .status-bar .time { color: #e6f2f1; font-weight: 600; font-size: 42px; letter-spacing: 0.5px; }23  .status-icons { margin-left: auto; display: flex; align-items: center; gap: 28px; }24  .status-icons svg { fill: none; stroke: #e6f2f1; stroke-width: 3; width: 44px; height: 44px; opacity: 0.9; }25 26  /* Header / summary */27  .summary {28    position: absolute; top: 158px; left: 0; right: 0;29    padding: 0 48px 24px; box-sizing: border-box;30  }31  .amount {32    text-align: center; font-size: 84px; font-weight: 800; color: #e9f7f5;33    letter-spacing: 1px; margin-top: 8px;34  }35  .subtitle {36    text-align: center; font-size: 36px; color: #aab7be; margin-top: 10px;37  }38  .search-icon {39    position: absolute; right: 48px; top: -8px;40    width: 60px; height: 60px;41  }42  .filters {43    margin-top: 36px; display: flex; justify-content: center; gap: 24px;44  }45  .pill {46    background: #2a3236; color: #cfd8dc; border-radius: 36px;47    padding: 18px 32px; font-size: 34px; display: inline-flex; align-items: center; gap: 16px;48  }49  .pill svg { width: 30px; height: 30px; stroke: #cfd8dc; fill: none; stroke-width: 4; }50 51  /* Chart area */52  .chart {53    position: relative; margin: 36px auto 24px; width: 984px; height: 360px;54    border-bottom: 2px solid #3b474d;55  }56  .chart .line {57    position: absolute; left: 0; right: 0; height: 0;58    border-top: 3px dashed #4d5a60; opacity: 0.7;59  }60  .chart .line.l1 { top: 20px; }61  .chart .line.l2 { top: 180px; }62  .chart .line.l3 { top: 340px; }63  .chart .ylabel {64    position: absolute; left: 0; transform: translateY(-50%);65    color: #8fa1a8; font-size: 32px;66  }67  .chart .ylabel.y1 { top: 20px; }68  .chart .ylabel.y2 { top: 180px; }69  .chart .ylabel.y3 { top: 340px; }70  .chart .bar {71    position: absolute; bottom: 2px; right: 40px;72    width: 48px; height: 240px; background: #22c58b; border-radius: 24px 24px 8px 8px;73  }74  .chart .xlabel {75    position: absolute; bottom: -48px; right: 32px;76    color: #8fa1a8; font-size: 32px;77  }78 79  .overview-btn {80    margin: 24px auto; width: 460px;81    background: #2a3236; border-radius: 44px; padding: 22px 28px;82    display: flex; align-items: center; justify-content: center; gap: 18px;83    color: #cfd8dc; font-size: 34px;84  }85  .overview-btn .chev { width: 28px; height: 28px; stroke: #cfd8dc; }86  .overview-btn .pie { width: 40px; height: 40px; stroke: #cfd8dc; fill: none; stroke-width: 4; }87 88  /* Section header */89  .section {90    position: absolute; top: 880px; left: 0; right: 0;91    background: #1a2023; height: 100px; display: flex; align-items: center;92    padding: 0 48px; box-sizing: border-box; color: #d5e3e7; font-size: 40px; font-weight: 600;93  }94  .section .total { margin-left: auto; color: #cfd8dc; font-weight: 700; }95 96  /* List items */97  .list {98    position: absolute; top: 980px; left: 0; right: 0;99    padding: 0 48px; box-sizing: border-box;100  }101  .item {102    display: flex; align-items: center; padding: 40px 0; border-bottom: 1px solid rgba(255,255,255,0.04);103  }104  .avatar {105    width: 110px; height: 110px; border-radius: 60px; display: flex; align-items: center; justify-content: center;106    color: #fff; font-weight: 800; font-size: 46px;107    box-shadow: 0 8px 16px rgba(0,0,0,0.4);108  }109  .avatar.purple { background: #c86bf0; }110  .avatar.green { background: #22c58b; }111  .info { margin-left: 28px; }112  .title { font-size: 48px; color: #e6f2f1; font-weight: 700; }113  .sub {114    margin-top: 12px; display: flex; align-items: center; gap: 12px;115    color: #93a8af; font-size: 34px;116  }117  .sub svg { width: 30px; height: 30px; stroke: #93a8af; fill: none; stroke-width: 3; }118  .amount-right {119    margin-left: auto; font-size: 46px; font-weight: 800; color: #22c58b;120  }121  .amount-right.neg { color: #f25b5b; }122  .minor-right {123    margin-left: auto; color: #93a8af; font-size: 34px; margin-top: 12px;124  }125 126  /* Floating action button */127  .fab {128    position: absolute; right: 72px; bottom: 240px;129    width: 132px; height: 132px; background: #22c58b;130    border-radius: 66px; box-shadow: 0 12px 24px rgba(0,0,0,0.5);131    display: flex; align-items: center; justify-content: center;132  }133  .fab svg { width: 56px; height: 56px; stroke: #fff; stroke-width: 8; }134 135  /* Bottom nav */136  .bottom-nav {137    position: absolute; left: 0; right: 0; bottom: 96px;138    height: 160px; background: #1a2023; display: flex; align-items: center; justify-content: space-around;139    box-shadow: 0 -6px 16px rgba(0,0,0,0.4);140  }141  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #94a7ad; }142  .nav-item svg { width: 48px; height: 48px; stroke: #94a7ad; fill: none; stroke-width: 4; }143  .nav-item .label { font-size: 30px; }144  .nav-item.active { color: #22c58b; }145  .nav-item.active svg { stroke: #22c58b; }146  /* Home indicator */147  .home-indicator {148    position: absolute; left: 50%; transform: translateX(-50%);149    bottom: 32px; width: 320px; height: 16px; background: #e9e9e9; border-radius: 8px; opacity: 0.8;150  }151</style>152</head>153<body>154<div id="render-target">155 156  <!-- Status bar -->157  <div class="status-bar">158    <div class="time">3:46</div>159    <div class="status-icons">160      <!-- wifi -->161      <svg viewBox="0 0 24 24">162        <path d="M2 8c5-4 15-4 20 0"></path>163        <path d="M5 11c4-3 10-3 14 0"></path>164        <path d="M8 14c3-2 5-2 8 0"></path>165        <circle cx="12" cy="18" r="1.5" fill="#e6f2f1"></circle>166      </svg>167      <!-- battery -->168      <svg viewBox="0 0 28 24">169        <rect x="2" y="6" width="20" height="12" rx="2"></rect>170        <rect x="22" y="10" width="4" height="4"></rect>171        <rect x="4" y="8" width="12" height="8" fill="#e6f2f1" stroke="none"></rect>172      </svg>173    </div>174  </div>175 176  <!-- Summary header -->177  <div class="summary">178    <svg class="search-icon" viewBox="0 0 24 24">179      <circle cx="10" cy="10" r="6" stroke="#aab7be" stroke-width="2" fill="none"></circle>180      <path d="M14 14 L21 21" stroke="#aab7be" stroke-width="2"></path>181    </svg>182 183    <div class="amount">₹81,758.82</div>184    <div class="subtitle">Cash Flow</div>185 186    <div class="filters">187      <div class="pill">188        All Wallets189        <svg viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9"></path></svg>190      </div>191      <div class="pill">192        By months193        <svg viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9"></path></svg>194      </div>195    </div>196 197    <div class="chart">198      <div class="line l1"></div>199      <div class="line l2"></div>200      <div class="line l3"></div>201      <div class="ylabel y1">82k</div>202      <div class="ylabel y2">41k</div>203      <div class="ylabel y3">0k</div>204      <div class="bar"></div>205      <div class="xlabel">Jul 2023</div>206    </div>207 208    <div class="overview-btn">209      <svg class="pie" viewBox="0 0 24 24">210        <circle cx="12" cy="12" r="9"></circle>211        <path d="M12 12 L12 3"></path>212        <path d="M12 12 L20 16"></path>213      </svg>214      Spending Overview215      <svg class="chev" viewBox="0 0 24 24"><path d="M9 5 L16 12 L9 19"></path></svg>216    </div>217  </div>218 219  <!-- Today section -->220  <div class="section">221    Today222    <div class="total">₹81,758.82</div>223  </div>224 225  <div class="list">226    <!-- Shopping item -->227    <div class="item">228      <div class="avatar purple">229        <!-- simple shopping bag -->230        <svg viewBox="0 0 24 24" width="64" height="64" stroke="#fff" fill="none" stroke-width="2">231          <path d="M5 8 h14 l-2 12 H7 Z"></path>232          <path d="M9 8 a3 3 0 0 1 6 0"></path>233        </svg>234      </div>235      <div class="info">236        <div class="title">Shopping</div>237        <div class="sub">238          <svg viewBox="0 0 24 24">239            <rect x="3" y="7" width="18" height="11" rx="2"></rect>240            <path d="M6 7 v-2 h8 v2"></path>241          </svg>242          Cash Wallet243        </div>244      </div>245      <div class="amount-right neg">-₹200</div>246    </div>247 248    <!-- Salary item -->249    <div class="item">250      <div class="avatar green">251        <!-- money bag -->252        <svg viewBox="0 0 24 24" width="64" height="64" stroke="#fff" fill="none" stroke-width="2">253          <path d="M9 6 h6 l-2 2 H11 Z"></path>254          <path d="M6 10 c2-2 10-2 12 0 s-2 7 -6 7 s-8-5 -6-7z"></path>255          <text x="12" y="15" text-anchor="middle" font-size="8" fill="#fff">$</text>256        </svg>257      </div>258      <div class="info" style="flex:1;">259        <div class="title">Salary</div>260        <div class="sub">261          <svg viewBox="0 0 24 24">262            <rect x="3" y="7" width="18" height="11" rx="2"></rect>263            <path d="M6 7 v-2 h8 v2"></path>264          </svg>265          Cash Wallet266        </div>267      </div>268      <div style="display:flex; flex-direction:column; align-items:flex-end;">269        <div class="amount-right">₹81,958.82</div>270        <div class="minor-right">$1,000</div>271      </div>272    </div>273  </div>274 275  <!-- Floating action button -->276  <div class="fab">277    <svg viewBox="0 0 24 24"><path d="M12 5 v14 M5 12 h14"></path></svg>278  </div>279 280  <!-- Bottom navigation -->281  <div class="bottom-nav">282    <div class="nav-item active">283      <svg viewBox="0 0 24 24">284        <rect x="5" y="5" width="14" height="16" rx="2"></rect>285        <path d="M8 9 h8"></path>286        <path d="M8 13 h8"></path>287      </svg>288      <div class="label">Timeline</div>289    </div>290    <div class="nav-item">291      <svg viewBox="0 0 24 24">292        <rect x="4" y="7" width="16" height="12" rx="2"></rect>293        <path d="M8 7 v-3 h8 v3"></path>294      </svg>295      <div class="label">Wallets</div>296    </div>297    <div class="nav-item">298      <svg viewBox="0 0 24 24">299        <path d="M6 18 h12 l-2-8 H8 Z"></path>300        <path d="M9 6 h6 l-2 2 H11 Z"></path>301      </svg>302      <div class="label">Budgets</div>303    </div>304    <div class="nav-item">305      <svg viewBox="0 0 24 24">306        <path d="M12 4 c4 0 7 3 7 7 0 3-2 5-2 7 H7 c0-2-2-4-2-7 0-4 3-7 7-7z"></path>307        <circle cx="12" cy="10" r="2"></circle>308      </svg>309      <div class="label">Activity</div>310    </div>311    <div class="nav-item">312      <svg viewBox="0 0 24 24">313        <circle cx="5" cy="12" r="2"></circle>314        <circle cx="12" cy="12" r="2"></circle>315        <circle cx="19" cy="12" r="2"></circle>316      </svg>317      <div class="label">More</div>318    </div>319  </div>320 321  <div class="home-indicator"></div>322</div>323</body>324</html>