GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Profile UI - Duolingo Style</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: "Inter", Arial, Helvetica, sans-serif;11    color: #E9F0F6;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #0f1e24; /* deep app background */19  }20 21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 16px;25    left: 30px;26    right: 30px;27    height: 60px;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #D7E6EF;32    font-weight: 600;33    letter-spacing: 0.5px;34  }35  .status-icons {36    display: flex;37    align-items: center;38    gap: 22px;39  }40  .icon-circle {41    width: 26px;42    height: 26px;43    border-radius: 50%;44    border: 2px solid #CFE3EF;45    opacity: 0.9;46  }47  .wifi {48    width: 26px;49    height: 18px;50    position: relative;51  }52  .wifi::before, .wifi::after {53    content: "";54    position: absolute;55    left: 0;56    right: 0;57    margin: auto;58    border: 2px solid #D7E6EF;59    border-top-left-radius: 20px;60    border-top-right-radius: 20px;61  }62  .wifi::before {63    top: 0;64    width: 22px;65    height: 12px;66    border-bottom: none;67  }68  .wifi::after {69    top: 6px;70    width: 12px;71    height: 6px;72    border-bottom: none;73  }74  .battery {75    width: 42px;76    height: 20px;77    border: 2px solid #D7E6EF;78    border-radius: 4px;79    position: relative;80  }81  .battery::after {82    content: "";83    position: absolute;84    right: -6px;85    top: 6px;86    width: 6px;87    height: 8px;88    background: #D7E6EF;89    border-radius: 2px;90  }91  .battery-level {92    position: absolute;93    left: 3px;94    top: 3px;95    height: 12px;96    width: 28px;97    background: #93D976;98    border-radius: 2px;99  }100 101  /* Header / hero area */102  .hero {103    position: absolute;104    top: 0;105    left: 0;106    width: 1080px;107    height: 660px;108    background: linear-gradient(180deg, #14242A 0%, #132027 100%);109  }110  .gear {111    position: absolute;112    right: 48px;113    top: 120px;114    font-size: 54px;115    color: #D9E7EF;116    opacity: 0.9;117  }118  .avatar-silhouette {119    position: absolute;120    top: 170px;121    left: 50%;122    transform: translateX(-50%);123    width: 520px;124    height: 520px;125    border-radius: 46%;126    border: 8px dashed #6FB6D6;127    background: #3E6F8B;128    box-shadow: inset 0 0 0 14px rgba(54, 98, 120, 0.35);129  }130  .avatar-silhouette::before,131  .avatar-silhouette::after {132    content: "";133    position: absolute;134    background: #203D4A;135  }136  .avatar-silhouette::before {137    width: 20px;138    height: 120px;139    left: 50%;140    top: 50%;141    transform: translate(-50%, -50%);142    border-radius: 10px;143  }144  .avatar-silhouette::after {145    width: 120px;146    height: 20px;147    left: 50%;148    top: 50%;149    transform: translate(-50%, -50%);150    border-radius: 10px;151  }152 153  /* Content section */154  .content {155    position: absolute;156    top: 660px;157    left: 0;158    right: 0;159    bottom: 0;160    padding: 0 40px 160px 40px;161  }162 163  .name-row {164    display: flex;165    align-items: center;166    gap: 18px;167    margin-bottom: 16px;168  }169  .name-row .name {170    font-size: 64px;171    font-weight: 800;172    color: #DDEAF2;173  }174  .flags {175    display: flex;176    gap: 16px;177  }178  .flag {179    width: 72px;180    height: 48px;181    border-radius: 10px;182    border: 2px solid rgba(255,255,255,0.15);183    display: flex;184    align-items: center;185    justify-content: center;186    font-size: 26px;187    font-weight: 700;188    color: #ffffff;189  }190  .flag.br {191    background: linear-gradient(180deg, #3AA64B 0%, #2F8D3F 100%);192  }193  .flag.fr {194    background: linear-gradient(90deg, #2E5CE6 0%, #FFFFFF 50%, #E23B3B 100%);195  }196 197  .subline {198    color: #9FB3C1;199    font-size: 32px;200    margin-top: 6px;201  }202 203  .follow-row {204    display: flex;205    gap: 44px;206    margin: 34px 0 24px 0;207    color: #9FB3C1;208    font-size: 36px;209    letter-spacing: 0.4px;210  }211  .follow-row .count {212    color: #66B7FF;213    font-weight: 800;214    margin-right: 6px;215  }216 217  /* Add friends block */218  .action-row {219    display: flex;220    align-items: center;221    gap: 22px;222    margin: 14px 0 36px;223  }224  .add-btn {225    flex: 1;226    background: #15242B;227    border: 2px solid rgba(255,255,255,0.12);228    color: #BDE1FF;229    font-size: 40px;230    font-weight: 700;231    border-radius: 26px;232    height: 120px;233    display: flex;234    align-items: center;235    gap: 22px;236    padding: 0 34px;237  }238  .add-icon {239    width: 54px;240    height: 54px;241    border-radius: 50%;242    background: #1E3340;243    border: 2px solid #6BB5D5;244    position: relative;245  }246  .add-icon::before, .add-icon::after {247    content: "";248    position: absolute;249    background: #6BB5D5;250  }251  .add-icon::before {252    width: 6px;253    height: 34px;254    left: 50%;255    top: 50%;256    transform: translate(-50%,-50%);257    border-radius: 3px;258  }259  .add-icon::after {260    width: 34px;261    height: 6px;262    left: 50%;263    top: 50%;264    transform: translate(-50%,-50%);265    border-radius: 3px;266  }267  .share-box {268    width: 140px;269    height: 120px;270    background: #15242B;271    border: 2px solid rgba(255,255,255,0.12);272    border-radius: 26px;273    display: flex;274    align-items: center;275    justify-content: center;276  }277  .share-box svg {278    width: 60px;279    height: 60px;280    stroke: #7FC2E8;281    fill: none;282    stroke-width: 6;283  }284 285  /* Section title */286  .section-title {287    font-size: 52px;288    font-weight: 800;289    margin: 24px 0 20px;290    color: #DDEAF2;291  }292 293  /* Statistic cards */294  .stats-grid {295    display: grid;296    grid-template-columns: 1fr 1fr;297    gap: 22px;298  }299  .stat-card {300    background: #111E24;301    border: 2px solid rgba(255,255,255,0.10);302    border-radius: 28px;303    height: 170px;304    padding: 26px;305    display: flex;306    align-items: center;307    gap: 24px;308  }309  .stat-icon {310    width: 70px;311    height: 70px;312    border-radius: 18px;313    background: #142A33;314    display: flex;315    align-items: center;316    justify-content: center;317  }318  .stat-icon svg {319    width: 44px;320    height: 44px;321    fill: #FFB24A;322  }323  .stat-icon .bolt {324    fill: #FFD44A;325  }326  .stat-text {327    display: flex;328    flex-direction: column;329  }330  .stat-value {331    font-size: 46px;332    font-weight: 800;333    color: #EAF7FF;334    line-height: 1.1;335  }336  .stat-label {337    font-size: 30px;338    color: #93A9B6;339    margin-top: 6px;340  }341 342  /* Find friends card */343  .friends-card {344    margin-top: 28px;345    background: #0F1A21;346    border-radius: 28px;347    border: 2px solid rgba(255,255,255,0.10);348    padding: 26px;349    display: flex;350    gap: 26px;351    align-items: center;352  }353  .img-placeholder {354    width: 180px;355    height: 180px;356    background: #E0E0E0;357    border: 1px solid #BDBDBD;358    border-radius: 18px;359    display: flex;360    align-items: center;361    justify-content: center;362    color: #757575;363    font-weight: 700;364    text-align: center;365    padding: 12px;366  }367  .friends-text {368    flex: 1;369  }370  .friends-title {371    font-size: 46px;372    font-weight: 800;373    margin-bottom: 10px;374    color: #EAF7FF;375  }376  .friends-desc {377    font-size: 34px;378    color: #99ACBA;379    line-height: 1.35;380  }381 382  /* Bottom navigation */383  .bottom-nav {384    position: absolute;385    bottom: 80px;386    left: 0;387    width: 100%;388    height: 140px;389    background: rgba(17, 30, 36, 0.95);390    border-top-left-radius: 26px;391    border-top-right-radius: 26px;392    display: flex;393    justify-content: space-around;394    align-items: center;395    padding: 0 60px;396  }397  .nav-item {398    width: 92px;399    height: 92px;400    border-radius: 22px;401    background: #15242B;402    border: 2px solid rgba(255,255,255,0.10);403    display: flex;404    align-items: center;405    justify-content: center;406  }407  .nav-item.active {408    border-color: #7FC2E8;409    box-shadow: 0 0 0 6px rgba(127,194,232,0.15) inset;410  }411  .nav-item svg {412    width: 50px;413    height: 50px;414    fill: #EAD66B;415  }416  .nav-item .shield { fill: #D7B57C; }417  .nav-item .user { fill: #A0C1FF; }418  .nav-item .chest { fill: #E8B85A; }419  .nav-item .bell  { fill: #F2C04A; }420 421  /* gesture bar */422  .gesture {423    position: absolute;424    bottom: 20px;425    left: 50%;426    width: 320px;427    height: 16px;428    transform: translateX(-50%);429    background: #EAEFF2;430    border-radius: 8px;431    opacity: 0.75;432  }433</style>434</head>435<body>436<div id="render-target">437 438  <div class="hero">439    <div class="status-bar">440      <div class="time">5:54</div>441      <div class="status-icons">442        <div class="icon-circle"></div>443        <div class="icon-circle"></div>444        <div class="icon-circle"></div>445        <div class="wifi"></div>446        <div class="battery"><div class="battery-level"></div></div>447      </div>448    </div>449    <div class="gear">⚙</div>450    <div class="avatar-silhouette"></div>451  </div>452 453  <div class="content">454    <div class="name-row">455      <div class="name">Fabio Teixeira</div>456      <div class="flags">457        <div class="flag br">BR</div>458        <div class="flag fr">FR</div>459      </div>460    </div>461 462    <div class="subline">FabioTeixe5546</div>463    <div class="subline">Joined October 2023</div>464 465    <div class="follow-row">466      <div><span class="count">0</span>Following</div>467      <div><span class="count">0</span>Followers</div>468    </div>469 470    <div class="action-row">471      <div class="add-btn">472        <div class="add-icon"></div>473        ADD FRIENDS474      </div>475      <div class="share-box" title="Share Profile">476        <svg viewBox="0 0 24 24">477          <path d="M12 4v9"></path>478          <path d="M8 8l4-4 4 4"></path>479          <rect x="5" y="13" width="14" height="8" rx="3" ry="3" stroke-linejoin="round"></rect>480        </svg>481      </div>482    </div>483 484    <div class="section-title">Statistics</div>485 486    <div class="stats-grid">487      <div class="stat-card">488        <div class="stat-icon">489          <svg viewBox="0 0 24 24">490            <path d="M12 2c3 4-1 6-1 9s3 4 3 7c0 3-3 4-6 3-4-1-5-5-3-8 2-4 6-7 7-11z"></path>491          </svg>492        </div>493        <div class="stat-text">494          <div class="stat-value">2</div>495          <div class="stat-label">Day streak</div>496        </div>497      </div>498 499      <div class="stat-card">500        <div class="stat-icon">501          <svg viewBox="0 0 24 24">502            <path class="bolt" d="M13 2L6 13h6l-1 9 7-12h-6l1-8z"></path>503          </svg>504        </div>505        <div class="stat-text">506          <div class="stat-value">50</div>507          <div class="stat-label">Total XP</div>508        </div>509      </div>510 511      <div class="stat-card">512        <div class="stat-icon">513          <svg viewBox="0 0 24 24">514            <path fill="#87B3E8" d="M12 2l6 3v5c0 5-2.5 8-6 12-3.5-4-6-7-6-12V5l6-3z"></path>515          </svg>516        </div>517        <div class="stat-text">518          <div class="stat-value" style="font-size:40px;">No Current</div>519          <div class="stat-label">Current league</div>520        </div>521      </div>522 523      <div class="stat-card">524        <div class="stat-icon">525          <svg viewBox="0 0 24 24">526            <circle cx="12" cy="8" r="4" fill="#A6D1FF"></circle>527            <path d="M6 20c0-3 3-6 6-6s6 3 6 6H6z" fill="#A6D1FF"></path>528          </svg>529        </div>530        <div class="stat-text">531          <div class="stat-value">0</div>532          <div class="stat-label">Top 3 finishes</div>533        </div>534      </div>535    </div>536 537    <div class="friends-card">538      <div class="img-placeholder">[IMG: Address book / contacts]</div>539      <div class="friends-text">540        <div class="friends-title">Find friends on Duolingo</div>541        <div class="friends-desc">542          Sync your contacts to easily find people you know on Duolingo.543        </div>544      </div>545    </div>546  </div>547 548  <div class="bottom-nav">549    <div class="nav-item">550      <svg viewBox="0 0 24 24">551        <path d="M12 3l9 8h-3v9H6v-9H3l9-8z"></path>552      </svg>553    </div>554    <div class="nav-item">555      <svg viewBox="0 0 24 24">556        <path class="shield" d="M12 2l8 4v6c0 6-5 9-8 10-3-1-8-4-8-10V6l8-4z"></path>557      </svg>558    </div>559    <div class="nav-item active">560      <svg viewBox="0 0 24 24">561        <circle class="user" cx="12" cy="8" r="5"></circle>562        <path class="user" d="M4 22c0-5 4-8 8-8s8 3 8 8H4z"></path>563      </svg>564    </div>565    <div class="nav-item">566      <svg viewBox="0 0 24 24">567        <path class="chest" d="M3 9h18v10H3z"></path>568        <path class="chest" d="M3 9l3-4h12l3 4z"></path>569      </svg>570    </div>571    <div class="nav-item">572      <svg viewBox="0 0 24 24">573        <path class="bell" d="M12 3c-3 0-5 2-5 5v4l-2 3h14l-2-3V8c0-3-2-5-5-5z"></path>574        <circle cx="12" cy="21" r="2" fill="#F2C04A"></circle>575      </svg>576    </div>577  </div>578 579  <div class="gesture"></div>580</div>581</body>582</html>