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; color: #1f1f1f; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff;13  }14 15  /* Status bar */16  .status-bar {17    height: 90px;18    padding: 20px 30px;19    display: flex;20    align-items: center;21    justify-content: space-between;22    color: #212121;23    font-size: 28px;24  }25  .status-right { display: flex; gap: 24px; align-items: center; }26  .status-icon {27    width: 30px; height: 30px; border-radius: 50%; background: #C7C7C7;28  }29  .battery {30    width: 36px; height: 20px; border: 2px solid #6D6D6D; border-radius: 4px; position: relative;31  }32  .battery::after { content: ""; position: absolute; right: -6px; top: 6px; width: 4px; height: 8px; background: #6D6D6D; border-radius: 2px; }33  .battery .level { position: absolute; left: 2px; top: 2px; height: 14px; width: 22px; background: #6D6D6D; border-radius: 2px; }34 35  /* Header */36  .header {37    height: 120px;38    display: flex;39    align-items: center;40    padding: 0 36px;41    position: relative;42  }43  .header .title { font-size: 40px; font-weight: 600; margin-left: 18px; }44  .header .right { margin-left: auto; }45  .icon-btn { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }46 47  /* Currency row */48  .currency-row {49    display: flex;50    align-items: center;51    justify-content: space-between;52    padding: 12px 36px 0 36px;53  }54  .currency {55    display: flex; align-items: center; gap: 18px;56  }57  .flag {58    width: 140px; height: 92px; background: #E0E0E0; border: 1px solid #BDBDBD;59    display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 10px;60    font-size: 28px;61  }62  .code { font-size: 34px; font-weight: 600; }63  .dropdown { width: 28px; height: 28px; display: inline-flex; vertical-align: middle; margin-left: 8px; }64  .swap-icon { width: 70px; height: 70px; margin: 0 12px; }65 66  /* Input and result */67  .convert-row {68    display: flex; align-items: flex-start; justify-content: space-between;69    padding: 16px 36px 20px 36px;70  }71  .amount-input {72    width: 600px; height: 120px; border: 2px solid #E0E0E0; border-radius: 18px;73    display: flex; align-items: center; padding: 0 26px; font-size: 44px; color: #333;74    box-shadow: 0 2px 0 rgba(0,0,0,0.06);75  }76  .result {77    width: 300px; text-align: right;78  }79  .result .label { color: #8C8C8C; font-size: 28px; }80  .result .value { font-size: 56px; font-weight: 600; margin-top: 6px; }81 82  .divider { height: 1px; background: #EFEFEF; margin: 18px 0; }83 84  /* Range row */85  .range-row {86    display: flex; align-items: center; justify-content: space-between;87    padding: 20px 36px 6px 36px;88  }89  .range-left { display: flex; align-items: baseline; gap: 18px; }90  .range-left .period { font-size: 36px; font-weight: 600; }91  .range-left .dates { font-size: 28px; color: #8A8A8A; }92  .minmax-row {93    display: flex; align-items: center; justify-content: space-between;94    color: #8A8A8A; font-size: 28px; padding: 8px 36px 0 36px;95  }96  .chart {97    margin: 14px 24px;98    height: 1050px;99    background: #E0E0E0;100    border: 1px solid #BDBDBD;101    display: flex; align-items: center; justify-content: center;102    color: #757575; font-size: 34px; border-radius: 12px;103  }104 105  /* Bottom carousel */106  .bottom-strip {107    position: absolute; left: 0; right: 0; bottom: 120px;108    padding: 12px 20px;109    border-top: 1px solid #EDEDED;110    background: #fff;111  }112  .cards { display: flex; align-items: center; gap: 18px; overflow: hidden; }113  .card {114    width: 190px; height: 160px; border: 1px solid #BDBDBD; background: #E0E0E0;115    border-radius: 10px; position: relative; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;116  }117  .price {118    position: absolute; bottom: 6px; left: 6px; padding: 6px 10px; background: #FFFFFFEE; border: 1px solid #D0D0D0;119    border-radius: 8px; font-size: 24px; color: #333;120  }121 122  /* Info rail (left) */123  .info-rail {124    position: absolute; left: 8px; bottom: 180px; width: 36px; height: 160px;125    border-radius: 18px; background: #E6F8F9; border: 1px solid #BBDADB;126    display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 10px 0;127  }128  .rail-btn {129    width: 28px; height: 28px; border-radius: 50%; background: #16C2CC; color: #fff; font-size: 20px; display: flex; align-items: center; justify-content: center;130  }131  .rail-x {132    width: 24px; height: 24px; border-radius: 6px; background: #16C2CC; color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center;133  }134 135  /* Gesture bar */136  .gesture {137    position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);138    width: 260px; height: 12px; background: #CFCFCF; border-radius: 8px;139  }140 141  /* Utility */142  .muted { color: #8A8A8A; }143</style>144</head>145<body>146<div id="render-target">147 148  <!-- Status bar -->149  <div class="status-bar">150    <div>2:01</div>151    <div class="status-right">152      <div class="status-icon"></div>153      <div class="battery"><div class="level"></div></div>154    </div>155  </div>156 157  <!-- Header with back and refresh -->158  <div class="header">159    <div class="icon-btn">160      <svg width="40" height="40" viewBox="0 0 40 40">161        <path d="M24 8 L12 20 L24 32" fill="none" stroke="#222" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>162      </svg>163    </div>164    <div class="title">History</div>165    <div class="right icon-btn">166      <svg width="40" height="40" viewBox="0 0 40 40">167        <path d="M20 8a12 12 0 1 1-8.5 3.5" fill="none" stroke="#222" stroke-width="3" stroke-linecap="round"></path>168        <path d="M8 10 L12 10 L12 14" fill="none" stroke="#222" stroke-width="3" stroke-linecap="round"></path>169      </svg>170    </div>171  </div>172 173  <!-- Currency select row -->174  <div class="currency-row">175    <div class="currency">176      <div class="flag">[IMG: EU Flag]</div>177      <div class="code">EUR178        <svg class="dropdown" viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>179      </div>180    </div>181 182    <svg class="swap-icon" viewBox="0 0 40 40">183      <path d="M10 12 H30 M26 8 L30 12 L26 16" fill="none" stroke="#333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>184      <path d="M30 28 H10 M14 24 L10 28 L14 32" fill="none" stroke="#333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>185    </svg>186 187    <div class="currency">188      <div class="flag">[IMG: US Flag]</div>189      <div class="code">USD190        <svg class="dropdown" viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>191      </div>192    </div>193  </div>194 195  <!-- Amount and Today -->196  <div class="convert-row">197    <div class="amount-input">1,000.0</div>198    <div class="result">199      <div class="label">Today</div>200      <div class="value">1,063.2</div>201    </div>202  </div>203 204  <div class="divider"></div>205 206  <!-- Range / filter -->207  <div class="range-row">208    <div class="range-left">209      <div class="period">1 year</div>210      <div class="dates">Oct 31, 2022 - Oct 31, 2023</div>211    </div>212    <div class="icon-btn">213      <svg width="36" height="36" viewBox="0 0 24 24">214        <path d="M6 9 L12 15 L18 9" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>215      </svg>216    </div>217  </div>218 219  <div class="minmax-row">220    <div></div>221    <div>Min: 0.97</div>222    <div>Max: 1.12</div>223  </div>224 225  <!-- Chart placeholder -->226  <div class="chart">[IMG: Area Chart EUR → USD (1 year)]</div>227 228  <!-- Bottom thumbnail strip -->229  <div class="bottom-strip">230    <div class="cards">231      <div class="card">[IMG: App Icon]</div>232      <div class="card">[IMG: City Skyline]<div class="price">€17.75</div></div>233      <div class="card">[IMG: Rooftops]<div class="price">€24.82</div></div>234      <div class="card">[IMG: Museum]<div class="price">€68.98</div></div>235      <div class="card">[IMG: Cathedral]<div class="price">€5</div></div>236      <div class="card">[IMG: Canal City]<div class="price">€12.81</div></div>237      <div class="card">[IMG: Town Square]<div class="price">€6</div></div>238    </div>239  </div>240 241  <!-- Info rail -->242  <div class="info-rail">243    <div class="rail-btn">i</div>244    <div class="rail-x">x</div>245  </div>246 247  <!-- Gesture bar -->248  <div class="gesture"></div>249 250</div>251</body>252</html>