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>Khan Academy - Mock UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    color: #1f2937;15  }16 17  /* Top status bar */18  .status-bar {19    height: 92px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #2c2c2c;25    font-size: 34px;26  }27  .status-icons { display: flex; gap: 24px; align-items: center; }28  .status-icons svg { width: 36px; height: 36px; fill: #333; }29 30  /* App header */31  .app-header {32    position: relative;33    height: 128px;34    display: flex;35    align-items: center;36    justify-content: center;37    border-bottom: 1px solid #eee;38  }39  .app-header .title {40    font-weight: 700;41    font-size: 52px;42    letter-spacing: 0.2px;43  }44  .settings-btn {45    position: absolute;46    right: 36px;47    top: 50%;48    transform: translateY(-50%);49    width: 64px;50    height: 64px;51    display: flex;52    align-items: center;53    justify-content: center;54    border-radius: 32px;55  }56  .settings-btn svg { width: 48px; height: 48px; fill: #2b6df3; }57 58  /* Content sections */59  .content { padding-bottom: 220px; } /* space for tab bar */60  .section { padding: 28px 40px 8px 40px; }61  .section-title {62    font-size: 44px;63    font-weight: 700;64    margin: 20px 0 16px 0;65  }66 67  /* Lesson items */68  .lesson {69    display: flex;70    align-items: flex-start;71    gap: 26px;72    padding: 32px 0;73    border-top: 1px solid #f0f0f0;74  }75  .lesson:first-of-type { border-top: none; }76  .lesson .icon {77    width: 96px;78    height: 96px;79    border-radius: 48px;80    background: #4caf50;81    display: flex;82    align-items: center;83    justify-content: center;84  }85  .lesson .icon svg { width: 58px; height: 58px; fill: #ffffff; }86  .lesson .texts { flex: 1; }87  .lesson .subtitle {88    font-size: 32px;89    color: #6b7280;90    margin-bottom: 8px;91  }92  .lesson .title {93    font-size: 42px;94    line-height: 1.28;95  }96  .lesson .more {97    width: 60px;98    height: 60px;99    border-radius: 30px;100    background: #f3f4f6;101    display: flex;102    align-items: center;103    justify-content: center;104    margin-left: 12px;105    margin-top: 12px;106  }107  .lesson .more svg { width: 24px; height: 24px; fill: #6b7280; }108 109  /* My courses header with action */110  .row-between {111    display: flex;112    align-items: center;113    justify-content: space-between;114  }115  .edit-link {116    color: #2b6df3;117    font-size: 38px;118    text-decoration: none;119  }120 121  /* Course item */122  .course-item {123    display: flex;124    align-items: center;125    gap: 28px;126    padding: 26px 0 30px 0;127  }128  .course-item .icon {129    width: 108px;130    height: 108px;131    border-radius: 54px;132    background: #5fbf7a;133    display: flex; align-items: center; justify-content: center;134  }135  .course-item .icon svg { width: 64px; height: 64px; fill: #fff; }136  .course-item .name {137    font-size: 44px;138    font-weight: 600;139  }140 141  /* Kids banner */142  .kids-banner {143    margin-top: 16px;144    border-top: 1px solid #eee;145    padding-top: 10px;146  }147  .img-placeholder {148    width: 100%;149    height: 700px;150    background: #E0E0E0;151    border: 1px solid #BDBDBD;152    color: #757575;153    display: flex;154    align-items: center;155    justify-content: center;156    font-size: 36px;157    border-radius: 12px;158  }159  .kids-title {160    text-align: center;161    font-size: 56px;162    font-weight: 800;163    margin-top: 26px;164  }165  .kids-desc {166    text-align: center;167    font-size: 40px;168    color: #444;169    margin-top: 12px;170    padding: 0 40px 0 40px;171  }172 173  /* Bottom navigation */174  .tab-bar {175    position: absolute;176    left: 0;177    bottom: 0;178    width: 100%;179    height: 180px;180    border-top: 1px solid #e6e6e6;181    background: #ffffff;182    display: flex;183    align-items: center;184    justify-content: space-around;185  }186  .tab-item {187    width: 33.33%;188    height: 100%;189    display: flex;190    flex-direction: column;191    align-items: center;192    justify-content: center;193    gap: 10px;194    color: #6b7280;195    font-size: 32px;196  }197  .tab-item svg { width: 58px; height: 58px; }198  .tab-item.active { color: #2b6df3; }199  .active-indicator {200    position: absolute;201    top: -4px;202    left: 8%;203    width: 24%;204    height: 8px;205    background: #2b6df3;206    border-radius: 4px;207  }208</style>209</head>210<body>211<div id="render-target">212 213  <!-- Status bar -->214  <div class="status-bar">215    <div class="time">9:11</div>216    <div class="status-icons">217      <!-- WiFi -->218      <svg viewBox="0 0 24 24">219        <path d="M12 20.5c.9 0 1.6-.7 1.6-1.6S12.9 17.3 12 17.3s-1.6.7-1.6 1.6.7 1.6 1.6 1.6zM4 9.7l1.4 1.4C7.5 9 9.7 8 12 8s4.5 1 6.6 3.1L20 9.7C17.6 7.3 14.9 6 12 6S6.4 7.3 4 9.7zm4 4l1.4 1.4c1.3-1.3 2.9-2 4.6-2 1.7 0 3.3.7 4.6 2L20 13.7c-2-2-4.6-3.1-8-3.1s-6 1.1-8 3.1z"/>220      </svg>221      <!-- Battery -->222      <svg viewBox="0 0 24 24">223        <path d="M16 7h1c1.1 0 2 .9 2 2v6c0 1.1-.9 2-2 2H7c-1.1 0-2-.9-2-2V9c0-1.1.9-2 2-2h9zM3 10h1v4H3v-4zm5 1v2h7v-2H8z"/>224      </svg>225    </div>226  </div>227 228  <!-- Header -->229  <div class="app-header">230    <div class="title">Khan Academy</div>231    <div class="settings-btn" aria-label="Settings">232      <svg viewBox="0 0 24 24">233        <path d="M19.4 13.5c.1-.5.1-1 .1-1.5s0-1-.1-1.5l2-1.5c.2-.2.2-.5.1-.7l-1.9-3.2c-.1-.2-.4-.3-.6-.2l-2.3.9c-.7-.5-1.4-.9-2.2-1.1L12.9 1h-3.8l-.6 3.2c-.8.2-1.5.6-2.2 1.1l-2.3-.9c-.2-.1-.5 0-.6.2L1.6 7.8c-.1.2 0 .5.2.7l2 1.5c-.1.5-.1 1-.1 1.5s0 1 .1 1.5l-2 1.5c-.2.2-.3.5-.2.7l1.9 3.2c.1.2.4.3.6.2l2.3-.9c.7.5 1.4.9 2.2 1.1l.6 3.2h3.8l.6-3.2c.8-.2 1.5-.6 2.2-1.1l2.3.9c.2.1.5 0 .6-.2l1.9-3.2c.1-.2.1-.5-.1-.7l-2-1.5zM12 15.5c-1.9 0-3.5-1.6-3.5-3.5S10.1 8.5 12 8.5s3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5z"/>234      </svg>235    </div>236  </div>237 238  <div class="content">239    <!-- Recent lessons -->240    <div class="section">241      <div class="section-title">Recent lessons</div>242 243      <div class="lesson">244        <div class="icon">245          <!-- Atom style -->246          <svg viewBox="0 0 24 24">247            <circle cx="12" cy="12" r="2.2"/>248            <path d="M12 3c-2.8 0-5 4-5 9s2.2 9 5 9 5-4 5-9-2.2-9-5-9zm0 2c1.7 0 3 3.1 3 7s-1.3 7-3 7-3-3.1-3-7 1.3-7 3-7z"/>249            <path d="M4 9c0 1.7 3.6 3 8 3s8-1.3 8-3-3.6-3-8-3-8 1.3-8 3zm2 0c0-.7 2.7-1.6 6-1.6S18 8.3 18 9s-2.7 1.6-6 1.6S6 9.7 6 9z"/>250          </svg>251        </div>252        <div class="texts">253          <div class="subtitle">Units and measurement</div>254          <div class="title">Physical quantities and their measurement</div>255        </div>256        <div class="more" title="More">257          <svg viewBox="0 0 24 24"><path d="M12 4a2 2 0 110 4 2 2 0 010-4zm0 6a2 2 0 110 4 2 2 0 010-4zm0 6a2 2 0 110 4 2 2 0 010-4z"/></svg>258        </div>259      </div>260 261      <div class="lesson">262        <div class="icon" style="background:#f3b03c;">263          <!-- Simple math icon -->264          <svg viewBox="0 0 24 24">265            <path d="M5 7h6v2H5V7zm8 0h6v2h-6V7zM5 11h6v2H5v-2zm8 2h6v2h-6v-2zM5 15h6v2H5v-2z" />266          </svg>267        </div>268        <div class="texts">269          <div class="subtitle">Algebraic expressions</div>270          <div class="title">Algebraic expressions and polynomials (intro)</div>271        </div>272        <div class="more" title="More">273          <svg viewBox="0 0 24 24"><path d="M12 4a2 2 0 110 4 2 2 0 010-4zm0 6a2 2 0 110 4 2 2 0 010-4zm0 6a2 2 0 110 4 2 2 0 010-4z"/></svg>274        </div>275      </div>276    </div>277 278    <!-- My courses -->279    <div class="section">280      <div class="row-between">281        <div class="section-title" style="margin: 12px 0;">My courses</div>282        <a class="edit-link" href="#">Edit</a>283      </div>284 285      <div class="course-item">286        <div class="icon">287          <!-- Atom icon -->288          <svg viewBox="0 0 24 24">289            <circle cx="12" cy="12" r="2.2"/>290            <path d="M12 3c-2.8 0-5 4-5 9s2.2 9 5 9 5-4 5-9-2.2-9-5-9zm0 2c1.7 0 3 3.1 3 7s-1.3 7-3 7-3-3.1-3-7 1.3-7 3-7z"/>291            <path d="M4 9c0 1.7 3.6 3 8 3s8-1.3 8-3-3.6-3-8-3-8 1.3-8 3zm2 0c0-.7 2.7-1.6 6-1.6S18 8.3 18 9s-2.7 1.6-6 1.6S6 9.7 6 9z"/>292          </svg>293        </div>294        <div class="name">Class 11 Physics (India)</div>295      </div>296    </div>297 298    <!-- Kids banner -->299    <div class="section kids-banner">300      <div class="img-placeholder">[IMG: Khan Academy Kids illustration with animals]</div>301      <div class="kids-title">Khan Academy Kids</div>302      <div class="kids-desc">Get our free, award-winning app for kids ages 2-8.</div>303    </div>304  </div>305 306  <!-- Bottom navigation -->307  <div class="tab-bar">308    <div class="active-indicator"></div>309    <div class="tab-item active">310      <!-- Hexagon outline -->311      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">312        <path d="M7 4l10 0 5 8-5 8-10 0-5-8 5-8z"/>313      </svg>314      <div>Home</div>315    </div>316    <div class="tab-item">317      <!-- Search icon -->318      <svg viewBox="0 0 24 24" fill="currentColor">319        <path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1114 9.5 4.5 4.5 0 019.5 14z"/>320      </svg>321      <div>Explore</div>322    </div>323    <div class="tab-item">324      <!-- Bookmark icon -->325      <svg viewBox="0 0 24 24" fill="currentColor">326        <path d="M6 4h12v16l-6-3-6 3V4z"/>327      </svg>328      <div>Bookmarks</div>329    </div>330  </div>331 332</div>333</body>334</html>