GD-ML/AndroidCode

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>Exchange Rates List</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: #f4f4f4;15    font-family: Arial, Helvetica, sans-serif;16    color: #222;17  }18 19  /* Top app bar */20  .appbar {21    height: 140px;22    background: #1c1c1c;23    color: #fff;24    display: flex;25    align-items: center;26    padding: 0 36px;27    box-sizing: border-box;28  }29  .appbar .title {30    font-weight: 700;31    font-size: 42px;32    letter-spacing: 1px;33    text-transform: uppercase;34    flex: 1;35    text-align: center;36  }37  .icon-btn {38    width: 80px;39    height: 80px;40    display: flex;41    align-items: center;42    justify-content: center;43  }44  .icon-btn svg { fill: #fff; }45 46  /* Banner image placeholder */47  .banner {48    height: 300px;49    background: #E0E0E0;50    border-top: 1px solid #BDBDBD;51    border-bottom: 1px solid #BDBDBD;52    display: flex;53    align-items: center;54    justify-content: center;55    color: #757575;56    font-weight: 600;57    letter-spacing: 0.5px;58  }59 60  /* Info row */61  .info-row {62    background: #3a3a3a;63    color: #d7d7d7;64    padding: 28px 40px;65    display: flex;66    justify-content: space-between;67    box-sizing: border-box;68  }69  .info-col {70    width: 50%;71  }72  .info-label {73    font-size: 30px;74    text-transform: uppercase;75    color: #b9b9b9;76    margin-bottom: 12px;77  }78  .info-value {79    font-size: 34px;80    color: #e0e0e0;81  }82 83  /* Base currency card */84  .base-card {85    background: #eeeeee;86    margin: 24px 20px 0 20px;87    border-radius: 8px;88    padding: 24px 30px;89    display: flex;90    align-items: center;91    box-sizing: border-box;92    border: 1px solid #d9d9d9;93  }94  .flag {95    width: 140px;96    height: 90px;97    background: #E0E0E0;98    border: 1px solid #BDBDBD;99    display: flex;100    align-items: center;101    justify-content: center;102    color: #757575;103    font-size: 26px;104    border-radius: 6px;105    margin-right: 24px;106  }107  .base-text {108    font-size: 46px;109    font-weight: 700;110    color: #3a3a3a;111  }112 113  .down-arrow {114    display: flex;115    align-items: center;116    justify-content: center;117    margin: 16px 0 8px 0;118  }119  .down-arrow svg { fill: #6b6b6b; width: 60px; height: 60px; }120 121  /* List card */122  .list-card {123    background: #fff;124    margin: 10px 20px 0 20px;125    border-radius: 24px;126    box-shadow: 0 0 0 1px rgba(0,0,0,0.06);127    overflow: hidden;128  }129  .list-item {130    display: flex;131    align-items: center;132    padding: 26px 30px;133    box-sizing: border-box;134    border-bottom: 1px solid #ececec;135  }136  .list-item:last-child { border-bottom: none; }137  .item-flag {138    width: 110px;139    height: 80px;140    background: #E0E0E0;141    border: 1px solid #BDBDBD;142    display: flex;143    align-items: center;144    justify-content: center;145    color: #757575;146    font-size: 22px;147    border-radius: 6px;148    margin-right: 26px;149    flex-shrink: 0;150  }151  .item-middle {152    flex: 1;153  }154  .code {155    font-size: 40px;156    font-weight: 800;157    color: #111;158    line-height: 1.2;159  }160  .name {161    font-size: 34px;162    color: #3a6aa5;163    margin-top: 6px;164  }165  .rate {166    width: 260px;167    text-align: right;168    font-size: 40px;169    color: #1f4f8f;170    font-weight: 700;171  }172 173  /* Special first row (Bulgarian Lev only name) */174  .single-name .code { display: none; }175  .single-name .name { font-size: 36px; }176  .accent-bar {177    width: 60px;178    height: 6px;179    background: #a43a3a;180    border-radius: 3px;181    margin-left: 16px;182    margin-bottom: 10px;183  }184 185  /* Ad banner at bottom */186  .ad-banner {187    position: absolute;188    left: 0; right: 0;189    bottom: 130px;190    background: #f7f9fb;191    border-top: 1px solid #e3e6ea;192    padding: 24px 28px;193    display: flex;194    align-items: center;195    box-sizing: border-box;196  }197  .ad-left {198    flex: 1;199    display: flex;200    align-items: flex-start;201  }202  .ad-info {203    width: 40px; height: 40px; border-radius: 20px;204    background: #e9f2ff; color: #3a6aa5; font-weight: 700;205    display: flex; align-items: center; justify-content: center;206    margin-right: 12px; font-size: 24px;207  }208  .ad-text {209    font-size: 36px;210    color: #333;211    line-height: 1.25;212  }213  .ad-close {214    width: 36px; height: 36px; border-radius: 18px;215    border: 1px solid #cfd8e3; color: #7a8aa6;216    display: flex; align-items: center; justify-content: center;217    margin-right: 16px;218    font-weight: 700;219  }220  .ad-cta {221    background: #2f7df6;222    color: #fff;223    padding: 22px 34px;224    border-radius: 999px;225    font-size: 36px;226    font-weight: 700;227    display: flex;228    align-items: center;229    gap: 16px;230  }231  .ad-cta svg { fill: #fff; width: 32px; height: 32px; }232 233  /* Bottom home bar imitation */234  .home-bar {235    position: absolute;236    bottom: 38px;237    left: 50%;238    transform: translateX(-50%);239    width: 380px;240    height: 12px;241    background: #dcdcdc;242    border-radius: 10px;243  }244</style>245</head>246<body>247<div id="render-target">248  <!-- Top App Bar -->249  <div class="appbar">250    <div class="icon-btn" aria-label="menu">251      <svg viewBox="0 0 24 24" width="44" height="44">252        <path d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z"></path>253      </svg>254    </div>255    <div class="title">EXCHANGE RATES LIST</div>256    <div class="icon-btn" aria-label="more">257      <svg viewBox="0 0 24 24" width="44" height="44">258        <path d="M12 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4z"></path>259      </svg>260    </div>261  </div>262 263  <!-- Banner -->264  <div class="banner">[IMG: Coins banner]</div>265 266  <!-- Info row -->267  <div class="info-row">268    <div class="info-col">269      <div class="info-label">Base currency</div>270      <div class="info-value">USD</div>271    </div>272    <div class="info-col" style="text-align:right;">273      <div class="info-label">Last update</div>274      <div class="info-value">November 17, 2023 12:26 PM</div>275    </div>276  </div>277 278  <!-- Base currency card -->279  <div class="base-card">280    <div class="flag">[IMG: US Flag]</div>281    <div class="base-text">1 USD (U.S. Dollar)</div>282  </div>283 284  <div class="down-arrow">285    <svg viewBox="0 0 24 24">286      <path d="M12 4v12l-5-5-1.4 1.4L12 20l6.4-7.6L17 11l-5 5V4z"></path>287    </svg>288  </div>289 290  <!-- List card -->291  <div class="list-card">292    <div class="list-item single-name">293      <div class="item-flag">[IMG: Flag]</div>294      <div class="item-middle">295        <div class="accent-bar"></div>296        <div class="name">Bulgarian Lev</div>297      </div>298      <div class="rate"></div>299    </div>300 301    <div class="list-item">302      <div class="item-flag">[IMG: Bahrain]</div>303      <div class="item-middle">304        <div class="code">BHD</div>305        <div class="name">Bahraini Dinar</div>306      </div>307      <div class="rate">0.37692</div>308    </div>309 310    <div class="list-item">311      <div class="item-flag">[IMG: Burundi]</div>312      <div class="item-middle">313        <div class="code">BIF</div>314        <div class="name">Burundian Franc</div>315      </div>316      <div class="rate">2,841.85729</div>317    </div>318 319    <div class="list-item">320      <div class="item-flag">[IMG: Bermuda]</div>321      <div class="item-middle">322        <div class="code">BMD</div>323        <div class="name">Bermudan Dollar</div>324      </div>325      <div class="rate">1</div>326    </div>327 328    <div class="list-item">329      <div class="item-flag">[IMG: Brunei]</div>330      <div class="item-middle">331        <div class="code">BND</div>332        <div class="name">Brunei Dollar</div>333      </div>334      <div class="rate">1.34887</div>335    </div>336 337    <div class="list-item">338      <div class="item-flag">[IMG: Bolivia]</div>339      <div class="item-middle">340        <div class="code">BOB</div>341        <div class="name">Bolivian Boliviano</div>342      </div>343      <div class="rate">6.90963</div>344    </div>345 346    <div class="list-item">347      <div class="item-flag">[IMG: Brazil]</div>348      <div class="item-middle">349        <div class="code">BRL</div>350        <div class="name">Brazilian Real</div>351      </div>352      <div class="rate">4.86362</div>353    </div>354 355    <div class="list-item">356      <div class="item-flag">[IMG: Bahamas]</div>357      <div class="item-middle">358        <div class="code">BSD</div>359        <div class="name">Bahamian Dollar</div>360      </div>361      <div class="rate">0.99977</div>362    </div>363  </div>364 365  <!-- Ad banner -->366  <div class="ad-banner">367    <div class="ad-close">×</div>368    <div class="ad-left">369      <div class="ad-info">i</div>370      <div class="ad-text">Facebook - World's largest online community.</div>371    </div>372    <div class="ad-cta">373      VISIT SITE374      <svg viewBox="0 0 24 24">375        <path d="M8 5l9 7-9 7V5z"></path>376      </svg>377    </div>378  </div>379 380  <div class="home-bar"></div>381</div>382</body>383</html>