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; 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: #25383E; /* deep bluish gray */15    color: #E7EEF0;16  }17 18  /* Status bar */19  .status-bar {20    height: 110px;21    background: #0F1213;22    color: #ffffffcc;23    font-size: 38px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 40px;28    letter-spacing: 1px;29  }30  .status-icons {31    display: flex;32    align-items: center;33    gap: 26px;34  }35  .dot { width: 14px; height: 14px; background: #fff; border-radius: 50%; opacity: .9; display: inline-block; }36  .wifi {37    width: 42px; height: 28px;38    border: 4px solid #fff;39    border-color: transparent transparent #fff transparent;40    border-radius: 0 0 40px 40px;41    display: inline-block;42    transform: rotate(180deg);43  }44  .battery {45    width: 70px; height: 28px; border: 4px solid #fff; border-radius: 6px; position: relative;46  }47  .battery:after { content: ""; position: absolute; right: -10px; top: 6px; width: 8px; height: 16px; background: #fff; border-radius: 2px; }48 49  /* Header */50  .app-bar {51    height: 150px;52    border-bottom: 1px solid rgba(255,255,255,0.05);53    display: flex;54    align-items: center;55    justify-content: center;56    position: relative;57    color: #A5C2C8;58    font-weight: 700;59    font-size: 56px;60    letter-spacing: .5px;61  }62  .close-btn {63    position: absolute;64    left: 28px;65    top: 50%;66    transform: translateY(-50%);67    width: 120px; height: 120px;68    display: flex; align-items: center; justify-content: center;69  }70  .close-btn svg { width: 52px; height: 52px; opacity: .7; }71 72  /* Content */73  .content {74    padding: 30px 56px 0 56px;75  }76  .row {77    display: flex;78    align-items: flex-start;79    gap: 28px;80    padding: 34px 0;81  }82  .row + .row { }83  .icon {84    width: 72px; height: 72px;85    display: flex; align-items: center; justify-content: center;86    margin-top: 8px;87  }88  .icon svg { width: 72px; height: 72px; fill: #35B39C; color: #35B39C; }89  .field {90    flex: 1;91  }92  .right {93    width: 360px;94    display: flex;95    align-items: center;96    justify-content: flex-end;97    gap: 18px;98    color: #9EB0B6;99    font-size: 44px;100  }101  .label {102    color: #89A0A7;103    font-size: 38px;104    margin-bottom: 12px;105  }106  .value {107    font-size: 64px;108    letter-spacing: 2px;109  }110  .divider {111    height: 2px;112    background: rgba(255,255,255,0.08);113    margin-top: 28px;114  }115  .half {116    display: grid;117    grid-template-columns: 1fr 1fr;118    gap: 54px;119  }120  .half .subfield .label { font-size: 38px; }121  .half .subfield .value { font-size: 58px; }122  .half .subfield .divider { margin-top: 22px; }123 124  .chev svg { width: 28px; height: 28px; opacity: .5; }125 126  /* Bottom sheet */127  .bottom-sheet {128    position: absolute;129    left: 0; right: 0; bottom: 0;130    height: 860px;131    background: #344952;132    border-top-left-radius: 22px;133    border-top-right-radius: 22px;134    box-shadow: 0 -10px 30px rgba(0,0,0,0.35);135    padding: 36px 44px;136  }137  .sheet-title {138    font-size: 52px;139    font-weight: 700;140    color: #EAF4F7;141    margin: 18px 0 32px 0;142  }143  .sheet-item {144    font-size: 48px;145    color: #D1DEE2;146    padding: 36px 8px;147    border-bottom: 1px solid rgba(255,255,255,0.06);148  }149  .sheet-item:last-child { border-bottom: none; }150</style>151</head>152<body>153<div id="render-target">154  <!-- Status Bar -->155  <div class="status-bar">156    <div>3:55</div>157    <div class="status-icons">158      <span class="dot"></span>159      <span class="dot" style="opacity:.6;"></span>160      <div class="wifi"></div>161      <div class="battery"></div>162    </div>163  </div>164 165  <!-- App Bar -->166  <div class="app-bar">167    <div class="close-btn">168      <svg viewBox="0 0 24 24">169        <path d="M5 5 L19 19 M19 5 L5 19" stroke="#A5C2C8" stroke-width="2.5" stroke-linecap="round" fill="none"/>170      </svg>171    </div>172    Add New Budget173  </div>174 175  <!-- Main Content -->176  <div class="content">177    <!-- Budget name -->178    <div class="row">179      <div class="icon">180        <!-- money bag -->181        <svg viewBox="0 0 24 24">182          <path d="M8 4h8l-2 3h-4z" />183          <path d="M6 10c0-2 2-3 6-3s6 1 6 3v7c0 2-2 4-6 4s-6-2-6-4z" />184          <circle cx="12" cy="14" r="2" fill="#25383E"></circle>185          <path d="M12 12v4" stroke="#25383E" stroke-width="1.5" stroke-linecap="round"></path>186        </svg>187      </div>188      <div class="field">189        <div class="label">Budget Name</div>190        <div class="value">JULY</div>191        <div class="divider"></div>192      </div>193      <div class="right"></div>194    </div>195 196    <!-- Amount + Currency -->197    <div class="row">198      <div class="icon">199        <!-- cash notes -->200        <svg viewBox="0 0 24 24">201          <rect x="3" y="6" width="18" height="12" rx="1.5"></rect>202          <rect x="5" y="8" width="14" height="8" rx="1" fill="#2BAA94"></rect>203          <circle cx="12" cy="12" r="2.3" fill="#25383E"></circle>204        </svg>205      </div>206      <div class="field half">207        <div class="subfield">208          <div class="label">Amount</div>209          <div class="value">100</div>210          <div class="divider"></div>211        </div>212        <div class="subfield">213          <div class="label" style="text-align:right">Currency</div>214          <div class="value" style="text-align:right">INR</div>215          <div class="divider"></div>216        </div>217      </div>218      <div class="right chev">219        <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#9EB0B6" stroke-width="2.5" stroke-linecap="round" fill="none"/></svg>220      </div>221    </div>222 223    <!-- Wallets -->224    <div class="row">225      <div class="icon">226        <!-- wallet -->227        <svg viewBox="0 0 24 24">228          <rect x="3" y="7" width="18" height="12" rx="2"></rect>229          <rect x="12" y="11" width="6" height="4" rx="1" fill="#25383E"></rect>230        </svg>231      </div>232      <div class="field">233        <div class="value" style="font-size:48px;color:#AFC0C6;">Wallets</div>234      </div>235      <div class="right">236        <div>All Wallets</div>237        <div class="chev">238          <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#9EB0B6" stroke-width="2.5" stroke-linecap="round" fill="none"/></svg>239        </div>240      </div>241    </div>242 243    <!-- Budget for -->244    <div class="row">245      <div class="icon">246        <!-- group of users -->247        <svg viewBox="0 0 24 24">248          <circle cx="8" cy="9" r="2.5"></circle>249          <circle cx="16" cy="9" r="2.5"></circle>250          <circle cx="12" cy="6" r="2.1"></circle>251          <path d="M4 16c0-2 3-3 4-3s4 1 4 3" fill="none" stroke="#35B39C" stroke-width="2" stroke-linecap="round"/>252        </svg>253      </div>254      <div class="field">255        <div class="value" style="font-size:48px;color:#AFC0C6;">Budget for</div>256      </div>257      <div class="right">258        <div>1</div>259        <div class="chev">260          <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#9EB0B6" stroke-width="2.5" stroke-linecap="round" fill="none"/></svg>261        </div>262      </div>263    </div>264 265    <!-- Recurrence -->266    <div class="row">267      <div class="icon">268        <!-- calendar -->269        <svg viewBox="0 0 24 24">270          <rect x="3" y="5" width="18" height="16" rx="2"></rect>271          <path d="M3 9h18" stroke="#25383E" stroke-width="2"></path>272          <rect x="7" y="12" width="3" height="3" fill="#25383E"></rect>273          <rect x="12" y="12" width="3" height="3" fill="#25383E"></rect>274        </svg>275      </div>276      <div class="field">277        <div class="value" style="font-size:48px;color:#AFC0C6;">Recurrence</div>278      </div>279      <div class="right">280        <div>Monthly</div>281        <div class="chev">282          <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#9EB0B6" stroke-width="2.5" stroke-linecap="round" fill="none"/></svg>283        </div>284      </div>285    </div>286 287    <!-- Start Date -->288    <div class="row">289      <div class="icon">290        <!-- play/start -->291        <svg viewBox="0 0 24 24">292          <circle cx="12" cy="12" r="9"></circle>293          <path d="M10 8l6 4-6 4z" fill="#25383E"></path>294        </svg>295      </div>296      <div class="field">297        <div class="value" style="font-size:48px;color:#AFC0C6;">Start Date</div>298      </div>299      <div class="right">300        <div>Today</div>301        <div class="chev">302          <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#9EB0B6" stroke-width="2.5" stroke-linecap="round" fill="none"/></svg>303        </div>304      </div>305    </div>306  </div>307 308  <!-- Bottom Sheet (Recurrence options) -->309  <div class="bottom-sheet">310    <div class="sheet-title">Recurrence</div>311    <div class="sheet-item">Custom (Once)</div>312    <div class="sheet-item">Daily</div>313    <div class="sheet-item">Weekly</div>314    <div class="sheet-item">Biweekly</div>315  </div>316</div>317</body>318</html>