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>Budgets Screen</title>7<style>8  :root{9    --bg:#0b0b0b;10    --panel:#121313;11    --divider:#26292b;12    --text:#e7e7e7;13    --muted:#8b9aa1;14    --muted2:#7b8a90;15    --green:#23d6a5;16    --progress:#2e3f49;17    --btn:#0c2a22;18    --nav:#1a1e21;19  }20  body{ margin:0; padding:0; background:transparent; }21  #render-target{22    width:1080px; height:2400px;23    position:relative; overflow:hidden;24    background:var(--bg);25    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;26    color:var(--text);27  }28  /* Status bar */29  .status{30    position:absolute; top:0; left:0; right:0;31    height:140px; background:var(--panel);32    display:flex; align-items:center; justify-content:space-between;33    padding:0 40px; box-sizing:border-box;34    color:#d8d8d8; font-weight:600; font-size:46px;35  }36  .status .icons{ display:flex; align-items:center; gap:28px; }37  .status svg{ fill:#d8d8d8; }38  /* Title bar */39  .titlebar{40    position:absolute; top:140px; left:0; right:0;41    height:120px; background:var(--panel);42    display:flex; align-items:center; justify-content:center;43    border-bottom:1px solid var(--divider);44    color:#cfcfcf; font-size:64px; font-weight:800;45    letter-spacing:0.5px;46  }47 48  /* Content */49  .content{50    position:absolute; top:280px; left:0; right:0; bottom:220px;51    padding:48px 60px 0;52    box-sizing:border-box;53    overflow:hidden;54  }55  .section-title{56    font-size:44px; font-weight:800; letter-spacing:2px;57    margin:24px 0 14px; text-transform:uppercase;58  }59  .amount-row{60    font-size:40px; margin-bottom:28px;61  }62  .amount-row .left{ color:var(--green); font-weight:800; }63  .amount-row .rest{ color:var(--muted); }64  .progress{65    width:960px; height:72px; background:var(--progress);66    border-radius:18px; position:relative; margin:8px 0 28px;67    display:flex; align-items:center; justify-content:center;68    color:#c6d6de; font-weight:700; font-size:34px;69  }70  .dates{71    display:flex; align-items:center; justify-content:space-between;72    width:960px; color:var(--muted); font-size:36px; margin:8px 0 60px;73  }74  .pill-btn{75    width:760px; height:150px; background:var(--btn);76    border-radius:90px; display:flex; align-items:center;77    padding:0 60px; box-sizing:border-box;78    color:var(--green); font-size:58px; font-weight:800;79    line-height:1.1; letter-spacing:0.2px;80    box-shadow: inset 0 0 0 1px rgba(20, 200, 150, 0.08);81  }82 83  /* Bottom navigation */84  .nav{85    position:absolute; left:0; right:0; bottom:120px;86    height:180px; background:var(--nav);87    border-top:1px solid var(--divider);88    display:flex;89  }90  .nav-item{91    flex:1; display:flex; flex-direction:column;92    align-items:center; justify-content:center; gap:12px;93    color:#8fa1a8; font-size:32px; font-weight:600;94  }95  .nav-item.active{ color:var(--green); }96  .nav svg{ width:58px; height:58px; }97  .home-indicator{98    position:absolute; left:50%; transform:translateX(-50%);99    bottom:36px; width:360px; height:14px; background:#d0d0d0;100    opacity:0.65; border-radius:10px;101  }102</style>103</head>104<body>105<div id="render-target">106 107  <!-- Status Bar -->108  <div class="status">109    <div class="time">3:57</div>110    <div class="icons">111      <!-- WiFi -->112      <svg viewBox="0 0 24 24" width="42" height="42" aria-hidden="true">113        <path d="M12 20.5l-2.3-2.3a3.25 3.25 0 0 1 4.6 0L12 20.5zm6-6a9 9 0 0 0-12 0l-1.8-1.8a11.5 11.5 0 0 1 15.6 0L18 14.5zm3.1-3.1A15 15 0 0 0 2.9 11.4L1 9.5a17.5 17.5 0 0 1 22 0l-1.9 1.9z"/>114      </svg>115      <!-- Battery -->116      <svg viewBox="0 0 28 16" width="56" height="36" aria-hidden="true">117        <rect x="1" y="3" width="22" height="10" rx="2" ry="2"></rect>118        <rect x="24" y="6" width="3" height="4" rx="1"></rect>119        <rect x="3" y="5" width="14" height="6" fill="#d8d8d8"></rect>120      </svg>121    </div>122  </div>123 124  <!-- Title -->125  <div class="titlebar">Budgets</div>126 127  <!-- Content -->128  <div class="content">129    <div class="section-title">July</div>130 131    <div class="amount-row">132      <span class="left">₹100</span>133      <span class="rest"> left out of ₹100</span>134    </div>135 136    <div class="progress">0%</div>137 138    <div class="dates">139      <div>Today</div>140      <div>August 25, 2023</div>141    </div>142 143    <div class="pill-btn">Create a New Budget</div>144  </div>145 146  <!-- Bottom Navigation -->147  <div class="nav">148    <div class="nav-item">149      <!-- Timeline icon -->150      <svg viewBox="0 0 24 24">151        <path d="M6 3h12a1 1 0 0 1 1 1v16H5V4a1 1 0 0 1 1-1zm0 4h12M8 12h8M8 16h8" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>152      </svg>153      <div>Timeline</div>154    </div>155    <div class="nav-item">156      <!-- Wallet icon -->157      <svg viewBox="0 0 24 24">158        <path d="M3 7a3 3 0 0 1 3-3h12v4H6a3 3 0 0 1-3-1z" fill="currentColor" opacity="0.6"/>159        <rect x="3" y="7" width="18" height="12" rx="3" ry="3" fill="none" stroke="currentColor" stroke-width="2"/>160        <circle cx="16.5" cy="13" r="1.5" fill="currentColor"/>161      </svg>162      <div>Wallets</div>163    </div>164    <div class="nav-item active">165      <!-- Money bag icon -->166      <svg viewBox="0 0 24 24">167        <path d="M9 4l3-2 3 2-3 2-3-2z" fill="currentColor"/>168        <path d="M6 11c0-3 3-5 6-5s6 2 6 5c0 5-3 9-6 9s-6-4-6-9z" fill="none" stroke="currentColor" stroke-width="2"/>169        <path d="M9 13h6M12 11v6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>170      </svg>171      <div>Budgets</div>172    </div>173    <div class="nav-item">174      <!-- Bell icon -->175      <svg viewBox="0 0 24 24">176        <path d="M12 3a5 5 0 0 0-5 5v3.5l-1.5 3H18.5l-1.5-3V8a5 5 0 0 0-5-5z" fill="none" stroke="currentColor" stroke-width="2"/>177        <path d="M9 19a3 3 0 0 0 6 0" stroke="currentColor" stroke-width="2" fill="none"/>178      </svg>179      <div>Activity</div>180    </div>181    <div class="nav-item">182      <!-- More (dots) -->183      <svg viewBox="0 0 24 24">184        <circle cx="5" cy="12" r="2" fill="currentColor"/>185        <circle cx="12" cy="12" r="2" fill="currentColor"/>186        <circle cx="19" cy="12" r="2" fill="currentColor"/>187      </svg>188      <div>More</div>189    </div>190  </div>191 192  <div class="home-indicator"></div>193 194</div>195</body>196</html>