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; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #0F1216;14 font-family: Arial, Helvetica, sans-serif;15 color: #fff;16 }17 .status-bar {18 height: 120px;19 background: #000;20 color: #fff;21 display: flex;22 align-items: center;23 padding: 0 40px;24 box-sizing: border-box;25 font-size: 40px;26 letter-spacing: 1px;27 }28 .status-left { display: flex; align-items: center; gap: 24px; }29 .status-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }30 .icon-sq { width: 40px; height: 28px; border: 4px solid #bbb; border-radius: 4px; }31 .signal {32 width: 44px; height: 28px; border-right: 8px solid #bbb; border-top: 8px solid #bbb; transform: skewX(-15deg);33 }34 .battery {35 width: 60px; height: 28px; border: 4px solid #bbb; border-radius: 6px; position: relative;36 }37 .battery::after {38 content: ""; width: 10px; height: 16px; background: #bbb; position: absolute; right: -12px; top: 4px; border-radius: 2px;39 }40 41 .app-bar {42 height: 176px;43 background: #212428;44 border-bottom: 1px solid #2f3237;45 display: flex;46 align-items: center;47 padding: 0 36px;48 box-sizing: border-box;49 }50 .menu-btn { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; margin-right: 24px; }51 .menu-btn svg { fill: none; stroke: #fff; stroke-width: 12; }52 .app-title { display: flex; flex-direction: column; }53 .app-title h1 { margin: 0; font-size: 52px; letter-spacing: 1px; }54 .app-title .subtitle { margin-top: 8px; font-size: 30px; color: #b0b4bb; }55 .dots { margin-left: auto; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }56 .dots svg { fill: #c9cbd1; }57 58 .converter-panel {59 height: 540px;60 background: linear-gradient(#4b6b8c, #3f5f7c);61 border-top: 1px solid #2f3740;62 border-bottom: 1px solid #22303b;63 box-sizing: border-box;64 padding: 18px 26px;65 }66 .panel-top {67 display: flex; align-items: center; gap: 16px; color: #d8dbe1; font-size: 28px; margin-bottom: 14px;68 }69 .rows { display: flex; flex-direction: column; gap: 26px; }70 .currency-row {71 display: grid;72 grid-template-columns: 90px 1fr 120px 90px 380px;73 align-items: center;74 column-gap: 18px;75 height: 220px;76 padding: 10px 14px;77 box-sizing: border-box;78 }79 .search-ico { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }80 .code-name { display: flex; flex-direction: column; }81 .code-name .code { font-size: 54px; font-weight: bold; }82 .code-name .name { font-size: 30px; color: #cfd6dd; margin-top: 6px; }83 .flag {84 width: 120px; height: 74px; background: #E0E0E0; border: 1px solid #BDBDBD;85 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px; border-radius: 6px;86 }87 .dropdown { width: 40px; height: 40px; }88 .sync-ico { width: 64px; height: 64px; margin-left: -10px; }89 .value { text-align: right; font-size: 72px; font-weight: bold; }90 91 .actions-bar {92 height: 160px;93 display: grid;94 grid-template-columns: repeat(4, 1fr);95 background: linear-gradient(#223447, #1c2c3e);96 border-top: 1px solid #121a24;97 border-bottom: 1px solid #121a24;98 }99 .action-item {100 display: flex; flex-direction: column; align-items: center; justify-content: center;101 color: #e8ecf1; font-size: 28px; gap: 12px; border-right: 1px solid #2a3b4e;102 }103 .action-item:last-child { border-right: none; }104 .action-icon {105 width: 60px; height: 60px; border-radius: 8px; border: 1px solid #8799aa; display: flex; align-items: center; justify-content: center;106 }107 108 .keypad {109 height: 1200px;110 display: grid;111 grid-template-columns: repeat(5, 1fr);112 grid-auto-rows: 200px;113 border-top: 1px solid #121a24;114 }115 .key {116 background: #58636b;117 border: 1px solid #3a4147;118 display: flex; align-items: center; justify-content: center;119 font-size: 48px; color: #ffffff; letter-spacing: 1px;120 }121 .key.dark { background: #3e454c; }122 .key.red { background: #b9463f; }123 .key.label-left { justify-content: flex-start; padding-left: 40px; font-size: 42px; }124 .key .sub { font-size: 32px; color: #b0b8bf; margin-top: 8px; }125 .key .red-x { color: #e44646; font-weight: bold; margin-right: 16px; }126 .key .green-arrow { color: #9ad76f; margin-right: 12px; }127 128 .ad-bar {129 height: 160px;130 background: #ffffff;131 display: flex; align-items: center;132 padding: 0 24px; box-sizing: border-box;133 color: #222;134 border-top: 1px solid #cfd3d7;135 }136 .ad-icon {137 width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 24px;138 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px; margin-right: 24px;139 }140 .ad-text { flex: 1; }141 .ad-title { font-size: 40px; margin-bottom: 8px; }142 .ad-sub { font-size: 28px; color: #666; }143 .ad-actions { display: flex; align-items: center; gap: 20px; }144 .ad-pill {145 background: #2aa060; color: #fff; padding: 18px 36px; border-radius: 40px; font-size: 36px; font-weight: bold;146 }147 .ad-small { width: 36px; height: 36px; border-radius: 18px; border: 1px solid #8aa; color: #7a8; display: flex; align-items: center; justify-content: center; font-size: 24px; }148 .ad-close { width: 40px; height: 40px; color: #4aa; font-size: 40px; }149 150 .gesture {151 position: absolute; bottom: 24px; left: 50%;152 width: 300px; height: 16px; background: #cfd2d5; border-radius: 10px; transform: translateX(-50%);153 opacity: 0.6;154 }155</style>156</head>157<body>158<div id="render-target">159 160 <!-- Android status bar -->161 <div class="status-bar">162 <div class="status-left">163 <div>11:20</div>164 <div class="icon-sq"></div>165 </div>166 <div class="status-right">167 <div class="signal"></div>168 <div class="battery"></div>169 </div>170 </div>171 172 <!-- App bar -->173 <div class="app-bar">174 <div class="menu-btn">175 <svg width="70" height="70" viewBox="0 0 100 100">176 <line x1="10" y1="25" x2="90" y2="25"></line>177 <line x1="10" y1="50" x2="90" y2="50"></line>178 <line x1="10" y1="75" x2="90" y2="75"></line>179 </svg>180 </div>181 <div class="app-title">182 <h1>CURRENCY CONVERTER</h1>183 <div class="subtitle">Updated on December 14, 2023 10:48 AM</div>184 </div>185 <div class="dots">186 <svg width="28" height="70" viewBox="0 0 10 30">187 <circle cx="5" cy="5" r="3"></circle>188 <circle cx="5" cy="15" r="3"></circle>189 <circle cx="5" cy="25" r="3"></circle>190 </svg>191 </div>192 </div>193 194 <!-- Converter panel -->195 <div class="converter-panel">196 <div class="panel-top">197 <div>EN</div>198 <svg class="dropdown" viewBox="0 0 24 24">199 <path d="M6 9l6 6 6-6" fill="none" stroke="#d0d6dc" stroke-width="2"/>200 </svg>201 <svg class="sync-ico" viewBox="0 0 24 24">202 <path d="M4 12a8 8 0 0 1 13-5" fill="none" stroke="#d0d6dc" stroke-width="2"/>203 <path d="M17 3v6h6" fill="none" stroke="#d0d6dc" stroke-width="2"/>204 </svg>205 </div>206 207 <div class="rows">208 <!-- GBP row -->209 <div class="currency-row">210 <div class="search-ico">211 <svg width="64" height="64" viewBox="0 0 24 24">212 <circle cx="10" cy="10" r="7" fill="none" stroke="#ff5a54" stroke-width="2"/>213 <line x1="15" y1="15" x2="22" y2="22" stroke="#ff5a54" stroke-width="2"/>214 </svg>215 </div>216 <div class="code-name">217 <div class="code">GBP</div>218 <div class="name">British Pound Sterling</div>219 </div>220 <div class="flag">[IMG: UK Flag]</div>221 <svg class="dropdown" viewBox="0 0 24 24">222 <path d="M6 9l6 6 6-6" fill="none" stroke="#ff6d5f" stroke-width="2"/>223 </svg>224 <div class="value">2,000</div>225 </div>226 227 <!-- EUR row -->228 <div class="currency-row">229 <div class="search-ico">230 <svg width="64" height="64" viewBox="0 0 24 24">231 <circle cx="10" cy="10" r="7" fill="none" stroke="#78a5cf" stroke-width="2"/>232 <line x1="15" y1="15" x2="22" y2="22" stroke="#78a5cf" stroke-width="2"/>233 </svg>234 </div>235 <div class="code-name">236 <div class="code">EUR</div>237 <div class="name">Euro</div>238 </div>239 <div class="flag">[IMG: EU Flag]</div>240 <svg class="dropdown" viewBox="0 0 24 24">241 <path d="M6 9l6 6 6-6" fill="none" stroke="#6fb1ff" stroke-width="2"/>242 </svg>243 <div class="value">2,319.08257</div>244 </div>245 </div>246 </div>247 248 <!-- Quick actions toolbar -->249 <div class="actions-bar">250 <div class="action-item">251 <div class="action-icon">252 <svg width="40" height="40" viewBox="0 0 24 24">253 <path d="M12 3a9 9 0 1 1-6.3 2.7" fill="none" stroke="#bcd" stroke-width="2"/>254 <path d="M8 3h4v4" fill="none" stroke="#bcd" stroke-width="2"/>255 </svg>256 </div>257 <div>CURRENCY UPDATE</div>258 </div>259 <div class="action-item">260 <div class="action-icon">261 <svg width="40" height="40" viewBox="0 0 24 24">262 <rect x="3" y="12" width="4" height="8" fill="#bcd"/>263 <rect x="10" y="6" width="4" height="14" fill="#bcd"/>264 <rect x="17" y="9" width="4" height="11" fill="#bcd"/>265 </svg>266 </div>267 <div>TRENDS & CHARTS</div>268 </div>269 <div class="action-item">270 <div class="action-icon">271 <svg width="40" height="40" viewBox="0 0 24 24">272 <path d="M12 18l-6 3 1.5-6.5L3 9l6-.5L12 3l3 5.5 6 .5-4.5 5.5L18 21z" fill="#bcd"/>273 </svg>274 </div>275 <div>CURRENCY FAVORITES</div>276 </div>277 <div class="action-item">278 <div class="action-icon">279 <svg width="40" height="40" viewBox="0 0 24 24">280 <path d="M6 8a6 6 0 0 1 11-2" fill="none" stroke="#bcd" stroke-width="2"/>281 <path d="M18 4v5h5" fill="none" stroke="#bcd" stroke-width="2"/>282 </svg>283 </div>284 <div>CURRENCY ROTATE</div>285 </div>286 </div>287 288 <!-- Keypad -->289 <div class="keypad">290 <!-- Row: COPY SEND CLR DEL ÷ -->291 <div class="key label-left">COPY</div>292 <div class="key">SEND</div>293 <div class="key"><span class="red-x">✕</span>CLR</div>294 <div class="key"