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; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #FFFFFF;15  }16 17  /* Status bar (simulated) */18  .status-bar {19    height: 90px;20    background: #000;21    color: #fff;22    display: flex;23    align-items: center;24    padding: 0 28px;25    box-sizing: border-box;26    font-size: 28px;27    gap: 24px;28  }29  .status-dot { width: 18px; height: 18px; background: #fff; border-radius: 50%; opacity: 0.9; }30 31  /* App bar */32  .appbar {33    height: 130px;34    background: #181818;35    color: #fff;36    display: flex;37    align-items: center;38    box-sizing: border-box;39    padding: 0 32px;40    gap: 24px;41  }42  .appbar-title {43    font-weight: 700;44    letter-spacing: 2px;45    font-size: 40px;46  }47  .spacer { flex: 1; }48 49  .icon {50    width: 56px;51    height: 56px;52    display: inline-flex;53    align-items: center;54    justify-content: center;55    color: #fff;56  }57  .coins-banner {58    width: 100%;59    height: 280px;60    background: #E0E0E0;61    border-top: 1px solid #BDBDBD;62    border-bottom: 1px solid #BDBDBD;63    display: flex;64    align-items: center;65    justify-content: center;66    color: #757575;67    font-size: 34px;68    box-sizing: border-box;69  }70 71  .info-bar {72    background: #333539;73    color: #ECECEC;74    display: grid;75    grid-template-columns: 1fr 1fr;76    padding: 28px 34px;77    gap: 10px;78    align-items: center;79    font-size: 34px;80  }81  .info-label { color: #DCDCDC; opacity: 0.95; }82  .info-value { color: #BFBFBF; }83 84  .base-card {85    background: #efefef;86    margin: 0;87    padding: 22px 32px;88    display: flex;89    align-items: center;90    gap: 24px;91    border-top: 1px solid #ddd;92    border-bottom: 1px solid #ddd;93  }94  .flag {95    width: 120px;96    height: 84px;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  }105  .base-text {106    font-size: 52px;107    color: #333;108    font-weight: 700;109    letter-spacing: 0.5px;110  }111 112  .arrow-wrap {113    height: 90px;114    display: flex;115    align-items: center;116    justify-content: center;117  }118 119  .list-card {120    margin: 18px 22px 0 22px;121    background: #fff;122    border-radius: 26px;123    border: 1px solid #e9e9e9;124    box-shadow: 0 2px 6px rgba(0,0,0,0.06);125    overflow: hidden;126  }127 128  .row {129    display: grid;130    grid-template-columns: 180px 1fr 320px;131    align-items: center;132    padding: 28px 26px;133    border-bottom: 1px solid #eee;134    box-sizing: border-box;135  }136  .row:last-child { border-bottom: none; }137 138  .row .flag {139    width: 108px;140    height: 72px;141    font-size: 22px;142  }143  .code {144    font-size: 42px;145    font-weight: 700;146    color: #1a1a1a;147    line-height: 1.2;148  }149  .name {150    font-size: 34px;151    color: #1E3A8A;152    margin-top: 6px;153  }154  .value {155    text-align: right;156    font-size: 42px;157    color: #1E3A8A;158    font-weight: 700;159  }160 161  /* Bottom ad */162  .ad-bar {163    position: absolute;164    left: 0; right: 0;165    bottom: 120px;166    margin: 0 0;167    background: #fff;168    border-top: 1px solid #E5E5E5;169    padding: 28px 32px;170    display: flex;171    align-items: center;172    gap: 22px;173    box-sizing: border-box;174  }175  .ad-icon {176    width: 36px; height: 36px; border-radius: 50%;177    border: 1px solid #6CC7FF; color: #2F80ED;178    display: flex; align-items: center; justify-content: center;179    font-weight: 700;180  }181  .ad-text {182    flex: 1;183    font-size: 40px;184    color: #333;185  }186  .ad-btn {187    background: #2F80ED;188    color: #fff;189    padding: 22px 36px;190    border-radius: 999px;191    font-size: 38px;192    font-weight: 700;193    display: inline-flex;194    align-items: center;195    gap: 18px;196  }197 198  /* Safe-area indicator bar at very bottom */199  .home-indicator {200    position: absolute;201    bottom: 36px;202    left: 50%;203    transform: translateX(-50%);204    width: 260px;205    height: 10px;206    background: #111;207    border-radius: 8px;208    opacity: 0.15;209  }210</style>211</head>212<body>213<div id="render-target">214 215  <div class="status-bar">216    <div style="font-weight:700;">12:29</div>217    <div class="status-dot"></div>218    <div class="status-dot"></div>219    <div class="status-dot"></div>220    <div class="spacer"></div>221    <div class="status-dot"></div>222    <div class="status-dot"></div>223  </div>224 225  <div class="appbar">226    <div class="icon" aria-label="Menu">227      <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">228        <rect x="3" y="6" width="18" height="2"></rect>229        <rect x="3" y="11" width="18" height="2"></rect>230        <rect x="3" y="16" width="18" height="2"></rect>231      </svg>232    </div>233    <div class="appbar-title">EXCHANGE RATES LIST</div>234    <div class="spacer"></div>235    <div class="icon" aria-label="More">236      <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">237        <circle cx="12" cy="5" r="2.2"></circle>238        <circle cx="12" cy="12" r="2.2"></circle>239        <circle cx="12" cy="19" r="2.2"></circle>240      </svg>241    </div>242  </div>243 244  <div class="coins-banner">[IMG: Coins Banner]</div>245 246  <div class="info-bar">247    <div>248      <div class="info-label">BASE CURRENCY</div>249      <div style="height: 12px;"></div>250      <div class="info-label">LAST UPDATE</div>251    </div>252    <div style="text-align: right;">253      <div class="info-value" style="color:#EAEAEA;">USD</div>254      <div style="height: 12px;"></div>255      <div class="info-value">November 17, 2023 12:26 PM</div>256    </div>257  </div>258 259  <div class="base-card">260    <div class="flag">[IMG: US Flag]</div>261    <div class="base-text">1 USD (U.S. Dollar)</div>262  </div>263 264  <div class="arrow-wrap">265    <svg width="60" height="60" viewBox="0 0 24 24" fill="none">266      <path d="M12 4v12" stroke="#777" stroke-width="2" stroke-linecap="round"></path>267      <path d="M6 12l6 8 6-8" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>268    </svg>269  </div>270 271  <div class="list-card">272    <!-- Row: Chilean Peso -->273    <div class="row">274      <div class="flag">[IMG: Chile Flag]</div>275      <div>276        <div class="code">CLP</div>277        <div class="name">Chilean Peso</div>278      </div>279      <div class="value">901.432</div>280    </div>281 282    <div class="row">283      <div class="flag">[IMG: China Flag]</div>284      <div>285        <div class="code">CNY</div>286        <div class="name">Chinese Yuan</div>287      </div>288      <div class="value">7.24552</div>289    </div>290 291    <div class="row">292      <div class="flag">[IMG: Colombia Flag]</div>293      <div>294        <div class="code">COP</div>295        <div class="name">Colombian Peso</div>296      </div>297      <div class="value">4,087.46463</div>298    </div>299 300    <div class="row">301      <div class="flag">[IMG: Costa Rica Flag]</div>302      <div>303        <div class="code">CRC</div>304        <div class="name">Costa Rican Colón</div>305      </div>306      <div class="value">530.36214</div>307    </div>308 309    <div class="row">310      <div class="flag">[IMG: Cuba Flag]</div>311      <div>312        <div class="code">CUC</div>313        <div class="name">Cuban Convertible Peso</div>314      </div>315      <div class="value">1</div>316    </div>317 318    <div class="row">319      <div class="flag">[IMG: Cuba Flag]</div>320      <div>321        <div class="code">CUP</div>322        <div class="name">Cuban Peso</div>323      </div>324      <div class="value">26.50009</div>325    </div>326 327    <div class="row">328      <div class="flag">[IMG: Cape Verde Flag]</div>329      <div>330        <div class="code">CVE</div>331        <div class="name">Cape Verdean Escudo</div>332      </div>333      <div class="value">101.599</div>334    </div>335 336    <div class="row">337      <div class="flag">[IMG: Czech Flag]</div>338      <div>339        <div class="code">CZK</div>340        <div class="name">Czech Republic Koruna</div>341      </div>342      <div class="value">22.54199</div>343    </div>344  </div>345 346  <div class="ad-bar">347    <div class="ad-icon">i</div>348    <div class="ad-text">Facebook - World's largest online community.</div>349    <div class="ad-btn">350      VISIT SITE351      <svg width="32" height="32" viewBox="0 0 24 24" fill="#fff">352        <path d="M8 5l8 7-8 7" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>353      </svg>354    </div>355  </div>356 357  <div class="home-indicator"></div>358</div>359</body>360</html>