GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Duolingo Profile Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0f1f25;13    color: #e8f3f6;14    font-family: "Segoe UI", Arial, sans-serif;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 96px;24    padding: 0 36px;25    box-sizing: border-box;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #dfe8ec;30    font-size: 34px;31    letter-spacing: 0.5px;32  }33  .status-right {34    display: flex;35    align-items: center;36    gap: 22px;37  }38  .dot { width: 10px; height: 10px; background:#cfe5ee; border-radius: 50%; display:inline-block; }39 40  /* Header / avatar area */41  .header-area {42    position: absolute;43    top: 96px;44    left: 0;45    width: 1080px;46    height: 520px;47    background: #172b31;48  }49  .gear {50    position: absolute;51    top: 70px;52    right: 64px;53    width: 64px;54    height: 64px;55    opacity: 0.95;56  }57  .avatar-wrap {58    position: absolute;59    left: 50%;60    top: 40px;61    transform: translateX(-50%);62    width: 420px;63    height: 420px;64    border-radius: 220px;65    border: 4px dashed #5f8692;66    background: #2b4b56;67    display: flex;68    align-items: center;69    justify-content: center;70    color: #b8d1da;71    box-shadow: inset 0 0 0 6px rgba(255,255,255,0.02);72  }73  .avatar-wrap span {74    font-size: 28px;75    opacity: 0.9;76  }77 78  /* Profile text section */79  .content {80    position: absolute;81    top: 616px;82    left: 0;83    width: 100%;84    padding: 0 48px;85    box-sizing: border-box;86  }87  .name {88    font-size: 62px;89    font-weight: 800;90    margin: 0 0 8px 0;91    color: #f2fbff;92  }93  .sub {94    font-size: 34px;95    color: #b4c7cd;96    margin: 8px 0;97  }98  .flag-row {99    position: absolute;100    right: 48px;101    top: -14px;102    display: flex;103    gap: 18px;104  }105  .flag {106    width: 90px;107    height: 60px;108    border-radius: 12px;109    border: 2px solid #25424a;110    overflow: hidden;111  }112  .flag.br { background:113      radial-gradient(circle at 55% 55%, #0f4aa1 0 26px, transparent 27px) ,114      linear-gradient(#009b3a,#009b3a);115      background-size: 100% 100%;116      position: relative;117  }118  .flag.br::after{ content:""; position:absolute; left:8px; right:8px; top:16px; bottom:16px;119    transform: rotate(25deg);120    background: #ffdf00; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);121    opacity: 0.9;122  }123  .flag.fr { background: linear-gradient(90deg,#2552ff 0 33%,#ffffff 33% 66%,#ff4b4b 66%); }124 125  .follow-row {126    display: flex;127    gap: 54px;128    margin: 20px 0 28px 0;129    font-size: 36px;130    color: #cfe0e6;131  }132 133  /* Add friends */134  .friends-row {135    display: flex;136    align-items: stretch;137    gap: 22px;138    margin-top: 12px;139  }140  .btn-add {141    flex: 1;142    background: #14262b;143    border: 1px solid #29414a;144    height: 130px;145    border-radius: 28px;146    display: flex;147    align-items: center;148    padding: 0 36px;149    box-sizing: border-box;150    gap: 22px;151  }152  .btn-add .label {153    font-size: 42px;154    letter-spacing: 1px;155    color: #9ec9da;156    font-weight: 800;157  }158  .share-btn {159    width: 140px;160    background: #14262b;161    border: 1px solid #29414a;162    border-radius: 28px;163    display: flex;164    align-items: center;165    justify-content: center;166  }167 168  .divider {169    width: 100%;170    height: 1px;171    background:#24373f;172    margin: 36px 0 18px 0;173  }174 175  .section-title {176    font-size: 54px;177    font-weight: 800;178    margin: 18px 0 24px 0;179  }180 181  /* Stats grid */182  .stats-grid {183    display: grid;184    grid-template-columns: 1fr 1fr;185    gap: 26px;186  }187  .stat-card {188    background: #132227;189    border: 1px solid #29424a;190    height: 180px;191    border-radius: 28px;192    padding: 26px;193    box-sizing: border-box;194    display: flex;195    align-items: center;196    gap: 28px;197  }198  .stat-value {199    font-size: 54px;200    font-weight: 800;201    margin-bottom: 4px;202  }203  .stat-label {204    font-size: 32px;205    color: #a8bec6;206  }207 208  /* Friend finder card */209  .finder-card {210    margin-top: 28px;211    background: #132a31;212    border: 1px solid #29414a;213    border-radius: 28px;214    padding: 26px;215    display: flex;216    gap: 26px;217    align-items: center;218  }219  .book-img {220    width: 160px;221    height: 160px;222    background: #E0E0E0;223    border: 1px solid #BDBDBD;224    border-radius: 16px;225    color: #757575;226    display: flex;227    align-items: center;228    justify-content: center;229    text-align: center;230    font-size: 26px;231    line-height: 1.1;232  }233  .finder-card h3 {234    margin: 0 0 6px 0;235    font-size: 46px;236  }237  .finder-card p {238    margin: 0;239    color: #b4c7cd;240    font-size: 32px;241  }242 243  /* Bottom tab bar */244  .tabbar {245    position: absolute;246    bottom: 0;247    left: 0;248    width: 1080px;249    height: 150px;250    background: #0c1a1f;251    border-top: 1px solid #20343b;252    display: flex;253    align-items: center;254    justify-content: space-around;255    padding-bottom: 6px;256    box-sizing: border-box;257  }258  .tab {259    width: 120px;260    height: 120px;261    border-radius: 26px;262    display: flex;263    align-items: center;264    justify-content: center;265  }266  .tab.active {267    background: rgba(67,141,169,0.25);268    border: 1px solid #2d4b55;269  }270 271  /* Simple icon styling */272  svg { display: block; }273 274</style>275</head>276<body>277<div id="render-target">278 279  <!-- Status bar -->280  <div class="status-bar">281    <div>5:50</div>282    <div class="status-right">283      <!-- Simple placeholders for status icons -->284      <span class="dot"></span>285      <span class="dot" style="width:14px;height:14px;"></span>286      <span class="dot"></span>287      <div style="display:flex;align-items:center;gap:6px;">288        <svg width="30" height="18" viewBox="0 0 30 18"><rect x="1" y="4" width="22" height="12" rx="3" fill="none" stroke="#dfe8ec" stroke-width="2"></rect><rect x="25" y="7" width="4" height="6" rx="1" fill="#dfe8ec"></rect></svg>289        <div>96%</div>290      </div>291    </div>292  </div>293 294  <!-- Header / avatar area -->295  <div class="header-area">296    <!-- Settings gear -->297    <svg class="gear" viewBox="0 0 24 24" fill="none" stroke="#e6f3f6" stroke-width="2">298      <circle cx="12" cy="12" r="3"></circle>299      <path d="M19.4 15a1 1 0 0 0 .2 1.1l.1.2a1 1 0 0 1-1.2 1.6l-.2-.1a1 1 0 0 0-1.2.2l-.6.6a1 1 0 0 1-1.6-1.2l.1-.2a1 1 0 0 0-.2-1.2l-.4-.2a1 1 0 0 0-1.1 0l-.4.2a1 1 0 0 0-.2 1.2l.1.2a1 1 0 0 1-1.6 1.2l-.6-.6a1 1 0 0 0-1.2-.2l-.2.1a1 1 0 0 1-1.2-1.6l.1-.2a1 1 0 0 0 .2-1.1l-.2-.4a1 1 0 0 0-1.2-.5l-.2.1A1 1 0 0 1 3 12l.2-.2a1 1 0 0 0 .5-1.2l-.2-.4a1 1 0 0 0-1.1-.2l-.2.1A1 1 0 1 1 1 7.9l.2-.1a1 1 0 0 0 1.2-.2l.6-.6A1 1 0 0 1 4.6 9l-.1.2a1 1 0 0 0 .2 1.2l.4.2a1 1 0 0 0 1.1 0l.4-.2a1 1 0 0 0 .2-1.2l-.1-.2A1 1 0 0 1 8.3 7l.6.6a1 1 0 0 0 1.2.2l.2-.1A1 1 0 1 1 12 10l-.2.1a1 1 0 0 0-.2 1.1l.2.4a1 1 0 0 0 1.2.5l.2-.1A1 1 0 0 1 16 13.7l-.2.2a1 1 0 0 0-.5 1.2l.2.4a1 1 0 0 0 1.1.2l.2-.1A1 1 0 0 1 19.4 15z"></path>300    </svg>301 302    <div class="avatar-wrap">303      <span>[IMG: Silhouette Avatar]</span>304    </div>305  </div>306 307  <!-- Content -->308  <div class="content">309    <div class="flag-row">310      <div class="flag br" title="Brazil"></div>311      <div class="flag fr" title="France"></div>312    </div>313    <h1 class="name">Fabio Teixeira</h1>314    <div class="sub">FabioTeixe5546</div>315    <div class="sub">Joined October 2023</div>316 317    <div class="follow-row">318      <div>0 Following</div>319      <div>0 Followers</div>320    </div>321 322    <div class="friends-row">323      <div class="btn-add">324        <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="#9ec9da" stroke-width="2">325          <circle cx="9" cy="8" r="4"></circle>326          <path d="M3 20c0-3.3 2.7-6 6-6"></path>327          <path d="M16 11v4"></path>328          <path d="M14 13h4"></path>329        </svg>330        <div class="label">ADD FRIENDS</div>331      </div>332      <div class="share-btn">333        <svg width="54" height="54" viewBox="0 0 24 24" fill="none" stroke="#9ec9da" stroke-width="2">334          <path d="M4 13v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-6"></path>335          <path d="M12 3v12"></path>336          <path d="M7 8l5-5 5 5"></path>337        </svg>338      </div>339    </div>340 341    <div class="divider"></div>342 343    <div class="section-title">Statistics</div>344 345    <div class="stats-grid">346      <div class="stat-card">347        <svg width="64" height="64" viewBox="0 0 24 24" fill="#ffb24c">348          <path d="M13 3s-1 2-1 3.5S14 9 14 11s-1.5 4-5 4c-2.2 0-4-1.8-4-4 0-2.7 2-4 2-4s-.1 1.7 1 2c.7.2 2-3 5-6z"></path>349          <path d="M9 21c3.5 0 6-2.2 6-5 0-2-1.6-3.1-1.6-3.1-.2 2.6-2.1 3.8-4.4 3.8-1.1 0-1.9-.3-2.6-.8C6.5 18.5 7.4 21 9 21z" fill="#ffcc66"></path>350        </svg>351        <div>352          <div class="stat-value">2</div>353          <div class="stat-label">Day streak</div>354        </div>355      </div>356 357      <div class="stat-card">358        <svg width="64" height="64" viewBox="0 0 24 24" fill="#ffe04a">359          <path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z"></path>360        </svg>361        <div>362          <div class="stat-value">50</div>363          <div class="stat-label">Total XP</div>364        </div>365      </div>366 367      <div class="stat-card">368        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#9ec9da" stroke-width="2">369          <path d="M12 2l7 4v6c0 5-3.5 8.5-7 10-3.5-1.5-7-5-7-10V6l7-4z"></path>370        </svg>371        <div>372          <div class="stat-value" style="font-size:46px">No Current</div>373          <div class="stat-label">Current league</div>374        </div>375      </div>376 377      <div class="stat-card">378        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#9ec9da" stroke-width="2">379          <circle cx="12" cy="8" r="4"></circle>380          <path d="M6 22l6-3 6 3-2-7 5-4h-6l-3-6-3 6H3l5 4-2 7z"></path>381        </svg>382        <div>383          <div class="stat-value">0</div>384          <div class="stat-label">Top 3 finishes</div>385        </div>386      </div>387    </div>388 389    <div class="finder-card">390      <div class="book-img">[IMG: Contact Book]</div>391      <div>392        <h3>Find friends on Duolingo</h3>393        <p>Sync your contacts to easily find people you know on Duolingo.</p>394      </div>395    </div>396 397  </div>398 399  <!-- Bottom tab bar -->400  <div class="tabbar">401    <div class="tab">402      <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#f1f7f9" stroke-width="2">403        <path d="M3 11l9-8 9 8v9a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-5H9v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9z"></path>404      </svg>405    </div>406    <div class="tab">407      <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#dfe8ec" stroke-width="2">408        <path d="M12 2l8 4v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-4z"></path>409      </svg>410    </div>411    <div class="tab active">412      <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#9ec9da" stroke-width="2">413        <circle cx="12" cy="8" r="4"></circle>414        <path d="M4 22c0-4.4 3.6-8 8-8s8 3.6 8 8"></path>415      </svg>416    </div>417    <div class="tab">418      <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#f1f7f9" stroke-width="2">419        <rect x="4" y="4" width="16" height="12" rx="2"></rect>420        <path d="M8 16v4l4-2 4 2v-4"></path>421      </svg>422    </div>423    <div class="tab">424      <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#f1f7f9" stroke-width="2">425        <path d="M10 21a2 2 0 1 0 4 0"></path>426        <path d="M18 8a6 6 0 1 0-12 0c0 3-1 4-1 6a7 7 0 0 0 14 0c0-2-1-3-1-6z"></path>427      </svg>428    </div>429  </div>430 431</div>432</body>433</html>