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>Add New Budget UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    color: #EDEDED;16  }17 18  /* Status bar */19  .status-bar {20    height: 96px;21    padding: 0 36px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #EDEDED;26    font-size: 34px;27    opacity: 0.9;28  }29  .status-right {30    display: flex;31    gap: 18px;32    align-items: center;33  }34  .icon-signal, .icon-battery { width: 36px; height: 24px; }35 36  /* Header */37  .appbar {38    height: 120px;39    display: flex;40    align-items: center;41    padding: 0 28px;42    position: relative;43    border-bottom: 1px solid #2A2A2A;44  }45  .appbar h1 {46    position: absolute;47    left: 50%;48    transform: translateX(-50%);49    font-size: 56px;50    font-weight: 600;51    color: #D9D9D9;52    letter-spacing: 0.5px;53  }54  .icon-btn {55    width: 72px;56    height: 72px;57    display: flex;58    align-items: center;59    justify-content: center;60    cursor: default;61  }62  .icon-btn svg { width: 40px; height: 40px; stroke: #A9A9A9; }63 64  /* Form */65  .form {66    padding: 28px 48px;67  }68  .row {69    display: flex;70    align-items: flex-start;71    gap: 28px;72    margin: 36px 0;73  }74  .row .left-ico {75    width: 72px;76    height: 72px;77    min-width: 72px;78    display: flex;79    align-items: center;80    justify-content: center;81    margin-top: 8px;82  }83  .left-ico svg { width: 60px; height: 60px; fill: #17CFA2; stroke: #17CFA2; }84  .field {85    flex: 1;86  }87  .label {88    font-size: 34px;89    color: #9BA3A7;90    margin-bottom: 12px;91  }92  .input-line {93    font-size: 46px;94    padding: 8px 0 16px;95    border-bottom: 2px solid #2F3A3E;96    color: #EDEDED;97  }98  .two-col {99    display: grid;100    grid-template-columns: 1fr 1fr;101    gap: 36px;102  }103  .value-with-arrow {104    font-size: 42px;105    color: #AFC0C8;106    display: flex;107    align-items: center;108    justify-content: space-between;109    padding: 16px 0;110    border-bottom: 2px solid #2F3A3E;111  }112  .list-row {113    display: flex;114    align-items: center;115    justify-content: space-between;116    padding: 18px 0;117  }118  .list-row .title {119    font-size: 42px;120    color: #D5DADD;121  }122  .list-row .value {123    font-size: 40px;124    color: #9FB0B9;125    display: flex;126    align-items: center;127    gap: 16px;128  }129  .chev { width: 28px; height: 28px; }130 131  /* CTA button */132  .cta-wrap {133    position: absolute;134    left: 0;135    right: 0;136    bottom: 120px;137    display: flex;138    justify-content: center;139  }140  .cta {141    width: 940px;142    height: 120px;143    background: #17CFA2;144    color: #FFFFFF;145    border-radius: 60px;146    display: flex;147    align-items: center;148    justify-content: center;149    font-size: 44px;150    font-weight: 600;151    box-shadow: 0 10px 24px rgba(23, 207, 162, 0.35);152  }153 154  /* Gesture bar */155  .gesture {156    position: absolute;157    bottom: 36px;158    left: 50%;159    transform: translateX(-50%);160    width: 300px;161    height: 10px;162    background: #E6E6E6;163    border-radius: 8px;164    opacity: 0.9;165  }166</style>167</head>168<body>169<div id="render-target">170 171  <!-- Status Bar -->172  <div class="status-bar">173    <div class="time">3:51</div>174    <div class="status-right">175      <svg class="icon-signal" viewBox="0 0 24 24" fill="#EDEDED"><rect x="2" y="14" width="4" height="8"/><rect x="8" y="10" width="4" height="12" opacity="0.8"/><rect x="14" y="6" width="4" height="16" opacity="0.6"/><rect x="20" y="2" width="2" height="20" opacity="0.4"/></svg>176      <svg class="icon-battery" viewBox="0 0 28 14">177        <rect x="1" y="2" width="22" height="10" rx="2" ry="2" fill="none" stroke="#EDEDED" stroke-width="2"/>178        <rect x="3" y="4" width="18" height="6" fill="#EDEDED"/>179        <rect x="24" y="5" width="3" height="4" fill="#EDEDED"/>180      </svg>181    </div>182  </div>183 184  <!-- App Bar -->185  <div class="appbar">186    <div class="icon-btn" aria-label="Close">187      <svg viewBox="0 0 24 24" stroke-width="2" fill="none"><path d="M6 6 L18 18 M18 6 L6 18"/></svg>188    </div>189    <h1>Add New Budget</h1>190  </div>191 192  <!-- Form -->193  <div class="form">194 195    <!-- Budget Name -->196    <div class="row">197      <div class="left-ico">198        <svg viewBox="0 0 24 24">199          <path d="M8 7c0-1.2 1.5-2 4-2s4 .8 4 2l2 3c1 1.5 1 3.5-1 4.5-2.5 1.5-9.5 1.5-12 0-2-1-2-3 0-5L8 7z"/>200          <circle cx="12" cy="13" r="2" fill="#121212"></circle>201          <path d="M10 4l4 0" stroke="#17CFA2" stroke-width="2" />202        </svg>203      </div>204      <div class="field">205        <div class="label">Budget Name</div>206        <div class="input-line">JULY</div>207      </div>208    </div>209 210    <!-- Amount + Currency -->211    <div class="row">212      <div class="left-ico">213        <svg viewBox="0 0 24 24">214          <rect x="3" y="8" width="14" height="9" rx="1"></rect>215          <rect x="7" y="5" width="14" height="9" rx="1" opacity="0.7"></rect>216          <circle cx="12" cy="10" r="2" fill="#121212"></circle>217        </svg>218      </div>219      <div class="field two-col">220        <div>221          <div class="label">Amount</div>222          <div class="input-line">100</div>223        </div>224        <div>225          <div class="label">Currency</div>226          <div class="value-with-arrow">227            <span>INR</span>228            <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#9FB0B9" stroke-width="2"><path d="M8 5l8 7-8 7"/></svg>229          </div>230        </div>231      </div>232    </div>233 234    <!-- Wallets -->235    <div class="row">236      <div class="left-ico">237        <svg viewBox="0 0 24 24">238          <rect x="3" y="6" width="18" height="12" rx="2"></rect>239          <rect x="3" y="9" width="18" height="3" fill="#121212"></rect>240          <circle cx="17" cy="12" r="1.5" fill="#121212"></circle>241        </svg>242      </div>243      <div class="field list-row">244        <div class="title">Wallets</div>245        <div class="value">246          <span>All Wallets</span>247          <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#9FB0B9" stroke-width="2"><path d="M8 5l8 7-8 7"/></svg>248        </div>249      </div>250    </div>251 252    <!-- Budget for -->253    <div class="row">254      <div class="left-ico">255        <svg viewBox="0 0 24 24">256          <circle cx="6" cy="9" r="2.5"></circle>257          <circle cx="12" cy="9" r="2.5"></circle>258          <circle cx="18" cy="9" r="2.5"></circle>259          <path d="M4 16h4M10 16h4M16 16h4" stroke="#17CFA2" stroke-width="2"></path>260        </svg>261      </div>262      <div class="field list-row">263        <div class="title">Budget for</div>264        <div class="value">265          <span>All Expenses</span>266          <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#9FB0B9" stroke-width="2"><path d="M8 5l8 7-8 7"/></svg>267        </div>268      </div>269    </div>270 271    <!-- Recurrence -->272    <div class="row">273      <div class="left-ico">274        <svg viewBox="0 0 24 24">275          <rect x="3" y="4" width="18" height="16" rx="2"></rect>276          <rect x="3" y="8" width="18" height="2" fill="#121212"></rect>277          <rect x="6" y="12" width="3" height="3" fill="#121212"></rect>278          <rect x="11" y="12" width="3" height="3" fill="#121212"></rect>279          <rect x="16" y="12" width="3" height="3" fill="#121212"></rect>280        </svg>281      </div>282      <div class="field list-row">283        <div class="title">Recurrence</div>284        <div class="value">285          <span>Monthly</span>286          <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#9FB0B9" stroke-width="2"><path d="M8 5l8 7-8 7"/></svg>287        </div>288      </div>289    </div>290 291    <!-- Start Date -->292    <div class="row">293      <div class="left-ico">294        <svg viewBox="0 0 24 24">295          <circle cx="12" cy="12" r="9"></circle>296          <path d="M10 8l6 4-6 4" fill="#121212"></path>297        </svg>298      </div>299      <div class="field list-row">300        <div class="title">Start Date</div>301        <div class="value">302          <span>Today</span>303          <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#9FB0B9" stroke-width="2"><path d="M8 5l8 7-8 7"/></svg>304        </div>305      </div>306    </div>307 308  </div>309 310  <!-- CTA -->311  <div class="cta-wrap">312    <div class="cta">Create a New Budget</div>313  </div>314 315  <!-- Gesture Bar -->316  <div class="gesture"></div>317</div>318</body>319</html>