GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Currency Converter UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #0f1216; color: #fff;11 }12 /* Status bar */13 .status-bar {14 position: absolute; top: 0; left: 0; width: 100%; height: 120px; background: #000;15 color: #fff; padding: 0 32px; box-sizing: border-box;16 }17 .status-time { position: absolute; left: 32px; top: 36px; font-size: 44px; letter-spacing: 1px; }18 .status-icons { position: absolute; right: 32px; top: 34px; display: flex; align-items: center; gap: 28px; }19 /* App bar */20 .app-bar {21 position: absolute; top: 120px; left: 0; width: 100%; height: 160px; background: #1e2126;22 box-sizing: border-box; padding: 30px 32px;23 }24 .app-title { font-weight: 800; font-size: 44px; letter-spacing: 1px; }25 .app-sub { color: #9aa0a6; font-size: 26px; margin-top: 8px; }26 .hamburger { position: absolute; left: 28px; top: 52px; width: 56px; height: 56px; }27 .dots { position: absolute; right: 28px; top: 52px; width: 56px; height: 56px; }28 29 /* Top blue panel */30 .panel {31 position: absolute; top: 280px; left: 0; width: 100%; height: 520px;32 background: linear-gradient(#5c7fa8, #466a8f);33 box-sizing: border-box; padding: 20px 28px;34 }35 .panel-topline { position: absolute; top: 20px; left: 28px; font-size: 24px; color: #c9d7e6; }36 .currency-row {37 position: relative; width: 100%; height: 220px; margin-top: 40px;38 display: flex; align-items: center; box-sizing: border-box; padding-left: 120px; padding-right: 120px;39 }40 .search-icon {41 position: absolute; left: 38px; width: 64px; height: 64px;42 }43 .code-block { flex: 1; }44 .code-line { display: flex; align-items: center; gap: 18px; }45 .code { font-size: 56px; font-weight: 800; color: #fff; }46 .flag {47 width: 72px; height: 44px; background: #E0E0E0; border: 1px solid #BDBDBD;48 display: flex; justify-content: center; align-items: center; color: #757575; font-size: 20px;49 border-radius: 4px;50 }51 .name { font-size: 28px; color: #c9d7e6; margin-top: 8px; }52 .row-actions { position: absolute; right: 140px; display: flex; align-items: center; gap: 28px; }53 .dropdown-arrow { width: 24px; height: 24px; }54 .rotate-icon, .clock-icon { width: 38px; height: 38px; opacity: 0.9; }55 .value { position: absolute; right: 40px; font-size: 110px; font-weight: 700; color: #e6eef7; }56 57 /* Toolbar */58 .toolbar {59 position: absolute; top: 800px; left: 0; width: 100%; height: 120px;60 display: grid; grid-template-columns: repeat(4, 1fr);61 }62 .tool {63 background: #19384e; border-top: 1px solid #1b2f41; border-bottom: 1px solid #1b2f41;64 border-right: 1px solid #1b2f41; display: flex; align-items: center; justify-content: center;65 color: #cde1f3; font-size: 26px; text-align: center; padding: 0 18px;66 }67 .tool:first-child { border-left: 1px solid #1b2f41; }68 69 /* Keypad and value column */70 .content {71 position: absolute; top: 920px; left: 0; width: 100%; bottom: 170px;72 display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr;73 }74 .readout-cell {75 background: #60676d; border: 1px solid #4e5459; display: flex; align-items: center; justify-content: center;76 font-size: 90px; color: #e7eef4;77 }78 .key {79 background: #454b50; border: 1px solid #3a3f43; display: flex; align-items: center; justify-content: center;80 font-size: 64px; color: #dce2e7; font-weight: 700;81 }82 .key.dark { background: #2f3439; }83 .key.red { background: #b23a35; }84 .key.small { font-size: 48px; }85 .key.label { font-size: 54px; }86 87 /* Dropdown list overlay */88 .dropdown {89 position: absolute; left: 120px; top: 470px; width: 560px; height: 1480px; overflow: hidden;90 background: #123b59; border-radius: 6px; box-shadow: 0 8px 30px rgba(0,0,0,0.4);91 }92 .dropdown .item {93 height: 120px; padding: 18px 24px; box-sizing: border-box; border-bottom: 1px solid #0f314a;94 display: flex; align-items: center; gap: 18px;95 }96 .item .abbr { font-size: 42px; font-weight: 800; color: #fff; width: 140px; }97 .item .desc { font-size: 26px; color: #c0d3e6; }98 .item .flag {99 width: 66px; height: 42px; margin-left: auto;100 }101 102 /* Ad banner */103 .ad-banner {104 position: absolute; bottom: 90px; left: 0; width: 100%; height: 160px; background: #ffffff;105 box-sizing: border-box; padding: 24px; color: #222; display: flex; align-items: center; justify-content: space-between;106 }107 .ad-left {108 display: flex; align-items: center; gap: 24px;109 }110 .ad-img {111 width: 96px; height: 96px; background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;112 display: flex; align-items: center; justify-content: center; border-radius: 20px;113 }114 .ad-title { font-size: 34px; }115 .ad-btn {116 background: #2BAE66; color: #fff; padding: 16px 36px; border-radius: 40px; font-size: 36px; font-weight: 700;117 }118 119 /* Home indicator */120 .home-indicator {121 position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);122 width: 440px; height: 14px; background: #bfc5cc; border-radius: 8px; opacity: 0.6;123 }124</style>125</head>126<body>127<div id="render-target">128 129 <!-- Status Bar -->130 <div class="status-bar">131 <div class="status-time">11:18</div>132 <div class="status-icons">133 <!-- simple monitor icon -->134 <svg width="44" height="44" viewBox="0 0 24 24">135 <rect x="3" y="4" width="18" height="12" fill="#fff" opacity="0.85"></rect>136 <rect x="9" y="17" width="6" height="2" fill="#fff"></rect>137 </svg>138 <!-- wifi icon -->139 <svg width="44" height="44" viewBox="0 0 24 24">140 <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none" opacity="0.9"/>141 <path d="M6 12c3-3 9-3 12 0" stroke="#fff" stroke-width="2" fill="none" opacity="0.9"/>142 <circle cx="12" cy="16" r="2" fill="#fff"/>143 </svg>144 <!-- battery icon -->145 <svg width="44" height="44" viewBox="0 0 24 24">146 <rect x="3" y="6" width="16" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>147 <rect x="5" y="8" width="12" height="8" fill="#fff"/>148 <rect x="19" y="10" width="2" height="4" fill="#fff"/>149 </svg>150 </div>151 </div>152 153 <!-- App Bar -->154 <div class="app-bar">155 <svg class="hamburger" viewBox="0 0 24 24">156 <rect x="3" y="5" width="18" height="2" fill="#fff"></rect>157 <rect x="3" y="11" width="18" height="2" fill="#fff"></rect>158 <rect x="3" y="17" width="18" height="2" fill="#fff"></rect>159 </svg>160 <div class="app-title">CURRENCY CONVERTER</div>161 <div class="app-sub">Updated on December 14, 2023 10:48 AM</div>162 <svg class="dots" viewBox="0 0 24 24">163 <circle cx="12" cy="5" r="2" fill="#fff"></circle>164 <circle cx="12" cy="12" r="2" fill="#fff"></circle>165 <circle cx="12" cy="19" r="2" fill="#fff"></circle>166 </svg>167 </div>168 169 <!-- Blue Panel -->170 <div class="panel">171 <div class="panel-topline">EN</div>172 173 <!-- Row 1 -->174 <div class="currency-row">175 <svg class="search-icon" viewBox="0 0 24 24">176 <circle cx="10" cy="10" r="7" stroke="#f34a45" stroke-width="2" fill="none"></circle>177 <line x1="14" y1="14" x2="21" y2="21" stroke="#f34a45" stroke-width="2"></line>178 </svg>179 <div class="code-block">180 <div class="code-line">181 <div class="code">GBP</div>182 <div class="flag">[IMG: UK Flag]</div>183 <svg class="dropdown-arrow" viewBox="0 0 24 24">184 <path d="M6 9l6 6 6-6" fill="#d64" opacity="0.9"></path>185 </svg>186 </div>187 <div class="name">British Pound Sterling</div>188 </div>189 <div class="row-actions">190 <svg class="clock-icon" viewBox="0 0 24 24">191 <circle cx="12" cy="12" r="9" stroke="#cdd9e6" stroke-width="2" fill="none"/>192 <path d="M12 12V7M12 12L16 14" stroke="#cdd9e6" stroke-width="2"/>193 </svg>194 </div>195 <div class="value">0</div>196 </div>197 198 <!-- Row 2 -->199 <div class="currency-row" style="margin-top: 0;">200 <svg class="search-icon" viewBox="0 0 24 24" style="top: 240px;">201 <circle cx="10" cy="10" r="7" stroke="#6fa0d1" stroke-width="2" fill="none"></circle>202 <line x1="14" y1="14" x2="21" y2="21" stroke="#6fa0d1" stroke-width="2"></line>203 </svg>204 <div class="code-block">205 <div class="code-line">206 <div class="code">GMD</div>207 <div class="flag">[IMG: Gambia Flag]</div>208 <svg class="dropdown-arrow" viewBox="0 0 24 24">209 <path d="M6 9l6 6 6-6" fill="#68a0db" opacity="0.9"></path>210 </svg>211 </div>212 <div class="name">Gambian Dalasi</div>213 </div>214 <div class="row-actions">215 <svg class="rotate-icon" viewBox="0 0 24 24">216 <path d="M12 5a7 7 0 1 1-6 10" stroke="#cdd9e6" stroke-width="2" fill="none"/>217 <path d="M6 15h4v4" stroke="#cdd9e6" stroke-width="2" fill="none"/>218 </svg>219 </div>220 <div class="value">0</div>221 </div>222 </div>223 224 <!-- Toolbar row -->225 <div class="toolbar">226 <div class="tool">CURRENCY UPDATE</div>227 <div class="tool">UNITS & OPTIONS</div>228 <div class="tool">CURRENCY FAVORITES</div>229 <div class="tool">CURRENCY ROTATE</div>230 </div>231 232 <!-- Keypad and readout area -->233 <div class="content">234 <!-- Column 1 (readout zeros) -->235 <div class="readout-cell">0</div>236 <div class="key dark label">CLR</div>237 <div class="key dark label">DEL</div>238 <div class="key">÷</div>239 240 <div class="readout-cell">0</div>241 <div class="key">9</div>242 <div class="key">×</div>243 <div class="key">6</div>244 245 <div class="readout-cell">0</div>246 <div class="key">3</div>247 <div class="key">−</div>248 <div class="key">+</div>249 250 <div class="readout-cell">0</div>251 <div class="key small">.</div>252 <div class="key red">=</div>253 <div class="key">0</div>254 </div>255 256 <!-- Dropdown overlay list (open) -->257 <div class="dropdown">258 <div class="item">259 <div class="abbr">GMD</div>260 <div class="desc">Gambian Dalasi</div>261 <div class="flag">[IMG: Flag]</div>262 </div>263 <div class="item">264 <div class="abbr">GNF</div>265 <div class="desc">Guinean Franc</div>266 <div class="flag">[IMG: Flag]</div>267 </div>268 <div class="item">269 <div class="abbr">GTQ</div>270 <div class="desc">Guatemalan Quetzal</div>271 <div class="flag">[IMG: Flag]</div>272 </div>273 <div class="item">274 <div class="abbr">GYD</div>275 <div class="desc">Guyanaese Dollar</div>276 <div class="flag">[IMG: Flag]</div>277 </div>278 <div class="item">279 <div class="abbr">HKD</div>280 <div class="desc">Hong Kong Dollar</div>281 <div class="flag">[IMG: Flag]</div>282 </div>283 <div class="item">284 <div class="abbr">HNL</div>285 <div class="desc">Honduran Lempira</div>286 <div class="flag">[IMG: Flag]</div>287 </div>288 <div class="item">289 <div class="abbr">HRK</div>290 <div class="desc">Croatian Kuna</div>291 <div class="flag">[IMG: Flag]</div>292 </div>293 <div class="item">294 <div class="abbr">HTG</div>295 <div class="desc">Haitian Gourde</div>296 <div class="flag">[IMG: Flag]</div>297 </div>298 <div class="item">299 <div class="abbr">HUF</div>300 <div class="desc">Hungarian Forint</div>301 <div class="flag">[IMG: Flag]</div>302 </div>303 <div class="item">304 <div class="abbr">IDR</div>305 <div class="desc">Indonesian Rupiah</div>306 <div class="flag">[IMG: Flag]</div>307 </div>308 <div class="item">309 <div class="abbr">ILS</div>310 <div class="desc">Israeli New Sheqel</div>311 <div class="flag">[IMG: Flag]</div>312 </div>313 <div class="item">314 <div class="abbr">IMP</div>315 <div class="desc">Manx Pound</div>316 <div class="flag">[IMG: Flag]</div>317 </div>318 <div class="item">319 <div class="abbr">INR</div>320 <div class="desc">Indian Rupee</div>321 <div class="flag">[IMG: Flag]</div>322 </div>323 <div class="item">324 <div class="abbr">IQD</div>325 <div class="desc">Iraqi Dinar</div>326 <div class="flag">[IMG: Flag]</div>327 </div>328 <div class="item">329 <div class="abbr">IRR</div>330 <div class="desc">Iranian Rial</div>331 <div class="flag">[IMG: Flag]</div>332 </div>333 </div>334 335 <!-- Ad banner -->336 <div class="ad-banner">337 <div class="ad-left">338 <div class="ad-img">[IMG: App Icon]</div>339 <div class="ad-title">Share Market App</div>340 </div>341 <div class="ad-btn">INSTALL</div>342 </div>343 344 <div class="home-indicator"></div>345</div>346</body>347</html>