GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Currency Plus - Mock UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 }14 15 /* Top status bar */16 .status-bar {17 height: 110px;18 padding: 26px 40px 0 40px;19 box-sizing: border-box;20 font-size: 36px;21 color: #333;22 display: flex;23 align-items: center;24 justify-content: space-between;25 }26 .status-icons { display: flex; gap: 22px; align-items: center; }27 .icon { width: 44px; height: 44px; }28 .icon svg { width: 100%; height: 100%; }29 30 /* App bar */31 .app-bar {32 height: 150px;33 padding: 0 34px;34 box-sizing: border-box;35 display: flex;36 align-items: center;37 justify-content: space-between;38 border-bottom: 1px solid #eee;39 }40 .title {41 font-size: 54px;42 letter-spacing: 1px;43 color: #222;44 font-weight: 700;45 }46 .update-line {47 height: 80px;48 display: flex;49 align-items: center;50 justify-content: center;51 color: #6b6b6b;52 font-size: 34px;53 border-bottom: 1px solid #eee;54 }55 56 /* Currency rows */57 .list { }58 .currency-row {59 height: 140px;60 display: flex;61 align-items: center;62 padding: 0 36px;63 box-sizing: border-box;64 border-bottom: 1px solid #efefef;65 }66 .currency-row.base { background: #eef5ff; }67 .flag {68 width: 120px;69 height: 84px;70 background: #E0E0E0;71 border: 1px solid #BDBDBD;72 display: flex;73 align-items: center;74 justify-content: center;75 color: #757575;76 border-radius: 8px;77 margin-right: 24px;78 font-size: 26px;79 }80 .abbr {81 width: 190px;82 display: flex;83 align-items: center;84 gap: 12px;85 }86 .abbr .code {87 font-size: 56px;88 color: #3a3a3a;89 font-weight: 600;90 }91 .arrow { width: 30px; height: 30px; }92 .value {93 margin-left: auto;94 display: flex;95 align-items: center;96 gap: 24px;97 }98 .value .amount {99 font-size: 56px;100 color: #4a4a4a;101 text-align: right;102 min-width: 520px;103 }104 .spark { width: 52px; height: 52px; }105 106 /* Keypad */107 .keypad {108 background: #f7f7f7;109 padding: 34px 40px 34px 40px;110 box-sizing: border-box;111 display: grid;112 grid-template-columns: repeat(4, 1fr);113 gap: 28px;114 }115 .key {116 height: 180px;117 background: #ffffff;118 border-radius: 32px;119 box-shadow: 0 6px 16px rgba(0,0,0,0.08);120 display: flex;121 align-items: center;122 justify-content: center;123 font-size: 72px;124 color: #2f2f2f;125 user-select: none;126 }127 .key.small { font-size: 56px; }128 .key.red { color: #d85b5b; }129 .key.symbol { color: #7a7a7a; }130 .key svg { width: 92px; height: 92px; }131 132 /* Ad banner */133 .ad-banner {134 height: 150px;135 border-top: 1px solid #e6e6e6;136 display: flex;137 align-items: center;138 padding: 0 22px;139 box-sizing: border-box;140 gap: 24px;141 background: #ffffff;142 }143 .ad-image {144 width: 260px;145 height: 120px;146 background: #E0E0E0;147 border: 1px solid #BDBDBD;148 display: flex;149 align-items: center;150 justify-content: center;151 color: #757575;152 font-size: 26px;153 }154 .app-icon {155 width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;156 display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 24px;157 }158 .ad-text {159 flex: 1;160 display: flex;161 flex-direction: column;162 justify-content: center;163 line-height: 1.2;164 }165 .ad-title { font-size: 44px; color: #222; font-weight: 700; }166 .ad-sub { font-size: 30px; color: #666; margin-top: 8px; }167 .ad-btn {168 width: 180px;169 height: 90px;170 background: #1db954;171 border-radius: 40px;172 color: #fff;173 font-size: 40px;174 display: flex;175 align-items: center;176 justify-content: center;177 font-weight: 700;178 }179 180 /* Bottom handle bar */181 .handle {182 position: absolute;183 bottom: 16px;184 left: 50%;185 transform: translateX(-50%);186 width: 420px;187 height: 14px;188 background: #cfcfcf;189 border-radius: 8px;190 }191</style>192</head>193<body>194<div id="render-target">195 196 <!-- Status bar -->197 <div class="status-bar">198 <div>8:25</div>199 <div class="status-icons">200 <!-- small gear icon -->201 <div class="icon">202 <svg viewBox="0 0 24 24">203 <path fill="#777" d="M12 8a4 4 0 100 8 4 4 0 000-8zm9 4a9 9 0 01-.2 2l2 1-2 3-2-1a9 9 0 01-1.7 1l.1 2.3h-4l.1-2.3a9 9 0 01-1.7-1l-2 1-2-3 2-1a9 9 0 01-.2-2 9 9 0 01.2-2l-2-1 2-3 2 1a9 9 0 011.7-1L9 2.7h4L12.9 5a9 9 0 011.7 1l2-1 2 3-2 1c.14.66.21 1.33.21 2z"/>204 </svg>205 </div>206 <!-- signal icon -->207 <div class="icon">208 <svg viewBox="0 0 24 24">209 <path fill="#777" d="M3 17h3v3H3v-3zm5-5h3v8H8v-8zm5-4h3v12h-3V8zm5-5h3v17h-3V3z"/>210 </svg>211 </div>212 <!-- battery icon -->213 <div class="icon">214 <svg viewBox="0 0 26 24">215 <rect x="2" y="6" width="20" height="12" rx="2" fill="#777"></rect>216 <rect x="23" y="9" width="3" height="6" rx="1" fill="#777"></rect>217 <rect x="4" y="8" width="14" height="8" fill="#fff"></rect>218 </svg>219 </div>220 </div>221 </div>222 223 <!-- App bar -->224 <div class="app-bar">225 <!-- Hamburger -->226 <div class="icon" style="width:64px;height:64px;">227 <svg viewBox="0 0 24 24">228 <path fill="#333" d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/>229 </svg>230 </div>231 <div class="title">CURRENCY PLUS</div>232 <!-- Search -->233 <div class="icon" style="width:64px;height:64px;">234 <svg viewBox="0 0 24 24">235 <circle cx="10" cy="10" r="6" stroke="#333" stroke-width="2" fill="none"></circle>236 <path d="M15 15l6 6" stroke="#333" stroke-width="2"></path>237 </svg>238 </div>239 </div>240 241 <div class="update-line">Updated: 8:21, AM Oct 31, 2023</div>242 243 <!-- Currency list -->244 <div class="list">245 246 <!-- Base EUR -->247 <div class="currency-row base">248 <div class="flag">[IMG: EU Flag]</div>249 <div class="abbr">250 <div class="code">EUR</div>251 <div class="arrow">252 <svg viewBox="0 0 24 24"><path fill="#333" d="M7 10l5 5 5-5z"/></svg>253 </div>254 </div>255 <div class="value">256 <div class="amount">1,000</div>257 </div>258 </div>259 260 <!-- USD -->261 <div class="currency-row">262 <div class="flag">[IMG: US Flag]</div>263 <div class="abbr">264 <div class="code">USD</div>265 <div class="arrow">266 <svg viewBox="0 0 24 24"><path fill="#666" d="M7 10l5 5 5-5z"/></svg>267 </div>268 </div>269 <div class="value">270 <div class="amount">1,060.34</div>271 <div class="spark">272 <svg viewBox="0 0 24 24">273 <path d="M2 18l6-6 4 3 6-9 4 4" stroke="#8e8e8e" stroke-width="2" fill="none"/>274 </svg>275 </div>276 </div>277 </div>278 279 <!-- MXN -->280 <div class="currency-row">281 <div class="flag">[IMG: Mexico Flag]</div>282 <div class="abbr">283 <div class="code">MXN</div>284 <div class="arrow">285 <svg viewBox="0 0 24 24"><path fill="#666" d="M7 10l5 5 5-5z"/></svg>286 </div>287 </div>288 <div class="value">289 <div class="amount">19,170.065</div>290 <div class="spark">291 <svg viewBox="0 0 24 24">292 <path d="M2 18l5-5 3 2 6-6 6 4" stroke="#8e8e8e" stroke-width="2" fill="none"/>293 </svg>294 </div>295 </div>296 </div>297 298 <!-- CAD -->299 <div class="currency-row">300 <div class="flag">[IMG: Canada Flag]</div>301 <div class="abbr">302 <div class="code">CAD</div>303 <div class="arrow">304 <svg viewBox="0 0 24 24"><path fill="#666" d="M7 10l5 5 5-5z"/></svg>305 </div>306 </div>307 <div class="value">308 <div class="amount">1,467.65</div>309 <div class="spark">310 <svg viewBox="0 0 24 24">311 <path d="M2 18l6-7 4 3 5-3 5 6" stroke="#8e8e8e" stroke-width="2" fill="none"/>312 </svg>313 </div>314 </div>315 </div>316 317 <!-- CUP -->318 <div class="currency-row">319 <div class="flag">[IMG: Cuba Flag]</div>320 <div class="abbr">321 <div class="code">CUP</div>322 <div class="arrow">323 <svg viewBox="0 0 24 24"><path fill="#666" d="M7 10l5 5 5-5z"/></svg>324 </div>325 </div>326 <div class="value">327 <div class="amount">27,303.74</div>328 <div class="spark">329 <svg viewBox="0 0 24 24">330 <path d="M2 18l4-4 4 2 5-8 7 6" stroke="#8e8e8e" stroke-width="2" fill="none"/>331 </svg>332 </div>333 </div>334 </div>335 336 <!-- JPY -->337 <div class="currency-row">338 <div class="flag">[IMG: Japan Flag]</div>339 <div class="abbr">340 <div class="code">JPY</div>341 <div class="arrow">342 <svg viewBox="0 0 24 24"><path fill="#666" d="M7 10l5 5 5-5z"/></svg>343 </div>344 </div>345 <div class="value">346 <div class="amount">158,485.74</div>347 <div class="spark">348 <svg viewBox="0 0 24 24">349 <path d="M2 18l6-6 4 1 4-3 6 7" stroke="#8e8e8e" stroke-width="2" fill="none"/>350 </svg>351 </div>352 </div>353 </div>354 355 <!-- GBP -->356 <div class="currency-row">357 <div class="flag">[IMG: UK Flag]</div>358 <div class="abbr">359 <div class="code">GBP</div>360 <div class="arrow">361 <svg viewBox="0 0 24 24"><path fill="#666" d="M7 10l5 5 5-5z"/></svg>362 </div>363 </div>364 <div class="value">365 <div class="amount">872.78</div>366 <div class="spark">367 <svg viewBox="0 0 24 24">368 <path d="M2 18l8-9 3 4 5-2 6 5" stroke="#8e8e8e" stroke-width="2" fill="none"/>369 </svg>370 </div>371 </div>372 </div>373 374 </div>375 376 <!-- Keypad -->377 <div class="keypad">378 <div class="key red">C</div>379 <div class="key">7</div>380 <div class="key">8</div>381 <div class="key">9</div>382 383 <div class="key symbol">384 <svg viewBox="0 0 24 24">385 <path d="M12 4a8 8 0 108 8" stroke="#6f6f6f" stroke-width="2" fill="none"/>386 <path d="M20 12l2-2" stroke="#6f6f6f" stroke-width="2"/>387 </svg>388 </div>389 <div class="key">4</div>390 <div class="key">5</div>391 <div class="key">6</div>392 393 <div class="key symbol small">394 <div style="display:flex;align-items:center;gap:20px;">395 <span style="font-size:70px;">+</span>396 <span style="font-size:70px;">−</span>397 </div>398 </div>399 <div class="key">1</div>400 <div class="key">2</div>401 <div class="key">3</div>402 403 <div class="key symbol small">404 <div style="display:flex;align-items:center;gap:22px;">405 <span style="font-size:70px;">×</span>406 <span style="font-size:70px;">÷</span>407 </div>408 </div>409 <div class="key">0</div>410 <div class="key">.</div>411 <div class="key symbol">412 <svg viewBox="0 0 24 24">413 <path d="M3 6h15v12H3z" fill="none" stroke="#6f6f6f" stroke-width="2"/>414 <path d="M8 9l6 6M14 9l-6 6" stroke="#6f6f6f" stroke-width="2"/>415 </svg>416 </div>417 </div>418 419 <!-- Ad banner -->420 <div class="ad-banner">421 <div class="ad-image">[IMG: Station Illustration]</div>422 <div class="app-icon">[IMG: App Icon]</div>423 <div class="ad-text">424 <div class="ad-title">Omio</div>425 <div class="ad-sub">4.6 ★ FREE</div>426 </div>427 <div class="ad-btn">Open</div>428 </div>429 430 <!-- bottom handle -->431 <div class="handle"></div>432</div>433</body>434</html>