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>UI Render</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: linear-gradient(180deg, #4E7FEF 0%, #5E72F0 30%, #8158E3 65%, #6F45D7 85%, #6A35D2 100%);15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #fff;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 18px;23    left: 24px;24    right: 24px;25    height: 48px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    font-weight: 600;30    font-size: 32px;31    opacity: 0.95;32  }33  .status-left { display: flex; align-items: center; gap: 16px; }34  .status-right { display: flex; align-items: center; gap: 22px; font-size: 28px; }35  .icon {36    display: inline-flex;37    align-items: center;38    justify-content: center;39  }40  .icon svg { display: block; }41 42  /* App header */43  .brand {44    position: absolute;45    top: 120px;46    left: 0;47    right: 0;48    text-align: center;49  }50  .brand .name {51    font-size: 88px;52    font-weight: 700;53    letter-spacing: 1px;54  }55  .brand .by {56    margin-top: 8px;57    font-size: 28px;58    opacity: 0.9;59  }60 61  /* Crown and graduation icons */62  .badge-icon {63    position: absolute;64    top: 128px;65    right: 40px;66    width: 86px;67    height: 86px;68    border-radius: 43px;69    background: rgba(255,255,255,0.08);70    display: flex;71    align-items: center;72    justify-content: center;73  }74  .grad-icon {75    position: absolute;76    top: 220px;77    right: 48px;78    width: 80px;79    height: 80px;80    border-radius: 40px;81    background: rgba(255,255,255,0.12);82    display: flex;83    align-items: center;84    justify-content: center;85  }86 87  /* Profile chip */88  .profile {89    position: absolute;90    top: 200px;91    left: 44px;92    width: 110px;93    height: 110px;94    border-radius: 55px;95    background: #5B52C6;96    box-shadow: 0 8px 18px rgba(0,0,0,0.2);97    display: flex;98    align-items: center;99    justify-content: center;100    font-weight: 700;101    font-size: 56px;102  }103  .flag {104    position: absolute;105    top: 270px;106    left: 118px;107    background: #2CBF6B;108    color: #fff;109    font-size: 24px;110    border-radius: 20px;111    padding: 6px 12px;112    box-shadow: 0 4px 10px rgba(0,0,0,0.2);113  }114 115  /* Map pins */116  .pin {117    position: absolute;118    width: 310px;119    height: 310px;120    border-radius: 50%;121    display: flex;122    align-items: center;123    justify-content: center;124    box-shadow: 0 14px 30px rgba(0,0,0,0.25);125  }126  .pin:after {127    content: "";128    position: absolute;129    bottom: -46px;130    left: 50%;131    transform: translateX(-50%);132    width: 0; height: 0;133    border-left: 26px solid transparent;134    border-right: 26px solid transparent;135    border-top: 46px solid currentColor;136    opacity: 0.9;137  }138  .pin .img {139    width: 86%;140    height: 86%;141    background: #E0E0E0;142    border: 1px solid #BDBDBD;143    border-radius: 30px;144    display: flex;145    align-items: center;146    justify-content: center;147    color: #757575;148    font-size: 32px;149    text-align: center;150    padding: 10px;151  }152  .pin-left {153    top: 370px;154    left: 98px;155    border: 14px solid #F59E62;156    color: #F59E62;157    background: #F59E6220;158  }159  .pin-right {160    top: 390px;161    left: 610px;162    border: 18px solid #7A3EE0;163    color: #7A3EE0;164    background: #7A3EE020;165  }166  .pin-label {167    position: absolute;168    top: 700px;169    font-size: 46px;170    font-weight: 700;171    text-align: center;172    width: 310px;173    color: #fff;174    text-shadow: 0 2px 0 rgba(0,0,0,0.10);175  }176 177  /* Counters and start ribbon */178  .count-badge {179    position: absolute;180    bottom: -20px;181    right: -20px;182    width: 110px;183    height: 110px;184    background: #F59E62;185    color: #fff;186    border-radius: 55px;187    display: flex;188    align-items: center;189    justify-content: center;190    font-size: 42px;191    font-weight: 800;192    box-shadow: 0 8px 20px rgba(0,0,0,0.25);193  }194  .start-ribbon {195    position: absolute;196    bottom: -28px;197    left: 50%;198    transform: translateX(-50%);199    background: #8246E8;200    padding: 18px 40px;201    border-radius: 30px;202    font-size: 40px;203    font-weight: 800;204    display: inline-flex;205    align-items: center;206    gap: 18px;207    box-shadow: 0 8px 20px rgba(0,0,0,0.25);208  }209  .start-ribbon .dot {210    width: 22px;211    height: 22px;212    background: #FFC928;213    border-radius: 50%;214  }215 216  /* Topic circles */217  .topic {218    position: absolute;219    width: 270px;220    height: 270px;221    border-radius: 50%;222    border: 14px solid #F6C048;223    display: flex;224    align-items: center;225    justify-content: center;226    background: rgba(255,255,255,0.06);227    box-shadow: 0 10px 24px rgba(0,0,0,0.18);228  }229  .topic .img {230    width: 82%;231    height: 82%;232    background: #E0E0E0;233    border: 1px solid #BDBDBD;234    border-radius: 24px;235    display: flex;236    align-items: center;237    justify-content: center;238    color: #757575;239    font-size: 30px;240    text-align: center;241    padding: 10px;242  }243  .topic .new {244    position: absolute;245    top: -8px;246    right: -8px;247    background: #C9302C;248    color: #fff;249    font-weight: 800;250    font-size: 28px;251    padding: 6px 14px;252    border-radius: 12px;253    box-shadow: 0 6px 14px rgba(0,0,0,0.25);254  }255  .topic-left { top: 940px; left: 120px; }256  .topic-right { top: 960px; left: 650px; }257 258  /* Promo card */259  .promo {260    position: absolute;261    left: 30px;262    right: 30px;263    top: 1240px;264    height: 410px;265    border-radius: 34px;266    background: linear-gradient(135deg, #3FA2FF 0%, #5B68FF 60%, #6F39E8 100%);267    box-shadow: 0 20px 36px rgba(0,0,0,0.35);268    padding: 40px 44px;269  }270  .promo .close {271    position: absolute;272    top: 26px;273    right: 26px;274    width: 54px;275    height: 54px;276    border-radius: 27px;277    background: rgba(255,255,255,0.18);278    display: flex;279    align-items: center;280    justify-content: center;281  }282  .promo h3 {283    margin: 0 0 18px 0;284    font-size: 40px;285    font-weight: 800;286    letter-spacing: 0.4px;287    color: #FFDD4A;288  }289  .promo .text {290    font-size: 38px;291    line-height: 1.35;292    margin-right: 80px;293  }294  .promo .strike {295    text-decoration: line-through;296    opacity: 0.7;297  }298  .promo .btn {299    margin-top: 28px;300    width: 320px;301    height: 86px;302    background: #36C375;303    color: #fff;304    border-radius: 43px;305    font-size: 40px;306    font-weight: 800;307    display: flex;308    align-items: center;309    justify-content: center;310    box-shadow: 0 12px 20px rgba(0,0,0,0.25);311  }312 313  /* Slider dots and arrow */314  .dots {315    position: absolute;316    top: 1668px;317    left: 0;318    right: 0;319    display: flex;320    justify-content: center;321    gap: 22px;322  }323  .dot {324    width: 18px; height: 18px; border-radius: 9px; background: rgba(255,255,255,0.6);325  }326  .dot.active { background: #fff; }327  .next-arrow {328    position: absolute;329    top: 1660px;330    right: 40px;331    width: 80px;332    height: 80px;333    border-radius: 40px;334    background: rgba(255,255,255,0.12);335    display: flex;336    align-items: center;337    justify-content: center;338  }339 340  /* Bottom nav */341  .bottom-nav {342    position: absolute;343    left: 28px;344    right: 28px;345    bottom: 170px;346    height: 210px;347    background: rgba(48, 13, 107, 0.55);348    border: 2px solid rgba(255,255,255,0.15);349    border-radius: 36px;350    display: grid;351    grid-template-columns: repeat(5, 1fr);352    align-items: center;353    padding: 26px 30px;354    gap: 10px;355    backdrop-filter: blur(2px);356  }357  .nav-item {358    display: flex;359    flex-direction: column;360    align-items: center;361    gap: 16px;362    color: #D9C9FF;363    font-size: 30px;364    font-weight: 700;365  }366  .nav-item.active { color: #77E4FF; }367  .nav-icon {368    width: 66px; height: 66px;369    border-radius: 20px;370    background: rgba(255,255,255,0.09);371    display: flex;372    align-items: center; justify-content: center;373  }374  .badge-alert {375    position: absolute;376    right: 20px;377    top: 16px;378    width: 42px; height: 42px;379    border-radius: 21px;380    background: #E72A2A;381    color: #fff;382    font-size: 28px;383    font-weight: 900;384    display: flex;385    align-items: center; justify-content: center;386    transform: translate(12px, -12px);387    box-shadow: 0 8px 18px rgba(0,0,0,0.3);388  }389 390  /* Gesture bar */391  .gesture {392    position: absolute;393    bottom: 66px;394    left: 50%;395    transform: translateX(-50%);396    width: 360px; height: 14px;397    background: rgba(255,255,255,0.8);398    border-radius: 7px;399  }400</style>401</head>402<body>403<div id="render-target">404 405  <!-- Status bar -->406  <div class="status-bar">407    <div class="status-left">7:50</div>408    <div class="status-right">409      <span class="icon" title="wifi">410        <svg width="36" height="36" viewBox="0 0 24 24">411          <path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M9 16c2-2 4-2 6 0M12 20a2 2 0 1 0 0 .001" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>412        </svg>413      </span>414      <span style="font-size:30px;">42%</span>415      <span class="icon" title="battery">416        <svg width="40" height="40" viewBox="0 0 24 24">417          <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"/>418          <rect x="4" y="8" width="12" height="8" fill="#fff"/>419          <rect x="20" y="9" width="2" height="6" fill="#fff"/>420        </svg>421      </span>422    </div>423  </div>424 425  <!-- Brand -->426  <div class="brand">427    <div class="name">mondly</div>428    <div class="by">by Pearson</div>429  </div>430 431  <!-- Crown and graduation icons -->432  <div class="badge-icon">433    <svg width="56" height="56" viewBox="0 0 64 64">434      <path d="M8 40h48v8H8z" fill="#E69C2E"/>435      <path d="M10 40l8-18 14 12 14-12 8 18z" fill="#FFC928"/>436      <circle cx="20" cy="46" r="3" fill="#8A5A00"/>437      <circle cx="44" cy="46" r="3" fill="#8A5A00"/>438    </svg>439  </div>440  <div class="grad-icon">441    <svg width="52" height="52" viewBox="0 0 64 64">442      <path d="M6 22l26-10 26 10-26 10z" fill="#B9A6FF"/>443      <path d="M12 30v10c8 6 28 6 36 0V30" stroke="#DDD6FF" stroke-width="4" fill="none"/>444      <circle cx="50" cy="40" r="3" fill="#DDD6FF"/>445    </svg>446  </div>447 448  <!-- Profile chip -->449  <div class="profile">F</div>450  <div class="flag">BR</div>451 452  <!-- Left pin -->453  <div class="pin pin-left">454    <div class="img">[IMG: Profile avatar]</div>455    <div class="count-badge">2/8</div>456  </div>457  <div class="pin-label" style="left: 98px;">Hello</div>458 459  <!-- Right pin -->460  <div class="pin pin-right">461    <div class="img">[IMG: Calendar]</div>462    <div class="start-ribbon">Start <span class="dot"></span></div>463  </div>464  <div class="pin-label" style="left: 610px;">Daily Lesson</div>465 466  <!-- Topic circles -->467  <div class="topic topic-left">468    <div class="img">[IMG: Chat bubbles]</div>469    <div class="new">New</div>470  </div>471  <div class="topic topic-right" style="border-color:#F6C048;">472    <div class="img">[IMG: Thank you (multilingual)]</div>473    <div class="new">New</div>474  </div>475 476  <!-- Promo card -->477  <div class="promo">478    <div class="close">479      <svg width="26" height="26" viewBox="0 0 24 24">480        <path d="M5 5l14 14M19 5L5 19" stroke="#fff" stroke-width="2" stroke-linecap="round"/>481      </svg>482    </div>483    <h3>LIMITED TIME OFFER</h3>484    <div class="text">485      60% off when you upgrade to an annual plan.486      <span class="strike">₹199.00</span> ₹49.99/month. Billed annually at ₹599.99.487    </div>488    <div class="btn">Activate</div>489  </div>490 491  <!-- Slider dots -->492  <div class="dots">493    <span class="dot active"></span>494    <span class="dot"></span>495    <span class="dot"></span>496    <span class="dot"></span>497    <span class="dot"></span>498    <span class="dot"></span>499    <span class="dot"></span>500    <span class="dot"></span>501  </div>502  <div class="next-arrow">503    <svg width="40" height="40" viewBox="0 0 24 24">504      <path d="M9 6l6 6-6 6" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>505    </svg>506  </div>507 508  <!-- Bottom nav -->509  <div class="bottom-nav">510    <div class="nav-item active">511      <div class="nav-icon">512        <svg width="36" height="36" viewBox="0 0 24 24">513          <path d="M4 18l8-12 8 12H4z" fill="#77E4FF"/>514        </svg>515      </div>516      <div>Categories</div>517    </div>518    <div class="nav-item">519      <div class="nav-icon">520        <svg width="36" height="36" viewBox="0 0 24 24">521          <rect x="5" y="4" width="14" height="16" rx="2" ry="2" fill="#D9C9FF"/>522          <line x1="7" y1="8" x2="17" y2="8" stroke="#6E5CCF" stroke-width="2"/>523          <line x1="7" y1="12" x2="17" y2="12" stroke="#6E5CCF" stroke-width="2"/>524          <line x1="7" y1="16" x2="14" y2="16" stroke="#6E5CCF" stroke-width="2"/>525        </svg>526      </div>527      <div>Lessons</div>528    </div>529    <div class="nav-item">530      <div class="nav-icon">531        <svg width="36" height="36" viewBox="0 0 24 24">532          <circle cx="8" cy="14" r="3" fill="#D9C9FF"/>533          <circle cx="16" cy="8" r="3" fill="#D9C9FF"/>534          <path d="M8 14l8-6" stroke="#6E5CCF" stroke-width="2"/>535        </svg>536      </div>537      <div>Statistics</div>538    </div>539    <div class="nav-item">540      <div class="nav-icon">541        <svg width="36" height="36" viewBox="0 0 24 24">542          <rect x="4" y="12" width="3" height="8" fill="#D9C9FF"/>543          <rect x="10" y="8" width="3" height="12" fill="#D9C9FF"/>544          <rect x="16" y="5" width="3" height="15" fill="#D9C9FF"/>545        </svg>546      </div>547      <div>Leaderboard</div>548    </div>549    <div class="nav-item" style="position: relative;">550      <div class="nav-icon">551        <svg width="36" height="36" viewBox="0 0 24 24">552          <path d="M6 6h14l-2 8H7L6 6z" fill="#D9C9FF"/>553          <circle cx="9" cy="18" r="2" fill="#D9C9FF"/>554          <circle cx="17" cy="18" r="2" fill="#D9C9FF"/>555        </svg>556      </div>557      <div>Shop</div>558      <div class="badge-alert">!</div>559    </div>560  </div>561 562  <!-- Gesture bar -->563  <div class="gesture"></div>564 565</div>566</body>567</html>