GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Exchange Rate Adjustment</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, 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: #ffffff;22 font-size: 34px;23 display: flex;24 align-items: center;25 padding: 0 30px;26 box-sizing: border-box;27 }28 .status-left { flex: 1; }29 .status-right { display: flex; gap: 22px; align-items: center; }30 .dot { width: 14px; height: 14px; background: #ffffff; border-radius: 50%; opacity: 0.7; }31 32 /* App bar */33 .app-bar {34 height: 130px;35 background: #2b2b2b;36 color: #ffffff;37 display: flex;38 align-items: center;39 padding: 0 30px;40 box-sizing: border-box;41 }42 .app-title {43 flex: 1;44 text-align: center;45 font-weight: 700;46 font-size: 44px;47 letter-spacing: 1px;48 }49 .icon-btn { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }50 51 /* Banner image */52 .banner {53 height: 300px;54 background: #E0E0E0;55 border-top: 1px solid #BDBDBD;56 border-bottom: 1px solid #BDBDBD;57 display: flex;58 justify-content: center;59 align-items: center;60 color: #555;61 font-size: 36px;62 }63 64 /* Currency row */65 .currency-row {66 background: #2b2b2b;67 color: #ffffff;68 display: flex;69 padding: 26px 30px;70 box-sizing: border-box;71 align-items: center;72 gap: 40px;73 }74 .currency {75 flex: 1;76 display: flex;77 align-items: center;78 gap: 22px;79 }80 .flag {81 width: 66px;82 height: 44px;83 background: #E0E0E0;84 border: 1px solid #BDBDBD;85 display: flex;86 justify-content: center;87 align-items: center;88 color: #757575;89 font-size: 20px;90 }91 .currency .code {92 font-size: 50px;93 font-weight: 700;94 }95 .currency .name {96 color: #cfcfcf;97 font-size: 26px;98 }99 100 /* Controls row */101 .controls {102 display: flex;103 padding: 20px 20px;104 gap: 20px;105 box-sizing: border-box;106 background: #ffffff;107 border-top: 1px solid #e2e2e2;108 }109 .control-box {110 flex: 1;111 border: 2px solid #333;112 background: #f7f7f7;113 height: 120px;114 display: flex;115 align-items: center;116 justify-content: center;117 gap: 16px;118 font-size: 42px;119 font-weight: 600;120 color: #333;121 box-sizing: border-box;122 }123 .control-sub { font-size: 34px; font-weight: 500; color: #666; }124 125 /* Chart area */126 .chart-area {127 height: 360px;128 margin: 0 20px;129 border: 1px solid #ddd;130 background: linear-gradient(180deg, rgba(179,223,179,0.45), rgba(179,223,179,0.45)) no-repeat;131 background-size: 100% 65%;132 background-position: bottom;133 position: relative;134 }135 .chart-label {136 position: absolute;137 left: 16px;138 top: 16px;139 color: #9e9e9e;140 font-size: 28px;141 }142 143 /* Range tabs */144 .tabs {145 display: flex;146 gap: 18px;147 padding: 20px;148 box-sizing: border-box;149 }150 .tab {151 flex: 1;152 height: 92px;153 border-radius: 6px;154 background: #efefef;155 display: flex;156 align-items: center;157 justify-content: center;158 font-size: 34px;159 color: #757575;160 }161 .tab.active { border: 2px solid #d33; color: #d33; background: #f9f9f9; }162 163 /* Conversion header */164 .convert-header {165 background: #cfcfcf;166 height: 120px;167 display: flex;168 align-items: center;169 padding: 0 26px;170 box-sizing: border-box;171 gap: 26px;172 }173 .convert-col { display: flex; align-items: center; gap: 18px; font-size: 40px; font-weight: 600; color: #333; }174 .convert-center { flex: 1; text-align: center; color: #d33; font-weight: 700; font-size: 36px; }175 176 /* Table of rates */177 .table {178 margin-top: 6px;179 }180 .row {181 display: flex;182 padding: 22px 30px;183 box-sizing: border-box;184 border-bottom: 1px solid #eee;185 font-size: 38px;186 color: #333;187 }188 .row.header .left { color: #1a57a8; font-weight: 700; }189 .left { flex: 1; }190 .right { width: 420px; text-align: right; color: #1a57a8; }191 192 /* Ad banner */193 .ad {194 position: absolute;195 left: 0;196 right: 0;197 bottom: 120px;198 border-top: 1px solid #e6e6e6;199 background: #ffffff;200 display: flex;201 align-items: center;202 padding: 22px 28px;203 box-sizing: border-box;204 gap: 22px;205 }206 .app-icon {207 width: 100px;208 height: 100px;209 background: #E0E0E0;210 border: 1px solid #BDBDBD;211 border-radius: 18px;212 display: flex;213 justify-content: center;214 align-items: center;215 color: #757575;216 font-size: 20px;217 }218 .ad-info { flex: 1; }219 .ad-title { font-size: 36px; font-weight: 600; color: #222; }220 .ad-sub { font-size: 30px; color: #666; margin-top: 6px; }221 .install-btn {222 width: 220px;223 height: 86px;224 background: #2e7d32;225 color: #fff;226 border: none;227 border-radius: 43px;228 font-size: 34px;229 font-weight: 700;230 }231 232 /* Gesture pill */233 .gesture {234 position: absolute;235 bottom: 40px;236 left: 50%;237 transform: translateX(-50%);238 width: 260px;239 height: 16px;240 background: #000;241 border-radius: 8px;242 opacity: 0.1;243 }244 245 /* Small helpers */246 .tiny { font-size: 26px; color: #9e9e9e; }247 .percent { color: #d33; }248 svg { display: block; }249</style>250</head>251<body>252<div id="render-target">253 254 <!-- Status bar -->255 <div class="status-bar">256 <div class="status-left">12:21</div>257 <div class="status-right">258 <div class="dot"></div>259 <div class="dot" style="opacity:.4"></div>260 <div class="dot" style="opacity:.4"></div>261 <div class="dot"></div>262 </div>263 </div>264 265 <!-- App bar -->266 <div class="app-bar">267 <div class="icon-btn">268 <svg width="60" height="60" viewBox="0 0 24 24" fill="#fff">269 <path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/>270 </svg>271 </div>272 <div class="app-title">EXCHANGE RATE ADJUSTMENT</div>273 <div class="icon-btn">274 <svg width="60" height="60" viewBox="0 0 24 24" fill="#fff">275 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>276 </svg>277 </div>278 </div>279 280 <!-- Banner image -->281 <div class="banner">[IMG: Market Chart]</div>282 283 <!-- Currency row -->284 <div class="currency-row">285 <div class="currency">286 <div class="code">BRL</div>287 <div class="flag">[IMG: Flag BR]</div>288 <svg width="26" height="26" viewBox="0 0 24 24" fill="#c33">289 <path d="M12 15l-5-5h10z"/>290 </svg>291 <div class="name">Brazilian Real</div>292 </div>293 <div class="currency">294 <div class="code">GBP</div>295 <div class="flag">[IMG: Flag GB]</div>296 <svg width="26" height="26" viewBox="0 0 24 24" fill="#3aa">297 <path d="M12 15l-5-5h10z"/>298 </svg>299 <div class="name">British Pound Sterling</div>300 </div>301 </div>302 303 <!-- Controls -->304 <div class="controls">305 <div class="control-box">306 <span style="color:#d33; font-weight:700">0</span>307 <span class="control-sub">%</span>308 </div>309 <div class="control-box">310 <svg width="42" height="42" viewBox="0 0 24 24" fill="#666">311 <path d="M3 10l9-7 9 7v9H3zM5 11v6h14v-6l-7-5z"/>312 </svg>313 <span>ADJUST</span>314 </div>315 <div class="control-box">316 <span>1</span>317 <svg width="42" height="42" viewBox="0 0 24 24" fill="#666">318 <path d="M3 3h18v18H3zM7 7h3v3H7zm7 0h3v3h-3zM7 13h3v3H7zm7 6v-3h3v3z"/>319 </svg>320 </div>321 <div class="control-box">322 <span>APPLY</span>323 </div>324 </div>325 326 <!-- Chart -->327 <div class="chart-area">328 <div class="chart-label">GBP/BRL</div>329 </div>330 331 <!-- Tabs -->332 <div class="tabs">333 <div class="tab active">10D</div>334 <div class="tab">1M</div>335 <div class="tab">3M</div>336 <div class="tab">6M</div>337 <div class="tab">1Y</div>338 <div class="tab">2Y</div>339 </div>340 341 <!-- Conversion header -->342 <div class="convert-header">343 <div class="convert-col">344 <div class="flag" style="width:70px;height:46px;">[IMG: Flag BR]</div>345 <div>BRL</div>346 </div>347 <div class="convert-center">348 <svg width="70" height="40" viewBox="0 0 24 24" fill="#666" style="vertical-align: middle;">349 <path d="M4 12h14l-5 5 1.4 1.4L22.8 12 14.4 5.6 13 7l5 5H4z"/>350 </svg>351 <div class="percent">0%</div>352 </div>353 <div class="convert-col" style="justify-content:flex-end; flex:1;">354 <div class="flag" style="width:70px;height:46px;">[IMG: Flag GB]</div>355 <div>GBP</div>356 </div>357 </div>358 359 <!-- Table -->360 <div class="table">361 <div class="row header">362 <div class="left">1</div>363 <div class="right">0.16563</div>364 </div>365 <div class="row">366 <div class="left">1</div>367 <div class="right" style="color:#333;">0.16563</div>368 </div>369 <div class="row">370 <div class="left">2</div>371 <div class="right" style="color:#333;">0.33126</div>372 </div>373 <div class="row">374 <div class="left">5</div>375 <div class="right" style="color:#333;">0.82816</div>376 </div>377 <div class="row">378 <div class="left">10</div>379 <div class="right" style="color:#333;">1.65632</div>380 </div>381 <div class="row">382 <div class="left">20</div>383 <div class="right" style="color:#333;">3.31265</div>384 </div>385 <div class="row">386 <div class="left">50</div>387 <div class="right" style="color:#333;">8.28162</div>388 </div>389 <div class="row">390 <div class="left">100</div>391 <div class="right" style="color:#333;">16.56324</div>392 </div>393 </div>394 395 <!-- Ad banner -->396 <div class="ad">397 <div class="app-icon">[IMG: App Icon]</div>398 <div class="ad-info">399 <div class="ad-title">HealthifyMe Weight Loss Coach</div>400 <div class="ad-sub">4.5 ★ FREE</div>401 </div>402 <button class="install-btn">INSTALL</button>403 </div>404 405 <div class="gesture"></div>406</div>407</body>408</html>