GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Khan Academy Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #ffffff;14 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;15 color: #1f2937;16 }17 18 /* Top status bar */19 .status-bar {20 height: 90px;21 padding: 0 40px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #111827;26 font-size: 34px;27 }28 .status-icons {29 display: flex;30 gap: 24px;31 align-items: center;32 color: #6b7280;33 }34 .status-dot {35 width: 26px;36 height: 36px;37 border: 2px solid #6b7280;38 border-radius: 4px;39 }40 .status-bolt {41 width: 20px;42 height: 28px;43 background: #6b7280;44 clip-path: polygon(40% 0, 60% 0, 40% 50%, 70% 50%, 30% 100%, 50% 50%, 20% 50%);45 }46 47 /* App bar */48 .app-bar {49 height: 120px;50 border-bottom: 1px solid #e5e7eb;51 display: flex;52 align-items: center;53 justify-content: center;54 position: relative;55 }56 .app-title {57 font-weight: 600;58 font-size: 48px;59 color: #111827;60 }61 .gear-btn {62 position: absolute;63 right: 40px;64 top: 50%;65 transform: translateY(-50%);66 width: 56px; height: 56px;67 display: flex; align-items: center; justify-content: center;68 }69 .gear-btn svg { width: 56px; height: 56px; fill: #2563eb; }70 71 /* Offline banner */72 .offline {73 height: 90px;74 background: #374151;75 color: #fff;76 display: flex;77 align-items: center;78 padding: 0 40px;79 font-size: 34px;80 justify-content: space-between;81 }82 .offline .close {83 width: 46px; height: 46px; border-radius: 50%;84 background: #111827; color: #fff;85 display: flex; align-items: center; justify-content: center;86 font-size: 32px;87 }88 89 /* Sections */90 .content { padding: 28px 0 0; }91 .section {92 padding: 0 40px;93 margin-top: 14px;94 }95 .section-title {96 font-size: 40px;97 font-weight: 700;98 color: #111827;99 display: flex;100 align-items: center;101 gap: 16px;102 margin-bottom: 20px;103 }104 .section-title .info {105 width: 40px; height: 40px; border-radius: 50%;106 border: 2px solid #9ca3af; color: #6b7280;107 display: inline-flex; align-items: center; justify-content: center;108 font-size: 28px; font-weight: 600;109 }110 111 /* Lesson rows */112 .lesson {113 display: flex;114 align-items: center;115 padding: 24px 0;116 position: relative;117 }118 .lesson + .lesson { border-top: 1px solid #e5e7eb; }119 .icon-wrap {120 width: 120px; height: 120px; border-radius: 60px;121 margin-right: 28px; position: relative; flex-shrink: 0;122 display: flex; align-items: center; justify-content: center;123 color: #fff;124 }125 .overlay-menu {126 position: absolute;127 right: -24px; bottom: -8px;128 width: 64px; height: 64px; border-radius: 50%;129 background: #f3f4f6; border: 1px solid #d1d5db;130 display: flex; align-items: center; justify-content: center;131 }132 .overlay-menu svg { width: 40px; height: 40px; stroke: #6b7280; }133 .lesson-text .sub {134 color: #6b7280; font-size: 30px; margin-bottom: 8px;135 }136 .lesson-text .title {137 font-size: 42px; font-weight: 600; color: #111827;138 }139 140 /* My courses header */141 .courses-header {142 display: flex; align-items: center; justify-content: space-between;143 padding: 30px 40px 10px;144 margin-top: 14px;145 border-top: 1px solid #e5e7eb;146 }147 .courses-header .left {148 display: flex; align-items: center; gap: 14px;149 }150 .courses-header .edit { color: #2563eb; font-weight: 600; font-size: 34px; }151 152 /* Course row */153 .course-row {154 padding: 24px 40px;155 border-top: 1px solid #f3f4f6;156 display: flex; align-items: center;157 }158 .course-icon {159 width: 120px; height: 120px; border-radius: 60px;160 background: #14b8a6; display: flex; align-items: center; justify-content: center;161 color: #fff; margin-right: 28px; flex-shrink: 0;162 }163 .course-title { font-size: 42px; font-weight: 600; }164 165 /* Promo banner */166 .promo {167 margin-top: 20px;168 padding: 0 0;169 position: relative;170 }171 .promo-img {172 width: 1080px; height: 540px;173 background: #E0E0E0; border: 1px solid #BDBDBD;174 display: flex; align-items: center; justify-content: center;175 color: #757575; font-size: 36px;176 }177 .promo .dismiss {178 position: absolute; right: 24px; top: 24px;179 width: 56px; height: 56px; border-radius: 28px;180 background: #ffffff; border: 1px solid #d1d5db;181 display: flex; align-items: center; justify-content: center;182 font-size: 32px; color: #6b7280;183 }184 185 /* Big statement */186 .statement {187 background: #ffffff;188 border-top: 1px solid #e5e7eb;189 padding: 36px 40px 24px;190 text-align: center;191 font-size: 52px; font-weight: 700; color: #111827;192 }193 194 /* Bottom navigation */195 .bottom-nav {196 position: absolute;197 left: 0; right: 0; bottom: 70px;198 height: 180px; background: #fff;199 border-top: 1px solid #e5e7eb;200 display: flex; align-items: center; justify-content: space-around;201 }202 .nav-item {203 width: 33.33%;204 display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;205 color: #6b7280; font-size: 30px;206 }207 .nav-item.active { color: #2563eb; }208 .nav-item svg { width: 60px; height: 60px; }209 .home-indicator {210 position: absolute; left: 50%; transform: translateX(-50%);211 bottom: 20px; width: 360px; height: 12px;212 background: #000; border-radius: 6px; opacity: 0.2;213 }214</style>215</head>216<body>217<div id="render-target">218 219 <!-- Status bar -->220 <div class="status-bar">221 <div>8:31</div>222 <div class="status-icons">223 <div class="status-dot"></div>224 <div class="status-bolt"></div>225 </div>226 </div>227 228 <!-- App bar -->229 <div class="app-bar">230 <div class="app-title">Khan Academy</div>231 <div class="gear-btn">232 <svg viewBox="0 0 24 24">233 <path d="M12 8.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7zm8.5 3.5l-2.1.7c-.2.7-.5 1.3-.9 1.9l1.2 1.8-2.1 2.1-1.8-1.2c-.6.4-1.2.7-1.9.9l-.7 2.1h-3l-.7-2.1c-.7-.2-1.3-.5-1.9-.9l-1.8 1.2-2.1-2.1 1.2-1.8c-.4-.6-.7-1.2-.9-1.9L3.5 12v-3l2.1-.7c.2-.7.5-1.3.9-1.9L5.3 4.7 7.4 2.6l1.8 1.2c.6-.4 1.2-.7 1.9-.9L11.8 1.5h3l.7 2.1c.7.2 1.3.5 1.9.9l1.8-1.2 2.1 2.1-1.2 1.8c.4.6.7 1.2.9 1.9l2.1.7v3z"/>234 </svg>235 </div>236 </div>237 238 <!-- Offline banner -->239 <div class="offline">240 <div>You're offline.</div>241 <div class="close">×</div>242 </div>243 244 <div class="content">245 246 <!-- Recent lessons -->247 <div class="section">248 <div class="section-title">249 <span>Recent lessons</span>250 <span class="info">i</span>251 </div>252 253 <!-- Lesson 1 -->254 <div class="lesson">255 <div class="icon-wrap" style="background:#14b8a6;">256 <svg viewBox="0 0 24 24" width="52" height="52">257 <path d="M4 7l8-4 8 4-8 4-8-4zm0 10l8 4 8-4v-6l-8 4-8-4v6z" fill="#ffffff"></path>258 </svg>259 <div class="overlay-menu">260 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">261 <path d="M6 8h12M6 12h12M6 16h12" stroke="#6b7280"></path>262 </svg>263 </div>264 </div>265 <div class="lesson-text">266 <div class="sub">Intro to mass and volume</div>267 <div class="title">Mass</div>268 </div>269 </div>270 271 <!-- Lesson 2 -->272 <div class="lesson">273 <div class="icon-wrap" style="background:#f59e0b;">274 <svg viewBox="0 0 24 24" width="52" height="52">275 <path d="M7 7h10v10H7z" fill="#fff" opacity="0.25"></path>276 <path d="M8 12h8M12 8v8" stroke="#ffffff" stroke-width="2"></path>277 </svg>278 <div class="overlay-menu">279 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">280 <path d="M6 8h12M6 12h12M6 16h12" stroke="#6b7280"></path>281 </svg>282 </div>283 </div>284 <div class="lesson-text">285 <div class="sub">Rational Numbers</div>286 <div class="title">The role of 0 and 1</div>287 </div>288 </div>289 </div>290 291 <!-- My courses header -->292 <div class="courses-header">293 <div class="left">294 <div class="section-title" style="margin:0;">295 <span>My courses</span>296 <span class="info">i</span>297 </div>298 </div>299 <div class="edit">Edit</div>300 </div>301 302 <!-- Course row -->303 <div class="course-row">304 <div class="course-icon">305 <svg viewBox="0 0 24 24">306 <rect x="6" y="6" width="12" height="12" rx="2" fill="#ffffff" opacity="0.9"></rect>307 <circle cx="10" cy="12" r="1.8" fill="#14b8a6"></circle>308 <circle cx="14" cy="12" r="1.8" fill="#14b8a6"></circle>309 </svg>310 </div>311 <div class="course-title">Linear algebra</div>312 </div>313 314 <!-- Promo banner -->315 <div class="promo">316 <div class="promo-img">[IMG: Promo illustration with globe and language icons]</div>317 <div class="dismiss">✕</div>318 </div>319 320 <!-- Statement -->321 <div class="statement">You can learn anything</div>322 </div>323 324 <!-- Bottom navigation -->325 <div class="bottom-nav">326 <div class="nav-item active">327 <svg viewBox="0 0 24 24">328 <path d="M12 2l6 3.5v7L12 16l-6-3.5v-7L12 2z" fill="#2563eb"></path>329 </svg>330 <div>Home</div>331 </div>332 <div class="nav-item">333 <svg viewBox="0 0 24 24">334 <circle cx="11" cy="11" r="6" stroke="#9ca3af" stroke-width="2" fill="none"></circle>335 <path d="M16.5 16.5l4 4" stroke="#9ca3af" stroke-width="2"></path>336 </svg>337 <div>Explore</div>338 </div>339 <div class="nav-item">340 <svg viewBox="0 0 24 24">341 <path d="M6 3h12v18l-6-4-6 4V3z" fill="#9ca3af"></path>342 </svg>343 <div>Bookmarks</div>344 </div>345 </div>346 347 <!-- Home indicator -->348 <div class="home-indicator"></div>349 350</div>351</body>352</html>