GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Convert Screen</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #FFFFFF; border-radius: 32px;12    box-shadow: 0 2px 8px rgba(0,0,0,0.08);13  }14 15  /* Status bar */16  .status-bar {17    height: 120px; background: #000; color: #fff;18    display: flex; align-items: center; padding: 0 36px; font-size: 28px;19  }20 21  /* Header */22  .header {23    height: 160px; background: #fff; border-bottom: 1px solid #E6E8EB;24    display: flex; align-items: center; justify-content: center; position: relative;25  }26  .header .title { font-size: 42px; font-weight: 600; color: #111; }27  .header .left-icon, .header .right-pill {28    position: absolute; top: 50%; transform: translateY(-50%);29  }30  .header .left-icon { left: 24px; width: 96px; height: 96px; border: 1px solid #DADDE1; border-radius: 50%; display: flex; align-items: center; justify-content: center; }31  .header .right-pill {32    right: 24px; background: #EAF4FF; color: #0A67FF; border-radius: 20px; height: 88px; padding: 0 32px;33    display: flex; align-items: center; gap: 16px; border: 1px solid #D7E8FF; font-weight: 600; font-size: 34px;34  }35  .gift-icon { width: 44px; height: 44px; }36  /* Content */37  .content { padding: 24px 36px; }38  .update-row { display: flex; align-items: center; gap: 20px; padding: 20px 0; color: #718096; font-size: 30px; }39  .progress {40    width: 72px; height: 72px; border-radius: 50%; background: #F3F4F6; border: 1px solid #E1E4E8;41    display: flex; align-items: center; justify-content: center; color: #808B98; font-weight: 600;42    position: relative;43  }44  .progress:before {45    content: ""; position: absolute; left: -18px; top: 0; bottom: 0; width: 6px; background: #2D8CFF; border-radius: 3px;46  }47 48  .card {49    background: #fff; border: 1px solid #E6E8EB; border-radius: 28px; padding: 26px 28px; margin-top: 18px;50    box-shadow: 0 2px 4px rgba(0,0,0,0.02);51    position: relative;52  }53  .card-row { display: flex; align-items: center; }54  .flag {55    width: 88px; height: 88px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 50%;56    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px; text-align: center; margin-right: 20px;57  }58  .currency-name { font-size: 36px; font-weight: 600; color: #222; }59  .amount { margin-left: auto; font-size: 44px; font-weight: 700; color: #111; }60  .subtext { margin-top: 10px; color: #8A94A4; font-size: 28px; }61  .dots { width: 24px; height: 80px; margin-left: 22px; display: flex; align-items: center; justify-content: center; }62  .dots svg { width: 24px; height: 80px; }63 64  /* USD card accented */65  .card.accent { border: 3px solid #1A73E8; padding: 22px 0 0 0; overflow: hidden; }66  .card.accent .inner { padding: 20px 24px; }67  .dropdown { margin-left: 10px; }68  .keypad {69    width: 120px; height: 96px; border-left: 1px solid #DADDE1;70    display: flex; align-items: center; justify-content: center; margin-left: 18px;71  }72  .action-bar {73    background: #0A67FF; color: #fff; padding: 28px 32px;74    display: flex; align-items: center; justify-content: space-between; font-size: 34px; font-weight: 600;75    border-top: 1px solid rgba(255,255,255,0.15);76    border-radius: 0 0 26px 26px;77  }78  .action-left { display: flex; align-items: center; gap: 18px; }79  .plane-icon { width: 40px; height: 40px; }80  .view-row { display: flex; align-items: center; gap: 12px; }81 82  /* Buttons row */83  .buttons-row { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; }84  .pill {85    display: inline-flex; align-items: center; gap: 18px; background: #F1F7FF; border: 1px solid #D7E8FF;86    color: #0A67FF; padding: 22px 28px; border-radius: 20px; font-size: 34px; font-weight: 600;87  }88  .muted {89    color: #7A8795; font-size: 32px; display: flex; align-items: center; gap: 12px;90  }91  .info-icon, .plus-icon { width: 40px; height: 40px; }92 93  /* Bottom nav */94  .tabbar {95    position: absolute; left: 0; right: 0; bottom: 120px; height: 220px; background: #fff; border-top: 1px solid #E6E8EB;96    display: flex; align-items: center; justify-content: space-around; padding: 10px 0;97  }98  .tab { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #8A94A4; font-size: 28px; }99  .tab.active { color: #0A67FF; }100  .tab svg { width: 64px; height: 64px; }101  .tab .send-circle svg { width: 88px; height: 88px; }102 103  .safe-area {104    position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: #000;105    display: flex; align-items: center; justify-content: center;106  }107  .home-indicator {108    width: 300px; height: 12px; background: #D0D0D0; border-radius: 8px;109  }110</style>111</head>112<body>113<div id="render-target">114  <div class="status-bar"></div>115 116  <div class="header">117    <div class="left-icon">118      <svg width="60" height="60" viewBox="0 0 60 60">119        <circle cx="30" cy="30" r="28" fill="none" stroke="#BFC6CE" stroke-width="2"></circle>120        <circle cx="30" cy="25" r="10" fill="none" stroke="#BFC6CE" stroke-width="2"></circle>121        <path d="M12 50c6-10 30-10 36 0" fill="none" stroke="#BFC6CE" stroke-width="2" stroke-linecap="round"></path>122      </svg>123    </div>124    <div class="title">Convert</div>125    <div class="right-pill">126      <svg class="gift-icon" viewBox="0 0 24 24">127        <rect x="3" y="8" width="18" height="12" rx="2" fill="none" stroke="#0A67FF" stroke-width="2"></rect>128        <path d="M3 12h18M11.5 8v12" fill="none" stroke="#0A67FF" stroke-width="2"></path>129        <path d="M9 8c-2 0-3-1-3-2s1.5-2 3-2 3 1 3 2-1 2-3 2zm6 0c2 0 3-1 3-2s-1.5-2-3-2-3 1-3 2 1 2 3 2z" fill="none" stroke="#0A67FF" stroke-width="2"></path>130      </svg>131      €25132    </div>133  </div>134 135  <div class="content">136    <div class="update-row">137      <div class="progress">59</div>138      <div>Last updated: 08 Nov 2023 08:30</div>139    </div>140 141    <!-- EUR card -->142    <div class="card">143      <div class="card-row">144        <div class="flag">[IMG: EU flag]</div>145        <div class="currency-name">EUR</div>146        <div class="amount">€ 1,552.31</div>147        <div class="dots">148          <svg viewBox="0 0 6 24">149            <circle cx="3" cy="4" r="2" fill="#9AA3AE"></circle>150            <circle cx="3" cy="12" r="2" fill="#9AA3AE"></circle>151            <circle cx="3" cy="20" r="2" fill="#9AA3AE"></circle>152          </svg>153        </div>154      </div>155      <div class="subtext">1 USD = 0.9352 EUR</div>156    </div>157 158    <!-- USD card with action bar -->159    <div class="card accent">160      <div class="inner">161        <div class="card-row">162          <div class="flag">[IMG: US flag]</div>163          <div class="currency-name">USD</div>164          <div class="dropdown">165            <svg width="28" height="28" viewBox="0 0 24 24">166              <path d="M6 9l6 6 6-6" fill="none" stroke="#8A94A4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>167            </svg>168          </div>169          <div class="amount">$ 1,659.96</div>170          <div class="keypad">171            <svg width="50" height="50" viewBox="0 0 24 24">172              <rect x="3" y="3" width="6" height="6" fill="none" stroke="#9AA3AE" stroke-width="2"></rect>173              <rect x="10" y="3" width="6" height="6" fill="none" stroke="#9AA3AE" stroke-width="2"></rect>174              <rect x="17" y="3" width="6" height="6" fill="none" stroke="#9AA3AE" stroke-width="2"></rect>175              <rect x="3" y="10" width="6" height="6" fill="none" stroke="#9AA3AE" stroke-width="2"></rect>176              <rect x="10" y="10" width="6" height="6" fill="none" stroke="#9AA3AE" stroke-width="2"></rect>177              <rect x="17" y="10" width="6" height="6" fill="none" stroke="#9AA3AE" stroke-width="2"></rect>178            </svg>179          </div>180        </div>181      </div>182      <div class="action-bar">183        <div class="action-left">184          <svg class="plane-icon" viewBox="0 0 24 24">185            <path d="M3 11l18-8-8 18-2-6-6-4z" fill="#fff"></path>186          </svg>187          <span>Send EUR to USD</span>188        </div>189        <div class="view-row">190          <span>View quote</span>191          <svg width="24" height="24" viewBox="0 0 24 24">192            <path d="M8 5l8 7-8 7" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>193          </svg>194        </div>195      </div>196    </div>197 198    <div class="buttons-row">199      <div class="pill">200        <svg class="plus-icon" viewBox="0 0 24 24">201          <path d="M12 5v14M5 12h14" stroke="#0A67FF" stroke-width="2" stroke-linecap="round"></path>202        </svg>203        Add currency204      </div>205      <div class="muted">206        Mid-market rates207        <svg class="info-icon" viewBox="0 0 24 24">208          <circle cx="12" cy="12" r="10" fill="none" stroke="#8A94A4" stroke-width="2"></circle>209          <path d="M12 10v6M12 7h0" stroke="#8A94A4" stroke-width="2" stroke-linecap="round"></path>210        </svg>211      </div>212    </div>213  </div>214 215  <!-- Bottom navigation -->216  <div class="tabbar">217    <div class="tab active">218      <svg viewBox="0 0 24 24">219        <circle cx="12" cy="12" r="10" fill="none" stroke="#0A67FF" stroke-width="2"></circle>220        <path d="M12 6c3 0 3 4 0 4s-3 4 0 4" fill="none" stroke="#0A67FF" stroke-width="2" stroke-linecap="round"></path>221        <path d="M12 18v0" stroke="#0A67FF" stroke-width="2"></path>222      </svg>223      <div>Convert</div>224    </div>225    <div class="tab">226      <svg viewBox="0 0 24 24">227        <path d="M3 18h18M5 15l3-4 4 3 5-7" fill="none" stroke="#8A94A4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>228      </svg>229      <div>Charts</div>230    </div>231    <div class="tab">232      <div class="send-circle">233        <svg viewBox="0 0 24 24">234          <circle cx="12" cy="12" r="11" fill="#0A67FF"></circle>235          <path d="M4 11l16-7-7 16-2-6-7-3z" fill="#fff"></path>236        </svg>237      </div>238      <div>Send</div>239    </div>240    <div class="tab">241      <svg viewBox="0 0 24 24">242        <path d="M12 4c3 0 6 2.5 6 6.5S12 22 12 22 6 16.5 6 10.5 9 4 12 4z" fill="none" stroke="#8A94A4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>243        <circle cx="12" cy="10.5" r="2" fill="#8A94A4"></circle>244      </svg>245      <div>Track</div>246    </div>247    <div class="tab">248      <svg viewBox="0 0 24 24">249        <path d="M12 4c4 0 6 2 6 5v3h2v3H4v-3h2V9c0-3 2-5 6-5zM8 19h8" fill="none" stroke="#8A94A4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>250      </svg>251      <div>Rate Alerts</div>252    </div>253  </div>254 255  <div class="safe-area">256    <div class="home-indicator"></div>257  </div>258</div>259</body>260</html>