GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Charts UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Top status bar */17  .statusbar {18    height: 120px;19    background: #000;20    color: #fff;21    display: flex;22    align-items: center;23    padding: 0 40px;24    font-size: 38px;25    letter-spacing: 0.5px;26  }27  .statusbar .right {28    margin-left: auto;29    display: flex;30    align-items: center;31    gap: 32px;32  }33  .status-icon {34    width: 42px;35    height: 42px;36    display: inline-block;37  }38 39  /* App bar */40  .appbar {41    height: 160px;42    background: #fff;43    border-bottom: 1px solid #e9e9e9;44    display: flex;45    align-items: center;46    justify-content: center;47    position: relative;48  }49  .appbar-title {50    font-weight: 600;51    font-size: 54px;52    color: #111;53  }54  .profile-icon {55    position: absolute;56    left: 40px;57    width: 80px;58    height: 80px;59    border: 2px solid #bfbfbf;60    border-radius: 50%;61    display: flex;62    align-items: center;63    justify-content: center;64    color: #999;65    font-size: 40px;66  }67 68  /* Currency cards row */69  .currency-row {70    display: flex;71    align-items: center;72    justify-content: center;73    gap: 40px;74    padding: 36px 40px;75  }76  .currency-card {77    width: 440px;78    height: 150px;79    border: 1px solid #e2e2e2;80    border-radius: 28px;81    background: #fff;82    box-shadow: 0 1px 0 rgba(0,0,0,0.03);83    display: flex;84    align-items: center;85    padding: 30px;86    position: relative;87    gap: 22px;88  }89  .flag {90    width: 90px;91    height: 90px;92    background: #E0E0E0;93    border: 1px solid #BDBDBD;94    border-radius: 50%;95    display: flex;96    align-items: center;97    justify-content: center;98    color: #757575;99    font-size: 22px;100  }101  .currency-name {102    font-weight: 700;103    font-size: 44px;104    color: #111;105  }106  .caret {107    position: absolute;108    right: 26px;109  }110  .swap {111    width: 60px;112    height: 60px;113    border-radius: 12px;114    display: flex;115    align-items: center;116    justify-content: center;117    color: #888;118  }119 120  /* Rate headline */121  .rate-row {122    position: relative;123    padding: 8px 44px 0 44px;124  }125  .headline {126    font-size: 64px;127    font-weight: 800;128    color: #111;129    letter-spacing: -0.5px;130  }131  .pink-dot {132    display: inline-block;133    width: 26px;134    height: 26px;135    background: #ff8fa4;136    border-radius: 50%;137    vertical-align: middle;138    margin-left: 16px;139    box-shadow: inset 0 0 0 6px #ffe3e8;140  }141  .share-btn {142    position: absolute;143    right: 40px;144    top: 6px;145    width: 60px;146    height: 60px;147    display: flex;148    align-items: center;149    justify-content: center;150    color: #444;151  }152  .subline {153    margin-top: 12px;154    font-size: 38px;155    color: #18a05b;156  }157  .subline span {158    color: #777;159  }160 161  /* Time range pills */162  .range-tabs {163    display: flex;164    gap: 42px;165    padding: 36px 44px 18px 44px;166    align-items: center;167  }168  .tab {169    font-size: 36px;170    color: #555;171  }172  .tab.active {173    padding: 14px 26px;174    background: #1f54d9;175    color: #fff;176    border-radius: 30px;177  }178 179  /* Chart area */180  .chart-wrap {181    margin: 14px 40px 0 40px;182    position: relative;183    height: 880px;184    border-top: 2px solid #d7d7d7;185    border-bottom: 2px solid #d7d7d7;186  }187  .grid-line {188    position: absolute;189    left: 0;190    right: 0;191    height: 2px;192    background: #d1d1d1;193  }194  .grid-top { top: 140px; }195  .grid-mid { top: 440px; }196  .grid-bot { top: 740px; }197  .y-label {198    position: absolute;199    left: 0;200    transform: translateY(-50%);201    color: #6f6f6f;202    font-size: 34px;203  }204  .yl1 { top: 140px; }205  .yl2 { top: 440px; }206  .yl3 { top: 740px; }207 208  .chart-svg {209    position: absolute;210    left: 60px;211    right: 20px;212    top: 40px;213    bottom: 40px;214  }215  .chart-dot {216    position: absolute;217    right: 60px;218    top: 560px;219    width: 26px;220    height: 26px;221    background: #ff8fa4;222    border-radius: 50%;223    box-shadow: inset 0 0 0 6px #ffe3e8;224  }225 226  /* CTA Button */227  .cta {228    margin: 40px;229    height: 120px;230    border: 3px solid #1f54d9;231    border-radius: 26px;232    display: flex;233    align-items: center;234    justify-content: center;235    color: #1f54d9;236    font-weight: 700;237    font-size: 44px;238  }239 240  /* Stats */241  .stats {242    padding: 10px 40px 0 40px;243  }244  .stats h2 {245    font-size: 58px;246    font-weight: 800;247    margin: 10px 0 30px;248    color: #111;249  }250  .row {251    display: flex;252    justify-content: space-between;253    align-items: center;254    padding: 26px 0;255    font-size: 40px;256    color: #7b7b7b;257    border-top: 1px solid #eee;258  }259  .row .val {260    color: #222;261  }262 263  /* Bottom navigation */264  .bottom-nav {265    position: absolute;266    bottom: 0;267    left: 0;268    right: 0;269    height: 220px;270    background: #fff;271    border-top: 1px solid #e7e7e7;272    display: flex;273    align-items: center;274    justify-content: space-around;275    padding-bottom: 10px;276  }277  .nav-item {278    width: 200px;279    text-align: center;280    color: #7a7a7a;281    font-size: 30px;282  }283  .nav-item .icon-wrap {284    width: 80px; height: 80px; margin: 0 auto 14px;285    display: flex; align-items: center; justify-content: center;286    color: #6f6f6f;287  }288  .nav-item.active {289    color: #1f54d9;290  }291  .nav-item.active .icon-wrap { color: #1f54d9; }292  .nav-item.send .icon-wrap {293    width: 100px; height: 100px; background: #1f54d9; border-radius: 50%;294    color: #fff;295  }296</style>297</head>298<body>299<div id="render-target">300 301  <!-- Status bar -->302  <div class="statusbar">303    11:15304    <div class="right">305      <svg class="status-icon" viewBox="0 0 24 24">306        <rect x="3" y="7" width="18" height="10" rx="2" fill="none" stroke="#fff" stroke-width="2"></rect>307        <rect x="21" y="10" width="2" height="4" fill="#fff"></rect>308      </svg>309      <svg class="status-icon" viewBox="0 0 24 24">310        <path d="M12 2l4 6h-8l4-6zm0 20l-4-6h8l-4 6z" fill="#fff"></path>311      </svg>312    </div>313  </div>314 315  <!-- App bar -->316  <div class="appbar">317    <div class="profile-icon">318      <svg width="50" height="50" viewBox="0 0 24 24">319        <circle cx="12" cy="8" r="4" fill="none" stroke="#999" stroke-width="2"></circle>320        <path d="M4 20c2-4 14-4 16 0" fill="none" stroke="#999" stroke-width="2" stroke-linecap="round"></path>321      </svg>322    </div>323    <div class="appbar-title">Charts</div>324  </div>325 326  <!-- Currency select -->327  <div class="currency-row">328    <div class="currency-card">329      <div class="flag">[IMG: UK Flag]</div>330      <div class="currency-name">GBP</div>331      <div class="caret">332        <svg width="36" height="36" viewBox="0 0 24 24">333          <path d="M6 9l6 6 6-6" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round"></path>334        </svg>335      </div>336    </div>337 338    <div class="swap">339      <svg width="42" height="42" viewBox="0 0 24 24">340        <path d="M8 7h9l-3-3M16 17H7l3 3" fill="none" stroke="#999" stroke-width="2" stroke-linecap="round"></path>341      </svg>342    </div>343 344    <div class="currency-card">345      <div class="flag">[IMG: EU Flag]</div>346      <div class="currency-name">EUR</div>347      <div class="caret">348        <svg width="36" height="36" viewBox="0 0 24 24">349          <path d="M6 9l6 6 6-6" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round"></path>350        </svg>351      </div>352    </div>353  </div>354 355  <!-- Rate headline -->356  <div class="rate-row">357    <div class="headline">1 GBP = 1.159522 EUR <span class="pink-dot"></span></div>358    <div class="share-btn">359      <svg width="42" height="42" viewBox="0 0 24 24">360        <path d="M7 10l5-5 5 5M12 5v10" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round"></path>361        <rect x="4" y="14" width="16" height="6" rx="2" fill="none" stroke="#333" stroke-width="2"></rect>362      </svg>363    </div>364    <div class="subline">+0.0460 (4.129%) <span>Past 5 years</span></div>365  </div>366 367  <!-- Range tabs -->368  <div class="range-tabs">369    <div class="tab">1D</div>370    <div class="tab">1W</div>371    <div class="tab">1M</div>372    <div class="tab">3M</div>373    <div class="tab">1Y</div>374    <div class="tab active">5Y</div>375    <div class="tab">10Y</div>376  </div>377 378  <!-- Chart -->379  <div class="chart-wrap">380    <div class="grid-line grid-top"></div>381    <div class="grid-line grid-mid"></div>382    <div class="grid-line grid-bot"></div>383    <div class="y-label yl1">1.22</div>384    <div class="y-label yl2">1.14</div>385    <div class="y-label yl3">1.06</div>386 387    <svg class="chart-svg" viewBox="0 0 960 800" preserveAspectRatio="none">388      <!-- Trend line -->389      <polyline points="390        0,540 40,620 70,500 110,680 150,520 180,740 220,360391        260,700 290,620 320,760 360,420 390,560 420,520392        460,660 500,480 530,400 560,470 600,300 640,580393        680,460 710,720 740,380 770,660 800,520 840,580 900,560 960,600"394        fill="none" stroke="#183dae" stroke-width="6" stroke-linejoin="round" stroke-linecap="round"></polyline>395    </svg>396    <div class="chart-dot"></div>397  </div>398 399  <!-- CTA -->400  <div class="cta">Create alert</div>401 402  <!-- Stats -->403  <div class="stats">404    <h2>Stats</h2>405    <div class="row"><div>High</div><div class="val">1.215232</div></div>406    <div class="row"><div>Low</div><div class="val">1.060775</div></div>407  </div>408 409  <!-- Bottom navigation -->410  <div class="bottom-nav">411    <div class="nav-item">412      <div class="icon-wrap">413        <svg width="56" height="56" viewBox="0 0 24 24">414          <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"></circle>415          <text x="12" y="16" text-anchor="middle" font-size="10" fill="currentColor">$</text>416        </svg>417      </div>418      Convert419    </div>420    <div class="nav-item active">421      <div class="icon-wrap">422        <svg width="56" height="56" viewBox="0 0 24 24">423          <path d="M4 16l4-5 4 3 6-8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>424        </svg>425      </div>426      Charts427    </div>428    <div class="nav-item send">429      <div class="icon-wrap">430        <svg width="56" height="56" viewBox="0 0 24 24">431          <path d="M3 11l17-7-7 17-2-7-8-3z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"></path>432        </svg>433      </div>434      Send435    </div>436    <div class="nav-item">437      <div class="icon-wrap">438        <svg width="56" height="56" viewBox="0 0 24 24">439          <path d="M12 3c3.3 0 6 2.7 6 6 0 5.3-6 12-6 12S6 14.3 6 9c0-3.3 2.7-6 6-6z" fill="none" stroke="currentColor" stroke-width="2"></path>440          <circle cx="12" cy="9" r="2" fill="currentColor"></circle>441        </svg>442      </div>443      Track444    </div>445    <div class="nav-item">446      <div class="icon-wrap">447        <svg width="56" height="56" viewBox="0 0 24 24">448          <path d="M6 10a6 6 0 0112 0v5H6v-5z" fill="none" stroke="currentColor" stroke-width="2"></path>449          <path d="M9 19h6" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>450        </svg>451      </div>452      Rate Alerts453    </div>454  </div>455 456</div>457</body>458</html>