GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Currency Converter UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #101317;12 box-sizing: border-box;13 }14 /* Status bar */15 .status-bar {16 height: 120px; background: #0b0b0b; color: #ffffff;17 display: flex; align-items: center; justify-content: space-between;18 padding: 0 40px; font-weight: 500;19 }20 .status-left { font-size: 42px; letter-spacing: 1px; }21 .status-right { display: flex; gap: 24px; align-items: center; }22 .status-icon {23 width: 36px; height: 36px; border-radius: 6px; background: #ffffff22;24 }25 26 /* App bar */27 .app-bar {28 height: 220px; background: #1f2328; color: #fff;29 display: flex; align-items: center; padding: 0 36px; position: relative;30 border-bottom: 1px solid #2c333a;31 }32 .app-bar .title-wrap { margin-left: 86px; }33 .app-title { font-size: 52px; font-weight: 900; letter-spacing: 1px; }34 .app-sub { font-size: 28px; color: #9aa5af; margin-top: 6px; }35 .app-actions { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); display: flex; gap: 24px; }36 .icon-btn { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; }37 .menu-left { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); }38 39 /* Blue currency section */40 .currency-section {41 height: 570px;42 background: linear-gradient(#52759a, #486b90);43 border-bottom: 3px solid #222a32;44 color: #fff;45 padding: 24px 24px 0 24px;46 }47 .lang-row { color: #c9d6e2; font-size: 26px; display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }48 .cur-row {49 display: grid;50 grid-template-columns: 120px 1fr 200px 240px;51 align-items: center;52 padding: 24px 18px;53 border-top: 1px solid #3e5975;54 }55 .search-icon {56 width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center;57 margin-left: 30px;58 }59 .cur-info { display: flex; flex-direction: column; }60 .cur-code { font-size: 46px; font-weight: 900; display: flex; align-items: center; gap: 18px; }61 .cur-name { font-size: 28px; color: #c9d6e2; margin-top: 6px; }62 .flag {63 width: 84px; height: 52px; background: #E0E0E0; border: 1px solid #BDBDBD;64 display: inline-flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;65 }66 .cur-controls { display: flex; gap: 26px; align-items: center; justify-content: flex-start; }67 .amount { text-align: right; font-size: 98px; font-weight: 900; letter-spacing: 1px; }68 .amount.small { font-size: 86px; }69 .dropdown-dot { width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 20px solid #e45757; }70 .dropdown-dot.blue { border-top-color: #74a7df; }71 72 /* Action tiles */73 .action-tiles {74 display: grid; grid-template-columns: repeat(4, 1fr);75 height: 160px; border-top: 2px solid #1f252b; border-bottom: 2px solid #1f252b;76 }77 .tile {78 background: linear-gradient(#202932, #1b232b);79 border-right: 1px solid #141a20; border-left: 1px solid #27303a;80 display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;81 color: #dbe3eb;82 }83 .tile:last-child { border-right: none; }84 .tile-label { font-size: 26px; text-align: center; line-height: 34px; }85 .tile svg { width: 42px; height: 42px; fill: none; stroke: #dbe3eb; stroke-width: 3; }86 87 /* Keypad */88 .keypad {89 display: grid; grid-template-columns: repeat(4, 1fr);90 height: 1260px;91 border-top: 2px solid #0f1216;92 }93 .key {94 background: linear-gradient(#58636a, #4c555c);95 border: 1px solid #20282e;96 display: flex; align-items: center; justify-content: center;97 color: #eef2f5; font-size: 68px; font-weight: 700;98 }99 .key.operator { background: linear-gradient(#3a4046, #2f353a); }100 .key.equals { background: #c64a42; color: #fff; font-weight: 900; }101 .key.small { font-size: 40px; }102 .key.subtle { color: #a4acb4; }103 .key.redtext { color: #d04646; font-size: 34px; font-weight: 600; letter-spacing: 1px; }104 105 /* Ad banner */106 .ad-banner {107 position: absolute; left: 0; right: 0; bottom: 100px;108 height: 200px; background: #ffffff; border-top: 1px solid #cfd4da;109 display: flex; align-items: center; padding: 0 24px; gap: 24px;110 }111 .ad-img {112 width: 140px; height: 140px; background: #E0E0E0; border: 1px solid #BDBDBD;113 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; border-radius: 24px;114 }115 .ad-text { display: flex; flex-direction: column; justify-content: center; }116 .ad-title { font-size: 34px; color: #222; }117 .ad-sub { font-size: 26px; color: #6c757d; margin-top: 6px; }118 .install-btn {119 margin-left: auto; background: #2e8b57; color: #fff; font-size: 32px; padding: 18px 42px; border-radius: 40px;120 }121 122 /* Bottom gesture pill */123 .gesture-pill {124 position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);125 width: 180px; height: 18px; background: #e6e6e6; border-radius: 10px;126 opacity: 0.8;127 }128</style>129</head>130<body>131<div id="render-target">132 <!-- Status bar -->133 <div class="status-bar">134 <div class="status-left">11:20</div>135 <div class="status-right">136 <div class="status-icon"></div>137 <div class="status-icon"></div>138 <div class="status-icon"></div>139 </div>140 </div>141 142 <!-- App bar -->143 <div class="app-bar">144 <div class="menu-left icon-btn">145 <svg viewBox="0 0 24 24" width="64" height="64">146 <path d="M3 6h18M3 12h18M3 18h18" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>147 </svg>148 </div>149 <div class="title-wrap">150 <div class="app-title">CURRENCY CONVERTER</div>151 <div class="app-sub">Updated on December 14, 2023 10:48 AM</div>152 </div>153 <div class="app-actions">154 <div class="icon-btn">155 <svg viewBox="0 0 24 24">156 <circle cx="12" cy="4" r="2" fill="#fff"/>157 <circle cx="12" cy="12" r="2" fill="#fff"/>158 <circle cx="12" cy="20" r="2" fill="#fff"/>159 </svg>160 </div>161 </div>162 </div>163 164 <!-- Currency section -->165 <div class="currency-section">166 <div class="lang-row">167 EN168 <svg viewBox="0 0 24 24" width="32" height="32">169 <path d="M4 12h16M12 4v16" stroke="#c9d6e2" stroke-width="2" fill="none"/>170 </svg>171 <svg viewBox="0 0 24 24" width="32" height="32">172 <path d="M6 12a6 6 0 0 1 12 0M6 12a6 6 0 0 0 12 0" stroke="#c9d6e2" stroke-width="2" fill="none"/>173 </svg>174 </div>175 176 <!-- GBP row -->177 <div class="cur-row">178 <div class="search-icon">179 <svg viewBox="0 0 24 24" width="64" height="64">180 <circle cx="10" cy="10" r="7" stroke="#e45757" stroke-width="3" fill="none"/>181 <path d="M15 15l6 6" stroke="#e45757" stroke-width="3" fill="none" stroke-linecap="round"/>182 </svg>183 </div>184 <div class="cur-info">185 <div class="cur-code">GBP186 <div class="flag">[IMG: UK Flag]</div>187 </div>188 <div class="cur-name">British Pound Sterling</div>189 </div>190 <div class="cur-controls">191 <div class="dropdown-dot"></div>192 <svg viewBox="0 0 24 24" width="44" height="44">193 <path d="M3 12a9 9 0 0 1 15-6M21 12a9 9 0 0 1-15 6" stroke="#c9d6e2" stroke-width="2" fill="none"/>194 <path d="M6 6v4h4" stroke="#c9d6e2" stroke-width="2" fill="none"/>195 </svg>196 </div>197 <div class="amount">2</div>198 </div>199 200 <!-- EUR row -->201 <div class="cur-row">202 <div class="search-icon">203 <svg viewBox="0 0 24 24" width="64" height="64">204 <circle cx="10" cy="10" r="7" stroke="#6fb6ff" stroke-width="3" fill="none"/>205 <path d="M15 15l6 6" stroke="#6fb6ff" stroke-width="3" fill="none" stroke-linecap="round"/>206 </svg>207 </div>208 <div class="cur-info">209 <div class="cur-code">EUR210 <div class="flag">[IMG: EU Flag]</div>211 </div>212 <div class="cur-name">Euro</div>213 </div>214 <div class="cur-controls">215 <div class="dropdown-dot blue"></div>216 <svg viewBox="0 0 24 24" width="44" height="44">217 <path d="M3 12a9 9 0 0 1 15-6M21 12a9 9 0 0 1-15 6" stroke="#c9d6e2" stroke-width="2" fill="none"/>218 <path d="M6 6v4h4" stroke="#c9d6e2" stroke-width="2" fill="none"/>219 </svg>220 </div>221 <div class="amount small">2.31908</div>222 </div>223 </div>224 225 <!-- Action tiles -->226 <div class="action-tiles">227 <div class="tile">228 <svg viewBox="0 0 24 24">229 <path d="M12 3a9 9 0 1 0 9 9" />230 <path d="M12 3v6M12 12l4 2" />231 </svg>232 <div class="tile-label">CURRENCY UPDATE</div>233 </div>234 <div class="tile">235 <svg viewBox="0 0 24 24">236 <rect x="3" y="12" width="4" height="7" />237 <rect x="10" y="8" width="4" height="11" />238 <rect x="17" y="5" width="4" height="14" />239 </svg>240 <div class="tile-label">TRENDS & CHARTS</div>241 </div>242 <div class="tile">243 <svg viewBox="0 0 24 24">244 <path d="M12 3l3 6 6 .8-4.5 4 1.2 6.2L12 17l-5.7 3.9L7.5 14 3 9.8 9 9z" stroke-linejoin="round"/>245 </svg>246 <div class="tile-label">CURRENCY FAVORITES</div>247 </div>248 <div class="tile">249 <svg viewBox="0 0 24 24">250 <path d="M12 3a9 9 0 1 1-8 5" />251 <path d="M4 8h5M9 8V3" />252 </svg>253 <div class="tile-label">CURRENCY ROTATE</div>254 </div>255 </div>256 257 <!-- Keypad grid -->258 <div class="keypad">259 <div class="key small">COPY</div>260 <div class="key small">SEND</div>261 <div class="key small"><span style="color:#d64b4b;">✕</span> CLR</div>262 <div class="key small"><span style="color:#b7e06b;">⬅</span> DEL</div>263 264 <div class="key">7</div>265 <div class="key">8</div>266 <div class="key">9</div>267 <div class="key operator">÷</div>268 269 <div class="key">4</div>270 <div class="key">5</div>271 <div class="key">6</div>272 <div class="key operator">×</div>273 274 <div class="key">1</div>275 <div class="key">2</div>276 <div class="key">3</div>277 <div class="key operator">−</div>278 279 <div class="key">000</div>280 <div class="key">00</div>281 <div class="key">0</div>282 <div class="key operator">+</div>283 284 <div class="key redtext">MULTI CURRENCY<br/>CONVERTER</div>285 <div class="key">±</div>286 <div class="key">.</div>287 <div class="key equals">=</div>288 </div>289 290 <!-- Ad banner -->291 <div class="ad-banner">292 <div class="ad-img">[IMG: App Icon]</div>293 <div class="ad-text">294 <div class="ad-title">Motilal Oswal Share Market App</div>295 <div class="ad-sub">3.9 ★ FREE</div>296 </div>297 <div class="install-btn">INSTALL</div>298 </div>299 300 <div class="gesture-pill"></div>301</div>302</body>303</html>