GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Calculator UI</title>5<style>6  body { margin:0; padding:0; background: transparent; font-family: 'Roboto', Arial, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#0c1a1f; color:#fff;11  }12 13  /* Status bar */14  .status-bar {15    position:absolute; top:0; left:0; width:100%; height:90px;16    background:#0c1a1f; color:#eaeaea;17    display:flex; align-items:center; justify-content:space-between;18    padding:0 28px; font-size:36px;19  }20  .status-icons { display:flex; align-items:center; gap:20px; }21 22  /* App bar */23  .app-bar {24    position:absolute; top:90px; left:0; width:100%; height:140px;25    background:#0d2026; display:flex; align-items:center;26    padding:0 28px; box-sizing:border-box;27  }28  .app-left { display:flex; align-items:center; gap:28px; }29  .app-title { font-size:64px; letter-spacing:0.5px; }30  .app-right { margin-left:auto; display:flex; align-items:center; gap:28px; }31 32  /* Display area */33  .display {34    position:absolute; top:230px; left:0; width:100%; height:680px;35    padding:40px; box-sizing:border-box;36    display:flex; align-items:flex-end; justify-content:flex-end;37  }38  .display-number { font-size:200px; color:#e9f0f2; line-height:1; }39  .caret {40    width:6px; height:260px; margin:0 12px 16px 16px;41    background:#7b8a90; border-radius:3px;42  }43 44  .deg-label {45    position:absolute; top:920px; left:32px;46    color:#8aa0a8; font-size:42px;47  }48 49  /* Keypad */50  .keypad {51    position:absolute; top:980px; left:0; width:100%;52    padding:22px; box-sizing:border-box;53    display:grid; grid-template-columns:repeat(4, 1fr);54    grid-auto-rows:160px; gap:14px;55  }56  .key {57    background:#152d36; border-radius:8px;58    display:flex; align-items:center; justify-content:center;59    font-size:96px; color:#ffffff;60    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);61  }62  .key.small { font-size:72px; }63  .key.func-green { color:#6bff7a; }64  .key.func-yellow { color:#f4f15c; }65  .key.func-red { color:#ff6e6e; }66 67  /* Ad area */68  .ad-bar {69    position:absolute; bottom:0; left:0; width:100%; height:220px;70    background:#0f2026; border-top:1px solid rgba(255,255,255,0.06);71    padding:24px 28px; box-sizing:border-box;72    display:flex; align-items:center; gap:24px;73  }74  .ad-placeholder {75    flex:1; height:172px;76    background:#E0E0E0; border:1px solid #BDBDBD;77    display:flex; align-items:center; justify-content:center;78    color:#757575; font-size:40px;79    border-radius:8px;80  }81  .ad-right {82    display:flex; flex-direction:column; align-items:flex-end; gap:16px;83  }84  .sponsored { color:#aab6bb; font-size:32px; }85  .btn-open {86    background:#1e7ea7; color:#ffffff; font-size:44px;87    padding:22px 40px; border-radius:18px; border:none;88  }89 90  /* Icon helpers */91  svg { display:block; }92</style>93</head>94<body>95<div id="render-target">96 97  <!-- Status Bar -->98  <div class="status-bar">99    <div>12:55</div>100    <div class="status-icons">101      <!-- Wifi icon -->102      <svg width="42" height="42" viewBox="0 0 24 24">103        <path d="M2 8c5-4 15-4 20 0" stroke="#eaeaea" stroke-width="2" fill="none" stroke-linecap="round"/>104        <path d="M5 12c3-3 11-3 14 0" stroke="#eaeaea" stroke-width="2" fill="none" stroke-linecap="round"/>105        <path d="M9 16c2-2 4-2 6 0" stroke="#eaeaea" stroke-width="2" fill="none" stroke-linecap="round"/>106        <circle cx="12" cy="19" r="1.5" fill="#eaeaea"/>107      </svg>108      <!-- Battery icon -->109      <svg width="52" height="42" viewBox="0 0 28 16">110        <rect x="1" y="2" width="22" height="12" rx="2" stroke="#eaeaea" stroke-width="2" fill="none"/>111        <rect x="4" y="4" width="16" height="8" fill="#eaeaea"/>112        <rect x="24" y="6" width="3" height="4" fill="#eaeaea"/>113      </svg>114    </div>115  </div>116 117  <!-- App Bar -->118  <div class="app-bar">119    <div class="app-left">120      <!-- Hamburger -->121      <svg width="60" height="60" viewBox="0 0 24 24">122        <path d="M3 6h18M3 12h18M3 18h18" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>123      </svg>124      <div class="app-title">Calculator</div>125    </div>126    <div class="app-right">127      <!-- Document icon -->128      <svg width="56" height="56" viewBox="0 0 24 24">129        <rect x="4" y="3" width="16" height="18" rx="2" stroke="#eaeaea" stroke-width="2" fill="none"/>130        <path d="M7 8h10M7 12h10M7 16h10" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>131      </svg>132      <!-- More (vertical dots) -->133      <svg width="52" height="52" viewBox="0 0 24 24">134        <circle cx="12" cy="5" r="2" fill="#eaeaea"/>135        <circle cx="12" cy="12" r="2" fill="#eaeaea"/>136        <circle cx="12" cy="19" r="2" fill="#eaeaea"/>137      </svg>138    </div>139  </div>140 141  <!-- Display -->142  <div class="display">143    <div class="display-number">100</div>144    <div class="caret"></div>145  </div>146 147  <div class="deg-label">Deg</div>148 149  <!-- Keypad -->150  <div class="keypad">151    <div class="key func-green small">1/x</div>152    <div class="key func-green small">x^y</div>153    <div class="key func-green small">()</div>154    <div class="key func-green small">155      <!-- Backspace icon -->156      <svg width="90" height="90" viewBox="0 0 24 24">157        <path d="M3 12l5-7h11a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H8l-5-7z" stroke="#6bff7a" stroke-width="2" fill="none"/>158        <path d="M13 9l4 4M17 9l-4 4" stroke="#6bff7a" stroke-width="2" stroke-linecap="round"/>159      </svg>160    </div>161 162    <div class="key func-red small">C</div>163    <div class="key func-yellow small">%</div>164    <div class="key func-yellow small">±</div>165    <div class="key func-yellow small">÷</div>166 167    <div class="key">7</div>168    <div class="key">8</div>169    <div class="key">9</div>170    <div class="key func-yellow">×</div>171 172    <div class="key">4</div>173    <div class="key">5</div>174    <div class="key">6</div>175    <div class="key func-yellow">−</div>176 177    <div class="key">1</div>178    <div class="key">2</div>179    <div class="key">3</div>180    <div class="key func-yellow">+</div>181 182    <div class="key">0</div>183    <div class="key">00</div>184    <div class="key">.</div>185    <div class="key func-yellow">=</div>186  </div>187 188  <!-- Ad Bar -->189  <div class="ad-bar">190    <div class="ad-placeholder">[IMG: Ad banner for Rakhi set]</div>191    <div class="ad-right">192      <div class="sponsored">Sponsored</div>193      <button class="btn-open">Open</button>194    </div>195  </div>196 197</div>198</body>199</html>