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 UI Mock</title>7<style>8  body { margin:0; padding:0; background:transparent; }9  #render-target {10    position:relative;11    width:1080px;12    height:2400px;13    overflow:hidden;14    background:#121212;15    color:#E0E0E0;16    font-family: Arial, Helvetica, sans-serif;17  }18  .status-bar {19    position:absolute; left:0; top:0; width:100%; height:120px;20    background:#0d0d0f;21    display:flex; align-items:center; justify-content:space-between;22    padding:0 40px; box-sizing:border-box; font-size:44px;23    color:#e6e6e6;24  }25  .status-right { display:flex; gap:28px; align-items:center; }26  .header {27    position:absolute; left:0; top:120px; width:100%; height:160px;28    background:#2a2a2d;29    display:flex; align-items:center; justify-content:space-between;30    padding:0 40px; box-sizing:border-box;31    border-bottom:1px solid #3a3a3a;32  }33  .header h1 { margin:0; font-size:72px; font-weight:600; letter-spacing:0.5px; }34  .icon-btn { width:88px; height:88px; display:flex; align-items:center; justify-content:center; }35  .currency-toolbar {36    position:absolute; left:0; top:280px; width:100%; height:210px;37    background:#202224; display:flex; align-items:center; gap:36px;38    padding:0 40px; box-sizing:border-box; border-bottom:1px solid #333;39  }40  .flag-card {41    display:flex; align-items:center; gap:20px;42    background:#191a1c; border:2px solid #3a3a3f; border-radius:18px;43    padding:16px; box-sizing:border-box;44  }45  .img-box {46    width:220px; height:120px; background:#E0E0E0; border:1px solid #BDBDBD;47    display:flex; align-items:center; justify-content:center; color:#757575; font-size:36px; border-radius:8px;48  }49  .code-chip {50    display:flex; align-items:center; gap:10px;51    background:#2b2d30; padding:16px 22px; border-radius:14px; font-size:44px; color:#d0d0d0;52  }53  .swap-circle {54    width:110px; height:110px; border-radius:55px; background:#2b2d30;55    display:flex; align-items:center; justify-content:center; border:2px solid #3a3a3f;56  }57  .tabs {58    position:absolute; left:0; top:490px; width:100%; height:110px; background:#202224;59    display:flex; align-items:flex-end; padding:0 40px 18px; gap:46px; box-sizing:border-box;60    color:#b6b6b6; font-size:46px;61  }62  .tab { position:relative; padding-bottom:10px; }63  .tab.active { color:#cfe0ff; }64  .tab.active::after {65    content:""; position:absolute; left:0; bottom:-8px; width:100%; height:6px; background:#5b8dff; border-radius:3px;66  }67 68  .chart-area {69    position:absolute; left:0; top:600px; width:100%; height:1320px;70    background:#0f0f10;71    box-sizing:border-box; padding:40px 60px 120px;72  }73  /* grid background using gradients */74  .chart-grid {75    position:absolute; left:60px; right:60px; top:40px; bottom:160px;76    background:77      repeating-linear-gradient(to bottom, transparent 0, transparent 118px, rgba(255,255,255,0.08) 119px, transparent 120px),78      repeating-linear-gradient(to right, transparent 0, transparent 160px, rgba(255,255,255,0.08) 161px, transparent 162px);79    border:1px solid #2e2e2e;80  }81  .chart-grid .dashed-line {82    position:absolute; left:0; right:0; top:90px; height:2px; background-image: linear-gradient(to right, rgba(150,180,255,0.7) 50%, rgba(150,180,255,0) 0);83    background-size:20px 2px; background-repeat:repeat-x;84  }85  .y-labels {86    position:absolute; left:18px; top:40px; bottom:160px; width:120px; pointer-events:none;87    display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start;88    color:#9aa0a6; font-size:42px;89  }90  .x-labels {91    position:absolute; left:180px; right:80px; bottom:80px;92    display:flex; justify-content:space-between; color:#9aa0a6; font-size:38px;93  }94  .x-labels span { transform:rotate(-28deg); transform-origin:left bottom; }95 96  .chart-svg {97    position:absolute; left:60px; right:60px; top:40px; bottom:160px;98  }99 100  .chart-footer {101    position:absolute; left:0; bottom:460px; width:100%;102    color:#e5e5e5; text-align:center; font-size:44px;103  }104  .rates-row {105    position:absolute; left:0; bottom:410px; width:100%;106    display:flex; justify-content:space-between; align-items:center;107    padding:0 60px; box-sizing:border-box; font-size:42px; color:#bfbfbf;108  }109 110  .bottom-nav {111    position:absolute; left:0; bottom:120px; width:100%; height:200px;112    background:#3a3a3d; display:flex; align-items:center; justify-content:space-around;113    border-top:1px solid #4a4a4a;114  }115  .nav-item { display:flex; flex-direction:column; align-items:center; gap:16px; color:#cfcfcf; font-size:40px; }116  .nav-item.active { color:#ffffff; }117  .home-indicator {118    position:absolute; left:50%; bottom:40px; width:320px; height:16px; border-radius:8px; background:#ffffff; opacity:0.85; transform:translateX(-50%);119  }120  /* small caret triangles */121  .caret { width:0; height:0; border-left:12px solid transparent; border-right:12px solid transparent; border-top:16px solid #bbbbbb; margin-left:8px; }122</style>123</head>124<body>125<div id="render-target">126 127  <!-- Status bar -->128  <div class="status-bar">129    <div style="display:flex; align-items:center; gap:22px;">130      <span>3:03</span>131      <!-- simple app icons -->132      <svg width="46" height="46"><rect x="6" y="6" width="34" height="34" rx="6" fill="#cfcfcf"/></svg>133      <svg width="46" height="46"><rect x="6" y="6" width="34" height="34" rx="6" fill="#cfcfcf"/><rect x="14" y="14" width="18" height="18" fill="#0d0d0f"/></svg>134      <svg width="46" height="46"><rect x="6" y="6" width="34" height="34" rx="6" fill="#cfcfcf"/><line x1="12" y1="12" x2="34" y2="34" stroke="#0d0d0f" stroke-width="6"/><line x1="34" y1="12" x2="12" y2="34" stroke="#0d0d0f" stroke-width="6"/></svg>135      <svg width="16" height="16"><circle cx="8" cy="8" r="6" fill="#cfcfcf"/></svg>136    </div>137    <div class="status-right">138      <!-- signal/wifi/battery mock -->139      <svg width="44" height="44"><path d="M4 22c9-9 27-9 36 0" stroke="#e6e6e6" stroke-width="4" fill="none"/><circle cx="22" cy="22" r="4" fill="#e6e6e6"/></svg>140      <svg width="44" height="44"><path d="M8 34h28M12 28h20M16 22h12" stroke="#e6e6e6" stroke-width="4" fill="none" stroke-linecap="round"/></svg>141    </div>142  </div>143 144  <!-- Header -->145  <div class="header">146    <div class="icon-btn">147      <svg width="66" height="66">148        <rect x="8" y="14" width="50" height="6" fill="#dddddd"/>149        <rect x="8" y="30" width="50" height="6" fill="#dddddd"/>150        <rect x="8" y="46" width="50" height="6" fill="#dddddd"/>151      </svg>152    </div>153    <h1>Charts</h1>154    <div class="icon-btn">155      <svg width="72" height="72">156        <rect x="12" y="40" width="10" height="20" fill="#dddddd"/>157        <rect x="30" y="28" width="10" height="32" fill="#dddddd"/>158        <rect x="48" y="18" width="10" height="42" fill="#dddddd"/>159      </svg>160    </div>161  </div>162 163  <!-- Currency toolbar -->164  <div class="currency-toolbar">165    <div class="flag-card">166      <div class="img-box">[IMG: Israel flag]</div>167      <div class="code-chip">ILS<div class="caret"></div></div>168    </div>169 170    <div class="swap-circle">171      <svg width="70" height="70" viewBox="0 0 70 70">172        <circle cx="35" cy="35" r="32" fill="none" stroke="#6b6b6b" stroke-width="2"/>173        <path d="M22 40h18l-6 6" stroke="#cfcfcf" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>174        <path d="M48 30H30l6-6" stroke="#cfcfcf" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>175      </svg>176    </div>177 178    <div class="flag-card">179      <div class="img-box">[IMG: Jordan flag]</div>180      <div class="code-chip">JOD<div class="caret"></div></div>181    </div>182  </div>183 184  <!-- Tabs -->185  <div class="tabs">186    <div class="tab">1D</div>187    <div class="tab">1W</div>188    <div class="tab active">1M</div>189    <div class="tab">6M</div>190    <div class="tab">1Y</div>191    <div class="tab">5Y</div>192    <div class="tab">∞</div>193  </div>194 195  <!-- Chart area -->196  <div class="chart-area">197    <div class="chart-grid">198      <div class="dashed-line"></div>199    </div>200 201    <!-- Y-axis labels -->202    <div class="y-labels">203      <span>0.189</span>204      <span>0.186</span>205      <span>0.183</span>206      <span>0.180</span>207      <span>0.177</span>208      <span>0.174</span>209    </div>210 211    <!-- Decorative line/area chart -->212    <svg class="chart-svg" viewBox="0 0 960 1160" preserveAspectRatio="none">213      <!-- area fill -->214      <path d="M20 220215               C80 260,120 300,160 310216               C200 320,240 318,260 330217               C280 342,280 360,280 380218               C280 400,240 420,220 430219               C220 530,280 560,320 620220               C360 680,380 690,410 710221               C430 730,420 770,460 820222               C500 870,520 880,560 900223               C600 920,610 940,650 980224               C690 1020,720 1030,740 1060225               C760 1090,800 1100,840 1120226               L840 1140 L20 1140 Z"227            fill="rgba(111,149,220,0.35)"/>228      <!-- stroke line -->229      <path d="M20 220230               C80 260,120 300,160 310231               C200 320,240 318,260 330232               C280 342,280 360,280 380233               C280 400,240 420,220 430234               C220 530,280 560,320 620235               C360 680,380 690,410 710236               C430 730,420 770,460 820237               C500 870,520 880,560 900238               C600 920,610 940,650 980239               C690 1020,720 1030,740 1060240               C760 1090,800 1100,840 1120"241            stroke="#8fb1ff" stroke-width="6" fill="none"/>242    </svg>243 244    <!-- X-axis labels -->245    <div class="x-labels">246      <span>17 Oct 13:30</span>247      <span>22 Oct 04:36</span>248      <span>26 Oct 19:43</span>249      <span>31 Oct 10:50</span>250      <span>05 Nov 01:56</span>251      <span>09 Nov 17:03</span>252      <span>14 Nov 08:10</span>253    </div>254  </div>255 256  <!-- Footer text below chart -->257  <div class="chart-footer">Friday, 17 November 2023 14:55</div>258  <div class="rates-row">259    <div>1 ILS = 0.1900 JOD</div>260    <div>-0.00% / -0.00%</div>261  </div>262 263  <!-- Bottom navigation -->264  <div class="bottom-nav">265    <div class="nav-item">266      <svg width="72" height="72" viewBox="0 0 72 72">267        <path d="M36 58c-12-8-22-16-22-26a14 14 0 0 1 24-9 14 14 0 0 1 24 9c0 10-10 18-22 26z" fill="#d9d9d9"/>268      </svg>269    </div>270    <div class="nav-item">271      <svg width="72" height="72" viewBox="0 0 72 72">272        <path d="M36 14l-12 12h8v16h8V26h8z" fill="#d9d9d9"/>273        <rect x="16" y="46" width="40" height="12" rx="6" fill="#d9d9d9"/>274      </svg>275    </div>276    <div class="nav-item active">277      <svg width="72" height="72">278        <rect x="12" y="44" width="10" height="18" fill="#ffffff"/>279        <rect x="30" y="30" width="10" height="32" fill="#ffffff"/>280        <rect x="48" y="20" width="10" height="42" fill="#ffffff"/>281      </svg>282      <div>Charts</div>283    </div>284    <div class="nav-item">285      <svg width="72" height="72" viewBox="0 0 72 72">286        <rect x="10" y="20" width="52" height="36" rx="6" fill="#d9d9d9"/>287        <circle cx="36" cy="38" r="10" fill="#3a3a3d"/>288      </svg>289    </div>290  </div>291 292  <div class="home-indicator"></div>293 294</div>295</body>296</html>