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: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0d1a1f;13    color: #fff;14  }15 16  /* Status bar */17  .status-bar {18    height: 90px;19    padding: 0 32px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #eaeaea;24    font-size: 40px;25    letter-spacing: 1px;26  }27  .status-icons {28    display: flex;29    align-items: center;30    gap: 24px;31  }32  .status-icons svg { fill: #eaeaea; height: 40px; width: 40px; }33 34  /* App bar */35  .app-bar {36    height: 140px;37    padding: 0 28px;38    display: flex;39    align-items: center;40    border-bottom: 1px solid rgba(255,255,255,0.06);41  }42  .app-left, .app-right {43    display: flex;44    align-items: center;45    gap: 28px;46  }47  .app-title {48    font-size: 54px;49    font-weight: 600;50    color: #e9eef1;51    margin-left: 16px;52  }53  .app-bar svg { fill: #cdd7dc; width: 48px; height: 48px; }54 55  /* Display area */56  .display-area {57    height: 600px;58    position: relative;59    padding: 40px 40px 0 40px;60  }61  .display-number {62    position: absolute;63    right: 40px;64    bottom: 70px;65    font-size: 220px;66    color: #e9eef1;67    line-height: 1;68    font-weight: 300;69  }70  .deg-label {71    position: absolute;72    left: 40px;73    bottom: 70px;74    font-size: 44px;75    color: #a9b7bd;76  }77  .cursor-bar {78    position: absolute;79    right: 20px;80    top: 60px;81    width: 6px;82    height: 540px;83    background: rgba(255,255,255,0.9);84    border-radius: 3px;85  }86 87  /* Keypad */88  .keypad {89    position: relative;90    width: 100%;91    padding: 0 0 0 0;92  }93  .key-grid {94    display: grid;95    grid-template-columns: repeat(4, 1fr);96    grid-auto-rows: 220px;97  }98  .key {99    display: flex;100    align-items: center;101    justify-content: center;102    background: #172d35;103    margin: 2px;104    font-size: 132px;105    color: #ffffff;106    user-select: none;107  }108 109  .key.small { font-size: 100px; }110  .key.func { color: #6ef76b; }        /* lime/green */111  .key.op { color: #f3ff5f; }          /* yellow operator */112  .key.red { color: #ff6b6b; }         /* C key */113  .key.equals { color: #f3ff5f; }      /* equals in yellow */114 115  /* Ad banner */116  .ad-banner {117    position: absolute;118    bottom: 120px;119    left: 0;120    width: 100%;121    height: 180px;122    background: #0f2026;123    border-top: 1px solid rgba(255,255,255,0.06);124    display: flex;125    align-items: center;126    padding: 0 32px;127    gap: 28px;128    color: #eaeaea;129  }130  .ad-image {131    width: 160px;132    height: 120px;133    background: #E0E0E0;134    border: 1px solid #BDBDBD;135    display: flex;136    align-items: center;137    justify-content: center;138    color: #757575;139    font-size: 28px;140  }141  .ad-text {142    flex: 1;143  }144  .ad-title { font-size: 44px; }145  .ad-sub { font-size: 32px; color: #b9c6cc; margin-top: 6px; }146  .ad-right {147    display: flex;148    align-items: center;149    gap: 18px;150  }151  .sponsored {152    font-size: 28px;153    color: #a9b7bd;154  }155  .ad-btn {156    background: #2b8bdc;157    color: #fff;158    font-size: 44px;159    padding: 20px 36px;160    border-radius: 26px;161  }162 163  /* Home pill */164  .home-pill {165    position: absolute;166    bottom: 40px;167    left: 50%;168    transform: translateX(-50%);169    width: 320px;170    height: 16px;171    background: #f4f4f4;172    border-radius: 12px;173    opacity: 0.85;174  }175</style>176</head>177<body>178<div id="render-target">179 180  <!-- Status Bar -->181  <div class="status-bar">182    <div>12:54</div>183    <div class="status-icons">184      <!-- WiFi Icon -->185      <svg viewBox="0 0 24 24">186        <path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8z"></path>187        <path d="M6 12c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2z"></path>188        <circle cx="12" cy="17" r="2"></circle>189      </svg>190      <!-- Battery Icon -->191      <svg viewBox="0 0 32 24">192        <rect x="2" y="4" width="26" height="16" rx="2"></rect>193        <rect x="28" y="9" width="3" height="6" rx="1"></rect>194      </svg>195    </div>196  </div>197 198  <!-- App Bar -->199  <div class="app-bar">200    <div class="app-left">201      <!-- Hamburger -->202      <svg viewBox="0 0 24 24">203        <rect x="3" y="4" width="18" height="2"></rect>204        <rect x="3" y="11" width="18" height="2"></rect>205        <rect x="3" y="18" width="18" height="2"></rect>206      </svg>207      <div class="app-title">Calculator</div>208    </div>209    <div class="app-right" style="margin-left:auto;">210      <!-- Clipboard/History -->211      <svg viewBox="0 0 24 24">212        <rect x="6" y="5" width="12" height="15" rx="2"></rect>213        <rect x="9" y="2" width="6" height="4" rx="1"></rect>214      </svg>215      <!-- Kebab menu -->216      <svg viewBox="0 0 24 24">217        <circle cx="12" cy="5" r="2"></circle>218        <circle cx="12" cy="12" r="2"></circle>219        <circle cx="12" cy="19" r="2"></circle>220      </svg>221    </div>222  </div>223 224  <!-- Display Area -->225  <div class="display-area">226    <div class="display-number">1</div>227    <div class="deg-label">Deg</div>228    <div class="cursor-bar"></div>229  </div>230 231  <!-- Keypad -->232  <div class="keypad">233    <div class="key-grid">234      <!-- Row 1 -->235      <div class="key func small">1/x</div>236      <div class="key func small">x^y</div>237      <div class="key func small">( )</div>238      <div class="key func small">⌫</div>239 240      <!-- Row 2 -->241      <div class="key red small">C</div>242      <div class="key op small">%</div>243      <div class="key op small">±</div>244      <div class="key op small">÷</div>245 246      <!-- Row 3 -->247      <div class="key">7</div>248      <div class="key">8</div>249      <div class="key">9</div>250      <div class="key op small">×</div>251 252      <!-- Row 4 -->253      <div class="key">4</div>254      <div class="key">5</div>255      <div class="key">6</div>256      <div class="key op">−</div>257 258      <!-- Row 5 -->259      <div class="key">1</div>260      <div class="key">2</div>261      <div class="key">3</div>262      <div class="key op">+</div>263 264      <!-- Row 6 -->265      <div class="key">0</div>266      <div class="key">00</div>267      <div class="key">.</div>268      <div class="key equals">=</div>269    </div>270  </div>271 272  <!-- Ad Banner -->273  <div class="ad-banner">274    <div class="ad-image">[IMG: Rakhi Ad]</div>275    <div class="ad-text">276      <div class="ad-title">Sneh Multicolour Bead Rakhi Set Of...</div>277      <div class="ad-sub">₹299 Embrace the essence of togetherness</div>278    </div>279    <div class="ad-right">280      <div class="sponsored">Sponsored</div>281      <div class="ad-btn">Open</div>282    </div>283  </div>284 285  <!-- Home pill -->286  <div class="home-pill"></div>287 288</div>289</body>290</html>