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, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif; color:#111; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden; background:#FFFFFF;11  }12 13  /* Status bar (mock) */14  .status-bar {15    height:90px; background:#000; color:#fff; display:flex; align-items:center; padding:0 36px; font-weight:600;16    font-size:38px; letter-spacing:0.5px;17  }18  .status-icons { margin-left:auto; display:flex; gap:24px; align-items:center; }19  .dot { width:10px; height:10px; background:#fff; border-radius:50%; opacity:.9; }20 21  /* App bar */22  .app-bar {23    height:130px; display:flex; align-items:center; padding:0 34px; border-bottom:1px solid #eaeaea; background:#fff;24  }25  .title { position:absolute; left:0; right:0; text-align:center; font-size:46px; font-weight:600; color:#1a1a1a; }26  .icon-btn { width:80px; height:80px; display:flex; align-items:center; justify-content:center; }27  .icon { width:48px; height:48px; }28 29  /* Rate section */30  .rate-section { padding:20px 34px 0 34px; }31  .rate-row { display:flex; align-items:center; }32  .rate-text { font-size:54px; font-weight:700; letter-spacing:.2px; }33  .pink-dot { width:26px; height:26px; background:#ff6f91; border-radius:50%; margin-left:16px; box-shadow:0 0 0 10px rgba(255,111,145,.18); }34  .share-small { margin-left:auto; }35  .change { color:#e74c3c; font-size:34px; margin-top:12px; }36  .subtle { color:#9e9e9e; }37 38  /* Range tabs */39  .tabs { display:flex; align-items:center; gap:42px; padding:28px 24px 22px 24px; }40  .tab { font-size:34px; color:#7a7a7a; }41  .tab.active {42    background:#1f4bd8; color:#fff; padding:14px 28px; border-radius:40px; font-weight:700;43  }44 45  /* Chart area */46  .chart-wrap {47    position:relative; height:700px; padding:0 24px 0 130px; /* left for y labels */48  }49  .grid-line { position:absolute; left:120px; right:24px; height:2px; background:#dcdcdc; }50  .grid1 { top:80px; }51  .grid2 { top:330px; }52  .grid3 { bottom:80px; }53  .y-label {54    position:absolute; left:34px; color:#7a7a7a; font-size:30px;55  }56  .yl1 { top:60px; }57  .yl2 { top:310px; }58  .yl3 { bottom:60px; }59  .chart-svg { position:absolute; left:120px; right:24px; top:0; bottom:0; }60  .chart-svg svg { width:100%; height:100%; }61  .point { fill:#ff6f91; opacity:.95; }62 63  /* Button */64  .cta {65    margin:40px 34px 0 34px; height:130px; border:4px solid #1f4bd8; border-radius:26px; display:flex;66    align-items:center; justify-content:center; color:#1f4bd8; font-weight:700; font-size:40px;67  }68 69  /* Stats */70  .stats { padding:30px 34px 0 34px; }71  .stats h3 { margin:0; font-size:54px; font-weight:800; }72  .row { display:flex; align-items:center; height:180px; border-bottom:1px solid #ececec; }73  .row .label { color:#7a7a7a; font-size:38px; }74  .row .value { margin-left:auto; font-size:38px; font-weight:600; color:#1a1a1a; }75 76  /* Bottom nav */77  .bottom-nav {78    position:absolute; left:0; right:0; bottom:90px; height:200px; border-top:1px solid #e5e5e5; background:#fff;79    display:flex; justify-content:space-around; align-items:center;80  }81  .nav-item { display:flex; flex-direction:column; align-items:center; gap:14px; color:#8a8a8a; font-size:30px; }82  .nav-item.active { color:#1f4bd8; }83  .nav-icon { width:68px; height:68px; display:flex; align-items:center; justify-content:center; }84  .nav-circle { width:96px; height:96px; background:#2f70ff; border-radius:50%; display:flex; align-items:center; justify-content:center; }85 86  /* Gesture pill area */87  .gesture-area { position:absolute; left:0; right:0; bottom:0; height:90px; background:#000; display:flex; align-items:center; justify-content:center; }88  .pill { width:220px; height:14px; border-radius:10px; background:#e6e6e6; opacity:.95; }89 90  /* Helper */91  .muted { color:#a0a0a0; }92</style>93</head>94<body>95<div id="render-target">96 97  <!-- Status bar -->98  <div class="status-bar">99    9:01100    <div class="status-icons">101      <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff"><path d="M3 18h18v2H3zM5 14h14v2H5zM8 10h8v2H8zM10 6h4v2h-4z"/></svg>102      <div class="dot"></div>103      <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff"><path d="M17 4H7c-1.1 0-2 .9-2 2v12l4-3h8c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2z"/></svg>104      <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff"><path d="M16 4h-1V2h-6v2H8C6.9 4 6 4.9 6 6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H8V6h8v12z"/></svg>105    </div>106  </div>107 108  <!-- App bar -->109  <div class="app-bar">110    <div class="icon-btn">111      <svg class="icon" viewBox="0 0 24 24" stroke="#666" fill="none" stroke-width="1.6">112        <circle cx="12" cy="7.5" r="3.2"></circle>113        <path d="M4.5 19.5c1.2-3.7 4-6 7.5-6s6.3 2.3 7.5 6" stroke-linecap="round"></path>114      </svg>115    </div>116    <div class="title">Charts</div>117  </div>118 119  <!-- Rate section -->120  <div class="rate-section">121    <div class="rate-row">122      <div class="rate-text">1 GBP = 4.543934 AED</div>123      <div class="pink-dot"></div>124      <div class="icon-btn share-small">125        <svg class="icon" viewBox="0 0 24 24" stroke="#6e6e6e" fill="none" stroke-width="1.8">126          <path d="M18 8l-6-4-6 4" stroke-linecap="round" stroke-linejoin="round"/>127          <path d="M6 10v6a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-6" />128          <path d="M12 12v5" stroke-linecap="round"/>129        </svg>130      </div>131    </div>132    <div class="change">-0.0013 (-0.029%) <span class="subtle">Today</span></div>133  </div>134 135  <!-- Range tabs -->136  <div class="tabs">137    <div class="tab active">1D</div>138    <div class="tab">1W</div>139    <div class="tab">1M</div>140    <div class="tab">3M</div>141    <div class="tab">1Y</div>142    <div class="tab">5Y</div>143    <div class="tab">10Y</div>144  </div>145 146  <!-- Chart -->147  <div class="chart-wrap">148    <!-- y-axis labels -->149    <div class="y-label yl1">4.5466</div>150    <div class="y-label yl2">4.5444</div>151    <div class="y-label yl3">4.5423</div>152 153    <!-- grid lines -->154    <div class="grid-line grid1"></div>155    <div class="grid-line grid2"></div>156    <div class="grid-line grid3"></div>157 158    <!-- chart svg -->159    <div class="chart-svg">160      <svg viewBox="0 0 900 700" preserveAspectRatio="none">161        <path d="M0 360 162                 L60 358 L100 362 L140 355 L180 360 L220 358 L260 362 L300 352 163                 L340 356 L380 350 L420 362 L460 340 L480 380 L500 320 L520 420 164                 L540 300 L560 460 L570 240 L590 520 L610 280 L620 480 L640 340 165                 L660 520 L680 300 L700 560 L720 330 L740 520 L760 360 L780 420 166                 L820 380 L860 400"167              fill="none" stroke="#1f4bd8" stroke-width="8" stroke-linejoin="round" stroke-linecap="round"/>168        <circle class="point" cx="860" cy="400" r="10"/>169      </svg>170    </div>171  </div>172 173  <!-- Create alert button -->174  <div class="cta">Create alert</div>175 176  <!-- Stats -->177  <div class="stats">178    <h3>Stats</h3>179    <div class="row">180      <div class="label">High</div>181      <div class="value">4.546570</div>182    </div>183    <div class="row">184      <div class="label">Low</div>185      <div class="value">4.542300</div>186    </div>187    <div class="row">188      <div class="label">Average</div>189      <div class="value">4.544435</div>190    </div>191  </div>192 193  <!-- Bottom navigation -->194  <div class="bottom-nav">195    <div class="nav-item">196      <div class="nav-icon">197        <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#8a8a8a" stroke-width="1.8">198          <circle cx="12" cy="12" r="8"></circle>199          <text x="12" y="15" text-anchor="middle" font-size="8" fill="#8a8a8a">$</text>200        </svg>201      </div>202      <div>Convert</div>203    </div>204    <div class="nav-item active">205      <div class="nav-icon">206        <svg viewBox="0 0 24 24" width="56" height="56" fill="none" stroke="#1f4bd8" stroke-width="2">207          <polyline points="3,18 8,12 12,14 20,6" fill="none"></polyline>208          <path d="M20 6v6h-6" fill="none"></path>209        </svg>210      </div>211      <div>Charts</div>212    </div>213    <div class="nav-item">214      <div class="nav-circle">215        <svg viewBox="0 0 24 24" width="50" height="50" fill="none" stroke="#fff" stroke-width="2">216          <path d="M3 12l18-7-7 18-2-7-7-4z" stroke-linejoin="round" stroke-linecap="round"></path>217        </svg>218      </div>219      <div style="color:#2f70ff;">Send</div>220    </div>221    <div class="nav-item">222      <div class="nav-icon">223        <svg viewBox="0 0 24 24" width="52" height="52" fill="none" stroke="#8a8a8a" stroke-width="1.8">224          <path d="M12 21s6-5.3 6-10a6 6 0 1 0-12 0c0 4.7 6 10 6 10z" />225        </svg>226      </div>227      <div>Track</div>228    </div>229    <div class="nav-item">230      <div class="nav-icon">231        <svg viewBox="0 0 24 24" width="52" height="52" fill="none" stroke="#8a8a8a" stroke-width="1.8">232          <path d="M18 8a6 6 0 10-12 0v5l-2 2h16l-2-2V8z"></path>233          <path d="M9 19h6" stroke-linecap="round"></path>234        </svg>235      </div>236      <div>Rate Alerts</div>237    </div>238  </div>239 240  <!-- Gesture pill -->241  <div class="gesture-area">242    <div class="pill"></div>243  </div>244 245</div>246</body>247</html>