GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Currency Converter UI</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; position: relative; overflow: hidden;11 background: #0f1215; color: #fff;12 }13 /* Status bar */14 .status-bar {15 height: 96px; background: #000; color: #fff;16 display: flex; align-items: center; justify-content: space-between;17 padding: 0 28px; box-sizing: border-box; font-size: 30px;18 }19 .status-left { display: flex; align-items: center; gap: 18px; }20 .status-icons { display: flex; align-items: center; gap: 14px; }21 .sb-square { width: 28px; height: 22px; border: 2px solid #bbb; }22 .sb-circle { width: 18px; height: 18px; border-radius: 50%; background: #fff; opacity: 0.9; }23 .battery {24 width: 40px; height: 20px; border: 2px solid #ddd; position: relative; border-radius: 3px;25 }26 .battery::after { content: ""; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); width: 6px; height: 10px; background: #ddd; border-radius: 2px; }27 .battery .level { position: absolute; left: 2px; top: 2px; bottom: 2px; width: 28px; background: #fff; }28 /* Header toolbar */29 .header {30 height: 220px; background: #1f2429; border-bottom: 1px solid #2b3238;31 display: flex; align-items: center; padding: 0 36px; box-sizing: border-box;32 }33 .header .left, .header .right { width: 100px; display: flex; align-items: center; justify-content: center; }34 .header .center { flex: 1; }35 .title { font-size: 48px; font-weight: 700; letter-spacing: 1px; }36 .subtitle { font-size: 26px; color: #b3bdc6; margin-top: 10px; }37 .icon-btn { width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; }38 /* Converter panel */39 .converter-panel {40 height: 520px;41 background: linear-gradient(#52739a, #365f86);42 box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);43 position: relative; padding: 26px 24px; box-sizing: border-box;44 }45 .lang { position: absolute; top: 20px; left: 26px; font-size: 26px; color: #d6dfeb; }46 .currency-row {47 display: grid; grid-template-columns: 90px 1fr 120px; align-items: center;48 padding: 32px 0; box-sizing: border-box; border-bottom: 1px solid rgba(0,0,0,0.3);49 }50 .currency-row:last-child { border-bottom: none; }51 .search-icon { width: 60px; height: 60px; margin-left: 12px; }52 .cur-info { display: flex; align-items: center; gap: 18px; }53 .cur-text { display: flex; flex-direction: column; }54 .cur-code { font-size: 40px; font-weight: 700; color: #ffffff; }55 .cur-name { font-size: 28px; color: #d5e0ea; margin-top: 8px; }56 .flag {57 width: 72px; height: 48px; background: #E0E0E0; border: 1px solid #BDBDBD;58 display: flex; justify-content: center; align-items: center; color: #757575; font-size: 20px; border-radius: 4px;59 }60 .small-actions { display: flex; align-items: center; gap: 16px; margin-left: 10px; }61 .tiny-icon { width: 36px; height: 36px; }62 .value { text-align: right; font-size: 76px; font-weight: 600; color: #e9eef5; padding-right: 20px; }63 /* Top action menu */64 .action-menu {65 display: grid; grid-template-columns: repeat(4, 1fr);66 height: 160px; background: linear-gradient(#17232f, #14202a);67 border-top: 1px solid #0e1a24; border-bottom: 1px solid #0e1a24;68 }69 .action-item {70 display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;71 color: #d9e4ef; border-right: 1px solid #20303d;72 }73 .action-item:last-child { border-right: none; }74 .action-item span { font-size: 24px; text-align: center; }75 /* Function row */76 .func-row {77 display: grid; grid-template-columns: repeat(4, 1fr);78 height: 160px; background: #2b333a; border-bottom: 1px solid #242c33; border-top: 1px solid #242c33;79 }80 .func-cell {81 display: flex; align-items: center; justify-content: center; gap: 16px;82 color: #f0f5fb; font-size: 34px; border-right: 1px solid #3b444d;83 }84 .func-cell:last-child { border-right: none; }85 .func-cell .x { color: #ff3b3b; font-weight: bold; }86 .func-cell .back { color: #c7ff55; font-weight: bold; }87 /* Keypad */88 .keypad {89 display: grid; grid-template-columns: repeat(4, 1fr);90 grid-auto-rows: 200px; border-top: 1px solid #343e45;91 }92 .key {93 background: #5d6871; border-right: 1px solid #3b454d; border-bottom: 1px solid #3b454d;94 display: flex; align-items: center; justify-content: center; font-size: 60px; color: #ffffff;95 }96 .op { background: #3c4349; }97 .equals { background: #bd4a3e; font-weight: 700; }98 .multi { font-size: 28px; color: #ff5050; letter-spacing: 1px; }99 /* Safe area & Ad */100 .safe-area { height: 84px; background: #0d0f12; display: flex; align-items: center; justify-content: center; }101 .home-pill { width: 200px; height: 12px; background: #eaeaea; border-radius: 7px; opacity: 0.8; }102 .ad-banner {103 height: 160px; background: #ffffff; color: #333; display: flex; align-items: center; padding: 22px; gap: 24px; box-sizing: border-box;104 border-top: 1px solid #cfd6dc;105 }106 .ad-img {107 width: 110px; height: 110px; background: #E0E0E0; border: 1px solid #BDBDBD;108 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 20px; border-radius: 24px;109 }110 .ad-content { flex: 1; }111 .ad-title { font-size: 30px; font-weight: 600; }112 .ad-sub { font-size: 22px; color: #6b737a; margin-top: 8px; }113 .ad-btn {114 background: #2f8c5b; color: #fff; border-radius: 40px; padding: 18px 38px; font-size: 28px; font-weight: 700;115 }116 /* small helpers */117 .divider { height: 1px; background: rgba(0,0,0,0.35); }118</style>119</head>120<body>121<div id="render-target">122 123 <!-- Status Bar -->124 <div class="status-bar">125 <div class="status-left">126 <div>11:17</div>127 <div class="sb-square"></div>128 <div class="sb-square" style="border-radius: 3px;"></div>129 </div>130 <div class="status-icons">131 <div class="sb-circle"></div>132 <div class="battery"><div class="level"></div></div>133 </div>134 </div>135 136 <!-- Header -->137 <div class="header">138 <div class="left icon-btn">139 <!-- Hamburger -->140 <svg width="44" height="44" viewBox="0 0 44 44">141 <rect x="6" y="10" width="32" height="4" fill="#ffffff"/>142 <rect x="6" y="20" width="32" height="4" fill="#ffffff"/>143 <rect x="6" y="30" width="32" height="4" fill="#ffffff"/>144 </svg>145 </div>146 <div class="center">147 <div class="title">CURRENCY CONVERTER</div>148 <div class="subtitle">Updated on December 14, 2023 10:48 AM</div>149 </div>150 <div class="right icon-btn">151 <!-- Kebab vertical -->152 <svg width="32" height="44" viewBox="0 0 32 44">153 <circle cx="16" cy="10" r="4" fill="#ffffff"/>154 <circle cx="16" cy="22" r="4" fill="#ffffff"/>155 <circle cx="16" cy="34" r="4" fill="#ffffff"/>156 </svg>157 </div>158 </div>159 160 <!-- Converter Panel -->161 <div class="converter-panel">162 <div class="lang">EN</div>163 164 <!-- GBP row -->165 <div class="currency-row">166 <div class="search-icon">167 <!-- Search Icon -->168 <svg width="60" height="60" viewBox="0 0 60 60">169 <circle cx="26" cy="26" r="18" stroke="#ff4a4a" stroke-width="6" fill="none"/>170 <line x1="38" y1="38" x2="56" y2="56" stroke="#ff4a4a" stroke-width="6" />171 </svg>172 </div>173 <div class="cur-info">174 <div class="cur-text">175 <div class="cur-code">GBP</div>176 <div class="cur-name">British Pound Sterling</div>177 </div>178 <div class="flag">[IMG: UK Flag]</div>179 <div class="small-actions">180 <!-- Down arrow -->181 <svg class="tiny-icon" viewBox="0 0 24 24">182 <polygon points="12,18 4,8 20,8" fill="#f36d5f"></polygon>183 </svg>184 <!-- rotate icon -->185 <svg class="tiny-icon" viewBox="0 0 24 24">186 <path d="M12 4a8 8 0 0 1 0 16M12 4v4M12 20l-3-3" stroke="#d8e4ef" stroke-width="2" fill="none"/>187 </svg>188 </div>189 </div>190 <div class="value">0</div>191 </div>192 193 <!-- USD row -->194 <div class="currency-row">195 <div class="search-icon">196 <svg width="60" height="60" viewBox="0 0 60 60">197 <circle cx="26" cy="26" r="18" stroke="#5aa0ff" stroke-width="6" fill="none"/>198 <line x1="38" y1="38" x2="56" y2="56" stroke="#5aa0ff" stroke-width="6" />199 </svg>200 </div>201 <div class="cur-info">202 <div class="cur-text">203 <div class="cur-code">USD</div>204 <div class="cur-name">U.S. Dollar</div>205 </div>206 <div class="flag">[IMG: US Flag]</div>207 <div class="small-actions">208 <!-- Down arrow -->209 <svg class="tiny-icon" viewBox="0 0 24 24">210 <polygon points="12,18 4,8 20,8" fill="#69a9ff"></polygon>211 </svg>212 <!-- rotate icon -->213 <svg class="tiny-icon" viewBox="0 0 24 24">214 <path d="M12 4a8 8 0 0 1 0 16M12 4v4M12 20l-3-3" stroke="#d8e4ef" stroke-width="2" fill="none"/>215 </svg>216 </div>217 </div>218 <div class="value">0</div>219 </div>220 </div>221 222 <!-- Top action menu -->223 <div class="action-menu">224 <div class="action-item">225 <svg width="40" height="40" viewBox="0 0 40 40">226 <path d="M20 6a12 12 0 1 1-8.5 20.5" stroke="#cfe3f4" stroke-width="3" fill="none"/>227 <polyline points="12,26 9,20 15,20" fill="none" stroke="#cfe3f4" stroke-width="3"/>228 </svg>229 <span>CURRENCY UPDATE</span>230 </div>231 <div class="action-item">232 <svg width="40" height="40" viewBox="0 0 40 40">233 <rect x="6" y="22" width="6" height="12" fill="#cfe3f4"/>234 <rect x="16" y="16" width="6" height="18" fill="#cfe3f4"/>235 <rect x="26" y="10" width="6" height="24" fill="#cfe3f4"/>236 </svg>237 <span>TRENDS & CHARTS</span>238 </div>239 <div class="action-item">240 <svg width="40" height="40" viewBox="0 0 40 40">241 <polygon points="20,6 24,16 35,16 26,22 30,33 20,26 10,33 14,22 5,16 16,16" fill="#cfe3f4"/>242 </svg>243 <span>CURRENCY FAVORITES</span>244 </div>245 <div class="action-item">246 <svg width="40" height="40" viewBox="0 0 40 40">247 <path d="M20 6a12 12 0 0 1 0 24" stroke="#cfe3f4" stroke-width="3" fill="none"/>248 <polyline points="20,6 16,10 24,10" fill="#cfe3f4"/>249 </svg>250 <span>CURRENCY ROTATE</span>251 </div>252 </div>253 254 <!-- Function row -->255 <div class="func-row">256 <div class="func-cell">COPY</div>257 <div class="func-cell">SEND</div>258 <div class="func-cell"><span class="x">✕</span> CLR</div>259 <div class="func-cell"><span class="back">↩</span> DEL</div>260 </div>261 262 <!-- Keypad -->263 <div class="keypad">264 <div class="key">7</div>265 <div class="key">8</div>266 <div class="key">9</div>267 <div class="key op">÷</div>268 269 <div class="key">4</div>270 <div class="key">5</div>271 <div class="key">6</div>272 <div class="key op">×</div>273 274 <div class="key">1</div>275 <div class="key">2</div>276 <div class="key">3</div>277 <div class="key op">−</div>278 279 <div class="key">000</div>280 <div class="key">00</div>281 <div class="key">0</div>282 <div class="key op">+</div>283 284 <div class="key multi">MULTI CURRENCY CONVERTER</div>285 <div class="key">±</div>286 <div class="key">.</div>287 <div class="key equals">=</div>288 </div>289 290 <!-- Safe area with home indicator -->291 <div class="safe-area">292 <div class="home-pill"></div>293 </div>294 295 <!-- Ad banner -->296 <div class="ad-banner">297 <div class="ad-img">[IMG: App Icon]</div>298 <div class="ad-content">299 <div class="ad-title">Motilal Oswal Share Market App</div>300 <div class="ad-sub">3.9 ★ FREE</div>301 </div>302 <div class="ad-btn">INSTALL</div>303 </div>304 305</div>306</body>307</html>