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>Olymp Trade Promo UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 10  /* Root container */11  #render-target {12    position: relative;13    width: 1080px;14    height: 2400px;15    overflow: hidden;16    background: radial-gradient(1200px 800px at 540px 1300px, #f8e07a 0%, #f4ce45 35%, #f0bd2a 70%, #e5aa16 100%);17  }18 19  /* Letterbox bars (top and bottom) */20  .letterbox-top, .letterbox-bottom {21    position: absolute;22    left: 0; right: 0;23    background: #000;24    opacity: 0.95;25  }26  .letterbox-top { top: 0; height: 260px; }27  .letterbox-bottom { bottom: 0; height: 140px; }28 29  /* Floating coins */30  .coin {31    position: absolute;32    border-radius: 50%;33    border: 10px solid rgba(157, 112, 12, 0.6);34    background: radial-gradient(circle at 30% 30%, #ffea9a 0%, #f4c54c 45%, #e6a82a 70%, #d3911f 100%);35    box-shadow: 0 12px 28px rgba(0,0,0,0.25), inset 0 8px 12px rgba(255,255,255,0.3);36    filter: blur(0.2px);37  }38 39  .coin.c1 { width: 210px; height: 210px; left: 22px; top: 800px; transform: rotate(-15deg); }40  .coin.c2 { width: 140px; height: 140px; left: 70px; top: 1160px; transform: rotate(20deg); }41  .coin.c3 { width: 120px; height: 120px; right: 90px; top: 760px; transform: rotate(8deg); }42  .coin.c4 { width: 180px; height: 180px; right: 70px; top: 1450px; transform: rotate(-22deg); }43  .coin.c5 { width: 130px; height: 130px; right: 60px; top: 1850px; transform: rotate(10deg); }44  .coin.c6 { width: 160px; height: 160px; left: 40px; top: 1540px; transform: rotate(-8deg); }45 46  /* Tiny sparkles */47  .sparkle {48    position: absolute;49    width: 8px; height: 8px;50    background: #fff8d1;51    border-radius: 50%;52    box-shadow: 0 0 6px rgba(255,255,255,0.8);53    opacity: 0.9;54  }55  .sp1 { left: 220px; top: 610px; }56  .sp2 { left: 320px; top: 720px; width: 5px; height: 5px; }57  .sp3 { right: 240px; top: 900px; width: 6px; height: 6px; }58  .sp4 { right: 180px; top: 1280px; width: 7px; height: 7px; }59  .sp5 { left: 160px; top: 1700px; width: 5px; height: 5px; }60  .sp6 { right: 450px; top: 1500px; width: 4px; height: 4px; }61 62  /* Vertical note */63  .vert-note {64    position: absolute;65    left: -390px;66    top: 980px;67    transform: rotate(-90deg);68    color: rgba(255,255,255,0.5);69    font-size: 28px;70    letter-spacing: 0.5px;71  }72 73  /* Mute icon */74  .mute {75    position: absolute;76    top: 410px;77    left: 40px;78    width: 56px;79    height: 56px;80    border-radius: 50%;81    background: rgba(0,0,0,0.35);82    display: flex;83    align-items: center;84    justify-content: center;85    backdrop-filter: blur(2px);86  }87  .mute svg { width: 34px; height: 34px; }88 89  /* Phone mock */90  .phone {91    position: absolute;92    left: 50%;93    transform: translateX(-50%);94    top: 820px;95    width: 720px;96    height: 1450px;97    background: #0c0c0f;98    border-radius: 60px;99    box-shadow: 0 44px 120px rgba(0,0,0,0.4);100    border: 2px solid #222;101  }102 103  /* Notch */104  .notch {105    position: absolute;106    top: 24px;107    left: 50%;108    transform: translateX(-50%);109    width: 220px;110    height: 30px;111    background: #0c0c0f;112    border-radius: 18px;113  }114 115  /* Status bar text */116  .status {117    position: absolute;118    top: 22px;119    left: 34px;120    right: 34px;121    height: 36px;122    color: #fff;123    font-size: 28px;124    display: flex;125    align-items: center;126    justify-content: space-between;127    opacity: 0.9;128  }129  .status .right { font-size: 24px; letter-spacing: 1px; }130 131  /* Screen content */132  .screen {133    position: absolute;134    top: 90px;135    left: 24px;136    right: 24px;137    bottom: 24px;138    background: #111820;139    border-radius: 28px;140    overflow: hidden;141  }142 143  .topbar {144    display: flex;145    align-items: center;146    padding: 26px 24px 18px 24px;147    color: #9dd4ff;148    font-size: 26px;149  }150  .account {151    color: #79b8ff;152    font-weight: bold;153    margin-right: 20px;154  }155  .balance {156    color: #fff;157    background: #1a2530;158    padding: 6px 12px;159    border-radius: 10px;160    margin-right: 16px;161    font-size: 24px;162  }163  .pill {164    margin-left: auto;165    background: #3aa3ff;166    color: #fff;167    padding: 12px 22px;168    border-radius: 16px;169    font-weight: 700;170    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2);171  }172 173  .instrument {174    display: flex;175    align-items: center;176    padding: 12px 24px;177    color: #d7d9dd;178    font-size: 26px;179    background: #0f1620;180    border-top: 1px solid #1c2a36;181    border-bottom: 1px solid #1c2a36;182  }183  .badge {184    background: #f0c452;185    color: #262626;186    font-weight: 700;187    padding: 8px 12px;188    border-radius: 8px;189    margin-right: 12px;190    font-size: 22px;191  }192  .instrument .title { flex: 1; }193  .instrument .tools {194    display: flex;195    gap: 12px;196  }197  .tool {198    width: 46px; height: 38px;199    background: #1b2531;200    border-radius: 8px;201  }202 203  /* Chart placeholder */204  .chart {205    margin: 16px 24px;206    height: 720px;207    background: #0b1016;208    border: 1px solid #243342;209    border-radius: 12px;210    display: flex;211    align-items: center;212    justify-content: center;213    color: #a0a7ad;214    font-size: 28px;215  }216  .chart::after {217    content: "";218    position: absolute;219    left: 60px; right: 60px; top: 460px; height: 2px;220    background: rgba(160,167,173,0.2);221  }222 223  /* Action area */224  .action {225    position: absolute;226    left: 24px; right: 24px; bottom: 160px;227    background: #0f1620;228    border-top: 1px solid #263545;229    padding: 18px;230    border-radius: 16px;231  }232  .amount {233    color: #cdd6df;234    font-size: 26px;235    padding: 12px 16px;236  }237  .cta {238    margin-top: 12px;239    background: #3aa3ff;240    color: #fff;241    text-align: center;242    padding: 24px 16px;243    border-radius: 14px;244    font-size: 30px;245    font-weight: 700;246  }247 248  /* Bottom icons row inside phone */249  .nav {250    position: absolute;251    bottom: 70px;252    left: 24px; right: 24px;253    display: flex;254    justify-content: space-around;255    color: #b9c2cc;256    font-size: 22px;257  }258  .home-indicator {259    position: absolute;260    bottom: 30px;261    left: 50%;262    transform: translateX(-50%);263    width: 180px;264    height: 6px;265    background: #40454c;266    border-radius: 3px;267    opacity: 0.8;268  }269 270  /* Bottom headline */271  .headline {272    position: absolute;273    bottom: 210px;274    left: 0; right: 0;275    text-align: center;276    color: #ffffff;277    font-size: 54px;278    font-weight: 600;279    text-shadow: 0 6px 20px rgba(0,0,0,0.25);280  }281</style>282</head>283<body>284<div id="render-target">285 286  <!-- Letterbox bars -->287  <div class="letterbox-top"></div>288  <div class="letterbox-bottom"></div>289 290  <!-- Decorative coins -->291  <div class="coin c1"></div>292  <div class="coin c2"></div>293  <div class="coin c3"></div>294  <div class="coin c4"></div>295  <div class="coin c5"></div>296  <div class="coin c6"></div>297 298  <!-- Sparkles -->299  <div class="sparkle sp1"></div>300  <div class="sparkle sp2"></div>301  <div class="sparkle sp3"></div>302  <div class="sparkle sp4"></div>303  <div class="sparkle sp5"></div>304  <div class="sparkle sp6"></div>305 306  <!-- Vertical risk note -->307  <div class="vert-note">Trading carries inherent risk.</div>308 309  <!-- Mute icon -->310  <div class="mute">311    <svg viewBox="0 0 36 36">312      <circle cx="18" cy="18" r="16" stroke="#ffffff" stroke-width="2" fill="none"/>313      <!-- Speaker -->314      <path d="M9 22 L9 14 L14 14 L19 10 L19 26 L14 22 Z" fill="#ffffff"/>315      <!-- Slash -->316      <path d="M26 10 L10 26" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>317    </svg>318  </div>319 320  <!-- Phone mock -->321  <div class="phone">322    <div class="notch"></div>323    <div class="status">324      <div>9:41</div>325      <div class="right">📶    🔋</div>326    </div>327 328    <div class="screen">329      <div class="topbar">330        <div class="account">LIVE ACCOUNT</div>331        <div class="balance">₹900.00 ▾</div>332        <div class="pill">Payments</div>333      </div>334 335      <div class="instrument">336        <div class="badge">★</div>337        <div class="title">Gold OTC</div>338        <div class="tools">339          <div class="tool"></div>340          <div class="tool"></div>341          <div class="tool"></div>342        </div>343      </div>344 345      <div class="chart">346        [IMG: Trading chart screen]347      </div>348 349      <div class="action">350        <div class="amount">₹70</div>351        <div class="cta">Open a Trade</div>352      </div>353 354      <div class="nav">⌂  ⇅  ✉  🏆  ⊙</div>355      <div class="home-indicator"></div>356    </div>357  </div>358 359  <!-- Bottom headline -->360  <div class="headline">Start trading on Olymp Trade</div>361 362</div>363</body>364</html>