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>History Screen Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Roboto, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background:20      repeating-linear-gradient(0deg, #e8e8e8 0px, #e8e8e8 2px, #dedede 2px, #dedede 4px);21  }22 23  /* Status bar */24  .status-bar {25    height: 112px;26    background: #777;27    color: #fff;28    display: flex;29    align-items: center;30    padding: 0 36px;31    font-size: 34px;32    letter-spacing: 1px;33  }34  .status-right {35    margin-left: auto;36    display: flex;37    align-items: center;38    gap: 24px;39    opacity: 0.95;40  }41  .dot {42    width: 10px;43    height: 10px;44    background: #fff;45    border-radius: 50%;46  }47 48  /* App bar */49  .app-bar {50    height: 156px;51    display: flex;52    align-items: center;53    padding: 0 28px;54    color: #222;55  }56  .app-title {57    font-size: 64px;58    font-weight: 500;59    margin-left: 12px;60  }61  .app-actions {62    margin-left: auto;63    display: flex;64    align-items: center;65    gap: 30px;66  }67  .icon-btn {68    width: 72px;69    height: 72px;70    display: grid;71    place-items: center;72    color: #222;73  }74  .icon {75    width: 48px;76    height: 48px;77    fill: none;78    stroke: currentColor;79    stroke-width: 6;80    stroke-linecap: round;81    stroke-linejoin: round;82  }83 84  /* Currency switch card */85  .switch-card {86    margin: 10px 28px 24px;87    background: #d6d6d6;88    border-radius: 26px;89    border: 1px solid #bdbdbd;90    box-shadow: 0 2px 0 rgba(0,0,0,0.1), inset 0 2px 6px rgba(255,255,255,0.6);91    height: 170px;92    display: flex;93    align-items: center;94    padding: 0 30px;95    gap: 26px;96  }97  .flag {98    width: 150px;99    height: 96px;100    background: #E0E0E0;101    border: 1px solid #BDBDBD;102    border-radius: 18px;103    display: flex;104    justify-content: center;105    align-items: center;106    color: #757575;107    font-size: 28px;108  }109  .ccy {110    display: flex;111    align-items: center;112    gap: 12px;113    color: #2b2b2b;114    font-size: 50px;115  }116  .ccy .dd {117    width: 28px; height: 28px; color: #4a4a4a;118  }119  .swap {120    margin: 0 16px;121    width: 80px;122    height: 80px;123    display: grid;124    place-items: center;125    color: #3a3a3a;126  }127 128  /* Date range bar */129  .range-bar {130    height: 110px;131    background: #cfcfcf;132    display: flex;133    align-items: center;134    padding: 0 32px;135    border-top: 1px solid #bdbdbd;136    border-bottom: 1px solid #bdbdbd;137    color: #2a2a2a;138  }139  .range-primary {140    font-size: 50px;141    font-weight: 600;142    margin-right: 16px;143  }144  .range-dates {145    font-size: 38px;146    color: #5c5c5c;147  }148  .range-right {149    margin-left: auto;150  }151 152  /* Chart card */153  .chart-card {154    margin: 24px 28px;155    height: 1240px;156    background: #9fd2e6;157    border-radius: 26px;158    border: 1px solid #9bb8c6;159    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.15), 0 2px 0 rgba(0,0,0,0.08);160    position: relative;161  }162  .spinner {163    position: absolute;164    left: 50%;165    top: 50%;166    transform: translate(-50%,-50%);167    width: 120px;168    height: 120px;169  }170  .spinner circle {171    fill: none;172    stroke: #111;173    stroke-width: 18;174    stroke-linecap: round;175    stroke-dasharray: 240;176    stroke-dashoffset: 120;177  }178 179  /* Ad banner */180  .ad-banner {181    position: absolute;182    left: 0;183    right: 0;184    bottom: 140px;185    background: #f4f4f4;186    border-top: 1px solid #d0d0d0;187    height: 170px;188    display: flex;189    align-items: center;190    padding: 0 28px;191    box-shadow: 0 -2px 0 rgba(0,0,0,0.06);192    gap: 20px;193  }194  .ad-icon {195    width: 96px;196    height: 96px;197    background: #E0E0E0;198    border: 1px solid #BDBDBD;199    border-radius: 16px;200    display: flex;201    justify-content: center;202    align-items: center;203    color: #757575;204    font-size: 26px;205  }206  .ad-text {207    font-size: 38px;208    color: #2a2a2a;209  }210  .ad-btn {211    margin-left: auto;212    background: #76a9bf;213    color: #fff;214    padding: 22px 34px;215    border-radius: 18px;216    font-size: 38px;217    border: none;218  }219 220  /* Bottom gesture area */221  .gesture-bar {222    position: absolute;223    left: 0; right: 0; bottom: 0;224    height: 140px;225    background: #7a7a7a;226    display: flex;227    justify-content: center;228    align-items: center;229  }230  .gesture-pill {231    width: 200px;232    height: 12px;233    background: #fff;234    border-radius: 8px;235    opacity: 0.9;236  }237</style>238</head>239<body>240<div id="render-target">241  <!-- Status bar -->242  <div class="status-bar">243    <div>11:08</div>244    <div class="status-right">245      <div class="dot" style="width:14px;height:14px;"></div>246      <div class="dot"></div>247      <div class="dot"></div>248      <svg class="icon" viewBox="0 0 24 24" style="stroke:#fff;width:38px;height:38px;">249        <path d="M3 12h18M12 3v18"></path>250      </svg>251      <svg class="icon" viewBox="0 0 24 24" style="stroke:#fff;width:38px;height:38px;">252        <path d="M6 12a6 6 0 1112 0 6 6 0 01-12 0z"></path>253      </svg>254    </div>255  </div>256 257  <!-- App bar -->258  <div class="app-bar">259    <div class="icon-btn">260      <svg class="icon" viewBox="0 0 24 24">261        <path d="M15 18l-6-6 6-6"></path>262      </svg>263    </div>264    <div class="app-title">History</div>265    <div class="app-actions">266      <div class="icon-btn">267        <svg class="icon" viewBox="0 0 24 24">268          <path d="M20 12a8 8 0 10-2.3 5.7"></path>269          <path d="M20 4v6h-6"></path>270        </svg>271      </div>272    </div>273  </div>274 275  <!-- Currency switch card -->276  <div class="switch-card">277    <div class="flag">[IMG: Flag]</div>278    <div class="ccy">279      <span>CNY</span>280      <svg class="dd" viewBox="0 0 24 24">281        <path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>282      </svg>283    </div>284    <div class="swap">285      <svg class="icon" viewBox="0 0 24 24">286        <path d="M7 8h10M13 4l4 4-4 4"></path>287        <path d="M17 16H7M11 20l-4-4 4-4"></path>288      </svg>289    </div>290    <div class="flag">[IMG: Flag]</div>291    <div class="ccy" style="margin-left: 4px;">292      <span>AUD</span>293      <svg class="dd" viewBox="0 0 24 24">294        <path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>295      </svg>296    </div>297  </div>298 299  <!-- Date range bar -->300  <div class="range-bar">301    <div class="range-primary">3 months</div>302    <div class="range-dates">Aug 19, 2023 - Nov 17, 2023</div>303    <div class="range-right">304      <svg class="icon" viewBox="0 0 24 24" style="width:42px;height:42px;color:#4a4a4a;">305        <path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>306      </svg>307    </div>308  </div>309 310  <!-- Chart card with loading spinner -->311  <div class="chart-card">312    <svg class="spinner" viewBox="0 0 100 100">313      <circle cx="50" cy="50" r="36"></circle>314    </svg>315  </div>316 317  <!-- Ad banner -->318  <div class="ad-banner">319    <div class="ad-icon">[IMG]</div>320    <div class="ad-text">Remove ads and support future development</div>321    <button class="ad-btn">Remove ads</button>322  </div>323 324  <!-- Bottom gesture bar -->325  <div class="gesture-bar">326    <div class="gesture-pill"></div>327  </div>328</div>329</body>330</html>