GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Currency Plus UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 border-radius: 24px;14 box-shadow: 0 0 0 1px #e0e0e0;15 }16 17 /* Status bar */18 .status-bar {19 height: 84px;20 padding: 0 32px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #2e2e2e;25 font-size: 34px;26 }27 .sb-icons {28 display: flex;29 align-items: center;30 gap: 24px;31 }32 .sb-dot {33 width: 22px; height: 22px; background:#7a7a7a; border-radius: 50%;34 }35 .sb-battery {36 width: 28px; height: 18px; border: 3px solid #7a7a7a; position: relative; border-radius:4px;37 }38 .sb-battery::after {39 content:""; position:absolute; right:-8px; top:4px; width:6px; height:10px; background:#7a7a7a; border-radius:2px;40 }41 42 /* App bar */43 .app-bar {44 height: 120px;45 display: flex;46 align-items: center;47 padding: 0 32px;48 border-bottom: 1px solid #eee;49 }50 .app-title {51 font-size: 48px;52 font-weight: 600;53 color: #222;54 letter-spacing: 1px;55 margin: 0 auto;56 }57 .app-title .plus { font-weight: 800; }58 .icon-btn {59 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; color:#333;60 }61 .icon-btn svg { width: 44px; height: 44px; }62 63 /* Update line */64 .updated {65 font-size: 36px;66 color: #777;67 text-align: center;68 padding: 22px 20px;69 border-bottom: 1px solid #f0f0f0;70 background: #fafafa;71 }72 73 /* Currency list */74 .currency-list { }75 .currency-row {76 height: 120px;77 display: flex;78 align-items: center;79 padding: 0 32px;80 border-bottom: 1px solid #eee;81 }82 .currency-row.highlight { background: #eef5ff; }83 .flag {84 width: 96px; height: 64px;85 background: #E0E0E0;86 border: 1px solid #BDBDBD;87 display: flex; align-items: center; justify-content: center;88 color: #757575; font-size: 24px; margin-right: 28px; border-radius: 6px;89 }90 .code {91 font-size: 52px; color: #444; font-weight: 600;92 display: flex; align-items: center; gap: 12px;93 }94 .row-right {95 margin-left: auto;96 display: flex; align-items: center; gap: 22px;97 }98 .value {99 font-size: 56px; color:#333;100 }101 .chevron svg { width: 28px; height: 28px; }102 .chart-icon svg { width: 48px; height: 48px; stroke:#8a8a8a; }103 104 /* Keypad */105 .keypad {106 padding: 20px 24px;107 display: grid;108 grid-template-columns: repeat(4, 1fr);109 gap: 26px;110 }111 .key {112 height: 160px;113 border: 2px solid #e6e6e6;114 border-radius: 24px;115 display: flex; align-items: center; justify-content: center;116 font-size: 72px; color:#3a3a3a; background:#fdfdfd;117 box-shadow: inset 0 0 0 1px #f6f6f6;118 }119 .key.gray { color:#888; }120 .key.orange { color:#e0772a; font-size: 54px; }121 .key svg { width: 64px; height: 64px; }122 123 /* Ad banner */124 .ad-banner {125 margin: 8px 0 0 0;126 height: 180px;127 background: #E0E0E0;128 border-top: 1px solid #BDBDBD;129 border-bottom: 1px solid #BDBDBD;130 display: flex; align-items: center; justify-content: center;131 color: #757575; font-size: 32px;132 }133 134 /* Gesture bar */135 .gesture {136 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);137 width: 420px; height: 10px; background:#cfcfcf; border-radius: 8px;138 }139</style>140</head>141<body>142<div id="render-target">143 144 <!-- Status Bar -->145 <div class="status-bar">146 <div>8:24</div>147 <div class="sb-icons">148 <div class="sb-dot"></div>149 <div class="sb-dot"></div>150 <div class="sb-battery"></div>151 </div>152 </div>153 154 <!-- App Bar -->155 <div class="app-bar">156 <div class="icon-btn" aria-label="Menu">157 <svg viewBox="0 0 24 24">158 <rect x="2" y="5" width="20" height="2" fill="#333"></rect>159 <rect x="2" y="11" width="20" height="2" fill="#333"></rect>160 <rect x="2" y="17" width="20" height="2" fill="#333"></rect>161 </svg>162 </div>163 <div class="app-title">CURRENCY <span class="plus">PLUS</span></div>164 <div class="icon-btn" aria-label="Search">165 <svg viewBox="0 0 24 24">166 <circle cx="10" cy="10" r="7" stroke="#333" stroke-width="2" fill="none"></circle>167 <line x1="15" y1="15" x2="21" y2="21" stroke="#333" stroke-width="2"></line>168 </svg>169 </div>170 </div>171 172 <!-- Updated label -->173 <div class="updated">Updated: 8:21, AM Oct 31, 2023</div>174 175 <!-- Currency List -->176 <div class="currency-list">177 178 <div class="currency-row highlight">179 <div class="flag">[IMG: EU Flag]</div>180 <div class="code">EUR181 <span class="chevron">182 <svg viewBox="0 0 24 24">183 <polyline points="6,9 12,15 18,9" fill="none" stroke="#666" stroke-width="2"/>184 </svg>185 </span>186 </div>187 <div class="row-right">188 <div class="value">0</div>189 <div class="chart-icon">190 <svg viewBox="0 0 24 24" fill="none">191 <polyline points="3,16 9,10 13,13 20,6" stroke="#888" stroke-width="2"/>192 </svg>193 </div>194 </div>195 </div>196 197 <div class="currency-row">198 <div class="flag">[IMG: US Flag]</div>199 <div class="code">USD200 <span class="chevron">201 <svg viewBox="0 0 24 24">202 <polyline points="6,9 12,15 18,9" fill="none" stroke="#666" stroke-width="2"/>203 </svg>204 </span>205 </div>206 <div class="row-right">207 <div class="value">0</div>208 <div class="chart-icon">209 <svg viewBox="0 0 24 24" fill="none">210 <polyline points="3,16 9,10 13,13 20,6" stroke="#888" stroke-width="2"/>211 </svg>212 </div>213 </div>214 </div>215 216 <div class="currency-row">217 <div class="flag">[IMG: Mexico Flag]</div>218 <div class="code">MXN219 <span class="chevron">220 <svg viewBox="0 0 24 24">221 <polyline points="6,9 12,15 18,9" fill="none" stroke="#666" stroke-width="2"/>222 </svg>223 </span>224 </div>225 <div class="row-right">226 <div class="value">0</div>227 <div class="chart-icon">228 <svg viewBox="0 0 24 24" fill="none">229 <polyline points="3,16 9,10 13,13 20,6" stroke="#888" stroke-width="2"/>230 </svg>231 </div>232 </div>233 </div>234 235 <div class="currency-row">236 <div class="flag">[IMG: Canada Flag]</div>237 <div class="code">CAD238 <span class="chevron">239 <svg viewBox="0 0 24 24">240 <polyline points="6,9 12,15 18,9" fill="none" stroke="#666" stroke-width="2"/>241 </svg>242 </span>243 </div>244 <div class="row-right">245 <div class="value">0</div>246 <div class="chart-icon">247 <svg viewBox="0 0 24 24" fill="none">248 <polyline points="3,16 9,10 13,13 20,6" stroke="#888" stroke-width="2"/>249 </svg>250 </div>251 </div>252 </div>253 254 <div class="currency-row">255 <div class="flag">[IMG: Cuba Flag]</div>256 <div class="code">CUP257 <span class="chevron">258 <svg viewBox="0 0 24 24">259 <polyline points="6,9 12,15 18,9" fill="none" stroke="#666" stroke-width="2"/>260 </svg>261 </span>262 </div>263 <div class="row-right">264 <div class="value">0</div>265 <div class="chart-icon">266 <svg viewBox="0 0 24 24" fill="none">267 <polyline points="3,16 9,10 13,13 20,6" stroke="#888" stroke-width="2"/>268 </svg>269 </div>270 </div>271 </div>272 273 <div class="currency-row">274 <div class="flag">[IMG: Japan Flag]</div>275 <div class="code">JPY276 <span class="chevron">277 <svg viewBox="0 0 24 24">278 <polyline points="6,9 12,15 18,9" fill="none" stroke="#666" stroke-width="2"/>279 </svg>280 </span>281 </div>282 <div class="row-right">283 <div class="value">0</div>284 <div class="chart-icon">285 <svg viewBox="0 0 24 24" fill="none">286 <polyline points="3,16 9,10 13,13 20,6" stroke="#888" stroke-width="2"/>287 </svg>288 </div>289 </div>290 </div>291 292 <div class="currency-row">293 <div class="flag">[IMG: UK Flag]</div>294 <div class="code">GBP295 <span class="chevron">296 <svg viewBox="0 0 24 24">297 <polyline points="6,9 12,15 18,9" fill="none" stroke="#666" stroke-width="2"/>298 </svg>299 </span>300 </div>301 <div class="row-right">302 <div class="value">0</div>303 <div class="chart-icon">304 <svg viewBox="0 0 24 24" fill="none">305 <polyline points="3,16 9,10 13,13 20,6" stroke="#888" stroke-width="2"/>306 </svg>307 </div>308 </div>309 </div>310 311 </div>312 313 <!-- Keypad -->314 <div class="keypad">315 <div class="key gray">C</div>316 <div class="key">7</div>317 <div class="key">8</div>318 <div class="key">9</div>319 320 <div class="key gray">321 <svg viewBox="0 0 24 24">322 <path d="M12 4a8 8 0 1 0 8 8" fill="none" stroke="#888" stroke-width="2"/>323 <polyline points="16,4 20,4 20,8" fill="none" stroke="#888" stroke-width="2"/>324 </svg>325 </div>326 <div class="key">4</div>327 <div class="key">5</div>328 <div class="key">6</div>329 330 <div class="key orange">+ −</div>331 <div class="key">1</div>332 <div class="key">2</div>333 <div class="key">3</div>334 335 <div class="key" style="background:#f7f7f7; border-color:#eeeeee;"></div>336 <div class="key">0</div>337 <div class="key">.</div>338 <div class="key gray">339 <svg viewBox="0 0 24 24">340 <polyline points="20,6 12,12 20,18" fill="none" stroke="#666" stroke-width="2"/>341 <rect x="4" y="7" width="10" height="10" fill="none" stroke="#666" stroke-width="2"/>342 <line x1="6.5" y1="9.5" x2="11.5" y2="14.5" stroke="#666" stroke-width="2"/>343 <line x1="11.5" y1="9.5" x2="6.5" y2="14.5" stroke="#666" stroke-width="2"/>344 </svg>345 </div>346 </div>347 348 <!-- Ad Banner -->349 <div class="ad-banner">[IMG: Insurance Ad Banner]</div>350 351 <div class="gesture"></div>352</div>353</body>354</html>