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</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: #ffffff; border-radius: 0;12 }13 14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; width: 1080px; height: 110px;17 background: #000; color: #fff; display: flex; align-items: center; padding: 0 30px;18 box-sizing: border-box; font-size: 34px;19 }20 .status-icons { margin-left: auto; display: flex; align-items: center; gap: 28px; opacity: 0.95; }21 .status-icons svg { width: 34px; height: 34px; fill: #fff; }22 23 /* App bar */24 .app-bar {25 position: absolute; top: 110px; left: 0; width: 1080px; height: 170px;26 background: #fff; border-bottom: 1px solid #e9edf3; display: flex; align-items: center;27 padding: 0 36px; box-sizing: border-box;28 }29 .title { font-size: 46px; font-weight: 600; color: #222; margin: 0 auto; }30 .avatar {31 width: 72px; height: 72px; border-radius: 50%; border: 1px solid #dcdcdc; display: flex; align-items: center; justify-content: center; color: #9aa2ad;32 margin-right: 12px;33 }34 .avatar svg { width: 40px; height: 40px; stroke: #9aa2ad; }35 36 .gift-pill {37 position: absolute; right: 36px; top: 32px;38 display: flex; align-items: center; gap: 16px;39 background: #f5f9ff; color: #1677ff; border: 1px solid #d9e7ff;40 padding: 18px 26px; border-radius: 20px; font-weight: 600; font-size: 34px;41 }42 .gift-pill svg { width: 38px; height: 38px; fill: none; stroke: #1677ff; stroke-width: 3; }43 44 /* Content area */45 .content { position: absolute; top: 280px; left: 0; width: 100%; padding: 0 40px; box-sizing: border-box; }46 47 /* Update row */48 .update-row { display: flex; align-items: center; gap: 24px; padding: 30px 16px; color: #7d8790; }49 .badge {50 width: 66px; height: 66px; border-radius: 50%; border: 2px solid #e0e4ea; display: flex; align-items: center; justify-content: center;51 font-weight: 700; color: #8892a0; font-size: 30px; background: #f7f8fa;52 }53 .update-text { font-size: 32px; }54 55 /* Card common */56 .card { border-radius: 24px; overflow: hidden; margin: 18px 0; }57 .row { display: flex; align-items: center; }58 59 /* EUR card */60 .eur-card { border: 2px solid #1e73f9; }61 .eur-top { height: 170px; padding: 0 26px; box-sizing: border-box; display: flex; align-items: center; }62 .flag { width: 70px; height: 70px; border-radius: 50%; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px; }63 .currency-label { font-size: 42px; font-weight: 600; color: #222; margin-left: 22px; display: flex; align-items: center; gap: 16px; }64 .currency-label svg { width: 28px; height: 28px; stroke: #7d8790; }65 .amount { margin-left: auto; font-size: 52px; font-weight: 700; color: #000; }66 .side-tool { width: 110px; height: 170px; border-left: 1px solid #e5eaf1; display: flex; align-items: center; justify-content: center; }67 .side-tool svg { width: 44px; height: 44px; stroke: #8ea0b3; }68 69 .eur-bottom { background: #0a67f5; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 26px; height: 120px; }70 .eur-bottom .left { display: flex; align-items: center; gap: 16px; font-size: 36px; font-weight: 600; }71 .eur-bottom .right { display: flex; align-items: center; gap: 12px; font-size: 34px; font-weight: 700; }72 73 /* AUD card */74 .aud-card { background: #fff; border: 1px solid #e6eaef; box-shadow: 0 8px 24px rgba(0,0,0,0.07); }75 .aud-top { height: 140px; padding: 0 26px; box-sizing: border-box; }76 .aud-amount { margin-left: auto; font-size: 48px; font-weight: 700; color: #000; }77 .aud-side { width: 100px; height: 140px; border-left: 1px solid #e8edf3; display: flex; align-items: center; justify-content: center; }78 .aud-side svg { width: 28px; height: 60px; fill: #9099a8; }79 .rate { padding: 0 26px 26px 140px; color: #7d8790; font-size: 30px; }80 81 /* Add currency row */82 .actions { display: flex; align-items: center; justify-content: space-between; padding: 24px 12px; }83 .add-pill {84 background: #eef5ff; border: 1px solid #dce9ff; color: #1677ff; border-radius: 18px;85 padding: 28px 32px; font-size: 36px; font-weight: 600; display: inline-flex; align-items: center; gap: 18px;86 }87 .add-pill svg { width: 38px; height: 38px; stroke: #1677ff; stroke-width: 3; }88 .mid-market { color: #7d8790; font-size: 32px; display: flex; align-items: center; gap: 12px; }89 .mid-market .info {90 width: 34px; height: 34px; border-radius: 50%; border: 1px solid #bfc8d3; color: #7d8790; display: inline-flex; align-items: center; justify-content: center; font-size: 26px;91 }92 93 /* Bottom nav */94 .bottom-nav {95 position: absolute; bottom: 0; left: 0; width: 1080px; height: 220px; background: #fff;96 border-top: 1px solid #e9edf3; display: flex; align-items: center; justify-content: space-around;97 padding-bottom: 40px; box-sizing: border-box;98 }99 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #8a94a3; font-size: 28px; }100 .nav-item svg { width: 64px; height: 64px; }101 .nav-item.active { color: #1677ff; }102 .nav-item.active svg path, .nav-item.active svg circle { stroke: #1677ff; fill: none; }103 .send-highlight {104 width: 92px; height: 92px; background: #0a67f5; border-radius: 50%; display: flex; align-items: center; justify-content: center;105 }106 .send-highlight svg { width: 54px; height: 54px; stroke: #fff; }107 108 .home-indicator {109 position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);110 width: 300px; height: 12px; background: #d1d6de; border-radius: 8px;111 }112</style>113</head>114<body>115<div id="render-target">116 117 <!-- Status Bar -->118 <div class="status-bar">119 <div>8:29</div>120 <div class="status-icons">121 <!-- Simple icons to mimic system status -->122 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/></svg>123 <svg viewBox="0 0 24 24"><path d="M12 2v8l4 4" stroke="#fff" fill="none" stroke-width="2"/></svg>124 <svg viewBox="0 0 24 24"><path d="M2 12h20" stroke="#fff" fill="none" stroke-width="2"/></svg>125 <svg viewBox="0 0 24 24"><circle cx="12" cy="4" r="2"/><path d="M12 6v14" stroke="#fff" fill="none" stroke-width="2"/></svg>126 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"/></svg>127 <svg viewBox="0 0 24 24"><path d="M3 7h18v10" stroke="#fff" fill="none" stroke-width="2"/></svg>128 </div>129 </div>130 131 <!-- App Bar -->132 <div class="app-bar">133 <div class="avatar">134 <svg viewBox="0 0 24 24">135 <circle cx="12" cy="8" r="4" fill="none" stroke-width="2"/>136 <path d="M4 20c2-4 14-4 16 0" fill="none" stroke-width="2"/>137 </svg>138 </div>139 <div class="title">Convert</div>140 <div class="gift-pill">141 <svg viewBox="0 0 24 24">142 <rect x="3" y="9" width="18" height="12" rx="2"></rect>143 <path d="M12 9v12M3 9h18M8 6c0 2 4 2 4 0s-4-2-4 0zm8 0c0 2-4 2-4 0s4-2 4 0z"></path>144 </svg>145 <span>€25</span>146 </div>147 </div>148 149 <div class="content">150 151 <!-- Update row -->152 <div class="update-row">153 <div class="badge">59</div>154 <div class="update-text">Last updated: 08 Nov 2023 08:29</div>155 </div>156 157 <!-- EUR card -->158 <div class="card eur-card">159 <div class="eur-top">160 <div class="flag">[IMG: EU flag]</div>161 <div class="currency-label">162 <span>EUR</span>163 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke-width="2"/></svg>164 </div>165 <div class="amount">€ 1,000.00</div>166 <div class="side-tool">167 <!-- Calculator icon -->168 <svg viewBox="0 0 24 24" fill="none">169 <rect x="3" y="3" width="18" height="18" rx="2" stroke-width="2"></rect>170 <path d="M7 9h10M7 13h4M13 13h4M7 17h10" stroke-width="2"></path>171 </svg>172 </div>173 </div>174 <div class="eur-bottom">175 <div class="left">176 <!-- Send paper plane icon -->177 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">178 <path d="M3 20l18-8L3 4l5 8-5 8z"></path>179 </svg>180 <span>Send EUR to AUD</span>181 </div>182 <div class="right">183 <span>View quote</span>184 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M9 6l6 6-6 6"/></svg>185 </div>186 </div>187 </div>188 189 <!-- AUD card -->190 <div class="card aud-card">191 <div class="row aud-top">192 <div class="flag">[IMG: AU flag]</div>193 <div class="currency-label" style="margin-left:22px;">194 <span>AUD</span>195 </div>196 <div class="aud-amount">$ 1,659.96</div>197 <div class="aud-side">198 <!-- Vertical ellipsis -->199 <svg viewBox="0 0 8 24">200 <circle cx="4" cy="4" r="2"></circle>201 <circle cx="4" cy="12" r="2"></circle>202 <circle cx="4" cy="20" r="2"></circle>203 </svg>204 </div>205 </div>206 <div class="rate">1 EUR = 1.6600 AUD</div>207 </div>208 209 <!-- Actions -->210 <div class="actions">211 <div class="add-pill">212 <svg viewBox="0 0 24 24" fill="none">213 <path d="M12 5v14M5 12h14" />214 </svg>215 <span>Add currency</span>216 </div>217 <div class="mid-market">218 <span>Mid-market rates</span>219 <span class="info">i</span>220 </div>221 </div>222 223 </div>224 225 <!-- Bottom Navigation -->226 <div class="bottom-nav">227 <div class="nav-item active">228 <!-- Convert icon: coin circle with $ -->229 <svg viewBox="0 0 24 24" fill="none" stroke="#1677ff" stroke-width="2">230 <circle cx="12" cy="12" r="9"></circle>231 <path d="M12 7v10M9 10h6M9 14h6"></path>232 </svg>233 <div>Convert</div>234 </div>235 <div class="nav-item">236 <!-- Charts icon -->237 <svg viewBox="0 0 24 24" fill="none" stroke="#8a94a3" stroke-width="2">238 <path d="M4 18h16M7 18V9M12 18V6M17 18v-4"></path>239 </svg>240 <div>Charts</div>241 </div>242 <div class="nav-item">243 <div class="send-highlight">244 <!-- Send paper plane -->245 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">246 <path d="M3 20l18-8L3 4l5 8-5 8z"></path>247 </svg>248 </div>249 <div style="color:#4a4f56;">Send</div>250 </div>251 <div class="nav-item">252 <!-- Track icon -->253 <svg viewBox="0 0 24 24" fill="none" stroke="#8a94a3" stroke-width="2">254 <path d="M12 21s-6-7-6-11a6 6 0 1 1 12 0c0 4-6 11-6 11z"></path>255 <circle cx="12" cy="10" r="2"></circle>256 </svg>257 <div>Track</div>258 </div>259 <div class="nav-item">260 <!-- Bell icon -->261 <svg viewBox="0 0 24 24" fill="none" stroke="#8a94a3" stroke-width="2">262 <path d="M6 8a6 6 0 0 1 12 0v5l2 3H4l2-3V8"></path>263 <path d="M9 19a3 3 0 0 0 6 0"></path>264 </svg>265 <div>Rate Alerts</div>266 </div>267 <div class="home-indicator"></div>268 </div>269 270</div>271</body>272</html>