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>Calculator UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0f1011;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #e5e5e5;17  }18 19  /* Status bar */20  .statusbar {21    position: absolute;22    top: 0;23    left: 0;24    width: 100%;25    height: 110px;26    padding: 26px 36px;27    box-sizing: border-box;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #fff;32  }33  .status-left { font-size: 46px; font-weight: 600; letter-spacing: 0.5px; }34  .status-right { display: flex; align-items: center; gap: 22px; }35  .status-right svg { width: 44px; height: 44px; stroke: #fff; fill: none; opacity: 0.9; }36 37  /* Display area */38  .display {39    position: absolute;40    top: 110px;41    left: 0;42    width: 100%;43    height: 860px;44    padding: 40px 70px;45    box-sizing: border-box;46    display: flex;47    align-items: flex-end;48    justify-content: flex-end;49  }50  .display-number {51    font-size: 220px;52    color: #cfd2d4;53    font-weight: 300;54    line-height: 1;55    letter-spacing: 2px;56    display: flex;57    align-items: center;58  }59  .caret {60    width: 6px;61    height: 220px;62    background: #4da3ff;63    margin-left: 18px;64    border-radius: 3px;65  }66 67  /* Tools row */68  .tools {69    position: absolute;70    top: 970px;71    left: 0;72    width: 100%;73    height: 130px;74    display: flex;75    align-items: center;76    justify-content: space-around;77    color: #9aa1a7;78  }79  .tool {80    width: 120px;81    height: 90px;82    display: flex;83    align-items: center;84    justify-content: center;85    opacity: 0.85;86  }87  .tool svg { width: 70px; height: 70px; stroke: #9aa1a7; fill: none; }88  .tool.active svg { stroke: #4da3ff; }89 90  /* Keypad */91  .keypad {92    position: absolute;93    top: 1100px;94    left: 0;95    width: 100%;96    height: 1300px;97    display: grid;98    grid-template-columns: repeat(4, 1fr);99    grid-template-rows: repeat(6, 1fr);100  }101  .key {102    background: #151516;103    border: 1px solid #1e1f21;104    display: flex;105    align-items: center;106    justify-content: center;107    font-size: 120px;108    color: #c9cbcd;109    font-weight: 300;110    user-select: none;111  }112  .op { color: #4da3ff; }113  .control { color: #ff946e; }114  .small { font-size: 110px; }115  .eq {116    background: #4da3ff;117    color: #ffffff;118    font-weight: 600;119    border-color: #4da3ff;120    font-size: 130px;121    grid-column: 4 / 5;122    grid-row: 5 / span 2; /* spans two rows */123  }124  .blank { background: #151516; border: 1px solid #1e1f21; }125 126  /* Bottom nav pill */127  .nav-pill {128    position: absolute;129    bottom: 22px;130    left: 50%;131    transform: translateX(-50%);132    width: 300px;133    height: 12px;134    background: #e5e5e5;135    border-radius: 12px;136    opacity: 0.9;137  }138</style>139</head>140<body>141<div id="render-target">142 143  <!-- Status bar -->144  <div class="statusbar">145    <div class="status-left">8:51</div>146    <div class="status-right">147      <!-- simple cellular/wifi icons -->148      <svg viewBox="0 0 24 24">149        <path d="M2 8c6-6 14-6 20 0" stroke-width="2" />150        <path d="M6 12c4-4 8-4 12 0" stroke-width="2" />151        <circle cx="12" cy="16" r="2" stroke-width="2" />152      </svg>153      <svg viewBox="0 0 28 24">154        <rect x="4" y="5" width="20" height="14" rx="3" stroke-width="2"></rect>155        <rect x="6" y="7" width="16" height="10" rx="2" stroke-width="2"></rect>156        <rect x="24" y="9" width="2" height="6" stroke-width="2"></rect>157      </svg>158    </div>159  </div>160 161  <!-- Display -->162  <div class="display">163    <div class="display-number">8<span class="caret"></span></div>164  </div>165 166  <!-- Tools row -->167  <div class="tools">168    <div class="tool">169      <!-- Clock -->170      <svg viewBox="0 0 24 24">171        <circle cx="12" cy="12" r="8" stroke-width="2"></circle>172        <path d="M12 12 L12 7" stroke-width="2"></path>173        <path d="M12 12 L16 14" stroke-width="2"></path>174      </svg>175    </div>176    <div class="tool">177      <!-- Ruler -->178      <svg viewBox="0 0 24 24">179        <rect x="2" y="8" width="20" height="8" rx="2" stroke-width="2"></rect>180        <path d="M5 8 v8 M8 8 v6 M11 8 v8 M14 8 v6 M17 8 v8" stroke-width="2"></path>181      </svg>182    </div>183    <div class="tool">184      <!-- Math (sqrt pi e) -->185      <svg viewBox="0 0 28 24">186        <path d="M2 16 c2-8 4-10 6-10 h6" stroke-width="2"></path>187        <text x="15" y="12" font-size="8" fill="#9aa1a7" stroke="none">π</text>188        <text x="20" y="16" font-size="8" fill="#9aa1a7" stroke="none">e</text>189      </svg>190    </div>191    <div class="tool active">192      <!-- Theme/gear half -->193      <svg viewBox="0 0 24 24">194        <circle cx="12" cy="12" r="7" stroke-width="2"></circle>195        <path d="M12 5 a7 7 0 0 0 0 14" stroke="#4da3ff" stroke-width="2"></path>196      </svg>197    </div>198    <div class="tool">199      <!-- Settings gear -->200      <svg viewBox="0 0 24 24">201        <circle cx="12" cy="12" r="3" stroke-width="2"></circle>202        <path d="M12 2 v3 M12 19 v3 M2 12 h3 M19 12 h3 M5 5 l2 2 M17 17 l2 2 M5 19 l2-2 M17 7 l2-2" stroke-width="2"></path>203      </svg>204    </div>205    <div class="tool">206      <!-- Backspace -->207      <svg viewBox="0 0 30 20">208        <path d="M10 18 h16 a2 2 0 0 0 2-2 V4 a2 2 0 0 0-2-2 H10 L4 10 Z" stroke-width="2"></path>209        <path d="M16 6 L22 14 M22 6 L16 14" stroke-width="2"></path>210      </svg>211    </div>212  </div>213 214  <!-- Keypad -->215  <div class="keypad">216    <!-- Row 1 -->217    <div class="key control">C</div>218    <div class="key op small">()</div>219    <div class="key op small">%</div>220    <div class="key op small">÷</div>221 222    <!-- Row 2 -->223    <div class="key">7</div>224    <div class="key">8</div>225    <div class="key">9</div>226    <div class="key op small">×</div>227 228    <!-- Row 3 -->229    <div class="key">4</div>230    <div class="key">5</div>231    <div class="key">6</div>232    <div class="key op small">−</div>233 234    <!-- Row 4 -->235    <div class="key">1</div>236    <div class="key">2</div>237    <div class="key">3</div>238    <div class="key op small">+</div>239 240    <!-- Row 5 -->241    <div class="key">0</div>242    <div class="key small">00</div>243    <div class="key small">.</div>244    <div class="key eq">=</div>245 246    <!-- Row 6 (equals spans here; others are blank just to fill grid) -->247    <div class="blank"></div>248    <div class="blank"></div>249    <div class="blank"></div>250    <!-- equals occupies the last column via grid-row span -->251  </div>252 253  <!-- Bottom nav pill -->254  <div class="nav-pill"></div>255</div>256</body>257</html>