GD-ML/AndroidCode

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: #ffffff;14  }15 16  /* Status bar */17  .status-bar {18    height: 80px;19    background: #0a1418;20    color: #e6ecef;21    display: flex;22    align-items: center;23    justify-content: space-between;24    padding: 0 28px;25    font-size: 34px;26    letter-spacing: 0.5px;27  }28  .status-icons {29    display: flex;30    align-items: center;31    gap: 22px;32  }33  .status-icons svg { fill: none; stroke: #cde1e8; stroke-width: 3; }34 35  /* App bar */36  .app-bar {37    height: 120px;38    background: #0c1c21;39    display: flex;40    align-items: center;41    padding: 0 28px;42    box-sizing: border-box;43  }44  .left-actions, .right-actions { display: flex; align-items: center; }45  .left-actions { gap: 28px; }46  .right-actions { margin-left: auto; gap: 32px; }47  .app-title { font-size: 52px; font-weight: 600; color: #e8f2f6; }48 49  .app-icon svg { width: 52px; height: 52px; stroke: #cfe5eb; fill: none; stroke-width: 4; }50 51  /* Display area */52  .display-area {53    height: 540px;54    background: #0a191e;55    box-sizing: border-box;56    padding: 60px 36px 0 36px;57  }58  .expression {59    height: 340px;60    display: flex;61    align-items: flex-end;62    justify-content: flex-end;63    position: relative;64    color: #ffffff;65    font-size: 170px;66    letter-spacing: 4px;67  }68  .display-text {69    border-bottom: 8px solid #d34b4b;70    padding-bottom: 10px;71    line-height: 1;72  }73  .cursor {74    width: 6px;75    height: 180px;76    background: #cfe5eb;77    margin-left: 16px;78    align-self: center;79  }80  .deg-label {81    margin-top: 40px;82    color: #9fb1b6;83    font-size: 40px;84  }85 86  /* Keypad */87  .keypad {88    margin-top: 10px;89    display: grid;90    grid-template-columns: repeat(4, 1fr);91    grid-auto-rows: 215px;92    border-top: 1px solid #1e3b44;93  }94  .key {95    background: #142a31;96    border-right: 1px solid #1e3b44;97    border-bottom: 1px solid #1e3b44;98    display: flex;99    align-items: center;100    justify-content: center;101    font-size: 92px;102    color: #ffffff;103    user-select: none;104  }105  .key.func { color: #68ff67; font-weight: 500; }106  .key.op { color: #ffec59; font-weight: 500; }107  .key.clear { color: #ff6b6b; font-weight: 600; }108 109  .small-text { font-size: 70px; }110  .fraction {111    display: flex; 112    flex-direction: column; 113    align-items: center; 114    gap: 12px;115    line-height: 1;116  }117  .fraction .bar { width: 80px; height: 6px; background: #68ff67; border-radius: 3px; }118 119  /* Ad banner */120  .ad-banner {121    height: 250px;122    background: #0a181c;123    border-top: 1px solid #1f3941;124    padding: 24px 28px;125    box-sizing: border-box;126    display: flex;127    align-items: center;128    gap: 26px;129    color: #d6e0e4;130  }131  .ad-image {132    width: 170px; height: 170px;133    background: #E0E0E0; border: 1px solid #BDBDBD;134    display: flex; align-items: center; justify-content: center;135    color: #757575; font-size: 26px; text-align: center;136  }137  .ad-content { flex: 1; }138  .ad-title { font-size: 40px; margin-bottom: 8px; color: #e8f2f6; }139  .ad-sub { font-size: 32px; color: #b9c8cd; }140  .ad-actions {141    display: flex; align-items: center; gap: 20px;142  }143  .sponsored { color: #9fb1b6; font-size: 28px; }144  .open-btn {145    background: #1e6b80;146    color: #ffffff;147    padding: 26px 40px;148    border-radius: 18px;149    font-size: 36px;150  }151 152  /* Bottom gesture bar */153  .gesture {154    position: absolute;155    bottom: 16px;156    left: 50%;157    transform: translateX(-50%);158    width: 300px;159    height: 12px;160    background: #2e3f45;161    border-radius: 12px;162    opacity: 0.9;163  }164</style>165</head>166<body>167<div id="render-target">168 169  <!-- Status Bar -->170  <div class="status-bar">171    <div>12:56</div>172    <div class="status-icons">173      <!-- WiFi -->174      <svg width="44" height="44" viewBox="0 0 44 44">175        <path d="M4 15c11-9 25-9 36 0" />176        <path d="M10 21c7-6 17-6 24 0" />177        <path d="M16 27c4-3 8-3 12 0" />178        <circle cx="22" cy="32" r="2.8" fill="#cde1e8"></circle>179      </svg>180      <!-- Battery -->181      <svg width="56" height="44" viewBox="0 0 56 44">182        <rect x="6" y="10" width="40" height="24" rx="3" ry="3" />183        <rect x="48" y="16" width="6" height="12" rx="2" ry="2" />184        <rect x="10" y="14" width="32" height="16" fill="#cde1e8" stroke="none"></rect>185      </svg>186    </div>187  </div>188 189  <!-- App Bar -->190  <div class="app-bar">191    <div class="left-actions">192      <div class="app-icon">193        <!-- Hamburger -->194        <svg viewBox="0 0 64 64">195          <line x1="8" y1="16" x2="56" y2="16"></line>196          <line x1="8" y1="32" x2="56" y2="32"></line>197          <line x1="8" y1="48" x2="56" y2="48"></line>198        </svg>199      </div>200      <div class="app-title">Calculator</div>201    </div>202    <div class="right-actions">203      <!-- Clipboard -->204      <div class="app-icon">205        <svg viewBox="0 0 64 64">206          <rect x="18" y="14" width="28" height="40" rx="4" ry="4"></rect>207          <rect x="22" y="8" width="20" height="10" rx="3" ry="3"></rect>208        </svg>209      </div>210      <!-- Overflow -->211      <div class="app-icon">212        <svg viewBox="0 0 64 64">213          <circle cx="32" cy="16" r="5" fill="#cfe5eb" stroke="none"></circle>214          <circle cx="32" cy="32" r="5" fill="#cfe5eb" stroke="none"></circle>215          <circle cx="32" cy="48" r="5" fill="#cfe5eb" stroke="none"></circle>216        </svg>217      </div>218    </div>219  </div>220 221  <!-- Display -->222  <div class="display-area">223    <div class="expression">224      <div class="display-text">100−</div>225      <div class="cursor"></div>226    </div>227    <div class="deg-label">Deg</div>228  </div>229 230  <!-- Keypad -->231  <div class="keypad">232    <!-- Row 1 -->233    <div class="key func">234      <div class="fraction">235        <div class="small-text">1</div>236        <div class="bar"></div>237        <div class="small-text">x</div>238      </div>239    </div>240    <div class="key func">x<sup class="small-text">y</sup></div>241    <div class="key func">( )</div>242    <div class="key func">243      <svg width="92" height="92" viewBox="0 0 92 92" style="stroke:#68ff67; fill:none; stroke-width:6;">244        <path d="M80 46 L56 20 H20 v52 h36 z" />245        <line x1="43" y1="36" x2="63" y2="56"></line>246        <line x1="63" y1="36" x2="43" y2="56"></line>247      </svg>248    </div>249    <!-- Row 2 -->250    <div class="key clear">C</div>251    <div class="key op">%</div>252    <div class="key op">±</div>253    <div class="key op">÷</div>254    <!-- Row 3 -->255    <div class="key">7</div>256    <div class="key">8</div>257    <div class="key">9</div>258    <div class="key op">×</div>259    <!-- Row 4 -->260    <div class="key">4</div>261    <div class="key">5</div>262    <div class="key">6</div>263    <div class="key op">−</div>264    <!-- Row 5 -->265    <div class="key">1</div>266    <div class="key">2</div>267    <div class="key">3</div>268    <div class="key op">+</div>269    <!-- Row 6 -->270    <div class="key">0</div>271    <div class="key">00</div>272    <div class="key">.</div>273    <div class="key op">=</div>274  </div>275 276  <!-- Ad Banner -->277  <div class="ad-banner">278    <div class="ad-image">[IMG: Rakhi Product]</div>279    <div class="ad-content">280      <div class="ad-title">Sneh Multicolour Bead Rakhi Set Of...</div>281      <div class="ad-sub">₹299 Embrace the essence of togetherness</div>282    </div>283    <div class="ad-actions">284      <div class="sponsored">Sponsored</div>285      <div class="open-btn">Open</div>286    </div>287  </div>288 289  <!-- Gesture bar -->290  <div class="gesture"></div>291 292</div>293</body>294</html>