GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Currency Converter UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 width: 1440px;10 height: 3120px;11 position: relative;12 overflow: hidden;13 background: #121212;14 border-radius: 0;15 box-shadow: none;16 color: #fff;17 }18 19 /* Top status bar */20 .status-bar {21 height: 120px;22 background: #000;23 color: #fff;24 display: flex;25 align-items: center;26 padding: 0 40px;27 box-sizing: border-box;28 font-size: 44px;29 }30 .status-left { flex: 1; }31 .status-right { display: flex; gap: 26px; align-items: center; }32 .dot { width: 16px; height: 16px; background: #e0e0e0; border-radius: 50%; display: inline-block; }33 .battery {34 width: 62px; height: 32px; border: 4px solid #e0e0e0; border-radius: 6px; position: relative;35 }36 .battery::after { content: ""; position: absolute; right: -14px; top: 8px; width: 10px; height: 16px; background: #e0e0e0; border-radius: 2px; }37 .battery .level { position: absolute; left: 6px; top: 6px; height: 16px; width: 36px; background: #e0e0e0; }38 39 /* App bar */40 .app-bar {41 height: 200px;42 background: #212121;43 display: flex;44 align-items: center;45 padding: 0 40px;46 box-sizing: border-box;47 position: relative;48 }49 .hamburger {50 width: 70px; height: 70px; margin-right: 30px;51 }52 .app-title {53 font-weight: 800;54 font-size: 64px;55 letter-spacing: 1px;56 }57 .subtitle {58 color: #A9B1B7;59 font-size: 32px;60 margin-top: 8px;61 }62 .three-dots {63 position: absolute;64 right: 40px;65 top: 50%;66 transform: translateY(-50%);67 width: 60px;68 height: 90px;69 display: flex;70 justify-content: center;71 gap: 10px;72 flex-direction: column;73 align-items: center;74 }75 .three-dots span { width: 12px; height: 12px; background: #BDBDBD; border-radius: 50%; display: block; }76 77 /* Currency panel */78 .currency-panel {79 height: 600px;80 background: linear-gradient(#567DA2, #3E5F81);81 padding: 24px 28px 24px 28px;82 box-sizing: border-box;83 border-top: 1px solid #2a3e56;84 border-bottom: 1px solid #2a3e56;85 }86 .lang-row {87 display: flex;88 align-items: center;89 gap: 18px;90 color: #DDE6EE;91 font-size: 30px;92 margin-bottom: 16px;93 }94 .lang-row svg { opacity: 0.8; }95 .currency-row {96 height: 260px;97 display: grid;98 grid-template-columns: 120px 1fr 220px 120px;99 align-items: center;100 padding: 20px 16px;101 box-sizing: border-box;102 border-top: 1px solid rgba(0,0,0,0.25);103 }104 .currency-row:first-of-type { border-top: none; }105 .search-icon { width: 90px; height: 90px; }106 .cur-info { color: #fff; }107 .cur-code { font-size: 58px; font-weight: 700; display: flex; align-items: center; gap: 18px; }108 .cur-desc { font-size: 34px; color: #C7D2DB; margin-top: 6px; }109 .flag {110 width: 120px; height: 70px; background: #E0E0E0; border: 1px solid #BDBDBD;111 display: flex; justify-content: center; align-items: center; color: #757575; font-size: 26px; border-radius: 6px;112 }113 .cur-actions {114 display: flex; align-items: center; gap: 26px;115 }116 .cur-value {117 text-align: right; font-size: 100px; font-weight: 700; color: #fff; padding-right: 24px;118 }119 .dropdown {120 width: 26px; height: 26px; border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 20px solid #4EC1FF;121 }122 .dropdown.red { border-top-color: #F0625D; }123 .rotate-icon { width: 60px; height: 60px; }124 125 /* Tool bar under panel */126 .tool-bar {127 height: 220px;128 display: grid;129 grid-template-columns: repeat(4, 1fr);130 background: linear-gradient(#213042, #1a2736);131 border-top: 1px solid #0f1b26;132 border-bottom: 1px solid #0f1b26;133 }134 .tool {135 border-right: 1px solid #2b3948;136 display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;137 color: #D4DEE7; font-size: 34px; text-align: center;138 }139 .tool:last-child { border-right: none; }140 .tool svg { width: 64px; height: 64px; }141 142 /* Keypad */143 .keypad {144 height: 1620px;145 display: grid;146 grid-template-columns: repeat(4, 1fr);147 grid-auto-rows: 270px;148 background: #3a4248;149 border-top: 1px solid #2c343a;150 border-bottom: 1px solid #2c343a;151 }152 .key {153 display: flex; align-items: center; justify-content: center;154 font-size: 72px; color: #EAEFF4; font-weight: 600;155 background: #5b666c;156 border-right: 1px solid #2f373d;157 border-bottom: 1px solid #2f373d;158 }159 .op { background: #2f363c; }160 .key.small { font-size: 54px; font-weight: 500; }161 .key.label-left { justify-content: flex-start; padding-left: 40px; }162 .key-red { background: #c44337; color: #fff; }163 .key .sub {164 position: absolute; top: 30px; right: 30px; font-size: 38px; color: #f05b56;165 }166 .key .arrow {167 position: absolute; top: 30px; right: 30px;168 }169 .grid-rel { position: relative; }170 171 /* Bottom ad and nav */172 .ad {173 height: 180px;174 background: #ffffff;175 display: flex; align-items: center; padding: 0 24px; box-sizing: border-box;176 color: #111;177 }178 .ad .img {179 width: 360px; height: 140px; background: #E0E0E0; border: 1px solid #BDBDBD;180 display: flex; justify-content: center; align-items: center; color: #757575; font-size: 28px; margin-right: 24px;181 }182 .ad .cta {183 margin-left: auto;184 background: #27AE60; color: #fff; border-radius: 40px; padding: 18px 36px; font-size: 36px; font-weight: 700;185 }186 .ad .rating { color: #777; font-size: 30px; }187 188 .bottom-nav {189 height: 160px; background: #0d0d0d; display: flex; align-items: center; justify-content: center;190 }191 .home-pill {192 width: 300px; height: 18px; background: #ffffff; border-radius: 9px; opacity: 0.85;193 }194</style>195</head>196<body>197<div id="render-target">198 199 <!-- Status bar -->200 <div class="status-bar">201 <div class="status-left">2:19</div>202 <div class="status-right">203 <svg width="44" height="44" viewBox="0 0 44 44" fill="none">204 <circle cx="14" cy="22" r="12" stroke="#e0e0e0" stroke-width="4"></circle>205 <path d="M26 26 L38 34" stroke="#e0e0e0" stroke-width="4" stroke-linecap="round"></path>206 </svg>207 <svg width="52" height="44" viewBox="0 0 52 44" fill="none">208 <rect x="6" y="18" width="8" height="16" fill="#e0e0e0"/>209 <rect x="18" y="14" width="8" height="20" fill="#e0e0e0"/>210 <rect x="30" y="10" width="8" height="24" fill="#e0e0e0"/>211 </svg>212 <span class="dot"></span>213 <div class="battery"><div class="level"></div></div>214 </div>215 </div>216 217 <!-- App bar -->218 <div class="app-bar">219 <svg class="hamburger" viewBox="0 0 100 100">220 <rect x="10" y="20" width="80" height="10" fill="#eee"></rect>221 <rect x="10" y="45" width="80" height="10" fill="#eee"></rect>222 <rect x="10" y="70" width="80" height="10" fill="#eee"></rect>223 </svg>224 <div>225 <div class="app-title">CURRENCY CONVERTER</div>226 <div class="subtitle">Updated on November 10, 2023 2:18 PM</div>227 </div>228 <div class="three-dots">229 <span></span><span></span><span></span>230 </div>231 </div>232 233 <!-- Currency selection panel -->234 <div class="currency-panel">235 <div class="lang-row">236 <span>EN</span>237 <svg width="40" height="40" viewBox="0 0 40 40">238 <path d="M5 20 C10 10, 30 10, 35 20" stroke="#DDE6EE" stroke-width="4" fill="none" stroke-linecap="round"></path>239 <path d="M5 24 C10 14, 30 14, 35 24" stroke="#DDE6EE" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.6"></path>240 </svg>241 <svg width="40" height="40" viewBox="0 0 40 40">242 <circle cx="20" cy="20" r="16" stroke="#DDE6EE" stroke-width="4" fill="none"></circle>243 <path d="M26 14 L34 6" stroke="#DDE6EE" stroke-width="4" stroke-linecap="round"></path>244 </svg>245 </div>246 247 <!-- ANG row -->248 <div class="currency-row">249 <div>250 <svg class="search-icon" viewBox="0 0 100 100">251 <circle cx="40" cy="40" r="28" stroke="#FF6B5E" stroke-width="10" fill="none"></circle>252 <line x1="60" y1="60" x2="90" y2="90" stroke="#FF6B5E" stroke-width="10" stroke-linecap="round"></line>253 </svg>254 </div>255 <div class="cur-info">256 <div class="cur-code">257 <span>ANG</span>258 <div class="flag">[IMG: Flag ANG]</div>259 </div>260 <div class="cur-desc">Netherlands Antillean Guilder</div>261 </div>262 <div class="cur-actions">263 <div class="dropdown red"></div>264 <svg class="rotate-icon" viewBox="0 0 60 60">265 <circle cx="30" cy="30" r="22" stroke="#DDE6EE" stroke-width="5" fill="none"></circle>266 <path d="M30 8 L34 4 L26 4 Z" fill="#DDE6EE"></path>267 </svg>268 </div>269 <div class="cur-value">0</div>270 </div>271 272 <!-- GBP row -->273 <div class="currency-row">274 <div>275 <svg class="search-icon" viewBox="0 0 100 100">276 <circle cx="40" cy="40" r="28" stroke="#7EB4FF" stroke-width="10" fill="none"></circle>277 <line x1="60" y1="60" x2="90" y2="90" stroke="#7EB4FF" stroke-width="10" stroke-linecap="round"></line>278 </svg>279 </div>280 <div class="cur-info">281 <div class="cur-code">282 <span>GBP</span>283 <div class="flag">[IMG: Flag UK]</div>284 </div>285 <div class="cur-desc">British Pound Sterling</div>286 </div>287 <div class="cur-actions">288 <div class="dropdown"></div>289 <svg class="rotate-icon" viewBox="0 0 60 60">290 <circle cx="30" cy="30" r="22" stroke="#DDE6EE" stroke-width="5" fill="none"></circle>291 <path d="M30 8 L34 4 L26 4 Z" fill="#DDE6EE"></path>292 </svg>293 </div>294 <div class="cur-value">0</div>295 </div>296 </div>297 298 <!-- Tool buttons -->299 <div class="tool-bar">300 <div class="tool">301 <svg viewBox="0 0 64 64">302 <path d="M32 10 A22 22 0 1 1 20 14" stroke="#CFE2F1" stroke-width="6" fill="none"></path>303 <path d="M20 14 L20 30 L34 30" stroke="#CFE2F1" stroke-width="6" fill="none"></path>304 </svg>305 <div>CURRENCY UPDATE</div>306 </div>307 <div class="tool">308 <svg viewBox="0 0 64 64">309 <rect x="8" y="30" width="10" height="24" fill="#CFE2F1"></rect>310 <rect x="26" y="22" width="10" height="32" fill="#CFE2F1"></rect>311 <rect x="44" y="14" width="10" height="40" fill="#CFE2F1"></rect>312 </svg>313 <div>TRENDS & CHARTS</div>314 </div>315 <div class="tool">316 <svg viewBox="0 0 64 64">317 <path d="M32 6 L40 26 L62 26 L44 38 L52 58 L32 46 L12 58 L20 38 L2 26 L24 26 Z" fill="#CFE2F1"></path>318 </svg>319 <div>CURRENCY FAVORITES</div>320 </div>321 <div class="tool">322 <svg viewBox="0 0 64 64">323 <circle cx="32" cy="32" r="22" stroke="#CFE2F1" stroke-width="6" fill="none"></circle>324 <path d="M32 8 L36 4 L28 4 Z" fill="#CFE2F1"></path>325 </svg>326 <div>CURRENCY ROTATE</div>327 </div>328 </div>329 330 <!-- Keypad grid -->331 <div class="keypad">332 <!-- Row 1 -->333 <div class="key small">COPY</div>334 <div class="key small">SEND</div>335 <div class="key small grid-rel">CLR336 <svg class="sub" width="42" height="42" viewBox="0 0 42 42">337 <line x1="8" y1="8" x2="34" y2="34" stroke="#ff554a" stroke-width="6"></line>338 <line x1="34" y1="8" x2="8" y2="34" stroke="#ff554a" stroke-width="6"></line>339 </svg>340 </div>341 <div class="key small op grid-rel">DEL342 <svg class="arrow" width="52" height="40" viewBox="0 0 52 40">343 <path d="M10 20 L26 6 L26 14 L42 14 L42 26 L26 26 L26 34 Z" fill="#B8FF59"></path>344 </svg>345 </div>346 347 <!-- Row 2 -->348 <div class="key">7</div>349 <div class="key">8</div>350 <div class="key">9</div>351 <div class="key op">÷</div>352 353 <!-- Row 3 -->354 <div class="key">4</div>355 <div class="key">5</div>356 <div class="key">6</div>357 <div class="key op">×</div>358 359 <!-- Row 4 -->360 <div class="key">1</div>361 <div class="key">2</div>362 <div class="key">3</div>363 <div class="key op">−</div>364 365 <!-- Row 5 -->366 <div class="key small">000</div>367 <div class="key small">00</div>368 <div class="key">0</div>369 <div class="key op">+</div>370 371 <!-- Row 6 -->372 <div class="key label-left small" style="color:#ff6a63;">MULTI CURRENCY<br>CONVERTER</div>373 <div class="key">±</div>374 <div class="key">.</div>375 <div class="key key-red">=</div>376 </div>377 378 <!-- Ad banner -->379 <div class="ad">380 <div class="img">[IMG: Advert Banner]</div>381 <div>382 <div style="font-size:40px; font-weight:700;">Omio</div>383 <div class="rating">4.6 ★ FREE</div>384 </div>385 <div class="cta">Open</div>386 </div>387 388 <!-- Bottom nav pill -->389 <div class="bottom-nav"><div class="home-pill"></div></div>390 391</div>392</body>393</html>