GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Currency Converter UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #0f141a;14 color: #fff;15 }16 17 /* Status bar */18 .statusbar {19 position: absolute;20 top: 0; left: 0;21 width: 100%;22 height: 120px;23 background: #000;24 color: #fff;25 font-size: 40px;26 display: flex;27 align-items: center;28 padding: 0 36px;29 box-sizing: border-box;30 }31 .status-icons {32 margin-left: auto;33 display: flex;34 align-items: center;35 gap: 24px;36 }37 .status-icon {38 width: 44px; height: 44px;39 opacity: 0.9;40 }41 42 /* App bar */43 .appbar {44 position: absolute;45 top: 120px; left: 0;46 width: 100%;47 height: 160px;48 background: #2f2f32;49 box-sizing: border-box;50 padding: 0 36px;51 display: flex;52 align-items: center;53 }54 .hamburger {55 width: 72px; height: 72px;56 margin-right: 24px;57 }58 .appbar-title {59 line-height: 1.2;60 }61 .title {62 font-weight: 800;63 font-size: 52px;64 letter-spacing: 1px;65 }66 .subtitle {67 font-size: 28px;68 color: #b5b7ba;69 margin-top: 8px;70 }71 .appbar-actions {72 margin-left: auto;73 display: flex;74 gap: 28px;75 align-items: center;76 }77 .dotmenu { width: 54px; height: 54px; }78 79 /* Top conversion panel */80 .top-panel {81 position: absolute;82 top: 280px; left: 0;83 width: 100%;84 height: 520px;85 background: linear-gradient(180deg, #496c94 0%, #567ea8 100%);86 border-top: 1px solid rgba(255,255,255,0.06);87 box-sizing: border-box;88 padding: 36px 36px;89 }90 .lang {91 position: absolute;92 left: 36px; top: 24px;93 font-size: 26px; color: #cdd6e1; opacity: 0.9;94 }95 .rows {96 display: flex;97 flex-direction: column;98 gap: 40px;99 margin-top: 40px;100 }101 .conv-row {102 display: grid;103 grid-template-columns: 140px 1fr 120px;104 align-items: center;105 }106 .row-left {107 display: flex; align-items: center; gap: 24px;108 }109 .row-controls {110 display: flex; align-items: center; gap: 26px; justify-content: flex-start;111 }112 .row-value {113 text-align: right;114 font-size: 120px;115 color: #e9eef5;116 font-weight: 700;117 padding-right: 12px;118 }119 .red-search {120 width: 72px; height: 72px;121 }122 .small-icon { width: 44px; height: 44px; opacity: 0.9; }123 .down-arrow {124 width: 24px; height: 24px; border-left: 14px solid transparent; border-right: 14px solid transparent;125 border-top: 24px solid #e15743; margin-right: 10px;126 }127 .down-arrow.blue { border-top-color: #7bb4ff; }128 129 /* Feature tabs */130 .features {131 position: absolute;132 top: 800px; left: 0;133 width: 100%;134 height: 180px;135 background: linear-gradient(180deg, #102436 0%, #142a3f 100%);136 display: grid;137 grid-template-columns: repeat(4, 1fr);138 border-top: 1px solid rgba(255,255,255,0.08);139 border-bottom: 1px solid rgba(255,255,255,0.08);140 }141 .feature {142 display: flex;143 flex-direction: column;144 justify-content: center;145 border-right: 1px solid rgba(255,255,255,0.08);146 padding-left: 36px;147 }148 .feature:last-child { border-right: none; }149 .feature .label {150 font-size: 30px;151 color: #cbd3dc;152 margin-top: 16px;153 }154 155 /* Keypad grid */156 .keypad {157 position: absolute;158 top: 980px; left: 0;159 width: 100%;160 height: 1000px;161 background: #2c3034;162 display: grid;163 grid-template-columns: repeat(4, 1fr);164 grid-auto-rows: 166px;165 }166 .key {167 display: flex; align-items: center; justify-content: center;168 font-size: 64px; color: #e8edf2; font-weight: 700;169 border: 1px solid rgba(255,255,255,0.08);170 background: #3a3f44;171 }172 .key.dark { background: #2f3439; }173 .key.text { font-size: 46px; font-weight: 600; }174 .key.red { background: #b74039; }175 .key.op { font-size: 72px; font-weight: 800; }176 177 /* Ad area */178 .ad {179 position: absolute;180 bottom: 100px; left: 0;181 width: 100%;182 height: 320px;183 background: #ffffff;184 color: #222;185 display: flex;186 align-items: center;187 padding: 24px 36px;188 box-sizing: border-box;189 gap: 24px;190 }191 .ad .img {192 width: 160px; height: 160px;193 background: #E0E0E0; border: 1px solid #BDBDBD;194 display: flex; align-items: center; justify-content: center; color: #757575;195 border-radius: 18px;196 }197 .ad .text { font-size: 40px; flex: 1; }198 .ad .install {199 background: #25a45a; color: #fff; padding: 26px 36px; border-radius: 60px; font-size: 36px; font-weight: 700;200 }201 202 /* Bottom gesture bar */203 .gesture {204 position: absolute;205 bottom: 24px; left: 50%;206 transform: translateX(-50%);207 width: 360px; height: 16px; background: #cfd6de; border-radius: 12px; opacity: 0.8;208 }209 210 /* Overlay currency dropdown */211 .dropdown {212 position: absolute;213 top: 360px;214 left: 180px;215 width: 540px;216 height: 1700px;217 background: #183f58;218 border-radius: 8px;219 box-shadow: 0 16px 32px rgba(0,0,0,0.5);220 overflow: hidden;221 }222 .dropdown-header {223 height: 70px;224 background: rgba(255,255,255,0.06);225 color: #cbd3dc;226 display: flex; align-items: center; padding: 0 20px; font-size: 28px;227 }228 .currency-item {229 display: grid;230 grid-template-columns: 1fr 120px;231 gap: 16px;232 align-items: center;233 padding: 22px 24px;234 border-bottom: 1px solid rgba(255,255,255,0.07);235 color: #e8eef5;236 }237 .currency-item .code { font-size: 44px; font-weight: 800; }238 .currency-item .name { font-size: 28px; color: #b9c4ce; margin-top: 6px; }239 .flag {240 width: 88px; height: 54px;241 background: #E0E0E0; border: 1px solid #BDBDBD;242 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;243 border-radius: 4px;244 justify-self: end;245 }246</style>247</head>248<body>249<div id="render-target">250 251 <!-- Status Bar -->252 <div class="statusbar">253 <div>11:17</div>254 <div class="status-icons">255 <svg class="status-icon" viewBox="0 0 24 24">256 <rect x="3" y="4" width="18" height="14" stroke="#fff" fill="none" stroke-width="2"></rect>257 <rect x="7" y="8" width="10" height="6" fill="#fff"></rect>258 </svg>259 <svg class="status-icon" viewBox="0 0 24 24">260 <path d="M6 18h12a2 2 0 0 0 2-2V6H4v10a2 2 0 0 0 2 2z" fill="#fff"></path>261 </svg>262 </div>263 </div>264 265 <!-- App Bar -->266 <div class="appbar">267 <svg class="hamburger" viewBox="0 0 24 24">268 <rect x="3" y="5" width="18" height="2" fill="#fff"></rect>269 <rect x="3" y="11" width="18" height="2" fill="#fff"></rect>270 <rect x="3" y="17" width="18" height="2" fill="#fff"></rect>271 </svg>272 <div class="appbar-title">273 <div class="title">CURRENCY CONVERTER</div>274 <div class="subtitle">Updated on December 14, 2023 10:48 AM</div>275 </div>276 <div class="appbar-actions">277 <svg class="dotmenu" viewBox="0 0 24 24">278 <circle cx="12" cy="5" r="2.2" fill="#fff"></circle>279 <circle cx="12" cy="12" r="2.2" fill="#fff"></circle>280 <circle cx="12" cy="19" r="2.2" fill="#fff"></circle>281 </svg>282 </div>283 </div>284 285 <!-- Top Conversion Panel -->286 <div class="top-panel">287 <div class="lang">EN</div>288 <div class="rows">289 290 <div class="conv-row">291 <div class="row-left">292 <svg class="red-search" viewBox="0 0 24 24">293 <circle cx="10" cy="10" r="6" stroke="#ff4b3a" stroke-width="2.5" fill="none"></circle>294 <line x1="14.5" y1="14.5" x2="20" y2="20" stroke="#ff4b3a" stroke-width="2.5"></line>295 </svg>296 </div>297 <div class="row-controls">298 <div class="down-arrow"></div>299 <svg class="small-icon" viewBox="0 0 24 24">300 <path d="M12 4a8 8 0 1 1-7 4h2.4A6 6 0 1 0 12 6v2l4-3-4-3v2z" fill="#cfd6de"></path>301 </svg>302 </div>303 <div class="row-value">0</div>304 </div>305 306 <div class="conv-row">307 <div class="row-left">308 <svg class="red-search" viewBox="0 0 24 24">309 <circle cx="10" cy="10" r="6" stroke="#ff4b3a" stroke-width="2.5" fill="none"></circle>310 <line x1="14.5" y1="14.5" x2="20" y2="20" stroke="#ff4b3a" stroke-width="2.5"></line>311 </svg>312 </div>313 <div class="row-controls">314 <div class="down-arrow blue"></div>315 <svg class="small-icon" viewBox="0 0 24 24">316 <path d="M12 4a8 8 0 1 1-7 4h2.4A6 6 0 1 0 12 6v2l4-3-4-3v2z" fill="#cfd6de"></path>317 </svg>318 </div>319 <div class="row-value">0</div>320 </div>321 </div>322 </div>323 324 <!-- Feature tabs -->325 <div class="features">326 <div class="feature">327 <svg class="small-icon" viewBox="0 0 24 24">328 <path d="M12 2l2.4 6.9H21l-5.6 4.2 2.1 7L12 15l-5.5 5.1 2.1-7L3 8.9h6.6z" fill="#e1e6ed"></path>329 </svg>330 <div class="label">CURRENCY CONVERT</div>331 </div>332 <div class="feature">333 <svg class="small-icon" viewBox="0 0 24 24">334 <path d="M3 18V6l7 6-7 6zm8 0V6l7 6-7 6z" fill="#e1e6ed"></path>335 </svg>336 <div class="label">RATES & CHARTS</div>337 </div>338 <div class="feature">339 <svg class="small-icon" viewBox="0 0 24 24">340 <path d="M12 17.3l-5.5 3.2 1.5-6.1-4.7-4 6.2-.5L12 4l2.5 6 6.2.5-4.7 4 1.5 6.1z" fill="#e1e6ed"></path>341 </svg>342 <div class="label">CURRENCY FAVORITES</div>343 </div>344 <div class="feature">345 <svg class="small-icon" viewBox="0 0 24 24">346 <path d="M12 5a7 7 0 1 1-6.9 5.6H7l-3.5-3.4L0 11h3.2A9 9 0 1 0 12 3v2z" fill="#e1e6ed"></path>347 </svg>348 <div class="label">CURRENCY ROTATE</div>349 </div>350 </div>351 352 <!-- Keypad -->353 <div class="keypad">354 <div class="key dark text">CONVERT</div>355 <div class="key dark op">×</div>356 <div class="key dark text">CLR</div>357 <div class="key dark text">DEL</div>358 359 <div class="key">7</div>360 <div class="key">8</div>361 <div class="key">9</div>362 <div class="key op">÷</div>363 364 <div class="key">4</div>365 <div class="key">5</div>366 <div class="key">6</div>367 <div class="key op">×</div>368 369 <div class="key">1</div>370 <div class="key">2</div>371 <div class="key">3</div>372 <div class="key op">−</div>373 374 <div class="key">00</div>375 <div class="key">0</div>376 <div class="key">.</div>377 <div class="key red">=</div>378 </div>379 380 <!-- Ad banner -->381 <div class="ad">382 <div class="img">[IMG: App Icon]</div>383 <div class="text">Share Market App</div>384 <div class="install">INSTALL</div>385 </div>386 387 <div class="gesture"></div>388 389 <!-- Currency dropdown overlay -->390 <div class="dropdown">391 <div class="dropdown-header">Select Currency</div>392 393 <div class="currency-item">394 <div>395 <div class="code">FJD</div>396 <div class="name">Fijian Dollar</div>397 </div>398 <div class="flag">[IMG: Flag]</div>399 </div>400 401 <div class="currency-item">402 <div>403 <div class="code">FKP</div>404 <div class="name">Falkland Islands Pound</div>405 </div>406 <div class="flag">[IMG: Flag]</div>407 </div>408 409 <div class="currency-item">410 <div>411 <div class="code">GBP</div>412 <div class="name">British Pound Sterling</div>413 </div>414 <div class="flag">[IMG: Flag]</div>415 </div>416 417 <div class="currency-item">418 <div>419 <div class="code">GEL</div>420 <div class="name">Georgian Lari</div>421 </div>422 <div class="flag">[IMG: Flag]</div>423 </div>424 425 <div class="currency-item">426 <div>427 <div class="code">GGP</div>428 <div class="name">Guernsey Pound</div>429 </div>430 <div class="flag">[IMG: Flag]</div>431 </div>432 433 <div class="currency-item">434 <div>435 <div class="code">GHS</div>436 <div class="name">Ghanaian Cedi</div>437 </div>438 <div class="flag">[IMG: Flag]</div>439 </div>440 441 <div class="currency-item">442 <div>443 <div class="code">GIP</div>444 <div class="name">Gibraltar Pound</div>445 </div>446 <div class="flag">[IMG: Flag]</div>447 </div>448 449 <div class="currency-item">450 <div>451 <div class="code">GMD</div>452 <div class="name">Gambian Dalasi</div>453 </div>454 <div class="flag">[IMG: Flag]</div>455 </div>456 457 <div class="currency-item">458 <div>459 <div class="code">GNF</div>460 <div class="name">Guinean Franc</div>461 </div>462 <div class="flag">[IMG: Flag]</div>463 </div>464 465 <div class="currency-item">466 <div>467 <div class="code">GTQ</div>468 <div class="name">Guatemalan Quetzal</div>469 </div>470 <div class="flag">[IMG: Flag]</div>471 </div>472 473 <div class="currency-item">474 <div>475 <div class="code">GYD</div>476 <div class="name">Guyanese Dollar</div>477 </div>478 <div class="flag">[IMG: Flag]</div>479 </div>480 481 <div class="currency-item">482 <div>483 <div class="code">HKD</div>484 <div class="name">Hong Kong Dollar</div>485 </div>486 <div class="flag">[IMG: Flag]</div>487 </div>488 489 <div class="currency-item">490 <div>491 <div class="code">HNL</div>492 <div class="name">Honduran Lempira</div>493 </div>494 <div class="flag">[IMG: Flag]</div>495 </div>496 497 <div class="currency-item">498 <div>499 <div class="code">HRK</div>500 <div class="name">Croatian Kuna</div>501 </div>502 <div class="flag">[IMG: Flag]</div>503 </div>504 505 <div class="currency-item">506 <div>507 <div class="code">HTG</div>508 <div class="name">Haitian Gourde</div>509 </div>510 <div class="flag">[IMG: Flag]</div>511 </div>512 513 <div class="currency-item">514 <div>515 <div class="code">HUF</div>516 <div class="name">Hungarian Forint</div>517 </div>518 <div class="flag">[IMG: Flag]</div>519 </div>520 521 <div class="currency-item">522 <div>523 <div class="code">IDR</div>524 <div class="name">Indonesian Rupiah</div>525 </div>526 <div class="flag">[IMG: Flag]</div>527 </div>528 529 <!-- Tail spacer to mimic long list -->530 <div style="height: 40px;"></div>531 </div>532 533</div>534</body>535</html>