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, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff; color: #212121;13  }14 15  /* Status bar */16  .status-bar {17    height: 90px;18    padding: 0 28px;19    display: flex; align-items: center; justify-content: space-between;20    color: #424242;21    font-size: 34px;22  }23  .status-right { display: flex; align-items: center; gap: 26px; }24  .icon { width: 48px; height: 48px; }25  .icon svg { width: 100%; height: 100%; }26 27  /* App header */28  .app-header {29    height: 120px;30    display: flex; align-items: center;31    padding: 0 28px;32    border-bottom: 1px solid #e0e0e0;33    position: relative;34  }35  .header-title {36    font-size: 56px; font-weight: 600; margin-left: 18px;37  }38  .header-actions { position: absolute; right: 28px; display: flex; align-items: center; gap: 28px; }39 40  /* Currency row */41  .currency-row {42    display: flex; align-items: center; justify-content: space-between;43    padding: 24px 28px;44  }45  .currency-group {46    display: flex; align-items: center; gap: 22px;47  }48  .flag {49    width: 140px; height: 90px; background: #E0E0E0; border: 1px solid #BDBDBD;50    display: flex; justify-content: center; align-items: center; color: #757575; font-size: 28px; border-radius: 10px;51  }52  .currency-label { font-size: 44px; font-weight: 600; }53  .dropdown {54    width: 40px; height: 40px; display: inline-block; vertical-align: middle;55  }56 57  .swap-icon { width: 64px; height: 64px; opacity: 0.8; }58 59  /* Amount and converted value */60  .amount-row {61    display: flex; align-items: flex-start; justify-content: space-between;62    padding: 10px 28px 28px 28px;63  }64  .amount-input {65    width: 560px; height: 120px; font-size: 48px; color: #212121;66    border: 2px solid #e0e0e0; border-radius: 16px; padding: 0 28px;67    display: flex; align-items: center; background: #fff; box-shadow: 0 2px 0 rgba(0,0,0,0.06);68  }69  .converted {70    text-align: right; padding-right: 8px;71  }72  .converted .label { color: #9e9e9e; font-size: 32px; }73  .converted .value { font-size: 64px; font-weight: 600; margin-top: 8px; }74 75  .section-divider {76    height: 24px; background: #fafafa; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea;77  }78 79  /* Range selector */80  .range-row {81    display: flex; align-items: center; justify-content: space-between;82    padding: 28px;83    font-size: 40px;84  }85  .range-left { display: flex; align-items: baseline; gap: 22px; }86  .range-left .selected { font-weight: 700; }87  .range-left .date { color: #757575; font-size: 36px; }88  .range-right .dropdown { width: 44px; height: 44px; }89 90  /* Chart area */91  .chart-area {92    position: relative;93    margin: 0 0;94    height: 1400px;95  }96  .chart-bg {97    position: absolute; inset: 0;98    background: linear-gradient(#ffffff, #ffffff);99    border-top: 1px solid #eeeeee;100  }101  .chart-img {102    position: absolute; left: 28px; right: 28px; top: 40px; bottom: 40px;103    background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 12px;104    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 38px;105  }106 107  /* Spinner overlay */108  .spinner {109    position: absolute; left: 50%; top: 50%;110    width: 120px; height: 120px; margin-left: -60px; margin-top: -60px;111    border-radius: 50%;112    border: 16px solid rgba(0,0,0,0.14);113    border-top-color: #212121;114    animation: spin 1.2s linear infinite;115  }116  @keyframes spin { to { transform: rotate(360deg); } }117 118  /* Bottom gallery bar */119  .gallery-bar {120    position: absolute; left: 0; right: 0; bottom: 100px;121    height: 220px; background: #ffffff;122    border-top: 1px solid #e0e0e0;123    display: flex; align-items: center; gap: 16px; padding: 12px 12px;124    overflow-x: auto;125  }126  .gallery-item {127    min-width: 180px; height: 180px; border-radius: 10px; border: 1px solid #ddd;128    position: relative; background: #fff; display: flex; flex-direction: column; justify-content: flex-end;129  }130  .gallery-item .thumb {131    position: absolute; left: 0; top: 0; right: 0; bottom: 40px;132    background: #E0E0E0; border-bottom: 1px solid #BDBDBD;133    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px;134    border-top-left-radius: 10px; border-top-right-radius: 10px;135  }136  .price-tag {137    position: absolute; left: 8px; right: 8px; bottom: 8px;138    height: 48px; border-radius: 8px; border: 1px solid #d5d5d5; background: #fff;139    display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 600;140  }141 142  .gallery-left {143    display: flex; align-items: center; gap: 16px; margin-right: 12px;144  }145  .tiny-btn {146    width: 64px; height: 64px; border-radius: 32px; border: 2px solid #00BCD4; color: #00BCD4;147    display: flex; align-items: center; justify-content: center; font-weight: 700; background: #E0F7FA;148  }149  .app-icon {150    width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 24px;151    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;152  }153 154  /* Home pill */155  .home-pill {156    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);157    width: 300px; height: 14px; background: #bdbdbd; border-radius: 7px; opacity: 0.6;158  }159</style>160</head>161<body>162<div id="render-target">163 164  <!-- Status bar -->165  <div class="status-bar">166    <div class="time">2:01</div>167    <div class="status-right