GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1440, initial-scale=1.0">6<title>Currency Trends & Charts</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1440px; height: 3120px;11    position: relative; overflow: hidden;12    background: #ffffff;13  }14  /* Status bar */15  .statusbar {16    height: 90px; background: #0e0e0e; color: #fff;17    display: flex; align-items: center; justify-content: space-between;18    padding: 0 40px; font-size: 36px; letter-spacing: 0.5px;19  }20  .status-left { display: flex; align-items: center; gap: 20px; }21  .status-right { display: flex; align-items: center; gap: 26px; }22  .icon-circle { width: 26px; height: 26px; background: #cfcfcf; border-radius: 50%; display: inline-block; }23  /* App header */24  .app-header {25    height: 140px; background: #1c1c1c; color: #fff;26    display: flex; align-items: center; justify-content: space-between;27    padding: 0 40px;28  }29  .title { font-size: 48px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }30  .header-left, .header-right { display: flex; align-items: center; gap: 40px; }31  .hamburger, .dots { width: 64px; height: 64px; }32  .hamburger svg, .dots svg { width: 100%; height: 100%; }33  /* Banner image placeholder */34  .banner {35    height: 360px; margin: 0; position: relative;36    background: #E0E0E0; border-top: 1px solid #BDBDBD; border-bottom: 1px solid #BDBDBD;37    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 40px;38  }39  /* Currency selector row */40  .currency-row {41    background: #2a2a2a; color: #fff; padding: 24px 40px; display: flex; align-items: center;42  }43  .currency-block {44    flex: 1; display: flex; align-items: center; gap: 22px;45    padding-right: 20px; border-right: 1px solid #3a3a3a;46  }47  .currency-block:last-child { border-right: none; padding-left: 30px; }48  .flag {49    width: 80px; height: 54px; background: #E0E0E0; border: 1px solid #BDBDBD;50    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;51  }52  .code { font-size: 52px; font-weight: 700; }53  .sub { font-size: 30px; color: #cfcfcf; }54  .drop {55    width: 28px; height: 28px;56  }57  /* Range tabs */58  .tabs {59    background: #2a2a2a; padding: 24px 40px; display: flex; gap: 24px;60  }61  .tab {62    flex: 1; height: 120px; background: #dedede; border: 4px solid #6e6e6e;63    display: flex; align-items: center; justify-content: center; font-size: 40px; color: #000;64  }65  .tab.active { color: #d94343; font-weight: 700; }66  /* Chart area */67  .chart {68    height: 720px; margin: 20px 40px; background: #E0E0E0;69    border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center;70    color: #757575; font-size: 44px;71  }72  /* Grid rows */73  .grid-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; padding: 22px 40px; }74  .grid-cell {75    background: #efefef; border: 3px solid #c9c9c9; height: 140px;76    display: flex; align-items: center; justify-content: center; text-align: center; font-size: 34px; color: #555;77  }78  .grid-cell.light {79    background: #f7f7f7; color: #8a8a8a;80  }81  /* Detail columns */82  .details { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; padding: 10px 40px 40px; }83  .detail-col {84    border: 3px solid #d1d1d1; background: #fff; padding: 26px 20px; height: 320px;85    display: flex; flex-direction: column; justify-content: flex-start; gap: 24px;86  }87  .detail-date { font-size: 36px; color: #333; }88  .detail-value { font-size: 40px; color: #111; }89  .detail-change { font-size: 38px; font-weight: 700; }90  .neg { color: #2979ff; }91  .pos { color: #d94343; }92  /* Ad section */93  .ad-container {94    padding: 20px 40px; margin-top: 20px;95  }96  .ad-card {97    border: 3px solid #d4d4d4; background: #fafafa; height: 260px;98    display: grid; grid-template-columns: 2fr 1fr 3fr 1fr; gap: 30px; align-items: center; padding: 20px 30px;99  }100  .ad-img { height: 200px; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; justify-content: center; align-items: center; color: #757575; font-size: 34px; }101  .ad-icon { width: 160px; height: 160px; background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575; display: flex; align-items: center; justify-content: center; font-size: 28px; border-radius: 24px; }102  .ad-text { display: flex; flex-direction: column; gap: 10px; }103  .ad-title { font-size: 44px; color: #222; }104  .ad-sub { font-size: 34px; color: #666; }105  .ad-btn { justify-self: end; }106  .btn-green {107    background: #2daf66; color: #fff; border: none; padding: 26px 60px; border-radius: 60px; font-size: 42px; font-weight: 700;108  }109  /* Bottom gesture bar */110  .gesture {111    position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);112    width: 520px; height: 18px; border-radius: 10px; background: #bfbfbf;113  }114</style>115</head>116<body>117<div id="render-target">118 119  <!-- Status bar -->120  <div class="statusbar">121    <div class="status-left">122      <div>2:19</div>123    </div>124    <div class="status-right">125      <div class="icon-circle"></div>126      <div class="icon-circle"></div>127      <div class="icon-circle"></div>128      <div class="icon-circle"></div>129      <div class="icon-circle"></div>130    </div>131  </div>132 133  <!-- Header -->134  <div class="app-header">135    <div class="header-left">136      <div class="hamburger">137        <svg viewBox="0 0 24 24">138          <rect x="3" y="5" width="18" height="2" fill="#fff"/>139          <rect x="3" y="11" width="18" height="2" fill="#fff"/>140          <rect x="3" y="17" width="18" height="2" fill="#fff"/>141        </svg>142      </div>143      <div class="title">Currency Trends & Charts</div>144    </div>145    <div class="header-right">146      <div class="dots">147        <svg viewBox="0 0 24 24">148          <circle cx="12" cy="4.5" r="2.5" fill="#fff"/>149          <circle cx="12" cy="12" r="2.5" fill="#fff"/>150          <circle cx="12" cy="19.5" r="2.5" fill="#fff"/>151        </svg>152      </div>153    </div>154  </div>155 156  <!-- Banner -->157  <div class="banner">[IMG: Desk with analytics papers]</div>158 159  <!-- Currency selection row -->160  <div class="currency-row">161    <div class="currency-block">162      <div class="code">ANG</div>163      <div class="flag">[IMG: Flag]</div>164      <div class="drop">165        <svg viewBox="0 0 24 24">166          <path d="M6 9l6 6 6-6" fill="none" stroke="#d95959" stroke-width="3" />167        </svg>168      </div>169      <div>170        <div class="sub">Netherlands Antillean Guilder</div>171      </div>172    </div>173    <div class="currency-block">174      <div class="code">GBP</div>175      <div class="flag">[IMG: UK Flag]</div>176      <div class="drop">177        <svg viewBox="0 0 24 24">178          <path d="M6 9l6 6 6-6" fill="none" stroke="#4aa3ff" stroke-width="3" />179        </svg>180      </div>181      <div>182        <div class="sub">British Pound Sterling</div>183      </div>184    </div>185  </div>186 187  <!-- Tabs -->188  <div class="tabs">189    <div class="tab active">10D</div>190    <div class="tab">1M</div>191    <div class="tab">3M</div>192    <div class="tab">6M</div>193    <div class="tab">1Y</div>194    <div class="tab">2Y</div>195  </div>196 197  <!-- Chart -->198  <div class="chart">[IMG: Area Line Chart GBP/ANG]</div>199 200  <!-- Date header row -->201  <div class="grid-row">202    <div class="grid-cell">Oct 31, 2023</div>203    <div class="grid-cell">Nov 2, 2023</div>204    <div class="grid-cell">Nov 4, 2023</div>205    <div class="grid-cell">Nov 6, 2023</div>206    <div class="grid-cell">Nov 9, 2023</div>207  </div>208 209  <!-- Number row -->210  <div class="grid-row">211    <div class="grid-cell light">5</div>212    <div class="grid-cell light">6</div>213    <div class="grid-cell light">7</div>214    <div class="grid-cell light">8</div>215    <div class="grid-cell light">9</div>216  </div>217 218  <!-- Details -->219  <div class="details">220    <div class="detail-col">221      <div class="detail-date">Nov 5, 2023</div>222      <div class="detail-value">0.4520600</div>223      <div class="detail-change neg">-0.002%</div>224    </div>225    <div class="detail-col">226      <div class="detail-date">Nov 6, 2023</div>227      <div class="detail-value">0.4494300</div>228      <div class="detail-change neg">-0.582%</div>229    </div>230    <div class="detail-col">231      <div class="detail-date">Nov 7, 2023</div>232      <div class="detail-value">0.4517600</div>233      <div class="detail-change pos">+0.518%</div>234    </div>235    <div class="detail-col">236      <div class="detail-date">Nov 8, 2023</div>237      <div class="detail-value">0.4514000</div>238      <div class="detail-change neg">-0.080%</div>239    </div>240    <div class="detail-col">241      <div class="detail-date">Nov 9, 2023</div>242      <div class="detail-value">0.4542200</div>243      <div class="detail-change pos">+0.625%</div>244    </div>245  </div>246 247  <!-- Ad -->248  <div class="ad-container">249    <div class="ad-card">250      <div class="ad-img">[IMG: App Ad Banner]</div>251      <div class="ad-icon">[IMG: App Icon]</div>252      <div class="ad-text">253        <div class="ad-title">Omio</div>254        <div class="ad-sub">4.6 ★  FREE</div>255      </div>256      <div class="ad-btn">257        <button class="btn-green">Open</button>258      </div>259    </div>260  </div>261 262  <!-- Gesture bar -->263  <div class="gesture"></div>264</div>265</body>266</html>