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>Learning Plan UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #1f2227;15    color: #f1f1f1;16  }17 18  /* Top status bar */19  .status-bar {20    height: 90px;21    padding: 0 36px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #cfd3d8;26    font-size: 40px;27  }28  .status-left, .status-right {29    display: flex;30    align-items: center;31    gap: 26px;32  }33  .status-icon {34    width: 44px; height: 44px;35    display: inline-flex; align-items: center; justify-content: center;36  }37  .status-icon svg { width: 44px; height: 44px; fill: none; stroke: #cfd3d8; stroke-width: 2.5; }38 39  /* Header greeting */40  .greeting {41    padding: 16px 44px 0 44px;42    font-weight: 800;43    font-size: 92px;44    letter-spacing: 0.2px;45  }46 47  /* Tabs */48  .tabs {49    margin-top: 24px;50    padding: 0 44px;51    display: flex;52    align-items: flex-end;53    gap: 60px;54  }55  .tab {56    color: #cfd3d8;57    font-size: 46px;58    padding-bottom: 20px;59  }60  .tab.active {61    color: #f7f7f7;62    position: relative;63  }64  .tab.active::after {65    content: "";66    position: absolute;67    left: 0; bottom: 0;68    width: 360px; height: 6px;69    background: #9aa0a6;70    border-radius: 3px;71  }72 73  /* Course header row */74  .course-header {75    margin-top: 42px;76    padding: 0 44px;77    display: flex;78    align-items: center;79    justify-content: space-between;80  }81  .course-left {82    display: flex;83    align-items: center;84    gap: 32px;85  }86  .course-icon {87    width: 150px; height: 150px;88    background: #E0E0E0; border: 1px solid #BDBDBD;89    border-radius: 50%;90    display: flex; align-items: center; justify-content: center;91    color: #757575; font-size: 30px; text-align: center; padding: 10px;92  }93  .course-text .title {94    font-size: 56px; font-weight: 700;95  }96  .course-text .sub {97    margin-top: 10px; font-size: 38px; color: #cfd3d8;98  }99  .info-btn {100    width: 72px; height: 72px; border-radius: 36px;101    display: flex; align-items: center; justify-content: center;102    background: rgba(255,255,255,0.06);103  }104  .info-btn svg { width: 44px; height: 44px; stroke: #cfd3d8; fill: none; stroke-width: 3; }105 106  /* Timeline and lesson cards */107  .timeline {108    position: relative;109    margin-top: 40px;110    padding: 0 44px 0 44px;111  }112  .timeline-line {113    position: absolute;114    left: 64px;115    top: 40px;116    width: 2px;117    height: 1360px;118    background: #7b8188;119    opacity: 0.4;120  }121 122  .lock-icon {123    position: absolute;124    left: 48px;125    width: 36px; height: 36px;126    display: flex; align-items: center; justify-content: center;127  }128  .lock-icon svg { width: 36px; height: 36px; stroke: #bfc5cb; fill: none; stroke-width: 2.6; }129 130  .card {131    margin-left: 120px;132    margin-right: 44px;133    margin-bottom: 54px;134    background: #2a2d33;135    border-radius: 40px;136    padding: 52px;137    box-shadow: 0 20px 40px rgba(0,0,0,0.35);138    position: relative;139  }140  .card .lesson {141    color: #aeb4bb;142    font-size: 36px;143  }144  .card .card-title {145    margin-top: 16px;146    font-size: 64px;147    font-weight: 800;148    line-height: 1.2;149    color: #f4f6f8;150  }151  .card .card-subtitle {152    margin-top: 20px;153    font-size: 44px;154    font-weight: 700;155    color: #dfe3e7;156  }157  .card .card-text {158    margin-top: 18px;159    font-size: 40px;160    color: #cfd3d8;161    line-height: 1.35;162  }163  .download {164    position: absolute;165    right: 40px;166    bottom: 36px;167    width: 64px; height: 64px;168    display: flex; align-items: center; justify-content: center;169    border-radius: 24px;170    background: rgba(255,255,255,0.06);171  }172  .download svg { width: 40px; height: 40px; stroke: #cfd3d8; fill: none; stroke-width: 3; }173 174  /* Promo banner */175  .promo {176    position: absolute;177    left: 0; right: 0;178    bottom: 240px;179    height: 120px;180    background: #214e34;181    display: flex; align-items: center;182    padding: 0 40px;183    color: #e8f3ea;184    font-size: 42px; font-weight: 600;185    gap: 24px;186    border-top: 2px solid rgba(255,255,255,0.08);187  }188  .promo-key {189    width: 72px; height: 72px; border-radius: 50%;190    background: #ff8a3a; display: flex; align-items: center; justify-content: center;191  }192  .promo-key svg { width: 46px; height: 46px; stroke: #1f2227; fill: none; stroke-width: 3; }193 194  /* Bottom navigation */195  .bottom-nav {196    position: absolute;197    left: 0; right: 0; bottom: 0;198    height: 220px;199    background: #22252a;200    border-top: 1px solid rgba(255,255,255,0.08);201    display: flex; align-items: center; justify-content: space-around;202    padding: 0 40px;203  }204  .nav-item {205    display: flex; flex-direction: column; align-items: center; gap: 20px;206    color: #cfd3d8; font-size: 34px;207  }208  .nav-item.active { color: #ff8a3a; }209  .nav-item svg { width: 56px; height: 56px; stroke-width: 3; stroke: currentColor; fill: none; }210 211  .progress-pill {212    position: absolute;213    bottom: 220px;214    left: 50%;215    transform: translateX(-50%);216    width: 220px; height: 14px;217    background: #e8e8ea; border-radius: 7px;218    opacity: 0.9;219  }220</style>221</head>222<body>223<div id="render-target">224 225  <!-- Status bar -->226  <div class="status-bar">227    <div class="status-left">228      <div style="font-weight:700;">1:36</div>229      <div class="status-icon" title="Mail">230        <svg viewBox="0 0 24 24">231          <rect x="3" y="5" width="18" height="14" rx="2"></rect>232          <path d="M3 7l9 6 9-6"></path>233        </svg>234      </div>235      <div class="status-icon" title="Video">236        <svg viewBox="0 0 24 24">237          <rect x="3" y="5" width="18" height="14" rx="3"></rect>238          <path d="M10 9l6 3-6 3V9z"></path>239        </svg>240      </div>241      <div class="status-icon" title="Cloud">242        <svg viewBox="0 0 24 24">243          <path d="M7 16h9a4 4 0 0 0 0-8 5.5 5.5 0 0 0-10.5 1"></path>244        </svg>245      </div>246    </div>247    <div class="status-right">248      <div class="status-icon" title="WiFi">249        <svg viewBox="0 0 24 24">250          <path d="M2 8c5-4 15-4 20 0"></path>251          <path d="M5 12c4-3 10-3 14 0"></path>252          <path d="M8 16c3-2 5-2 8 0"></path>253          <circle cx="12" cy="19" r="1.5" fill="#cfd3d8" stroke="none"></circle>254        </svg>255      </div>256      <div class="status-icon" title="Battery">257        <svg viewBox="0 0 24 24">258          <rect x="3" y="7" width="16" height="10" rx="2"></rect>259          <rect x="20" y="10" width="2" height="4" rx="1"></rect>260          <rect x="5" y="9" width="12" height="6" rx="1" fill="#cfd3d8" stroke="none"></rect>261        </svg>262      </div>263    </div>264  </div>265 266  <!-- Greeting -->267  <div class="greeting">Hi, Cerebra</div>268 269  <!-- Tabs -->270  <div class="tabs">271    <div class="tab">Today</div>272    <div class="tab active">Learning plan</div>273    <div style="flex:1; border-bottom: 2px solid transparent;"></div>274    <div class="status-icon" title="Profile" style="margin-right:44px;">275      <svg viewBox="0 0 24 24">276        <circle cx="12" cy="8" r="4"></circle>277        <path d="M4 20c2-4 14-4 16 0"></path>278      </svg>279    </div>280  </div>281 282  <!-- Course header -->283  <div class="course-header">284    <div class="course-left">285      <div class="course-icon">[IMG: Course icon]</div>286      <div class="course-text">287        <div class="title">Newcomer (A1) - Course 1</div>288        <div class="sub">0/9 lessons completed</div>289      </div>290    </div>291    <div class="info-btn" title="Info">292      <svg viewBox="0 0 24 24">293        <circle cx="12" cy="12" r="9"></circle>294        <path d="M12 8v.01M12 11v6"></path>295      </svg>296    </div>297  </div>298 299  <!-- Timeline and lesson cards -->300  <div class="timeline">301    <div class="timeline-line"></div>302 303    <!-- Lock icons on the line -->304    <div class="lock-icon" style="top: 120px;">305      <svg viewBox="0 0 24 24">306        <rect x="6" y="10" width="12" height="9" rx="2"></rect>307        <path d="M8 10V7a4 4 0 0 1 8 0v3"></path>308      </svg>309    </div>310    <div class="lock-icon" style="top: 660px;">311      <svg viewBox="0 0 24 24">312        <rect x="6" y="10" width="12" height="9" rx="2"></rect>313        <path d="M8 10V7a4 4 0 0 1 8 0v3"></path>314      </svg>315    </div>316 317    <!-- Lesson 3 card -->318    <div class="card" style="margin-top: 40px;">319      <div class="lesson">Lesson 3</div>320      <div class="card-title">Bienvenue ! Review</div>321      <div class="card-subtitle">Welcome!</div>322      <div class="card-text">323        Here you'll review:<br>324        the vocabulary from the previous two lessons325      </div>326      <div class="download" title="Download">327        <svg viewBox="0 0 24 24">328          <path d="M12 4v10"></path>329          <path d="M8 10l4 4 4-4"></path>330          <path d="M4 20h16"></path>331        </svg>332      </div>333    </div>334 335    <!-- Lesson 4 card -->336    <div class="card">337      <div class="lesson">Lesson 4</div>338      <div class="card-title">À Paris pour le<br>week-end ! Part 1</div>339      <div class="card-subtitle">In Paris for the weekend!</div>340      <div class="card-text">341        Here you'll learn:<br>342        personal pronouns in the singular343      </div>344      <div class="download" title="Download">345        <svg viewBox="0 0 24 24">346          <path d="M12 4v10"></path>347          <path d="M8 10l4 4 4-4"></path>348          <path d="M4 20h16"></path>349        </svg>350      </div>351    </div>352  </div>353 354  <!-- Promo banner -->355  <div class="promo">356    <div class="promo-key">357      <svg viewBox="0 0 24 24">358        <circle cx="9" cy="9" r="5"></circle>359        <path d="M13 9l8 8M17 13l4 4"></path>360      </svg>361    </div>362    <div>Unlock all French courses</div>363  </div>364 365  <!-- Progress pill above bottom nav -->366  <div class="progress-pill"></div>367 368  <!-- Bottom navigation -->369  <div class="bottom-nav">370    <div class="nav-item active">371      <svg viewBox="0 0 24 24">372        <path d="M3 10l9-7 9 7"></path>373        <path d="M5 10v9h14v-9"></path>374      </svg>375      <div>Home</div>376    </div>377    <div class="nav-item">378      <svg viewBox="0 0 24 24">379        <circle cx="12" cy="12" r="8"></circle>380        <circle cx="12" cy="12" r="3"></circle>381      </svg>382      <div>Review</div>383    </div>384    <div class="nav-item">385      <svg viewBox="0 0 24 24">386        <rect x="4" y="8" width="16" height="10" rx="2"></rect>387        <circle cx="9" cy="13" r="1.8" fill="currentColor" stroke="none"></circle>388        <circle cx="15" cy="13" r="1.8" fill="currentColor" stroke="none"></circle>389      </svg>390      <div>Live</div>391    </div>392    <div class="nav-item">393      <svg viewBox="0 0 24 24">394        <circle cx="12" cy="12" r="9"></circle>395        <path d="M12 12l5-2"></path>396      </svg>397      <div>Explore</div>398    </div>399  </div>400 401</div>402</body>403</html>