GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Calculator UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #0d1a1f;13 color: #fff;14 }15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 100px;22 padding: 0 32px;23 box-sizing: border-box;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #e6e6e6;28 font-size: 42px;29 letter-spacing: 1px;30 }31 .status-icons {32 display: flex;33 align-items: center;34 gap: 26px;35 }36 .icon-wifi, .icon-battery {37 width: 48px; height: 34px;38 position: relative;39 }40 .icon-wifi::before, .icon-wifi::after {41 content: ""; position: absolute; left: 0; right: 0; margin: auto; border: 3px solid #cfd8dc; border-radius: 50%; }42 .icon-wifi::before { width: 36px; height: 20px; top: 2px; border-top-color:#cfd8dc; border-left-color:transparent; border-right-color:transparent; border-bottom-color:transparent; }43 .icon-wifi::after { width: 18px; height: 10px; top: 10px; border-top-color:#cfd8dc; border-left-color:transparent; border-right-color:transparent; border-bottom-color:transparent; }44 .icon-battery {45 border: 3px solid #cfd8dc; border-radius: 6px;46 }47 .icon-battery::after {48 content: ""; position: absolute; right: -10px; top: 10px; width: 10px; height: 14px; background: #cfd8dc; border-radius: 2px;49 }50 .icon-battery .level {51 position: absolute; left: 4px; top: 4px; right: 4px; bottom: 4px; background: #cfd8dc;52 }53 54 /* App bar */55 .app-bar {56 position: absolute;57 top: 100px;58 left: 0;59 width: 1080px;60 height: 160px;61 background: #102227;62 display: flex;63 align-items: center;64 padding: 0 28px;65 box-sizing: border-box;66 }67 .hamburger {68 width: 60px; height: 60px; margin-right: 24px; position: relative;69 }70 .hamburger span { position: absolute; left: 6px; right: 6px; height: 6px; background: #e6e6e6; border-radius: 3px; }71 .hamburger span:nth-child(1){ top: 10px; }72 .hamburger span:nth-child(2){ top: 26px; }73 .hamburger span:nth-child(3){ top: 42px; }74 .title {75 font-size: 64px; color: #e6e6e6; font-weight: 600; letter-spacing: 0.5px;76 }77 .bar-actions { margin-left: auto; display: flex; align-items: center; gap: 26px; }78 .icon-clipboard, .icon-more {79 width: 56px; height: 56px; position: relative;80 }81 .icon-clipboard {82 border: 3px solid #cfd8dc; border-radius: 8px;83 }84 .icon-clipboard::before {85 content: ""; position: absolute; top: -10px; left: 10px; right: 10px; height: 14px; border-radius: 6px; background: #cfd8dc;86 }87 .icon-more { display: flex; align-items: center; justify-content: space-between; padding: 0 18px; box-sizing: border-box; }88 .icon-more span {89 width: 10px; height: 10px; background: #cfd8dc; border-radius: 50%;90 }91 92 /* Display */93 .calc-display {94 position: absolute;95 top: 260px;96 left: 0;97 width: 1080px;98 height: 720px;99 padding: 40px;100 box-sizing: border-box;101 background: #0c171b;102 }103 .expression {104 position: absolute;105 right: 32px;106 top: 90px;107 font-size: 210px;108 color: #f3f3f3;109 letter-spacing: 6px;110 }111 .expression .cursor {112 display: inline-block;113 width: 2px; height: 220px; background: #e6e6e6; margin-left: 12px; vertical-align: middle;114 }115 .result-preview {116 position: absolute;117 right: 36px;118 bottom: 40px;119 font-size: 120px;120 color: #8f9aa0;121 }122 .deg-label {123 position: absolute;124 top: 980px;125 left: 40px;126 color: #9aa5aa;127 font-size: 50px;128 }129 130 /* Keypad grid */131 .keypad {132 position: absolute;133 top: 1050px;134 left: 0;135 width: 1080px;136 height: 1160px;137 display: grid;138 grid-template-columns: repeat(4, 1fr);139 grid-auto-rows: 193px;140 gap: 0;141 background: #122932;142 }143 .key {144 display: flex; align-items: center; justify-content: center;145 font-size: 120px; color: #ffffff;146 border-top: 1px solid #1c3a44;147 border-right: 1px solid #1c3a44;148 background: #152f38;149 }150 .key:nth-child(4n) { border-right: none; }151 .key.small { font-size: 90px; }152 .key.func { color: #66ff70; }153 .key.op { color: #ffe84d; }154 .key.clear { color: #ff8080; }155 .key.equals { color: #ffe84d; font-weight: 700; }156 .key.dot { font-size: 140px; }157 .backspace {158 position: relative; width: 80%; height: 60%;159 }160 .backspace::before {161 content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);162 width: 140px; height: 90px; border: 4px solid #ffffff; border-radius: 10px;163 }164 .backspace::after {165 content: "×"; position: absolute; left: 46px; top: 50%; transform: translateY(-50%); font-size: 90px; color: #ffffff;166 }167 168 /* Ad banner */169 .ad-banner {170 position: absolute;171 left: 0;172 bottom: 110px;173 width: 1080px;174 height: 190px;175 background: #0e1f24;176 border-top: 1px solid #243943;177 display: flex;178 align-items: center;179 padding: 0 40px;180 box-sizing: border-box;181 }182 .ad-text {183 flex: 1;184 }185 .ad-title {186 font-size: 46px; color: #d9d9d9; margin-bottom: 10px;187 }188 .ad-sub {189 font-size: 38px; color: #aab6bb;190 }191 .ad-right {192 width: 260px; display: flex; flex-direction: column; align-items: flex-end; gap: 16px;193 }194 .sponsored { font-size: 32px; color: #8fa0a7; }195 .ad-button {196 background: #2b77c4; color: #fff; font-size: 48px; padding: 24px 40px; border-radius: 26px;197 }198 199 /* Bottom handle */200 .home-handle {201 position: absolute;202 bottom: 42px;203 left: 50%;204 transform: translateX(-50%);205 width: 360px; height: 12px; background: #e6e6e6; border-radius: 6px; opacity: 0.9;206 }207</style>208</head>209<body>210<div id="render-target">211 <div class="status-bar">212 <div class="time">12:57</div>213 <div class="status-icons">214 <div class="icon-wifi"></div>215 <div class="icon-battery"><div class="level"></div></div>216 </div>217 </div>218 219 <div class="app-bar">220 <div class="hamburger">221 <span></span><span></span><span></span>222 </div>223 <div class="title">Calculator</div>224 <div class="bar-actions">225 <div class="icon-clipboard"></div>226 <div class="icon-more"><span></span><span></span><span></span></div>227 </div>228 </div>229 230 <div class="calc-display">231 <div class="expression">100-5<span class="cursor"></span></div>232 <div class="result-preview">95</div>233 </div>234 235 <div class="deg-label">Deg</div>236 237 <div class="keypad">238 <div class="key func small">1/x</div>239 <div class="key func small">x^y</div>240 <div class="key func small">( )</div>241 <div class="key small"><div class="backspace"></div></div>242 243 <div class="key clear small">C</div>244 <div class="key func small">%</div>245 <div class="key func small">±</div>246 <div class="key op small">÷</div>247 248 <div class="key">7</div>249 <div class="key">8</div>250 <div class="key">9</div>251 <div class="key op">×</div>252 253 <div class="key">4</div>254 <div class="key">5</div>255 <div class="key">6</div>256 <div class="key op">−</div>257 258 <div class="key">1</div>259 <div class="key">2</div>260 <div class="key">3</div>261 <div class="key op">+</div>262 263 <div class="key">0</div>264 <div class="key">00</div>265 <div class="key dot">.</div>266 <div class="key equals">=</div>267 </div>268 269 <div class="ad-banner">270 <div class="ad-text">271 <div class="ad-title">Sneh Multicolour Bead Rakhi Set Of...</div>272 <div class="ad-sub">₹299 Embrace the essence of toge...</div>273 </div>274 <div class="ad-right">275 <div class="sponsored">Sponsored</div>276 <div class="ad-button">Open</div>277 </div>278 </div>279 280 <div class="home-handle"></div>281</div>282</body>283</html>