GD-ML/AndroidCode
13.4k
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>Currency History UI</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: Arial, Helvetica, sans-serif;13 color: #222;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background:21 linear-gradient(0deg, #cfcfcf 0%, #d5d5d5 100%),22 repeating-linear-gradient(0deg, rgba(255,255,255,0.08) 0px, rgba(255,255,255,0.08) 2px, rgba(0,0,0,0.03) 3px, rgba(0,0,0,0.03) 6px);23 }24 25 /* Top status bar */26 .status-bar {27 height: 150px;28 background: #6b6b6b;29 color: #fff;30 display: flex;31 align-items: center;32 padding: 0 32px;33 box-sizing: border-box;34 font-size: 40px;35 }36 .status-bar .right-icons {37 margin-left: auto;38 display: flex;39 gap: 22px;40 align-items: center;41 }42 .status-bar .dot { width: 14px; height: 14px; background:#eaeaea; border-radius:50%; opacity:0.9; }43 .status-bar .rect { width: 28px; height: 28px; background:#eaeaea; border-radius:6px; opacity:0.9; }44 45 /* Header */46 .header {47 height: 120px;48 display: flex;49 align-items: center;50 padding: 0 36px;51 box-sizing: border-box;52 }53 .header-title {54 display: flex;55 align-items: center;56 gap: 18px;57 font-size: 58px;58 font-weight: 600;59 color: #1f1f1f;60 }61 .header .action {62 margin-left: auto;63 }64 .icon-btn {65 width: 60px;66 height: 60px;67 }68 .icon {69 width: 60px;70 height: 60px;71 fill: none;72 stroke: #333;73 stroke-width: 6;74 }75 76 /* Currency switcher card */77 .card {78 margin: 18px 32px 16px;79 padding: 24px 28px;80 background: #d9d9d9;81 border-radius: 26px;82 box-shadow: 0 3px 0 rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.5);83 display: flex;84 align-items: center;85 gap: 26px;86 }87 .flag {88 width: 132px;89 height: 88px;90 background: #E0E0E0;91 border: 1px solid #BDBDBD;92 border-radius: 14px;93 display: flex;94 justify-content: center;95 align-items: center;96 color: #757575;97 font-size: 26px;98 }99 .currency {100 display: flex;101 align-items: center;102 gap: 14px;103 font-size: 46px;104 color: #333;105 margin-right: 12px;106 }107 .chev {108 width: 36px; height: 36px;109 }110 .swap {111 margin: 0 24px;112 width: 60px;113 height: 60px;114 }115 116 /* Amount and today row */117 .amount-row {118 display: flex;119 align-items: flex-end;120 justify-content: space-between;121 padding: 0 36px;122 box-sizing: border-box;123 margin-top: 10px;124 }125 .amount-box {126 width: 640px;127 height: 120px;128 background: #d9d9d9;129 border-radius: 18px;130 box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 0 rgba(0,0,0,0.08);131 display: flex;132 align-items: center;133 padding: 0 24px;134 font-size: 54px;135 color: #333;136 }137 .today {138 text-align: right;139 margin-right: 10px;140 }141 .today .label {142 font-size: 28px;143 color: #8a8a8a;144 }145 .today .value {146 font-size: 64px;147 font-weight: 600;148 color: #1f1f1f;149 margin-top: 8px;150 }151 152 /* Range bar */153 .range-bar {154 margin-top: 24px;155 height: 120px;156 background: #cdcdcd;157 border-top: 1px solid rgba(0,0,0,0.08);158 border-bottom: 1px solid rgba(0,0,0,0.08);159 display: flex;160 align-items: center;161 padding: 0 36px;162 box-sizing: border-box;163 gap: 26px;164 }165 .range-title {166 font-size: 44px;167 font-weight: 600;168 color: #222;169 }170 .range-dates {171 font-size: 34px;172 color: #454545;173 }174 .range-chevron {175 margin-left: auto;176 width: 44px; height: 44px;177 }178 179 /* Chart card */180 .chart-card {181 margin: 24px 28px;182 height: 1000px;183 border-radius: 28px;184 padding: 16px;185 box-sizing: border-box;186 background: rgba(120, 200, 240, 0.35);187 border: 1px solid rgba(0,0,0,0.1);188 box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 0 rgba(0,0,0,0.08);189 position: relative;190 }191 .chart-placeholder {192 position: absolute;193 inset: 12px;194 border-radius: 22px;195 display: flex;196 align-items: center;197 justify-content: center;198 color: rgba(0,0,0,0.35);199 font-size: 32px;200 pointer-events: none;201 }202 .chart-hints {203 position: absolute;204 top: 18px;205 left: 28px;206 right: 28px;207 display: flex;208 justify-content: space-between;209 font-size: 28px;210 color: rgba(0,0,0,0.25);211 }212 .spinner {213 position: absolute;214 top: 50%;215 left: 50%;216 width: 110px;217 height: 110px;218 transform: translate(-50%, -50%);219 border: 12px solid rgba(0,0,0,0.18);220 border-top-color: #000;221 border-radius: 50%;222 animation: spin 1s linear infinite;223 }224 @keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }225 226 /* Ad card */227 .ad-card {228 position: absolute;229 left: 0;230 bottom: 160px;231 width: 1080px;232 height: 220px;233 background: #fff;234 border-top: 1px solid rgba(0,0,0,0.12);235 box-shadow: 0 -2px 10px rgba(0,0,0,0.08);236 display: flex;237 align-items: center;238 padding: 0 26px;239 box-sizing: border-box;240 gap: 22px;241 }242 .ad-side {243 width: 40px;244 display: flex;245 flex-direction: column;246 align-items: center;247 gap: 10px;248 color: #58bfd1;249 font-size: 28px;250 }251 .ad-img {252 background: #E0E0E0;253 border: 1px solid #BDBDBD;254 color: #757575;255 display: flex;256 align-items: center;257 justify-content: center;258 }259 .ad-logo-round {260 width: 80px; height: 80px; border-radius: 50%;261 }262 .ad-logo-square {263 width: 110px; height: 110px; border-radius: 22px;264 }265 .ad-text {266 display: flex;267 flex-direction: column;268 justify-content: center;269 gap: 10px;270 }271 .ad-app-name {272 font-size: 46px;273 font-weight: 600;274 }275 .ad-sub {276 font-size: 32px;277 color: #555;278 }279 .ad-sub .star { color: #ffb300; }280 .ad-open {281 margin-left: auto;282 }283 .open-btn {284 width: 220px;285 height: 92px;286 border-radius: 46px;287 background: #2f8c53;288 color: #fff;289 font-size: 40px;290 font-weight: 600;291 border: none;292 }293 294 /* Bottom nav bar */295 .nav-bar {296 position: absolute;297 bottom: 0;298 left: 0;299 width: 1080px;300 height: 160px;301 background: #6b6b6b;302 }303 .gesture {304 position: absolute;305 bottom: 36px;306 left: 50%;307 transform: translateX(-50%);308 width: 320px;309 height: 12px;310 background: #e8e8e8;311 border-radius: 8px;312 opacity: 0.9;313 }314</style>315</head>316<body>317<div id="render-target">318 319 <!-- Status bar -->320 <div class="status-bar">321 <div>11:10</div>322 <div class="right-icons">323 <div class="dot"></div>324 <div class="rect"></div>325 <div class="rect"></div>326 <div class="dot"></div>327 <div class="rect"></div>328 </div>329 </div>330 331 <!-- Header row -->332 <div class="header">333 <div class="header-title">334 <svg class="icon-btn" viewBox="0 0 24 24">335 <path d="M15 6 L9 12 L15 18" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>336 </svg>337 <span>History</span>338 </div>339 <div class="action">340 <svg class="icon" viewBox="0 0 24 24">341 <path d="M20 12a8 8 0 1 0-2.3 5.7" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round"></path>342 <path d="M20 5v6h-6" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round"></path>343 </svg>344 </div>345 </div>346 347 <!-- Currency selector card -->348 <div class="card">349 <div class="flag">[IMG: UK Flag]</div>350 <div class="currency">351 <span>GBP</span>352 <svg class="chev" viewBox="0 0 24 24">353 <path d="M7 10 L12 15 L17 10" stroke="#555" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>354 </svg>355 </div>356 357 <svg class="swap" viewBox="0 0 24 24">358 <path d="M7 9h10M15 5l4 4M17 15H7M9 19l-4-4" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>359 </svg>360 361 <div class="flag">[IMG: Australia Flag]</div>362 <div class="currency" style="margin-left:auto;">363 <span>AUD</span>364 <svg class="chev" viewBox="0 0 24 24">365 <path d="M7 10 L12 15 L17 10" stroke="#555" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>366 </svg>367 </div>368 </div>369 370 <!-- Amount and today -->371 <div class="amount-row">372 <div class="amount-box">4,493.91</div>373 <div class="today">374 <div class="label">Today</div>375 <div class="value">959.43</div>376 </div>377 </div>378 379 <!-- Range bar -->380 <div class="range-bar">381 <span class="range-title">3 months</span>382 <span class="range-dates">Aug 19, 2023 - Nov 17, 2023</span>383 <svg class="range-chevron" viewBox="0 0 24 24">384 <path d="M9 7 L14 12 L9 17" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>385 </svg>386 </div>387 388 <!-- Chart card -->389 <div class="chart-card">390 <div class="chart-hints">391 <span>Min: 0.21</span>392 <span>Max: 0.22</span>393 </div>394 <div class="chart-placeholder">[IMG: Exchange Rate Chart]</div>395 <div class="spinner"></div>396 </div>397 398 <!-- Ad card -->399 <div class="ad-card">400 <div class="ad-side">401 <span>i</span>402 <span>x</span>403 </div>404 <div class="ad-img ad-logo-round">[IMG: Facebook Logo]</div>405 <div class="ad-img ad-logo-square">[IMG: Facebook App Icon]</div>406 <div class="ad-text">407 <div class="ad-app-name">Facebook</div>408 <div class="ad-sub">409 3.9 <span class="star">★</span> FREE410 </div>411 </div>412 <div class="ad-open">413 <button class="open-btn">Open</button>414 </div>415 </div>416 417 <!-- Bottom navigation bar -->418 <div class="nav-bar">419 <div class="gesture"></div>420 </div>421 422</div>423</body>424</html>