GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Calculator UI Mock</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #0e0e0e;19  }20 21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 120px;28    color: #fff;29    font-weight: 500;30  }31  .status-time {32    position: absolute;33    left: 36px;34    top: 30px;35    font-size: 44px;36    letter-spacing: 1px;37  }38  .status-icons {39    position: absolute;40    right: 32px;41    top: 28px;42    display: flex;43    gap: 26px;44    align-items: center;45  }46  .status-icons svg {47    width: 44px;48    height: 44px;49    fill: none;50    stroke: #ffffff;51    stroke-width: 3;52    opacity: 0.95;53  }54 55  /* Display area */56  .display {57    position: absolute;58    top: 120px;59    left: 0;60    width: 1080px;61    height: 1000px;62    padding: 40px 44px;63    color: #cfcfcf;64  }65  .display-content {66    position: absolute;67    right: 44px;68    bottom: 80px;69    text-align: right;70    font-size: 180px;71    letter-spacing: 4px;72  }73  .display .op {74    color: #4a8fd3;75  }76  .caret {77    position: absolute;78    right: 24px;79    bottom: 108px;80    width: 6px;81    height: 210px;82    background: #4a8fd3;83    border-radius: 3px;84  }85 86  /* Toolbar icons row */87  .tool-row {88    position: absolute;89    top: 1020px;90    left: 0;91    width: 1080px;92    height: 140px;93    display: flex;94    justify-content: space-around;95    align-items: center;96    padding: 0 32px;97  }98  .tool-row .icon-wrap {99    width: 120px;100    height: 120px;101    display: flex;102    justify-content: center;103    align-items: center;104  }105  .tool-row svg {106    width: 80px;107    height: 80px;108    stroke: #9aa0a6;109    fill: none;110    stroke-width: 3.2;111    opacity: 0.9;112  }113  .tool-row .accent {114    stroke: #4a8fd3;115  }116 117  /* Keypad grid */118  .keypad {119    position: absolute;120    left: 0;121    top: 1160px;122    width: 1080px;123    height: 1080px;124    display: grid;125    grid-template-columns: repeat(4, 1fr);126    grid-template-rows: repeat(5, 1fr);127    background: #0e0e0e;128    border-top: 1px solid #1a1a1a;129  }130  .key {131    display: flex;132    justify-content: center;133    align-items: center;134    background: #141414;135    border: 1px solid #1f1f1f;136    color: #cfcfcf;137    font-size: 120px;138    user-select: none;139  }140  .key.op {141    color: #4a8fd3;142  }143  .key.clear {144    color: #f6a28a;145  }146  .key.equals {147    background: #4a8fd3;148    color: #ffffff;149    font-weight: 700;150  }151 152  /* Home indicator */153  .home-indicator {154    position: absolute;155    bottom: 30px;156    left: 50%;157    width: 400px;158    height: 12px;159    transform: translateX(-50%);160    background: #e6e6e6;161    border-radius: 8px;162    opacity: 0.85;163  }164</style>165</head>166<body>167<div id="render-target">168 169  <!-- Status bar -->170  <div class="status-bar">171    <div class="status-time">8:52</div>172    <div class="status-icons">173      <!-- Wi-Fi -->174      <svg viewBox="0 0 24 24">175        <path d="M2 8c5-4 15-4 20 0"/>176        <path d="M5 12c3-3 11-3 14 0"/>177        <path d="M9 16c2-2 6-2 8 0"/>178        <circle cx="12" cy="20" r="1.8" fill="#ffffff"/>179      </svg>180      <!-- Battery -->181      <svg viewBox="0 0 30 16">182        <rect x="1" y="3" width="24" height="10" rx="2"/>183        <rect x="26" y="6" width="3" height="4" rx="1"/>184        <rect x="3" y="5" width="18" height="6" rx="1" fill="#ffffff" stroke="none"/>185      </svg>186    </div>187  </div>188 189  <!-- Display area -->190  <div class="display">191    <div class="display-content">192      88 <span class="op">÷</span>193    </div>194    <div class="caret"></div>195  </div>196 197  <!-- Tool icons row -->198  <div class="tool-row">199    <!-- Clock -->200    <div class="icon-wrap">201      <svg viewBox="0 0 24 24">202        <circle cx="12" cy="12" r="9"/>203        <path d="M12 6v6l4 2"/>204      </svg>205    </div>206    <!-- Ruler -->207    <div class="icon-wrap">208      <svg viewBox="0 0 28 16">209        <rect x="2" y="3" width="24" height="10" rx="2"/>210        <path d="M6 4v6M9 4v6M12 4v6M15 4v6M18 4v6M21 4v6" />211      </svg>212    </div>213    <!-- Formula (sqrt + pi) -->214    <div class="icon-wrap">215      <svg viewBox="0 0 28 20">216        <path d="M2 14h6l3-10h3"/>217        <path d="M16 7c3 0 5 0 5 6"/>218        <path d="M16 13h6"/>219      </svg>220    </div>221    <!-- Theme/gear accent -->222    <div class="icon-wrap">223      <svg viewBox="0 0 24 24" class="accent">224        <circle cx="12" cy="12" r="4"/>225        <path d="M4 12h3M17 12h3M12 4v3M12 17v3M6 6l2 2M16 16l2 2M18 6l-2 2M6 18l2-2"/>226      </svg>227    </div>228    <!-- Settings gear -->229    <div class="icon-wrap">230      <svg viewBox="0 0 24 24">231        <circle cx="12" cy="12" r="3"/>232        <path d="M4 12h3M17 12h3M12 4v3M12 17v3M6 6l2 2M16 16l2 2M18 6l-2 2M6 18l2-2"/>233      </svg>234    </div>235    <!-- Backspace key outline -->236    <div class="icon-wrap">237      <svg viewBox="0 0 34 18" class="accent">238        <path d="M10 2l-8 7 8 7h20a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H10z"/>239        <path d="M18 6l6 6M24 6l-6 6"/>240      </svg>241    </div>242  </div>243 244  <!-- Keypad -->245  <div class="keypad">246    <div class="key clear">C</div>247    <div class="key op">()</div>248    <div class="key op">%</div>249    <div class="key op">÷</div>250 251    <div class="key">7</div>252    <div class="key">8</div>253    <div class="key">9</div>254    <div class="key op">×</div>255 256    <div class="key">4</div>257    <div class="key">5</div>258    <div class="key">6</div>259    <div class="key op">−</div>260 261    <div class="key">1</div>262    <div class="key">2</div>263    <div class="key">3</div>264    <div class="key op">+</div>265 266    <div class="key">0</div>267    <div class="key">00</div>268    <div class="key">.</div>269    <div class="key equals">=</div>270  </div>271 272  <!-- Home indicator -->273  <div class="home-indicator"></div>274</div>275</body>276</html>