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</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #0d0d0f;20    color: #fff;21  }22 23  /* Status bar */24  .status-bar {25    height: 110px;26    padding: 0 36px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #eaeaea;31    font-weight: 600;32    letter-spacing: 0.5px;33  }34  .status-left {35    font-size: 42px;36  }37  .status-center {38    font-size: 44px;39    opacity: 0.85;40  }41  .status-right {42    display: flex;43    align-items: center;44    gap: 28px;45  }46  .status-icon svg {47    width: 48px;48    height: 48px;49    fill: none;50    stroke: #eaeaea;51    stroke-width: 4;52  }53 54  /* Display area */55  .display-area {56    height: 900px;57    padding: 40px;58    color: #dfe1e6;59    font-size: 64px;60    display: flex;61    align-items: flex-end;62    justify-content: flex-end;63  }64 65  /* Tools row */66  .tools-row {67    height: 160px;68    display: flex;69    align-items: center;70    justify-content: space-around;71    padding: 0 40px;72    color: #b6bcc6;73  }74  .tool {75    width: 120px;76    height: 120px;77    border-radius: 60px;78    display: flex;79    align-items: center;80    justify-content: center;81    opacity: 0.85;82  }83  .tool svg {84    width: 72px;85    height: 72px;86    stroke: #b6bcc6;87    fill: none;88    stroke-width: 5;89  }90  .tool.active {91    position: relative;92  }93  .tool.active::after {94    content: "";95    position: absolute;96    inset: 6px;97    border-radius: 60px;98    border: 6px solid #4a90e2;99    opacity: 0.9;100  }101 102  /* Divider above keypad */103  .divider {104    height: 6px;105    background: #0f0f12;106    box-shadow: inset 0 1px 0 #121216;107  }108 109  /* Keypad */110  .keypad {111    height: 1140px; /* 2400 - (110 + 900 + 160 + 6 + 84) */112    display: grid;113    grid-template-columns: repeat(4, 1fr);114    grid-template-rows: repeat(5, 1fr);115    border-top: 1px solid #1c1c20;116  }117  .key {118    background: #141416;119    border-right: 1px solid #1c1c20;120    border-bottom: 1px solid #1c1c20;121    display: flex;122    align-items: center;123    justify-content: center;124    font-size: 120px;125    user-select: none;126  }127  .key.number {128    color: #cfd2d6;129    font-weight: 400;130  }131  .key.operator {132    color: #4a90e2;133    font-weight: 500;134  }135  .key.clear {136    color: #f28c6c;137    font-weight: 600;138  }139  .key.accent {140    background: #4a90e2;141    color: #eaf3ff;142    font-weight: 700;143  }144 145  /* Bottom gesture bar */146  .gesture {147    position: absolute;148    bottom: 20px;149    left: 50%;150    transform: translateX(-50%);151    width: 420px;152    height: 18px;153    border-radius: 12px;154    background: #e6e6e6;155    opacity: 0.8;156  }157</style>158</head>159<body>160<div id="render-target">161  <!-- Status Bar -->162  <div class="status-bar">163    <div class="status-left">8:51</div>164    <div class="status-center">M</div>165    <div class="status-right">166      <div class="status-icon">167        <!-- Wi-Fi -->168        <svg viewBox="0 0 24 24">169          <path d="M2 8c5-4 15-4 20 0" />170          <path d="M5 12c3-2 11-2 14 0" />171          <path d="M9 16c2-1 4-1 6 0" />172          <circle cx="12" cy="19.5" r="1.7" fill="#eaeaea" stroke="none"/>173        </svg>174      </div>175      <div class="status-icon">176        <!-- Battery -->177        <svg viewBox="0 0 30 18">178          <rect x="2" y="3" width="24" height="12" rx="2" />179          <rect x="26" y="6" width="3" height="6" rx="1" />180          <rect x="4.5" y="5.5" width="18" height="7" fill="#eaeaea" stroke="none"/>181        </svg>182      </div>183    </div>184  </div>185 186  <!-- Display Area (blank, dark) -->187  <div class="display-area">188    <!-- Intentionally blank to match screenshot -->189  </div>190 191  <!-- Tools Row -->192  <div class="tools-row">193    <div class="tool">194      <!-- Clock -->195      <svg viewBox="0 0 24 24">196        <circle cx="12" cy="12" r="9"/>197        <path d="M12 6v6l4 2"/>198      </svg>199    </div>200    <div class="tool">201      <!-- Ruler -->202      <svg viewBox="0 0 32 20">203        <rect x="2" y="4" width="28" height="12" rx="3"/>204        <path d="M6 6v6M10 6v6M14 6v6M18 6v6M22 6v6M26 6v6"/>205      </svg>206    </div>207    <div class="tool">208      <!-- Math (sqrt/pi/e) -->209      <svg viewBox="0 0 48 48">210        <path d="M6 32l8-18h10M28 18h10M34 14v12M10 36h28"/>211      </svg>212    </div>213    <div class="tool active">214      <!-- Theme wheel (simple circle) -->215      <svg viewBox="0 0 24 24">216        <circle cx="12" cy="12" r="8"/>217        <path d="M12 4v16M4 12h16M6.5 6.5l11 11M17.5 6.5l-11 11"/>218      </svg>219    </div>220    <div class="tool">221      <!-- Gear (simple) -->222      <svg viewBox="0 0 24 24">223        <circle cx="12" cy="12" r="4"/>224        <path d="M12 2v4M12 18v4M2 12h4M18 12h4M5 5l3 3M16 16l3 3M19 5l-3 3M8 16l-3 3"/>225      </svg>226    </div>227    <div class="tool">228      <!-- Backspace -->229      <svg viewBox="0 0 30 20">230        <path d="M10 4h16v12H10L4 10l6-6z"/>231        <path d="M16 7l4 6M20 7l-4 6"/>232      </svg>233    </div>234  </div>235 236  <div class="divider"></div>237 238  <!-- Keypad -->239  <div class="keypad">240    <!-- Row 1 -->241    <div class="key clear">C</div>242    <div class="key operator">()</div>243    <div class="key operator">%</div>244    <div class="key operator">÷</div>245 246    <!-- Row 2 -->247    <div class="key number">7</div>248    <div class="key number">8</div>249    <div class="key number">9</div>250    <div class="key operator">×</div>251 252    <!-- Row 3 -->253    <div class="key number">4</div>254    <div class="key number">5</div>255    <div class="key number">6</div>256    <div class="key operator">−</div>257 258    <!-- Row 4 -->259    <div class="key number">1</div>260    <div class="key number">2</div>261    <div class="key number">3</div>262    <div class="key operator">+</div>263 264    <!-- Row 5 -->265    <div class="key number">0</div>266    <div class="key number">00</div>267    <div class="key number">.</div>268    <div class="key accent">=</div>269  </div>270 271  <!-- Gesture bar -->272  <div class="gesture"></div>273</div>274</body>275</html>