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>Citizen Calculator UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #1c1d23;13 font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;14 color: #fff;15 }16 17 /* Top status bar */18 .statusbar {19 height: 110px;20 background: #000;21 display: flex;22 align-items: center;23 justify-content: space-between;24 padding: 0 40px;25 box-sizing: border-box;26 font-size: 44px;27 letter-spacing: 0.5px;28 }29 .status-right {30 display: flex; align-items: center; gap: 26px;31 }32 .status-icon svg { display: block; }33 34 /* App bar */35 .appbar {36 height: 140px;37 background: #3b3a43;38 display: flex;39 align-items: center;40 padding: 0 28px;41 box-sizing: border-box;42 gap: 24px;43 }44 .menu-btn {45 width: 90px; height: 90px; border-radius: 12px;46 display: flex; align-items: center; justify-content: center;47 background: #444650;48 }49 .title {50 font-size: 64px; font-weight: 500; letter-spacing: 0.5px;51 flex: 1;52 }53 .icon-btn {54 width: 100px; height: 90px; border-radius: 12px;55 background: #4c515c;56 display: flex; align-items: center; justify-content: center;57 }58 .ads-badge {59 width: 100px; height: 90px; border-radius: 12px;60 background: #5a5f6a;61 display: flex; align-items: center; justify-content: center;62 font-size: 30px; font-weight: 700;63 }64 65 /* Display screen */66 .display-wrap {67 background: #2b2c36;68 padding: 0 16px 16px 16px;69 }70 .display {71 position: relative;72 height: 360px;73 background: #88a97a;74 border: 16px solid #bdbdbd;75 border-radius: 6px;76 box-sizing: border-box;77 color: #111;78 }79 .digital {80 font-family: "Courier New", monospace;81 font-weight: 700;82 letter-spacing: 6px;83 }84 .display .small-left {85 position: absolute; top: 18px; left: 26px;86 font-size: 58px;87 }88 .display .big-right {89 position: absolute; right: 40px; bottom: 24px;90 font-size: 200px; font-weight: 700;91 }92 .display .eq-small {93 position: absolute; right: 26px; top: 140px;94 font-size: 62px; color: #2f2f2f;95 }96 97 /* Function strip buttons */98 .func-strip {99 height: 120px;100 background: #2b2c36;101 display: flex; align-items: center;102 gap: 18px; padding: 0 16px; box-sizing: border-box;103 }104 .func-btn {105 height: 96px; border-radius: 8px;106 display: flex; align-items: center; justify-content: center;107 font-weight: 800;108 box-shadow: inset 0 6px 10px rgba(255,255,255,0.15), inset 0 -10px 16px rgba(0,0,0,0.5);109 }110 .btn-check { width: 340px; background: linear-gradient(#4f8cab, #2f6d8f); font-size: 52px; }111 .btn-correct { width: 340px; background: linear-gradient(#6aa6c6, #3e7fa2); font-size: 38px; font-weight: 700; }112 .btn-correct span { font-size: 28px; margin-left: 10px; opacity: 0.9; }113 .btn-onac { width: 220px; background: linear-gradient(#2ec08f, #168f66); font-size: 40px; font-weight: 900; }114 115 /* Keypad grid */116 .keypad {117 background: #2b2c36;118 padding: 8px 8px 0 8px;119 box-sizing: border-box;120 display: grid;121 grid-template-columns: 200px 220px 220px 220px 220px;122 grid-template-rows: 200px 200px 200px 200px 200px;123 gap: 8px;124 }125 .key {126 border-radius: 12px;127 display: flex; align-items: center; justify-content: center;128 font-size: 110px; font-weight: 700; color: #fff;129 background: radial-gradient(ellipse at top, #4a4f55 0%, #2a2e33 60%, #1f2328 100%);130 box-shadow: inset 0 14px 24px rgba(255,255,255,0.06),131 inset 0 -18px 32px rgba(0,0,0,0.6);132 border: 2px solid #3c4046;133 }134 .key.light {135 background: linear-gradient(#cfd5d8, #9aa1a6);136 color: #111; font-size: 70px; border: 2px solid #8e9499;137 box-shadow: inset 0 14px 24px rgba(255,255,255,0.25),138 inset 0 -18px 32px rgba(0,0,0,0.35);139 }140 .key.small { font-size: 84px; }141 .key.tall { grid-row: span 2; font-size: 140px; }142 143 /* Ad card */144 .ad-label {145 position: relative;146 height: 30px;147 margin-left: 8px;148 }149 .ad-label span {150 position: absolute; top: -12px; left: 0;151 background: #f7b34c; color: #000; font-weight: 700;152 padding: 6px 12px; border-top-left-radius: 6px; border-top-right-radius: 6px;153 font-size: 26px;154 }155 .adcard {156 background: #ffffff; color: #222;157 margin: 0 8px 0 8px;158 padding: 24px;159 border-radius: 6px;160 box-shadow: 0 2px 0 rgba(0,0,0,0.1);161 display: flex; align-items: flex-start; gap: 24px;162 }163 .ad-img {164 width: 120px; height: 120px;165 background: #E0E0E0; border: 1px solid #BDBDBD;166 display: flex; align-items: center; justify-content: center;167 color: #757575; font-size: 26px;168 }169 .ad-content { flex: 1; }170 .ad-title { font-size: 44px; font-weight: 700; color: #0b57d0; }171 .ad-stars { color: #bbb; font-size: 28px; letter-spacing: 6px; margin-top: 8px; }172 .ad-desc { font-size: 30px; color: #666; margin-top: 16px; }173 .install {174 width: 200px; align-self: center;175 background: #e6e6e6; color: #111; font-weight: 700;176 border-radius: 8px; text-align: center; padding: 20px 0; font-size: 32px;177 box-shadow: inset 0 6px 12px rgba(255,255,255,0.45), inset 0 -8px 12px rgba(0,0,0,0.15);178 }179 180 /* Gesture bar */181 .gesture {182 position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);183 width: 240px; height: 16px; background: #d6d6d6; border-radius: 10px;184 opacity: 0.75;185 }186</style>187</head>188<body>189<div id="render-target">190 191 <!-- Status Bar -->192 <div class="statusbar">193 <div>8:50</div>194 <div class="status-right">195 <div class="status-icon">196 <svg width="50" height="40" viewBox="0 0 50 40" fill="none">197 <path d="M5 28 C15 18,35 18,45 28" stroke="#fff" stroke-width="4" fill="none"/>198 <path d="M12 22 C20 16,30 16,38 22" stroke="#fff" stroke-width="4" fill="none" opacity="0.8"/>199 <circle cx="25" cy="28" r="2.5" fill="#fff"/>200 </svg>201 </div>202 <div class="status-icon">203 <svg width="54" height="40" viewBox="0 0 54 40" fill="none">204 <rect x="2" y="8" width="44" height="24" rx="4" stroke="#fff" stroke-width="4"/>205 <rect x="48" y="15" width="6" height="10" rx="2" fill="#fff"/>206 <rect x="6" y="12" width="28" height="16" fill="#fff"/>207 </svg>208 </div>209 </div>210 </div>211 212 <!-- App Bar -->213 <div class="appbar">214 <div class="menu-btn">215 <svg width="56" height="40" viewBox="0 0 56 40">216 <rect x="4" y="6" width="48" height="6" fill="#fff"/>217 <rect x="4" y="17" width="48" height="6" fill="#fff"/>218 <rect x="4" y="28" width="48" height="6" fill="#fff"/>219 </svg>220 </div>221 <div class="title">Citizen Calculator</div>222 <div class="icon-btn">223 <svg width="52" height="52" viewBox="0 0 52 52" fill="none">224 <path d="M10 10 h24 a8 8 0 0 1 8 8 v10 a8 8 0 0 1-8 8 H20 l-10 6 v-6 a8 8 0 0 1-8-8 V18 a8 8 0 0 1 8-8 z" stroke="#d7f2ea" stroke-width="3" fill="none"/>225 </svg>226 </div>227 <div class="ads-badge">ADS</div>228 </div>229 230 <!-- Display -->231 <div class="display-wrap">232 <div class="display">233 <div class="digital small-left">03</div>234 <div class="eq-small digital">=</div>235 <div class="digital big-right">123</div>236 </div>237 </div>238 239 <!-- Function Strip -->240 <div class="func-strip">241 <div class="func-btn btn-check">CHECK</div>242 <div class="func-btn btn-correct">CORRECT <span>DELETE</span></div>243 <div class="func-btn btn-onac">ON<br>AC</div>244 </div>245 246 <!-- Keypad -->247 <div class="keypad">248 249 <!-- Left column light keys -->250 <div class="key light">GT</div>251 <div class="key">7</div>252 <div class="key">8</div>253 <div class="key">9</div>254 <div class="key small">%</div>255 256 <div class="key light">MU</div>257 <div class="key">4</div>258 <div class="key">5</div>259 <div class="key">6</div>260 <div class="key">÷</div>261 262 <div class="key light">+/-</div>263 <div class="key">1</div>264 <div class="key">2</div>265 <div class="key">3</div>266 <div class="key">x</div>267 268 <div class="key light">√</div>269 <div class="key">0</div>270 <div class="key">00</div>271 <div class="key tall">+</div>272 <div class="key">-</div>273 274 <div class="key light">M+</div>275 <div class="key">M-</div>276 <div class="key">MR</div>277 <div class="key">.</div>278 <div class="key tall">=</div>279 </div>280 281 <!-- Ad label and card -->282 <div class="ad-label"><span>Ad</span></div>283 <div class="adcard">284 <div class="ad-img">[IMG: Ad App Icon]</div>285 <div class="ad-content">286 <div class="ad-title">Time Travel Today</div>287 <div class="ad-stars">★ ★ ★ ★ ★</div>288 <div class="ad-desc">See how you looked as baby, and how you'll look in 50 years.</div>289 </div>290 <div class="install">INSTALL</div>291 </div>292 293 <!-- Gesture bar -->294 <div class="gesture"></div>295</div>296</body>297</html>