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 { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #0e0f11; color: #eaeaea;12    font-family: "Roboto", "Segoe UI", Arial, sans-serif;13  }14 15  /* Status bar */16  .status {17    position: absolute; top: 0; left: 0; right: 0;18    height: 120px;19    padding: 24px 36px 0 36px;20    box-sizing: border-box;21    color: #e6e6e6;22    display: flex; justify-content: space-between; align-items: flex-start;23    font-size: 40px; font-weight: 500;24  }25  .status .right { display: flex; gap: 28px; align-items: center; }26  .status svg { width: 44px; height: 44px; opacity: 0.85; }27 28  /* Display/result area */29  .display {30    position: absolute; top: 120px; left: 0; right: 0;31    height: 880px;32    padding: 40px 60px;33    box-sizing: border-box;34  }35  .result {36    font-size: 170px; line-height: 1; letter-spacing: 2px;37    color: #5fa8e2; font-weight: 300;38    margin-top: 180px;39  }40  .caret {41    position: absolute; right: 60px; top: 340px;42    width: 4px; height: 170px; background: #5fa8e2; border-radius: 2px;43  }44  .expression {45    position: absolute; right: 60px; bottom: 60px;46    font-size: 64px; color: #d0d0d0; opacity: 0.65;47  }48 49  /* Function icons row */50  .func-row {51    position: absolute; top: 1000px; left: 0; right: 0;52    height: 120px;53    display: flex; justify-content: space-around; align-items: center;54    color: #b5bbc1;55  }56  .func-icon {57    width: 120px; height: 90px;58    display: flex; align-items: center; justify-content: center;59    opacity: 0.6;60  }61  .func-icon svg { width: 72px; height: 72px; }62 63  /* Keypad grid */64  .keypad {65    position: absolute; top: 1120px; left: 0; right: 0; bottom: 120px;66    display: grid;67    grid-template-columns: repeat(4, 1fr);68    grid-template-rows: repeat(5, 1fr);69  }70  .key {71    background: #141516;72    border-top: 1px solid #1f2021;73    border-right: 1px solid #1f2021;74    display: flex; align-items: center; justify-content: center;75    font-size: 120px; color: #d9d9d9; font-weight: 300;76  }77  .key:nth-child(4n) { border-right: none; }78  .key.op { color: #5fa8e2; }79  .key.clear { color: #ff9b7a; }80  .key.equal {81    background: #4ea1e0; color: #ffffff; font-weight: 500;82  }83 84  /* Bottom gesture bar */85  .gesture {86    position: absolute; bottom: 28px; left: 50%;87    transform: translateX(-50%);88    width: 300px; height: 12px; border-radius: 8px;89    background: rgba(255,255,255,0.7);90  }91</style>92</head>93<body>94<div id="render-target">95 96  <!-- Status bar -->97  <div class="status">98    <div class="left">8:53</div>99    <div class="right">100      <!-- Wi‑Fi -->101      <svg viewBox="0 0 24 24">102        <path d="M12 18.5c.9 0 1.5.6 1.5 1.5S12.9 21.5 12 21.5 10.5 20.9 10.5 20s.6-1.5 1.5-1.5z" fill="#eaeaea"/>103        <path d="M3 8.5c5.9-5.2 12.1-5.2 18 0" stroke="#eaeaea" stroke-width="2" fill="none" stroke-linecap="round"/>104        <path d="M6 12c3.9-3.4 8.1-3.4 12 0" stroke="#eaeaea" stroke-width="2" fill="none" stroke-linecap="round"/>105        <path d="M9 15.5c2.2-1.9 4.8-1.9 7 0" stroke="#eaeaea" stroke-width="2" fill="none" stroke-linecap="round"/>106      </svg>107      <!-- Battery -->108      <svg viewBox="0 0 28 16">109        <rect x="1" y="3" width="22" height="10" rx="2" ry="2" fill="none" stroke="#eaeaea" stroke-width="2"/>110        <rect x="3" y="5" width="18" height="6" fill="#eaeaea"/>111        <rect x="23" y="6" width="3" height="4" fill="#eaeaea"/>112      </svg>113    </div>114  </div>115 116  <!-- Display area -->117  <div class="display">118    <div class="result">2.66666666667</div>119    <div class="caret"></div>120    <div class="expression">88 ÷ 33</div>121  </div>122 123  <!-- Function icons row -->124  <div class="func-row">125    <!-- Clock -->126    <div class="func-icon">127      <svg viewBox="0 0 24 24">128        <circle cx="12" cy="12" r="9" stroke="#b5bbc1" stroke-width="2" fill="none"/>129        <path d="M12 6v6l4 2" stroke="#b5bbc1" stroke-width="2" fill="none" stroke-linecap="round"/>130      </svg>131    </div>132    <!-- Ruler -->133    <div class="func-icon">134      <svg viewBox="0 0 24 24">135        <rect x="2" y="8" width="20" height="8" rx="2" fill="none" stroke="#b5bbc1" stroke-width="2"/>136        <path d="M6 8v4M10 8v4M14 8v4M18 8v4" stroke="#b5bbc1" stroke-width="2"/>137      </svg>138    </div>139    <!-- Math (√ π e) -->140    <div class="func-icon">141      <svg viewBox="0 0 56 56">142        <rect x="4" y="8" width="48" height="40" rx="6" fill="none" stroke="#b5bbc1" stroke-width="2"/>143        <text x="10" y="34" font-size="20" fill="#b5bbc1" font-family="Arial">√π e</text>144      </svg>145    </div>146    <!-- Theme toggle (crescent) -->147    <div class="func-icon">148      <svg viewBox="0 0 24 24">149        <circle cx="12" cy="12" r="9" fill="none" stroke="#b5bbc1" stroke-width="2"/>150        <path d="M16 12a6 6 0 1 1-6-6 7 7 0 0 0 6 6z" fill="#b5bbc1"/>151      </svg>152    </div>153    <!-- Gear -->154    <div class="func-icon">155      <svg viewBox="0 0 24 24">156        <circle cx="12" cy="12" r="3" fill="none" stroke="#b5bbc1" stroke-width="2"/>157        <path d="M12 2v4M12 18v4M2 12h4M18 12h4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M19.1 4.9l-2.8 2.8M7.7 16.3l-2.8 2.8"158              stroke="#b5bbc1" stroke-width="2" stroke-linecap="round"/>159      </svg>160    </div>161    <!-- Backspace -->162    <div class="func-icon">163      <svg viewBox="0 0 64 32">164        <path d="M10 16l10-10h30a6 6 0 0 1 6 6v8a6 6 0 0 1-6 6H20z" fill="none" stroke="#5fa8e2" stroke-width="2"/>165        <path d="M32 10l8 8M40 10l-8 8" stroke="#5fa8e2" stroke-width="2" stroke-linecap="round"/>166      </svg>167    </div>168  </div>169 170  <!-- Keypad -->171  <div class="keypad">172    <div class="key clear">C</div>173    <div class="key op">()</div>174    <div class="key op">%</div>175    <div class="key op">÷</div>176 177    <div class="key">7</div>178    <div class="key">8</div>179    <div class="key">9</div>180    <div class="key op">×</div>181 182    <div class="key">4</div>183    <div class="key">5</div>184    <div class="key">6</div>185    <div class="key op">−</div>186 187    <div class="key">1</div>188    <div class="key">2</div>189    <div class="key">3</div>190    <div class="key op">+</div>191 192    <div class="key">0</div>193    <div class="key">00</div>194    <div class="key">.</div>195    <div class="key equal">=</div>196  </div>197 198  <!-- Bottom gesture bar -->199  <div class="gesture"></div>200</div>201</body>202</html>