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 Plus UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff;13 font-family: "Segoe UI", Arial, sans-serif;14 color: #2b2b2b;15 }16 17 /* Status bar */18 .status-bar {19 height: 110px;20 padding: 24px 36px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #6d6d6d;25 font-size: 36px;26 }27 .status-left { display: flex; align-items: center; gap: 20px; }28 .status-right { display: flex; align-items: center; gap: 24px; }29 30 /* App header */31 .app-bar {32 height: 120px;33 display: flex;34 align-items: center;35 padding: 0 36px;36 border-bottom: 1px solid #e9e9e9;37 }38 .app-title {39 flex: 1;40 text-align: center;41 font-size: 44px;42 letter-spacing: 1px;43 }44 .title-strong { font-weight: 700; }45 .update-time {46 text-align: center;47 font-size: 32px;48 color: #9e9e9e;49 padding: 18px 0 10px;50 border-bottom: 1px solid #efefef;51 }52 53 /* Currency list */54 .list {55 background: #fff;56 }57 .row {58 display: flex;59 align-items: center;60 padding: 28px 36px;61 border-bottom: 1px solid #f0f0f0;62 }63 .row.highlight { background: #eaf2ff; }64 .flag {65 width: 120px; height: 80px;66 background: #E0E0E0;67 border: 1px solid #BDBDBD;68 display: flex; align-items: center; justify-content: center;69 color: #757575; font-size: 26px; border-radius: 10px;70 }71 .code {72 font-size: 48px; font-weight: 600; margin: 0 18px;73 }74 .code.light { color: #757575; font-weight: 500; }75 .dropdown {76 width: 34px; height: 34px; margin-left: 6px;77 }78 .value {79 margin-left: auto;80 font-size: 46px;81 color: #111;82 }83 .value.muted { color: #8a8a8a; font-weight: 500; }84 .trend {85 width: 44px; height: 44px; margin-left: 18px;86 }87 88 /* Keypad */89 .keypad-wrap {90 border-top: 1px solid #e9e9e9;91 padding: 26px 26px 0;92 }93 .keypad {94 display: grid;95 grid-template-columns: repeat(4, 1fr);96 grid-gap: 26px;97 padding-bottom: 16px;98 }99 .key {100 height: 150px;101 background: #f7f7f7;102 border: 1px solid #e2e2e2;103 border-radius: 30px;104 display: flex; align-items: center; justify-content: center;105 font-size: 56px; color: #6b6b6b;106 box-shadow: inset 0 3px 0 #eeeeee;107 }108 .key.alert { color: #e0685a; font-weight: 700; }109 .key.accent { color: #4b8fbf; }110 .key.math { color: #d47a4c; font-weight: 700; font-size: 52px; line-height: 1.1; }111 .key svg { width: 64px; height: 64px; }112 113 /* Ad bar */114 .adbar {115 position: absolute; left: 0; right: 0; bottom: 110px;116 height: 160px; background: #fff; border-top: 1px solid #e6e6e6;117 display: flex; align-items: center; padding: 18px 24px; gap: 24px;118 }119 .ad-img {120 width: 270px; height: 120px;121 background: #E0E0E0; border: 1px solid #BDBDBD;122 display: flex; align-items: center; justify-content: center;123 color: #757575; font-size: 26px; border-radius: 8px;124 }125 .ad-icon {126 width: 110px; height: 110px;127 background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 22px;128 display: flex; align-items: center; justify-content: center; color: #757575;129 font-size: 26px;130 }131 .ad-text { flex: 1; }132 .ad-title { font-size: 40px; }133 .ad-sub { font-size: 30px; color: #6d6d6d; margin-top: 6px; }134 .ad-btn {135 background: #19a463; color: #fff; font-size: 36px; font-weight: 700;136 border: none; border-radius: 40px; padding: 20px 36px;137 }138 139 /* Home indicator */140 .home-indicator {141 position: absolute; bottom: 34px; left: 50%;142 transform: translateX(-50%);143 width: 360px; height: 12px; border-radius: 6px; background: #d0d0d0;144 }145</style>146</head>147<body>148<div id="render-target">149 150 <!-- Status bar -->151 <div class="status-bar">152 <div class="status-left">153 <div>1:56</div>154 <svg width="40" height="40">155 <circle cx="20" cy="20" r="10" fill="#9e9e9e"></circle>156 </svg>157 </div>158 <div class="status-right">159 <!-- WiFi -->160 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">161 <path d="M3 9c4-3 14-3 18 0" stroke="#8c8c8c" stroke-width="2" fill="none"/>162 <path d="M6 12c3-2 9-2 12 0" stroke="#8c8c8c" stroke-width="2" fill="none"/>163 <circle cx="12" cy="16" r="2" fill="#8c8c8c"></circle>164 </svg>165 <!-- Battery -->166 <svg width="48" height="40" viewBox="0 0 28 16" fill="none">167 <rect x="1" y="3" width="22" height="10" rx="2" stroke="#8c8c8c" stroke-width="2"></rect>168 <rect x="3" y="5" width="16" height="6" fill="#8c8c8c"></rect>169 <rect x="24" y="6" width="3" height="4" fill="#8c8c8c"></rect>170 </svg>171 </div>172 </div>173 174 <!-- App bar -->175 <div class="app-bar">176 <!-- Hamburger -->177 <svg width="56" height="56" viewBox="0 0 24 24">178 <rect x="3" y="5" width="18" height="2" fill="#3a3a3a"></rect>179 <rect x="3" y="11" width="18" height="2" fill="#3a3a3a"></rect>180 <rect x="3" y="17" width="18" height="2" fill="#3a3a3a"></rect>181 </svg>182 <div class="app-title"><span>CURRENCY </span><span class="title-strong">PLUS</span></div>183 <!-- Search -->184 <svg width="56" height="56" viewBox="0 0 24 24">185 <circle cx="11" cy="11" r="7" stroke="#3a3a3a" stroke-width="2" fill="none"></circle>186 <path d="M20 20l-4.5-4.5" stroke="#3a3a3a" stroke-width="2"></path>187 </svg>188 </div>189 190 <div class="update-time">Updated: 1:56, PM Oct 31, 2023</div>191 192 <!-- Currency rows -->193 <div class="list">194 <!-- EUR highlighted -->195 <div class="row highlight">196 <div class="flag">[IMG: Flag EU]</div>197 <div class="code">EUR</div>198 <svg class="dropdown" viewBox="0 0 24 24">199 <path d="M6 9l6 6 6-6" fill="#2b2b2b"></path>200 </svg>201 <div class="value">1,000</div>202 </div>203 204 <div class="row">205 <div class="flag">[IMG: Flag US]</div>206 <div class="code light">USD</div>207 <svg class="dropdown" viewBox="0 0 24 24">208 <path d="M6 9l6 6 6-6" fill="#9a9a9a"></path>209 </svg>210 <div class="value muted">1,062.874</div>211 <svg class="trend" viewBox="0 0 24 24">212 <polyline points="3,16 9,12 13,14 21,8" fill="none" stroke="#9a9a9a" stroke-width="2"></polyline>213 </svg>214 </div>215 216 <div class="row">217 <div class="flag">[IMG: Flag Mexico]</div>218 <div class="code light">MXN</div>219 <svg class="dropdown" viewBox="0 0 24 24">220 <path d="M6 9l6 6 6-6" fill="#9a9a9a"></path>221 </svg>222 <div class="value muted">19,164.48</div>223 <svg class="trend" viewBox="0 0 24 24">224 <polyline points="3,16 9,12 13,14 21,8" fill="none" stroke="#9a9a9a" stroke-width="2"></polyline>225 </svg>226 </div>227 228 <div class="row">229 <div class="flag">[IMG: Flag Canada]</div>230 <div class="code light">CAD</div>231 <svg class="dropdown" viewBox="0 0 24 24">232 <path d="M6 9l6 6 6-6" fill="#9a9a9a"></path>233 </svg>234 <div class="value muted">1,469.9</div>235 <svg class="trend" viewBox="0 0 24 24">236 <polyline points="3,16 9,12 13,14 21,8" fill="none" stroke="#9a9a9a" stroke-width="2"></polyline>237 </svg>238 </div>239 240 <div class="row">241 <div class="flag">[IMG: Flag Cuba]</div>242 <div class="code light">CUP</div>243 <svg class="dropdown" viewBox="0 0 24 24">244 <path d="M6 9l6 6 6-6" fill="#9a9a9a"></path>245 </svg>246 <div class="value muted">27,369.002</div>247 <svg class="trend" viewBox="0 0 24 24">248 <polyline points="3,16 9,12 13,14 21,8" fill="none" stroke="#9a9a9a" stroke-width="2"></polyline>249 </svg>250 </div>251 252 <div class="row">253 <div class="flag">[IMG: Flag Japan]</div>254 <div class="code light">JPY</div>255 <svg class="dropdown" viewBox="0 0 24 24">256 <path d="M6 9l6 6 6-6" fill="#9a9a9a"></path>257 </svg>258 <div class="value muted">159,794.054</div>259 <svg class="trend" viewBox="0 0 24 24">260 <polyline points="3,16 9,12 13,14 21,8" fill="none" stroke="#9a9a9a" stroke-width="2"></polyline>261 </svg>262 </div>263 264 <div class="row">265 <div class="flag">[IMG: Flag UK]</div>266 <div class="code light">GBP</div>267 <svg class="dropdown" viewBox="0 0 24 24">268 <path d="M6 9l6 6 6-6" fill="#9a9a9a"></path>269 </svg>270 <div class="value muted">874.26</div>271 <svg class="trend" viewBox="0 0 24 24">272 <polyline points="3,16 9,12 13,14 21,8" fill="none" stroke="#9a9a9a" stroke-width="2"></polyline>273 </svg>274 </div>275 </div>276 277 <!-- Keypad -->278 <div class="keypad-wrap">279 <div class="keypad">280 <div class="key alert">C</div>281 <div class="key">7</div>282 <div class="key">8</div>283 <div class="key">9</div>284 285 <div class="key accent">286 <!-- Refresh icon -->287 <svg viewBox="0 0 24 24">288 <path d="M4 11a8 8 0 1 1 2.3 5.6" stroke="#4b8fbf" stroke-width="2" fill="none"></path>289 <path d="M3 7v4h4" stroke="#4b8fbf" stroke-width="2" fill="none"></path>290 </svg>291 </div>292 <div class="key">4</div>293 <div class="key">5</div>294 <div class="key">6</div>295 296 <div class="key math">+ −<br>× ÷</div>297 <div class="key">1</div>298 <div class="key">2</div>299 <div class="key">3</div>300 301 <div class="key">0</div>302 <div class="key">.</div>303 <div class="key">304 <!-- Backspace icon -->305 <svg viewBox="0 0 24 24">306 <path d="M22 6v12H8l-5-6 5-6h14z" fill="#6b6b6b"></path>307 <path d="M12 9l4 4m0-4l-4 4" stroke="#fff" stroke-width="2"></path>308 </svg>309 </div>310 <div class="key" style="visibility:hidden;"></div>311 </div>312 </div>313 314 <!-- Ad bar -->315 <div class="adbar">316 <div class="ad-img">[IMG: Ad Banner]</div>317 <div class="ad-icon">[IMG: App Icon]</div>318 <div class="ad-text">319 <div class="ad-title">Omio</div>320 <div class="ad-sub">4.6 ★ FREE</div>321 </div>322 <button class="ad-btn">Open</button>323 </div>324 325 <!-- Home indicator -->326 <div class="home-indicator"></div>327 328</div>329</body>330</html>