GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Add New Budget 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: #111416;14    color: #E6E6E6;15  }16 17  .status-bar {18    position: absolute;19    top: 0; left: 0; right: 0;20    height: 90px;21    padding: 0 36px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #DADADA;26    font-size: 34px;27  }28  .status-icons { display: flex; gap: 28px; align-items: center; }29  .header {30    position: absolute;31    top: 90px; left: 0; right: 0;32    height: 150px;33    display: flex;34    align-items: center;35    padding: 0 40px 0 40px;36    border-bottom: 1px solid #2a2e33;37  }38  .header-title {39    width: 100%;40    text-align: center;41    font-size: 60px;42    font-weight: 600;43    letter-spacing: 0.5px;44    color: #EDEDED;45  }46  .close-btn {47    width: 80px; height: 80px;48    display: flex; align-items: center; justify-content: center;49    cursor: default;50  }51  .content {52    position: absolute;53    left: 40px;54    right: 40px;55    top: 240px;56    bottom: 840px; /* space for keypad */57    overflow: hidden;58  }59 60  .row {61    display: flex;62    align-items: flex-start;63    gap: 28px;64    margin-bottom: 34px;65  }66  .icon {67    width: 72px; height: 72px; min-width: 72px;68    display: flex; align-items: center; justify-content: center;69    color: #17c497;70  }71  .group { flex: 1; }72  .label {73    font-size: 32px;74    color: #8FA0A8;75    margin-bottom: 16px;76  }77  .input-text {78    font-size: 48px;79    color: #EAEAEA;80    letter-spacing: 1px;81  }82  .underline {83    margin-top: 18px;84    height: 2px;85    background: #3a4349;86  }87 88  /* double inputs (Amount / Currency) */89  .double {90    display: grid;91    grid-template-columns: 1fr 420px;92    gap: 36px;93  }94  .value-right {95    text-align: right;96    font-size: 44px;97    color: #b9c8cf;98  }99 100  /* list rows with trailing chevron */101  .list-row {102    display: flex;103    align-items: center;104    justify-content: space-between;105    padding-right: 10px;106    height: 100px;107  }108  .list-title {109    font-size: 44px;110    color: #D9D9D9;111  }112  .list-value {113    font-size: 42px;114    color: #a9bdc6;115    display: flex;116    align-items: center;117    gap: 18px;118  }119 120  .keypad {121    position: absolute;122    left: 0; right: 0; bottom: 0;123    height: 840px;124    background: #2e424d;125    border-top: 1px solid #263741;126  }127  .keypad-header {128    height: 110px;129    display: flex; align-items: center; justify-content: center;130    color: #a9b9c1;131    font-size: 44px;132    font-weight: 600;133  }134  .keys {135    padding: 0 0;136    display: grid;137    grid-template-columns: repeat(4, 1fr);138    grid-auto-rows: 180px;139    border-top: 1px solid #3a5360;140  }141  .key {142    display: flex; align-items: center; justify-content: center;143    font-size: 64px;144    color: #EDEDED;145    border-right: 1px solid #3a5360;146    border-bottom: 1px solid #3a5360;147    background: #3a4e59;148  }149  .key:last-child { border-right: none; }150  .key.op { color: #c9d3d8; }151  .home-indicator {152    position: absolute;153    bottom: 24px;154    left: 50%;155    transform: translateX(-50%);156    width: 300px; height: 10px;157    background: #f0f0f0; border-radius: 6px; opacity: 0.9;158  }159 160  /* small chevron icon */161  .chev {162    width: 34px; height: 34px;163  }164</style>165</head>166<body>167<div id="render-target">168 169  <!-- Status bar -->170  <div class="status-bar">171    <div>3:48</div>172    <div class="status-icons">173      <!-- simple wifi icon -->174      <svg width="40" height="40" viewBox="0 0 24 24" fill="none">175        <path d="M2 8c6-6 14-6 20 0" stroke="#DADADA" stroke-width="2" stroke-linecap="round"/>176        <path d="M5 11c4-4 10-4 14 0" stroke="#DADADA" stroke-width="2" stroke-linecap="round"/>177        <path d="M8 14c2-2 6-2 8 0" stroke="#DADADA" stroke-width="2" stroke-linecap="round"/>178        <circle cx="12" cy="17" r="2" fill="#DADADA"/>179      </svg>180      <!-- battery -->181      <svg width="46" height="40" viewBox="0 0 26 14" fill="none">182        <rect x="1" y="1" width="20" height="12" rx="2" stroke="#DADADA" stroke-width="2"/>183        <rect x="3" y="3" width="16" height="8" fill="#DADADA"/>184        <rect x="22" y="5" width="3" height="4" rx="1" fill="#DADADA"/>185      </svg>186    </div>187  </div>188 189  <!-- Header with close and title -->190  <div class="header">191    <div class="close-btn">192      <svg width="64" height="64" viewBox="0 0 24 24" fill="none">193        <path d="M5 5l14 14M19 5L5 19" stroke="#C9D0D6" stroke-width="2" stroke-linecap="round"/>194      </svg>195    </div>196    <div class="header-title">Add New Budget</div>197  </div>198 199  <!-- Main content -->200  <div class="content">201 202    <!-- Budget Name -->203    <div class="row">204      <div class="icon">205        <!-- Money bag -->206        <svg width="64" height="64" viewBox="0 0 24 24" fill="none">207          <path d="M8 6l2-3h4l2 3" stroke="#17c497" stroke-width="2" stroke-linecap="round"/>208          <path d="M6 9c0-1 5-2 12 0 2 6-2 9-6 9s-8-3-6-9z" stroke="#17c497" stroke-width="2" fill="none"/>209          <path d="M12 11c-1 0-2 1-2 2s1 2 2 2 2-1 2-2h-2" stroke="#17c497" stroke-width="2" stroke-linecap="round"/>210        </svg>211      </div>212      <div class="group">213        <div class="label">Budget Name</div>214        <div class="input-text">JULY</div>215        <div class="underline"></div>216      </div>217    </div>218 219    <!-- Amount and Currency -->220    <div class="row">221      <div class="icon">222        <!-- Cash stack -->223        <svg width="64" height="64" viewBox="0 0 24 24" fill="none">224          <rect x="3" y="8" width="18" height="10" rx="2" stroke="#17c497" stroke-width="2"/>225          <rect x="5" y="6" width="14" height="10" rx="2" stroke="#17c497" stroke-width="2"/>226          <circle cx="12" cy="13" r="2" stroke="#17c497" stroke-width="2"/>227        </svg>228      </div>229      <div class="group double">230        <div>231          <div class="label">Amount</div>232          <div class="input-text">0</div>233          <div class="underline"></div>234        </div>235        <div>236          <div class="label" style="text-align: right;">Currency</div>237          <div class="value-right">238            INR239            <svg class="chev" viewBox="0 0 24 24" fill="none">240              <path d="M9 6l6 6-6 6" stroke="#8FA0A8" stroke-width="2" stroke-linecap="round"/>241            </svg>242          </div>243          <div class="underline"></div>244        </div>245      </div>246    </div>247 248    <!-- Wallets -->249    <div class="row list-row">250      <div class="icon">251        <!-- Wallet -->252        <svg width="64" height="64" viewBox="0 0 24 24" fill="none">253          <rect x="3" y="7" width="18" height="12" rx="2" stroke="#17c497" stroke-width="2"/>254          <path d="M21 10h-6a2 2 0 0 0 0 4h6v-4z" stroke="#17c497" stroke-width="2" fill="none"/>255        </svg>256      </div>257      <div class="list-title">Wallets</div>258      <div class="list-value" style="margin-left:auto;">259        All Wallets260        <svg class="chev" viewBox="0 0 24 24" fill="none">261          <path d="M9 6l6 6-6 6" stroke="#8FA0A8" stroke-width="2" stroke-linecap="round"/>262        </svg>263      </div>264    </div>265 266    <!-- Budget for -->267    <div class="row list-row">268      <div class="icon">269        <!-- Categories (four dots) -->270        <svg width="64" height="64" viewBox="0 0 24 24" fill="#17c497">271          <circle cx="7" cy="7" r="2" fill="#17c497"/>272          <circle cx="17" cy="7" r="2" fill="#17c497"/>273          <circle cx="7" cy="17" r="2" fill="#17c497"/>274          <circle cx="17" cy="17" r="2" fill="#17c497"/>275        </svg>276      </div>277      <div class="list-title">Budget for</div>278      <div class="list-value" style="margin-left:auto;">279        All Expenses280        <svg class="chev" viewBox="0 0 24 24" fill="none">281          <path d="M9 6l6 6-6 6" stroke="#8FA0A8" stroke-width="2" stroke-linecap="round"/>282        </svg>283      </div>284    </div>285 286    <!-- Recurrence -->287    <div class="row list-row">288      <div class="icon">289        <!-- Calendar -->290        <svg width="64" height="64" viewBox="0 0 24 24" fill="none">291          <rect x="3" y="5" width="18" height="16" rx="2" stroke="#17c497" stroke-width="2"/>292          <path d="M3 9h18" stroke="#17c497" stroke-width="2"/>293          <path d="M7 3v4M17 3v4" stroke="#17c497" stroke-width="2" stroke-linecap="round"/>294        </svg>295      </div>296      <div class="list-title">Recurrence</div>297      <div class="list-value" style="margin-left:auto;">298        Monthly299        <svg class="chev" viewBox="0 0 24 24" fill="none">300          <path d="M9 6l6 6-6 6" stroke="#8FA0A8" stroke-width="2" stroke-linecap="round"/>301        </svg>302      </div>303    </div>304 305    <!-- Start Date -->306    <div class="row list-row">307      <div class="icon">308        <!-- Play circle -->309        <svg width="64" height="64" viewBox="0 0 24 24" fill="none">310          <circle cx="12" cy="12" r="9" stroke="#17c497" stroke-width="2"/>311          <path d="M10 9l6 3-6 3V9z" fill="#17c497"/>312        </svg>313      </div>314      <div class="list-title">Start Date</div>315      <div class="list-value" style="margin-left:auto;">316        Today317        <svg class="chev" viewBox="0 0 24 24" fill="none">318          <path d="M9 6l6 6-6 6" stroke="#8FA0A8" stroke-width="2" stroke-linecap="round"/>319        </svg>320      </div>321    </div>322 323  </div>324 325  <!-- Keypad -->326  <div class="keypad">327    <div class="keypad-header">Create a New Budget</div>328    <div class="keys">329      <div class="key">1</div>330      <div class="key">2</div>331      <div class="key">3</div>332      <div class="key op">÷</div>333 334      <div class="key">4</div>335      <div class="key">5</div>336      <div class="key">6</div>337      <div class="key op">×</div>338 339      <div class="key">7</div>340      <div class="key">8</div>341      <div class="key">9</div>342      <div class="key op">−</div>343 344      <div class="key">.</div>345      <div class="key">0</div>346      <div class="key">347        <!-- backspace icon -->348        <svg width="72" height="40" viewBox="0 0 24 16" fill="none">349          <path d="M2 8l5-5h13a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7L2 8z" stroke="#EDEDED" stroke-width="2"/>350          <path d="M12 6l4 4M16 6l-4 4" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>351        </svg>352      </div>353      <div class="key op">+</div>354    </div>355    <div class="home-indicator"></div>356  </div>357 358</div>359</body>360</html>