GD-ML/AndroidCode
13.4k
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 Converter UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #101418; color: #fff;13 }14 15 /* Status bar */16 .statusbar {17 position: absolute; top: 0; left: 0; right: 0;18 height: 96px; background: #000;19 color: #fff; font-weight: 600;20 }21 .statusbar .time { position: absolute; left: 34px; top: 28px; font-size: 42px; letter-spacing: 1px; }22 .statusbar .icons { position: absolute; right: 34px; top: 28px; display: flex; align-items: center; gap: 28px; }23 .status-icon { width: 40px; height: 40px; border-radius: 6px; background: #222; }24 25 /* Header */26 .header {27 position: absolute; top: 96px; left: 0; right: 0;28 height: 212px; background: #161819;29 box-shadow: 0 2px 0 rgba(0,0,0,0.6);30 }31 .header .title { position: absolute; left: 132px; top: 54px; font-size: 52px; font-weight: 800; letter-spacing: 1px; }32 .header .subtitle { position: absolute; left: 132px; top: 118px; font-size: 32px; color: #A0A7AE; }33 .header .hamburger { position: absolute; left: 36px; top: 68px; }34 .header .more { position: absolute; right: 34px; top: 66px; }35 36 /* Blue currency panel */37 .panel {38 position: absolute; top: 308px; left: 0; right: 0;39 height: 560px;40 background: linear-gradient(180deg, #4A6E93 0%, #3D5F80 100%);41 border-bottom: 2px solid rgba(0,0,0,0.3);42 }43 .panel .lang { position: absolute; left: 34px; top: 26px; font-size: 30px; color: #DDE6EE; }44 .currency-row {45 position: relative;46 display: flex; align-items: center;47 padding: 40px 34px 20px 34px;48 }49 .currency-row + .currency-row { margin-top: 8px; }50 .lens {51 width: 74px; height: 74px; margin-right: 26px;52 }53 .cur-info { flex: 1; }54 .cur-code { font-size: 46px; font-weight: 800; display: flex; align-items: center; gap: 16px; }55 .flag {56 width: 64px; height: 40px; background: #E0E0E0; border: 1px solid #BDBDBD;57 display: inline-flex; align-items: center; justify-content: center; color: #757575; font-size: 18px;58 }59 .cur-name { font-size: 28px; color: #C9D3DC; margin-top: 6px; }60 .cur-actions { width: 160px; display: flex; align-items: center; justify-content: space-between; margin-left: 12px; }61 .drop-arrow, .refresh { width: 40px; height: 40px; }62 .row-value { width: 120px; text-align: right; font-size: 72px; font-weight: 700; color: #FFFFFF; padding-right: 24px; }63 64 /* Toolbar below panel */65 .toolbar {66 position: absolute; top: 868px; left: 0; right: 0; height: 128px;67 background: linear-gradient(180deg, #1F384E 0%, #1A2E40 100%);68 display: flex; border-top: 1px solid rgba(0,0,0,0.4); border-bottom: 1px solid rgba(0,0,0,0.4);69 }70 .tool {71 flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;72 color: #C9D3DC; border-right: 1px solid rgba(0,0,0,0.35);73 }74 .tool:last-child { border-right: none; }75 .tool svg { width: 44px; height: 44px; margin-bottom: 8px; }76 .tool span { font-size: 26px; text-align: center; }77 78 /* Keypad grid */79 .keypad {80 position: absolute; top: 996px; left: 0; right: 0; bottom: 260px;81 display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px;82 background: #2A2F33;83 }84 .key {85 display: flex; align-items: center; justify-content: center;86 font-size: 88px; color: #FFFFFF;87 background: #5F676C; border: 1px solid #3B4246;88 }89 .key.dark { background: #3E4448; }90 .key.op { background: #3B4247; font-size: 82px; }91 .key.equals { background: #C2463E; font-weight: 800; font-size: 96px; color: #fff; }92 93 /* Overlay currency dropdown list */94 .dropdown {95 position: absolute; top: 480px; left: 170px;96 width: 450px; height: 1500px;97 background: #163B56; border-radius: 6px; box-shadow: 0 10px 24px rgba(0,0,0,0.5);98 overflow: hidden;99 }100 .drop-item {101 display: flex; align-items: center; gap: 16px;102 padding: 22px; border-bottom: 1px solid rgba(255,255,255,0.08);103 color: #EAF2F7;104 }105 .drop-item .code { width: 110px; font-weight: 800; font-size: 38px; }106 .drop-item .flag {107 width: 64px; height: 40px; font-size: 14px;108 }109 .drop-item .name { font-size: 26px; color: #C5D3DF; }110 111 /* Bottom ad banner */112 .ad {113 position: absolute; left: 0; right: 0; bottom: 120px;114 height: 180px; background: #FFFFFF; color: #000; display: flex; align-items: center; padding: 20px 26px; gap: 26px;115 box-shadow: 0 -2px 0 rgba(0,0,0,0.25);116 }117 .ad .img {118 width: 140px; height: 140px; background: #E0E0E0; border: 1px solid #BDBDBD;119 display: flex; align-items: center; justify-content: center; color: #757575;120 }121 .ad .text { flex: 1; font-size: 34px; }122 .ad .install {123 background: #2EBF74; color: #fff; font-weight: 800; font-size: 34px;124 padding: 18px 34px; border-radius: 40px;125 }126 127 /* Gesture bar */128 .gesture {129 position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);130 width: 320px; height: 10px; background: #DCDCDC; border-radius: 10px;131 }132</style>133</head>134<body>135<div id="render-target">136 137 <!-- Status bar -->138 <div class="statusbar">139 <div class="time">11:19</div>140 <div class="icons">141 <div class="status-icon"></div>142 <div class="status-icon"></div>143 <div class="status-icon"></div>144 </div>145 </div>146 147 <!-- Header -->148 <div class="header">149 <div class="hamburger">150 <svg viewBox="0 0 100 100" width="72" height="72" fill="#fff">151 <rect x="8" y="18" width="84" height="12" rx="6"></rect>152 <rect x="8" y="44" width="84" height="12" rx="6"></rect>153 <rect x="8" y="70" width="84" height="12" rx="6"></rect>154 </svg>155 </div>156 <div class="title">CURRENCY CONVERTER</div>157 <div class="subtitle">Updated on December 14, 2023 10:48 AM</div>158 <div class="more">159 <svg viewBox="0 0 24 24" width="56" height="56" fill="#fff">160 <circle cx="12" cy="4" r="3"></circle>161 <circle cx="12" cy="12" r="3"></circle>162 <circle cx="12" cy="20" r="3"></circle>163 </svg>164 </div>165 </div>166 167 <!-- Blue currency panel -->168 <div class="panel">169 <div class="lang">EN</div>170 171 <!-- Row 1 -->172 <div class="currency-row">173 <svg class="lens" viewBox="0 0 100 100">174 <circle cx="40" cy="40" r="28" stroke="#E64646" stroke-width="10" fill="none"></circle>175 <rect x="64" y="64" width="26" height="10" transform="rotate(45 64 64)" fill="#E64646"></rect>176 </svg>177 178 <div class="cur-info">179 <div class="cur-code">GBP <div class="flag">[IMG: Flag]</div></div>180 <div class="cur-name">British Pound Sterling</div>181 </div>182 183 <div class="cur-actions">184 <svg class="drop-arrow" viewBox="0 0 24 24" fill="#E85A4F">185 <path d="M6 9l6 6 6-6"></path>186 </svg>187 <svg class="refresh" viewBox="0 0 24 24" fill="none" stroke="#DDE6EE" stroke-width="2">188 <path d="M12 5a7 7 0 1 1-7 7"></path>189 <path d="M5 5v6h6"></path>190 </svg>191 </div>192 193 <div class="row-value">0</div>194 </div>195 196 <!-- Row 2 -->197 <div class="currency-row">198 <svg class="lens" viewBox="0 0 100 100">199 <circle cx="40" cy="40" r="28" stroke="#64A0D7" stroke-width="10" fill="none"></circle>200 <rect x="64" y="64" width="26" height="10" transform="rotate(45 64 64)" fill="#64A0D7"></rect>201 </svg>202 203 <div class="cur-info">204 <div class="cur-code">USD <div class="flag">[IMG: Flag]</div></div>205 <div class="cur-name">United States Dollar</div>206 </div>207 208 <div class="cur-actions">209 <svg class="drop-arrow" viewBox="0 0 24 24" fill="#5AA0F0">210 <path d="M6 9l6 6 6-6"></path>211 </svg>212 <svg class="refresh" viewBox="0 0 24 24" fill="none" stroke="#DDE6EE" stroke-width="2">213 <path d="M12 5a7 7 0 1 1-7 7"></path>214 <path d="M5 5v6h6"></path>215 </svg>216 </div>217 218 <div class="row-value">0</div>219 </div>220 </div>221 222 <!-- Toolbar -->223 <div class="toolbar">224 <div class="tool">225 <svg viewBox="0 0 24 24" fill="none" stroke="#C9D3DC" stroke-width="2">226 <path d="M12 6a6 6 0 1 1-6 6"></path>227 <path d="M6 6v4h4"></path>228 </svg>229 <span>CURRENCY UPDATE</span>230 </div>231 <div class="tool">232 <svg viewBox="0 0 24 24" fill="none" stroke="#C9D3DC" stroke-width="2">233 <path d="M5 5h14v14H5z"></path>234 <path d="M5 12h14"></path>235 </svg>236 <span>RATES & NEWS</span>237 </div>238 <div class="tool">239 <svg viewBox="0 0 24 24" fill="#C9D3DC">240 <path d="M12 .8l3.1 6.3 6.9 1-5 4.8 1.2 6.8-6.2-3.3-6.2 3.3 1.2-6.8-5-4.8 6.9-1z"></path>241 </svg>242 <span>CURRENCY FAVORITES</span>243 </div>244 <div class="tool">245 <svg viewBox="0 0 24 24" fill="none" stroke="#C9D3DC" stroke-width="2">246 <path d="M8 7l-5 5 5 5"></path>247 <path d="M16 17l5-5-5-5"></path>248 </svg>249 <span>CURRENCY ROTATE</span>250 </div>251 </div>252 253 <!-- Keypad -->254 <div class="keypad">255 <div class="key dark">C</div>256 <div class="key dark">X</div>257 <div class="key dark">CLR</div>258 <div class="key op">DEL</div>259 260 <div class="key">9</div>261 <div class="key">6</div>262 <div class="key">3</div>263 <div class="key op">÷</div>264 265 <div class="key">8</div>266 <div class="key">5</div>267 <div class="key">2</div>268 <div class="key op">×</div>269 270 <div class="key">7</div>271 <div class="key">4</div>272 <div class="key">1</div>273 <div class="key op">−</div>274 275 <div class="key">0</div>276 <div class="key">.</div>277 <div class="key equals">=</div>278 <div class="key op">+</div>279 </div>280 281 <!-- Overlay dropdown list -->282 <div class="dropdown">283 <div class="drop-item">284 <div class="code">CZK</div>285 <div class="flag">[IMG: Flag]</div>286 <div class="name">Czech Republic Koruna</div>287 </div>288 <div class="drop-item">289 <div class="code">DJF</div>290 <div class="flag">[IMG: Flag]</div>291 <div class="name">Djiboutian Franc</div>292 </div>293 <div class="drop-item">294 <div class="code">DKK</div>295 <div class="flag">[IMG: Flag]</div>296 <div class="name">Danish Krone</div>297 </div>298 <div class="drop-item">299 <div class="code">DOP</div>300 <div class="flag">[IMG: Flag]</div>301 <div class="name">Dominican Peso</div>302 </div>303 <div class="drop-item">304 <div class="code">DZD</div>305 <div class="flag">[IMG: Flag]</div>306 <div class="name">Algerian Dinar</div>307 </div>308 <div class="drop-item">309 <div class="code">EGP</div>310 <div class="flag">[IMG: Flag]</div>311 <div class="name">Egyptian Pound</div>312 </div>313 <div class="drop-item">314 <div class="code">ERN</div>315 <div class="flag">[IMG: Flag]</div>316 <div class="name">Eritrean Nakfa</div>317 </div>318 <div class="drop-item">319 <div class="code">ETB</div>320 <div class="flag">[IMG: Flag]</div>321 <div class="name">Ethiopian Birr</div>322 </div>323 <div class="drop-item">324 <div class="code">EUR</div>325 <div class="flag">[IMG: Flag]</div>326 <div class="name">Euro</div>327 </div>328 <div class="drop-item">329 <div class="code">FJD</div>330 <div class="flag">[IMG: Flag]</div>331 <div class="name">Fijian Dollar</div>332 </div>333 <div class="drop-item">334 <div class="code">FKP</div>335 <div class="flag">[IMG: Flag]</div>336 <div class="name">Falkland Islands Pound</div>337 </div>338 <div class="drop-item">339 <div class="code">GBP</div>340 <div class="flag">[IMG: Flag]</div>341 <div class="name">British Pound Sterling</div>342 </div>343 <div class="drop-item">344 <div class="code">GEL</div>345 <div class="flag">[IMG: Flag]</div>346 <div class="name">Georgian Lari</div>347 </div>348 <div class="drop-item">349 <div class="code">GGP</div>350 <div class="flag">[IMG: Flag]</div>351 <div class="name">Guernsey Pound</div>352 </div>353 <div class="drop-item">354 <div class="code">GHS</div>355 <div class="flag">[IMG: Flag]</div>356 <div class="name">Ghanaian Cedi</div>357 </div>358 </div>359 360 <!-- Bottom ad -->361 <div class="ad">362 <div class="img">[IMG: App Icon]</div>363 <div class="text">Share Market App</div>364 <div class="install">INSTALL</div>365 </div>366 367 <!-- Gesture bar -->368 <div class="gesture"></div>369 370</div>371</body>372</html>