GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Charts UI Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15    color: #111;16  }17  /* Top safe area and nav */18  .status-bar {19    height: 96px;20    background: #000;21    width: 100%;22  }23  .nav {24    height: 132px;25    border-bottom: 1px solid #E8E8E8;26    display: flex;27    align-items: center;28    padding: 0 36px;29    position: relative;30    background: #fff;31  }32  .nav .title {33    position: absolute;34    left: 0; right: 0;35    text-align: center;36    font-size: 44px;37    font-weight: 600;38    color: #222;39  }40  .icon-btn {41    width: 72px;42    height: 72px;43    display: flex;44    align-items: center;45    justify-content: center;46  }47 48  /* Currency cards */49  .currency-row {50    display: flex;51    align-items: center;52    gap: 28px;53    padding: 32px 40px 8px;54  }55  .currency-card {56    flex: 1;57    background: #fff;58    border: 1px solid #E6E6E6;59    border-radius: 24px;60    height: 156px;61    display: flex;62    align-items: center;63    padding: 0 28px;64    box-shadow: 0 2px 0 rgba(0,0,0,0.02);65  }66  .flag {67    width: 96px;68    height: 96px;69    border-radius: 50%;70    background: #E0E0E0;71    border: 1px solid #BDBDBD;72    display: flex; align-items: center; justify-content: center;73    color: #606060;74    font-size: 24px;75  }76  .currency-label {77    font-size: 40px;78    font-weight: 600;79    margin-left: 24px;80    color: #111;81  }82  .grow { flex: 1; }83  .chev {84    width: 36px; height: 36px;85    margin-left: 12px;86  }87  .swap {88    width: 72px; height: 72px;89    border-radius: 18px;90    background: #F5F6FA;91    border: 1px solid #E6E6E6;92    display: flex; align-items: center; justify-content: center;93  }94 95  /* Rate and details */96  .rate-wrap {97    padding: 12px 40px 0;98  }99  .rate-line {100    display: flex;101    align-items: center;102  }103  .rate {104    font-size: 56px;105    font-weight: 700;106    color: #111;107  }108  .dot-pink {109    width: 28px; height: 28px; border-radius: 50%;110    background: #FF7B94;111    margin-left: 18px;112    box-shadow: inset 0 0 0 6px rgba(255,255,255,0.7);113  }114  .share {115    margin-left: auto;116    width: 64px; height: 64px;117    display: flex; align-items: center; justify-content: center;118  }119  .subline {120    margin-top: 8px;121    font-size: 32px;122    color: #666;123  }124  .subline .neg { color: #FF5573; font-weight: 600; margin-right: 10px; }125 126  /* Range pills */127  .range-row {128    padding: 24px 40px 0;129    display: flex; gap: 24px; align-items: center;130  }131  .pill {132    padding: 16px 22px;133    border-radius: 26px;134    font-size: 28px;135    color: #555;136    border: 1px solid transparent;137  }138  .pill.active {139    background: #0A5BE1;140    color: #fff;141    font-weight: 600;142  }143 144  /* Chart area */145  .chart {146    position: relative;147    margin: 24px 40px 0;148    height: 700px;149    border-radius: 10px;150    background: #fff;151  }152  .chart .hline {153    position: absolute;154    left: 0; right: 0;155    height: 1px;156    background: #D9D9D9;157  }158  .chart .h1 { top: 120px; }159  .chart .h2 { top: 335px; }160  .chart .h3 { bottom: 120px; }161  .chart svg {162    position: absolute;163    left: 0; top: 0;164  }165  .chart .end-dot {166    position: absolute;167    right: 20px;168    top: 430px;169    width: 28px; height: 28px; border-radius: 50%;170    background: #FF7B94;171  }172 173  /* Create alert button */174  .cta {175    margin: 36px 40px 0;176  }177  .cta button {178    width: 100%;179    height: 120px;180    border-radius: 28px;181    border: 4px solid #0A5BE1;182    background: #fff;183    color: #0A41C9;184    font-size: 40px;185    font-weight: 600;186  }187 188  /* Stats */189  .stats {190    padding: 34px 40px 0;191  }192  .stats h3 {193    margin: 0 0 12px 0;194    font-size: 44px; font-weight: 700;195  }196  .row {197    display: flex; align-items: center;198    padding: 30px 0;199    border-top: 1px solid #EFEFEF;200  }201  .row:last-child { border-bottom: 1px solid #EFEFEF; }202  .row .label { color: #777; font-size: 34px; }203  .row .value { margin-left: auto; font-size: 34px; font-weight: 600; color: #222; }204 205  /* Bottom tab bar */206  .tabbar {207    position: absolute;208    bottom: 44px;209    left: 0; right: 0;210    height: 180px;211    border-top: 1px solid #E6E6E6;212    background: #fff;213    display: flex; align-items: center; justify-content: space-around;214    padding-bottom: 10px;215  }216  .tab {217    width: 190px;218    display: flex; flex-direction: column;219    align-items: center; justify-content: center;220    color: #7A7A7A;221    font-size: 26px;222  }223  .tab.active { color: #0A5BE1; }224  .tab .icon {225    width: 56px; height: 56px; margin-bottom: 10px;226    display: flex; align-items: center; justify-content: center;227  }228  .tab.send .icon {229    width: 92px; height: 92px; border-radius: 50%;230    background: #0A5BE1; color: #fff; margin-bottom: 6px;231  }232 233  .home-indicator {234    position: absolute;235    bottom: 8px;236    left: 50%;237    transform: translateX(-50%);238    width: 240px;239    height: 12px;240    background: #000;241    border-radius: 8px;242    opacity: 0.8;243  }244</style>245</head>246<body>247<div id="render-target">248 249  <div class="status-bar"></div>250 251  <div class="nav">252    <div class="icon-btn">253      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="1.6">254        <circle cx="12" cy="8" r="4"></circle>255        <path d="M4 20c0-3.5 3.6-6 8-6s8 2.5 8 6" />256      </svg>257    </div>258    <div class="title">Charts</div>259  </div>260 261  <!-- Currency selection -->262  <div class="currency-row">263    <div class="currency-card">264      <div class="flag">[IMG: EU Flag]</div>265      <div class="currency-label">EUR</div>266      <div class="grow"></div>267      <svg class="chev" viewBox="0 0 24 24">268        <path d="M6 9l6 6 6-6" fill="none" stroke="#8A8A8A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>269      </svg>270    </div>271    <div class="swap">272      <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#9AA1A9" stroke-width="2" stroke-linecap="round">273        <path d="M16 3l3 3-3 3"></path>274        <path d="M3 6h16"></path>275        <path d="M8 21l-3-3 3-3"></path>276        <path d="M21 18H5"></path>277      </svg>278    </div>279    <div class="currency-card">280      <div class="flag">[IMG: US Flag]</div>281      <div class="currency-label">USD</div>282      <div class="grow"></div>283      <svg class="chev" viewBox="0 0 24 24">284        <path d="M6 9l6 6 6-6" fill="none" stroke="#8A8A8A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>285      </svg>286    </div>287  </div>288 289  <!-- Rate -->290  <div class="rate-wrap">291    <div class="rate-line">292      <div class="rate">1 EUR = 1.055438 USD</div>293      <div class="dot-pink"></div>294      <div class="share">295        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#6B6B6B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">296          <path d="M7 10V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-5"></path>297          <path d="M3 21v-8a2 2 0 0 1 2-2h8"></path>298          <path d="M12 3l9 9"></path>299        </svg>300      </div>301    </div>302    <div class="subline"><span class="neg">-0.0822 (-7.224%)</span>Past 5 years</div>303  </div>304 305  <!-- Range -->306  <div class="range-row">307    <div class="pill">1D</div>308    <div class="pill">1W</div>309    <div class="pill">1M</div>310    <div class="pill">3M</div>311    <div class="pill">1Y</div>312    <div class="pill active">5Y</div>313    <div class="pill">10Y</div>314  </div>315 316  <!-- Chart -->317  <div class="chart">318    <div class="hline h1"></div>319    <div class="hline h2"></div>320    <div class="hline h3"></div>321 322    <svg width="1000" height="700" viewBox="0 0 1000 700">323      <path d="M0 430324               C60 420, 100 460, 140 440325               C180 420, 220 470, 260 455326               C300 440, 340 430, 380 500327               C420 580, 460 600, 500 510328               C540 440, 580 470, 620 420329               C660 360, 700 300, 740 360330               C780 420, 820 480, 860 420331               C900 360, 940 420, 980 440" 332            fill="none" stroke="#0A41C9" stroke-width="6"/>333    </svg>334 335    <div class="end-dot"></div>336  </div>337 338  <!-- Button -->339  <div class="cta">340    <button>Create alert</button>341  </div>342 343  <!-- Stats -->344  <div class="stats">345    <h3>Stats</h3>346    <div class="row">347      <div class="label">High</div>348      <div class="value">1.233919</div>349    </div>350    <div class="row">351      <div class="label">Low</div>352      <div class="value">0.959604</div>353    </div>354  </div>355 356  <!-- Tab Bar -->357  <div class="tabbar">358    <div class="tab">359      <div class="icon">360        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#8A8A8A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">361          <circle cx="12" cy="12" r="9"></circle>362          <path d="M12 7v6l3 3"></path>363          <text x="12" y="16" font-size="8" text-anchor="middle" fill="#8A8A8A">$</text>364        </svg>365      </div>366      <div>Convert</div>367    </div>368    <div class="tab active">369      <div class="icon">370        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#0A5BE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">371          <path d="M3 17l4-4 4 4 6-6 4 4"></path>372        </svg>373      </div>374      <div>Charts</div>375    </div>376    <div class="tab send">377      <div class="icon">378        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">379          <path d="M22 2L11 13"></path>380          <path d="M22 2l-7 20-4-9-9-4 20-7z"></path>381        </svg>382      </div>383      <div style="margin-top:4px; color:#0A5BE1;">Send</div>384    </div>385    <div class="tab">386      <div class="icon">387        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#8A8A8A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">388          <path d="M12 2C8.134 2 5 5.134 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.866-3.134-7-7-7z"></path>389          <circle cx="12" cy="9" r="2.5"></circle>390        </svg>391      </div>392      <div>Track</div>393    </div>394    <div class="tab">395      <div class="icon">396        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#8A8A8A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">397          <path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9"></path>398          <path d="M13.73 21a2 2 0 01-3.46 0"></path>399        </svg>400      </div>401      <div>Rate Alerts</div>402    </div>403  </div>404 405  <div class="home-indicator"></div>406</div>407</body>408</html>