GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Finance Overview UI</title>5<style>6  body{margin:0;padding:0;background:transparent;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;}7  #render-target{8    width:1080px;height:2400px;9    position:relative;overflow:hidden;10    background:#0e1113; color:#e6f0e6;11  }12  .status-bar{13    position:absolute;top:0;left:0;width:100%;height:110px;14    padding:30px 36px;box-sizing:border-box;color:#d9dfd9;font-weight:600;font-size:44px;15    display:flex;align-items:center;justify-content:space-between;16  }17  .status-icons{display:flex;align-items:center;gap:24px;}18  .header{19    position:absolute;top:110px;left:0;width:100%;height:130px;20    display:flex;align-items:center;21    padding:0 36px;box-sizing:border-box;22  }23  .back-btn{24    width:84px;height:84px;border-radius:42px;display:flex;align-items:center;justify-content:center;25  }26  .title{font-size:64px;font-weight:800;letter-spacing:0.5px;margin-left:18px;}27  .filters{28    position:absolute;top:240px;left:0;width:100%;29    display:flex;gap:24px;padding:0 36px;box-sizing:border-box;30  }31  .chip{32    display:flex;align-items:center;gap:18px;33    background:#21262b;border:1px solid #3b454c;color:#cfe6cf;34    padding:22px 30px;border-radius:50px;font-size:40px;35  }36  .month{37    position:absolute;top:330px;left:0;width:100%;38    text-align:center;color:#bfc9bf;font-size:40px;letter-spacing:4px;39  }40  .cards-row{41    position:absolute;top:390px;left:0;width:100%;42    display:flex;gap:24px;padding:0 36px;box-sizing:border-box;43  }44  .card{45    flex:1;background:#25303a;border-radius:32px;padding:40px;46    box-sizing:border-box;display:flex;flex-direction:column;gap:16px;47    color:#a9b7a9;48  }49  .card .amount{font-size:56px;font-weight:900;color:#6af0a4;}50  .card .subtitle{font-size:40px;color:#c2cbd0;}51  .chart{52    position:absolute;top:640px;left:36px;width:1008px;height:740px;53    border-radius:16px;54  }55  .chart .grid-line{56    position:absolute;left:0;width:100%;border-top:2px dashed #435058;opacity:0.7;57  }58  .chart .grid1{top:50px;}59  .chart .grid2{top:230px;}60  .chart .grid3{top:410px;}61  .chart .grid4{top:590px;}62  .chart svg{position:absolute;left:0;top:0;width:100%;height:100%;}63  .xlabels{64    position:absolute;bottom:0;left:0;width:100%;display:flex;justify-content:space-between;65    color:#98a6ac;font-size:34px;padding:0 12px 12px 12px;box-sizing:border-box;66  }67  .categories-title{68    position:absolute;top:1410px;left:36px;font-size:72px;font-weight:800;69  }70  .cards-row.small{71    top:1490px;72  }73  .card.dark{background:#2a343e;}74  .card .amount.red{color:#ff6e6e;}75  .card .amount.green{color:#9bf79d;}76  .donut{77    position:absolute;top:1720px;left:0;width:100%;display:flex;justify-content:center;align-items:center;78  }79  .donut svg{width:540px;height:540px;}80  .bottom-nav{81    position:absolute;bottom:0;left:0;width:100%;height:180px;background:#111518;82    border-top:1px solid #2a3136;display:flex;justify-content:space-around;align-items:center;83  }84  .nav-item{display:flex;flex-direction:column;align-items:center;color:#8fa38f;font-size:36px;gap:12px;position:relative;}85  .nav-item.active{color:#7bf594;}86  .badge{87    position:absolute;top:-6px;right:-18px;background:#ff5b5b;color:#fff;border-radius:24px;padding:6px 14px;font-size:30px;border:2px solid #182024;88  }89  /* simple helpers */90  .icon{display:inline-block}91</style>92</head>93<body>94<div id="render-target">95 96  <!-- Status bar -->97  <div class="status-bar">98    <div>12:46</div>99    <div class="status-icons">100      <!-- small phone icon -->101      <svg class="icon" width="40" height="40" viewBox="0 0 24 24" fill="#cfd6cf"><rect x="6" y="2" width="12" height="20" rx="2" ry="2"/></svg>102      <!-- cloud icon -->103      <svg class="icon" width="44" height="44" viewBox="0 0 24 24" fill="#cfd6cf">104        <path d="M7 17h9a4 4 0 0 0 0-8 5.5 5.5 0 0 0-10.5 1A3.5 3.5 0 0 0 7 17z"/>105      </svg>106      <!-- wifi icon -->107      <svg class="icon" width="44" height="44" viewBox="0 0 24 24" fill="#cfd6cf">108        <path d="M12 20a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm-6-7a9 9 0 0 1 12 0l-1.5 1.5a7 7 0 0 0-9 0L6 13zm-3-4a14 14 0 0 1 18 0l-1.5 1.5a12 12 0 0 0-15 0L3 9z"/>109      </svg>110      <!-- battery icon -->111      <svg class="icon" width="44" height="44" viewBox="0 0 24 24">112        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="#cfd6cf"/>113        <rect x="3.5" y="7.5" width="12" height="9" fill="#101517"/>114        <rect x="4" y="8" width="10" height="7" fill="#7bf594"/>115        <rect x="20" y="10" width="2" height="4" fill="#cfd6cf"/>116      </svg>117    </div>118  </div>119 120  <!-- Header -->121  <div class="header">122    <div class="back-btn">123      <svg width="64" height="64" viewBox="0 0 24 24" fill="#cfd6cf">124        <path d="M15.5 19.5L8 12l7.5-7.5 1.5 1.5L11 12l6 6z"/>125      </svg>126    </div>127    <div class="title">Overview</div>128  </div>129 130  <!-- Filters -->131  <div class="filters">132    <div class="chip">All Wallets133      <svg width="36" height="36" viewBox="0 0 24 24" fill="#cfe6cf"><path d="M7 10l5 5 5-5z"/></svg>134    </div>135    <div class="chip">By months136      <svg width="36" height="36" viewBox="0 0 24 24" fill="#cfe6cf"><path d="M7 10l5 5 5-5z"/></svg>137    </div>138  </div>139 140  <div class="month">JULY 2023</div>141 142  <!-- Top Cards -->143  <div class="cards-row">144    <div class="card">145      <div class="amount">$4,910</div>146      <div class="subtitle">Total Wealth</div>147    </div>148    <div class="card">149      <div class="amount">$4,910</div>150      <div class="subtitle">Monthly Cash Flow</div>151    </div>152  </div>153 154  <!-- Chart -->155  <div class="chart">156    <div class="grid-line grid1"></div>157    <div class="grid-line grid2"></div>158    <div class="grid-line grid3"></div>159    <div class="grid-line grid4"></div>160 161    <!-- line chart -->162    <svg viewBox="0 0 1000 740">163      <!-- baseline -->164      <path d="M0 700 L920 700" stroke="#6af0a4" stroke-width="6" fill="none"/>165      <!-- spike line -->166      <path d="M0 700 167               L850 700 168               C870 700 880 690 890 690 169               C900 690 908 640 910 600 170               C912 540 920 300 940 120 171               C952 70 970 60 990 90" 172            stroke="#76f3a7" stroke-width="12" fill="none" stroke-linecap="round" stroke-linejoin="round"/>173      <!-- end dot -->174      <circle cx="990" cy="90" r="14" fill="#76f3a7"/>175    </svg>176 177    <div class="xlabels">178      <div>Jul 1</div>179      <div>Jul 7</div>180      <div>Jul 14</div>181      <div>Jul 20</div>182      <div>Today</div>183    </div>184  </div>185 186  <!-- Categories -->187  <div class="categories-title">Categories</div>188 189  <!-- Expense / Income Cards -->190  <div class="cards-row small">191    <div class="card dark">192      <div class="amount red">-$90</div>193      <div class="subtitle">Expenses</div>194    </div>195    <div class="card dark">196      <div class="amount green">$5,000</div>197      <div class="subtitle">Income</div>198    </div>199  </div>200 201  <!-- Donut Chart -->202  <div class="donut">203    <svg viewBox="0 0 200 200">204      <!-- outer ring background -->205      <circle cx="100" cy="100" r="80" stroke="#3b2a4a" stroke-width="32" fill="none"/>206      <!-- filled segments -->207      <path d="M100 20 208               A80 80 0 0 1 188 83"209            stroke="#c57bf7" stroke-width="32" fill="none"/>210      <path d="M188 83 211               A80 80 0 0 1 140 180"212            stroke="#b66af0" stroke-width="32" fill="none"/>213      <path d="M140 180 214               A80 80 0 0 1 60 160"215            stroke="#a456e6" stroke-width="32" fill="none"/>216      <path d="M60 160 217               A80 80 0 0 1 100 20"218            stroke="#8c46d8" stroke-width="32" fill="none"/>219      <!-- inner hole -->220      <circle cx="100" cy="100" r="40" fill="#0e1113"/>221    </svg>222  </div>223 224  <!-- Bottom navigation -->225  <div class="bottom-nav">226    <div class="nav-item active">227      <!-- list icon -->228      <svg width="44" height="44" viewBox="0 0 24 24" fill="#7bf594">229        <path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"/>230      </svg>231      <div>Timeline</div>232    </div>233    <div class="nav-item">234      <svg width="44" height="44" viewBox="0 0 24 24" fill="#8fa38f">235        <path d="M7 7h10v12H7zM9 3h6v3H9z"/>236      </svg>237      <div>Wallets</div>238    </div>239    <div class="nav-item">240      <svg width="44" height="44" viewBox="0 0 24 24" fill="#8fa38f">241        <path d="M12 3l3 6h6l-4.5 4 1.5 7-6-3.5L6 20l1.5-7L3 9h6z"/>242      </svg>243      <div>Budgets</div>244    </div>245    <div class="nav-item">246      <svg width="44" height="44" viewBox="0 0 24 24" fill="#8fa38f">247        <path d="M12 2a6 6 0 0 0-6 6v4H4a2 2 0 0 0-2 2v6h20v-6a2 2 0 0 0-2-2h-2V8a6 6 0 0 0-6-6z"/>248      </svg>249      <div>Activity</div>250      <div class="badge">1</div>251    </div>252    <div class="nav-item">253      <svg width="44" height="44" viewBox="0 0 24 24" fill="#8fa38f">254        <circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/>255      </svg>256      <div>More</div>257    </div>258  </div>259 260</div>261</body>262</html>