GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Currency Plus UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 color: #222;14 }15 /* Status Bar */16 .status-bar {17 height: 100px;18 padding: 0 36px;19 display: flex;20 align-items: center;21 justify-content: space-between;22 box-sizing: border-box;23 color: #2b2b2b;24 font-size: 44px;25 }26 .status-icons {27 display: flex;28 gap: 26px;29 align-items: center;30 }31 .sb-icon {32 width: 34px;33 height: 34px;34 border-radius: 50%;35 border: 3px solid #777;36 }37 38 /* App Bar */39 .app-bar {40 height: 120px;41 border-bottom: 1px solid #e6e6e6;42 display: flex;43 align-items: center;44 padding: 0 32px;45 box-sizing: border-box;46 }47 .app-title {48 flex: 1;49 text-align: center;50 font-size: 48px;51 letter-spacing: 1px;52 color: #111;53 }54 .hamburger, .search-btn {55 width: 96px;56 height: 96px;57 display: flex;58 align-items: center;59 justify-content: center;60 }61 .hamburger svg, .search-btn svg { width: 48px; height: 48px; fill: none; stroke: #222; stroke-width: 8; }62 63 /* Updated text */64 .updated {65 text-align: center;66 color: #8a8a8a;67 font-size: 38px;68 padding: 18px 0 8px;69 border-bottom: 1px solid #efefef;70 }71 72 /* Currency list */73 .list {74 width: 100%;75 }76 .row {77 display: flex;78 align-items: center;79 padding: 26px 36px;80 height: 130px;81 box-sizing: border-box;82 border-bottom: 1px solid #f0f0f0;83 }84 .row.header {85 background: #ecf3ff;86 }87 .flag {88 width: 110px;89 height: 72px;90 background: #E0E0E0;91 border: 1px solid #BDBDBD;92 border-radius: 8px;93 display: flex;94 align-items: center;95 justify-content: center;96 color: #6a6a6a;97 font-size: 26px;98 margin-right: 26px;99 }100 .code {101 font-size: 56px;102 color: #1f1f1f;103 display: flex;104 align-items: center;105 gap: 16px;106 }107 .code small {108 display: inline-flex;109 width: 0;110 height: 0;111 border-left: 12px solid transparent;112 border-right: 12px solid transparent;113 border-top: 16px solid #777;114 transform: translateY(6px);115 }116 .spacer {117 flex: 1;118 }119 .value {120 font-size: 64px;121 color: #4a4a4a;122 width: 110px;123 text-align: right;124 margin-right: 18px;125 }126 .chart-icon {127 width: 58px;128 height: 58px;129 display: inline-flex;130 align-items: center;131 justify-content: center;132 }133 .chart-icon svg { width: 52px; height: 52px; stroke: #9b9b9b; stroke-width: 8; fill: none; }134 135 /* Keypad */136 .keypad {137 position: absolute;138 left: 0;139 right: 0;140 bottom: 260px; /* room for ad + nav bar */141 padding: 20px 24px 0;142 box-sizing: border-box;143 }144 .grid {145 display: grid;146 grid-template-columns: repeat(4, 1fr);147 grid-auto-rows: 200px;148 gap: 28px;149 }150 .btn {151 border: 2px solid #e2e2e2;152 border-radius: 36px;153 background: #fafafa;154 display: flex;155 align-items: center;156 justify-content: center;157 font-size: 88px;158 color: #333;159 box-shadow: inset 0 1px 0 rgba(0,0,0,0.03);160 }161 .btn.secondary {162 color: #d07a5b;163 font-weight: 600;164 }165 .btn svg { width: 90px; height: 90px; stroke: #6b6b6b; stroke-width: 10; fill: none; }166 .btn.smalltxt { font-size: 70px; }167 .btn-stack {168 display: flex;169 flex-direction: column;170 align-items: center;171 justify-content: center;172 color: #cc7a48;173 gap: 20px;174 }175 .btn-stack div { font-size: 86px; line-height: 1; }176 .minus { font-size: 86px; margin-top: -20px; }177 .ops { font-size: 86px; }178 179 /* Ad Banner */180 .ad {181 position: absolute;182 left: 0;183 right: 0;184 bottom: 90px;185 height: 150px;186 border-top: 1px solid #e8e8e8;187 background: #E0E0E0;188 border-bottom: 1px solid #BDBDBD;189 display: flex;190 align-items: center;191 justify-content: center;192 color: #707070;193 font-size: 36px;194 }195 /* Navigation pill */196 .nav-pill {197 position: absolute;198 left: 50%;199 transform: translateX(-50%);200 bottom: 28px;201 width: 420px;202 height: 12px;203 background: #c9c9c9;204 border-radius: 10px;205 }206</style>207</head>208<body>209<div id="render-target">210 <!-- Status Bar -->211 <div class="status-bar">212 <div style="font-weight:600;">8:24</div>213 <div class="status-icons">214 <div class="sb-icon"></div>215 <div class="sb-icon"></div>216 </div>217 </div>218 219 <!-- App Bar -->220 <div class="app-bar">221 <div class="hamburger" aria-label="menu">222 <svg viewBox="0 0 24 24">223 <path d="M3 6h18M3 12h18M3 18h18"></path>224 </svg>225 </div>226 <div class="app-title">227 CURRENCY <strong>PLUS</strong>228 </div>229 <div class="search-btn" aria-label="search">230 <svg viewBox="0 0 24 24">231 <circle cx="10" cy="10" r="7"></circle>232 <path d="M15 15l6 6"></path>233 </svg>234 </div>235 </div>236 237 <!-- Updated Text -->238 <div class="updated">Updated: 8:21, AM Oct 31, 2023</div>239 240 <!-- List -->241 <div class="list">242 <div class="row header">243 <div class="flag">[EU Flag]</div>244 <div class="code">EUR <small></small></div>245 <div class="spacer"></div>246 </div>247 248 <div class="row">249 <div class="flag">[US Flag]</div>250 <div class="code">USD <small></small></div>251 <div class="spacer"></div>252 <div class="value">0</div>253 <div class="chart-icon">254 <svg viewBox="0 0 24 24">255 <path d="M3 20V4M3 20h18M6 14l4-4 4 3 3-6"></path>256 </svg>257 </div>258 </div>259 260 <div class="row">261 <div class="flag">[MX Flag]</div>262 <div class="code">MXN <small></small></div>263 <div class="spacer"></div>264 <div class="value">0</div>265 <div class="chart-icon">266 <svg viewBox="0 0 24 24">267 <path d="M3 20V4M3 20h18M6 14l4-4 4 3 3-6"></path>268 </svg>269 </div>270 </div>271 272 <div class="row">273 <div class="flag">[CA Flag]</div>274 <div class="code">CAD <small></small></div>275 <div class="spacer"></div>276 <div class="value">0</div>277 <div class="chart-icon">278 <svg viewBox="0 0 24 24">279 <path d="M3 20V4M3 20h18M6 14l4-4 4 3 3-6"></path>280 </svg>281 </div>282 </div>283 284 <div class="row">285 <div class="flag">[CU Flag]</div>286 <div class="code">CUP <small></small></div>287 <div class="spacer"></div>288 <div class="value">0</div>289 <div class="chart-icon">290 <svg viewBox="0 0 24 24">291 <path d="M3 20V4M3 20h18M6 14l4-4 4 3 3-6"></path>292 </svg>293 </div>294 </div>295 296 <div class="row">297 <div class="flag">[JP Flag]</div>298 <div class="code">JPY <small></small></div>299 <div class="spacer"></div>300 <div class="value">0</div>301 <div class="chart-icon">302 <svg viewBox="0 0 24 24">303 <path d="M3 20V4M3 20h18M6 14l4-4 4 3 3-6"></path>304 </svg>305 </div>306 </div>307 308 <div class="row">309 <div class="flag">[UK Flag]</div>310 <div class="code">GBP <small></small></div>311 <div class="spacer"></div>312 <div class="value">0</div>313 <div class="chart-icon">314 <svg viewBox="0 0 24 24">315 <path d="M3 20V4M3 20h18M6 14l4-4 4 3 3-6"></path>316 </svg>317 </div>318 </div>319 </div>320 321 <!-- Keypad -->322 <div class="keypad">323 <div class="grid">324 <div class="btn secondary">C</div>325 <div class="btn">7</div>326 <div class="btn">8</div>327 <div class="btn">9</div>328 329 <div class="btn" title="refresh">330 <svg viewBox="0 0 24 24">331 <path d="M4 4v6h6M20 20v-6h-6"></path>332 <path d="M20 9A8 8 0 1 0 10 20"></path>333 </svg>334 </div>335 <div class="btn">4</div>336 <div class="btn">5</div>337 <div class="btn">6</div>338 339 <div class="btn btn-stack">340 <div>+</div>341 <div class="minus">−</div>342 </div>343 <div class="btn">1</div>344 <div class="btn">2</div>345 <div class="btn">3</div>346 347 <div class="btn btn-stack">348 <div class="ops">×</div>349 <div class="ops">÷</div>350 </div>351 <div class="btn">0</div>352 <div class="btn">.</div>353 <div class="btn" title="backspace">354 <svg viewBox="0 0 24 24">355 <path d="M10 6h10v12H10L4 12l6-6z"></path>356 <path d="M13 9l6 6M19 9l-6 6"></path>357 </svg>358 </div>359 </div>360 </div>361 362 <!-- Ad Banner -->363 <div class="ad">[IMG: Insurance Advertisement Banner]</div>364 365 <!-- Navigation Pill -->366 <div class="nav-pill"></div>367</div>368</body>369</html>