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>Currency History UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #222; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #ffffff;12  }13 14  /* Status bar */15  .status-bar {16    height: 90px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; color: #222;17    font-size: 34px;18  }19  .status-right { display: flex; align-items: center; gap: 26px; color: #666; }20 21  /* App bar */22  .appbar {23    height: 120px; display: flex; align-items: center; padding: 0 24px 0 8px; border-bottom: 1px solid #eee;24  }25  .icon-btn { width: 96px; height: 96px; border: none; background: transparent; display: flex; align-items: center; justify-content: center; }26  .title { font-size: 54px; font-weight: 600; flex: 1; color: #222; }27  .appbar .icon-btn svg { width: 48px; height: 48px; stroke: #333; stroke-width: 2.5; fill: none; }28 29  /* Currency selection row */30  .currency-row {31    display: grid; grid-template-columns: 1fr 120px 1fr; align-items: center;32    padding: 28px 36px; gap: 10px;33  }34  .currency { display: flex; align-items: center; gap: 20px; }35  .flag {36    width: 140px; height: 92px; background: #E0E0E0; border: 1px solid #BDBDBD;37    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px; border-radius: 10px;38  }39  .code { font-size: 44px; font-weight: 600; display: flex; align-items: center; gap: 12px; color: #333; }40  .code svg { width: 28px; height: 28px; stroke: #555; stroke-width: 2.5; fill: none; }41  .swap { display: flex; align-items: center; justify-content: center; }42  .swap svg { width: 56px; height: 56px; stroke: #444; stroke-width: 2.5; fill: none; }43 44  /* Values row */45  .values-row { display: grid; grid-template-columns: 520px 1fr; padding: 16px 36px; align-items: start; column-gap: 24px; }46  .input-box {47    height: 120px; border: 2px solid #E5E5E5; border-radius: 20px; display: flex; align-items: center; padding: 0 26px;48    font-size: 48px; color: #333; box-shadow: 0 2px 0 #f3f3f3 inset;49  }50  .result { text-align: right; padding-top: 6px; }51  .result .label { color: #888; font-size: 32px; }52  .result .value { font-size: 64px; font-weight: 600; color: #111; }53 54  /* Date row */55  .date-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; padding: 32px 36px 14px; border-top: 1px solid #f2f2f2; }56  .period { font-size: 42px; font-weight: 600; }57  .range { color: #666; font-size: 36px; }58  .date-row .chev { width: 36px; height: 36px; stroke: #666; stroke-width: 2.5; fill: none; }59 60  .minmax { display: grid; grid-template-columns: 1fr 1fr; padding: 6px 36px 0; color: #777; font-size: 34px; }61  .minmax div:last-child { text-align: right; }62 63  /* Chart */64  .chart {65    margin-top: 8px;66    margin-left: 20px; margin-right: 20px;67    height: 1050px; border-radius: 18px; position: relative; overflow: hidden;68    background:69      linear-gradient(#fff, #fff) padding-box,70      repeating-linear-gradient(to bottom, transparent 0, transparent 214px, #f1f1f1 214px, #f1f1f1 216px) border-box;71    border: 1px solid #eee;72  }73  .y-labels { position: absolute; left: 22px; top: 30px; display: grid; grid-template-rows: repeat(6, 1fr); height: 990px; color: #8a8a8a; font-size: 30px; }74  .y-labels div { display: flex; align-items: center; }75 76  .x-labels { position: absolute; bottom: 24px; left: 60px; right: 60px; display: grid; grid-template-columns: repeat(8, 1fr); color: #8a8a8a; font-size: 30px; }77  .x-labels div { text-align: center; }78 79  .chart svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }80  .axis-line { stroke: #f1f1f1; stroke-width: 2; }81  .trend { stroke: #ef8c17; stroke-width: 6; fill: none; }82  .area-fill { fill: url(#areaFill); opacity: 0.25; }83 84  /* Advertisement card */85  .ad-card {86    margin: 26px 24px; padding: 24px; border-radius: 18px; border: 1px solid #e6e6e6; background: #fafafa;87    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;88  }89  .ad-icon {90    width: 96px; height: 96px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 16px;91    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px;92  }93  .ad-text { font-size: 36px; color: #333; }94  .ad-button {95    background: #2b77f3; color: #fff; border: none; border-radius: 16px; padding: 22px 32px; font-size: 34px; font-weight: 600;96  }97 98  /* Home indicator */99  .home-indicator {100    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);101    width: 360px; height: 14px; border-radius: 8px; background: #c8c8c8;102  }103</style>104</head>105<body>106<div id="render-target">107 108  <!-- Status Bar -->109  <div class="status-bar">110    <div>2:00</div>111    <div class="status-right">112      <!-- simple sun icon -->113      <svg width="32" height="32" viewBox="0 0 24 24">114        <circle cx="12" cy="12" r="4" fill="#888"></circle>115        <g stroke="#888" stroke-width="1.5">116          <line x1="12" y1="1.5" x2="12" y2="5"></line>117          <line x1="12" y1="19" x2="12" y2="22.5"></line>118          <line x1="1.5" y1="12" x2="5" y2="12"></line>119          <line x1="19" y1="12" x2="22.5" y2="12"></line>120        </g>121      </svg>122      <!-- wifi -->123      <svg width="34" height="34" viewBox="0 0 24 24">124        <path d="M3 9c4-3 14-3 18 0" stroke="#666" stroke-width="2" fill="none" />125        <path d="M6 12c3-2 9-2 12 0" stroke="#666" stroke-width="2" fill="none" />126        <path d="M9 15c2-1 4-1 6 0" stroke="#666" stroke-width="2" fill="none" />127        <circle cx="12" cy="18" r="1.6" fill="#666"/>128      </svg>129      <!-- battery -->130      <svg width="40" height="34" viewBox="0 0 28 16">131        <rect x="1" y="1" width="22" height="14" rx="2" stroke="#666" stroke-width="2" fill="none"></rect>132        <rect x="3" y="3" width="14" height="10" fill="#666"></rect>133        <rect x="23.5" y="5" width="3" height="6" rx="1.2" fill="#666"></rect>134      </svg>135    </div>136  </div>137 138  <!-- App Bar -->139  <div class="appbar">140    <button class="icon-btn" aria-label="Back">141      <svg viewBox="0 0 24 24">142        <path d="M15 5 L8 12 L15 19" stroke-linecap="round" stroke-linejoin="round"></path>143      </svg>144    </button>145    <div class="title">History</div>146    <button class="icon-btn" aria-label="Refresh">147      <svg viewBox="0 0 24 24">148        <path d="M4 12a8 8 0 0 1 14.2-4" stroke-linecap="round"></path>149        <path d="M22 6 L18 6 L18 10" stroke-linecap="round"></path>150        <path d="M20 12a8 8 0 0 1-14.2 4" stroke-linecap="round"></path>151      </svg>152    </button>153  </div>154 155  <!-- Currency row -->156  <div class="currency-row">157    <div class="currency">158      <div class="flag">[IMG: EU Flag]</div>159      <div class="code">EUR160        <svg viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9" stroke-linecap="round" stroke-linejoin="round"></path></svg>161      </div>162    </div>163 164    <div class="swap">165      <svg viewBox="0 0 24 24">166        <path d="M7 7h10M17 7l-3-3M17 7l-3 3" stroke-linecap="round" stroke-linejoin="round"></path>167        <path d="M17 17H7M7 17l3-3M7 17l3 3" stroke-linecap="round" stroke-linejoin="round"></path>168      </svg>169    </div>170 171    <div class="currency" style="justify-content: flex-end;">172      <div class="flag">[IMG: US Flag]</div>173      <div class="code">USD174        <svg viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9" stroke-linecap="round" stroke-linejoin="round"></path></svg>175      </div>176    </div>177  </div>178 179  <!-- Values -->180  <div class="values-row">181    <div class="input-box">1,000.0</div>182    <div class="result">183      <div class="label">Today</div>184      <div class="value">1,063.015</div>185    </div>186  </div>187 188  <!-- Date and range -->189  <div class="date-row">190    <div class="period">3 months</div>191    <div class="range">Aug 02, 2023 - Oct 31, 2023</div>192    <svg class="chev" viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9" stroke-linecap="round" stroke-linejoin="round"></path></svg>193  </div>194 195  <div class="minmax">196    <div>Min: 1.047</div>197    <div>Max: 1.1</div>198  </div>199 200  <!-- Chart -->201  <div class="chart">202    <div class="y-labels">203      <div>1.100</div>204      <div>1.090</div>205      <div>1.080</div>206      <div>1.070</div>207      <div>1.060</div>208      <div>1.050</div>209    </div>210 211    <svg viewBox="0 0 1040 1050" preserveAspectRatio="none">212      <defs>213        <linearGradient id="areaFill" x1="0" y1="0" x2="0" y2="1">214          <stop offset="0%" stop-color="#ef8c17" />215          <stop offset="100%" stop-color="#ef8c17" stop-opacity="0" />216        </linearGradient>217      </defs>218 219      <!-- horizontal grid lines -->220      <g class="grid">221        <line class="axis-line" x1="60" y1="60" x2="1020" y2="60"></line>222        <line class="axis-line" x1="60" y1="240" x2="1020" y2="240"></line>223        <line class="axis-line" x1="60" y1="420" x2="1020" y2="420"></line>224        <line class="axis-line" x1="60" y1="600" x2="1020" y2="600"></line>225        <line class="axis-line" x1="60" y1="780" x2="1020" y2="780"></line>226        <line class="axis-line" x1="60" y1="960" x2="1020" y2="960"></line>227      </g>228 229      <!-- shaded area under trend -->230      <path class="area-fill" d="231        M60,120232        C150,90 220,150 280,200233        C330,240 360,350 420,380234        C460,410 520,320 560,420235        C600,520 640,540 680,610236        C720,670 760,730 800,820237        C840,900 880,860 920,940238        L920,960 L60,960 Z"></path>239 240      <!-- trend line -->241      <path class="trend" d="242        M60,120243        C120,80 180,140 240,200244        C300,260 360,350 420,380245        C480,410 540,340 600,450246        C660,560 720,610 780,700247        C840,790 900,760 960,860" stroke-linecap="round"></path>248    </svg>249 250    <div class="x-labels">251      <div>8/2</div>252      <div>8/14</div>253      <div>8/27</div>254      <div>9/9</div>255      <div>9/22</div>256      <div>10/5</div>257      <div>10/18</div>258      <div>10/31</div>259    </div>260  </div>261 262  <!-- Ad card -->263  <div class="ad-card">264    <div class="ad-icon">[IMG: App Icon]</div>265    <div class="ad-text">Remove ads and support future development</div>266    <button class="ad-button">Remove ads</button>267  </div>268 269  <!-- Home indicator -->270  <div class="home-indicator"></div>271 272</div>273</body>274</html>