GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Convert Screen Mock</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", sans-serif; color:#111; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#ffffff;11 }12 13 /* Top system status bar */14 .status-bar {15 position:absolute; top:0; left:0; width:100%; height:120px; background:#000;16 color:#fff; font-size:44px; line-height:120px; padding:0 36px; box-sizing:border-box;17 display:flex; align-items:center; justify-content:space-between;18 }19 .status-left { display:flex; align-items:center; gap:24px; }20 .status-icons { display:flex; align-items:center; gap:18px; opacity:0.85; }21 .status-dot { width:14px; height:14px; background:#fff; border-radius:50%; opacity:0.8; }22 .status-right { display:flex; align-items:center; gap:16px; }23 .pill-battery { width:42px; height:22px; border:2px solid #fff; border-radius:6px; position:relative; }24 .pill-battery::after { content:""; position:absolute; right:-8px; top:6px; width:6px; height:10px; background:#fff; border-radius:1px; }25 .battery-fill { position:absolute; left:3px; top:3px; width:28px; height:14px; background:#fff; }26 27 /* Header */28 .header {29 position:absolute; top:120px; left:0; width:100%; height:170px; background:#fff;30 border-bottom:1px solid #eaeaea;31 display:flex; align-items:center; justify-content:center;32 }33 .header .title { font-size:56px; font-weight:600; color:#222; }34 .header .left, .header .right { position:absolute; top:50%; transform:translateY(-50%); }35 .header .left { left:32px; }36 .header .right { right:32px; }37 .avatar {38 width:80px; height:80px; border-radius:40px; border:2px solid #ddd; display:flex;39 align-items:center; justify-content:center; color:#8a8a8a; font-size:40px;40 background:#f5f5f7;41 }42 .gift-pill {43 display:flex; align-items:center; gap:18px; background:#f0f6ff; color:#1a73e8;44 border:1px solid #cfe1ff; border-radius:22px; padding:18px 26px; font-size:40px; font-weight:600;45 }46 .gift-pill svg { width:44px; height:44px; }47 48 /* Content area */49 .content { position:absolute; top:290px; left:0; right:0; bottom:190px; padding:32px; box-sizing:border-box; background:#fff; }50 .info-row {51 display:flex; align-items:center; gap:22px; color:#7a8794; font-size:36px; margin-bottom:22px;52 }53 .progress-circle {54 width:70px; height:70px; border-radius:35px; border:6px solid #1a73e8; display:flex; align-items:center; justify-content:center;55 color:#1a73e8; font-weight:700; background:#ffffff;56 }57 58 /* Primary card */59 .card {60 background:#fff; border:2px solid #cfe1ff; border-radius:28px; box-shadow:0 8px 30px rgba(0,0,0,0.06);61 margin:16px 0; overflow:hidden;62 }63 .card .row {64 display:flex; align-items:center; justify-content:space-between; padding:28px; font-size:44px;65 }66 .currency-left { display:flex; align-items:center; gap:22px; }67 .flag {68 width:72px; height:72px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; justify-content:center; align-items:center; color:#757575; font-size:26px; border-radius:12px;69 }70 .dropdown {71 display:inline-flex; align-items:center; gap:16px; color:#222; font-weight:600;72 }73 .dropdown svg { width:28px; height:28px; }74 .amount { font-weight:700; color:#111; }75 .divider {76 width:2px; align-self:stretch; background:#d9e5ff; margin:0 0 0 0;77 }78 .square-btn {79 width:86px; height:86px; border-left:2px solid #d9e5ff; display:flex; align-items:center; justify-content:center;80 }81 .square-btn svg { width:44px; height:44px; stroke:#7a8794; }82 83 .cta-bar {84 background:#0d63f3; color:#fff; display:flex; align-items:center; justify-content:space-between; padding:30px 32px;85 font-size:44px; font-weight:700;86 }87 .cta-left { display:flex; align-items:center; gap:18px; }88 .cta-left svg { width:44px; height:44px; fill:#fff; }89 .cta-right { display:flex; align-items:center; gap:16px; }90 .cta-right svg { width:34px; height:34px; fill:#fff; }91 92 /* Secondary card */93 .card-secondary {94 background:#fff; border:2px solid #e8eef7; border-radius:26px; box-shadow:0 10px 30px rgba(0,0,0,0.05); margin-top:24px; overflow:hidden;95 }96 .subtext { color:#7a8794; font-size:34px; padding:0 28px 28px; }97 98 .menu-dots svg { width:40px; height:40px; }99 100 /* Add currency row */101 .below-row {102 margin-top:24px; display:flex; align-items:center; justify-content:space-between; padding:16px 4px;103 }104 .add-currency {105 display:flex; align-items:center; gap:18px; background:#f3f8ff; border:1px solid #dae7ff; color:#1a73e8;106 font-size:42px; padding:24px 28px; border-radius:20px; font-weight:600;107 }108 .add-currency svg { width:42px; height:42px; }109 .rates-info { display:flex; align-items:center; gap:16px; color:#7a8794; font-size:38px; }110 .info-icon {111 width:38px; height:38px; border-radius:19px; border:2px solid #9aa3ad; display:flex; align-items:center; justify-content:center; color:#9aa3ad; font-weight:700; font-size:28px;112 }113 114 /* Bottom nav */115 .bottom-nav {116 position:absolute; bottom:0; left:0; width:100%; height:180px; background:#fff; border-top:1px solid #eaeaea;117 display:flex; align-items:center; justify-content:space-around;118 }119 .nav-item { display:flex; flex-direction:column; align-items:center; gap:10px; font-size:34px; color:#8a8a8a; }120 .nav-item.active { color:#1a73e8; font-weight:600; }121 .nav-icon {122 width:80px; height:80px; border-radius:40px; display:flex; align-items:center; justify-content:center; border:2px solid #d9d9d9; color:#7a8794;123 }124 .nav-item.active .nav-icon { border-color:#1a73e8; color:#1a73e8; }125 .send .nav-icon { background:#0d63f3; border:none; color:#fff; }126 127 /* Gesture / home indicator */128 .home-indicator {129 position:absolute; bottom:186px; left:50%; transform:translateX(-50%);130 width:300px; height:14px; border-radius:10px; background:#cfcfcf; opacity:0.9;131 }132</style>133</head>134<body>135<div id="render-target">136 137 <!-- Android status bar -->138 <div class="status-bar">139 <div class="status-left">140 <div>8:28</div>141 <div class="status-icons">142 <div class="status-dot"></div>143 <div class="status-dot"></div>144 <div class="status-dot"></div>145 </div>146 </div>147 <div class="status-right">148 <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="5"/><path d="M12 1v3M12 20v3M1 12h3M20 12h3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M19.8 4.2l-2.1 2.1M4.2 19.8l2.1-2.1" stroke="#fff" stroke-width="2" fill="none"/></svg>149 <div class="pill-battery"><div class="battery-fill"></div></div>150 </div>151 </div>152 153 <!-- Header -->154 <div class="header">155 <div class="left">156 <div class="avatar">🧑</div>157 </div>158 <div class="title">Convert</div>159 <div class="right">160 <div class="gift-pill">161 <svg viewBox="0 0 24 24">162 <path d="M3 9h18v12H3z" fill="none" stroke="#1a73e8" stroke-width="2"/>163 <path d="M12 9v12" stroke="#1a73e8" stroke-width="2"/>164 <path d="M3 9h18l-2-4H5l-2 4z" fill="none" stroke="#1a73e8" stroke-width="2"/>165 </svg>166 €25167 </div>168 </div>169 </div>170 171 <!-- Content -->172 <div class="content">173 <div class="info-row">174 <div class="progress-circle">14</div>175 <div>Last updated: 08 Nov 2023 08:27</div>176 </div>177 178 <!-- Primary card: CAD -->179 <div class="card">180 <div class="row">181 <div class="currency-left">182 <div class="flag">[IMG: Canada flag]</div>183 <div class="dropdown">CAD184 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#7a8794" stroke-width="2" fill="none" stroke-linecap="round"/></svg>185 </div>186 </div>187 <div class="amount">$ 1,000.00</div>188 <div class="square-btn">189 <svg viewBox="0 0 24 24" fill="none">190 <rect x="3" y="3" width="18" height="18" stroke="#7a8794" stroke-width="2"/>191 <path d="M8 7h8M8 12h8M8 17h8" stroke="#7a8794" stroke-width="2"/>192 </svg>193 </div>194 </div>195 <div class="cta-bar">196 <div class="cta-left">197 <svg viewBox="0 0 24 24"><path d="M2 12l20-9-7 9 7 9-20-9z"/></svg>198 <div>Send CAD to AUD</div>199 </div>200 <div class="cta-right">201 <div>View quote</div>202 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>203 </div>204 </div>205 </div>206 207 <!-- Secondary card: AUD -->208 <div class="card-secondary">209 <div class="row">210 <div class="currency-left">211 <div class="flag">[IMG: Australia flag]</div>212 <div class="dropdown" style="gap:0">AUD</div>213 </div>214 <div class="amount">$ 1,128.26</div>215 <div class="menu-dots">216 <svg viewBox="0 0 24 24" fill="#7a8794">217 <circle cx="12" cy="5" r="2.2"/><circle cx="12" cy="12" r="2.2"/><circle cx="12" cy="19" r="2.2"/>218 </svg>219 </div>220 </div>221 <div class="subtext">1 CAD = 1.1283 AUD</div>222 </div>223 224 <!-- Add currency & info -->225 <div class="below-row">226 <div class="add-currency">227 <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" stroke="#1a73e8" stroke-width="2" stroke-linecap="round"/></svg>228 <div>Add currency</div>229 </div>230 <div class="rates-info">231 <div>Mid-market rates</div>232 <div class="info-icon">i</div>233 </div>234 </div>235 </div>236 237 <!-- Bottom navigation -->238 <div class="bottom-nav">239 <div class="nav-item active">240 <div class="nav-icon">241 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">242 <circle cx="12" cy="12" r="9" stroke="#1a73e8" stroke-width="2"/>243 <path d="M12 6v6l4 2" stroke="#1a73e8" stroke-width="2" stroke-linecap="round"/>244 </svg>245 </div>246 <div>Convert</div>247 </div>248 <div class="nav-item">249 <div class="nav-icon">250 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">251 <path d="M3 18l6-6 4 4 8-8" stroke="#7a8794" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>252 </svg>253 </div>254 <div>Charts</div>255 </div>256 <div class="nav-item send">257 <div class="nav-icon">258 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">259 <path d="M2 12l20-9-7 9 7 9-20-9z"/>260 </svg>261 </div>262 <div>Send</div>263 </div>264 <div class="nav-item">265 <div class="nav-icon">266 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">267 <path d="M12 21s-6-7-6-11a6 6 0 1112 0c0 4-6 11-6 11z" stroke="#7a8794" stroke-width="2"/>268 </svg>269 </div>270 <div>Track</div>271 </div>272 <div class="nav-item">273 <div class="nav-icon">274 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">275 <path d="M6 8h12v10a2 2 0 01-2 2H8a2 2 0 01-2-2V8z" stroke="#7a8794" stroke-width="2"/>276 <path d="M12 3v5" stroke="#7a8794" stroke-width="2"/>277 </svg>278 </div>279 <div>Rate Alerts</div>280 </div>281 </div>282 283 <div class="home-indicator"></div>284</div>285</body>286</html>