GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Currency Plus UI</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 position: relative;9 overflow: hidden;10 width: 1080px;11 height: 2400px;12 background: #ffffff;13 color: #222;14 }15 16 /* Status bar */17 .status-bar {18 height: 80px;19 padding: 18px 26px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #333;24 font-size: 34px;25 }26 .status-left, .status-right {27 display: flex;28 align-items: center;29 gap: 18px;30 }31 .icon {32 width: 34px; height: 34px;33 }34 35 /* App bar */36 .app-bar {37 height: 110px;38 padding: 0 26px;39 display: flex;40 align-items: center;41 justify-content: space-between;42 border-bottom: 1px solid #e6e6e6;43 }44 .app-title {45 font-size: 46px;46 font-weight: 700;47 letter-spacing: 1px;48 }49 .title-light { font-weight: 600; color: #2c2c2c; }50 .title-bold { font-weight: 800; }51 .app-icons {52 display: flex; align-items: center; gap: 30px;53 }54 55 .update {56 font-size: 34px;57 color: #8b8b8b;58 padding: 18px 26px;59 border-bottom: 1px solid #ececec;60 }61 62 /* Currency list */63 .list {64 padding-top: 6px;65 }66 .row {67 display: flex;68 align-items: center;69 justify-content: space-between;70 padding: 26px;71 border-bottom: 1px solid #efefef;72 }73 .row.active {74 background: #eaf2ff;75 }76 .currency-left {77 display: flex;78 align-items: center;79 gap: 24px;80 }81 .flag {82 width: 120px; height: 80px;83 background: #E0E0E0;84 border: 1px solid #BDBDBD;85 display: flex; align-items: center; justify-content: center;86 color: #757575; font-size: 22px;87 border-radius: 8px;88 }89 .code {90 font-size: 54px;91 color: #4a4a4a;92 font-weight: 600;93 letter-spacing: 1px;94 }95 .caret {96 margin-left: 12px;97 width: 26px; height: 26px;98 }99 .value {100 display: flex; align-items: center; gap: 18px;101 }102 .value .num {103 font-size: 64px; color: #666;104 }105 .chart {106 width: 56px; height: 56px;107 border: 1px solid #CFCFCF; border-radius: 6px;108 display: flex; align-items: center; justify-content: center;109 }110 .input-box {111 width: 110px; height: 78px;112 border: 2px solid #7ea8ff;113 border-radius: 6px;114 display: flex; align-items: center; justify-content: center;115 font-size: 64px; color: #0d3cff; background: #fff;116 }117 118 /* Keypad */119 .keypad {120 margin-top: 20px;121 padding: 26px;122 display: grid;123 grid-template-columns: repeat(4, 1fr);124 gap: 26px;125 }126 .key {127 height: 160px;128 border-radius: 28px;129 background: #ffffff;130 border: 1px solid #e6e6e6;131 box-shadow: 0 2px 0 rgba(0,0,0,0.04);132 display: flex; align-items: center; justify-content: center;133 font-size: 64px; color: #333;134 }135 .key.red { color: #d85a5a; font-weight: 700; }136 .key.small { font-size: 48px; color: #666; }137 .key .mini {138 width: 70px; height: 70px;139 }140 141 /* Ad banner */142 .ad {143 position: absolute;144 left: 0; right: 0;145 bottom: 140px;146 padding: 20px 26px;147 border-top: 1px solid #eaeaea;148 background: #fafafa;149 display: flex; align-items: center; gap: 24px;150 }151 .ad .img {152 width: 280px; height: 160px;153 background: #E0E0E0; border: 1px solid #BDBDBD;154 display: flex; align-items: center; justify-content: center;155 color: #757575; font-size: 26px; border-radius: 8px;156 }157 .ad-details { flex: 1; }158 .ad-title { font-size: 44px; font-weight: 700; }159 .ad-sub { font-size: 30px; color: #777; margin-top: 6px; }160 .ad-btn {161 background: #1fb76f; color: #fff; font-size: 38px; font-weight: 700;162 padding: 20px 36px; border-radius: 46px; border: none;163 }164 165 /* Gesture bar */166 .gesture {167 position: absolute; left: 50%; bottom: 40px;168 transform: translateX(-50%);169 width: 480px; height: 14px; background: #cfcfcf; border-radius: 14px;170 }171</style>172</head>173<body>174<div id="render-target">175 176 <!-- Status Bar -->177 <div class="status-bar">178 <div class="status-left">179 <div>8:22</div>180 <svg class="icon" viewBox="0 0 24 24">181 <path d="M12 8a4 4 0 110 8 4 4 0 010-8zm8.6 4a8.6 8.6 0 11-17.2 0 8.6 8.6 0 0117.2 0z" fill="#707070"/>182 </svg>183 </div>184 <div class="status-right">185 <svg class="icon" viewBox="0 0 24 24">186 <path d="M3 10h18v4H3z" fill="#707070"/>187 <path d="M5 14h14v3H5z" fill="#707070"/>188 </svg>189 <svg class="icon" viewBox="0 0 24 24">190 <path d="M2 7h20v10H2z" fill="none" stroke="#707070" stroke-width="2"/>191 <path d="M18 8v8" stroke="#707070" stroke-width="2"/>192 </svg>193 </div>194 </div>195 196 <!-- App Bar -->197 <div class="app-bar">198 <svg class="icon" viewBox="0 0 24 24" style="width:48px;height:48px;">199 <path d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z" fill="#333"/>200 </svg>201 <div class="app-title"><span class="title-light">CURRENCY </span><span class="title-bold">PLUS</span></div>202 <div class="app-icons">203 <svg class="icon" viewBox="0 0 24 24" style="width:48px;height:48px;">204 <circle cx="10" cy="10" r="7" stroke="#333" stroke-width="2" fill="none"/>205 <path d="M15 15l6 6" stroke="#333" stroke-width="2"/>206 </svg>207 </div>208 </div>209 210 <div class="update">Updated: 8:21, AM Oct 31, 2023</div>211 212 <!-- Currency List -->213 <div class="list">214 <!-- EUR Active Row -->215 <div class="row active">216 <div class="currency-left">217 <div class="flag">[IMG: EU Flag]</div>218 <div class="code">EUR</div>219 <svg class="caret" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="#666"/></svg>220 </div>221 <div class="value">222 <div class="input-box">0</div>223 </div>224 </div>225 226 <!-- USD -->227 <div class="row">228 <div class="currency-left">229 <div class="flag">[IMG: US Flag]</div>230 <div class="code">USD</div>231 <svg class="caret" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="#666"/></svg>232 </div>233 <div class="value">234 <div class="num">0</div>235 <div class="chart">236 <svg viewBox="0 0 24 24" width="40" height="40">237 <path d="M3 18l5-6 4 3 6-8" stroke="#8a8a8a" stroke-width="2" fill="none"/>238 <path d="M2 20h20" stroke="#cfcfcf" stroke-width="2"/>239 </svg>240 </div>241 </div>242 </div>243 244 <!-- MXN -->245 <div class="row">246 <div class="currency-left">247 <div class="flag">[IMG: Mexico Flag]</div>248 <div class="code">MXN</div>249 <svg class="caret" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="#666"/></svg>250 </div>251 <div class="value">252 <div class="num">0</div>253 <div class="chart">254 <svg viewBox="0 0 24 24" width="40" height="40">255 <path d="M3 18l5-6 4 3 6-8" stroke="#8a8a8a" stroke-width="2" fill="none"/>256 <path d="M2 20h20" stroke="#cfcfcf" stroke-width="2"/>257 </svg>258 </div>259 </div>260 </div>261 262 <!-- CAD -->263 <div class="row">264 <div class="currency-left">265 <div class="flag">[IMG: Canada Flag]</div>266 <div class="code">CAD</div>267 <svg class="caret" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="#666"/></svg>268 </div>269 <div class="value">270 <div class="num">0</div>271 <div class="chart">272 <svg viewBox="0 0 24 24" width="40" height="40">273 <path d="M3 18l5-6 4 3 6-8" stroke="#8a8a8a" stroke-width="2" fill="none"/>274 <path d="M2 20h20" stroke="#cfcfcf" stroke-width="2"/>275 </svg>276 </div>277 </div>278 </div>279 280 <!-- CUP -->281 <div class="row">282 <div class="currency-left">283 <div class="flag">[IMG: Cuba Flag]</div>284 <div class="code">CUP</div>285 <svg class="caret" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="#666"/></svg>286 </div>287 <div class="value">288 <div class="num">0</div>289 <div class="chart">290 <svg viewBox="0 0 24 24" width="40" height="40">291 <path d="M3 18l5-6 4 3 6-8" stroke="#8a8a8a" stroke-width="2" fill="none"/>292 <path d="M2 20h20" stroke="#cfcfcf" stroke-width="2"/>293 </svg>294 </div>295 </div>296 </div>297 298 <!-- JPY -->299 <div class="row">300 <div class="currency-left">301 <div class="flag">[IMG: Japan Flag]</div>302 <div class="code">JPY</div>303 <svg class="caret" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="#666"/></svg>304 </div>305 <div class="value">306 <div class="num">0</div>307 <div class="chart">308 <svg viewBox="0 0 24 24" width="40" height="40">309 <path d="M3 18l5-6 4 3 6-8" stroke="#8a8a8a" stroke-width="2" fill="none"/>310 <path d="M2 20h20" stroke="#cfcfcf" stroke-width="2"/>311 </svg>312 </div>313 </div>314 </div>315 316 <!-- GBP -->317 <div class="row">318 <div class="currency-left">319 <div class="flag">[IMG: UK Flag]</div>320 <div class="code">GBP</div>321 <svg class="caret" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="#666"/></svg>322 </div>323 <div class="value">324 <div class="num">0</div>325 <div class="chart">326 <svg viewBox="0 0 24 24" width="40" height="40">327 <path d="M3 18l5-6 4 3 6-8" stroke="#8a8a8a" stroke-width="2" fill="none"/>328 <path d="M2 20h20" stroke="#cfcfcf" stroke-width="2"/>329 </svg>330 </div>331 </div>332 </div>333 </div>334 335 <!-- Keypad -->336 <div class="keypad">337 <div class="key red">C</div>338 <div class="key">7</div>339 <div class="key">8</div>340 <div class="key">9</div>341 342 <div class="key">343 <svg class="mini" viewBox="0 0 24 24">344 <path d="M12 4v4M12 20v-4M5 12h14" stroke="#4f4f4f" stroke-width="2" fill="none"/>345 <path d="M7 7l-3 5 3 5" stroke="#4f4f4f" stroke-width="2" fill="none"/>346 </svg>347 </div>348 <div class="key">4</div>349 <div class="key">5</div>350 <div class="key">6</div>351 352 <div class="key small">+ −<br/>× ÷</div>353 <div class="key">1</div>354 <div class="key">2</div>355 <div class="key">3</div>356 357 <div class="key"></div>358 <div class="key">0</div>359 <div class="key">.</div>360 <div class="key">361 <svg class="mini" viewBox="0 0 24 24">362 <path d="M4 7h12l4 5-4 5H4z" fill="none" stroke="#333" stroke-width="2"/>363 <path d="M10 9l-3 3 3 3" stroke="#333" stroke-width="2" fill="none"/>364 </svg>365 </div>366 </div>367 368 <!-- Ad Banner -->369 <div class="ad">370 <div class="img">[IMG: Blinkit Ad]</div>371 <div class="ad-details">372 <div class="ad-title">Blinkit</div>373 <div class="ad-sub">India's Last Minute App • 4.3 ★ FREE</div>374 </div>375 <button class="ad-btn">INSTALL</button>376 </div>377 378 <div class="gesture"></div>379</div>380</body>381</html>