GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Currency Converter Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 overflow: hidden;11 width: 1080px;12 height: 2400px;13 background: #0d0f12;14 color: #fff;15 }16 17 /* Status bar */18 .statusbar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 120px;24 background: #000;25 color: #fff;26 display: flex;27 align-items: center;28 padding: 0 36px;29 box-sizing: border-box;30 font-weight: 600;31 letter-spacing: 0.5px;32 }33 .statusbar .time { font-size: 44px; }34 .status-icons { margin-left: auto; display: flex; gap: 26px; align-items: center; }35 .status-icons svg { width: 44px; height: 44px; fill: #fff; }36 37 /* App bar */38 .appbar {39 position: absolute;40 top: 120px;41 left: 0;42 width: 1080px;43 height: 180px;44 background: #1f2429;45 box-shadow: 0 4px 0 rgba(0,0,0,0.3) inset;46 display: flex;47 align-items: center;48 padding: 0 36px;49 box-sizing: border-box;50 }51 .menu-btn, .more-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }52 .app-title-area { margin-left: 24px; }53 .app-title { font-size: 56px; font-weight: 800; letter-spacing: 1px; }54 .subtitle { font-size: 28px; color: #9aa3aa; margin-top: 6px; }55 .more-btn { margin-left: auto; }56 57 /* Converter header/rows area */58 .converter {59 position: absolute;60 top: 300px;61 left: 0;62 width: 1080px;63 height: 540px;64 background: linear-gradient(180deg, #436788 0%, #365a78 100%);65 box-sizing: border-box;66 padding: 24px 36px;67 }68 .lang-row {69 display: flex;70 align-items: center;71 gap: 20px;72 color: #d3dbe2;73 font-size: 28px;74 margin-bottom: 10px;75 }76 .lang-row svg { width: 28px; height: 28px; fill: #c7d0d8; }77 78 .currency-row {79 display: grid;80 grid-template-columns: 80px 1fr 160px;81 align-items: center;82 gap: 10px;83 padding: 26px 0;84 border-bottom: 1px solid rgba(255,255,255,0.08);85 }86 .search-ico svg { width: 64px; height: 64px; fill: #eb4b4b; }87 .row-main { display: flex; align-items: center; gap: 14px; }88 .code { font-size: 46px; font-weight: 800; }89 .flag {90 width: 60px; height: 36px; background: #E0E0E0; border: 1px solid #BDBDBD;91 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 16px; border-radius: 4px;92 }93 .row-sub {94 grid-column: 2 / 3;95 margin-left: 94px;96 margin-top: -12px;97 color: #c6d1da;98 font-size: 26px;99 }100 .row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 22px; }101 .caret {102 width: 0; height: 0;103 border-left: 14px solid transparent;104 border-right: 14px solid transparent;105 border-top: 22px solid #e25b4b;106 transform: translateY(8px);107 }108 .rotate-ico svg { width: 48px; height: 48px; fill: #cbd6de; }109 .value { font-size: 104px; font-weight: 800; color: #eaf0f6; letter-spacing: 2px; }110 111 /* Tools bar (below rows) */112 .tools {113 position: absolute;114 bottom: 0;115 left: 0;116 width: 1080px;117 height: 160px;118 display: grid;119 grid-template-columns: repeat(4, 1fr);120 background: linear-gradient(180deg, #233b52 0%, #1c3145 100%);121 border-top: 1px solid rgba(255,255,255,0.08);122 }123 .tool {124 border-right: 1px solid rgba(255,255,255,0.1);125 display: flex; flex-direction: column; align-items: center; justify-content: center;126 color: #cdd7df; font-size: 28px; text-align: center; padding: 8px;127 }128 .tool svg { width: 34px; height: 34px; fill: #cdd7df; margin-bottom: 8px; }129 .tool:nth-child(4) { border-right: none; }130 131 /* Dropdown overlay list */132 .dropdown {133 position: absolute;134 top: 430px;135 left: 80px;136 width: 480px;137 height: 1500px;138 background: #0f3650;139 color: #eaf1f6;140 box-shadow: 0 8px 24px rgba(0,0,0,0.5);141 border: 1px solid rgba(255,255,255,0.08);142 overflow: hidden;143 }144 .drop-scroll {145 position: absolute; top: 0; left: 0; right: 0; bottom: 0;146 overflow-y: auto; padding: 24px;147 }148 .drop-item {149 display: grid;150 grid-template-columns: 1fr 70px;151 gap: 12px;152 padding: 18px 8px;153 border-bottom: 1px solid rgba(255,255,255,0.07);154 }155 .drop-item .code-line { font-size: 40px; font-weight: 800; }156 .drop-item .name-line { font-size: 26px; color: #c7d0d8; margin-top: 4px; }157 .drop-flag {158 width: 60px; height: 36px; background: #E0E0E0; border: 1px solid #BDBDBD;159 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 16px; border-radius: 3px; margin-top: 8px;160 }161 162 /* Keypad grid */163 .keypad {164 position: absolute;165 top: 840px;166 left: 0;167 width: 1080px;168 height: 1170px;169 display: grid;170 grid-template-columns: repeat(4, 1fr);171 grid-auto-rows: 234px; /* 1170 / 5 rows = 234 */172 background: #2a2f34;173 }174 .key {175 border: 1px solid rgba(255,255,255,0.08);176 display: flex; align-items: center; justify-content: center;177 font-size: 96px; color: #e9eef4;178 background: #50575d;179 }180 .key.dark { background: #3a4147; }181 .key.action { background: #c4443c; color: #fff; }182 .key.smalltext { font-size: 54px; }183 .key.label { font-size: 48px; color: #c9d2db; }184 .key .sub {185 font-size: 44px; color: #c9d2db;186 }187 188 /* Ad banner */189 .ad-banner {190 position: absolute;191 bottom: 20px;192 left: 0;193 width: 1080px;194 height: 210px;195 background: #ffffff;196 color: #333;197 display: flex;198 align-items: center;199 padding: 0 24px;200 box-sizing: border-box;201 border-top: 1px solid #e0e0e0;202 }203 .ad-icon {204 width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;205 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px; border-radius: 20px;206 }207 .ad-text { margin: 0 20px; font-size: 36px; color: #2a2a2a; }208 .install-btn {209 margin-left: auto;210 background: #2ecc71;211 color: #fff;212 font-weight: 700;213 font-size: 40px;214 padding: 20px 40px;215 border-radius: 12px;216 }217 218 /* Home indicator */219 .home-indicator {220 position: absolute;221 bottom: 0;222 left: 50%;223 transform: translateX(-50%);224 width: 360px;225 height: 16px;226 background: #cfd3d6;227 border-radius: 8px;228 opacity: 0.9;229 }230</style>231</head>232<body>233<div id="render-target">234 235 <!-- Status Bar -->236 <div class="statusbar">237 <div class="time">11:17</div>238 <div class="status-icons">239 <!-- Cast screen -->240 <svg viewBox="0 0 24 24"><path d="M3 5h18v12H3v-2h16V7H3V5zM3 13v2h2c0-1.1-.9-2-2-2zm0 4v2h6c0-3.3-2.7-6-6-6v2c2.2 0 4 1.8 4 4H3z"/></svg>241 <!-- Wifi -->242 <svg viewBox="0 0 24 24"><path d="M12 18l-2-2 2-2 2 2-2 2zm-6-6l-2-2c4.4-4.4 11.6-4.4 16 0l-2 2c-3.3-3.3-8.7-3.3-12 0z"/></svg>243 <!-- Battery -->244 <svg viewBox="0 0 24 24"><path d="M16 7h2v2h-2V7zM3 8h12v8H3V8zm14 2h2v4h-2v-4z"/></svg>245 </div>246 </div>247 248 <!-- App Bar -->249 <div class="appbar">250 <div class="menu-btn">251 <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>252 </div>253 <div class="app-title-area">254 <div class="app-title">CURRENCY CONVERTER</div>255 <div class="subtitle">Updated on December 14, 2023 10:48 AM</div>256 </div>257 <div class="more-btn">258 <svg viewBox="0 0 24 24"><path d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4z"/></svg>259 </div>260 </div>261 262 <!-- Converter Area -->263 <div class="converter">264 <div class="lang-row">265 <div>EN</div>266 <svg viewBox="0 0 24 24"><path d="M7 12l5-5v3h5v4h-5v3l-5-5z"/></svg>267 <svg viewBox="0 0 24 24"><path d="M12 6a6 6 0 016 6h-2c0-2.2-1.8-4-4-4V6zm0 12a6 6 0 01-6-6h2c0 2.2 1.8 4 4 4v2z"/></svg>268 </div>269 270 <!-- Row 1 -->271 <div class="currency-row">272 <div class="search-ico">273 <svg viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3A6.5 6.5 0 1015.5 14l4.5 4.5-1.5 1.5L14 15.5l1.5-1.5zM10 15a5 5 0 110-10 5 5 0 010 10z"/></svg>274 </div>275 <div class="row-main">276 <div class="code">GBP</div>277 <div class="flag">[IMG: UK Flag]</div>278 </div>279 <div class="row-actions">280 <div class="caret"></div>281 <div class="rotate-ico">282 <svg viewBox="0 0 24 24"><path d="M12 6v4l3-3-3-3zM6 12c0 3.3 2.7 6 6 6v-2c-2.2 0-4-1.8-4-4H6z"/></svg>283 </div>284 <div class="value">0</div>285 </div>286 <div class="row-sub">British Pound Sterling</div>287 </div>288 289 <!-- Row 2 -->290 <div class="currency-row">291 <div class="search-ico">292 <svg viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3A6.5 6.5 0 1015.5 14l4.5 4.5-1.5 1.5L14 15.5l1.5-1.5zM10 15a5 5 0 110-10 5 5 0 010 10z"/></svg>293 </div>294 <div class="row-main">295 <div class="code">USD</div>296 <div class="flag">[IMG: US Flag]</div>297 </div>298 <div class="row-actions">299 <div class="caret" style="border-top-color:#5fa7db;"></div>300 <div class="rotate-ico">301 <svg viewBox="0 0 24 24"><path d="M12 6v4l3-3-3-3zM6 12c0 3.3 2.7 6 6 6v-2c-2.2 0-4-1.8-4-4H6z"/></svg>302 </div>303 <div class="value">0</div>304 </div>305 <div class="row-sub">U.S. Dollar</div>306 </div>307 308 <!-- Tools bar -->309 <div class="tools">310 <div class="tool">311 <svg viewBox="0 0 24 24"><path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"/></svg>312 <div>CURRENCIES & RATES</div>313 </div>314 <div class="tool">315 <svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 6 4 4 6.5 4c1.54 0 3.04.99 3.5 2.44C10.46 4.99 11.96 4 13.5 4 16 4 18 6 18 8.5c0 3.78-3.4 6.86-8.05 11.54L12 21.35z"/></svg>316 <div>CURRENCY FAVORITES</div>317 </div>318 <div class="tool">319 <svg viewBox="0 0 24 24"><path d="M12 6v4l3-3-3-3zM6 12c0 3.3 2.7 6 6 6v-2c-2.2 0-4-1.8-4-4H6z"/></svg>320 <div>CURRENCY ROTATE</div>321 </div>322 <div class="tool">323 <svg viewBox="0 0 24 24"><path d="M12 2l4 8H8l4-8zm0 20l-4-8h8l-4 8z"/></svg>324 <div>OPTIONS</div>325 </div>326 </div>327 </div>328 329 <!-- Dropdown overlay list -->330 <div class="dropdown">331 <div class="drop-scroll">332 <div class="drop-item">333 <div>334 <div class="code-line">USD</div>335 <div class="name-line">U.S. Dollar</div>336 </div>337 <div class="drop-flag">[IMG: US]</div>338 </div>339