GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Currency Plus UI</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background: linear-gradient(#6f7478, #8b8f93);11 }12 13 /* Top status bar */14 .status-bar {15 position:absolute; top:0; left:0; width:100%; height:90px;16 background:#5d5f63; color:#fff; padding:0 24px; display:flex; align-items:center; justify-content:space-between;17 font-size:28px;18 }19 .status-left, .status-right { display:flex; align-items:center; gap:18px; }20 .dot { width:10px; height:10px; background:#fff; border-radius:50%; opacity:0.8; }21 .battery {22 width:40px; height:22px; border:3px solid #fff; border-radius:4px; position:relative;23 }24 .battery::after { content:""; position:absolute; right:-8px; top:5px; width:6px; height:12px; background:#fff; border-radius:2px; }25 .battery .level { position:absolute; left:3px; top:3px; height:14px; width:26px; background:#fff; }26 27 /* App bar with brushed metal feel */28 .app-bar {29 position:absolute; top:90px; left:0; width:100%; height:150px;30 background:31 repeating-linear-gradient(90deg, rgba(255,255,255,0.35) 0, rgba(255,255,255,0.35) 6px, rgba(0,0,0,0.04) 6px, rgba(0,0,0,0.04) 12px),32 linear-gradient(#d9d9d9, #bfbfbf);33 box-shadow: 0 2px 0 rgba(0,0,0,0.35);34 display:flex; align-items:center; justify-content:space-between; padding:0 28px;35 }36 .title { font-weight:700; letter-spacing:2px; color:#1d1f22; font-size:46px; }37 .title span { font-weight:800; }38 .icon-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; }39 40 /* Updated label */41 .updated {42 position:absolute; top:240px; left:0; width:100%; height:70px;43 background:#cfcfcf; color:#333; font-size:32px; display:flex; align-items:center; justify-content:center;44 box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2);45 }46 47 /* Currency list */48 .rates {49 position:absolute; top:310px; left:0; width:100%;50 }51 .rate-row {52 height:160px; display:flex; align-items:center; padding:0 28px; gap:24px;53 border-bottom: 2px solid rgba(0,0,0,0.2);54 }55 .rate-row.base { background:#3d474c; color:#fff; }56 .rate-row.alt {57 background: linear-gradient(#b9c9d3, #a9bcc8);58 color:#222;59 }60 .flag {61 width:150px; height:100px; background:#E0E0E0; border:1px solid #BDBDBD;62 display:flex; justify-content:center; align-items:center; color:#757575; font-size:28px; border-radius:8px;63 }64 .code { font-size:54px; font-weight:700; min-width:140px; }65 .dropdown { width:40px; height:40px; display:flex; align-items:center; justify-content:center; }66 .value-box {67 flex:1; height:100px; border-radius:16px; display:flex; align-items:center; justify-content:flex-end;68 padding:0 26px; font-size:46px; font-weight:600; box-shadow: 0 3px 0 rgba(0,0,0,0.25);69 border:1px solid rgba(0,0,0,0.2);70 }71 .base .value-box { background:#a7d3e2; color:#0e2b35; border-color:#85b6c3; box-shadow: 0 4px 0 rgba(0,0,0,0.35); }72 .alt .value-box { background:#e5e5e5; color:#2b2b2b; }73 .chart { width:70px; height:70px; display:flex; align-items:center; justify-content:center; color:#6d6f71; }74 75 /* Keypad panel */76 .keypad {77 position:absolute; left:0; width:100%; height:900px; bottom:290px;78 background:79 repeating-linear-gradient(90deg, rgba(255,255,255,0.35) 0, rgba(255,255,255,0.35) 6px, rgba(0,0,0,0.04) 6px, rgba(0,0,0,0.04) 12px),80 linear-gradient(#d7d7d7, #bababa);81 padding:28px;82 box-shadow: 0 -3px 0 rgba(0,0,0,0.35);83 }84 .keys {85 width:100%; height:100%;86 display:grid;87 grid-template-columns: repeat(4, 1fr);88 grid-auto-rows: 180px;89 gap:24px;90 }91 .key {92 border-radius:26px;93 background: linear-gradient(#d0d0cc, #a9a9a5);94 box-shadow: inset 0 8px 0 rgba(255,255,255,0.6), inset 0 -10px 0 rgba(0,0,0,0.25);95 display:flex; align-items:center; justify-content:center;96 color:#151515; font-size:78px; font-weight:700;97 }98 .key.soft { font-size:66px; }99 .key.special-red { background: linear-gradient(#e59e9e, #cd6e6e); color:#222; }100 .key.special-blue { background: linear-gradient(#b8c8da, #8aa1b8); }101 .key.special-orange { background: linear-gradient(#f3b16b, #e38a3e); }102 .key svg { width:84px; height:84px; }103 104 /* Bottom safe area */105 .bottom-black {106 position:absolute; left:0; bottom:0; width:100%; height:290px; background:#0b0b0b;107 }108 .home-indicator {109 position:absolute; bottom:26px; left:50%; width:360px; height:14px; border-radius:7px; background:#d7d7d7; transform:translateX(-50%);110 opacity:0.85;111 }112</style>113</head>114<body>115<div id="render-target">116 117 <!-- Status bar -->118 <div class="status-bar">119 <div class="status-left">120 <span>11:02</span>121 <div class="dot"></div><div class="dot"></div><div class="dot"></div>122 </div>123 <div class="status-right">124 <div class="dot"></div>125 <div class="battery"><div class="level"></div></div>126 </div>127 </div>128 129 <!-- App bar -->130 <div class="app-bar">131 <div class="icon-btn">132 <svg viewBox="0 0 24 24">133 <rect x="3" y="5" width="18" height="2" fill="#222"></rect>134 <rect x="3" y="11" width="18" height="2" fill="#222"></rect>135 <rect x="3" y="17" width="18" height="2" fill="#222"></rect>136 </svg>137 </div>138 <div class="title">CURRENCY <span>PLUS</span></div>139 <div class="icon-btn">140 <svg viewBox="0 0 24 24">141 <circle cx="10" cy="10" r="7" stroke="#222" stroke-width="2" fill="none"></circle>142 <line x1="15" y1="15" x2="21" y2="21" stroke="#222" stroke-width="2"></line>143 </svg>144 </div>145 </div>146 147 <div class="updated">Updated: 10:42, AM Nov 17, 2023</div>148 149 <!-- Currency list -->150 <div class="rates">151 152 <!-- Base GBP -->153 <div class="rate-row base">154 <div class="flag">[IMG: UK Flag]</div>155 <div class="code">GBP</div>156 <div class="dropdown">157 <svg viewBox="0 0 24 24">158 <path d="M6 9l6 6 6-6" fill="none" stroke="#ddd" stroke-width="2"></path>159 </svg>160 </div>161 <div class="value-box">500</div>162 <div class="chart">163 <svg viewBox="0 0 24 24">164 <path d="M3 18h18M5 15l4-4 4 3 6-6" stroke="#cfd3d6" stroke-width="2" fill="none"></path>165 </svg>166 </div>167 </div>168 169 <div class="rate-row alt">170 <div class="flag">[IMG: Japan Flag]</div>171 <div class="code">JPY</div>172 <div class="dropdown">173 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#555" stroke-width="2"></path></svg>174 </div>175 <div class="value-box">93,422.39</div>176 <div class="chart">177 <svg viewBox="0 0 24 24"><path d="M3 18h18M5 15l4-4 4 3 6-6" stroke="#6a6e70" stroke-width="2" fill="none"></path></svg>178 </div>179 </div>180 181 <div class="rate-row alt">182 <div class="flag">[IMG: Australia Flag]</div>183 <div class="code">AUD</div>184 <div class="dropdown">185 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#555" stroke-width="2"></path></svg>186 </div>187 <div class="value-box">959.21</div>188 <div class="chart">189 <svg viewBox="0 0 24 24"><path d="M3 18h18M5 15l4-4 4 3 6-6" stroke="#6a6e70" stroke-width="2" fill="none"></path></svg>190 </div>191 </div>192 193 <div class="rate-row alt">194 <div class="flag">[IMG: EU Flag]</div>195 <div class="code">EUR</div>196 <div class="dropdown">197 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#555" stroke-width="2"></path></svg>198 </div>199 <div class="value-box">571.59</div>200 <div class="chart">201 <svg viewBox="0 0 24 24"><path d="M3 18h18M5 15l4-4 4 3 6-6" stroke="#6a6e70" stroke-width="2" fill="none"></path></svg>202 </div>203 </div>204 205 <div class="rate-row alt">206 <div class="flag">[IMG: China Flag]</div>207 <div class="code">CNY</div>208 <div class="dropdown">209 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#555" stroke-width="2"></path></svg>210 </div>211 <div class="value-box">4,494.091</div>212 <div class="chart">213 <svg viewBox="0 0 24 24"><path d="M3 18h18M5 15l4-4 4 3 6-6" stroke="#6a6e70" stroke-width="2" fill="none"></path></svg>214 </div>215 </div>216 217 <div class="rate-row alt">218 <div class="flag">[IMG: Pakistan Flag]</div>219 <div class="code">PKR</div>220 <div class="dropdown">221 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#555" stroke-width="2"></path></svg>222 </div>223 <div class="value-box">178,145.78</div>224 <div class="chart">225 <svg viewBox="0 0 24 24"><path d="M3 18h18M5 15l4-4 4 3 6-6" stroke="#6a6e70" stroke-width="2" fill="none"></path></svg>226 </div>227 </div>228 229 <div class="rate-row alt">230 <div class="flag">[IMG: Bangladesh Flag]</div>231 <div class="code">BDT</div>232 <div class="dropdown">233 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#555" stroke-width="2"></path></svg>234 </div>235 <div class="value-box">68,696.4</div>236 <div class="chart">237 <svg viewBox="0 0 24 24"><path d="M3 18h18M5 15l4-4 4 3 6-6" stroke="#6a6e70" stroke-width="2" fill="none"></path></svg>238 </div>239 </div>240 </div>241 242 <!-- Keypad -->243 <div class="keypad">244 <div class="keys">245 <!-- Row 1 -->246 <div class="key special-red">C</div>247 <div class="key">7</div>248 <div class="key">8</div>249 <div class="key">9</div>250 251 <!-- Row 2 -->252 <div class="key special-blue">253 <svg viewBox="0 0 24 24">254 <path d="M12 5a7 7 0 1 1-6.6 9" fill="none" stroke="#1d2b38" stroke-width="2"></path>255 <path d="M6 6v5h5" fill="none" stroke="#1d2b38" stroke-width="2"></path>256 </svg>257 </div>258 <div class="key">4</div>259 <div class="key">5</div>260 <div class="key">6</div>261 262 <!-- Row 3 -->263 <div class="key special-orange">264 <svg viewBox="0 0 24 24">265 <rect x="3" y="4" width="18" height="16" rx="2" ry="2" stroke="#1d2b38" stroke-width="2" fill="none"></rect>266 <line x1="3" y1="8" x2="21" y2="8" stroke="#1d2b38" stroke-width="2"></line>267 <rect x="6" y="11" width="3" height="3" fill="#1d2b38"></rect>268 <rect x="11" y="11" width="3" height="3" fill="#1d2b38"></rect>269 <rect x="16" y="11" width="3" height="3" fill="#1d2b38"></rect>270 </svg>271 </div>272 <div class="key">1</div>273 <div class="key">2</div>274 <div class="key">3</div>275 276 <!-- Row 4 -->277 <div class="key">0</div>278 <div class="key soft">.</div>279 <div class="key">280 <svg viewBox="0 0 24 24">281 <path d="M5 7l-4 5 4 5h12l3-5-3-5H5z" fill="#1d2b38"></path>282 <path d="M12 9l3 3-3 3" fill="none" stroke="#fff" stroke-width="2"></path>283 <path d="M10 12l-2 0" stroke="#fff" stroke-width="2"></path>284 </svg>285 </div>286 <div class="key" style="visibility:hidden;"></div>287 </div>288 </div>289 290 <!-- Bottom safe area -->291 <div class="bottom-black">292 <div class="home-indicator"></div>293 </div>294 295</div>296</body>297</html>