GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Charts Screen</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #FFFFFF; color: #1a1a1a;11  }12 13  /* Status bar */14  .status-bar {15    height: 120px; background: #000; color: #fff;16    display: flex; align-items: center; justify-content: space-between;17    padding: 0 40px; box-sizing: border-box; font-weight: 600;18  }19  .status-right { display: flex; align-items: center; gap: 24px; opacity: 0.9; }20  .status-dot { width: 16px; height: 16px; background: #fff; border-radius: 50%; opacity: 0.8; }21  .battery {22    width: 34px; height: 20px; border: 2px solid #fff; border-radius: 4px; position: relative;23  }24  .battery::after {25    content: ""; position: absolute; right: -6px; top: 6px; width: 4px; height: 8px; background: #fff; border-radius: 1px;26  }27  .battery-level { position: absolute; top: 2px; left: 2px; height: 14px; width: 22px; background: #fff; }28 29  /* Header */30  .header {31    height: 160px; background: #fff; display: flex; align-items: center; justify-content: center; position: relative;32    border-bottom: 1px solid #eee;33  }34  .avatar {35    position: absolute; left: 40px; top: 50%; transform: translateY(-50%);36    width: 72px; height: 72px; border: 2px solid #ccc; border-radius: 50%; display: flex; align-items: center; justify-content: center;37  }38  .avatar svg { width: 36px; height: 36px; stroke: #9e9e9e; }39 40  .header-title { font-size: 48px; font-weight: 600; color: #222; }41 42  /* Currency cards area */43  .content-wrap { width: 1000px; margin: 0 auto; }44  .currency-row {45    display: flex; align-items: center; gap: 26px; margin-top: 30px;46  }47  .currency-card {48    flex: 1; background: #fff; border: 1px solid #E6E6E6; border-radius: 28px;49    height: 150px; display: flex; align-items: center; padding: 24px; box-sizing: border-box;50    box-shadow: 0 2px 6px rgba(0,0,0,0.04);51  }52  .flag {53    width: 84px; height: 84px; border-radius: 50%;54    background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center;55    color: #757575; font-size: 22px; text-align: center; padding: 6px; box-sizing: border-box;56  }57  .currency-code {58    font-size: 44px; font-weight: 700; margin-left: 24px; color: #111;59  }60  .card-spacer { flex: 1; }61  .chevron {62    width: 32px; height: 32px; margin-left: 12px;63  }64  .swap {65    width: 80px; height: 80px; border-radius: 20px; display: flex; align-items: center; justify-content: center;66    color: #9e9e9e;67  }68  .swap svg { width: 44px; height: 44px; fill: none; stroke: #9e9e9e; stroke-width: 3; }69 70  /* Timeframe tabs */71  .tabs { display: flex; align-items: center; gap: 52px; margin-top: 34px; padding-left: 20px; }72  .tab {73    font-size: 34px; color: #8a8a8a; font-weight: 600;74  }75  .tab.active {76    color: #fff; background: #1659db; padding: 16px 32px; border-radius: 40px;77  }78 79  /* Placeholder chart/logo area */80  .logo-area {81    width: 100%; height: 600px; display: flex; align-items: center; justify-content: center;82    margin-top: 140px;83  }84  .img-placeholder {85    width: 260px; height: 160px; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; justify-content: center; align-items: center; color: #757575;86    border-radius: 16px;87  }88 89  /* Create alert button */90  .alert-btn {91    width: 920px; height: 120px; margin: 220px auto 0;92    border: 4px solid #1659db; border-radius: 28px; display: flex; align-items: center; justify-content: center;93    color: #1659db; font-size: 42px; font-weight: 600;94  }95 96  /* Bottom navigation */97  .bottom-nav {98    position: absolute; bottom: 90px; left: 0; width: 100%; height: 200px; background: #fff; border-top: 1px solid #e9e9e9;99    display: flex; align-items: center; justify-content: space-around;100  }101  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #9e9e9e; font-size: 28px; }102  .nav-item .icon { width: 64px; height: 64px; }103  .nav-item.active { color: #1659db; }104  .nav-item.send .icon-wrap {105    width: 96px; height: 96px; border-radius: 50%; background: #1659db; display: flex; align-items: center; justify-content: center;106  }107  .nav-item.send .label { color: #1659db; }108  .gesture-bar {109    position: absolute; bottom: 0; left: 0; width: 100%; height: 90px; background: #000;110  }111  .chart-label { color: #1659db; }112</style>113</head>114<body>115<div id="render-target">116 117  <!-- Status Bar -->118  <div class="status-bar">119    <div class="status-left" style="font-size:40px;">11:18</div>120    <div class="status-right">121      <svg width="32" height="32" viewBox="0 0 24 24" fill="none">122        <circle cx="12" cy="12" r="10" stroke="#fff" stroke-width="2"></circle>123        <path d="M12 6v6l4 2" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>124      </svg>125      <div class="status-dot"></div>126      <div class="status-dot"></div>127      <div class="battery"><div class="battery-level"></div></div>128    </div>129  </div>130 131  <!-- Header -->132  <div class="header">133    <div class="avatar">134      <svg viewBox="0 0 24 24" fill="none">135        <circle cx="12" cy="8" r="4" stroke="currentColor" stroke-width="2"></circle>136        <path d="M4 20c0-4 4-6 8-6s8 2 8 6" stroke="currentColor" stroke-width="2" fill="none"></path>137      </svg>138    </div>139    <div class="header-title">Charts</div>140  </div>141 142  <div class="content-wrap">143 144    <!-- Currency Cards -->145    <div class="currency-row">146      <div class="currency-card">147        <div class="flag">[IMG: Canada Flag]</div>148        <div class="currency-code">CAD</div>149        <div class="card-spacer"></div>150        <svg class="chevron" viewBox="0 0 24 24" fill="none">151          <path d="M6 9l6 6 6-6" stroke="#9e9e9e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>152        </svg>153      </div>154 155      <div class="swap">156        <svg viewBox="0 0 24 24">157          <path d="M4 7h10M13 4l3 3-3 3M20 17H10M11 20l-3-3 3-3" stroke="#9e9e9e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>158        </svg>159      </div>160 161      <div class="currency-card">162        <div class="flag">[IMG: Japan Flag]</div>163        <div class="currency-code">JPY</div>164        <div class="card-spacer"></div>165        <svg class="chevron" viewBox="0 0 24 24" fill="none">166          <path d="M6 9l6 6 6-6" stroke="#9e9e9e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>167        </svg>168      </div>169    </div>170 171    <!-- Timeframe Tabs -->172    <div class="tabs">173      <div class="tab active">1D</div>174      <div class="tab">1W</div>175      <div class="tab">1M</div>176      <div class="tab">3M</div>177      <div class="tab">1Y</div>178      <div class="tab">5Y</div>179      <div class="tab">10Y</div>180    </div>181 182    <!-- Placeholder Logo/Chart -->183    <div class="logo-area">184      <div class="img-placeholder">[IMG: XE Logo / Chart]</div>185    </div>186 187    <!-- Create alert button -->188    <div class="alert-btn">Create alert</div>189 190  </div>191 192  <!-- Bottom Navigation -->193  <div class="bottom-nav">194    <div class="nav-item">195      <svg class="icon" viewBox="0 0 24 24" fill="none">196        <circle cx="12" cy="12" r="9" stroke="#9e9e9e" stroke-width="2"></circle>197        <text x="12" y="16" text-anchor="middle" font-size="10" fill="#9e9e9e">$</text>198      </svg>199      <div class="label">Convert</div>200    </div>201 202    <div class="nav-item active">203      <svg class="icon" viewBox="0 0 24 24" fill="none">204        <path d="M4 17l4-5 4 3 4-6 4 8" stroke="#1659db" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>205      </svg>206      <div class="label">Charts</div>207    </div>208 209    <div class="nav-item send">210      <div class="icon-wrap">211        <svg class="icon" viewBox="0 0 24 24" fill="none">212          <path d="M3 12l18-8-8 18-3-7-7-3z" stroke="#fff" stroke-width="2" fill="none" stroke-linejoin="round"></path>213        </svg>214      </div>215      <div class="label">Send</div>216    </div>217 218    <div class="nav-item">219      <svg class="icon" viewBox="0 0 24 24" fill="none">220        <path d="M12 21s7-6 7-11a7 7 0 10-14 0c0 5 7 11 7 11z" stroke="#9e9e9e" stroke-width="2" fill="none"></path>221        <circle cx="12" cy="10" r="2" fill="#9e9e9e"></circle>222      </svg>223      <div class="label">Track</div>224    </div>225 226    <div class="nav-item">227      <svg class="icon" viewBox="0 0 24 24" fill="none">228        <path d="M6 10a6 6 0 1112 0v5H6v-5z" stroke="#9e9e9e" stroke-width="2" fill="none"></path>229        <path d="M9 20h6" stroke="#9e9e9e" stroke-width="2" stroke-linecap="round"></path>230      </svg>231      <div class="label">Rate Alerts</div>232    </div>233  </div>234 235  <!-- Gesture Bar -->236  <div class="gesture-bar"></div>237 238</div>239</body>240</html>