GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Exchange Rates List - Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Status bar */18 .status-bar {19 height: 90px;20 background: #000000;21 color: #fff;22 display: flex;23 align-items: center;24 padding: 0 36px;25 box-sizing: border-box;26 font-weight: 600;27 }28 .status-bar .left { flex: 0 0 auto; font-size: 36px; }29 .status-bar .right {30 margin-left: auto;31 display: flex;32 align-items: center;33 gap: 22px;34 }35 .status-icon {36 width: 28px; height: 28px; background: #fff; border-radius: 4px; opacity: 0.9;37 }38 39 /* App bar */40 .app-bar {41 height: 160px;42 background: #1f1f1f;43 color: #ffffff;44 display: flex;45 align-items: center;46 padding: 0 36px;47 box-sizing: border-box;48 }49 .app-title {50 font-size: 48px;51 font-weight: 700;52 letter-spacing: 1px;53 margin-left: 24px;54 }55 .app-bar .spacer { flex: 1; }56 .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }57 58 /* Image placeholder */59 .img-placeholder {60 background: #E0E0E0;61 border: 1px solid #BDBDBD;62 color: #757575;63 display: flex;64 align-items: center;65 justify-content: center;66 text-align: center;67 }68 69 /* Banner coins */70 .banner {71 width: 100%;72 height: 260px;73 }74 75 /* Info row */76 .info-row {77 background: #3a3a3a;78 color: #eaeaea;79 padding: 24px 36px;80 box-sizing: border-box;81 display: grid;82 grid-template-columns: 1fr 1fr;83 grid-row-gap: 18px;84 align-items: center;85 font-size: 36px;86 }87 .info-row .label { color: #d0d0d0; text-transform: uppercase; }88 .info-row .value { color: #f0f0f0; }89 90 /* Base currency card */91 .base-card {92 margin: 18px 24px;93 background: #eeeeee;94 border-radius: 8px;95 padding: 36px;96 box-sizing: border-box;97 display: flex;98 align-items: center;99 gap: 28px;100 }101 .base-flag { width: 140px; height: 96px; font-size: 28px; }102 .base-text {103 font-size: 54px;104 font-weight: 700;105 color: #4a4a4a;106 }107 108 /* Arrow */109 .down-arrow {110 display: flex;111 justify-content: center;112 padding: 18px 0 6px;113 }114 115 /* List card */116 .list-card {117 margin: 18px 24px;118 background: #ffffff;119 border-radius: 24px;120 box-shadow: 0 4px 12px rgba(0,0,0,0.08);121 overflow: hidden;122 }123 .rate-row {124 display: flex;125 align-items: center;126 padding: 26px 32px;127 box-sizing: border-box;128 border-bottom: 1px solid #f0f0f0;129 gap: 28px;130 }131 .rate-row:last-child { border-bottom: none; }132 .flag {133 width: 120px; height: 80px;134 border-radius: 8px;135 font-size: 24px;136 }137 .currency-detail { flex: 1; }138 .code {139 font-size: 40px;140 font-weight: 800;141 color: #222;142 margin-bottom: 8px;143 }144 .name {145 font-size: 36px;146 color: #5a7184;147 }148 .value {149 font-size: 42px;150 font-weight: 700;151 color: #1f4f8f;152 text-align: right;153 min-width: 220px;154 }155 156 /* Ad bar */157 .ad-bar {158 position: absolute;159 left: 0; right: 0;160 bottom: 90px;161 height: 220px;162 background: #ffffff;163 border-top: 1px solid #e7e7e7;164 display: flex;165 align-items: center;166 padding: 0 32px;167 box-sizing: border-box;168 gap: 26px;169 }170 .ad-icon { width: 140px; height: 140px; border-radius: 24px; font-size: 28px; }171 .ad-content { flex: 1; }172 .ad-title { font-size: 40px; font-weight: 700; color: #222; }173 .ad-sub { font-size: 32px; color: #758395; margin-top: 8px; }174 .ad-install {175 background: #2e7d32;176 color: #fff;177 font-size: 40px;178 font-weight: 700;179 padding: 22px 40px;180 border-radius: 54px;181 }182 183 /* Home indicator */184 .home-indicator {185 position: absolute;186 left: 50%;187 transform: translateX(-50%);188 bottom: 24px;189 width: 360px;190 height: 14px;191 background: #000000;192 border-radius: 7px;193 opacity: 0.8;194 }195</style>196</head>197<body>198<div id="render-target">199 200 <!-- Status bar -->201 <div class="status-bar">202 <div class="left">12:29</div>203 <div class="right">204 <div class="status-icon"></div>205 <div class="status-icon"></div>206 <div class="status-icon"></div>207 <div class="status-icon"></div>208 <div class="status-icon"></div>209 </div>210 </div>211 212 <!-- App bar with title and icons -->213 <div class="app-bar">214 <div class="icon-btn">215 <svg width="54" height="54" viewBox="0 0 24 24" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">216 <path d="M2 5h20v2H2zM2 11h20v2H2zM2 17h20v2H2z"/>217 </svg>218 </div>219 <div class="app-title">EXCHANGE RATES LIST</div>220 <div class="spacer"></div>221 <div class="icon-btn">222 <svg width="54" height="54" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">223 <circle cx="12" cy="5" r="2" fill="#ffffff"></circle>224 <circle cx="12" cy="12" r="2" fill="#ffffff"></circle>225 <circle cx="12" cy="19" r="2" fill="#ffffff"></circle>226 </svg>227 </div>228 </div>229 230 <!-- Banner image placeholder -->231 <div class="banner img-placeholder">[IMG: Coins closeup banner]</div>232 233 <!-- Info row -->234 <div class="info-row">235 <div class="label">Base Currency</div>236 <div class="value">USD</div>237 <div class="label">Last Update</div>238 <div class="value">November 17, 2023 12:26 PM</div>239 </div>240 241 <!-- Base currency card -->242 <div class="base-card">243 <div class="base-flag img-placeholder">[IMG: US Flag]</div>244 <div class="base-text">1 USD (U.S. Dollar)</div>245 </div>246 247 <!-- Down arrow -->248 <div class="down-arrow">249 <svg width="72" height="72" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">250 <path d="M12 4v12" stroke="#6b6b6b" stroke-width="2" stroke-linecap="round"></path>251 <path d="M6 10l6 6 6-6" stroke="#6b6b6b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>252 </svg>253 </div>254 255 <!-- Rates list -->256 <div class="list-card">257 <div class="rate-row">258 <div class="flag img-placeholder">[IMG: Flag]</div>259 <div class="currency-detail">260 <div class="name" style="font-size:40px; color:#1d5ea8;">Danish Krone</div>261 </div>262 <div class="value">6.97200</div>263 </div>264 265 <div class="rate-row">266 <div class="flag img-placeholder">[IMG: Dominican Flag]</div>267 <div class="currency-detail">268 <div class="code">DOP</div>269 <div class="name">Dominican Peso</div>270 </div>271 <div class="value">56.85084</div>272 </div>273 274 <div class="rate-row">275 <div class="flag img-placeholder">[IMG: Algeria Flag]</div>276 <div class="currency-detail">277 <div class="code">DZD</div>278 <div class="name">Algerian Dinar</div>279 </div>280 <div class="value">134.44508</div>281 </div>282 283 <div class="rate-row">284 <div class="flag img-placeholder">[IMG: Egypt Flag]</div>285 <div class="currency-detail">286 <div class="code">EGP</div>287 <div class="name">Egyptian Pound</div>288 </div>289 <div class="value">30.92201</div>290 </div>291 292 <div class="rate-row">293 <div class="flag img-placeholder">[IMG: Eritrea Flag]</div>294 <div class="currency-detail">295 <div class="code">ERN</div>296 <div class="name">Eritrean Nakfa</div>297 </div>298 <div class="value">15.00006</div>299 </div>300 301 <div class="rate-row">302 <div class="flag img-placeholder">[IMG: Ethiopia Flag]</div>303 <div class="currency-detail">304 <div class="code">ETB</div>305 <div class="name">Ethiopian Birr</div>306 </div>307 <div class="value">55.91922</div>308 </div>309 310 <div class="rate-row">311 <div class="flag img-placeholder">[IMG: EU Flag]</div>312 <div class="currency-detail">313 <div class="code">EUR</div>314 <div class="name">Euro</div>315 </div>316 <div class="value">0.92135</div>317 </div>318 319 <div class="rate-row">320 <div class="flag img-placeholder">[IMG: Fiji Flag]</div>321 <div class="currency-detail">322 <div class="code">FJD</div>323 <div class="name">Fijian Dollar</div>324 </div>325 <div class="value">2.28891</div>326 </div>327 </div>328 329 <!-- Ad bar at bottom -->330 <div class="ad-bar">331 <div class="ad-icon img-placeholder">[IMG: App Icon]</div>332 <div class="ad-content">333 <div class="ad-title">Motilal Oswal Share Market App</div>334 <div class="ad-sub">3.9 ★ FREE</div>335 </div>336 <div class="ad-install">INSTALL</div>337 </div>338 339 <!-- Home indicator -->340 <div class="home-indicator"></div>341 342</div>343</body>344</html>