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 Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; color: #111; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    height: 100px;20    background: #000;21    color: #fff;22    display: flex;23    align-items: center;24    justify-content: space-between;25    padding: 0 36px;26    font-size: 32px;27    letter-spacing: 0.5px;28  }29  .status-right {30    display: flex;31    align-items: center;32    gap: 22px;33  }34  .status-icon { width: 36px; height: 36px; }35 36  /* Header */37  .header {38    height: 120px;39    background: #fff;40    border-bottom: 1px solid #EAEAEA;41    position: relative;42    display: flex;43    align-items: center;44    padding: 0 32px;45  }46  .header .title {47    position: absolute;48    left: 0; right: 0;49    text-align: center;50    font-size: 44px;51    font-weight: 600;52    color: #222;53  }54  .avatar {55    width: 80px; height: 80px;56    border-radius: 50%;57    border: 2px solid #DADADA;58    display: flex; align-items: center; justify-content: center;59  }60  .content {61    padding: 24px 48px 320px 48px; /* extra bottom padding so content doesn't collide with tab bar */62  }63 64  /* Rate section */65  .rate-row {66    display: flex;67    align-items: center;68    justify-content: space-between;69    gap: 18px;70    margin-top: 16px;71  }72  .rate-title {73    font-size: 48px;74    font-weight: 700;75    color: #0E0E0E;76  }77  .rate-actions {78    display: flex; align-items: center; gap: 24px;79  }80  .green-dot {81    width: 26px; height: 26px;82    background: #1ec577;83    border-radius: 50%;84    box-shadow: 0 0 0 10px rgba(30,197,119,0.15);85  }86  .rate-sub {87    color: #15A05F;88    margin-top: 8px;89    font-size: 30px;90  }91 92  /* Range tabs */93  .tabs {94    display: flex;95    gap: 32px;96    align-items: center;97    margin-top: 28px;98  }99  .tab {100    color: #7A7A7A;101    font-size: 30px;102    padding: 16px 10px;103  }104  .pill {105    padding: 18px 30px;106    border-radius: 26px;107    border: 1px solid #D3D3D3;108    color: #6F6F6F;109  }110  .pill.active {111    background: #1F4DDE;112    color: #fff;113    border-color: #1F4DDE;114    font-weight: 600;115  }116 117  /* Chart area */118  .chart-area {119    position: relative;120    height: 780px;121    margin-top: 16px;122    border-top: 1px solid #E3E3E3;123    border-bottom: 1px solid #E3E3E3;124    overflow: hidden;125  }126  .grid-line {127    position: absolute;128    left: 0; right: 0;129    height: 2px;130    background: #DCDCDC;131  }132  .y-label {133    position: absolute;134    left: 0;135    transform: translateY(-50%);136    color: #8D8D8D;137    font-size: 28px;138  }139 140  /* Button */141  .outline-btn {142    margin: 28px auto 10px auto;143    display: block;144    width: 92%;145    height: 120px;146    border-radius: 28px;147    border: 4px solid #1F4DDE;148    background: #fff;149    color: #1F4DDE;150    font-size: 38px;151    font-weight: 600;152  }153 154  /* Stats */155  .stats-title {156    margin-top: 24px;157    font-size: 56px;158    font-weight: 700;159  }160  .stat-row {161    display: flex;162    justify-content: space-between;163    align-items: center;164    height: 150px;165    border-bottom: 1px solid #EFEFEF;166    color: #8C8C8C;167    font-size: 34px;168  }169  .stat-row .val {170    color: #111;171  }172 173  /* Tab Bar */174  .tabbar {175    position: absolute;176    left: 0; bottom: 60px;177    width: 100%;178    height: 220px;179    border-top: 1px solid #EAEAEA;180    background: #fff;181    display: flex;182    align-items: center;183    justify-content: space-around;184    padding: 10px 16px 22px 16px;185  }186  .tab-item {187    display: flex; flex-direction: column; align-items: center; gap: 10px;188    color: #9A9A9A;189    font-size: 28px;190  }191  .tab-item.active { color: #1F4DDE; }192  .tab-icon { width: 56px; height: 56px; }193  .fab {194    width: 120px; height: 120px;195    border-radius: 50%;196    background: #1F4DDE;197    display: flex; align-items: center; justify-content: center;198    box-shadow: 0 8px 16px rgba(31,77,222,0.35);199  }200 201  /* System bottom bar */202  .system-bar {203    position: absolute;204    left: 0; right: 0; bottom: 0;205    height: 60px;206    background: #000;207    display: flex; align-items: center; justify-content: center;208  }209  .home-pill {210    width: 220px; height: 10px; background: #EDEDED; border-radius: 10px;211  }212</style>213</head>214<body>215<div id="render-target">216 217  <!-- Status Bar -->218  <div class="status-bar">219    <div>9:02</div>220    <div class="status-right">221      <!-- Signal -->222      <svg class="status-icon" viewBox="0 0 24 24" fill="#fff">223        <rect x="2" y="16" width="3" height="6"></rect>224        <rect x="7" y="13" width="3" height="9" opacity="0.8"></rect>225        <rect x="12" y="10" width="3" height="12" opacity="0.6"></rect>226        <rect x="17" y="7" width="3" height="15" opacity="0.4"></rect>227      </svg>228      <!-- WiFi -->229      <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">230        <path d="M2 9c5-5 15-5 20 0"></path>231        <path d="M6 13c3-3 9-3 12 0"></path>232        <path d="M10 17c1.5-1.5 4-1.5 5.5 0"></path>233        <circle cx="12" cy="20" r="1.5" fill="#fff" stroke="none"></circle>234      </svg>235      <!-- Battery -->236      <svg class="status-icon" viewBox="0 0 30 16" fill="none" stroke="#fff" stroke-width="2">237        <rect x="1" y="1" width="24" height="14" rx="2"></rect>238        <rect x="3" y="3" width="18" height="10" fill="#fff" stroke="none"></rect>239        <rect x="25" y="5" width="4" height="6" rx="1" fill="#fff" stroke="none"></rect>240      </svg>241    </div>242  </div>243 244  <!-- Header -->245  <div class="header">246    <div class="avatar">247      <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#7E7E7E" stroke-width="2">248        <circle cx="12" cy="8" r="4"></circle>249        <path d="M4 20c2-4 14-4 16 0"></path>250      </svg>251    </div>252    <div class="title">Charts</div>253  </div>254 255  <!-- Content -->256  <div class="content">257    <div class="rate-row">258      <div class="rate-title">1 GBP = 4.543934 AED</div>259      <div class="rate-actions">260        <span class="green-dot"></span>261        <!-- Share icon -->262        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#7A7A7A" stroke-width="2">263          <path d="M12 3v10"></path>264          <path d="M8 7l4-4 4 4"></path>265          <rect x="4" y="11" width="16" height="10" rx="2"></rect>266        </svg>267      </div>268    </div>269    <div class="rate-sub">+0.0688 (1.538%) Past month</div>270 271    <!-- Range tabs -->272    <div class="tabs">273      <div class="tab">1D</div>274      <div class="tab">1W</div>275      <div class="pill active">1M</div>276      <div class="tab">3M</div>277      <div class="tab">1Y</div>278      <div class="tab">5Y</div>279      <div class="tab">10Y</div>280    </div>281 282    <!-- Chart -->283    <div class="chart-area">284      <!-- Grid lines + labels -->285      <div class="grid-line" style="top: 12%;"></div>286      <div class="grid-line" style="top: 52%;"></div>287      <div class="grid-line" style="bottom: 12%;"></div>288 289      <div class="y-label" style="top: 12%;">4.55</div>290      <div class="y-label" style="top: 52%;">4.49</div>291      <div class="y-label" style="bottom: 12%; transform: translateY(50%);">4.43</div>292 293      <!-- Chart polyline -->294      <svg viewBox="0 0 960 780" width="100%" height="100%" preserveAspectRatio="none">295        <polyline fill="none" stroke="#1F4DDE" stroke-width="6"296          points="297          0,430 20,500 40,440 80,460 120,420 150,360 170,310 190,460 210,300 240,260298          270,430 300,500 340,380 360,420 390,340 420,520 460,430 500,620 520,360299          560,500 590,420 610,540 640,300 680,560 720,400 760,460 780,420 820,620300          860,580 900,560 930,120 955,110301          " />302        <!-- Endpoint green marker -->303        <circle cx="940" cy="110" r="10" fill="#1ec577" />304      </svg>305    </div>306 307    <!-- CTA button -->308    <button class="outline-btn">Create alert</button>309 310    <!-- Stats -->311    <div class="stats">312      <div class="stats-title">Stats</div>313      <div class="stat-row"><span>High</span><span class="val">4.548401</span></div>314      <div class="stat-row"><span>Low</span><span class="val">4.434682</span></div>315      <div class="stat-row" style="border-bottom:none;"><span>Average</span><span class="val">4.491541</span></div>316    </div>317  </div>318 319  <!-- Bottom Tab Bar -->320  <div class="tabbar">321    <div class="tab-item">322      <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="#9A9A9A" stroke-width="2">323        <circle cx="12" cy="12" r="8"></circle>324        <text x="12" y="15" text-anchor="middle" font-size="10" fill="#9A9A9A" font-family="Arial">$</text>325      </svg>326      <div>Convert</div>327    </div>328 329    <div class="tab-item active">330      <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="#1F4DDE" stroke-width="2">331        <polyline points="3,16 9,12 12,14 18,7 21,9"></polyline>332        <circle cx="3" cy="16" r="1.6" fill="#1F4DDE" stroke="none"></circle>333        <circle cx="9" cy="12" r="1.6" fill="#1F4DDE" stroke="none"></circle>334        <circle cx="12" cy="14" r="1.6" fill="#1F4DDE" stroke="none"></circle>335        <circle cx="18" cy="7" r="1.6" fill="#1F4DDE" stroke="none"></circle>336        <circle cx="21" cy="9" r="1.6" fill="#1F4DDE" stroke="none"></circle>337      </svg>338      <div>Charts</div>339    </div>340 341    <div class="tab-item">342      <div class="fab">343        <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">344          <path d="M3 12l18-8-8 18-2-7-8-3z"></path>345        </svg>346      </div>347      <div style="margin-top:4px; color:#6F6F6F;">Send</div>348    </div>349 350    <div class="tab-item">351      <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="#9A9A9A" stroke-width="2">352        <path d="M12 21c4-4 7-7 7-10a7 7 0 1 0-14 0c0 3 3 6 7 10z"></path>353        <circle cx="12" cy="11" r="2"></circle>354      </svg>355      <div>Track</div>356    </div>357 358    <div class="tab-item">359      <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="#9A9A9A" stroke-width="2">360        <path d="M6 10v-2a6 6 0 1 1 12 0v2"></path>361        <path d="M4 10h16v7a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-7z"></path>362      </svg>363      <div>Rate Alerts</div>364    </div>365  </div>366 367  <!-- System navigation bar -->368  <div class="system-bar">369    <div class="home-pill"></div>370  </div>371 372</div>373</body>374</html>