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 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: #0b0b0b;15    color: #d0d0d0;16    font-family: "Segoe UI", Roboto, Arial, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    height: 120px;25    width: 100%;26    color: #f5f5f5;27    font-size: 44px;28    display: flex;29    align-items: center;30    justify-content: space-between;31    padding: 0 40px;32  }33  .status-left { letter-spacing: 1px; }34  .status-right { display: flex; gap: 28px; align-items: center; }35 36  .status-icon svg { width: 42px; height: 42px; fill: none; stroke: #f5f5f5; stroke-width: 3; }37 38  /* Display area */39  .display {40    position: absolute;41    top: 120px;42    left: 0;43    width: 100%;44    height: 880px;45    padding: 60px;46    box-sizing: border-box;47  }48  .equation {49    text-align: right;50    font-size: 180px;51    line-height: 1.1;52    color: #cfcfcf;53    letter-spacing: 2px;54    margin-top: 160px;55  }56  .equation .caret {57    display: inline-block;58    width: 6px;59    height: 168px;60    background: #2d8ae3;61    margin-left: 16px;62    vertical-align: bottom;63    border-radius: 2px;64  }65  .result {66    text-align: right;67    font-size: 74px;68    line-height: 1.2;69    color: #bfbfbf;70    margin-top: 40px;71  }72 73  /* Tool icons row */74  .tools {75    position: absolute;76    top: 980px;77    left: 0;78    width: 100%;79    height: 140px;80    display: flex;81    align-items: center;82    justify-content: space-around;83    padding: 0 40px;84    box-sizing: border-box;85    color: #8b8b8b;86  }87  .tool svg { width: 72px; height: 72px; stroke: #8b8b8b; fill: none; stroke-width: 4; }88  .tool.blue svg { stroke: #2d8ae3; }89  .tool .label { font-size: 40px; color: #8b8b8b; }90 91  /* Keypad grid */92  .keypad {93    position: absolute;94    top: 1120px;95    left: 0;96    width: 100%;97    height: 1120px;98    background: #0b0b0b;99    display: grid;100    grid-template-columns: repeat(4, 1fr);101    grid-template-rows: repeat(5, 1fr);102    gap: 1px; /* grid lines */103  }104  .btn {105    background: #151515;106    display: flex;107    align-items: center;108    justify-content: center;109    font-size: 120px;110    color: #cfcfcf;111    user-select: none;112  }113  .btn.op { color: #2d8ae3; }114  .btn.orange { color: #ff8a65; }115  .btn.equals {116    background: #4ea2e5;117    color: #ffffff;118    font-weight: 600;119  }120 121  /* Bottom gesture pill */122  .gesture {123    position: absolute;124    bottom: 36px;125    left: 50%;126    transform: translateX(-50%);127    width: 260px;128    height: 16px;129    background: #d9d9d9;130    border-radius: 10px;131    opacity: 0.9;132  }133</style>134</head>135<body>136<div id="render-target">137 138  <!-- Status bar -->139  <div class="status-bar">140    <div class="status-left">8:53</div>141    <div class="status-right">142      <div class="status-icon">143        <!-- Simple Wi-Fi -->144        <svg viewBox="0 0 24 24">145          <path d="M2 8c5-4 15-4 20 0" />146          <path d="M5 12c3-3 11-3 14 0" />147          <path d="M8 16c2-2 6-2 8 0" />148          <circle cx="12" cy="19" r="1.8" fill="#f5f5f5" stroke="none"/>149        </svg>150      </div>151      <div class="status-icon">152        <!-- Battery -->153        <svg viewBox="0 0 28 24">154          <rect x="2" y="6" width="20" height="12" rx="2" />155          <rect x="23" y="9" width="3" height="6" rx="1" />156          <rect x="4" y="8" width="14" height="8" fill="#f5f5f5" stroke="none"/>157        </svg>158      </div>159    </div>160  </div>161 162  <!-- Display -->163  <div class="display">164    <div class="equation">88 ÷ 33<span class="caret"></span></div>165    <div class="result">2.6666666667</div>166  </div>167 168  <!-- Tools row -->169  <div class="tools">170    <div class="tool">171      <!-- Clock -->172      <svg viewBox="0 0 24 24">173        <circle cx="12" cy="12" r="9"></circle>174        <path d="M12 12 L12 6"></path>175        <path d="M12 12 L17 12"></path>176      </svg>177    </div>178    <div class="tool">179      <!-- Ruler -->180      <svg viewBox="0 0 28 24">181        <rect x="2" y="6" width="24" height="12" rx="2"></rect>182        <path d="M6 6 V18M10 6 V18M14 6 V18M18 6 V18M22 6 V18" stroke-linecap="round"></path>183      </svg>184    </div>185    <div class="tool">186      <!-- Formula (sqrt pi e) -->187      <svg viewBox="0 0 60 60">188        <path d="M8 40 L18 20 H40" stroke-linecap="round"></path>189        <text x="24" y="42" font-size="22" fill="#8b8b8b" stroke="none">π</text>190        <text x="38" y="42" font-size="22" fill="#8b8b8b" stroke="none">e</text>191      </svg>192    </div>193    <div class="tool blue">194      <!-- Theme/Setting accent (simple cog with highlight) -->195      <svg viewBox="0 0 60 60">196        <circle cx="30" cy="30" r="10"></circle>197        <path d="M30 12 L30 4 M30 56 L30 48 M12 30 L4 30 M56 30 L48 30198                 M16 16 L10 10 M44 44 L50 50 M44 16 L50 10 M16 44 L10 50" stroke-linecap="round"></path>199      </svg>200    </div>201    <div class="tool">202      <!-- Gear -->203      <svg viewBox="0 0 60 60">204        <circle cx="30" cy="30" r="9"></circle>205        <path d="M30 12 L30 4 M30 56 L30 48 M12 30 L4 30 M56 30 L48 30" stroke-linecap="round"></path>206      </svg>207    </div>208    <div class="tool blue">209      <!-- Backspace with X -->210      <svg viewBox="0 0 60 60">211        <path d="M16 20 L8 30 L16 40 H50 V20 Z"></path>212        <path d="M26 26 L40 34 M40 26 L26 34"></path>213      </svg>214    </div>215  </div>216 217  <!-- Keypad -->218  <div class="keypad">219    <div class="btn orange">C</div>220    <div class="btn op">()</div>221    <div class="btn op">%</div>222    <div class="btn op">÷</div>223 224    <div class="btn">7</div>225    <div class="btn">8</div>226    <div class="btn">9</div>227    <div class="btn op">×</div>228 229    <div class="btn">4</div>230    <div class="btn">5</div>231    <div class="btn">6</div>232    <div class="btn op">−</div>233 234    <div class="btn">1</div>235    <div class="btn">2</div>236    <div class="btn">3</div>237    <div class="btn op">+</div>238 239    <div class="btn">0</div>240    <div class="btn">00</div>241    <div class="btn">.</div>242    <div class="btn equals">=</div>243  </div>244 245  <!-- Gesture pill -->246  <div class="gesture"></div>247</div>248</body>249</html>