GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>History Screen</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    border-radius: 24px;15    box-shadow: 0 8px 24px rgba(0,0,0,0.08);16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17    color: #1f1f1f;18  }19 20  .status-bar {21    height: 100px;22    padding: 0 40px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    font-size: 36px;27    color: #222;28  }29  .status-right {30    display: flex;31    gap: 24px;32    align-items: center;33  }34  .app-bar {35    height: 140px;36    padding: 0 28px;37    display: flex;38    align-items: center;39    justify-content: space-between;40    border-bottom: 1px solid #ededed;41  }42  .app-left {43    display: flex;44    align-items: center;45    gap: 24px;46  }47  .title {48    font-size: 56px;49    font-weight: 500;50    letter-spacing: 0.2px;51  }52 53  .currencies {54    height: 220px;55    display: flex;56    align-items: center;57    justify-content: center;58    gap: 80px;59    padding: 0 60px;60  }61  .cur-card {62    display: flex;63    align-items: center;64    gap: 28px;65  }66  .flag {67    width: 180px;68    height: 120px;69    background: #E0E0E0;70    border: 1px solid #BDBDBD;71    border-radius: 16px;72    display: flex;73    justify-content: center;74    align-items: center;75    color: #757575;76    font-size: 30px;77  }78  .cur-label {79    display: flex;80    align-items: center;81    gap: 12px;82    font-size: 44px;83    font-weight: 500;84  }85 86  .filter-bar {87    height: 160px;88    display: flex;89    align-items: center;90    justify-content: space-between;91    padding: 0 40px;92    border-top: 1px solid #eeeeee;93    border-bottom: 1px solid #eeeeee;94    background: #fafafa;95  }96  .filter-left {97    display: flex;98    align-items: center;99    gap: 24px;100    font-size: 40px;101  }102  .filter-left .range {103    color: #6b6b6b;104    font-size: 36px;105  }106 107  .content {108    height: 1600px;109    position: relative;110    background: #ffffff;111  }112  .spinner {113    position: absolute;114    left: 50%;115    top: 50%;116    width: 120px;117    height: 120px;118    margin-left: -60px;119    margin-top: -60px;120    border: 12px solid #222;121    border-top-color: transparent;122    border-right-color: transparent;123    border-radius: 50%;124    box-sizing: border-box;125  }126 127  .ad-bar {128    height: 140px;129    background: #f2f2f2;130    border-top: 1px solid #e2e2e2;131    display: flex;132    align-items: center;133    justify-content: space-between;134    padding: 0 32px;135    font-size: 36px;136  }137  .ad-left {138    display: flex;139    align-items: center;140    gap: 24px;141    color: #333;142  }143  .ad-icon {144    width: 80px;145    height: 80px;146    background: #E0E0E0;147    border: 1px solid #BDBDBD;148    border-radius: 12px;149    display: flex;150    align-items: center;151    justify-content: center;152    color: #757575;153    font-size: 24px;154  }155  .ad-btn {156    background: #3478f6;157    color: #fff;158    border: none;159    border-radius: 12px;160    padding: 22px 36px;161    font-size: 34px;162    font-weight: 600;163  }164 165  .pill {166    position: absolute;167    bottom: 24px;168    left: 50%;169    transform: translateX(-50%);170    width: 280px;171    height: 16px;172    background: #c9c9c9;173    border-radius: 12px;174  }175 176  /* Icon helpers */177  .icon-btn svg { display: block; }178  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }179</style>180</head>181<body>182  <div id="render-target">183    <!-- Status bar -->184    <div class="status-bar">185      <div class="status-left">1:59</div>186      <div class="status-right">187        <!-- sun icon -->188        <svg width="36" height="36" viewBox="0 0 24 24">189          <circle cx="12" cy="12" r="4" fill="#777"></circle>190          <g stroke="#777" stroke-width="1.5" stroke-linecap="round">191            <path d="M12 2v3"></path>192            <path d="M12 19v3"></path>193            <path d="M2 12h3"></path>194            <path d="M19 12h3"></path>195            <path d="M4.2 4.2l2.1 2.1"></path>196            <path d="M17.7 17.7l2.1 2.1"></path>197            <path d="M19.8 4.2l-2.1 2.1"></path>198            <path d="M6.3 17.7l-2.1 2.1"></path>199          </g>200        </svg>201        <!-- wifi icon -->202        <svg width="36" height="36" viewBox="0 0 24 24">203          <g fill="none" stroke="#777" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">204            <path d="M3 9c5-4 13-4 18 0"></path>205            <path d="M6 12c3.5-2.8 8.5-2.8 12 0"></path>206            <path d="M9 15c2-1.6 4.9-1.6 6.9 0"></path>207            <circle cx="12" cy="18" r="1.4" fill="#777"></circle>208          </g>209        </svg>210        <!-- battery icon -->211        <svg width="36" height="36" viewBox="0 0 26 16">212          <rect x="1" y="2" width="20" height="12" rx="2" ry="2" stroke="#777" fill="none" stroke-width="1.8"></rect>213          <rect x="3" y="4" width="16" height="8" fill="#777"></rect>214          <rect x="22" y="6" width="3" height="4" rx="1" fill="#777"></rect>215        </svg>216      </div>217    </div>218 219    <!-- App bar -->220    <div class="app-bar">221      <div class="app-left">222        <div class="icon-btn">223          <svg width="60" height="60" viewBox="0 0 48 48">224            <path d="M30 10 L14 24 L30 38" stroke="#222" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>225          </svg>226        </div>227        <div class="title">History</div>228      </div>229      <div class="icon-btn">230        <svg width="56" height="56" viewBox="0 0 48 48">231          <g fill="none" stroke="#222" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round">232            <path d="M24 10a14 14 0 1 0 14 14"></path>233            <path d="M38 10v10h-10"></path>234          </g>235        </svg>236      </div>237    </div>238 239    <!-- Currency selection -->240    <div class="currencies">241      <div class="cur-card">242        <div class="flag">[IMG: EU flag]</div>243        <div class="cur-label">244          <span>EUR</span>245          <svg width="32" height="32" viewBox="0 0 24 24">246            <path d="M6 9l6 6 6-6" stroke="#444" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>247          </svg>248        </div>249      </div>250      <div class="icon-btn">251        <svg width="80" height="80" viewBox="0 0 60 50">252          <g fill="none" stroke="#444" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">253            <path d="M10 18h30l-6-6"></path>254            <path d="M50 32H20l6 6"></path>255          </g>256        </svg>257      </div>258      <div class="cur-card">259        <div class="flag">[IMG: US flag]</div>260        <div class="cur-label">261          <span>USD</span>262          <svg width="32" height="32" viewBox="0 0 24 24">263            <path d="M6 9l6 6 6-6" stroke="#444" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>264          </svg>265        </div>266      </div>267    </div>268 269    <!-- Filter bar -->270    <div class="filter-bar">271      <div class="filter-left">272        <span style="font-weight:500;">3 months</span>273        <span class="range">Aug 02, 2023 - Oct 31, 2023</span>274      </div>275      <svg width="40" height="40" viewBox="0 0 24 24">276        <path d="M6 9l6 6 6-6" stroke="#666" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>277      </svg>278    </div>279 280    <!-- Content area with spinner -->281    <div class="content">282      <div class="spinner"></div>283    </div>284 285    <!-- Ad bar -->286    <div class="ad-bar">287      <div class="ad-left">288        <div class="ad-icon">[IMG]</div>289        <div>Remove ads and support future development</div>290      </div>291      <button class="ad-btn">Remove ads</button>292    </div>293 294    <!-- Bottom navigation pill -->295    <div class="pill"></div>296  </div>297</body>298</html>