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>Dark Calculator UI</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    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #d2d2d2;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0; left: 0; right: 0;23    height: 120px;24    padding: 0 40px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #eaeaea;29    font-weight: 600;30    letter-spacing: 0.5px;31    font-size: 44px;32  }33  .status-right { display: flex; gap: 26px; align-items: center; }34  .status-icon svg { display: block; }35 36  /* Display area */37  .display {38    position: absolute;39    top: 120px;40    left: 0; right: 0;41    height: 760px;42    padding: 20px 40px;43  }44  .display-number {45    position: absolute;46    right: 80px;47    bottom: 80px;48    font-size: 180px;49    font-weight: 300;50    color: #cfcfcf;51    letter-spacing: 2px;52  }53  .caret {54    position: absolute;55    right: 40px;56    bottom: 100px;57    width: 8px;58    height: 170px;59    background: #3B82F6;60    border-radius: 2px;61  }62 63  /* Middle tools row */64  .tools {65    position: absolute;66    top: 900px;67    left: 0; right: 0;68    height: 110px;69    display: flex;70    align-items: center;71    justify-content: space-around;72    padding: 0 40px;73    color: #9aa0a6;74    border-top: 1px solid #101010;75    border-bottom: 1px solid #101010;76  }77  .tool {78    width: 120px; height: 80px;79    display: flex; align-items: center; justify-content: center;80  }81  .tool svg { width: 64px; height: 64px; stroke: #8a8a8a; fill: none; stroke-width: 4; }82  .tool.active svg { stroke: #3B82F6; }83  .tool .delete-tag {84    stroke: #3B82F6;85  }86 87  /* Keypad grid */88  .keypad {89    position: absolute;90    top: 1010px;91    left: 0; right: 0;92    height: 1200px;93    display: grid;94    grid-template-columns: repeat(4, 1fr);95    grid-template-rows: repeat(5, 1fr);96    border-top: 1px solid #0f0f0f;97  }98  .key {99    background: #141414;100    border: 1px solid #0f0f0f;101    display: flex;102    align-items: center;103    justify-content: center;104    font-size: 120px;105    color: #cfcfcf;106    user-select: none;107  }108  .key.small { font-size: 110px; }109  .key.op { color: #3B82F6; font-weight: 500; }110  .key.clear { color: #FF8A65; font-weight: 600; }111  .key.equals {112    background: #3B82F6;113    color: #ffffff;114    font-weight: 700;115  }116 117  /* Bottom gesture pill */118  .gesture-pill {119    position: absolute;120    bottom: 30px;121    left: 50%;122    transform: translateX(-50%);123    width: 300px;124    height: 18px;125    background: #e5e5e5;126    border-radius: 12px;127    opacity: 0.85;128  }129</style>130</head>131<body>132<div id="render-target">133 134  <!-- Status bar -->135  <div class="status-bar">136    <div>8:51</div>137    <div class="status-right">138      <div class="status-icon">139        <!-- Wi-Fi -->140        <svg width="50" height="50" viewBox="0 0 50 50">141          <path d="M6 20c7-6 31-6 38 0" stroke="#eaeaea" stroke-width="4" fill="none" />142          <path d="M12 27c5-4 21-4 26 0" stroke="#eaeaea" stroke-width="4" fill="none" />143          <circle cx="25" cy="34" r="3" fill="#eaeaea"/>144        </svg>145      </div>146      <div class="status-icon">147        <!-- Battery -->148        <svg width="70" height="50" viewBox="0 0 70 50">149          <rect x="6" y="12" width="52" height="26" rx="4" ry="4" stroke="#eaeaea" fill="none" stroke-width="4"/>150          <rect x="10" y="16" width="40" height="18" fill="#eaeaea"/>151          <rect x="60" y="18" width="6" height="14" rx="1" fill="#eaeaea"/>152        </svg>153      </div>154    </div>155  </div>156 157  <!-- Display -->158  <div class="display">159    <div class="display-number">88</div>160    <div class="caret"></div>161  </div>162 163  <!-- Tools row -->164  <div class="tools">165    <div class="tool">166      <!-- Clock -->167      <svg viewBox="0 0 64 64">168        <circle cx="32" cy="32" r="24"></circle>169        <path d="M32 32 L32 18"></path>170        <path d="M32 32 L46 32"></path>171      </svg>172    </div>173    <div class="tool">174      <!-- Ruler -->175      <svg viewBox="0 0 64 64">176        <rect x="8" y="22" width="48" height="20" rx="3" ry="3"></rect>177        <path d="M16 22 L16 42"></path>178        <path d="M24 22 L24 38"></path>179        <path d="M32 22 L32 42"></path>180        <path d="M40 22 L40 38"></path>181        <path d="M48 22 L48 42"></path>182      </svg>183    </div>184    <div class="tool">185      <!-- Math (sqrt/pi/e) -->186      <svg viewBox="0 0 64 64">187        <path d="M10 44 C14 22, 18 20, 26 20" ></path>188        <path d="M30 20 L30 44"></path>189        <path d="M38 22 C46 22, 46 42, 38 42"></path>190      </svg>191    </div>192    <div class="tool active">193      <!-- Theme gear (accent) -->194      <svg viewBox="0 0 64 64">195        <circle cx="32" cy="32" r="12"></circle>196        <path d="M32 12 L32 4"></path>197        <path d="M32 60 L32 52"></path>198        <path d="M12 32 L4 32"></path>199        <path d="M60 32 L52 32"></path>200      </svg>201    </div>202    <div class="tool">203      <!-- Settings gear -->204      <svg viewBox="0 0 64 64">205        <circle cx="32" cy="32" r="12"></circle>206        <path d="M20 20 L14 14"></path>207        <path d="M44 44 L50 50"></path>208        <path d="M44 20 L50 14"></path>209        <path d="M20 44 L14 50"></path>210      </svg>211    </div>212    <div class="tool">213      <!-- Delete tag -->214      <svg class="delete-tag" viewBox="0 0 80 64">215        <path d="M18 18 L50 18 L62 32 L50 46 L18 46 Z"></path>216        <path d="M30 24 L44 40"></path>217        <path d="M44 24 L30 40"></path>218      </svg>219    </div>220  </div>221 222  <!-- Keypad -->223  <div class="keypad">224    <div class="key clear">C</div>225    <div class="key op small">( )</div>226    <div class="key op">%</div>227    <div class="key op">÷</div>228 229    <div class="key">7</div>230    <div class="key">8</div>231    <div class="key">9</div>232    <div class="key op">×</div>233 234    <div class="key">4</div>235    <div class="key">5</div>236    <div class="key">6</div>237    <div class="key op">−</div>238 239    <div class="key">1</div>240    <div class="key">2</div>241    <div class="key">3</div>242    <div class="key op">+</div>243 244    <div class="key">0</div>245    <div class="key">00</div>246    <div class="key small">.</div>247    <div class="key equals">=</div>248  </div>249 250  <!-- Bottom gesture pill -->251  <div class="gesture-pill"></div>252 253</div>254</body>255</html>