GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Currency Converter UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #2b3137;11 color: #fff;12 }13 /* Status bar */14 .status-bar {15 position: absolute; top: 0; left: 0; width: 100%; height: 120px; background: #000;16 display: flex; align-items: center; justify-content: space-between; padding: 0 36px;17 font-weight: 600; letter-spacing: 0.5px;18 }19 .status-left { display: flex; align-items: center; gap: 30px; font-size: 44px; }20 .status-icons { display: flex; align-items: center; gap: 24px; }21 .status-icons svg { width: 40px; height: 40px; fill: #fff; opacity: 0.9; }22 .battery { width: 50px; height: 30px; border: 3px solid #fff; border-radius: 6px; position: relative; }23 .battery:after { content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 14px; background: #fff; border-radius: 2px; }24 .battery .level { position: absolute; left: 3px; top: 3px; bottom: 3px; right: 12px; background: #fff; border-radius: 3px; }25 /* App bar */26 .app-bar {27 position: absolute; top: 120px; left: 0; width: 100%; height: 230px; background: #1f252b;28 display: flex; align-items: center; padding: 0 40px;29 }30 .app-title { flex: 1; text-align: center; }31 .app-title h1 { margin: 0; font-size: 58px; letter-spacing: 1.5px; }32 .app-title .sub { margin-top: 12px; font-size: 28px; color: #b8c1ca; }33 .icon-btn { width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; }34 .icon-btn svg { fill: #fff; opacity: 0.9; }35 /* Top panel */36 .top-panel {37 position: absolute; top: 350px; left: 0; width: 100%; height: 550px;38 background: linear-gradient(#4b6f92, #3b5e7b);39 box-shadow: inset 0 -2px 0 rgba(0,0,0,0.4);40 padding: 24px 30px;41 }42 .lang-row { display: flex; align-items: center; gap: 18px; color: #d9e3ee; font-size: 26px; margin-bottom: 10px; }43 .currency-row {44 display: grid; grid-template-columns: 80px 520px 1fr; align-items: center;45 padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,0.15);46 }47 .search-icon { width: 56px; height: 56px; margin-left: 16px; }48 .code-block { display: flex; align-items: center; gap: 18px; }49 .code { font-size: 54px; font-weight: 800; color: #fff; letter-spacing: 1px; }50 .flag {51 width: 78px; height: 48px; background: #E0E0E0; border: 1px solid #BDBDBD;52 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 20px; border-radius: 4px;53 }54 .name { font-size: 26px; color: #cfd8e3; margin-top: 6px; }55 .right-block { display: flex; align-items: center; justify-content: flex-end; gap: 24px; padding-right: 24px; }56 .caret { width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 18px solid #e74c3c; }57 .rotate-icon { width: 46px; height: 46px; border: 2px solid #cfd8e3; border-radius: 50%; position: relative; }58 .rotate-icon:after {59 content: ""; position: absolute; right: -2px; top: 8px; width: 0; height: 0;60 border-left: 10px solid transparent; border-right: 0 solid transparent; border-top: 10px solid #cfd8e3;61 transform: rotate(40deg);62 }63 .value { font-size: 80px; font-weight: 700; color: #ffffff; }64 /* Actions strip */65 .actions-strip {66 position: absolute; top: 900px; left: 0; width: 100%; height: 160px;67 background: linear-gradient(#27475e, #223e53);68 display: grid; grid-template-columns: repeat(4, 1fr);69 border-top: 1px solid rgba(255,255,255,0.08);70 border-bottom: 1px solid rgba(0,0,0,0.2);71 }72 .action-tile {73 border-right: 1px solid rgba(255,255,255,0.1);74 display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;75 color: #d6dee7; text-align: center; padding: 10px;76 }77 .action-tile:last-child { border-right: none; }78 .action-tile .label { font-size: 26px; line-height: 1.2; }79 /* Keypad */80 .keypad {81 position: absolute; top: 1060px; left: 0; width: 100%; height: 1140px;82 display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr);83 gap: 4px; padding: 4px;84 background: #2b3137;85 }86 .key {87 background: #4a5258; display: flex; align-items: center; justify-content: center;88 font-size: 86px; color: #e9eef4; font-weight: 700;89 }90 .key.dark { background: #3a4046; }91 .key.red { background: #b33b34; }92 .key.small { font-size: 42px; font-weight: 600; }93 .key .sub { font-size: 30px; color: #e57373; margin-left: 14px; }94 .key .green { color: #b5d56a; font-size: 36px; margin-left: 10px; }95 /* Dropdown overlay list */96 .dropdown {97 position: absolute; left: 120px; top: 530px; width: 460px; height: 1500px;98 background: #1f4860; box-shadow: 0 6px 20px rgba(0,0,0,0.4);99 border-radius: 6px; overflow: hidden; z-index: 10;100 }101 .drop-item {102 display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,0.08);103 color: #eaf3fb;104 }105 .drop-item .code { font-size: 40px; width: 120px; }106 .drop-item .flag { width: 56px; height: 36px; font-size: 16px; }107 .drop-item .desc { font-size: 24px; color: #cfe0ef; }108 /* Ad bar */109 .ad-bar {110 position: absolute; bottom: 80px; left: 0; width: 100%; height: 190px; background: #ffffff; color: #333;111 display: flex; align-items: center; justify-content: space-between; padding: 0 36px;112 box-shadow: 0 -2px 0 rgba(0,0,0,0.25);113 }114 .ad-left { display: flex; align-items: center; gap: 22px; }115 .ad-img {116 width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;117 display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 22px;118 }119 .install-btn {120 background: #2ecc71; color: #fff; padding: 22px 44px; border-radius: 12px; font-size: 36px; font-weight: 700;121 }122 /* Home indicator */123 .home-indicator {124 position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);125 width: 380px; height: 18px; background: #eaeaea; border-radius: 9px;126 }127</style>128</head>129<body>130<div id="render-target">131 132 <!-- Status Bar -->133 <div class="status-bar">134 <div class="status-left">135 <div>11:18</div>136 <div class="status-icons">137 <svg viewBox="0 0 24 24"><rect x="2" y="6" width="20" height="12" rx="2"></rect></svg>138 <svg viewBox="0 0 24 24"><rect x="5" y="4" width="14" height="16" rx="2"></rect></svg>139 </div>140 </div>141 <div class="status-icons">142 <svg viewBox="0 0 24 24"><path d="M3 12a9 9 0 0 1 18 0h-2a7 7 0 0 0-14 0H3z"></path></svg>143 <div class="battery"><div class="level"></div></div>144 </div>145 </div>146 147 <!-- App Bar -->148 <div class="app-bar">149 <div class="icon-btn">150 <svg viewBox="0 0 24 24" width="44" height="44">151 <rect x="3" y="5" width="18" height="2"></rect>152 <rect x="3" y="11" width="18" height="2"></rect>153 <rect x="3" y="17" width="18" height="2"></rect>154 </svg>155 </div>156 <div class="app-title">157 <h1>CURRENCY CONVERTER</h1>158 <div class="sub">Updated on December 14, 2023 10:48 AM</div>159 </div>160 <div class="icon-btn">161 <svg viewBox="0 0 24 24" width="44" height="44">162 <circle cx="12" cy="5" r="2"></circle>163 <circle cx="12" cy="12" r="2"></circle>164 <circle cx="12" cy="19" r="2"></circle>165 </svg>166 </div>167 </div>168 169 <!-- Top Panel -->170 <div class="top-panel">171 <div class="lang-row">172 <div>EN</div>173 <svg class="search-icon" viewBox="0 0 24 24">174 <circle cx="10" cy="10" r="7" stroke="#fff" stroke-width="1.5" fill="none"></circle>175 <line x1="15" y1="15" x2="22" y2="22" stroke="#fff" stroke-width="1.5"></line>176 </svg>177 </div>178 179 <!-- First currency -->180 <div class="currency-row">181 <div>182 <svg class="search-icon" viewBox="0 0 24 24">183 <circle cx="10" cy="10" r="7" stroke="#e74c3c" stroke-width="2.5" fill="none"></circle>184 <line x1="15" y1="15" x2="22" y2="22" stroke="#e74c3c" stroke-width="2.5"></line>185 </svg>186 </div>187 <div>188 <div class="code-block">189 <div class="code">GBP</div>190 <div class="flag">[IMG: UK Flag]</div>191 </div>192 <div class="name">British Pound Sterling</div>193 </div>194 <div class="right-block">195 <div class="caret"></div>196 <div class="rotate-icon"></div>197 <div class="value">0</div>198 </div>199 </div>200 201 <!-- Second currency -->202 <div class="currency-row">203 <div>204 <svg class="search-icon" viewBox="0 0 24 24">205 <circle cx="10" cy="10" r="7" stroke="#7fb2d3" stroke-width="2" fill="none"></circle>206 <line x1="15" y1="15" x2="22" y2="22" stroke="#7fb2d3" stroke-width="2"></line>207 </svg>208 </div>209 <div>210 <div class="code-block">211 <div class="code" style="color:#eaf3fb;">QAR</div>212 <div class="flag">[IMG: Qatar Flag]</div>213 </div>214 <div class="name">Qatari Rial</div>215 </div>216 <div class="right-block">217 <div class="caret" style="border-top-color:#78a6c8;"></div>218 <div class="rotate-icon"></div>219 <div class="value">0</div>220 </div>221 </div>222 </div>223 224 <!-- Actions strip -->225 <div class="actions-strip">226 <div class="action-tile">227 <svg viewBox="0 0 24 24" width="40" height="40" style="fill:#d6dee7;"><path d="M12 2v20M2 12h20"></path></svg>228 <div class="label">CURRENCY<br>RATES & CHARTS</div>229 </div>230 <div class="action-tile">231 <svg viewBox="0 0 24 24" width="40" height="40" style="fill:#f1c40f;"><path d="M12 2l3 7h7l-5.5 4 2.5 7-6-4-6 4 2.5-7L2 9h7z"></path></svg>232 <div class="label">CURRENCY<br>FAVORITES</div>233 </div>234 <div class="action-tile">235 <svg viewBox="0 0 24 24" width="40" height="40" style="fill:none;stroke:#d6dee7;stroke-width:2;"><circle cx="12" cy="12" r="8"></circle><path d="M16 8l3 1-1-3"></path></svg>236 <div class="label">CURRENCY<br>ROTATE</div>237 </div>238 <div class="action-tile">239 <svg viewBox="0 0 24 24" width="40" height="40" style="fill:#d6dee7;"><path d="M3 12a9 9 0 0 1 18 0H3z"></path></svg>240 <div class="label">TOOLS &<br>OPTIONS</div>241 </div>242 </div>243 244 <!-- Calculator keypad -->245 <div class="keypad">246 <div class="key dark"><span>CCUR</span></div>247 <div class="key dark small"><span>X</span><span class="sub">CLR</span></div>248 <div class="key dark small"><span class="green">←</span><span class="sub" style="color:#eaf3fb;">DEL</span></div>249 <div class="key">÷</div>250 251 <div class="key">9</div>252 <div class="key">6</div>253 <div class="key">3</div>254 <div class="key">×</div>255 256 <div class="key">0</div>257 <div class="key">.</div>258 <div class="key">-</div>259 <div class="key">+</div>260 261 <div class="key dark">00</div>262 <div class="key dark">000</div>263 <div class="key dark">±</div>264 <div class="key red">=</div>265 </div>266 267 <!-- Dropdown overlay list -->268 <div class="dropdown">269 <div class="drop-item">270 <div class="code">PYG</div>271 <div class="flag">[IMG: Paraguay Flag]</div>272 <div class="desc">Paraguayan Guarani</div>273 </div>274 <div class="drop-item">275 <div class="code">QAR</div>276 <div class="flag">[IMG: Qatar Flag]</div>277 <div class="desc">Qatari Rial</div>278 </div>279 <div class="drop-item">280 <div class="code">RON</div>281 <div class="flag">[IMG: Romania Flag]</div>282 <div class="desc">Romanian Leu</div>283 </div>284 <div class="drop-item">285 <div class="code">RSD</div>286 <div class="flag">[IMG: Serbia Flag]</div>287 <div class="desc">Serbian Dinar</div>288 </div>289 <div class="drop-item">290 <div class="code">RUB</div>291 <div class="flag">[IMG: Russia Flag]</div>292 <div class="desc">Russian Ruble</div>293 </div>294 <div class="drop-item">295 <div class="code">RWF</div>296 <div class="flag">[IMG: Rwanda Flag]</div>297 <div class="desc">Rwandan Franc</div>298 </div>299 <div class="drop-item">300 <div class="code">SAR</div>301 <div class="flag">[IMG: Saudi Arabia Flag]</div>302 <div class="desc">Saudi Riyal</div>303 </div>304 <div class="drop-item">305 <div class="code">SBD</div>306 <div class="flag">[IMG: Solomon Islands Flag]</div>307 <div class="desc">Solomon Islands Dollar</div>308 </div>309 <div class="drop-item">310 <div class="code">SCR</div>311 <div class="flag">[IMG: Seychelles Flag]</div>312 <div class="desc">Seychellois Rupee</div>313 </div>314 <div class="drop-item">315 <div class="code">SDG</div>316 <div class="flag">[IMG: Sudan Flag]</div>317 <div class="desc">Sudanese Pound</div>318 </div>319 <div class="drop-item">320 <div class="code">SEK</div>321 <div class="flag">[IMG: Sweden Flag]</div>322 <div class="desc">Swedish Krona</div>323 </div>324 <div class="drop-item">325 <div class="code">SGD</div>326 <div class="flag">[IMG: Singapore Flag]</div>327 <div class="desc">Singapore Dollar</div>328 </div>329 <div class="drop-item">330 <div class="code">SHP</div>331 <div class="flag">[IMG: Saint Helena Flag]</div>332 <div class="desc">Saint Helena Pound</div>333 </div>334 <div class="drop-item">335 <div class="code">SLE</div>336 <div class="flag">[IMG: Sierra Leone Flag]</div>337 <div class="desc">Sierra Leonean Leone</div>338 </div>339 <div class="drop-item">340 <div class="code">SLL</div>341 <div class="flag">[IMG: Sierra Leone Flag]</div>342 <div class="desc">Sierra Leonean Leone</div>343 </div>344 <div class="drop-item">345 <div class="code">SOS</div>346 <div class="flag">[IMG: Somalia Flag]</div>347 <div class="desc">Somali Shilling</div>348 </div>349 </div>350 351 <!-- Ad bar -->352 <div class="ad-bar">353 <div class="ad-left">354 <div class="ad-img">[IMG: App Icon]</div>355 <div style="font-size:32px;">Share Market App</div>356 </div>357 <div class="install-btn">INSTALL</div>358 </div>359 360 <!-- Home indicator -->361 <div class="home-indicator"></div>362 363</div>364</body>365</html>