GD-ML/AndroidCode
13.4k
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 Mock</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#0d0d0d; color:#cfcfcf;12 }13 14 /* Status bar */15 .status-bar {16 position:absolute; top:0; left:0; width:100%; height:110px;17 color:#eaeaea; font-weight:600;18 }19 .status-inner { padding:24px 36px; display:flex; justify-content:space-between; align-items:center; }20 .status-time { font-size:48px; letter-spacing:1px; }21 .status-icons { display:flex; gap:22px; align-items:center; }22 .icon { width:44px; height:44px; opacity:0.9; }23 .icon svg { width:100%; height:100%; fill:none; stroke:#eaeaea; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }24 25 /* Display area */26 .display {27 position:absolute; top:110px; left:0; width:100%; height:780px;28 padding:40px 60px 0 60px;29 }30 .expression {31 text-align:right; font-size:160px; color:#cfcfcf; opacity:0.9; letter-spacing:2px;32 }33 .expression .cursor {34 display:inline-block; vertical-align:top; height:170px; border-right:6px solid #3d8bff; margin-left:16px;35 }36 .result {37 text-align:right; margin-top:30px; font-size:64px; color:#bfbfbf; opacity:0.85;38 }39 40 /* Toolbar row */41 .tool-row {42 position:absolute; top:890px; left:0; width:100%; height:140px;43 display:flex; align-items:center; justify-content:space-around;44 padding:0 40px; color:#9da3a7;45 }46 .tool {47 width:100px; height:100px; display:flex; justify-content:center; align-items:center;48 opacity:0.8;49 }50 .tool svg { width:72px; height:72px; stroke:#9da3a7; fill:none; stroke-width:3; }51 .tool.active svg { stroke:#3d8bff; }52 .tool.backspace { }53 .tool.backspace svg rect { stroke:#3d8bff; }54 .tool.backspace svg path { stroke:#3d8bff; }55 56 /* Keypad */57 .keypad {58 position:absolute; top:1030px; left:0; width:100%; height:1260px;59 display:grid;60 grid-template-columns: repeat(4, 1fr);61 grid-template-rows: repeat(5, 1fr);62 background:#0f0f0f;63 border-top:1px solid #121212;64 }65 .key {66 background:#141414;67 border-right:1px solid #111; border-bottom:1px solid #111;68 display:flex; align-items:center; justify-content:center;69 font-size:120px; color:#d0d0d0;70 }71 .key.small { font-size:110px; }72 .key.operator { color:#3d8bff; }73 .key.action { color:#ff8f6b; }74 .key.equals {75 background:#3d8bff; color:#eaf3ff; font-weight:bold;76 }77 78 /* Bottom gesture bar */79 .gesture {80 position:absolute; bottom:24px; left:50%; transform:translateX(-50%);81 width:360px; height:12px; background:#e6e6e6; border-radius:12px; opacity:0.85;82 }83</style>84</head>85<body>86<div id="render-target">87 88 <!-- Status Bar -->89 <div class="status-bar">90 <div class="status-inner">91 <div class="status-time">8:53</div>92 <div class="status-icons">93 <!-- Wi-Fi -->94 <div class="icon">95 <svg viewBox="0 0 24 24">96 <path d="M2 8c5-4 15-4 20 0"></path>97 <path d="M5 12c3-3 11-3 14 0"></path>98 <path d="M8 16c2-2 6-2 8 0"></path>99 <circle cx="12" cy="19" r="1.5" fill="#eaeaea" stroke="none"></circle>100 </svg>101 </div>102 <!-- Battery -->103 <div class="icon">104 <svg viewBox="0 0 28 24">105 <rect x="2" y="5" width="20" height="14" rx="2"></rect>106 <rect x="23" y="9" width="3" height="6" rx="1"></rect>107 <rect x="4" y="7" width="12" height="10" fill="#eaeaea" stroke="none"></rect>108 </svg>109 </div>110 </div>111 </div>112 </div>113 114 <!-- Display -->115 <div class="display">116 <div class="expression">117 <span>88 ÷ 3</span><span class="cursor"></span>118 </div>119 <div class="result">29.3333333333</div>120 </div>121 122 <!-- Toolbar icons -->123 <div class="tool-row">124 <!-- Clock -->125 <div class="tool">126 <svg viewBox="0 0 24 24">127 <circle cx="12" cy="12" r="9"></circle>128 <path d="M12 6v6l4 3"></path>129 </svg>130 </div>131 <!-- Ruler -->132 <div class="tool">133 <svg viewBox="0 0 24 24">134 <rect x="2" y="6" width="20" height="12" rx="2"></rect>135 <path d="M6 8v6M9 8v6M12 8v6M15 8v6M18 8v6"></path>136 </svg>137 </div>138 <!-- Math functions -->139 <div class="tool">140 <svg viewBox="0 0 24 24">141 <path d="M4 18h8"></path>142 <path d="M8 6v12"></path>143 <path d="M16 7h4M16 12h4M16 17h4"></path>144 </svg>145 </div>146 <!-- Theme (moon/gear blend) active -->147 <div class="tool active">148 <svg viewBox="0 0 24 24">149 <path d="M12 4a8 8 0 0 0 0 16 7 7 0 0 1 0-14z"></path>150 <path d="M12 6l1.5-2M12 18l1.5 2M6 12l-2 1.5M18 12l2-1.5"></path>151 </svg>152 </div>153 <!-- Settings -->154 <div class="tool">155 <svg viewBox="0 0 24 24">156 <circle cx="12" cy="12" r="3"></circle>157 <path d="M4 12h3M17 12h3M12 4v3M12 17v3M6.5 6.5l2 2M15.5 15.5l2 2M6.5 17.5l2-2M15.5 8.5l2-2"></path>158 </svg>159 </div>160 <!-- Backspace with box -->161 <div class="tool backspace">162 <svg viewBox="0 0 28 20">163 <rect x="6" y="2" width="20" height="16" rx="3"></rect>164 <path d="M10 6l8 8M18 6l-8 8"></path>165 </svg>166 </div>167 </div>168 169 <!-- Keypad Grid -->170 <div class="keypad">171 <div class="key action">C</div>172 <div class="key operator">( )</div>173 <div class="key operator">%</div>174 <div class="key operator">÷</div>175 176 <div class="key">7</div>177 <div class="key">8</div>178 <div class="key">9</div>179 <div class="key operator">×</div>180 181 <div class="key">4</div>182 <div class="key">5</div>183 <div class="key">6</div>184 <div class="key operator">−</div>185 186 <div class="key">1</div>187 <div class="key">2</div>188 <div class="key">3</div>189 <div class="key operator">+</div>190 191 <div class="key">0</div>192 <div class="key small">00</div>193 <div class="key">.</div>194 <div class="key equals">=</div>195 </div>196 197 <!-- Bottom gesture bar -->198 <div class="gesture"></div>199 200</div>201</body>202</html>