GD-ML/AndroidCode

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>Charts Screen</title>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: #121212;16  }17 18  .safe-top { height: 96px; background:#000; }19 20  .header {21    height: 140px;22    display: flex;23    align-items: center;24    padding: 0 40px;25    border-bottom: 1px solid #efefef;26    box-sizing: border-box;27  }28  .hdr-left {29    width: 120px; display:flex; align-items:center; justify-content:flex-start;30  }31  .title {32    flex: 1; text-align:center; font-size: 46px; font-weight: 600; color:#1d1d1f;33  }34 35  .avatar {36    width: 72px; height: 72px; border-radius: 50%;37    border: 2px solid #d0d0d0; display:flex; align-items:center; justify-content:center; color:#888;38  }39 40  .content { padding: 36px 40px 0; }41 42  .row { display:flex; align-items:center; }43 44  .currency-card {45    width: 440px; height: 160px; border:1px solid #e7e7ea; border-radius: 28px; box-sizing: border-box;46    background:#fff; display:flex; align-items:center; padding: 24px; gap: 22px;47    box-shadow: 0 2px 0 rgba(0,0,0,0.02);48  }49  .flag {50    width: 90px; height: 90px; border-radius: 50%;51    background:#E0E0E0; border:1px solid #BDBDBD;52    display:flex; align-items:center; justify-content:center; color:#757575; font-size: 24px;53  }54  .ccy-name { font-size: 44px; font-weight: 700; color:#0c0c0c; }55  .caret {56    margin-left:auto; width: 28px; height: 28px; opacity: 0.7;57  }58  .swap-box {59    width: 120px; display:flex; align-items:center; justify-content:center; color:#9ba0a6;60  }61 62  .rate-line {63    margin-top: 36px;64    display:flex; align-items:center; gap: 16px;65  }66  .big-rate { font-size: 56px; font-weight: 800; color:#121212; letter-spacing: -0.5px; }67  .live-dot {68    width: 28px; height: 28px; background:#ff6c8e; border-radius:50%; box-shadow: 0 0 0 14px rgba(255,108,142,0.18);69  }70  .rate-sub { margin-top: 10px; font-size: 32px; }71  .neg { color:#e64969; font-weight:600; }72  .muted { color:#8c8c90; }73 74  .ranges {75    margin-top: 28px; display:flex; gap: 38px; align-items:center; padding-left: 8px;76    font-size: 30px; color:#6a6a6f;77  }78  .pill {79    background:#0b57e3; color:#fff; padding: 16px 26px; border-radius: 28px; font-weight:700; font-size: 30px;80  }81 82  .chart {83    margin-top: 22px;84    height: 840px;85    position: relative;86    border-top: 2px solid #e5e5e7;87    border-bottom: 2px solid #e5e5e7;88  }89  .ygrid { position:absolute; left:0; right:0; height:2px; background:#e6e6ea; }90  .y1 { top: 120px; } .y2 { top: 410px; } .y3 { bottom: 120px; }91  .ylabels { position:absolute; left: 0; top:0; bottom:0; width: 140px; }92  .ylabels span { position:absolute; left: 0; color:#9a9aa1; font-size: 26px; }93  .yl1 { top: 86px; } .yl2 { top: 376px; } .yl3 { bottom: 86px; }94  .svg-wrap { position:absolute; left: 140px; right: 24px; top:0; bottom:0; }95  .endpoint {96    position:absolute; right: 34px; bottom: 150px;97    width: 26px; height: 26px; border-radius:50%; background:#ff6c8e; box-shadow: 0 0 0 18px rgba(255,108,142,0.20);98  }99 100  .cta {101    margin: 32px 0 16px;102    height: 130px; border: 6px solid #0b57e3; border-radius: 28px;103    display:flex; align-items:center; justify-content:center; color:#0b57e3; font-size: 40px; font-weight: 700;104  }105 106  .section-title { font-size: 48px; font-weight: 800; margin-top: 12px; color:#111; }107 108  .stat-row {109    height: 120px; display:flex; align-items:center; justify-content:space-between;110    border-bottom: 1px solid #efeff2; color:#2a2a2e; font-size: 36px;111  }112  .stat-row:last-child { border-bottom: 1px solid #efeff2; }113 114  /* Bottom nav */115  .bottom-nav {116    position:absolute; left:0; right:0; bottom: 96px;117    height: 210px; background:#fff; border-top:1px solid #ececee;118    display:flex; align-items:center; justify-content:space-around;119  }120  .nav-item { width: 190px; display:flex; flex-direction:column; align-items:center; gap: 12px; color:#7b7f87; font-size: 28px; }121  .nav-item .label { font-size: 28px; }122  .nav-active { color:#0b57e3; font-weight:700; }123  .nav-icon { width: 56px; height: 56px; }124  .send-wrap {125    width: 110px; height: 110px; background:#0b57e3; border-radius: 60px; display:flex; align-items:center; justify-content:center;126    margin-bottom: 6px;127  }128  .send-wrap svg { width: 56px; height: 56px; }129  .safe-bottom { position:absolute; left:0; right:0; bottom:0; height:96px; background:#000; }130  .home-indicator {131    position:absolute; left:50%; transform:translateX(-50%); bottom: 32px; width: 320px; height: 12px; background:#fff; opacity:0.9; border-radius: 8px;132  }133 134  /* Utility */135  .spacer-vertical { height: 10px; }136</style>137</head>138<body>139<div id="render-target">140  <div class="safe-top"></div>141 142  <div class="header">143    <div class="hdr-left">144      <div class="avatar">145        <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#8a8a8a" stroke-width="2">146          <circle cx="12" cy="8" r="4"></circle>147          <path d="M4 20c2-4 14-4 16 0"></path>148        </svg>149      </div>150    </div>151    <div class="title">Charts</div>152    <div style="width:120px;"></div>153  </div>154 155  <div class="content">156    <div class="row" style="gap:22px;">157      <div class="currency-card">158        <div class="flag">[IMG: EU flag]</div>159        <div class="ccy-name">EUR</div>160        <svg class="caret" viewBox="0 0 24 24">161          <path d="M6 9l6 6 6-6" fill="none" stroke="#7b7f87" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>162        </svg>163      </div>164 165      <div class="swap-box">166        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#9ba0a6" stroke-width="2" stroke-linecap="round">167          <path d="M7 7h11M13 3l4 4-4 4M17 17H6M10 21l-4-4 4-4"></path>168        </svg>169      </div>170 171      <div class="currency-card">172        <div class="flag">[IMG: US flag]</div>173        <div class="ccy-name">USD</div>174        <svg class="caret" viewBox="0 0 24 24">175          <path d="M6 9l6 6 6-6" fill="none" stroke="#7b7f87" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>176        </svg>177      </div>178    </div>179 180    <div class="rate-line">181      <div class="big-rate">1 EUR = 1.055438 USD</div>182      <div class="live-dot"></div>183      <div style="margin-left:auto;">184        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#5a5f66" stroke-width="2">185          <path d="M4 15v5h5"></path>186          <path d="M20 9V4h-5"></path>187          <path d="M4 20l6-6"></path>188          <path d="M14 10l6-6"></path>189        </svg>190      </div>191    </div>192    <div class="rate-sub">193      <span class="neg">-0.0041 (-0.39%)</span>194      <span class="muted"> Past week</span>195    </div>196 197    <div class="ranges">198      <div>1D</div>199      <div class="pill">1W</div>200      <div>1M</div>201      <div>3M</div>202      <div>1Y</div>203      <div>5Y</div>204      <div>10Y</div>205    </div>206 207    <div class="chart">208      <div class="ygrid y1"></div>209      <div class="ygrid y2"></div>210      <div class="ygrid y3"></div>211 212      <div class="ylabels">213        <span class="yl1">1.069</span>214        <span class="yl2">1.061</span>215        <span class="yl3">1.053</span>216      </div>217 218      <div class="svg-wrap">219        <svg width="100%" height="100%" viewBox="0 0 900 840" preserveAspectRatio="none">220          <!-- Blue price line -->221          <polyline fill="none" stroke="#0b57e3" stroke-width="6"222            points="223              10,520 40,600 70,300 100,340 130,620 160,700224              200,560 240,590 280,520 320,640 360,760 400,690225              440,790 470,640 500,720 540,450 560,500 600,520226              640,520 680,530 720,540 760,560 800,540 840,560 880,580227            " />228        </svg>229      </div>230 231      <div class="endpoint"></div>232    </div>233 234    <div class="cta">Create alert</div>235 236    <div class="section-title">Stats</div>237 238    <div class="stat-row" style="margin-top: 8px;">239      <div class="muted" style="font-size: 34px; color:#76767b;">High</div>240      <div style="font-size: 36px;">1.068683</div>241    </div>242    <div class="stat-row">243      <div class="muted" style="font-size: 34px; color:#76767b;">Low</div>244      <div style="font-size: 36px;">1.052638</div>245    </div>246  </div>247 248  <div class="bottom-nav">249    <div class="nav-item">250      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#7b7f87" stroke-width="2">251        <circle cx="12" cy="12" r="9"></circle>252        <text x="9" y="16" font-size="10" fill="#7b7f87">$</text>253      </svg>254      <div class="label">Convert</div>255    </div>256 257    <div class="nav-item nav-active">258      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#0b57e3" stroke-width="2">259        <path d="M3 17l6-6 4 3 8-8"></path>260        <circle cx="9" cy="11" r="1.5" fill="#0b57e3" stroke="none"></circle>261        <circle cx="13" cy="14" r="1.5" fill="#0b57e3" stroke="none"></circle>262        <circle cx="21" cy="6" r="1.5" fill="#0b57e3" stroke="none"></circle>263      </svg>264      <div class="label">Charts</div>265    </div>266 267    <div class="nav-item" style="color:#0b57e3;">268      <div class="send-wrap">269        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">270          <path d="M22 2L11 13"></path>271          <path d="M22 2l-7 20-4-9-9-4 20-7z"></path>272        </svg>273      </div>274      <div class="label" style="color:#0b57e3; font-weight:700;">Send</div>275    </div>276 277    <div class="nav-item">278      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#7b7f87" stroke-width="2">279        <path d="M12 21l-5-8a6 6 0 1 1 10 0l-5 8z"></path>280        <circle cx="12" cy="9" r="2"></circle>281      </svg>282      <div class="label">Track</div>283    </div>284 285    <div class="nav-item">286      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#7b7f87" stroke-width="2">287        <path d="M18 8a6 6 0 0 0-12 0v6"></path>288        <path d="M4 14h16l-2 6H6l-2-6z"></path>289      </svg>290      <div class="label">Rate Alerts</div>291    </div>292  </div>293 294  <div class="safe-bottom">295    <div class="home-indicator"></div>296  </div>297</div>298</body>299</html>