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 Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    color: #111;15    background:16      linear-gradient(#cfcfcf, #d9d9d9) 0 0/100% 100% no-repeat,17      repeating-linear-gradient(90deg, rgba(255,255,255,0.45) 0 2px, rgba(0,0,0,0.04) 2px 4px);18  }19 20  /* Status bar */21  .status-bar {22    height: 120px;23    background: #6a6a6a;24    color: #fff;25    padding: 0 36px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    box-sizing: border-box;30  }31  .status-left { font-weight: 600; font-size: 38px; letter-spacing: 1px; }32  .status-right { display: flex; align-items: center; gap: 26px; }33  .sb-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }34 35  /* App header */36  .app-header {37    height: 140px;38    display: flex;39    align-items: center;40    padding: 0 36px;41    box-sizing: border-box;42  }43  .app-header h1 {44    font-size: 60px;45    font-weight: 600;46    margin: 0 0 0 18px;47  }48  .spacer { flex: 1; }49 50  /* Currency selector panel */51  .panel {52    margin: 10px 36px 24px;53    background: #d6d6d6;54    border-radius: 24px;55    box-shadow: 0 6px 10px rgba(0,0,0,0.15) inset, 0 3px 6px rgba(0,0,0,0.15);56    padding: 20px;57  }58  .currency-row {59    display: flex;60    align-items: center;61    background: #dcdcdc;62    border-radius: 28px;63    padding: 22px 26px;64    box-shadow: 0 3px 6px rgba(0,0,0,0.2);65  }66  .curr {67    flex: 1;68    display: flex;69    align-items: center;70    gap: 18px;71  }72  .img-placeholder {73    width: 132px;74    height: 84px;75    background: #E0E0E0;76    border: 1px solid #BDBDBD;77    border-radius: 12px;78    color: #757575;79    display: flex; align-items: center; justify-content: center;80    font-size: 28px;81  }82  .code { font-size: 46px; font-weight: 600; }83  .drop { margin-left: 10px; opacity: 0.7; }84  .swap {85    width: 120px;86    display: flex; align-items: center; justify-content: center; color: #555;87  }88 89  /* Amounts */90  .amounts {91    margin: 8px 36px 20px;92    display: flex;93    align-items: flex-start;94  }95  .amount-box {96    background: #dfdfe0;97    border-radius: 18px;98    box-shadow: 0 6px 10px rgba(0,0,0,0.2);99    padding: 24px 28px;100    width: 520px;101    font-size: 64px;102    font-weight: 600;103    color: #333;104  }105  .today {106    margin-left: auto;107    text-align: right;108    padding: 10px 6px;109  }110  .today .label { color: #666; font-size: 34px; }111  .today .value { font-size: 66px; font-weight: 700; margin-top: 6px; }112 113  /* Range row */114  .range-row {115    margin: 18px 0 0;116    height: 112px;117    background: #cfcfcf;118    display: flex;119    align-items: center;120    padding: 0 36px;121    box-shadow: inset 0 2px 0 rgba(0,0,0,0.05);122  }123  .range-row .period { font-size: 46px; font-weight: 700; margin-right: 24px; }124  .range-row .dates { font-size: 38px; color: #555; }125  .range-row .chev { margin-left: auto; opacity: 0.7; }126 127  /* Chart card */128  .chart-card {129    margin: 24px 28px;130    padding: 18px;131    background: #a8d5ea;132    border: 1px solid rgba(0,0,0,0.15);133    border-radius: 26px;134    box-shadow: 0 6px 10px rgba(0,0,0,0.25);135    position: relative;136    height: 1080px;137  }138  .chart-top {139    position: absolute; top: 14px; left: 24px; right: 24px;140    display: flex; justify-content: space-between; color: #4c6d7a; font-size: 38px; font-weight: 600;141  }142  .chart-area {143    position: absolute; left: 18px; right: 18px; top: 66px; bottom: 110px;144    border-radius: 18px;145    background:146      linear-gradient(180deg, rgba(255,255,255,0.15), rgba(0,0,0,0.05)),147      repeating-linear-gradient(180deg, rgba(255,255,255,0.35) 0 2px, rgba(255,255,255,0) 2px 220px);148    overflow: hidden;149  }150  .y-labels {151    position: absolute; left: 16px; top: 90px; bottom: 160px; width: 110px;152    color: rgba(0,0,0,0.6); font-size: 32px; line-height: 220px;153  }154  .x-labels {155    position: absolute; left: 90px; right: 24px; bottom: 26px;156    display: flex; justify-content: space-between; color: rgba(0,0,0,0.6); font-size: 32px;157  }158  .chart-svg {159    position: absolute; inset: 0;160  }161  .plot-fill { fill: rgba(41, 94, 125, 0.18); }162  .plot-line { stroke: rgba(41,94,125,0.9); stroke-width: 4; fill: none; }163 164  /* Ad bar */165  .ad-bar {166    position: absolute; left: 0; right: 0; bottom: 110px;167    height: 180px;168    background: #f2f2f2;169    border-top: 1px solid #d0d0d0;170    display: flex; align-items: center; padding: 0 24px; box-sizing: border-box;171  }172  .ad-left {173    width: 80px; display: flex; flex-direction: column; align-items: center; gap: 12px;174    color: #67a0b5; font-size: 40px;175  }176  .ad-content { display: flex; align-items: center; gap: 24px; }177  .app-icon {178    width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;179    display: flex; align-items: center; justify-content: center; border-radius: 24px; font-size: 30px;180  }181  .ad-text { display: flex; flex-direction: column; }182  .ad-title { font-size: 44px; font-weight: 700; }183  .ad-sub { color: #666; font-size: 34px; margin-top: 6px; }184  .ad-button {185    margin-left: auto; margin-right: 16px;186    background: #2fb86a; color: white; font-size: 44px; font-weight: 700; border-radius: 50px;187    padding: 18px 46px;188  }189 190  /* Gesture bar */191  .gesture {192    position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);193    width: 360px; height: 14px; background: #cfcfcf; border-radius: 10px;194    box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);195  }196</style>197</head>198<body>199<div id="render-target">200 201  <!-- Status Bar -->202  <div class="status-bar">203    <div class="status-left">11:10</div>204    <div class="status-right">205      <div class="sb-icon" title="Do not disturb">206        <svg width="36" height="36" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="#fff" opacity="0.8"/><rect x="6" y="11" width="12" height="2" fill="#6a6a6a"/></svg>207      </div>208      <div class="sb-icon" title="WiFi">209        <svg width="36" height="36" viewBox="0 0 24 24"><path d="M2 9c5-5 15-5 20 0" stroke="#fff" stroke-width="2" fill="none"/><path d="M6 13c3-3 9-3 12 0" stroke="#fff" stroke-width="2" fill="none"/><circle cx="12" cy="17" r="1.8" fill="#fff"/></svg>210      </div>211      <div class="sb-icon" title="Signal">212        <svg width="36" height="36" viewBox="0 0 24 24"><rect x="3" y="14" width="3" height="7" fill="#fff"/><rect x="9" y="11" width="3" height="10" fill="#fff" opacity="0.85"/><rect x="15" y="8" width="3" height="13" fill="#fff" opacity="0.7"/></svg>213      </div>214      <div class="sb-icon" title="Battery">215        <svg width="48" height="36" viewBox="0 0 30 18">216          <rect x="1" y="3" width="24" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>217          <rect x="3" y="5" width="18" height="8" fill="#fff"/>218          <rect x="25" y="7" width="3" height="4" rx="1" fill="#fff"/>219        </svg>220      </div>221    </div>222  </div>223 224  <!-- Header -->225  <div class="app-header">226    <svg width="56" height="56" viewBox="0 0 24 24">227      <path d="M15 5L8 12l7 7" stroke="#222" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>228    </svg>229    <h1>History</h1>230    <div class="spacer"></div>231    <svg width="52" height="52" viewBox="0 0 24 24">232      <path d="M3 12a9 9 0 1 1 2.6 6.4" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round"/>233      <path d="M3 12h4" stroke="#333" stroke-width="2" stroke-linecap="round"/>234    </svg>235  </div>236 237  <!-- Currency selector -->238  <div class="panel">239    <div class="currency-row">240      <div class="curr">241        <div class="img-placeholder">[IMG: UK Flag]</div>242        <div class="code">GBP</div>243        <svg class="drop" width="28" height="28" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round"/></svg>244      </div>245      <div class="swap">246        <svg width="64" height="64" viewBox="0 0 24 24">247          <path d="M7 7h10l-3-3M17 17H7l3 3" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>248        </svg>249      </div>250      <div class="curr" style="justify-content:flex-end;">251        <div class="img-placeholder">[IMG: Australia Flag]</div>252        <div class="code">AUD</div>253        <svg class="drop" width="28" height="28" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round"/></svg>254      </div>255    </div>256  </div>257 258  <!-- Amounts -->259  <div class="amounts">260    <div class="amount-box">4,493.91</div>261    <div class="today">262      <div class="label">Today</div>263      <div class="value">8,623.89</div>264    </div>265  </div>266 267  <!-- Range header -->268  <div class="range-row">269    <div class="period">3 months</div>270    <div class="dates">Aug 19, 2023 - Nov 17, 2023</div>271    <svg class="chev" width="42" height="42" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round"/></svg>272  </div>273 274  <!-- Chart -->275  <div class="chart-card">276    <div class="chart-top">277      <div>Min: 1.89</div>278      <div>Max: 2.0</div>279    </div>280 281    <div class="chart-area">282      <!-- grid lines are from background; add plot -->283      <svg class="chart-svg" viewBox="0 0 1000 700" preserveAspectRatio="none">284        <!-- area fill -->285        <path class="plot-fill" d="M0,90286          C80,180 140,360 220,300287          S340,260 420,430288          S540,520 600,450289          S720,380 760,520290          S880,480 930,520291          L930,700 0,700 Z"/>292        <!-- line -->293        <path class="plot-line" d="M0,90294          C80,180 140,360 220,300295          S340,260 420,430296          S540,520 600,450297          S720,380 760,520298          S880,480 930,520"/>299      </svg>300 301      <!-- Y labels -->302      <div class="y-labels">303        <div>2.00</div>304        <div>1.98</div>305        <div>1.96</div>306        <div>1.94</div>307        <div>1.92</div>308        <div>1.90</div>309      </div>310    </div>311 312    <div class="x-labels">313      <div>8/19</div>314      <div>8/31</div>315      <div>9/13</div>316      <div>9/26</div>317      <div>10/9</div>318      <div>10/22</div>319      <div>11/4</div>320      <div>11/17</div>321    </div>322  </div>323 324  <!-- Ad -->325  <div class="ad-bar">326    <div class="ad-left">327      <svg width="44" height="44" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="none" stroke="#67a0b5" stroke-width="2"/><text x="12" y="16" text-anchor="middle" font-size="12" fill="#67a0b5">i</text></svg>328      <svg width="44" height="44" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="none" stroke="#67a0b5" stroke-width="2"/><path d="M7 7l10 10M17 7L7 17" stroke="#67a0b5" stroke-width="2"/></svg>329    </div>330    <div class="ad-content">331      <div class="app-icon">[IMG: App Icon]</div>332      <div class="ad-text">333        <div class="ad-title">Facebook</div>334        <div class="ad-sub">3.9 ★  FREE</div>335      </div>336    </div>337    <div class="ad-button">Open</div>338  </div>339 340  <!-- Gesture bar -->341  <div class="gesture"></div>342 343</div>344</body>345</html>