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</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    color: #E8E8E8;16  }17 18  .status-bar {19    height: 110px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #ECECEC;25    font-size: 36px;26    letter-spacing: 1px;27    opacity: 0.9;28  }29  .status-icons {30    display: flex;31    align-items: center;32    gap: 24px;33  }34  .header {35    position: relative;36    height: 120px;37    display: flex;38    align-items: center;39    justify-content: center;40    color: #DDE6EA;41    font-size: 56px;42    font-weight: 600;43  }44  .header .close {45    position: absolute;46    left: 24px;47    top: 50%;48    transform: translateY(-50%);49    width: 80px; height: 80px;50    display: flex; align-items: center; justify-content: center;51  }52  .content {53    padding: 20px 48px 0 48px;54  }55 56  .row {57    display: flex;58    align-items: center;59    gap: 28px;60    margin: 26px 0;61  }62  .icon-wrap {63    width: 72px;64    height: 72px;65    display: flex;66    align-items: center;67    justify-content: center;68    flex: 0 0 72px;69  }70  .label {71    color: #A8BAC4;72    font-size: 44px;73    font-weight: 500;74    flex: 1;75  }76  .value {77    color: #9FB3BF;78    font-size: 42px;79    font-weight: 500;80  }81  .chevron {82    margin-left: 12px;83    width: 22px; height: 22px;84  }85 86  /* Text fields with underline */87  .field-group {88    margin-left: 100px;89    margin-right: 12px;90  }91  .field {92    border-bottom: 2px solid #2E3438;93    padding: 16px 0 22px 0;94    margin-bottom: 22px;95  }96  .field .placeholder {97    color: #90A4AE;98    font-size: 48px;99  }100 101  .two-col {102    display: flex;103    gap: 40px;104  }105  .col {106    flex: 1;107  }108  .col .small-label {109    color: #7E8E97;110    font-size: 32px;111    margin-bottom: 10px;112  }113  .col .field .text {114    color: #D3DBDF;115    font-size: 48px;116  }117 118  .spacer-large {119    height: 40px;120  }121 122  /* Bottom primary button (disabled look) */123  .bottom-wrap {124    position: absolute;125    left: 48px;126    right: 48px;127    bottom: 120px;128  }129  .primary-btn {130    width: 100%;131    height: 120px;132    border-radius: 60px;133    background: #2F4550;134    color: #8DA2AD;135    font-size: 44px;136    font-weight: 700;137    text-align: center;138    line-height: 120px;139    letter-spacing: 0.5px;140  }141 142  /* Home indicator mock */143  .home-indicator {144    position: absolute;145    bottom: 28px;146    left: 50%;147    transform: translateX(-50%);148    width: 260px;149    height: 10px;150    background: #D0D0D0;151    border-radius: 6px;152    opacity: 0.85;153  }154 155  /* Accent color for icons */156  .accent { fill: #21C08B; stroke: #21C08B; }157</style>158</head>159<body>160<div id="render-target">161  <!-- Status Bar -->162  <div class="status-bar">163    <div class="time">3:46</div>164    <div class="status-icons">165      <!-- simple dot icons for placeholders -->166      <svg width="30" height="30"><circle cx="15" cy="15" r="6" fill="#E6E6E6"/></svg>167      <svg width="36" height="28" viewBox="0 0 24 16">168        <path d="M2 14h20L12 2 2 14z" fill="#E6E6E6"/>169      </svg>170      <svg width="36" height="28" viewBox="0 0 24 24">171        <rect x="4" y="6" width="16" height="12" rx="2" ry="2" fill="none" stroke="#E6E6E6" stroke-width="2"/>172        <rect x="6" y="8" width="12" height="8" fill="#E6E6E6"/>173      </svg>174    </div>175  </div>176 177  <!-- Header -->178  <div class="header">179    <div class="close">180      <svg width="40" height="40" viewBox="0 0 24 24">181        <path class="accent" d="M18 6L6 18M6 6l12 12" stroke-width="2" stroke-linecap="round"/>182      </svg>183    </div>184    Add New Budget185  </div>186 187  <!-- Content -->188  <div class="content">189    <!-- Budget Name -->190    <div class="row">191      <div class="icon-wrap">192        <!-- money bag -->193        <svg width="60" height="60" viewBox="0 0 24 24">194          <path class="accent" d="M16 3h-8l2 3h4l2-3zm-4 5C7 8 4 11 4 15a5 5 0 0 0 5 5h6a5 5 0 0 0 5-5c0-4-3-7-7-7zm1.3 7.9c-.9.6-2.3.2-2.8-.8-.5-.9-.2-2.1.7-2.7.9-.6 2.1-.3 2.6.6.6 1 .3 2.2-.5 2.9z"/>195        </svg>196      </div>197      <div class="field-group" style="flex:1;">198        <div class="field">199          <div class="placeholder">Budget Name</div>200        </div>201 202        <div class="two-col">203          <div class="col">204            <div class="small-label">Amount</div>205            <div class="field">206              <div class="text">0</div>207            </div>208          </div>209          <div class="col">210            <div class="small-label" style="display:flex; align-items:center; justify-content:space-between;">211              <span>Currency</span>212            </div>213            <div class="field" style="display:flex; align-items:center; justify-content:space-between;">214              <div class="text">INR</div>215              <svg class="chevron" viewBox="0 0 24 24">216                <path d="M8 5l8 7-8 7" stroke="#9FB3BF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>217              </svg>218            </div>219          </div>220        </div>221      </div>222    </div>223 224    <!-- Wallets -->225    <div class="row">226      <div class="icon-wrap">227        <!-- wallet icon -->228        <svg width="64" height="64" viewBox="0 0 24 24">229          <path class="accent" d="M3 7h15a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H3V7zm0-2h12V3H3v2zm14 7h3v2h-3v-2z"/>230        </svg>231      </div>232      <div class="label">Wallets</div>233      <div class="value" style="display:flex; align-items:center;">234        All Wallets235        <svg class="chevron" viewBox="0 0 24 24">236          <path d="M8 5l8 7-8 7" stroke="#9FB3BF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>237        </svg>238      </div>239    </div>240 241    <!-- Budget for -->242    <div class="row">243      <div class="icon-wrap">244        <!-- categories icon -->245        <svg width="64" height="64" viewBox="0 0 24 24">246          <circle class="accent" cx="6" cy="8" r="2.5"/>247          <circle class="accent" cx="12" cy="8" r="2.5"/>248          <circle class="accent" cx="18" cy="8" r="2.5"/>249          <circle class="accent" cx="9" cy="14.5" r="2.5"/>250          <circle class="accent" cx="15" cy="14.5" r="2.5"/>251        </svg>252      </div>253      <div class="label">Budget for</div>254      <div class="value" style="display:flex; align-items:center;">255        All Expenses256        <svg class="chevron" viewBox="0 0 24 24">257          <path d="M8 5l8 7-8 7" stroke="#9FB3BF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>258        </svg>259      </div>260    </div>261 262    <!-- Recurrence -->263    <div class="row">264      <div class="icon-wrap">265        <!-- calendar icon -->266        <svg width="64" height="64" viewBox="0 0 24 24">267          <rect class="accent" x="3" y="5" width="18" height="14" rx="2"/>268          <rect x="3" y="5" width="18" height="4" fill="#121212"/>269          <rect class="accent" x="7" y="2" width="2" height="4"/>270          <rect class="accent" x="15" y="2" width="2" height="4"/>271        </svg>272      </div>273      <div class="label">Recurrence</div>274      <div class="value" style="display:flex; align-items:center;">275        Monthly276        <svg class="chevron" viewBox="0 0 24 24">277          <path d="M8 5l8 7-8 7" stroke="#9FB3BF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>278        </svg>279      </div>280    </div>281 282    <!-- Start Date -->283    <div class="row">284      <div class="icon-wrap">285        <!-- play icon -->286        <svg width="64" height="64" viewBox="0 0 24 24">287          <circle class="accent" cx="12" cy="12" r="10"/>288          <polygon points="10,8 17,12 10,16" fill="#121212"/>289        </svg>290      </div>291      <div class="label">Start Date</div>292      <div class="value" style="display:flex; align-items:center;">293        Today294        <svg class="chevron" viewBox="0 0 24 24">295          <path d="M8 5l8 7-8 7" stroke="#9FB3BF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>296        </svg>297      </div>298    </div>299 300    <div class="spacer-large"></div>301  </div>302 303  <!-- Bottom Button -->304  <div class="bottom-wrap">305    <div class="primary-btn">Create a New Budget</div>306  </div>307 308  <!-- Home indicator -->309  <div class="home-indicator"></div>310</div>311</body>312</html>