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 - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #121212;15    color: #EAEAEA;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17  }18 19  .header {20    position: relative;21    padding: 48px 48px 32px 48px;22  }23  .header .titlebar {24    display: flex;25    align-items: center;26    justify-content: center;27    position: relative;28    padding-top: 32px;29    padding-bottom: 28px;30    border-bottom: 1px solid #2A2A2A;31  }32  .icon-btn {33    position: absolute;34    left: 0;35    top: 16px;36    width: 96px;37    height: 96px;38    display: flex;39    align-items: center;40    justify-content: center;41    cursor: default;42  }43  .header h1 {44    margin: 0;45    font-weight: 600;46    font-size: 56px;47    color: #EAEAEA;48    letter-spacing: 0.2px;49  }50 51  .section {52    padding: 24px 48px 0 48px;53  }54 55  .row {56    display: flex;57    align-items: flex-start;58    gap: 24px;59    margin-top: 40px;60  }61  .row .ico {62    width: 88px;63    display: flex;64    align-items: center;65    justify-content: center;66    margin-top: 6px;67  }68  .ico svg { width: 56px; height: 56px; }69 70  .field {71    flex: 1;72  }73  .field label {74    display: block;75    color: #9BA6AA;76    font-size: 30px;77    margin-bottom: 10px;78    letter-spacing: 0.3px;79  }80  .field .value {81    color: #EDEDED;82    font-size: 44px;83    padding-bottom: 16px;84    border-bottom: 2px solid #2C2C2C;85  }86 87  .two-col {88    display: flex;89    gap: 40px;90    margin-left: 112px; /* aligns with previous icon space */91    margin-top: 12px;92  }93  .two-col .field { flex: 1; }94  .right-value {95    display: flex;96    align-items: center;97    justify-content: space-between;98    gap: 16px;99  }100  .hint {101    color: #B7C5CC;102  }103 104  .list {105    margin-top: 20px;106  }107  .list-item {108    display: flex;109    align-items: center;110    gap: 24px;111    padding: 36px 0;112  }113  .list-labels {114    display: flex;115    align-items: center;116    justify-content: space-between;117    flex: 1;118    margin-left: 24px;119  }120  .list-labels .label {121    font-size: 40px;122    color: #CFCFCF;123  }124  .list-labels .value {125    font-size: 38px;126    color: #9FB3BD;127    display: flex;128    align-items: center;129    gap: 16px;130  }131 132  .btn-cta {133    position: absolute;134    left: 60px;135    right: 60px;136    bottom: 180px;137    height: 124px;138    background: #1EC9A1;139    color: #FFFFFF;140    border-radius: 62px;141    font-size: 42px;142    font-weight: 700;143    display: flex;144    align-items: center;145    justify-content: center;146    box-shadow: 0 14px 24px rgba(0,0,0,0.35);147  }148</style>149</head>150<body>151<div id="render-target">152 153  <div class="header">154    <div class="titlebar">155      <div class="icon-btn">156        <!-- Close (X) -->157        <svg viewBox="0 0 24 24">158          <path fill="#9BA6AA" d="M5 6.4 6.4 5 12 10.6 17.6 5 19 6.4 13.4 12 19 17.6 17.6 19 12 13.4 6.4 19 5 17.6 10.6 12z"/>159        </svg>160      </div>161      <h1>Add New Budget</h1>162    </div>163  </div>164 165  <div class="section">166    <!-- Budget Name -->167    <div class="row">168      <div class="ico">169        <!-- Money bag -->170        <svg viewBox="0 0 24 24">171          <path fill="#1EC9A1" d="M8 5c0-1.1.9-2 2-2h4l-1.5 2L14 7H10C8.9 7 8 6.1 8 5zm-2 8c0-2.8 2.2-5 5-5h2c2.8 0 5 2.2 5 5l-1.2 6.2c-.2 1-1.1 1.8-2.2 1.8H9.4c-1.1 0-2-.8-2.2-1.8L7 13z"/>172        </svg>173      </div>174      <div class="field">175        <label>Budget Name</label>176        <div class="value">JULY</div>177      </div>178    </div>179 180    <!-- Amount + Currency -->181    <div class="two-col">182      <div class="field">183        <label>Amount</label>184        <div class="value">100</div>185      </div>186      <div class="field">187        <label>Currency</label>188        <div class="value right-value">189          <span class="hint">INR</span>190          <svg width="30" height="30" viewBox="0 0 24 24">191            <path fill="#9FB3BD" d="M8 4l8 8-8 8-1.4-1.4L13.2 12 6.6 5.4z"/>192          </svg>193        </div>194      </div>195    </div>196 197    <!-- Wallets -->198    <div class="list">199      <div class="list-item">200        <div class="ico">201          <!-- Wallet icon -->202          <svg viewBox="0 0 24 24">203            <path fill="#1EC9A1" d="M3 7h13c1.1 0 2 .9 2 2v1h3v6h-3v1c0 1.1-.9 2-2 2H3V7zm15 6h3v2h-3v-2z"/>204          </svg>205        </div>206        <div class="list-labels">207          <div class="label">Wallets</div>208          <div class="value">209            <span>All Wallets</span>210            <svg width="30" height="30" viewBox="0 0 24 24">211              <path fill="#9FB3BD" d="M8 4l8 8-8 8-1.4-1.4L13.2 12 6.6 5.4z"/>212            </svg>213          </div>214        </div>215      </div>216 217      <div class="list-item">218        <div class="ico">219          <!-- Group (budget for) -->220          <svg viewBox="0 0 24 24">221            <path fill="#1EC9A1" d="M7 10a3 3 0 110-6 3 3 0 010 6zm10 0a3 3 0 110-6 3 3 0 010 6zM3 19c0-2.2 3-4 6-4s6 1.8 6 4v1H3v-1zm12.5-3c2.6 0 5.5 1.5 5.5 4v1h-5v-1c0-1.6-.7-2.9-1.5-4z"/>222          </svg>223        </div>224        <div class="list-labels">225          <div class="label">Budget for</div>226          <div class="value">227            <span>1</span>228            <svg width="30" height="30" viewBox="0 0 24 24">229              <path fill="#9FB3BD" d="M8 4l8 8-8 8-1.4-1.4L13.2 12 6.6 5.4z"/>230            </svg>231          </div>232        </div>233      </div>234 235      <div class="list-item">236        <div class="ico">237          <!-- Calendar -->238          <svg viewBox="0 0 24 24">239            <path fill="#1EC9A1" d="M7 2h2v2h6V2h2v2h3v16H4V4h3V2zm12 6H5v10h14V8z"/>240          </svg>241        </div>242        <div class="list-labels">243          <div class="label">Recurrence</div>244          <div class="value">245            <span>Monthly</span>246            <svg width="30" height="30" viewBox="0 0 24 24">247              <path fill="#9FB3BD" d="M8 4l8 8-8 8-1.4-1.4L13.2 12 6.6 5.4z"/>248            </svg>249          </div>250        </div>251      </div>252 253      <div class="list-item">254        <div class="ico">255          <!-- Play in circle -->256          <svg viewBox="0 0 24 24">257            <path fill="#1EC9A1" d="M12 2a10 10 0 100 20 10 10 0 000-20zm-1 6l6 4-6 4V8z"/>258          </svg>259        </div>260        <div class="list-labels">261          <div class="label">Start Date</div>262          <div class="value">263            <span>Today</span>264            <svg width="30" height="30" viewBox="0 0 24 24">265              <path fill="#9FB3BD" d="M8 4l8 8-8 8-1.4-1.4L13.2 12 6.6 5.4z"/>266            </svg>267          </div>268        </div>269      </div>270    </div>271  </div>272 273  <div class="btn-cta">Create a New Budget</div>274 275</div>276</body>277</html>