GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Exchange Rates List - Mockup</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #ffffff;12 }13 14 /* Status bar */15 .status-bar {16 height: 90px;17 background: #000000;18 color: #ffffff;19 display: flex;20 align-items: center;21 justify-content: space-between;22 padding: 0 32px;23 font-size: 34px;24 box-sizing: border-box;25 }26 .status-icons { display: flex; align-items: center; gap: 24px; }27 .battery {28 width: 48px; height: 26px; border: 2px solid #fff; border-radius: 6px; position: relative;29 }30 .battery::after { content: ""; position: absolute; right: -8px; top: 8px; width: 6px; height: 10px; background: #fff; border-radius: 2px; }31 .battery .level { width: 30px; height: 18px; background: #ffffff; position: absolute; top: 2px; left: 2px; }32 33 /* App bar */34 .app-bar {35 height: 130px;36 background: #1e1e1e;37 color: #fff;38 display: flex;39 align-items: center;40 box-sizing: border-box;41 padding: 0 32px;42 }43 .app-bar .left, .app-bar .right {44 width: 140px; display: flex; align-items: center; justify-content: center;45 }46 .app-bar .title {47 flex: 1; text-align: center; font-weight: bold; font-size: 46px; letter-spacing: 1px;48 }49 .icon { width: 64px; height: 64px; fill: none; stroke: #ffffff; stroke-width: 6; }50 51 /* Banner image placeholder */52 .banner {53 height: 270px;54 background: #E0E0E0;55 border-top: 1px solid #BDBDBD;56 border-bottom: 1px solid #BDBDBD;57 display: flex; align-items: center; justify-content: center;58 color: #757575; font-size: 36px;59 }60 61 /* Info row */62 .info-row {63 background: #3a3a3a;64 color: #ffffff;65 display: grid;66 grid-template-columns: 1fr 1fr;67 padding: 34px 32px;68 gap: 22px;69 font-size: 36px;70 box-sizing: border-box;71 }72 .info-row .label { color: #e0e0e0; font-size: 34px; }73 .info-row .value { color: #cfcfcf; font-size: 34px; }74 75 /* Base currency header */76 .base-header {77 background: #eeeeee;78 border-top: 1px solid #dddddd;79 border-bottom: 1px solid #dddddd;80 height: 150px;81 display: flex; align-items: center;82 padding: 0 40px;83 box-sizing: border-box;84 gap: 28px;85 }86 .flag {87 width: 120px; height: 80px;88 background: #E0E0E0; border: 1px solid #BDBDBD;89 display: flex; align-items: center; justify-content: center;90 color: #757575; font-size: 24px;91 }92 .base-header .title {93 font-size: 54px; color: #4a4a4a; font-weight: bold;94 }95 96 /* Down arrow */97 .down-arrow {98 height: 120px; display: flex; align-items: center; justify-content: center;99 }100 .down-arrow svg { width: 64px; height: 64px; fill: none; stroke: #606060; stroke-width: 8; }101 102 /* Rates list card */103 .card {104 margin: 0 28px;105 background: #ffffff;106 border: 1px solid #e7e7e7;107 border-radius: 24px;108 box-shadow: 0 2px 4px rgba(0,0,0,0.05);109 overflow: hidden;110 }111 .row {112 display: flex; align-items: center;113 padding: 28px;114 box-sizing: border-box;115 border-bottom: 1px solid #efefef;116 gap: 22px;117 }118 .row:last-child { border-bottom: none; }119 .code-name { flex: 1; }120 .code { font-weight: bold; font-size: 42px; color: #1d1d1d; }121 .name { font-size: 34px; color: #5c9bd4; margin-top: 6px; }122 .rate { font-size: 40px; color: #1e6dcc; font-weight: bold; }123 124 /* Ad section */125 .ad {126 margin-top: 28px;127 background: #ffffff;128 border-top: 1px solid #eeeeee;129 padding: 24px 32px;130 display: flex; align-items: center; justify-content: space-between;131 box-sizing: border-box;132 }133 .ad .ad-left { display: flex; flex-direction: column; gap: 8px; }134 .ad .brand { color: #9e9e9e; font-size: 30px; }135 .ad .headline { color: #2b2b2b; font-size: 48px; }136 .ad .cta {137 background: #2f7bf1; color: #ffffff;138 padding: 24px 36px; border-radius: 60px; font-size: 40px; font-weight: bold;139 display: flex; align-items: center; gap: 18px;140 }141 .cta svg { width: 34px; height: 34px; stroke: #ffffff; stroke-width: 6; fill: none; }142 143 /* Bottom gesture bar */144 .gesture {145 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);146 width: 360px; height: 14px; background: #000000; border-radius: 8px;147 opacity: 0.8;148 }149</style>150</head>151<body>152<div id="render-target">153 154 <!-- Status Bar -->155 <div class="status-bar">156 <div>12:28</div>157 <div class="status-icons">158 <div style="width:22px;height:22px;border-radius:50%;border:3px solid #fff;"></div>159 <div style="width:22px;height:22px;background:#fff;border-radius:50%;"></div>160 <div style="width:22px;height:22px;border:3px solid #fff;border-radius:6px;"></div>161 <div class="battery"><div class="level"></div></div>162 </div>163 </div>164 165 <!-- App Bar -->166 <div class="app-bar">167 <div class="left">168 <svg class="icon" viewBox="0 0 24 24">169 <path d="M3 6h18M3 12h18M3 18h18" />170 </svg>171 </div>172 <div class="title">EXCHANGE RATES LIST</div>173 <div class="right">174 <svg class="icon" viewBox="0 0 24 24">175 <circle cx="12" cy="5" r="2.5" fill="#ffffff"></circle>176 <circle cx="12" cy="12" r="2.5" fill="#ffffff"></circle>177 <circle cx="12" cy="19" r="2.5" fill="#ffffff"></circle>178 </svg>179 </div>180 </div>181 182 <!-- Banner Image Placeholder -->183 <div class="banner">[IMG: Coins Photo]</div>184 185 <!-- Info Row -->186 <div class="info-row">187 <div>188 <div class="label">BASE CURRENCY</div>189 <div class="value">USD</div>190 </div>191 <div>192 <div class="label">LAST UPDATE</div>193 <div class="value">November 17, 2023 12:26 PM</div>194 </div>195 </div>196 197 <!-- Base currency header -->198 <div class="base-header">199 <div class="flag">[IMG: US Flag]</div>200 <div class="title">1 USD (U.S. Dollar)</div>201 </div>202 203 <!-- Down arrow -->204 <div class="down-arrow">205 <svg viewBox="0 0 24 24">206 <path d="M6 9l6 6 6-6" />207 </svg>208 </div>209 210 <!-- Rates list card -->211 <div class="card" style="margin-bottom: 24px;">212 <div class="row">213 <div class="flag" style="width:110px;height:70px;">[IMG: Bhutan Flag]</div>214 <div class="code-name">215 <div class="code">BTN</div>216 <div class="name">Bhutanese Ngultrum</div>217 </div>218 <div class="rate">13.43037</div>219 </div>220 221 <div class="row">222 <div class="flag" style="width:110px;height:70px;">[IMG: Botswana Flag]</div>223 <div class="code-name">224 <div class="code">BWP</div>225 <div class="name">Botswanan Pula</div>226 </div>227 <div class="rate">13.43037</div>228 </div>229 230 <div class="row">231 <div class="flag" style="width:110px;height:70px;">[IMG: Belarus Flag]</div>232 <div class="code-name">233 <div class="code">BYN</div>234 <div class="name">New Belarusian Ruble</div>235 </div>236 <div class="rate">3.29386</div>237 </div>238 239 <div class="row">240 <div class="flag" style="width:110px;height:70px;">[IMG: Belarus Flag]</div>241 <div class="code-name">242 <div class="code">BYR</div>243 <div class="name">Belarusian Ruble</div>244 </div>245 <div class="rate">19,600.06897</div>246 </div>247 248 <div class="row">249 <div class="flag" style="width:110px;height:70px;">[IMG: Belize Flag]</div>250 <div class="code-name">251 <div class="code">BZD</div>252 <div class="name">Belize Dollar</div>253 </div>254 <div class="rate">2.01521</div>255 </div>256 257 <div class="row">258 <div class="flag" style="width:110px;height:70px;">[IMG: Canada Flag]</div>259 <div class="code-name">260 <div class="code">CAD</div>261 <div class="name">Canadian Dollar</div>262 </div>263 <div class="rate">1.37517</div>264 </div>265 266 <div class="row">267 <div class="flag" style="width:110px;height:70px;">[IMG: Congo Flag]</div>268 <div class="code-name">269 <div class="code">CDF</div>270 <div class="name">Congolese Franc</div>271 </div>272 <div class="rate">2,626.00937</div>273 </div>274 275 <div class="row">276 <div class="flag" style="width:110px;height:70px;">[IMG: Switzerland Flag]</div>277 <div class="code-name">278 <div class="code">CHF</div>279 <div class="name">Swiss Franc</div>280 </div>281 <div class="rate">0.8885</div>282 </div>283 </div>284 285 <!-- Ad section -->286 <div class="ad">287 <div class="ad-left">288 <div class="brand">Facebook®</div>289 <div class="headline">Go to Facebook</div>290 </div>291 <div class="cta">292 VISIT SITE293 <svg viewBox="0 0 24 24">294 <path d="M8 5l8 7-8 7" />295 </svg>296 </div>297 </div>298 299 <!-- Bottom gesture bar -->300 <div class="gesture"></div>301 302</div>303</body>304</html>