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  :root{9    --bg:#2F3F45;10    --panel:#34474D;11    --text:#C8D2D5;12    --subtext:#8FA2A7;13    --line:#3F555B;14    --accent:#27B08E;15    --white:#FFFFFF;16    --black:#000000;17  }18  body{19    margin:0;20    padding:0;21    background:transparent;22    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;23    color:var(--text);24  }25  #render-target{26    width:1080px;27    height:2400px;28    position:relative;29    overflow:hidden;30    background:var(--bg);31  }32  /* Status bar */33  .status-bar{34    height:120px;35    background:#121212;36    width:100%;37  }38  /* Header */39  .header{40    height:140px;41    display:flex;42    align-items:center;43    justify-content:center;44    color:var(--text);45    position:relative;46    border-bottom:1px solid rgba(255,255,255,0.04);47  }48  .header .title{49    font-size:54px;50    font-weight:600;51    letter-spacing:0.5px;52  }53  .header .close{54    position:absolute;55    left:24px;56    top:50%;57    transform:translateY(-50%);58    width:88px;59    height:88px;60    display:flex;61    align-items:center;62    justify-content:center;63    cursor:default;64  }65  .close svg{width:42px;height:42px;stroke:var(--subtext);}66  /* Content list */67  .content{68    padding:24px 36px 24px 36px;69  }70  .row{71    display:flex;72    align-items:flex-start;73    padding:22px 0;74    position:relative;75  }76  .icon{77    width:96px;78    height:96px;79    border-radius:20px;80    display:flex;81    align-items:center;82    justify-content:center;83    margin-right:22px;84  }85  .icon svg{86    width:56px;87    height:56px;88    fill:var(--accent);89    stroke:var(--accent);90  }91  .field{92    flex:1;93    padding-right:24px;94  }95  .label{96    font-size:32px;97    color:var(--subtext);98    margin-bottom:12px;99  }100  .value{101    font-size:48px;102    letter-spacing:1px;103    color:var(--text);104  }105  .underline{106    border-bottom:2px solid var(--line);107    margin-top:18px;108  }109  .chevron{110    width:56px;111    height:56px;112    align-self:center;113  }114  .row.two-col{115    align-items:flex-end;116  }117  .two-col .col{118    width:50%;119    padding-right:18px;120  }121  .right-value{122    margin-left:auto;123    color:var(--subtext);124    font-size:42px;125  }126  /* Divider spacing for list groups */127  .spacer{height:12px;}128  /* Bottom sheet for Recurrence */129  .sheet{130    position:absolute;131    left:0;132    right:0;133    bottom:0;134    height:920px;135    background:var(--panel);136    box-shadow:0 -8px 24px rgba(0,0,0,0.35);137    padding:36px 36px 120px 36px;138  }139  .sheet .sheet-title{140    font-size:44px;141    font-weight:700;142    margin-bottom:28px;143  }144  .option{145    font-size:44px;146    color:var(--text);147    padding:28px 6px;148    border-bottom:1px solid rgba(255,255,255,0.04);149  }150  .option.muted{color:var(--subtext);}151  .option.selected{color:var(--accent); font-weight:700;}152  /* Floating confirm check */153  .fab{154    position:absolute;155    right:36px;156    bottom:110px;157    width:96px;158    height:96px;159    background:var(--accent);160    border-radius:50%;161    display:flex;162    align-items:center;163    justify-content:center;164    box-shadow:0 8px 18px rgba(0,0,0,0.45);165  }166  .fab svg{width:46px;height:46px;stroke:var(--white);fill:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;}167  /* Gesture bar mock */168  .gesture{169    position:absolute;170    bottom:22px;171    left:50%;172    transform:translateX(-50%);173    width:300px;174    height:10px;175    background:#E6E6E6;176    border-radius:8px;177    opacity:0.85;178  }179  .bottom-black{180    position:absolute;181    left:0; right:0;182    bottom:0;183    height:120px;184    background:#000;185  }186  /* Right arrow icon look */187  .chev svg{width:36px;height:36px;stroke:var(--subtext);fill:none;stroke-width:6;}188</style>189</head>190<body>191<div id="render-target">192 193  <div class="status-bar"></div>194 195  <div class="header">196    <div class="close" aria-hidden="true">197      <svg viewBox="0 0 24 24">198        <path d="M6 6 L18 18 M18 6 L6 18" stroke-width="2" stroke-linecap="round" />199      </svg>200    </div>201    <div class="title">Add New Budget</div>202  </div>203 204  <div class="content">205    <!-- Budget Name -->206    <div class="row">207      <div class="icon">208        <svg viewBox="0 0 24 24">209          <path d="M12 3l6 4-6 4-6-4 6-4zm-6 8l6 4 6-4v6l-6 4-6-4v-6z"></path>210        </svg>211      </div>212      <div class="field">213        <div class="label">Budget Name</div>214        <div class="value" style="letter-spacing:2px;">JULY</div>215        <div class="underline"></div>216      </div>217    </div>218 219    <!-- Amount + Currency -->220    <div class="row two-col">221      <div class="icon">222        <svg viewBox="0 0 24 24">223          <rect x="3" y="6" width="18" height="12" rx="2"></rect>224          <rect x="5" y="8" width="10" height="8" rx="1" fill="none"></rect>225        </svg>226      </div>227      <div class="col">228        <div class="label">Amount</div>229        <div class="value">100</div>230        <div class="underline"></div>231      </div>232      <div class="col">233        <div class="label">Currency</div>234        <div class="value" style="color:var(--subtext)">INR</div>235        <div class="underline"></div>236      </div>237      <div class="chev chevron">238        <svg viewBox="0 0 24 24">239          <path d="M9 6l6 6-6 6"></path>240        </svg>241      </div>242    </div>243 244    <!-- Wallets -->245    <div class="row">246      <div class="icon">247        <svg viewBox="0 0 24 24">248          <rect x="3" y="6" width="18" height="12" rx="2"></rect>249          <path d="M3 10h18"></path>250        </svg>251      </div>252      <div class="field">253        <div class="label">Wallets</div>254      </div>255      <div class="right-value">All Wallets</div>256      <div class="chev chevron" style="margin-left:10px;">257        <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"></path></svg>258      </div>259    </div>260 261    <!-- Budget for -->262    <div class="row">263      <div class="icon">264        <svg viewBox="0 0 24 24">265          <circle cx="8" cy="8" r="3"></circle>266          <circle cx="16" cy="8" r="3"></circle>267          <circle cx="12" cy="15" r="3"></circle>268        </svg>269      </div>270      <div class="field">271        <div class="label">Budget for</div>272      </div>273      <div class="right-value">1</div>274      <div class="chev chevron" style="margin-left:10px;">275        <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"></path></svg>276      </div>277    </div>278 279    <!-- Recurrence -->280    <div class="row">281      <div class="icon">282        <svg viewBox="0 0 24 24">283          <rect x="3" y="5" width="18" height="16" rx="2"></rect>284          <path d="M3 9h18M8 5v4M16 5v4"></path>285        </svg>286      </div>287      <div class="field">288        <div class="label">Recurrence</div>289      </div>290      <div class="right-value">Monthly</div>291      <div class="chev chevron" style="margin-left:10px;">292        <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"></path></svg>293      </div>294    </div>295 296    <!-- Start Date -->297    <div class="row">298      <div class="icon">299        <svg viewBox="0 0 24 24">300          <circle cx="9" cy="12" r="1.5"></circle>301          <path d="M4 12h5m2 0h9" stroke-width="2" fill="none"></path>302        </svg>303      </div>304      <div class="field">305        <div class="label">Start Date</div>306      </div>307      <div class="right-value">Today</div>308      <div class="chev chevron" style="margin-left:10px;">309        <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"></path></svg>310      </div>311    </div>312  </div>313 314  <!-- Bottom sheet for Recurrence selection -->315  <div class="sheet">316    <div class="sheet-title">Recurrence</div>317    <div class="option muted">-</div>318    <div class="option">Biweekly</div>319    <div class="option selected">Monthly</div>320    <div class="option">Yearly</div>321 322    <div class="fab" aria-hidden="true">323      <svg viewBox="0 0 24 24">324        <path d="M20 6l-11 11-5-5"></path>325      </svg>326    </div>327  </div>328 329  <div class="bottom-black"></div>330  <div class="gesture"></div>331</div>332</body>333</html>