GD-ML/AndroidCode

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>Currency Converter UI Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #0f1316;20    color: #fff;21  }22 23  /* Status bar */24  .statusbar {25    height: 110px;26    background: #000;27    color: #fff;28    display: flex;29    align-items: center;30    padding: 0 36px;31    font-size: 38px;32    letter-spacing: 0.5px;33  }34  .statusbar .right {35    margin-left: auto;36    display: flex;37    align-items: center;38    gap: 28px;39  }40  .statusbar .pill {41    width: 24px;42    height: 24px;43    border-radius: 4px;44    background: #fff;45  }46  .statusbar svg {47    display: block;48  }49 50  /* App bar */51  .appbar {52    height: 220px;53    background: #222629;54    border-bottom: 1px solid #2f3438;55    position: relative;56    padding: 30px 36px 20px 36px;57  }58  .appbar .title {59    font-weight: 700;60    font-size: 48px;61    margin-left: 104px; /* leave room for hamburger */62    line-height: 1.2;63  }64  .appbar .subtitle {65    font-size: 26px;66    color: #9aa1a6;67    margin-left: 104px;68    margin-top: 6px;69  }70  .appbar .hamburger {71    position: absolute;72    left: 36px;73    top: 60px;74  }75  .appbar .more {76    position: absolute;77    right: 36px;78    top: 60px;79  }80 81  /* Converter card */82  .converter-card {83    height: 520px;84    background: linear-gradient(#506f8e, #3f5c79);85    border-top: 1px solid #354a60;86    border-bottom: 1px solid #25384a;87    padding: 20px 28px;88  }89  .lang-row {90    display: flex;91    align-items: center;92    gap: 16px;93    color: #cbd6de;94    font-size: 26px;95    margin-bottom: 10px;96  }97  .currency-row {98    display: grid;99    grid-template-columns: 120px 1fr 180px 120px;100    align-items: center;101    padding: 26px 0;102    border-top: 1px solid rgba(0,0,0,0.2);103  }104  .currency-row:first-of-type { border-top: none; }105 106  .search-ico {107    width: 84px;108    height: 84px;109    margin-left: 20px;110  }111  .currency-info .code {112    font-size: 42px;113    font-weight: 700;114    color: #ffffff;115    display: flex;116    align-items: center;117    gap: 16px;118  }119  .currency-info .name {120    font-size: 26px;121    color: #d6e0e8;122    margin-top: 6px;123  }124  .flag {125    width: 72px;126    height: 48px;127    background: #E0E0E0;128    border: 1px solid #BDBDBD;129    display: inline-flex;130    justify-content: center;131    align-items: center;132    color: #757575;133    font-size: 20px;134  }135  .dropdown {136    color: #e05757;137    font-size: 38px;138    line-height: 1;139  }140  .tools {141    display: flex;142    align-items: center;143    justify-content: center;144    gap: 22px;145  }146  .tools svg { opacity: 0.95; }147  .value {148    text-align: right;149    font-size: 72px;150    color: #e9eef2;151    padding-right: 18px;152    font-weight: 700;153  }154 155  /* Action tiles row */156  .actions {157    height: 170px;158    display: grid;159    grid-template-columns: repeat(4, 1fr);160    background: linear-gradient(#1e3347, #1a2e41);161    border-top: 1px solid #0f2435;162    border-bottom: 1px solid #0b1e2c;163  }164  .action {165    display: flex;166    flex-direction: column;167    justify-content: center;168    align-items: center;169    border-right: 1px solid rgba(255,255,255,0.06);170    color: #e8f1f6;171    gap: 12px;172  }173  .action:last-child { border-right: none; }174  .action .label {175    text-align: center;176    font-size: 26px;177    line-height: 1.1;178    letter-spacing: 0.4px;179  }180 181  /* Keypad */182  .keypad {183    height: 1200px;184    display: grid;185    grid-template-columns: repeat(4, 1fr);186    grid-template-rows: repeat(6, 1fr);187    background: #3a4249;188  }189  .key {190    border: 1px solid #2c343b;191    display: flex;192    align-items: center;193    justify-content: center;194    color: #e9eef2;195    font-size: 52px;196    letter-spacing: 0.5px;197    background: #59646b;198  }199  .key.darker {200    background: #424a50;201  }202  .key.action {203    background: #4e565d;204    font-size: 44px;205  }206  .key .sub {207    color: #e24a45;208    margin-right: 12px;209    font-size: 52px;210    line-height: 1;211  }212  .key .arrow {213    color: #d6e35d;214    margin-right: 12px;215    font-size: 52px;216    line-height: 1;217  }218  .key.red {219    background: #c7443b;220    font-weight: 700;221  }222  .key.small {223    font-size: 40px;224  }225  .key.lefttext {226    justify-content: flex-start;227    padding-left: 36px;228    font-size: 40px;229  }230  .key.lefttext .tiny {231    font-size: 28px;232    color: #e24a45;233    display: block;234  }235 236  /* Bottom safe area */237  .bottom-area {238    height: 180px;239    background: #0b0c0e;240    position: relative;241  }242  .home-handle {243    width: 240px;244    height: 18px;245    background: #e6e6e6;246    border-radius: 10px;247    position: absolute;248    bottom: 30px;249    left: 50%;250    transform: translateX(-50%);251    opacity: 0.8;252  }253</style>254</head>255<body>256<div id="render-target">257 258  <!-- Top status bar -->259  <div class="statusbar">260    11:16261    <div class="right">262      <!-- simple "rectangle" as a status icon -->263      <svg width="46" height="34"><rect x="5" y="6" width="36" height="22" rx="2" fill="#fff"/></svg>264      <svg width="38" height="34" viewBox="0 0 38 34">265        <path d="M4 26h30M10 18h18M16 10h6" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>266      </svg>267      <svg width="34" height="34" viewBox="0 0 34 34">268        <path d="M6 12h20v10a8 8 0 0 1-8 8H14a8 8 0 0 1-8-8V12z" fill="#fff"/>269        <rect x="14" y="4" width="6" height="10" rx="3" fill="#fff"/>270      </svg>271    </div>272  </div>273 274  <!-- App bar -->275  <div class="appbar">276    <div class="hamburger">277      <svg width="64" height="64" viewBox="0 0 64 64">278        <path d="M8 18h48M8 32h48M8 46h48" stroke="#fff" stroke-width="6" stroke-linecap="round"/>279      </svg>280    </div>281    <div class="more">282      <svg width="64" height="64" viewBox="0 0 64 64">283        <circle cx="32" cy="16" r="6" fill="#fff"/>284        <circle cx="32" cy="32" r="6" fill="#fff"/>285        <circle cx="32" cy="48" r="6" fill="#fff"/>286      </svg>287    </div>288    <div class="title">CURRENCY CONVERTER</div>289    <div class="subtitle">Updated on December 14, 2023 10:48 AM</div>290  </div>291 292  <!-- Converter card -->293  <div class="converter-card">294    <div class="lang-row">295      EN296      <svg width="34" height="28" viewBox="0 0 34 28">297        <circle cx="8" cy="14" r="6" fill="#cfe0ec"/><path d="M14 14h14" stroke="#cfe0ec" stroke-width="3" stroke-linecap="round"/>298      </svg>299      <svg width="34" height="28" viewBox="0 0 34 28">300        <path d="M6 20l10-12M18 20l10-12" stroke="#cfe0ec" stroke-width="3" stroke-linecap="round"/>301      </svg>302    </div>303 304    <!-- Row 1: FJD -->305    <div class="currency-row">306      <div class="search-ico">307        <svg viewBox="0 0 84 84">308          <circle cx="34" cy="34" r="24" stroke="#5fb5ff" stroke-width="8" fill="none"/>309          <path d="M52 52l20 20" stroke="#5fb5ff" stroke-width="8" stroke-linecap="round"/>310        </svg>311      </div>312      <div class="currency-info">313        <div class="code">314          FJD315          <div class="flag">[IMG: Fiji Flag]</div>316          <span class="dropdown">▼</span>317        </div>318        <div class="name">Fijian Dollar</div>319      </div>320      <div class="tools">321        <svg width="54" height="54" viewBox="0 0 54 54">322          <path d="M12 27a15 15 0 1 1 7 13" stroke="#cfe0ec" stroke-width="4" fill="none" stroke-linecap="round"/>323          <path d="M12 27l0-10" stroke="#cfe0ec" stroke-width="4" stroke-linecap="round"/>324        </svg>325      </div>326      <div class="value">0</div>327    </div>328 329    <!-- Row 2: USD -->330    <div class="currency-row">331      <div class="search-ico">332        <svg viewBox="0 0 84 84">333          <circle cx="34" cy="34" r="24" stroke="#5fb5ff" stroke-width="8" fill="none"/>334          <path d="M52 52l20 20" stroke="#5fb5ff" stroke-width="8" stroke-linecap="round"/>335        </svg>336      </div>337      <div class="currency-info">338        <div class="code">339          USD340          <div class="flag">[IMG: USA Flag]</div>341          <span style="color:#77b2ea;font-size:38px;">▼</span>342        </div>343        <div class="name">U.S. Dollar</div>344      </div>345      <div class="tools">346        <svg width="54" height="54" viewBox="0 0 54 54">347          <path d="M12 27a15 15 0 1 1 7 13" stroke="#cfe0ec" stroke-width="4" fill="none" stroke-linecap="round"/>348          <path d="M12 27l0-10" stroke="#cfe0ec" stroke-width="4" stroke-linecap="round"/>349        </svg>350      </div>351      <div class="value">0</div>352    </div>353  </div>354 355  <!-- Action tiles -->356  <div class="actions">357    <div class="action">358      <svg width="54" height="54" viewBox="0 0 54 54">359        <path d="M14 28a14 14 0 1 1 8 12" stroke="#e8f1f6" stroke-width="4" fill="none" stroke-linecap="round"/>360        <path d="M14 28l0-9" stroke="#e8f1f6" stroke-width="4" stroke-linecap="round"/>361      </svg>362      <div class="label">CURRENCY<br>UPDATE</div>363    </div>364    <div class="action">365      <svg width="54" height="54" viewBox="0 0 54 54">366        <rect x="8" y="30" width="8" height="16" fill="#e8f1f6"/>367        <rect x="22" y="22" width="8" height="24" fill="#e8f1f6"/>368        <rect x="36" y="14" width="8" height="32" fill="#e8f1f6"/>369      </svg>370      <div class="label">TRENDS &<br>CHARTS</div>371    </div>372    <div class="action">373      <svg width="54" height="54" viewBox="0 0 54 54">374        <path d="M27 8l6 12 13 2-9 9 3 13-13-7-13 7 3-13-9-9 13-2 6-12z" fill="#e8f1f6"/>375      </svg>376      <div class="label">CURRENCY<br>FAVORITES</div>377    </div>378    <div class="action">379      <svg width="54" height="54" viewBox="0 0 54 54">380        <path d="M14 18h18l-6-6M40 36H22l6 6" stroke="#e8f1f6" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>381        <circle cx="27" cy="27" r="22" stroke="#e8f1f6" stroke-width="3" fill="none"/>382      </svg>383      <div class="label">CURRENCY<br>ROTATE</div>384    </div>385  </div>386 387  <!-- Keypad -->388  <div class="keypad">389    <div class="key action">COPY</div>390    <div class="key action">SEND</div>391    <div class="key action"><span class="sub">✕</span>CLR</div>392    <div class="key action darker"><span class="arrow">←</span>DEL</div>393 394    <div class="key">7</div>395    <div class="key">8</div>396    <div class="key">9</div>397    <div class="key darker">÷</div>398 399    <div class="key">4</div>400    <div class="key">5</div>401    <div class="key">6</div>402    <div class="key darker">×</div>403 404    <div class="key">1</div>405    <div class="key">2</div>406    <div class="key">3</div>407    <div class="key darker">−</div>408 409    <div class="key">000</div>410    <div class="key">00</div>411    <div class="key">0</div>412    <div class="key darker">+</div>413 414    <div class="key lefttext">415      <span class="tiny">MULTI CURRENCY</span>416      CONVERTER417    </div>418    <div class="key">±</div>419    <div class="key">.</div>420    <div class="key red">=</div>421  </div>422 423  <!-- Bottom area with home handle -->424  <div class="bottom-area">425    <div class="home-handle"></div>426  </div>427 428</div>429</body>430</html>