GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Currency Plus Mock</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: #ffffff;11  }12  /* Status bar */13  .status-bar {14    height: 120px; padding: 0 36px; display: flex; align-items: center; justify-content: space-between;15    color: #2b2b2b; font-size: 40px;16  }17  .status-icons { display: flex; align-items: center; gap: 24px; }18  .icon { width: 48px; height: 48px; }19  /* App bar */20  .app-bar {21    height: 140px; border-bottom: 1px solid #e5e5e5;22    display: flex; align-items: center; padding: 0 36px; color: #111;23  }24  .hamburger { width: 72px; height: 72px; margin-right: 24px; }25  .title { font-size: 48px; letter-spacing: 2px; font-weight: 600; flex: 1; }26  .search { width: 64px; height: 64px; }27  /* Timestamp */28  .timestamp {29    height: 80px; display: flex; align-items: center; justify-content: center;30    color: #8a8a8a; font-size: 34px;31  }32  /* Currency rows */33  .list { width: 100%; }34  .currency-row {35    height: 140px; display: flex; align-items: center; justify-content: space-between;36    padding: 0 36px; border-bottom: 1px solid #efefef;37    color: #444;38  }39  .currency-row.selected { background: #e9f3ff; }40  .left { display: flex; align-items: center; gap: 28px; }41  .flag {42    width: 96px; height: 64px; background: #E0E0E0; border: 1px solid #BDBDBD;43    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;44    border-radius: 8px;45  }46  .code { font-size: 48px; font-weight: 600; display: flex; align-items: center; gap: 12px; }47  .arrow { width: 28px; height: 28px; }48  .right { display: flex; align-items: center; gap: 24px; }49  .value { font-size: 48px; color: #666; }50  .value.input { color: #1b1b1b; font-weight: 600; }51  .chart {52    width: 52px; height: 52px; border: 1px solid #cfcfcf; border-radius: 8px;53    display: flex; align-items: center; justify-content: center;54  }55  /* Keypad */56  .keypad {57    position: absolute; left: 0; right: 0; bottom: 180px;58    height: 900px; padding: 24px 36px; background: #fff;59    display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 28px;60    border-top: 1px solid #eaeaea;61  }62  .btn {63    background: #f7f7f7; border: 1px solid #dedede; border-radius: 28px;64    display: flex; align-items: center; justify-content: center;65    font-size: 64px; color: #333;66  }67  .btn.orange { color: #d67a4a; }68  .btn.gray { color: #555; }69  /* Ad banner */70  .ad-banner {71    position: absolute; left: 0; bottom: 0; width: 100%; height: 180px;72    background: #E0E0E0; border-top: 1px solid #BDBDBD;73    display: flex; align-items: center; justify-content: center; color: #333; font-size: 42px;74  }75</style>76</head>77<body>78<div id="render-target">79 80  <!-- Status bar -->81  <div class="status-bar">82    <div>8:25</div>83    <div class="status-icons">84      <!-- Simple gear icon -->85      <svg class="icon" viewBox="0 0 24 24">86        <circle cx="12" cy="12" r="3" fill="#777"></circle>87        <path d="M12 2l2 1 2-1 1 2 2 1-1 2 1 2-2 1-1 2-2-1-2 1-1-2-2-1 1-2-1-2 2-1z" fill="#999"></path>88      </svg>89      <!-- Wifi icon -->90      <svg class="icon" viewBox="0 0 24 24">91        <path d="M2 9c5-4 15-4 20 0" stroke="#555" stroke-width="2" fill="none"/>92        <path d="M5 12c4-3 10-3 14 0" stroke="#555" stroke-width="2" fill="none"/>93        <path d="M9 15c2-2 4-2 6 0" stroke="#555" stroke-width="2" fill="none"/>94        <circle cx="12" cy="18" r="1.5" fill="#555"></circle>95      </svg>96    </div>97  </div>98 99  <!-- App bar -->100  <div class="app-bar">101    <!-- Hamburger -->102    <svg class="hamburger" viewBox="0 0 24 24">103      <rect x="3" y="5" width="18" height="2" fill="#333"></rect>104      <rect x="3" y="11" width="18" height="2" fill="#333"></rect>105      <rect x="3" y="17" width="18" height="2" fill="#333"></rect>106    </svg>107    <div class="title">CURRENCY PLUS</div>108    <!-- Search icon -->109    <svg class="search" viewBox="0 0 24 24">110      <circle cx="10" cy="10" r="6" stroke="#333" stroke-width="2" fill="none"></circle>111      <line x1="15" y1="15" x2="22" y2="22" stroke="#333" stroke-width="2"></line>112    </svg>113  </div>114 115  <div class="timestamp">Updated: 8:21, AM Oct 31, 2023</div>116 117  <!-- Currency list -->118  <div class="list">119    <div class="currency-row selected">120      <div class="left">121        <div class="flag">[IMG: EU Flag]</div>122        <div class="code">EUR123          <svg class="arrow" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#666" stroke-width="2" fill="none"/></svg>124        </div>125      </div>126      <div class="right">127        <div class="value input">100</div>128      </div>129    </div>130 131    <div class="currency-row">132      <div class="left">133        <div class="flag">[IMG: US Flag]</div>134        <div class="code">USD135          <svg class="arrow" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#888" stroke-width="2" fill="none"/></svg>136        </div>137      </div>138      <div class="right">139        <div class="value">106.034</div>140        <div class="chart">141          <svg viewBox="0 0 24 24" width="32" height="32">142            <path d="M3 18l6-6 4 3 8-9" stroke="#888" stroke-width="2" fill="none"/>143          </svg>144        </div>145      </div>146    </div>147 148    <div class="currency-row">149      <div class="left">150        <div class="flag">[IMG: Mexico Flag]</div>151        <div class="code">MXN152          <svg class="arrow" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#888" stroke-width="2" fill="none"/></svg>153        </div>154      </div>155      <div class="right">156        <div class="value">1,917.0065</div>157        <div class="chart">158          <svg viewBox="0 0 24 24" width="32" height="32">159            <path d="M3 18l5-7 5 3 8-6" stroke="#888" stroke-width="2" fill="none"/>160          </svg>161        </div>162      </div>163    </div>164 165    <div class="currency-row">166      <div class="left">167        <div class="flag">[IMG: Canada Flag]</div>168        <div class="code">CAD169          <svg class="arrow" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#888" stroke-width="2" fill="none"/></svg>170        </div>171      </div>172      <div class="right">173        <div class="value">146.76</div>174        <div class="chart">175          <svg viewBox="0 0 24 24" width="32" height="32">176            <path d="M3 18l4-4 6 2 8-10" stroke="#888" stroke-width="2" fill="none"/>177          </svg>178        </div>179      </div>180    </div>181 182    <div class="currency-row">183      <div class="left">184        <div class="flag">[IMG: Cuba Flag]</div>185        <div class="code">CUP186          <svg class="arrow" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#888" stroke-width="2" fill="none"/></svg>187        </div>188      </div>189      <div class="right">190        <div class="value">2,730.37</div>191        <div class="chart">192          <svg viewBox="0 0 24 24" width="32" height="32">193            <path d="M3 18l6-5 6 4 6-8" stroke="#888" stroke-width="2" fill="none"/>194          </svg>195        </div>196      </div>197    </div>198 199    <div class="currency-row">200      <div class="left">201        <div class="flag">[IMG: Japan Flag]</div>202        <div class="code">JPY203          <svg class="arrow" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#888" stroke-width="2" fill="none"/></svg>204        </div>205      </div>206      <div class="right">207        <div class="value">15,848.57</div>208        <div class="chart">209          <svg viewBox="0 0 24 24" width="32" height="32">210            <path d="M3 18l6-8 5 6 8-7" stroke="#888" stroke-width="2" fill="none"/>211          </svg>212        </div>213      </div>214    </div>215 216    <div class="currency-row">217      <div class="left">218        <div class="flag">[IMG: UK Flag]</div>219        <div class="code">GBP220          <svg class="arrow" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#888" stroke-width="2" fill="none"/></svg>221        </div>222      </div>223      <div class="right">224        <div class="value">87.28</div>225        <div class="chart">226          <svg viewBox="0 0 24 24" width="32" height="32">227            <path d="M3 18l5-6 6 5 8-9" stroke="#888" stroke-width="2" fill="none"/>228          </svg>229        </div>230      </div>231    </div>232  </div>233 234  <!-- Keypad -->235  <div class="keypad">236    <div class="btn orange">C</div>237    <div class="btn">7</div>238    <div class="btn">8</div>239    <div class="btn">9</div>240 241    <div class="btn">242      <svg viewBox="0 0 24 24" width="60" height="60">243        <path d="M12 3a9 9 0 100 18" stroke="#555" stroke-width="2" fill="none"/>244        <path d="M16 8l-4 4-4-4" stroke="#555" stroke-width="2" fill="none"/>245      </svg>246    </div>247    <div class="btn">4</div>248    <div class="btn">5</div>249    <div class="btn">6</div>250 251    <div class="btn gray">+ −</div>252    <div class="btn">1</div>253    <div class="btn">2</div>254    <div class="btn">3</div>255 256    <div class="btn gray">× ÷</div>257    <div class="btn">0</div>258    <div class="btn">.</div>259    <div class="btn">260      <svg viewBox="0 0 24 24" width="60" height="60">261        <path d="M5 4h10l5 8-5 8H5z" stroke="#333" stroke-width="2" fill="none"/>262        <path d="M13 9l-3 3 3 3" stroke="#333" stroke-width="2" fill="none"/>263      </svg>264    </div>265  </div>266 267  <!-- Ad banner -->268  <div class="ad-banner">[IMG: Ad - Acer Mall - Exclusive Store]</div>269 270</div>271</body>272</html>