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: Roboto, Arial, sans-serif; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#111; border-radius:24px; box-shadow: 0 20px 60px rgba(0,0,0,0.35);12 color:#fff;13 }14 15 /* Status bar */16 .status-bar {17 height:120px; background:#000; color:#fff; display:flex; align-items:center; padding:0 36px; font-size:38px; letter-spacing:1px;18 }19 .status-spacer { flex:1; }20 .status-icon { width:36px; height:36px; margin-left:18px; border-radius:4px; background:#fff1; }21 22 /* App header */23 .app-header {24 height:220px; background:#222; border-bottom:1px solid #2e2e2e;25 display:flex; align-items:center; padding:0 36px; position:relative;26 }27 .header-title { font-weight:800; font-size:54px; }28 .header-sub { color:#bdbdbd; font-size:30px; margin-top:6px; }29 .header-left, .header-right { position:absolute; top:50%; transform:translateY(-50%); }30 .header-left { left:36px; }31 .header-right { right:36px; display:flex; gap:28px; }32 .icon-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; }33 .icon-btn svg { fill:#fff; }34 35 /* Blue panel with entries */36 .blue-panel {37 height:500px;38 background: linear-gradient(180deg, #55789d 0%, #476b8f 40%, #3c5f82 100%);39 padding:28px 30px;40 position:relative;41 }42 .locale-row { color:#d7e3f1; font-size:28px; margin-bottom:18px; display:flex; align-items:center; gap:18px; }43 .currency-row {44 display:flex; align-items:center; gap:26px; padding:28px 10px; border-bottom:1px solid rgba(255,255,255,0.08);45 }46 .search-icon { width:60px; height:60px; display:flex; align-items:center; justify-content:center; }47 .search-icon svg { fill:#ef5350; }48 .code-block { flex:1; }49 .code-top { display:flex; align-items:center; gap:16px; }50 .code-top .code { font-size:48px; font-weight:900; letter-spacing:1px; color:#fff; }51 .flag {52 width:74px; height:44px; background:#E0E0E0; border:1px solid #BDBDBD;53 display:flex; align-items:center; justify-content:center; color:#757575; font-size:20px; border-radius:6px;54 }55 .code-sub { color:#c9d6e4; font-size:26px; margin-top:6px; }56 .row-actions { display:flex; align-items:center; gap:20px; margin-right:18px; }57 .row-actions .caret svg { fill:#e06357; }58 .amount { width:140px; text-align:right; font-size:96px; font-weight:700; color:#fff; }59 60 /* Dropdown list overlay */61 .dropdown {62 position:absolute; left:90px; top:470px; width:540px; height:1460px;63 background:#0f3e57; border-radius:8px; box-shadow:0 20px 40px rgba(0,0,0,0.5);64 overflow:hidden; border:1px solid rgba(255,255,255,0.1);65 }66 .dropdown-list { overflow-y:auto; height:100%; padding:10px 0; }67 .drop-item { padding:22px 26px; border-bottom:1px solid rgba(255,255,255,0.08); color:#e6f0f7; }68 .drop-top { display:flex; align-items:center; justify-content:space-between; }69 .drop-code { font-size:42px; font-weight:800; }70 .drop-flag {71 width:72px; height:42px; background:#E0E0E0; border:1px solid #BDBDBD;72 display:flex; align-items:center; justify-content:center; color:#757575; font-size:18px; border-radius:6px;73 margin-left:12px;74 }75 .drop-name { font-size:26px; color:#cfe0ee; margin-top:6px; }76 77 /* Action bar */78 .action-bar {79 height:160px; background: linear-gradient(180deg,#233a4f,#1d3348);80 display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #203547; border-bottom:1px solid #1a2e41;81 }82 .action-cell {83 display:flex; flex-direction:column; align-items:center; justify-content:center;84 color:#dbe7f0; font-size:28px; text-align:center; border-right:1px solid #22384c;85 }86 .action-cell:last-child { border-right:none; }87 .action-cell svg { fill:#dbe7f0; margin-bottom:12px; }88 89 /* Keypad grid */90 .keypad {91 display:grid;92 grid-template-columns:repeat(4, 270px);93 grid-auto-rows: 230px;94 background:#2f343a;95 }96 .key {97 display:flex; align-items:center; justify-content:center;98 font-size:96px; color:#e9eef3; border:1px solid #3d444b;99 background:#4e555b;100 }101 .key.dark { background:#3d4349; }102 .key.label { font-size:48px; color:#e9eef3; }103 .key.red { background:#c54842; color:#fff; }104 .keypad .key.equal { grid-row:3 / 5; }105 106 /* Ad section */107 .ad-bar {108 height:280px; background:#000; display:flex; align-items:center; justify-content:center;109 border-top:1px solid #222;110 }111 .ad-card {112 width:1000px; height:220px; background:#fff; border-radius:16px; display:flex; align-items:center; justify-content:space-between; padding:0 24px;113 }114 .ad-left { display:flex; align-items:center; gap:20px; color:#333; }115 .ad-img {116 width:140px; height:140px; background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;117 display:flex; align-items:center; justify-content:center; border-radius:20px;118 }119 .ad-title { font-size:36px; font-weight:700; }120 .ad-install {121 background:#22a765; color:#fff; padding:22px 40px; border-radius:40px; font-size:34px; font-weight:700;122 }123 124 /* Home indicator */125 .home-indicator {126 position:absolute; bottom:20px; left:50%; transform:translateX(-50%);127 width:360px; height:14px; background:#cfcfcf; border-radius:12px; opacity:0.7;128 }129</style>130</head>131<body>132<div id="render-target">133 134 <!-- Status bar -->135 <div class="status-bar">136 11:18137 <div class="status-spacer"></div>138 <div class="status-icon"></div>139 <div class="status-icon"></div>140 </div>141 142 <!-- App header -->143 <div class="app-header">144 <div class="header-left icon-btn">145 <svg width="54" height="54" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>146 </div>147 <div style="margin-left:100px;">148 <div class="header-title">CURRENCY CONVERTER</div>149 <div class="header-sub">Updated on December 14, 2023 10:48 AM</div>150 </div>151 <div class="header-right">152 <div class="icon-btn">153 <svg width="54" height="54" viewBox="0 0 24 24"><path d="M12 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4z"/></svg>154 </div>155 </div>156 </div>157 158 <!-- Blue panel -->159 <div class="blue-panel">160 <div class="locale-row">EN161 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 2v4l3-2-3-2zm6 10h4l-2-3-2 3zm-6 10v-4l-3 2 3 2zm-10-10H2l2 3 2-3z" fill="#cfe0ee"/></svg>162 </div>163 164 <!-- First currency row -->165 <div class="currency-row">166 <div class="search-icon">167 <svg width="46" height="46" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>168 </div>169 <div class="code-block">170 <div class="code-top">171 <div class="code">GBP</div>172 <div class="flag">[IMG: UK Flag]</div>173 </div>174 <div class="code-sub">British Pound Sterling</div>175 </div>176 <div class="row-actions">177 <div class="caret">178 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>179 </div>180 <div class="refresh">181 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M17.65 6.35A7.95 7.95 0 0012 4V1L7 6l5 5V7a5 5 0 11-4.9 6h-2A7 7 0 1017.65 6.35z" fill="#cfe0ee"/></svg>182 </div>183 </div>184 <div class="amount">0</div>185 </div>186 187 <!-- Second currency row -->188 <div class="currency-row">189 <div class="search-icon">190 <svg width="46" height="46" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>191 </div>192 <div class="code-block">193 <div class="code-top">194 <div class="code">STD</div>195 <div class="flag">[IMG: São Tomé Flag]</div>196 </div>197 <div class="code-sub">São Tomé and Príncipe Dobra</div>198 </div>199 <div class="row-actions">200 <div class="caret">201 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>202 </div>203 <div class="refresh">204 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M17.65 6.35A7.95 7.95 0 0012 4V1L7 6l5 5V7a5 5 0 11-4.9 6h-2A7 7 0 1017.65 6.35z" fill="#cfe0ee"/></svg>205 </div>206 </div>207 <div class="amount">0</div>208 </div>209 210 <!-- Dropdown overlay -->211 <div class="dropdown">212 <div class="dropdown-list">213 <div class="drop-item">214 <div class="drop-top">215 <div class="drop-code">SRD</div>216 <div class="drop-flag">[IMG: Flag]</div>217 </div>218 <div class="drop-name">Surinamese Dollar</div>219 </div>220 <div class="drop-item">221 <div class="drop-top">222 <div class="drop-code">STD</div>223 <div class="drop-flag">[IMG: Flag]</div>224 </div>225 <div class="drop-name">São Tomé and Príncipe Dobra</div>226 </div>227 <div class="drop-item">228 <div class="drop-top">229 <div class="drop-code">SVC</div>230 <div class="drop-flag">[IMG: Flag]</div>231 </div>232 <div class="drop-name">Salvadoran Colón</div>233 </div>234 <div class="drop-item">235 <div class="drop-top">236 <div class="drop-code">SYP</div>237 <div class="drop-flag">[IMG: Flag]</div>238 </div>239 <div class="drop-name">Syrian Pound</div>240 </div>241 <div class="drop-item">242 <div class="drop-top">243 <div class="drop-code">SZL</div>244 <div class="drop-flag">[IMG: Flag]</div>245 </div>246 <div class="drop-name">Swazi Lilangeni</div>247 </div>248 <div class="drop-item">249 <div class="drop-top">250 <div class="drop-code">THB</div>251 <div class="drop-flag">[IMG: Flag]</div>252 </div>253 <div class="drop-name">Thai Baht</div>254 </div>255 <div class="drop-item">256 <div class="drop-top">257 <div class="drop-code">TJS</div>258 <div class="drop-flag">[IMG: Flag]</div>259 </div>260 <div class="drop-name">Tajikistani Somoni</div>261 </div>262 <div class="drop-item">263 <div class="drop-top">264 <div class="drop-code">TMT</div>265 <div class="drop-flag">[IMG: Flag]</div>266 </div>267 <div class="drop-name">Turkmenistani Manat</div>268 </div>269 <div class="drop-item">270 <div class="drop-top">271 <div class="drop-code">TND</div>272 <div class="drop-flag">[IMG: Flag]</div>273 </div>274 <div class="drop-name">Tunisian Dinar</div>275 </div>276 <div class="drop-item">277 <div class="drop-top">278 <div class="drop-code">TOP</div>279 <div class="drop-flag">[IMG: Flag]</div>280 </div>281 <div class="drop-name">Tongan Pa’anga</div>282 </div>283 <div class="drop-item">284 <div class="drop-top">285 <div class="drop-code">TRY</div>286 <div class="drop-flag">[IMG: Flag]</div>287 </div>288 <div class="drop-name">Turkish Lira</div>289 </div>290 <div class="drop-item">291 <div class="drop-top">292 <div class="drop-code">TTD</div>293 <div class="drop-flag">[IMG: Flag]</div>294 </div>295 <div class="drop-name">Trinidad and Tobago Dollar</div>296 </div>297 <div class="drop-item">298 <div class="drop-top">299 <div class="drop-code">TWD</div>300 <div class="drop-flag">[IMG: Flag]</div>301 </div>302 <div class="drop-name">New Taiwan Dollar</div>303 </div>304 <div class="drop-item">305 <div class="drop-top">306 <div class="drop-code">TZS</div>307 <div class="drop-flag">[IMG: Flag]</div>308 </div>309 <div class="drop-name">Tanzanian Shilling</div>310 </div>311 <div class="drop-item">312 <div class="drop-top">313 <div class="drop-code">UAH</div>314 <div class="drop-flag">[IMG: Flag]</div>315 </div>316 <div class="drop-name">Ukrainian Hryvnia</div>317 </div>318 <div class="drop-item">319 <div class="drop-top">320 <div class="drop-code">UGX</div>321 <div class="drop-flag">[IMG: Flag]</div>322 </div>323 <div class="drop-name">Ugandan Shilling</div>324 </div>325 </div>326 </div>327 </div>328 329 <!-- Action bar -->330 <div class="action-bar">331 <div class="action-cell">332 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M13 3h-2v7H4v2h7v7h2v-7h7v-2h-7z"/></svg>333 CURRENCY CONVERT334 </div>335 <div class="action-cell">336 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 4a8 8 0 100 16 8 8 0 000-16zm1 13H8v-2h5v2zm3-4H8v-2h8v2zm0-4H8V7h8v2z"/></svg>337 UNITS & RATES338 </div>339 <div class="action-cell">340 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>341 CURRENCY FAVORITES342 </div>343 <div class="action-cell">344 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 6V3L8 7l4 4V8a4 4 0 11-3.9 5h-2A6 6 0 1012 6z"/></svg>345 CURRENCY ROTATE346 </div>347 </div>348 349 <!-- Keypad -->350 <div class="keypad">351 <div class="key label dark">CC</div>352 <div class="key dark">9</div>353 <div class="key dark">÷</div>354 <div class="key label dark">CLR</div>355 356 <div class="key label dark">SZL</div>357 <div class="key dark">6</div>358 <div class="key dark">×</div>359 <div class="key label dark">DEL</div>360 361 <div class="key label dark">0</div>362 <div class="key dark">3</div>363 <div class="key dark">−</div>364 <div class="key red equal">=</div>365 366 <div class="key label dark">0</div>367 <div class="key dark">.</div>368 <div class="key dark">+</div>369 <!-- empty cell under the equal because it spans -->370 </div>371 372 <!-- Ad section -->373 <div class="ad-bar">374 <div class="ad-card">375 <div class="ad-left">376 <div class="ad-img">[IMG: App Icon]</div>377 <div class="ad-title">Share Market App</div>378 </div>379 <div class="ad-install">INSTALL</div>380 </div>381 </div>382 383 <!-- Home indicator -->384 <div class="home-indicator"></div>385</div>386</body>387</html>