GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Currency Converter 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;10    position: relative; overflow: hidden;11    background: #212529; color: #fff;12  }13 14  /* Status bar */15  .status-bar {16    height: 110px; background: #000; color: #fff;17    display: flex; align-items: center; justify-content: space-between;18    padding: 0 36px; box-sizing: border-box; font-weight: 600;19  }20  .status-left { font-size: 40px; letter-spacing: 1px; }21  .status-right { display: flex; gap: 30px; align-items: center; }22  .status-icon svg { width: 42px; height: 42px; fill: #fff; }23 24  /* App bar */25  .app-bar {26    height: 220px; background: #2b2f33;27    display: flex; align-items: center; padding: 0 30px; box-sizing: border-box;28    border-bottom: 1px solid #1e2226;29  }30  .app-left, .app-right { width: 120px; display: flex; align-items: center; justify-content: center; }31  .app-center { flex: 1; }32  .title { font-size: 56px; font-weight: 800; letter-spacing: 1px; }33  .subtitle { font-size: 28px; color: #b0b7bf; margin-top: 12px; }34 35  .icon-btn svg { width: 64px; height: 64px; fill: #fff; }36 37  /* Converter panel */38  .panel {39    height: 520px;40    background: linear-gradient(#557a9b, #3e6080);41    border-bottom: 2px solid #1a1f26;42    box-sizing: border-box;43    padding: 22px 24px;44  }45  .panel-top {46    display: flex; align-items: center; gap: 18px; color: #c9d4df; font-size: 28px; margin-bottom: 10px;47  }48  .small-icon svg { width: 36px; height: 36px; fill: #c9d4df; }49 50  .currency-row {51    display: grid; grid-template-columns: 120px 1fr 160px;52    align-items: center; padding: 26px 12px; margin-top: 12px;53    border-top: 1px solid rgba(255,255,255,0.08);54  }55  .search-icon svg { width: 78px; height: 78px; stroke: #ff5a52; stroke-width: 16; fill: none; }56  .curr-details { display: flex; align-items: center; gap: 20px; }57  .curr-text { display: flex; flex-direction: column; }58  .code { font-size: 48px; font-weight: 800; color: #fff; }59  .name { font-size: 28px; color: #dde6ee; margin-top: 6px; }60  .flag {61    width: 72px; height: 42px; background: #E0E0E0; border: 1px solid #BDBDBD;62    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 18px;63  }64  .row-actions { display: flex; align-items: center; gap: 16px; margin-left: 6px; color: #cfd7de; }65  .row-actions .dropdown { width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 16px solid #ef4d3a; }66  .row-actions .dropdown.blue { border-top-color: #58a6ff; }67  .row-actions .rotate svg { width: 42px; height: 42px; fill: #cfd7de; }68  .value { justify-self: end; font-size: 86px; font-weight: 700; color: #e9eef3; padding-right: 18px; }69 70  /* Actions row */71  .actions {72    height: 190px;73    display: grid; grid-template-columns: repeat(4, 1fr);74    background: linear-gradient(#273a4d, #253748);75    border-top: 2px solid #0f141a; border-bottom: 2px solid #0f141a;76  }77  .action-item {78    border-right: 1px solid #0f141a;79    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;80    color: #e9eef3;81  }82  .action-item:last-child { border-right: none; }83  .action-item svg { width: 52px; height: 52px; fill: #e9eef3; }84  .action-label { font-size: 28px; text-align: center; line-height: 1.2; }85 86  /* Keypad */87  .keypad { display: grid; grid-template-columns: repeat(4, 1fr); }88  .key-row { display: contents; }89  .key {90    height: 170px; background: #596269; border: 1px solid #424a52;91    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 56px; font-weight: 700;92  }93  .key.dark { background: #3e464d; }94  .key.light { background: linear-gradient(#5f676e, #555d64); }95  .key .sub { font-size: 40px; color: #ff4646; margin-left: 10px; }96  .key .left-arrow { margin-right: 12px; }97  .key.small { font-size: 40px; }98  .key.red { background: #c44942; }99  .key.text-red { color: #df3b32; font-weight: 700; font-size: 36px; line-height: 1.2; text-align: center; }100  .key.symbol { font-size: 72px; }101 102  /* Ad banner */103  .ad {104    position: absolute; left: 0; right: 0; bottom: 70px;105    height: 150px; background: #ffffff; color: #222; display: flex; align-items: center; padding: 0 24px; box-sizing: border-box;106    border-top: 1px solid #d7d7d7;107    gap: 20px;108  }109  .ad .app-icon {110    width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;111    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px; border-radius: 24px;112  }113  .ad .info { flex: 1; }114  .ad .title { font-size: 36px; font-weight: 700; color: #333; }115  .ad .meta { font-size: 26px; color: #777; margin-top: 8px; }116  .ad .install {117    background: #2f8e4d; color: #fff; padding: 18px 32px; border-radius: 40px; font-size: 32px; font-weight: 700;118  }119 120  /* Gesture bar */121  .gesture {122    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);123    width: 300px; height: 16px; background: #bfc5cb; border-radius: 12px;124  }125</style>126</head>127<body>128<div id="render-target">129 130  <!-- Status Bar -->131  <div class="status-bar">132    <div class="status-left">11:19</div>133    <div class="status-right">134      <div class="status-icon">135        <!-- Small rectangle (screen cast icon simplified) -->136        <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"></rect></svg>137      </div>138      <div class="status-icon">139        <!-- Wifi/triangle simplified -->140        <svg viewBox="0 0 24 24"><path d="M3 8l9-5 9 5-9 5-9-5z"></path></svg>141      </div>142      <div class="status-icon">143        <!-- Battery -->144        <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"></rect><rect x="21" y="10" width="2" height="4"></rect></svg>145      </div>146    </div>147  </div>148 149  <!-- App Bar -->150  <div class="app-bar">151    <div class="app-left icon-btn">152      <!-- Hamburger -->153      <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="2"></rect><rect x="3" y="11" width="18" height="2"></rect><rect x="3" y="17" width="18" height="2"></rect></svg>154    </div>155    <div class="app-center">156      <div class="title">CURRENCY CONVERTER</div>157      <div class="subtitle">Updated on December 14, 2023 10:48 AM</div>158    </div>159    <div class="app-right icon-btn">160      <!-- More vert -->161      <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"></circle><circle cx="12" cy="12" r="2"></circle><circle cx="12" cy="19" r="2"></circle></svg>162    </div>163  </div>164 165  <!-- Converter Panel -->166  <div class="panel">167    <div class="panel-top">168      <span>EN</span>169      <span class="small-icon">170        <!-- speaker -->171        <svg viewBox="0 0 24 24"><path d="M4 10h4l4-4v12l-4-4H4z"></path></svg>172      </span>173      <span class="small-icon">174        <!-- link -->175        <svg viewBox="0 0 24 24"><path d="M7 12a5 5 0 015-5h3v2h-3a3 3 0 100 6h3v2h-3a5 5 0 01-5-5z"></path><path d="M17 7a5 5 0 010 10h-3v-2h3a3 3 0 100-6h-3V7h3z"></path></svg>176      </span>177    </div>178 179    <!-- Row 1 -->180    <div class="currency-row">181      <div class="search-icon">182        <svg viewBox="0 0 100 100"><circle cx="40" cy="40" r="28"></circle><line x1="58" y1="58" x2="88" y2="88" stroke="#ff5a52" stroke-width="16"></line></svg>183      </div>184      <div class="curr-details">185        <div class="curr-text">186          <div class="code">GBP</div>187          <div class="name">British Pound Sterling</div>188        </div>189        <div class="flag">[IMG: UK Flag]</div>190        <div class="row-actions">191          <div class="dropdown"></div>192          <div class="rotate">193            <svg viewBox="0 0 24 24"><path d="M12 6v4l3-3M6 12a6 6 0 1012 0" fill="none" stroke="#cfd7de" stroke-width="2"></path></svg>194          </div>195        </div>196      </div>197      <div class="value">0</div>198    </div>199 200    <!-- Row 2 -->201    <div class="currency-row">202      <div class="search-icon">203        <svg viewBox="0 0 100 100"><circle cx="40" cy="40" r="28"></circle><line x1="58" y1="58" x2="88" y2="88" stroke="#5aa7ff" stroke-width="16"></line></svg>204      </div>205      <div class="curr-details">206        <div class="curr-text">207          <div class="code">EUR</div>208          <div class="name">Euro</div>209        </div>210        <div class="flag">[IMG: EU Flag]</div>211        <div class="row-actions">212          <div class="dropdown blue"></div>213          <div class="rotate">214            <svg viewBox="0 0 24 24"><path d="M12 6v4l3-3M6 12a6 6 0 1012 0" fill="none" stroke="#cfd7de" stroke-width="2"></path></svg>215          </div>216        </div>217      </div>218      <div class="value">0</div>219    </div>220  </div>221 222  <!-- Actions Row -->223  <div class="actions">224    <div class="action-item">225      <svg viewBox="0 0 24 24"><path d="M12 2v4l3-3M4 12a8 8 0 1016 0" fill="none" stroke="#e9eef3" stroke-width="2"></path></svg>226      <div class="action-label">CURRENCY<br>UPDATE</div>227    </div>228    <div class="action-item">229      <svg viewBox="0 0 24 24"><rect x="4" y="12" width="3" height="8"></rect><rect x="10" y="8" width="3" height="12"></rect><rect x="16" y="5" width="3" height="15"></rect></svg>230      <div class="action-label">TRENDS &<br>CHARTS</div>231    </div>232    <div class="action-item">233      <svg viewBox="0 0 24 24"><path d="M12 17l-5 3 2-6-5-4 6-1 2-5 2 5 6 1-5 4 2 6-5-3z"></path></svg>234      <div class="action-label">CURRENCY<br>FAVORITES</div>235    </div>236    <div class="action-item">237      <svg viewBox="0 0 24 24"><path d="M8 7h5V4l4 4-4 4V9H8zM16 17H11v3l-4-4 4-4v3h5z"></path></svg>238      <div class="action-label">CURRENCY<br>ROTATE</div>239    </div>240  </div>241 242  <!-- Keypad -->243  <div class="keypad">244    <!-- Row: COPY SEND CLR DEL -->245    <div class="key light">COPY</div>246    <div class="key light">SEND</div>247    <div class="key light">CLR<span class="sub">✕</span></div>248    <div class="key dark">249      <span class="left-arrow">250        <svg viewBox="0 0 24 24" width="52" height="52"><path d="M14 6l-6 6 6 6" stroke="#c9ef5a" stroke-width="2" fill="none"></path></svg>251      </span>252      DEL253    </div>254 255    <!-- 7 8 9 ÷ -->256    <div class="key">7</div>257    <div class="key">8</div>258    <div class="key">9</div>259    <div class="key dark symbol">÷</div>260 261    <!-- 4 5 6 × -->262    <div class="key">4</div>263    <div class="key">5</div>264    <div class="key">6</div>265    <div class="key dark symbol">×</div>266 267    <!-- 1 2 3 − -->268    <div class="key">1</div>269    <div class="key">2</div>270    <div class="key">3</div>271    <div class="key dark symbol">−</div>272 273    <!-- 000 00 0 + -->274    <div class="key small">000</div>275    <div class="key small">00</div>276    <div class="key">0</div>277    <div class="key dark symbol">+</div>278 279    <!-- MULTI / ± / . / = -->280    <div class="key text-red">MULTI CURRENCY<br>CONVERTER</div>281    <div class="key symbol">±</div>282    <div class="key symbol">.</div>283    <div class="key red symbol">=</div>284  </div>285 286  <!-- Ad banner -->287  <div class="ad">288    <div class="app-icon">[IMG: App Icon]</div>289    <div class="info">290      <div class="title">Motilal Oswal Share Market App</div>291      <div class="meta">3.9 ★   FREE</div>292    </div>293    <div class="install">INSTALL</div>294  </div>295 296  <!-- Gesture bar -->297  <div class="gesture"></div>298 299</div>300</body>301</html>