GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>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: #0d0f12;13 border-radius: 0;14 box-shadow: none;15 color: #fff;16 }17 /* Status bar */18 .status-bar {19 position: absolute; top: 0; left: 0; right: 0;20 height: 110px; background: #000; color: #fff;21 padding: 0 36px; display: flex; align-items: center; justify-content: space-between;22 font-size: 36px; letter-spacing: 1px;23 }24 .status-right { display: flex; align-items: center; gap: 28px; }25 .status-icon {26 width: 36px; height: 24px; border: 2px solid #bbb; border-radius: 4px; position: relative;27 }28 .status-icon::after { content: ""; position: absolute; right: -10px; top: 6px; width: 6px; height: 12px; background: #bbb; border-radius: 2px; }29 .signal-dot { width: 18px; height: 18px; background: #bbb; border-radius: 50%; }30 /* App bar */31 .app-bar {32 position: absolute; top: 110px; left: 0; right: 0;33 height: 170px; background: #222; box-shadow: 0 2px 6px rgba(0,0,0,0.6);34 padding: 0 36px; display: flex; align-items: center; justify-content: space-between;35 }36 .app-left { display: flex; align-items: center; gap: 28px; }37 .title-wrap { display: flex; flex-direction: column; }38 .app-title { font-size: 48px; font-weight: 800; letter-spacing: 1px; }39 .subtitle { font-size: 24px; color: #9aa3aa; margin-top: 6px; }40 .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }41 .icon-btn svg { width: 48px; height: 48px; fill: none; stroke: #fff; stroke-width: 6; }42 .kebab svg { stroke: none; fill: #fff; }43 /* Converter panel */44 .converter {45 position: absolute; top: 280px; left: 0; width: 1080px; height: 520px;46 background: linear-gradient(180deg, #476b8c 0%, #3f5974 100%);47 padding: 24px 24px 0 24px;48 }49 .lang-row { display: flex; align-items: center; gap: 16px; color: #c9d6df; font-size: 28px; opacity: 0.9; }50 .curr-row {51 margin-top: 18px; position: relative;52 height: 170px; display: flex; align-items: center;53 border-bottom: 1px solid rgba(255,255,255,0.15);54 }55 .search-icon { margin-left: 12px; margin-right: 24px; }56 .search-icon svg { width: 66px; height: 66px; stroke: #ff5252; stroke-width: 8; }57 .code-block { display: flex; align-items: center; gap: 18px; }58 .code { font-size: 44px; font-weight: 800; color: #fff; }59 .flag {60 width: 86px; height: 56px; background: #E0E0E0; border: 1px solid #BDBDBD;61 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 20px;62 }63 .desc { font-size: 26px; color: #b9c7d4; margin-left: 110px; position: absolute; top: 92px; }64 .row-actions { margin-left: auto; display: flex; align-items: center; gap: 28px; margin-right: 24px; }65 .down svg { width: 30px; height: 30px; fill: #e05b55; }66 .refresh svg { width: 40px; height: 40px; stroke: #cdd7de; stroke-width: 6; }67 .value-right {68 position: absolute; right: 18px; top: 30px; width: 80px; text-align: right; font-size: 96px; font-weight: 700; color: #fff; opacity: 0.95;69 }70 /* top actions bar */71 .top-actions {72 position: absolute; top: 800px; left: 0; width: 1080px; height: 170px;73 background: linear-gradient(180deg, #263a4b 0%, #1f2f3f 100%);74 display: grid; grid-template-columns: repeat(4, 1fr);75 border-top: 1px solid rgba(255,255,255,0.08);76 border-bottom: 1px solid rgba(255,255,255,0.08);77 }78 .action-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border-right: 1px solid rgba(255,255,255,0.08); }79 .action-item:last-child { border-right: none; }80 .action-item span { font-size: 26px; color: #cdd7de; text-align: center; width: 90%; }81 .action-item svg { width: 44px; height: 44px; stroke: #cdd7de; stroke-width: 6; fill: none; }82 .action-star svg { fill: #cdd7de; stroke: none; }83 /* Calculator grid */84 .calc {85 position: absolute; top: 970px; left: 0; width: 1080px; bottom: 150px;86 background: #2a2f34;87 }88 .calc-grid {89 display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 330px;90 }91 .cell {92 border: 1px solid rgba(0,0,0,0.5);93 display: flex; align-items: center; justify-content: center;94 font-size: 96px; color: #eef2f5; background: #59646c;95 }96 .cell.alt { background: #4c565e; }97 .cell.op { background: #3a434a; }98 .cell.equal { background: #b7443c; }99 .cell.label {100 font-size: 52px; color: #dbe1e6; background: #3a3f45;101 }102 .small-label { font-size: 40px; color: #e36a65; }103 /* Dropdown overlay for currencies */104 .dropdown {105 position: absolute; top: 470px; left: 150px; width: 480px; height: 1650px;106 background: #163e5a; border-radius: 8px; box-shadow: 0 10px 20px rgba(0,0,0,0.5);107 overflow: hidden;108 }109 .drop-item {110 display: flex; align-items: center; gap: 18px;111 padding: 24px 22px; border-bottom: 1px solid rgba(255,255,255,0.08);112 color: #fff;113 }114 .drop-code { font-size: 40px; font-weight: 800; width: 120px; }115 .drop-name { font-size: 26px; color: #cbd7e1; }116 .drop-flag {117 width: 60px; height: 38px; background: #E0E0E0; border: 1px solid #BDBDBD;118 color: #757575; display: flex; align-items: center; justify-content: center; font-size: 18px;119 margin-left: auto;120 }121 /* Bottom ad bar placeholder */122 .ad-bar {123 position: absolute; left: 0; right: 0; bottom: 90px; height: 150px;124 background: #121212; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; color: #cfd6dc;125 }126 .ad-left {127 display: flex; align-items: center; gap: 16px;128 }129 .ad-img {130 width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;131 display: flex; align-items: center; justify-content: center;132 }133 .ad-btn {134 background: #2fa368; color: #fff; border-radius: 34px; padding: 18px 36px; font-size: 36px;135 }136 /* Bottom home indicator */137 .home-indicator {138 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);139 width: 360px; height: 14px; background: #d9d9d9; border-radius: 7px; opacity: 0.9;140 }141</style>142</head>143<body>144<div id="render-target">145 <!-- Status bar -->146 <div class="status-bar">147 <div class="status-left">11:18</div>148 <div class="status-right">149 <div class="signal-dot"></div>150 <div class="status-icon"></div>151 </div>152 </div>153 154 <!-- App bar -->155 <div class="app-bar">156 <div class="app-left">157 <div class="icon-btn" aria-label="Menu">158 <svg viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18"/></svg>159 </div>160 <div class="title-wrap">161 <div class="app-title">CURRENCY CONVERTER</div>162 <div class="subtitle">Updated on December 14, 2023 10:48 AM</div>163 </div>164 </div>165 <div class="icon-btn kebab" aria-label="More">166 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2.5"/><circle cx="12" cy="12" r="2.5"/><circle cx="12" cy="19" r="2.5"/></svg>167 </div>168 </div>169 170 <!-- Converter top panel -->171 <div class="converter">172 <div class="lang-row">173 EN174 <svg viewBox="0 0 24 24" style="width:28px;height:28px;stroke:#cdd7de;stroke-width:3;fill:none"><path d="M4 5l16 0M4 12l16 0M4 19l16 0"/></svg>175 <svg viewBox="0 0 24 24" style="width:28px;height:28px;stroke:#cdd7de;stroke-width:3;fill:none"><path d="M12 5v14M5 12h14"/></svg>176 </div>177 178 <!-- Row 1 -->179 <div class="curr-row">180 <div class="search-icon">181 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="7"/><path d="M21 21l-6-6"/></svg>182 </div>183 <div class="code-block">184 <div class="code">GBP</div>185 <div class="flag">[IMG: Flag]</div>186 </div>187 <div class="desc">British Pound Sterling</div>188 <div class="row-actions">189 <div class="down">190 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>191 </div>192 <div class="refresh">193 <svg viewBox="0 0 24 24"><path d="M4 12a8 8 0 1 0 3-6"/><path d="M3 4h6v6"/></svg>194 </div>195 </div>196 <div class="value-right">0</div>197 </div>198 199 <!-- Row 2 -->200 <div class="curr-row">201 <div class="search-icon">202 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="7"/><path d="M21 21l-6-6"/></svg>203 </div>204 <div class="code-block">205 <div class="code">JMD</div>206 <svg viewBox="0 0 24 24" class="down" style="width:30px;height:30px;fill:#8bb1df"><path d="M6 9l6 6 6-6"/></svg>207 <div class="refresh">208 <svg viewBox="0 0 24 24"><path d="M4 12a8 8 0 1 0 3-6"/><path d="M3 4h6v6"/></svg>209 </div>210 </div>211 <div class="value-right">0</div>212 </div>213 </div>214 215 <!-- Actions bar -->216 <div class="top-actions">217 <div class="action-item">218 <svg viewBox="0 0 24 24"><path d="M20 12A8 8 0 1 1 12 4"/><path d="M3 4h6v6"/></svg>219 <span>CURRENCY RATES</span>220 </div>221 <div class="action-item">222 <svg viewBox="0 0 24 24" class="action-star"><path d="M12 3l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>223 <span>FAVORITES & UPDATES</span>224 </div>225 <div class="action-item">226 <svg viewBox="0 0 24 24"><path d="M12 5a7 7 0 0 1 6 3"/><path d="M21 8v5h-5"/><path d="M12 19a7 7 0 0 1-6-3"/><path d="M3 16v-5h5"/></svg>227 <span>CURRENCY ROTATE</span>228 </div>229 <div class="action-item">230 <svg viewBox="0 0 24 24"><path d="M5 12h14"/><path d="M12 5v14"/></svg>231 <span>TOOLS</span>232 </div>233 </div>234 235 <!-- Calculator section -->236 <div class="calc">237 <div class="calc-grid">238 <div class="cell label">CONV</div>239 <div class="cell label"><span class="small-label">X</span> CLR</div>240 <div class="cell label">DEL</div>241 <div class="cell op">÷</div>242 243 <div class="cell alt">9</div>244 <div class="cell alt">6</div>245 <div class="cell alt">3</div>246 <div class="cell op">−</div>247 248 <div class="cell">0</div>249 <div class="cell">0</div>250 <div class="cell op">+</div>251 <div class="cell op">×</div>252 253 <div class="cell">.</div>254 <div class="cell equal">=</div>255 <div class="cell alt">5</div>256 <div class="cell op">÷</div>257 </div>258 </div>259 260 <!-- Dropdown overlay list -->261 <div class="dropdown">262 <div class="drop-item">263 <div class="drop-code">JEP</div>264 <div class="drop-name">Jersey Pound</div>265 <div class="drop-flag">[IMG: Flag]</div>266 </div>267 <div class="drop-item">268 <div class="drop-code">JMD</div>269 <div class="drop-name">Jamaican Dollar</div>270 <div class="drop-flag">[IMG: Flag]</div>271 </div>272 <div class="drop-item">273 <div class="drop-code">JOD</div>274 <div class="drop-name">Jordanian Dinar</div>275 <div class="drop-flag">[IMG: Flag]</div>276 </div>277 <div class="drop-item">278 <div class="drop-code">JPY</div>279 <div class="drop-name">Japanese Yen</div>280 <div class="drop-flag">[IMG: Flag]</div>281 </div>282 <div class="drop-item">283 <div class="drop-code">KES</div>284 <div class="drop-name">Kenyan Shilling</div>285 <div class="drop-flag">[IMG: Flag]</div>286 </div>287 <div class="drop-item">288 <div class="drop-code">KGS</div>289 <div class="drop-name">Kyrgystani Som</div>290 <div class="drop-flag">[IMG: Flag]</div>291 </div>292 <div class="drop-item">293 <div class="drop-code">KHR</div>294 <div class="drop-name">Cambodian Riel</div>295 <div class="drop-flag">[IMG: Flag]</div>296 </div>297 <div class="drop-item">298 <div class="drop-code">KMF</div>299 <div class="drop-name">Comorian Franc</div>300 <div class="drop-flag">[IMG: Flag]</div>301 </div>302 <div class="drop-item">303 <div class="drop-code">KPW</div>304 <div class="drop-name">North Korean Won</div>305 <div class="drop-flag">[IMG: Flag]</div>306 </div>307 <div class="drop-item">308 <div class="drop-code">KRW</div>309 <div class="drop-name">Korean Won</div>310 <div class="drop-flag">[IMG: Flag]</div>311 </div>312 <div class="drop-item">313 <div class="drop-code">KWD</div>314 <div class="drop-name">Kuwaiti Dinar</div>315 <div class="drop-flag">[IMG: Flag]</div>316 </div>317 <div class="drop-item">318 <div class="drop-code">KYD</div>319 <div class="drop-name">Cayman Islands Dollar</div>320 <div class="drop-flag">[IMG: Flag]</div>321 </div>322 <div class="drop-item">323 <div class="drop-code">KZT</div>324 <div class="drop-name">Kazakhstani Tenge</div>325 <div class="drop-flag">[IMG: Flag]</div>326 </div>327 <div class="drop-item">328 <div class="drop-code">LAK</div>329 <div class="drop-name">Laotian Kip</div>330 <div class="drop-flag">[IMG: Flag]</div>331 </div>332 <div class="drop-item">333 <div class="drop-code">LBP</div>334 <div class="drop-name">Lebanese Pound</div>335 <div class="drop-flag">[IMG: Flag]</div>336 </div>337 <div class="drop-item">338 <div class="drop-code">LKR</div>339 <div class="drop-name">Sri Lankan Rupee</div>340 <div class="drop-flag">[IMG: