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>Cash Flow UI</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width:1080px;10 height:2400px;11 position:relative;12 overflow:hidden;13 background:#0e0f11;14 color:#e7edf3;15 }16 17 /* Status bar */18 .status-bar{19 height:110px;20 padding:0 36px;21 display:flex;22 align-items:center;23 justify-content:space-between;24 color:#d9dee5;25 font-weight:600;26 letter-spacing:1px;27 font-size:40px;28 }29 .status-icons{ display:flex; align-items:center; gap:26px; }30 .status-dot{ width:18px; height:18px; background:#cfd6dd; border-radius:50%; opacity:.8; }31 .battery{32 width:64px; height:34px; border:3px solid #cfd6dd; border-radius:7px; position:relative;33 }34 .battery::after{35 content:""; position:absolute; right:-10px; top:9px; width:8px; height:16px; background:#cfd6dd; border-radius:2px;36 }37 .battery .level{position:absolute; left:4px; top:4px; right:14px; bottom:4px; background:#cfd6dd;}38 39 /* Main header */40 .content{ padding:10px 44px 0 44px; }41 .title-amount{ font-size:92px; font-weight:800; margin-top:10px; }42 .subtitle{ color:#9fb0bf; font-size:40px; margin-top:-6px; }43 44 /* Filter row */45 .filter-row{ margin-top:34px; display:flex; align-items:center; gap:22px; position:relative; }46 .chip{47 background:#22272c; color:#c8d2dc; padding:22px 28px; border-radius:50px; font-size:36px; display:flex; align-items:center; gap:14px;48 }49 .chip .dd svg{ width:26px; height:26px; fill:#a8b5c1; }50 .search{51 position:absolute; right:0; top:0; width:76px; height:76px; display:flex; align-items:center; justify-content:center;52 border-radius:38px; background:#1c2126;53 }54 .search svg{ width:40px; height:40px; fill:#c8d2dc; }55 56 /* Chart */57 .chart{58 margin-top:40px; height:330px; position:relative;59 background:60 repeating-linear-gradient(to bottom, transparent 0 56px, rgba(120,140,160,0.35) 56px 58px);61 border-bottom:2px solid rgba(120,140,160,0.25);62 }63 .y-label{ position:absolute; left:0; width:100%; color:#6e7b86; top:-40px; font-size:28px;}64 .bar{65 position:absolute; bottom:0; right:20px; width:64px; height:290px; background:#6ee7b7; border-radius:16px 16px 0 0;66 }67 .bar.red{68 width:16px; height:20px; background:#ff6b6b; right:20px; margin-right:-30px; border-radius:4px 4px 0 0;69 }70 71 /* Spending overview button */72 .overview{73 margin-top:26px; display:inline-flex; align-items:center; gap:16px;74 background:#1f252a; color:#c8d2dc; padding:22px 30px; border-radius:50px; font-size:36px;75 }76 .overview .pie{77 width:42px; height:42px; border-radius:50%; background:#2e3640; position:relative;78 }79 .overview .pie:before{80 content:""; position:absolute; left:9px; top:9px; right:9px; bottom:9px; border:4px solid #91a4b3; border-top-color:#6ee7b7; border-right-color:#6ee7b7; border-radius:50%;81 }82 83 /* Section header */84 .section{85 margin-top:40px; padding-top:12px; border-top:1px solid rgba(140,160,175,0.15);86 display:flex; align-items:center; justify-content:space-between;87 }88 .section .name{ color:#cfd8e3; font-size:42px; }89 .section .total{ color:#e8eef5; font-size:42px; }90 91 /* List items */92 .list{ margin-top:16px; }93 .item{94 padding:30px 0; display:flex; align-items:flex-start; justify-content:space-between; border-bottom:1px solid rgba(140,160,175,0.08);95 }96 .left{ display:flex; gap:26px; }97 .icon{98 width:96px; height:96px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:46px;99 }100 .icon.purple{ background:#b066ff; }101 .icon.green{ background:#36c48a; }102 .meta .title{ font-size:56px; color:#ecf1f7; }103 .meta .sub{ margin-top:8px; color:#9fb0bf; font-size:36px; display:flex; align-items:center; gap:12px; }104 .amount{ font-size:52px; margin-top:10px; }105 .amount.negative{ color:#ff6b6b; }106 .amount.positive{ color:#6ee7b7; }107 108 .mini-icon{ width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; }109 .mini-icon svg{ width:34px; height:34px; fill:#9fb0bf; }110 111 /* Floating action button */112 .fab{113 position:absolute; right:46px; bottom:246px; width:150px; height:150px; background:#39d686; border-radius:50%;114 display:flex; align-items:center; justify-content:center; box-shadow:0 10px 28px rgba(0,0,0,0.5);115 }116 .fab span{117 font-size:92px; color:#0e0f11; line-height:0; margin-top:-10px;118 }119 120 /* Bottom nav */121 .bottom-bar{122 position:absolute; left:0; right:0; bottom:0; height:190px; background:#0f1214; border-top:1px solid rgba(140,160,175,0.15);123 display:flex; align-items:flex-start; justify-content:space-around; padding-top:24px;124 }125 .nav-item{ display:flex; flex-direction:column; align-items:center; color:#aab7c3; font-size:34px; gap:16px; position:relative; }126 .nav-item .ico{ width:56px; height:56px; border-radius:14px; background:#232931; display:flex; align-items:center; justify-content:center; }127 .nav-item.active{ color:#53d49a; }128 .nav-item.active .ico{ background:#1d2a22; }129 .notif{130 position:absolute; top:-4px; right:0; background:#ff6b6b; color:#fff; font-size:28px; border-radius:30px; padding:6px 12px;131 transform:translate(30px,-10px);132 }133 .ico svg{ width:34px; height:34px; fill:currentColor; color:#aab7c3; }134 .nav-item.active .ico svg{ color:#53d49a; }135</style>136</head>137<body>138<div id="render-target">139 140 <!-- Status Bar -->141 <div class="status-bar">142 <div>12:45</div>143 <div class="status-icons">144 <div class="status-dot"></div>145 <div class="status-dot" style="width:22px; height:22px;"></div>146 <div class="battery"><div class="level"></div></div>147 </div>148 </div>149 150 <div class="content">151 <div class="title-amount">$4,910</div>152 <div class="subtitle">Cash Flow</div>153 154 <div class="filter-row">155 <div class="chip">156 <span>All Wallets</span>157 <span class="dd">158 <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>159 </span>160 </div>161 <div class="chip">162 <span>By months</span>163 <span class="dd">164 <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>165 </span>166 </div>167 <div class="search">168 <svg viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3a6 6 0 10-.7.7l.3.3v.8l4.5 4.5 1.3-1.3L15.5 14zM10 15a5 5 0 110-10 5 5 0 010 10z"/></svg>169 </div>170 </div>171 172 <div class="chart">173 <div class="bar"></div>174 <div class="bar red"></div>175 </div>176 177 <div class="overview">178 <div class="pie"></div>179 <div>Spending Overview</div>180 </div>181 182 <div class="section">183 <div class="name">Today</div>184 <div class="total">$4,910</div>185 </div>186 187 <div class="list">188 <!-- Shopping item -->189 <div class="item">190 <div class="left">191 <div class="icon purple">🛍️</div>192 <div class="meta">193 <div class="title">Shopping</div>194 <div class="sub">195 <span class="mini-icon">196 <svg viewBox="0 0 24 24"><path d="M21 7H3V5h18v2zm-2 12H5a2 2 0 01-2-2V9h20v8a2 2 0 01-2 2zM7 12h4v2H7v-2z"/></svg>197 </span>198 <span>Cash Wallet</span>199 </div>200 </div>201 </div>202 <div class="amount negative">-$90</div>203 </div>204 205 <!-- Salary item -->206 <div class="item">207 <div class="left">208 <div class="icon green">💰</div>209 <div class="meta">210 <div class="title">Salary</div>211 <div class="sub">212 <span class="mini-icon">213 <svg viewBox="0 0 24 24"><path d="M21 7H3V5h18v2zm-2 12H5a2 2 0 01-2-2V9h20v8a2 2 0 01-2 2zM7 12h4v2H7v-2z"/></svg>214 </span>215 <span>Cash Wallet</span>216 </div>217 <div class="sub">218 <span class="mini-icon">219 <svg viewBox="0 0 24 24"><path d="M3 4h18v2H3V4zm2 4h14v12H5V8zm3 2v2h8v-2H8zm0 4v2h8v-2H8z"/></svg>220 </span>221 <span>AB organization</span>222 </div>223 </div>224 </div>225 <div class="amount positive">$5,000</div>226 </div>227 </div>228 </div>229 230 <!-- Floating Action Button -->231 <div class="fab"><span>+</span></div>232 233 <!-- Bottom Navigation -->234 <div class="bottom-bar">235 <div class="nav-item active">236 <div class="ico">237 <svg viewBox="0 0 24 24"><path d="M4 4h16v2H4zM4 10h16v2H4zM4 16h16v2H4z"/></svg>238 </div>239 <div>Timeline</div>240 </div>241 <div class="nav-item">242 <div class="ico">243 <svg viewBox="0 0 24 24"><path d="M21 7H3V5h18v2zm-2 12H5a2 2 0 01-2-2V9h20v8a2 2 0 01-2 2z"/></svg>244 </div>245 <div>Wallets</div>246 </div>247 <div class="nav-item">248 <div class="ico">249 <svg viewBox="0 0 24 24"><path d="M4 4h6v16H4V4zm10 6h6v10h-6V10z"/></svg>250 </div>251 <div>Budgets</div>252 </div>253 <div class="nav-item">254 <div class="ico">255 <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 01-2-2h4a2 2 0 01-2 2zM6 17h12l-2-7V6a4 4 0 10-8 0v4l-2 7z"/></svg>256 </div>257 <div>Activity</div>258 <div class="notif">1</div>259 </div>260 <div class="nav-item">261 <div class="ico">262 <svg viewBox="0 0 24 24"><path d="M12 8a4 4 0 110 8 4 4 0 010-8zm8 4a8 8 0 11-16 0 8 8 0 0116 0z"/></svg>263 </div>264 <div>More</div>265 </div>266 </div>267 268</div>269</body>270</html>