GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Calculator UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; }7  #render-target {8    width: 1080px; height: 2400px;9    position: relative; overflow: hidden;10    background: #0c181c;11    color: #dfe8ea;12  }13 14  /* Status bar */15  .statusbar {16    height: 100px;17    padding: 0 36px;18    display: flex; align-items: center; justify-content: space-between;19    color: #cfe3e6; font-weight: 600; font-size: 40px;20  }21  .status-right { display: flex; align-items: center; gap: 28px; }22  .icon-wifi svg, .icon-battery svg { display: block; }23  .icon-wifi svg { width: 46px; height: 46px; }24  .icon-battery svg { width: 52px; height: 30px; }25 26  /* App bar */27  .appbar {28    height: 120px;29    display: flex; align-items: center;30    padding: 0 28px;31    border-bottom: 1px solid rgba(255,255,255,0.06);32  }33  .appbar .left, .appbar .right {34    display: flex; align-items: center; gap: 28px;35  }36  .appbar .title {37    font-size: 64px; font-weight: 600; color: #eaf2f5;38    margin-left: 20px;39  }40  .appbar .spacer { flex: 1; }41  .icon {42    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;43  }44  .icon svg { width: 60px; height: 60px; fill: none; stroke: #9fb2b8; stroke-width: 6; }45 46  /* Display area */47  .display {48    height: 760px;49    position: relative;50    margin: 0 28px;51    border-radius: 10px;52  }53  .caret {54    position: absolute;55    right: 20px; top: 80px;56    width: 6px; height: 600px;57    background: rgba(235,255,236,0.25);58    border-radius: 3px;59  }60 61  .deg {62    font-size: 48px; color: #8ba2a8; margin: 0 36px 16px;63  }64 65  /* Keypad grid */66  .grid {67    margin: 0 26px;68    display: grid;69    grid-template-columns: repeat(4, 1fr);70    grid-gap: 24px;71  }72  .btn {73    height: 180px;74    background: #162a31;75    border-radius: 18px;76    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);77    display: flex; align-items: center; justify-content: center;78    font-size: 98px; font-weight: 500;79    color: #ffffff;80    user-select: none;81  }82  .btn.func { color: #84ff5e; font-weight: 600; }83  .btn.op   { color: #fff25a; font-weight: 600; }84  .btn.clear{ color: #ff6b73; font-weight: 700; }85  .btn.equals{ color: #fff25a; font-weight: 700; }86  .btn.small { font-size: 82px; }87  .fraction { display: flex; flex-direction: column; align-items: center; line-height: 1.0; }88  .fraction .bar { width: 90px; height: 6px; background: #84ff5e; margin: 6px 0; border-radius: 3px; }89 90  /* Bottom ad banner */91  .ad {92    position: absolute; left: 0; bottom: 0;93    width: 100%; height: 210px;94    background: #0a1418;95    border-top: 1px solid rgba(255,255,255,0.06);96    display: flex; align-items: center; justify-content: space-between;97    padding: 30px 40px;98    color: #cfe3e6;99  }100  .ad .desc { max-width: 700px; }101  .ad .title { font-size: 48px; line-height: 1.2; }102  .ad .price { font-size: 40px; color: #9fb2b8; margin-top: 10px; }103  .ad .open-btn {104    width: 220px; height: 110px; border-radius: 26px;105    background: #214b58; color: #eaf9ff;106    display: flex; align-items: center; justify-content: center;107    font-size: 46px; font-weight: 700;108    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.12);109  }110  .sponsored { position: absolute; right: 300px; bottom: 170px; font-size: 34px; color: #9fb2b8; }111</style>112</head>113<body>114<div id="render-target">115 116  <!-- Status bar -->117  <div class="statusbar">118    <div class="time">12:53</div>119    <div class="status-right">120      <div class="icon-wifi">121        <svg viewBox="0 0 24 24">122          <path d="M12 18.5c.9 0 1.7.7 1.7 1.5S12.9 21.5 12 21.5s-1.7-.7-1.7-1.5.8-1.5 1.7-1.5z" fill="#9fb2b8" stroke="none"/>123          <path d="M4 9c4.5-4 11.5-4 16 0" />124          <path d="M7 12c3-2.5 7-2.5 10 0" />125          <path d="M9.5 14.5c1.6-1.2 3.4-1.2 5 0" />126        </svg>127      </div>128      <div class="icon-battery">129        <svg viewBox="0 0 32 20">130          <rect x="1" y="3" width="26" height="14" rx="3" />131          <rect x="28" y="7" width="3" height="6" rx="1.5" />132          <rect x="4" y="6" width="18" height="8" fill="#9fb2b8" stroke="none"/>133        </svg>134      </div>135    </div>136  </div>137 138  <!-- App bar -->139  <div class="appbar">140    <div class="left icon">141      <svg viewBox="0 0 24 24">142        <path d="M3 6h18M3 12h18M3 18h18" />143      </svg>144    </div>145    <div class="title">Calculator</div>146    <div class="spacer"></div>147    <div class="right">148      <div class="icon">149        <svg viewBox="0 0 24 24">150          <rect x="5" y="4" width="14" height="16" rx="2"></rect>151          <path d="M8 8h8M8 12h8M8 16h8"></path>152        </svg>153      </div>154      <div class="icon">155        <svg viewBox="0 0 24 24">156          <circle cx="12" cy="5" r="2.2"></circle>157          <circle cx="12" cy="12" r="2.2"></circle>158          <circle cx="12" cy="19" r="2.2"></circle>159        </svg>160      </div>161    </div>162  </div>163 164  <!-- Display area -->165  <div class="display">166    <div class="caret"></div>167  </div>168 169  <div class="deg">Deg</div>170 171  <!-- Keypad -->172  <div class="grid">173    <!-- Row 1 -->174    <div class="btn func">175      <div class="fraction">176        <div>1</div>177        <div class="bar"></div>178        <div>x</div>179      </div>180    </div>181    <div class="btn func small">x^y</div>182    <div class="btn func small">( )</div>183    <div class="btn func small">⌫</div>184 185    <!-- Row 2 -->186    <div class="btn clear">C</div>187    <div class="btn func small">%</div>188    <div class="btn func small">+/−</div>189    <div class="btn op small">÷</div>190 191    <!-- Row 3 -->192    <div class="btn num">7</div>193    <div class="btn num">8</div>194    <div class="btn num">9</div>195    <div class="btn op">×</div>196 197    <!-- Row 4 -->198    <div class="btn num">4</div>199    <div class="btn num">5</div>200    <div class="btn num">6</div>201    <div class="btn op">−</div>202 203    <!-- Row 5 -->204    <div class="btn num">1</div>205    <div class="btn num">2</div>206    <div class="btn num">3</div>207    <div class="btn op">+</div>208 209    <!-- Row 6 -->210    <div class="btn num">0</div>211    <div class="btn num">00</div>212    <div class="btn num">.</div>213    <div class="btn equals">=</div>214  </div>215 216  <!-- Bottom Ad -->217  <div class="ad">218    <div class="desc">219      <div class="title">Sneh Multicolour Bead Rakhi Set Of...</div>220      <div class="price">₹299 Embrace the essence of togetherness</div>221    </div>222    <div class="open-btn">Open</div>223    <div class="sponsored">Sponsored</div>224  </div>225 226</div>227</body>228</html>