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>Calculator UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0d1d22; /* deep dark teal */14    color: #ffffff;15    font-family: "Roboto", Arial, Helvetica, sans-serif;16  }17 18  /* STATUS BAR */19  .status-bar {20    height: 100px;21    padding: 0 36px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #d8e6ea;26    font-size: 36px;27    letter-spacing: 1px;28  }29  .status-right {30    display: flex;31    gap: 22px;32    align-items: center;33  }34  .icon-wifi, .icon-battery {35    width: 46px; height: 28px;36  }37  .icon-battery rect { rx: 4px; }38  .icon-dot { width: 10px; height: 10px; border-radius: 50%; background: #d8e6ea; }39 40  /* APP BAR */41  .app-bar {42    height: 140px;43    padding: 0 28px;44    display: flex;45    align-items: center;46    justify-content: space-between;47    color: #e7f3f7;48  }49  .app-left, .app-right {50    display: flex;51    align-items: center;52    gap: 28px;53  }54  .hamburger, .overflows, .history {55    width: 56px; height: 56px;56    display: inline-flex; align-items: center; justify-content: center;57  }58  .title {59    font-size: 56px;60    font-weight: 700;61    letter-spacing: 0.5px;62  }63 64  /* DISPLAY */65  .display {66    height: 520px;67    padding: 40px 40px 0 40px;68    position: relative;69  }70  .expression {71    position: absolute;72    right: 40px;73    bottom: 170px;74    font-size: 180px;75    font-weight: 500;76    color: #eaf8ff;77  }78  .result {79    position: absolute;80    right: 40px;81    bottom: 40px;82    font-size: 120px;83    color: #8aa0a7;84  }85 86  .deg-row {87    height: 70px;88    padding: 0 40px;89    display: flex;90    align-items: center;91    color: #8aa0a7;92    font-size: 44px;93  }94 95  /* KEYPAD */96  .keypad {97    width: 100%;98    display: grid;99    grid-template-columns: repeat(4, 1fr);100    grid-auto-rows: 220px;101    gap: 0;102    border-top: 1px solid rgba(255,255,255,0.04);103  }104  .btn {105    display: flex;106    align-items: center;107    justify-content: center;108    background: #142e36;109    border: 1px solid rgba(255,255,255,0.05);110    font-size: 92px;111    user-select: none;112  }113  .btn.small { font-size: 74px; }114  .btn.func { color: #65ff77; }     /* neon green */115  .btn.op { color: #ffe94b; }        /* yellow operators */116  .btn.clear { color: #ff6b6b; }     /* red C */117  .btn.textwhite { color: #ffffff; }118  .btn.equal { color: #ffe94b; font-weight: 700; }119 120  /* AD BANNER */121  .ad-banner {122    height: 200px;123    background: #0a1519;124    border-top: 1px solid rgba(255,255,255,0.06);125    padding: 26px 32px;126    color: #cfd8dc;127    display: flex;128    align-items: center;129    justify-content: space-between;130  }131  .ad-left {132    display: flex; gap: 28px; align-items: center;133  }134  .ad-thumb {135    width: 140px; height: 140px;136    background: #E0E0E0; border: 1px solid #BDBDBD;137    color: #757575; display: flex; align-items: center; justify-content: center;138    font-size: 26px;139  }140  .ad-text .title { font-size: 44px; color: #e7f3f7; }141  .ad-text .sub { font-size: 34px; color: #9fb1b7; margin-top: 6px; }142  .ad-right {143    display: flex; align-items: center; gap: 20px;144  }145  .sponsored { font-size: 28px; color: #9fb1b7; }146  .ad-btn {147    background: #1b5d6d;148    color: #e7f3f7;149    padding: 26px 44px;150    border-radius: 18px;151    font-size: 44px;152    border: 2px solid rgba(255,255,255,0.15);153  }154 155  /* HOME INDICATOR */156  .home-indicator {157    position: absolute;158    bottom: 22px;159    left: 50%;160    transform: translateX(-50%);161    width: 420px;162    height: 12px;163    background: #2e3f45;164    border-radius: 8px;165    opacity: 0.95;166  }167</style>168</head>169<body>170<div id="render-target">171 172  <!-- Status Bar -->173  <div class="status-bar">174    <div class="time">12:57</div>175    <div class="status-right">176      <svg class="icon-wifi" viewBox="0 0 24 24">177        <path fill="#d8e6ea" d="M12 20l2-2-2-2-2 2 2 2zm6-6l2-2C16 8 8 8 4 12l2 2c3-3 9-3 12 0zm-3 3l2-2c-3-3-7-3-10 0l2 2c2-2 4-2 6 0z"/>178      </svg>179      <svg class="icon-battery" viewBox="0 0 52 24">180        <rect x="1" y="3" width="44" height="18" fill="none" stroke="#d8e6ea" stroke-width="2"/>181        <rect x="3" y="5" width="40" height="14" fill="#d8e6ea"/>182        <rect x="46" y="8" width="5" height="8" fill="#d8e6ea"/>183      </svg>184    </div>185  </div>186 187  <!-- App Bar -->188  <div class="app-bar">189    <div class="app-left">190      <div class="hamburger">191        <svg viewBox="0 0 24 24" width="56" height="56">192          <path fill="#e7f3f7" d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/>193        </svg>194      </div>195      <div class="title">Calculator</div>196    </div>197    <div class="app-right">198      <div class="history">199        <svg viewBox="0 0 24 24" width="56" height="56">200          <path fill="#e7f3f7" d="M7 2h10a2 2 0 012 2v16a2 2 0 01-2 2H7a2 2 0 01-2-2V4a2 2 0 012-2zm1 4h8v2H8V6zm0 4h8v2H8v-2zm0 4h6v2H8v-2z"/>201        </svg>202      </div>203      <div class="overflows">204        <svg viewBox="0 0 24 24" width="56" height="56">205          <circle cx="5" cy="12" r="2" fill="#e7f3f7"/>206          <circle cx="12" cy="12" r="2" fill="#e7f3f7"/>207          <circle cx="19" cy="12" r="2" fill="#e7f3f7"/>208        </svg>209      </div>210    </div>211  </div>212 213  <!-- Display -->214  <div class="display">215    <div class="expression">100−50</div>216    <div class="result">50</div>217  </div>218 219  <div class="deg-row">Deg</div>220 221  <!-- Keypad -->222  <div class="keypad">223    <div class="btn func small">1/x</div>224    <div class="btn func small">x<sup>y</sup></div>225    <div class="btn func small">()</div>226    <div class="btn textwhite small">⌫</div>227 228    <div class="btn clear">C</div>229    <div class="btn op small">%</div>230    <div class="btn op small">±</div>231    <div class="btn op small">÷</div>232 233    <div class="btn">7</div>234    <div class="btn">8</div>235    <div class="btn">9</div>236    <div class="btn op">×</div>237 238    <div class="btn">4</div>239    <div class="btn">5</div>240    <div class="btn">6</div>241    <div class="btn op">−</div>242 243    <div class="btn">1</div>244    <div class="btn">2</div>245    <div class="btn">3</div>246    <div class="btn op">+</div>247 248    <div class="btn">0</div>249    <div class="btn">00</div>250    <div class="btn">.</div>251    <div class="btn equal">=</div>252  </div>253 254  <!-- Ad banner -->255  <div class="ad-banner">256    <div class="ad-left">257      <div class="ad-thumb">[IMG: Product Ad]</div>258      <div class="ad-text">259        <div class="title">Sneh Multicolour Bead Rakhi Set Of...</div>260        <div class="sub">₹299 Embrace the essence of togetherness</div>261      </div>262    </div>263    <div class="ad-right">264      <div class="sponsored">Sponsored</div>265      <div class="ad-btn">Open</div>266    </div>267  </div>268 269  <!-- Home indicator -->270  <div class="home-indicator"></div>271</div>272</body>273</html>