GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Exchange Rates List UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: Arial, Helvetica, sans-serif;16    color: #212121;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 90px;26    background: #000000;27    color: #ffffff;28    display: flex;29    align-items: center;30    padding: 0 32px;31    box-sizing: border-box;32    font-size: 34px;33    letter-spacing: 0.5px;34  }35  .status-icons {36    margin-left: auto;37    display: flex;38    gap: 18px;39    align-items: center;40  }41  .dot { width: 18px; height: 18px; background: #ffffff; border-radius: 50%; opacity: 0.85; }42  .bar { width: 38px; height: 18px; background: #ffffff; border-radius: 4px; opacity: 0.85; }43 44  /* App bar */45  .app-bar {46    position: absolute;47    top: 90px;48    left: 0;49    width: 1080px;50    height: 150px;51    background: #1e1e1e;52    color: #ffffff;53    display: flex;54    align-items: center;55    box-sizing: border-box;56    padding: 0 28px;57  }58  .app-title {59    flex: 1;60    text-align: center;61    font-weight: bold;62    font-size: 42px;63    letter-spacing: 1px;64  }65  .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }66 67  /* Banner image placeholder */68  .banner {69    position: absolute;70    top: 240px;71    left: 0;72    width: 1080px;73    height: 280px;74    background: #E0E0E0;75    border-top: 1px solid #BDBDBD;76    border-bottom: 1px solid #BDBDBD;77    display: flex;78    align-items: center;79    justify-content: center;80    color: #757575;81    font-size: 34px;82    font-weight: bold;83  }84 85  /* Info rows */86  .info {87    position: absolute;88    top: 520px;89    left: 0;90    width: 1080px;91    background: #3a3a3a;92    color: #ffffff;93    box-sizing: border-box;94    padding: 28px 36px;95    font-size: 36px;96  }97  .info-row {98    display: flex;99    align-items: center;100    justify-content: space-between;101    border-top: 1px solid rgba(255,255,255,0.08);102    padding: 18px 0;103  }104  .info-row:first-child { border-top: none; }105  .info-label { color: #e0e0e0; font-weight: 600; letter-spacing: 0.5px; }106  .info-value { color: #d0d0d0; }107 108  /* Base currency card */109  .base-card {110    position: absolute;111    top: 680px;112    left: 0;113    width: 1080px;114    height: 150px;115    background: #eaeaea;116    border-top: 1px solid #d0d0d0;117    border-bottom: 1px solid #d0d0d0;118    box-sizing: border-box;119    display: flex;120    align-items: center;121    padding: 0 36px;122    gap: 24px;123  }124  .flag {125    width: 140px;126    height: 90px;127    background: #E0E0E0;128    border: 1px solid #BDBDBD;129    color: #757575;130    display: flex;131    align-items: center;132    justify-content: center;133    font-size: 24px;134  }135  .base-text {136    font-size: 44px;137    font-weight: 700;138    color: #333333;139  }140 141  .arrow-wrap {142    position: absolute;143    top: 840px;144    left: 0;145    width: 1080px;146    height: 90px;147    display: flex;148    align-items: center;149    justify-content: center;150  }151 152  /* List card */153  .list-card {154    position: absolute;155    top: 930px;156    left: 24px;157    width: 1032px;158    background: #ffffff;159    border: 1px solid #e6e6e6;160    border-radius: 24px;161    box-sizing: border-box;162    overflow: hidden;163  }164  .rate-item {165    display: flex;166    align-items: center;167    padding: 28px 32px;168    border-bottom: 1px solid #edf0f3;169    min-height: 160px;170    box-sizing: border-box;171  }172  .rate-item:last-child { border-bottom: none; }173  .code-name {174    margin-left: 22px;175    display: flex;176    flex-direction: column;177    gap: 8px;178  }179  .code {180    font-size: 40px;181    font-weight: 800;182    color: #111111;183  }184  .name {185    font-size: 36px;186    color: #2a588c;187  }188  .value {189    margin-left: auto;190    font-size: 40px;191    font-weight: 700;192    color: #2a588c;193  }194 195  /* Ad bar */196  .ad-bar {197    position: absolute;198    bottom: 0;199    left: 0;200    width: 1080px;201    height: 240px;202    background: #ffffff;203    border-top: 1px solid #e6e6e6;204    box-sizing: border-box;205    padding: 26px 32px;206    display: flex;207    align-items: center;208    gap: 24px;209  }210  .ad-brand {211    color: #777777;212    font-size: 34px;213  }214  .ad-text {215    font-size: 44px;216    color: #2a2a2a;217    flex: 1;218  }219  .ad-btn {220    background: #1f7ae0;221    color: #ffffff;222    font-size: 36px;223    font-weight: 700;224    padding: 22px 36px;225    border-radius: 42px;226    display: flex;227    align-items: center;228    gap: 18px;229    white-space: nowrap;230  }231  .info-dot {232    width: 36px; height: 36px;233    border-radius: 50%;234    border: 2px solid #9aa9b8;235    color: #9aa9b8;236    display: inline-flex; align-items: center; justify-content: center;237    font-weight: 700;238  }239</style>240</head>241<body>242<div id="render-target">243 244  <!-- Status bar -->245  <div class="status-bar">246    12:28247    <div class="status-icons">248      <div class="dot"></div>249      <div class="dot"></div>250      <div class="bar"></div>251      <div class="dot"></div>252      <div class="dot"></div>253    </div>254  </div>255 256  <!-- App bar -->257  <div class="app-bar">258    <div class="icon-btn">259      <svg width="56" height="56" viewBox="0 0 24 24">260        <path d="M3 6h18M3 12h18M3 18h18" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>261      </svg>262    </div>263    <div class="app-title">EXCHANGE RATES LIST</div>264    <div class="icon-btn">265      <svg width="56" height="56" viewBox="0 0 24 24">266        <circle cx="12" cy="5" r="2" fill="#ffffff"/>267        <circle cx="12" cy="12" r="2" fill="#ffffff"/>268        <circle cx="12" cy="19" r="2" fill="#ffffff"/>269      </svg>270    </div>271  </div>272 273  <!-- Banner -->274  <div class="banner">[IMG: Coins banner]</div>275 276  <!-- Info rows -->277  <div class="info">278    <div class="info-row">279      <div class="info-label">BASE CURRENCY</div>280      <div class="info-value">USD</div>281    </div>282    <div class="info-row">283      <div class="info-label">LAST UPDATE</div>284      <div class="info-value">November 17, 2023 12:26 PM</div>285    </div>286  </div>287 288  <!-- Base currency card -->289  <div class="base-card">290    <div class="flag">[IMG: US Flag]</div>291    <div class="base-text">1 USD (U.S. Dollar)</div>292  </div>293 294  <!-- Down arrow -->295  <div class="arrow-wrap">296    <svg width="70" height="70" viewBox="0 0 24 24">297      <path d="M12 4v12M5 11l7 7 7-7" stroke="#6f6f6f" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>298    </svg>299  </div>300 301  <!-- List card -->302  <div class="list-card">303    <div class="rate-item">304      <div class="flag">[IMG: UAE Flag]</div>305      <div class="code-name">306        <div class="code">AED</div>307        <div class="name">United Arab Emirates Dirham</div>308      </div>309      <div class="value">3.67303</div>310    </div>311 312    <div class="rate-item">313      <div class="flag">[IMG: Afghanistan Flag]</div>314      <div class="code-name">315        <div class="code">AFN</div>316        <div class="name">Afghan Afghani</div>317      </div>318      <div class="value">69.05091</div>319    </div>320 321    <div class="rate-item">322      <div class="flag">[IMG: Albania Flag]</div>323      <div class="code-name">324        <div class="code">ALL</div>325        <div class="name">Albanian Lek</div>326      </div>327      <div class="value">95.81314</div>328    </div>329 330    <div class="rate-item">331      <div class="flag">[IMG: Armenia Flag]</div>332      <div class="code-name">333        <div class="code">AMD</div>334        <div class="name">Armenian Dram</div>335      </div>336      <div class="value">402.83937</div>337    </div>338 339    <div class="rate-item">340      <div class="flag">[IMG: Netherlands Antilles Flag]</div>341      <div class="code-name">342        <div class="code">ANG</div>343        <div class="name">Netherlands Antillean Guilder</div>344      </div>345      <div class="value">1.80208</div>346    </div>347 348    <div class="rate-item">349      <div class="flag">[IMG: Angola Flag]</div>350      <div class="code-name">351        <div class="code">AOA</div>352        <div class="name">Angolan Kwanza</div>353      </div>354      <div class="value">833.0033</div>355    </div>356 357    <div class="rate-item">358      <div class="flag">[IMG: Argentina Flag]</div>359      <div class="code-name">360        <div class="code">ARS</div>361        <div class="name">Argentine Peso</div>362      </div>363      <div class="value">353.51877</div>364    </div>365  </div>366 367  <!-- Ad bar -->368  <div class="ad-bar">369    <span class="ad-brand">Facebook®</span>370    <span class="ad-text">Fun Games, Free to Play</span>371    <div class="ad-btn">372      VISIT SITE373      <svg width="28" height="28" viewBox="0 0 24 24">374        <path d="M8 5l8 7-8 7" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>375      </svg>376    </div>377    <span class="info-dot">i</span>378  </div>379 380</div>381</body>382</html>