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>Convert Screen Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #F6F8FB;15 border-radius: 0;16 }17 18 /* Top safe area (notch) */19 .safe-top {20 height: 88px;21 background: #000;22 width: 100%;23 }24 25 /* Header */26 .header {27 height: 140px;28 background: #FFFFFF;29 border-bottom: 1px solid #E6ECF2;30 display: flex;31 align-items: center;32 padding: 0 36px;33 }34 .header .left {35 width: 120px;36 display: flex;37 align-items: center;38 }39 .avatar {40 width: 64px; height: 64px;41 border-radius: 50%;42 border: 2px solid #D9E2EC;43 display: flex; justify-content: center; align-items: center;44 color: #7B8794;45 }46 .header .title {47 flex: 1;48 text-align: center;49 font-size: 44px;50 font-weight: 600;51 color: #2F3A4A;52 }53 .gift-pill {54 display: flex; align-items: center; gap: 16px;55 padding: 18px 24px;56 background: #EEF6FF;57 color: #0B6FF2;58 border-radius: 20px;59 font-weight: 600;60 }61 .gift-pill svg { width: 40px; height: 40px; }62 63 /* Updated time row */64 .update-row {65 display: flex;66 align-items: center;67 gap: 20px;68 padding: 28px 36px 16px 36px;69 color: #607284;70 font-size: 30px;71 }72 .progress-circle {73 width: 72px; height: 72px;74 border-radius: 50%;75 background: #FFFFFF;76 box-shadow: inset 0 0 0 6px #DDE5ED;77 display: flex; justify-content: center; align-items: center;78 position: relative;79 }80 .progress-circle::after{81 content:"";82 position:absolute; inset:4px;83 border-radius:50%;84 border:6px solid #0B6FF2;85 border-right-color: transparent;86 transform: rotate(45deg);87 }88 .progress-circle span { font-size: 26px; color:#6B778C; }89 90 /* EUR card */91 .eur-card {92 margin: 12px 36px 24px 36px;93 border-radius: 24px;94 overflow: hidden;95 border: 4px solid #0B6FF2;96 background: #FFFFFF;97 }98 .eur-card .top {99 display: grid;100 grid-template-columns: 1fr 200px;101 align-items: stretch;102 }103 .eur-card .main {104 display: flex; align-items: center;105 padding: 28px;106 gap: 22px;107 }108 .flag {109 width: 88px; height: 88px; border-radius: 50%;110 background: #E0E0E0; border: 1px solid #BDBDBD;111 display: flex; align-items: center; justify-content: center;112 color: #757575; font-size: 22px; text-align:center; line-height: 1.1;113 padding: 6px;114 }115 .currency-name {116 font-size: 40px; font-weight: 600; color: #2F3A4A;117 display:flex; align-items:center; gap:12px;118 }119 .dropdown {120 width: 26px; height: 26px; display:inline-block;121 }122 .amount {123 margin-left: auto;124 font-size: 46px; font-weight: 700; color: #2F3A4A;125 letter-spacing: 0.5px;126 }127 .right-tool {128 border-left: 2px solid #E6ECF2;129 display: flex; align-items: center; justify-content: center;130 }131 .right-tool .calc {132 width: 100%; height: 100%;133 display:flex; align-items:center; justify-content:center;134 }135 .eur-card .blue {136 background: #0B6FF2;137 color: #FFFFFF;138 display: flex; align-items: center; justify-content: space-between;139 padding: 30px 32px;140 }141 .eur-card .blue .left {142 display:flex; align-items:center; gap:16px; font-size: 34px; font-weight:600;143 }144 .eur-card .blue .right {145 display:flex; align-items:center; gap:10px; font-size: 32px; font-weight:700;146 }147 .eur-card .blue svg { width: 40px; height: 40px; fill: #fff; }148 149 /* Currency item */150 .card {151 margin: 18px 36px;152 background: #FFFFFF;153 border-radius: 24px;154 box-shadow: 0 2px 8px rgba(34,60,80,0.08);155 padding: 26px;156 }157 .card .row {158 display:flex; align-items:center; gap:22px;159 }160 .card .code { font-size: 38px; font-weight: 700; color:#2F3A4A; }161 .card .value { margin-left:auto; font-size: 42px; font-weight: 700; color:#2F3A4A; }162 .dots { width: 16px; height: 60px; display:flex; justify-content:center; align-items:center; margin-left: 18px; }163 .dots span { width: 10px; height: 10px; background:#9AA7B5; border-radius:50%; display:block; margin: 4px 0; }164 .subtext { margin-left: 134px; color: #7A8B99; font-size: 28px; margin-top: 8px; }165 166 /* Add currency & info row */167 .actions-row {168 margin: 24px 36px;169 display:flex; align-items:center; justify-content: space-between;170 }171 .add-currency {172 background: #EEF6FF; color: #0B6FF2;173 padding: 24px 28px; border-radius: 24px; display:flex; align-items:center; gap:18px;174 font-size: 34px; font-weight: 600;175 }176 .info-text { color:#6B778C; font-size: 30px; display:flex; align-items:center; gap:10px; }177 .info-text svg { width: 28px; height: 28px; }178 179 /* Spacer to push bottom nav */180 .spacer { height: 1080px; }181 182 /* Bottom navigation */183 .bottom-nav {184 position: absolute; bottom: 70px; left: 0; right: 0;185 background: #FFFFFF;186 border-top: 1px solid #E6ECF2;187 height: 160px;188 display:flex; align-items:center; justify-content: space-around;189 padding-bottom: 12px;190 }191 .tab {192 display:flex; flex-direction: column; align-items:center; gap:10px;193 color:#7A8B99; font-size: 26px;194 }195 .tab .icon {196 width: 72px; height: 72px; border-radius: 36px;197 display:flex; align-items:center; justify-content:center;198 color:#0B6FF2;199 }200 .tab.active .icon {201 background:#0B6FF2; color:#fff;202 }203 .tab.active .label { color:#0B6FF2; }204 .tab .label { font-size: 26px; }205 206 /* Home indicator area */207 .home-indicator-area {208 position:absolute; bottom: 0; left: 0; right: 0; height: 70px; background:#000;209 display:flex; align-items:center; justify-content:center;210 }211 .home-indicator { width: 300px; height: 10px; border-radius: 8px; background: #C9CDD2; opacity: 0.9; }212</style>213</head>214<body>215<div id="render-target">216 217 <div class="safe-top"></div>218 219 <div class="header">220 <div class="left">221 <div class="avatar">222 <svg viewBox="0 0 24 24" width="36" height="36">223 <path d="M12 12a5 5 0 1 0-0.001-10.001A5 5 0 0 0 12 12zm0 2c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5z" fill="#7B8794"/>224 </svg>225 </div>226 </div>227 <div class="title">Convert</div>228 <div class="gift-pill">229 <svg viewBox="0 0 24 24">230 <path fill="#0B6FF2" d="M20 7h-2.2A3 3 0 0 0 15 3a3 3 0 0 0-3 3 3 3 0 0 0-3-3 3 3 0 0 0-2.8 4H4a1 1 0 0 0-1 1v3h9V8h1v3h9V8a1 1 0 0 0-1-1zM7 5a1 1 0 1 1 0 2h-1a1 1 0 0 1 1-2zm10 0a1 1 0 1 1 0 2h-1a1 1 0 0 1 1-2zM3 13v7a1 1 0 0 0 1 1h7v-8H3zm10 0v8h7a1 1 0 0 0 1-1v-7h-8z"/>231 </svg>232 €25233 </div>234 </div>235 236 <div class="update-row">237 <div class="progress-circle"><span>46</span></div>238 <div>Last updated: 30 Oct 2023 13:36</div>239 </div>240 241 <div class="eur-card">242 <div class="top">243 <div class="main">244 <div class="flag">[IMG: EU Flag]</div>245 <div class="currency-name">246 EUR247 <svg class="dropdown" viewBox="0 0 24 24">248 <path d="M7 10l5 5 5-5z" fill="#7A8B99"/>249 </svg>250 </div>251 <div class="amount">€ 1,000.84</div>252 </div>253 <div class="right-tool">254 <div class="calc">255 <svg viewBox="0 0 24 24" width="44" height="44">256 <path fill="#7A8B99" d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm2 3h10v4H7V6zm0 6h2v2H7v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zM7 16h2v2H7v-2zm4 0h6v2h-6v-2z"/>257 </svg>258 </div>259 </div>260 </div>261 <div class="blue">262 <div class="left">263 <svg viewBox="0 0 24 24">264 <path d="M2 12l19-9-9 19-2-8-8-2z"/>265 </svg>266 <span>Send EUR to USD</span>267 </div>268 <div class="right">269 <span>View quote</span>270 <svg viewBox="0 0 24 24" width="28" height="28">271 <path d="M10 6l6 6-6 6" stroke="#fff" stroke-width="2" fill="none"/>272 </svg>273 </div>274 </div>275 </div>276 277 <div class="card">278 <div class="row">279 <div class="flag">[IMG: US Flag]</div>280 <div class="code">USD</div>281 <div class="value">$ 1,056.07</div>282 <div class="dots">283 <span></span><span></span><span></span>284 </div>285 </div>286 <div class="subtext">1 EUR = 1.0552 USD</div>287 </div>288 289 <div class="card">290 <div class="row">291 <div class="flag">[IMG: UK Flag]</div>292 <div class="code">GBP</div>293 <div class="value">£ 873.29</div>294 <div class="dots">295 <span></span><span></span><span></span>296 </div>297 </div>298 <div class="subtext">1 EUR = 0.8726 GBP</div>299 </div>300 301 <div class="actions-row">302 <div class="add-currency">303 <svg viewBox="0 0 24 24" width="36" height="36">304 <path fill="#0B6FF2" d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/>305 </svg>306 Add currency307 </div>308 <div class="info-text">309 Mid-market rates310 <svg viewBox="0 0 24 24">311 <circle cx="12" cy="12" r="10" stroke="#7A8B99" stroke-width="2" fill="none"/>312 <path d="M12 7.5h.01" stroke="#7A8B99" stroke-width="3"/>313 <path d="M11 11h2v6h-2z" fill="#7A8B99"/>314 </svg>315 </div>316 </div>317 318 <div class="spacer"></div>319 320 <div class="bottom-nav">321 <div class="tab">322 <div class="icon">323 <svg viewBox="0 0 24 24" width="36" height="36">324 <circle cx="12" cy="12" r="10" stroke="#0B6FF2" stroke-width="2" fill="none"/>325 <path d="M7 12h6a2 2 0 0 0 0-4H9" stroke="currentColor" stroke-width="2" fill="none"/>326 <path d="M13 12H9a2 2 0 0 0 0 4h4" stroke="currentColor" stroke-width="2" fill="none"/>327 </svg>328 </div>329 <div class="label">Convert</div>330 </div>331 332 <div class="tab">333 <div class="icon">334 <svg viewBox="0 0 24 24" width="36" height="36">335 <path d="M4 16h3v4H4v-4zm5-6h3v10H9V10zm5-4h3v14h-3V6z" fill="#7A8B99"/>336 </svg>337 </div>338 <div class="label">Charts</div>339 </div>340 341 <div class="tab active">342 <div class="icon">343 <svg viewBox="0 0 24 24" width="30" height="30">344 <path d="M2 12l19-9-9 19-2-8-8-2z" fill="#FFFFFF"/>345 </svg>346 </div>347 <div class="label">Send</div>348 </div>349 350 <div class="tab">351 <div class="icon">352 <svg viewBox="0 0 24 24" width="36" height="36">353 <path d="M12 2C8 2 5 5 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-4-3-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="#7A8B99"/>354 </svg>355 </div>356 <div class="label">Track</div>357 </div>358 359 <div class="tab">360 <div class="icon">361 <svg viewBox="0 0 24 24" width="36" height="36">362 <path d="M12 22a3 3 0 0 0 3-3H9a3 3 0 0 0 3 3zm6-7V9a6 6 0 1 0-12 0v6L4 17v2h16v-2l-2-2z" fill="#7A8B99"/>363 </svg>364 </div>365 <div class="label">Rate Alerts</div>366 </div>367 </div>368 369 <div class="home-indicator-area">370 <div class="home-indicator"></div>371 </div>372 373</div>374</body>375</html>