GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Mobile UI Render</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;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #F6F7F9;14    border-radius: 0;15  }16 17  /* Status bar */18  .status-bar {19    height: 120px;20    padding: 0 40px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #2E2E2E;25    font-weight: 600;26    font-size: 36px;27  }28  .status-left, .status-right { display: flex; align-items: center; gap: 28px; }29  .dot { width: 12px; height: 12px; background:#4a4a4a; border-radius:50%; }30  .wifi, .battery, .location {31    width: 38px; height: 38px;32  }33  .wifi svg, .battery svg, .location svg { width: 100%; height: 100%; }34 35  /* App header */36  .app-header {37    padding: 10px 40px 0 40px;38  }39  .top-row {40    display: flex;41    align-items: center;42    justify-content: space-between;43  }44  .flag {45    display: flex;46    align-items: center;47    gap: 22px;48  }49  .flag-badge {50    width: 78px; height: 78px; border-radius: 50%;51    background: #2FB344;52    display:flex; align-items:center; justify-content:center;53    box-shadow: 0 2px 0 rgba(0,0,0,0.08) inset;54  }55  .flag-badge span {56    width: 52px; height: 52px; border-radius: 50%;57    background: radial-gradient(circle at 30% 30%, #FFD54F 0, #FFD54F 50%, #1E88E5 50%, #1E88E5 100%);58    display:block;59    border: 3px solid #0F6B2C;60  }61  .header-icons { display:flex; align-items:center; gap: 28px; }62  .shield {63    width: 68px; height: 68px; border-radius: 18px; background:#1E5DFF;64    display:flex; align-items:center; justify-content:center;65    box-shadow: 0 10px 20px rgba(30,93,255,0.25);66  }67  .bell {68    width: 68px; height: 68px; border-radius: 20px; border:2px solid #7EA7FF; display:flex; align-items:center; justify-content:center;69    color:#1E5DFF;70  }71  .bell svg { width: 40px; height: 40px; }72 73  .course-title {74    margin-top: 18px;75    display:flex; align-items:center; gap: 14px;76    font-size: 46px; font-weight: 800; color:#1F2937;77  }78  .dropdown {79    width: 26px; height: 26px;80  }81  .progress-wrap {82    margin-top: 16px;83    display:flex; align-items:center; gap: 20px;84  }85  .progress-label {86    background: #E6F7EC;87    color: #2FB344;88    font-weight: 700;89    font-size: 32px;90    padding: 12px 20px;91    border-radius: 28px;92  }93  .progress-bar {94    flex: 1;95    height: 26px; background:#D9DDE6; border-radius: 20px; overflow:hidden;96  }97  .progress-bar .fill { width: 9%; height: 100%; background:#9EA6B8; }98 99  /* Premium banner */100  .premium-banner {101    margin: 22px 0;102    height: 120px;103    background:#4B2CF0;104    border-radius: 28px;105    display:flex; align-items:center; gap: 18px;106    padding: 0 34px;107    color:#fff; font-weight: 800; font-size: 42px;108  }109  .cart-icon {110    width: 68px; height: 68px; border-radius: 16px; background: rgba(255,255,255,0.15);111    display:flex; align-items:center; justify-content:center;112  }113  .cart-icon svg { width: 40px; height: 40px; fill:#fff; }114 115  /* Chapter section */116  .chapter {117    padding: 0 40px;118  }119  .chapter h2 {120    margin: 6px 0 10px 0;121    font-size: 64px; font-weight: 900; color:#1F2937;122  }123  .chapter .summary {124    font-size: 34px; color:#485062; margin-bottom: 28px;125  }126 127  /* Lessons list */128  .lessons {129    position: relative;130    margin-left: 20px;131    padding-left: 24px;132  }133  .lesson {134    display:flex; align-items:center; justify-content:space-between;135    margin-bottom: 60px;136  }137  .lesson-left { display:flex; align-items:center; gap: 28px; }138  .ring {139    width: 180px; height: 180px; border-radius: 50%;140    border: 20px solid #23C45E;141    display:flex; align-items:center; justify-content:center;142    position: relative;143    background:#fff;144  }145  .avatar {146    width: 130px; height: 130px; background:#E0E0E0; border:1px solid #BDBDBD;147    border-radius: 50%; color:#757575; font-size: 26px;148    display:flex; align-items:center; justify-content:center; text-align:center; padding:8px;149  }150  .check {151    position: absolute; right:-6px; bottom:-6px; width: 64px; height:64px; background:#23C45E; border-radius:50%;152    display:flex; align-items:center; justify-content:center; box-shadow: 0 6px 12px rgba(0,0,0,0.15);153  }154  .check svg { width:36px; height:36px; fill:#fff; }155  .lesson-title {156    font-size: 50px; font-weight: 800; color:#1F2937;157  }158  .cloud-btn { width: 70px; height: 70px; display:flex; align-items:center; justify-content:center; }159  .cloud-btn svg { width: 58px; height: 58px; stroke:#1E5DFF; fill:none; stroke-width: 6px; }160 161  .connector {162    position: absolute;163    left: 102px;164    top: 190px;165    width: 12px; height: 180px; background:#23C45E; border-radius: 6px;166  }167 168  /* Bottom sheet modal */169  .sheet {170    position: absolute;171    left: 0; right: 0; bottom: 200px;172    margin: 0 auto;173    width: 100%;174    height: 700px;175    background:#fff;176    border-top-left-radius: 40px;177    border-top-right-radius: 40px;178    box-shadow: 0 -20px 40px rgba(0,0,0,0.08);179    padding: 60px 50px;180  }181  .sheet .illustration {182    width: 180px; height: 180px; border-radius: 40px; background:#EAF1FF; border: 2px dashed #BBD0FF;183    display:flex; align-items:center; justify-content:center; margin: 0 auto 40px auto;184  }185  .sheet .illustration svg { width: 120px; height: 120px; stroke:#1E5DFF; stroke-width: 10px; fill:none; }186  .sheet h3 {187    text-align:center; font-size: 60px; font-weight: 900; margin: 0 0 24px 0; color:#1F2937;188  }189  .sheet p {190    text-align:center; font-size: 36px; color:#546070; margin: 0 60px 40px 60px; line-height: 1.35;191  }192  .sheet .actions {193    display:flex; flex-direction:column; gap: 26px; padding: 0 20px;194  }195  .primary-btn {196    height: 120px; border-radius: 64px; background:#2E67FF; color:#fff; font-size: 44px; font-weight: 800; border:none;197    box-shadow: 0 12px 24px rgba(46,103,255,0.35);198  }199  .ghost-btn {200    height: 120px; border-radius: 64px; border: 3px solid #CBD5E1; background:#fff; color:#1F2937; font-size: 44px; font-weight: 800;201  }202 203  /* Bottom nav */204  .bottom-nav {205    position: absolute;206    bottom: 0; left: 0; right: 0;207    height: 220px;208    background:#FFFFFF;209    border-top-left-radius: 28px; border-top-right-radius: 28px;210    box-shadow: 0 -8px 24px rgba(0,0,0,0.06);211    padding-top: 26px;212  }213  .nav-items {214    display:flex; justify-content: space-around; align-items: center;215    padding: 0 40px;216  }217  .nav-item {218    display:flex; flex-direction: column; align-items:center; gap: 12px; color:#1F2937;219  }220  .nav-item.active { color:#1E5DFF; }221  .nav-item svg { width: 64px; height: 64px; }222  .nav-label { font-size: 28px; font-weight: 700; }223  .home-pill {224    position: absolute; left: 50%; transform: translateX(-50%);225    bottom: 20px; width: 420px; height: 16px; background:#C9CDD6; border-radius: 16px;226  }227</style>228</head>229<body>230<div id="render-target">231 232  <!-- Status Bar -->233  <div class="status-bar">234    <div class="status-left">235      <span>6:11</span>236      <svg class="location" viewBox="0 0 24 24"><path d="M12 2l6 6-6 14-6-14 6-6z" fill="#4a4a4a"/></svg>237      <div class="dot"></div>238      <svg class="wifi" viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M8 16c2-2 6-2 8 0M12 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4" stroke="#4a4a4a" stroke-width="2" fill="none" stroke-linecap="round"/></svg>239      <svg class="battery" viewBox="0 0 24 24"><rect x="1" y="6" width="18" height="12" rx="2" ry="2" stroke="#4a4a4a" stroke-width="2" fill="none"/><rect x="3" y="8" width="10" height="8" fill="#4a4a4a"/><rect x="20" y="10" width="3" height="6" rx="1" fill="#4a4a4a"/></svg>240      <span style="font-weight:700;">100%</span>241    </div>242    <div class="status-right"></div>243  </div>244 245  <!-- App Header -->246  <div class="app-header">247    <div class="top-row">248      <div class="flag">249        <div class="flag-badge"><span></span></div>250      </div>251      <div class="header-icons">252        <div class="shield">253          <svg viewBox="0 0 24 24"><path d="M12 2l8 4v6c0 5-4 8-8 10-4-2-8-5-8-10V6l8-4z" fill="#fff" opacity="0.8"/></svg>254        </div>255        <div class="bell">256          <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zm8-6V11a8 8 0 1 0-16 0v5l-2 2h20l-2-2z" fill="#1E5DFF"/></svg>257        </div>258      </div>259    </div>260 261    <div class="course-title">262      <span>Beginner A1</span>263      <svg class="dropdown" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#64748B" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>264    </div>265 266    <div class="progress-wrap">267      <div class="progress-label">3%</div>268      <div class="progress-bar"><div class="fill"></div></div>269    </div>270 271    <div class="premium-banner">272      <div class="cart-icon">273        <svg viewBox="0 0 24 24"><path d="M3 3h2l3 12h10l2-8H7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>274      </div>275      <div>Try Premium for free</div>276    </div>277  </div>278 279  <!-- Chapter -->280  <div class="chapter">281    <h2>Chapter 1</h2>282    <div class="summary">2/6 lessons completed</div>283 284    <div class="lessons">285      <div class="lesson">286        <div class="lesson-left">287          <div class="ring">288            <div class="avatar">[IMG: Lesson avatar]</div>289            <div class="check"><svg viewBox="0 0 24 24"><path d="M20 6l-11 11-5-5" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></div>290          </div>291          <div class="lesson-title">Olá!</div>292        </div>293        <div class="cloud-btn">294          <svg viewBox="0 0 24 24">295            <path d="M7 16c-3 0-4-4-1-5 1-3 6-4 8-1 3-1 6 2 5 5-1 3-4 3-7 3" stroke="#1E5DFF" fill="none" stroke-width="2" stroke-linecap="round"/>296            <path d="M12 10v6m0 0l-3-3m3 3l3-3" stroke="#1E5DFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>297          </svg>298        </div>299      </div>300 301      <div class="connector"></div>302 303      <div class="lesson">304        <div class="lesson-left">305          <div class="ring">306            <div class="avatar">[IMG: Lesson avatar]</div>307            <div class="check"><svg viewBox="0 0 24 24"><path d="M20 6l-11 11-5-5" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></div>308          </div>309          <div class="lesson-title">Saying your name</div>310        </div>311        <div class="cloud-btn">312          <svg viewBox="0 0 24 24">313            <path d="M7 16c-3 0-4-4-1-5 1-3 6-4 8-1 3-1 6 2 5 5-1 3-4 3-7 3" stroke="#1E5DFF" fill="none" stroke-width="2" stroke-linecap="round"/>314            <path d="M12 10v6m0 0l-3-3m3 3l3-3" stroke="#1E5DFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>315          </svg>316        </div>317      </div>318    </div>319  </div>320 321  <!-- Bottom Sheet Modal -->322  <div class="sheet">323    <div class="illustration">324      <svg viewBox="0 0 24 24">325        <rect x="6" y="2" width="12" height="20" rx="2"></rect>326        <path d="M12 7v8m0 0l-3-3m3 3l3-3" stroke-linecap="round" stroke-linejoin="round"></path>327      </svg>328    </div>329    <h3>Unlock Offline Mode</h3>330    <p>Upgrade to Premium to download chapters and learn anywhere, anytime</p>331    <div class="actions">332      <button class="primary-btn">Upgrade now</button>333      <button class="ghost-btn">Not now</button>334    </div>335  </div>336 337  <!-- Bottom Navigation -->338  <div class="bottom-nav">339    <div class="nav-items">340      <div class="nav-item active">341        <svg viewBox="0 0 24 24"><path d="M4 20V8l8-5 8 5v12H4z" fill="#1E5DFF"/></svg>342        <div class="nav-label">Learn</div>343      </div>344      <div class="nav-item">345        <svg viewBox="0 0 24 24"><path d="M4 20h4V10H4v10zm6 0h4V6h-4v14zm6 0h4V14h-4v6z" fill="#64748B"/></svg>346        <div class="nav-label">Progress</div>347      </div>348      <div class="nav-item">349        <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4 2 7-6.5-4.5L6 20l2-7L2 9h7l3-7z" fill="#64748B"/></svg>350        <div class="nav-label">Crown</div>351      </div>352      <div class="nav-item">353        <svg viewBox="0 0 24 24"><path d="M3 20h18v-2a8 8 0 0 0-18 0v2zM12 10a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" fill="#64748B"/></svg>354        <div class="nav-label">Profile</div>355      </div>356    </div>357    <div class="home-pill"></div>358  </div>359 360</div>361</body>362</html>