GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Budgets UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #0b0d0c;12    color: #E8ECEA;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 0; left: 0; right: 0;18    height: 84px; padding: 0 36px;19    display: flex; align-items: center; justify-content: space-between;20    color: #E8ECEA; font-weight: 600; letter-spacing: 0.5px;21  }22  .status-left { font-size: 38px; }23  .status-right { display: flex; align-items: center; gap: 26px; }24  .status-icon svg { fill: #E8ECEA; width: 40px; height: 40px; opacity: 0.9; }25 26  /* Page title */27  .page-title {28    position: absolute; top: 110px; left: 0; right: 0;29    text-align: center;30    font-size: 64px; font-weight: 700;31  }32 33  /* Content area */34  .content {35    position: absolute; top: 210px; left: 48px; right: 48px;36  }37  .section-title {38    font-size: 64px; font-weight: 700; margin: 20px 0 12px 0;39  }40  .value {41    font-size: 40px; margin: 0 0 28px 0; color: #BFD3CD;42  }43  .value .money { color: #63D68B; font-weight: 700; }44  .progress-section { margin: 0 0 26px 0; }45  .progress-label { font-size: 38px; color: #86A195; margin-bottom: 12px; }46  .progress-bar {47    width: 984px; height: 70px;48    background: #26343A; border-radius: 18px;49    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);50  }51  .progress-bar .fill {52    width: 9%; height: 100%;53    background: #63D68B; border-radius: 18px;54  }55  .date-row {56    display: flex; justify-content: space-between; align-items: center;57    font-size: 36px; color: #98A8A3; margin-top: 18px;58  }59 60  /* Big pill button */61  .pill {62    margin: 120px auto 0 auto;63    width: 720px; height: 140px;64    background: #0F241D; border-radius: 120px;65    display: flex; align-items: center; justify-content: center;66    box-shadow: 0 0 0 1px rgba(99,214,139,0.15);67  }68  .pill span {69    color: #63D68B; font-size: 56px; font-weight: 700; letter-spacing: 0.3px;70    text-align: center; line-height: 1.15;71  }72 73  /* Bottom nav */74  .bottom-nav {75    position: absolute; left: 0; right: 0; bottom: 0;76    height: 180px; border-top: 1px solid rgba(255,255,255,0.08);77    background: #0b0d0c;78    display: flex; justify-content: space-around; align-items: center;79  }80  .nav-item {81    width: 200px; height: 160px; display: flex; flex-direction: column;82    align-items: center; justify-content: center; gap: 16px;83    color: #9FB2AD; font-size: 34px;84  }85  .nav-item svg { width: 72px; height: 72px; fill: #A9B9C1; }86  .nav-item.active svg { fill: #63D68B; }87  .nav-item.active { color: #63D68B; }88  .badge {89    position: absolute; top: 22px; right: 190px;90    width: 48px; height: 48px; border-radius: 50%;91    background: #EA5B5B; color: #fff; font-size: 30px; font-weight: 700;92    display: flex; align-items: center; justify-content: center;93  }94</style>95</head>96<body>97<div id="render-target">98 99  <!-- Status Bar -->100  <div class="status-bar">101    <div class="status-left">12:43</div>102    <div class="status-right">103      <div class="status-icon" title="Cell">104        <svg viewBox="0 0 24 24"><path d="M3 17h2v4H3v-4zm4-6h2v10H7V11zm4-4h2v14h-2V7zm4-4h2v18h-2V3z"/></svg>105      </div>106      <div class="status-icon" title="Cloud">107        <svg viewBox="0 0 24 24"><path d="M6 18h11a4 4 0 0 0 0-8h-.2A6 6 0 0 0 5 8.7 4.5 4.5 0 0 0 6 18z"/></svg>108      </div>109      <div class="status-icon" title="Wi-Fi">110        <svg viewBox="0 0 24 24"><path d="M12 18.5l2.5 2.5-2.5 2.5-2.5-2.5L12 18.5zm-7-7c4.9-4.9 13.1-4.9 18 0l-2.1 2.1c-3.7-3.7-10.1-3.7-13.8 0L5 11.5zm3.5 3.5c3.1-3.1 8.9-3.1 12 0l-2.1 2.1c-2-2-5.7-2-7.8 0L8.5 15z"/></svg>111      </div>112      <div class="status-icon" title="Battery">113        <svg viewBox="0 0 24 24"><path d="M18 7h1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-1v1H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h14v1zM4 9v8h12V9H4z"/></svg>114      </div>115    </div>116  </div>117 118  <!-- Page Title -->119  <div class="page-title">Budgets</div>120 121  <!-- Content -->122  <div class="content">123    <div class="section-title">Car Budget</div>124    <p class="value"><span class="money">$9,910</span> left out of $10,000</p>125 126    <div class="progress-section">127      <div class="progress-label">0.9%</div>128      <div class="progress-bar">129        <div class="fill"></div>130      </div>131    </div>132 133    <div class="date-row">134      <div>Today</div>135      <div>August 26, 2023</div>136    </div>137 138    <div class="pill">139      <span>Create a New<br/>Budget</span>140    </div>141  </div>142 143  <!-- Bottom Navigation -->144  <div class="bottom-nav">145    <div class="nav-item">146      <svg viewBox="0 0 24 24"><path d="M5 4h14v2H5V4zm0 5h14v2H5V9zm0 5h10v2H5v-2z"/></svg>147      <div>Timeline</div>148    </div>149    <div class="nav-item">150      <svg viewBox="0 0 24 24"><path d="M5 7h12a2 2 0 0 1 2 2v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V9a2 2 0 0 1 2-2zm1 3v8h12V10H6zm7-6l2 2H9l2-2h2z"/></svg>151      <div>Wallets</div>152    </div>153    <div class="nav-item active">154      <svg viewBox="0 0 24 24"><path d="M12 2c2.8 0 5 2.2 5 5v2h3v11H4V9h3V7c0-2.8 2.2-5 5-5zm-3 7h6V7c0-1.7-1.3-3-3-3s-3 1.3-3 3v2z"/></svg>155      <div>Budgets</div>156    </div>157    <div class="nav-item">158      <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V9a6 6 0 0 0-12 0v7l-2 2v1h16v-1l-2-2z"/></svg>159      <div>Activity</div>160    </div>161    <div class="nav-item">162      <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>163      <div>More</div>164    </div>165    <div class="badge">1</div>166  </div>167 168</div>169</body>170</html>