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>Currency Converter 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;11 position: relative; overflow: hidden;12 background: #0E0E0F;13 color: #FFFFFF;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute; top: 0; left: 0; right: 0;19 height: 120px; background: #000000;20 padding: 0 36px; display: flex; align-items: center; justify-content: space-between;21 box-sizing: border-box;22 font-weight: 600; font-size: 36px;23 }24 .status-icons { display: flex; align-items: center; gap: 28px; }25 .icon-rect { width: 44px; height: 30px; border: 3px solid #fff; border-radius: 4px; position: relative; }26 .icon-rect::after { content: ""; position: absolute; right: -8px; top: 10px; width: 6px; height: 10px; background: #fff; border-radius: 2px; }27 .dot { width: 16px; height: 16px; background: #fff; border-radius: 50%; }28 .screen-icon {29 width: 40px; height: 30px; border: 3px solid #fff; border-radius: 6px; position: relative;30 }31 .screen-icon::after {32 content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);33 width: 14px; height: 6px; background: #fff; border-radius: 2px;34 }35 36 /* App bar */37 .app-bar {38 position: absolute; top: 120px; left: 0; right: 0;39 height: 170px; background: #1F1F1F;40 display: flex; align-items: center; padding: 0 24px; box-sizing: border-box;41 }42 .app-actions { width: 96px; display: flex; align-items: center; justify-content: center; }43 .app-title {44 flex: 1; padding: 8px 12px; box-sizing: border-box;45 }46 .app-title h1 {47 margin: 0; font-size: 54px; letter-spacing: 1px; font-weight: 800;48 }49 .app-title .subtitle {50 margin-top: 8px; font-size: 26px; color: #B0BEC5;51 }52 53 /* Top content (blue area) */54 .top-panel {55 position: absolute; top: 290px; left: 0; right: 0;56 height: 570px;57 background: linear-gradient(180deg, #516D8D 0%, #3E5C79 100%);58 border-top: 1px solid rgba(255,255,255,0.06);59 }60 .panel-header {61 position: absolute; top: 10px; left: 22px; font-size: 26px; color: #CFD8DC;62 display: flex; align-items: center; gap: 14px;63 }64 .panel-header .mini-icons { display: inline-flex; align-items: center; gap: 10px; }65 .mini-icons svg { width: 22px; height: 22px; opacity: 0.8; }66 67 .currency-row {68 display: flex; align-items: center;69 padding: 54px 28px; box-sizing: border-box;70 }71 .currency-row + .currency-row { margin-top: -8px; }72 .search-icon { width: 84px; height: 84px; margin-right: 22px; }73 .code-block { flex: 1; display: flex; align-items: center; gap: 16px; }74 .code-text { font-size: 50px; font-weight: 800; }75 .flag {76 width: 64px; height: 40px; background: #E0E0E0; border: 1px solid #BDBDBD;77 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 18px;78 }79 .desc { font-size: 28px; color: #B0BEC5; margin-top: 8px; }80 .controls { display: flex; align-items: center; gap: 18px; margin-left: 20px; }81 .controls .chevron { width: 26px; height: 26px; }82 .controls .refresh { width: 32px; height: 32px; opacity: 0.75; }83 .value {84 width: 140px; text-align: right; font-size: 120px; font-weight: 700; color: #FFFFFF;85 margin-right: 18px;86 }87 88 /* Action bar tiles */89 .action-bar {90 position: absolute; top: 860px; left: 0; right: 0;91 height: 160px; display: grid; grid-template-columns: repeat(4, 1fr);92 border-top: 1px solid rgba(255,255,255,0.06);93 }94 .action-tile {95 background: #233B52;96 border-right: 1px solid rgba(255,255,255,0.08);97 display: flex; align-items: center; justify-content: center; gap: 16px;98 font-size: 28px; color: #CFD8DC;99 }100 .action-tile svg { width: 30px; height: 30px; fill: none; stroke: #CFD8DC; stroke-width: 3; }101 102 /* Keypad */103 .keypad {104 position: absolute; top: 1020px; left: 0; right: 0;105 height: 980px; display: grid; grid-template-columns: repeat(4, 1fr);106 grid-auto-rows: 196px; background: #2B3136;107 }108 .key {109 border: 1px solid rgba(255,255,255,0.08);110 display: flex; align-items: center; justify-content: center;111 font-size: 88px; color: #FFFFFF; background: #5D666D;112 }113 .key.dark { background: #444B51; }114 .key.op { background: #3A3F44; }115 .key.red { background: #B5433D; }116 .key.small { font-size: 38px; font-weight: 700; }117 .key-label { font-size: 70px; font-weight: 700; }118 119 /* Dropdown list overlay */120 .dropdown {121 position: absolute; top: 520px; left: 120px;122 width: 520px; height: 1550px; background: #173E58; border-radius: 6px;123 box-shadow: 0 8px 24px rgba(0,0,0,0.5); overflow: hidden;124 }125 .dd-item {126 display: flex; align-items: center; justify-content: space-between;127 padding: 22px; box-sizing: border-box; border-bottom: 1px solid rgba(255,255,255,0.08);128 color: #FFFFFF;129 }130 .dd-left { display: flex; flex-direction: column; }131 .dd-code { font-size: 40px; font-weight: 800; letter-spacing: 1px; }132 .dd-name { font-size: 26px; color: #B0BEC5; margin-top: 6px; }133 .dd-flag {134 width: 60px; height: 36px; background: #E0E0E0; border: 1px solid #BDBDBD;135 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 14px;136 }137 138 /* Ad banner */139 .ad-banner {140 position: absolute; bottom: 84px; left: 0; right: 0;141 height: 190px; background: #FFFFFF; color: #333; display: flex; align-items: center; justify-content: space-between;142 padding: 20px 30px; box-sizing: border-box;143 }144 .ad-left {145 display: flex; align-items: center; gap: 18px;146 }147 .ad-img {148 width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;149 display: flex; align-items: center; justify-content: center; color: #757575;150 }151 .ad-btn {152 background: #2EBB77; color: #fff; font-size: 36px; font-weight: 700;153 padding: 18px 36px; border-radius: 54px;154 }155 156 /* Home indicator */157 .home-indicator {158 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);159 width: 420px; height: 12px; background: #E0E0E0; border-radius: 6px; opacity: 0.8;160 }161</style>162</head>163<body>164<div id="render-target">165 166 <!-- Status Bar -->167 <div class="status-bar">168 <div>11:18</div>169 <div class="status-icons">170 <div class="screen-icon"></div>171 <div class="dot"></div>172 <div class="icon-rect"></div>173 </div>174 </div>175 176 <!-- App Bar -->177 <div class="app-bar">178 <div class="app-actions">179 <!-- Hamburger -->180 <svg width="60" height="60" viewBox="0 0 60 60">181 <rect x="8" y="14" width="44" height="6" fill="#FFFFFF"></rect>182 <rect x="8" y="27" width="44" height="6" fill="#FFFFFF"></rect>183 <rect x="8" y="40" width="44" height="6" fill="#FFFFFF"></rect>184 </svg>185 </div>186 <div class="app-title">187 <h1>CURRENCY CONVERTER</h1>188 <div class="subtitle">Updated on December 14, 2023 10:48 AM</div>189 </div>190 <div class="app-actions">191 <!-- Kebab -->192 <svg width="40" height="60" viewBox="0 0 24 60">193 <circle cx="12" cy="16" r="3" fill="#FFFFFF"></circle>194 <circle cx="12" cy="30" r="3" fill="#FFFFFF"></circle>195 <circle cx="12" cy="44" r="3" fill="#FFFFFF"></circle>196 </svg>197 </div>198 </div>199 200 <!-- Top Blue Panel -->201 <div class="top-panel">202 <div class="panel-header">203 <span>EN</span>204 <div class="mini-icons">205 <!-- tiny screen sync icons -->206 <svg viewBox="0 0 24 24"><path d="M3 12h6M6 9v6" stroke="#CFD8DC"/></svg>207 <svg viewBox="0 0 24 24"><path d="M12 4a8 8 0 1 1-6 3" stroke="#CFD8DC" fill="none"/><path d="M3 7l3 1-1-3" stroke="#CFD8DC" fill="none"/></svg>208 </div>209 </div>210 211 <!-- Row 1 -->212 <div class="currency-row">213 <!-- Search icon -->214 <svg class="search-icon" viewBox="0 0 100 100">215 <circle cx="38" cy="38" r="26" stroke="#E74C3C" stroke-width="10" fill="none"></circle>216 <line x1="58" y1="58" x2="90" y2="90" stroke="#E74C3C" stroke-width="10" stroke-linecap="round"></line>217 </svg>218 219 <div style="display:flex; flex-direction:column; flex:1">220 <div class="code-block">221 <div class="code-text">GBP</div>222 <div class="flag">UK Flag</div>223 <div class="controls">224 <!-- Chevron down -->225 <svg class="chevron" viewBox="0 0 24 24">226 <path d="M5 9l7 7 7-7" stroke="#F0625D" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round" />227 </svg>228 <!-- refresh -->229 <svg class="refresh" viewBox="0 0 24 24">230 <path d="M12 5a7 7 0 1 1-6 4" stroke="#CFD8DC" fill="none" stroke-width="2"/>231 <path d="M3 9l3 1-1-3" stroke="#CFD8DC" fill="none" stroke-width="2"/>232 </svg>233 </div>234 </div>235 <div class="desc">British Pound Sterling</div>236 </div>237 238 <div class="value">0</div>239 </div>240 241 <!-- Row 2 -->242 <div class="currency-row">243 <svg class="search-icon" viewBox="0 0 100 100">244 <circle cx="38" cy="38" r="26" stroke="#4DA3E5" stroke-width="10" fill="none"></circle>245 <line x1="58" y1="58" x2="90" y2="90" stroke="#4DA3E5" stroke-width="10" stroke-linecap="round"></line>246 </svg>247 248 <div style="display:flex; flex-direction:column; flex:1">249 <div class="code-block">250 <div class="code-text">CCY</div>251 <div class="flag">Flag</div>252 <div class="controls">253 <svg class="chevron" viewBox="0 0 24 24">254 <path d="M5 9l7 7 7-7" stroke="#89A3BF" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round" />255 </svg>256 <svg class="refresh" viewBox="0 0 24 24">257 <path d="M12 5a7 7 0 1 1-6 4" stroke="#CFD8DC" fill="none" stroke-width="2"/>258 <path d="M3 9l3 1-1-3" stroke="#CFD8DC" fill="none" stroke-width="2"/>259 </svg>260 </div>261 </div>262 <div class="desc">Select Currency</div>263 </div>264 265 <div class="value">0</div>266 </div>267 </div>268 269 <!-- Action Tiles -->270 <div class="action-bar">271 <div class="action-tile">272 <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 1-5 5 2 7-7-4-7 4 2-7-5-5 7-1z" stroke-linejoin="round"/></svg>273 <span>CURRENCY FAVORITES</span>274 </div>275 <div class="action-tile">276 <svg viewBox="0 0 24 24"><path d="M4 12a8 8 0 0 1 14-5M20 12a8 8 0 0 1-14 5" /></svg>277 <span>CURRENCY ROTATE</span>278 </div>279 <div class="action-tile">280 <svg viewBox="0 0 24 24"><path d="M3 12h18M12 3v18" /></svg>281 <span>RATES & UPDATES</span>282 </div>283 <div class="action-tile">284 <svg viewBox="0 0 24 24"><path d="M6 6h12v12H6z" /></svg>285 <span>TOOLS</span>286 </div>287 </div>288 289 <!-- Calculator keypad -->290 <div class="keypad">291 <div class="key small dark">CCY</div>292 <div class="key small dark">CLR</div>293 <div class="key small dark">DEL</div>294 <div class="key op">÷</div>295 296 <div class="key">7</div>297 <div class="key">8</div>298 <div class="key">9</div>299 <div class="key op">×</div>300 301 <div class="key dark">4</div>302 <div class="key dark">5</div>303 <div class="key dark">6</div>304 <div class="key op">−</div>305 306 <div class="key">1</div>307 <div class="key">2</div>308 <div class="key">3</div>309 <div class="key op">+</div>310 311 <div class="key dark">0</div>312 <div class="key dark">.</div>313 <div class="key red">=</div>314 <div class="key op"></div>315 </div>316 317 <!-- Dropdown currency list overlay -->318 <div class="dropdown">319 <div class="dd-item">320 <div class="dd-left">321 <div class="dd-code">LRD</div>322 <div class="dd-name">Liberian Dollar</div>323 </div>324 <div class="dd-flag">Flag</div>325 </div>326 <div class="dd-item">327 <div class="dd-left">328 <div class="dd-code">LSL</div>329 <div class="dd-name">Lesotho Loti</div>330 </div>331 <div class="dd-flag">Flag</div>332 </div>333 <div class="dd-item">334 <div class="dd-left">335 <div class="dd-code">LTL</div>336 <div class="dd-name">Lithuanian Litas</div>337 </div>338 <div class="dd-flag">Flag</div>339 </div>340 <div class="dd-item">341 <div class="dd-left">342 <div class="dd-code">LVL</div>343 <div class="dd-name">Latvian Lats</div>344 </div>345 <div class="dd-flag">Flag</div>346 </div>347 <div class="dd-item">348 <div class="dd-left">349 <div class="dd-code">LYD</div>350 <div class="dd-name">Libyan Dinar</div>351 </div>352 <div class="dd-flag">Flag</div>353 </div>354 <div class="dd-item">355 <div class="dd-left">356 <div class="dd-code">MAD</div>357 <div class="dd-name">Moroccan Dirham</div>358 </div>359 <div class="dd-flag">Flag</div>360 </div>361 <div class="dd-item">362 <div class="dd-left">363 <div class="dd-code">MDL</div>364 <div class="dd-name">Moldovan Leu</div>365 </div>366 <div class="dd-flag">Flag</div>367 </div>368 <div class="dd-item">369 <div class="dd-left">370 <div class="dd-code">MGA</div>371 <div class="dd-name">Malagasy Ariary</div>372 </div>373 <div class="dd-flag">Flag</div>374 </div>375 <div class="dd-item">376 <div class="dd-left">377 <div class="dd-code">MKD</div>378 <div class="dd-name">Macedonian Denar</div>379 </div>380 <div class="dd-flag">Flag</div>381 </div>382 <div class="dd-item">383 <div class="dd-left">384 <div class="dd-code">MMK</div>385 <div class="dd-name">Myanma Kyat</div>386 </div>387 <div class="dd-flag">Flag</div>388 </div>389 <div class="dd-item">390 <div class="dd-left">391 <div class="dd-code">MNT</div>392 <div class="dd-name">Mongolian Tugrik</div>393 </div>394 <div class="dd-flag">Flag</div>395 </div>396 <div class="dd-item">397 <div class="dd-left">398 <div class="dd-code">MOP</div>399 <div class="dd-name">Macanese Pataca</div>400 </div>401 <div class="dd-flag">Flag</div>402 </div>403 <div class="dd-item">404 <div class="dd-left">405 <div class="dd-code">MRO</div>406 <div class="dd-name">Mauritanian Ouguiya</div>407 </div>408 <div class="dd-flag">Flag</div>409 </div>410 <div class="dd-item">411 <div class="dd-left">412 <div class="dd-code">MUR</div>413 <div class="dd-name">Mauritian Rupee</div>414 </div>415 <div class="dd-flag">Flag</div>416 </div>417 <div class="dd-item">418 <div class="dd-left">419 <div class="dd-code">MVR</div>420 <div class="dd-name">Maldivian Rufiyaa</div>421 </div>422 <div class="dd-flag">Flag</div>423 </div>424 <div class="dd-item">425 <div class="dd-left">426 <div class="dd-code">MWK</div>427 <div class="dd-name">Malawian Kwacha</div>428 </div>429 <div class="dd-flag">Flag</div>430 </div>431 </div>432 433 <!-- Ad Banner -->434 <div class="ad-banner">435 <div class="ad-left">436 <div class="ad-img">[IMG: App Icon]</div>437 <div>438 <div style="font-size:32px; font-weight:700;">Share Market App</div>439 <div style="font-size:24px; color:#777;">Sponsored</div>440 </div>441 </div>442 <div class="ad-btn">INSTALL</div>443 </div>444 445 <!-- Home Indicator -->446 <div class="home-indicator"></div>447 448</div>449</body>450</html>