GD-ML/AndroidCode
13.4k
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>Khan Academy Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff;13 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;14 color: #1f1f1f;15 }16 /* Status bar */17 .status-bar {18 height: 120px;19 background: #f7f7f7;20 display: flex;21 align-items: center;22 justify-content: space-between;23 padding: 0 40px;24 font-size: 36px;25 color: #6b6b6b;26 box-sizing: border-box;27 }28 .status-left, .status-right { display: flex; align-items: center; gap: 24px; }29 /* App bar */30 .app-bar {31 height: 120px;32 background: #ffffff;33 border-bottom: 1px solid #e9e9e9;34 display: flex;35 align-items: center;36 justify-content: center;37 position: relative;38 }39 .title {40 font-size: 54px;41 font-weight: 700;42 color: #333;43 }44 .gear-btn {45 position: absolute; right: 40px;46 width: 72px; height: 72px;47 display: flex; align-items: center; justify-content: center;48 }49 /* Banner */50 .banner {51 position: relative;52 width: 100%;53 height: 560px;54 background: #E0E0E0;55 border-top: 1px solid #BDBDBD;56 border-bottom: 1px solid #BDBDBD;57 display: flex; align-items: center; justify-content: center;58 color: #757575;59 box-sizing: border-box;60 }61 .banner .label { font-size: 36px; }62 .close-pill {63 position: absolute; top: 24px; right: 32px;64 width: 88px; height: 88px;65 background: #fff; border-radius: 44px;66 box-shadow: 0 2px 4px rgba(0,0,0,0.12);67 display: flex; align-items: center; justify-content: center;68 }69 /* Intro */70 .intro {71 text-align: center;72 padding: 64px 80px 40px;73 }74 .intro h1 {75 margin: 0 0 24px;76 font-size: 64px;77 font-weight: 700;78 color: #2b2b2b;79 }80 .intro p {81 margin: 0 auto;82 max-width: 860px;83 font-size: 36px;84 line-height: 52px;85 color: #606770;86 }87 .primary-btn {88 margin: 40px auto 48px;89 width: 560px; height: 112px;90 background: #1a73e8; color: #fff;91 border-radius: 24px;92 display: flex; align-items: center; justify-content: center;93 font-size: 44px; font-weight: 600;94 box-shadow: 0 6px 12px rgba(26,115,232,0.25);95 }96 .divider { height: 1px; background: #ececec; margin: 20px 0; }97 /* Sections */98 .section-title {99 font-size: 44px; font-weight: 700; color: #2f2f2f;100 padding: 28px 40px;101 }102 .lesson-row {103 display: flex; align-items: center;104 padding: 24px 40px 36px;105 gap: 28px;106 }107 .avatar-wrap { position: relative; width: 120px; height: 120px; }108 .avatar {109 width: 120px; height: 120px; border-radius: 60px;110 background: #17b1cf; color: #ffffff;111 display: flex; align-items: center; justify-content: center;112 font-size: 44px; font-weight: 800;113 }114 .avatar-overlay {115 position: absolute; right: -6px; bottom: -6px;116 width: 58px; height: 58px; border-radius: 29px;117 background: #f9f9f9; border: 1px solid #dcdcdc;118 display: flex; align-items: center; justify-content: center;119 }120 .lesson-text { display: flex; flex-direction: column; gap: 6px; }121 .subtle { font-size: 32px; color: #7a7a7a; }122 .lesson-title { font-size: 44px; color: #1f1f1f; font-weight: 600; }123 .courses-row {124 display: flex; align-items: center; justify-content: space-between;125 padding: 30px 40px;126 border-top: 1px solid #f0f0f0;127 }128 .ghost-btn {129 background: #1a73e8; color: #fff;130 padding: 22px 32px; border-radius: 18px;131 font-size: 38px; font-weight: 600;132 }133 /* Bottom nav */134 .bottom-nav {135 position: absolute; left: 0; right: 0; bottom: 80px;136 height: 180px; background: #ffffff; border-top: 1px solid #e6e6e6;137 display: flex; align-items: center; justify-content: space-around;138 }139 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #6b6b6b; font-size: 32px; }140 .nav-item.active { color: #1a73e8; font-weight: 600; }141 .home-indicator {142 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);143 width: 240px; height: 12px; background: #ffffff; border-radius: 6px;144 }145 .safe-bottom { position: absolute; bottom: 0; left: 0; right: 0; height: 80px; background: #000; }146</style>147</head>148<body>149<div id="render-target">150 <!-- Status bar -->151 <div class="status-bar">152 <div class="status-left">153 <span>8:48</span>154 <span>•</span>155 <span>•</span>156 <span>•</span>157 <span>•</span>158 </div>159 <div class="status-right">160 <span>161 <!-- signal icon -->162 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M2 18h2v2H2zm4-4h2v6H6zm4-4h2v10h-2zm4-4h2v14h-2zm4-2h2v16h-2z" fill="#777"/></svg>163 </span>164 <span>165 <!-- battery icon -->166 <svg width="56" height="40" viewBox="0 0 28 16">167 <rect x="1" y="2" width="22" height="12" rx="2" ry="2" fill="none" stroke="#777" stroke-width="2"/>168 <rect x="3" y="4" width="18" height="8" fill="#777"/>169 <rect x="23" y="6" width="4" height="4" rx="1" fill="#777"/>170 </svg>171 </span>172 <span>42%</span>173 </div>174 </div>175 176 <!-- App bar -->177 <div class="app-bar">178 <div class="title">Khan Academy</div>179 <div class="gear-btn">180 <svg width="60" height="60" viewBox="0 0 24 24">181 <path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm8.6-3a6.9 6.9 0 0 0-.2-1.6l2-1.6-2-3.4-2.4 1a6.9 6.9 0 0 0-1.4-.8l-.4-2.6H10l-.4 2.6c-.5.2-1 .5-1.4.8l-2.4-1-2 3.4 2 1.6c-.1.5-.2 1-.2 1.6s.1 1.1.2 1.6l-2 1.6 2 3.4 2.4-1c.4.3.9.6 1.4.8l.4 2.6h6.4l.4-2.6c.5-.2 1-.5 1.4-.8l2.4 1 2-3.4-2-1.6c.1-.5.2-1 .2-1.6z" fill="#3d3d3d"/>182 </svg>183 </div>184 </div>185 186 <!-- Banner -->187 <div class="banner">188 <div class="label">[IMG: Rocket illustration banner]</div>189 <div class="close-pill">190 <svg width="44" height="44" viewBox="0 0 24 24">191 <circle cx="12" cy="12" r="11" fill="#f0f0f0" stroke="#d2d2d2"/>192 <path d="M8 8l8 8M16 8l-8 8" stroke="#666" stroke-width="2" stroke-linecap="round"/>193 </svg>194 </div>195 </div>196 197 <!-- Intro copy & CTA -->198 <div class="intro">199 <h1>Need to add a class?</h1>200 <p>Add your teacher with their class code or email address.</p>201 <div class="primary-btn">Join class</div>202 </div>203 204 <div class="divider"></div>205 206 <!-- Recent lessons -->207 <div class="section-title">Recent lessons</div>208 <div class="lesson-row">209 <div class="avatar-wrap">210 <div class="avatar">x y</div>211 <div class="avatar-overlay">212 <!-- simple list icon -->213 <svg width="36" height="36" viewBox="0 0 24 24">214 <circle cx="5" cy="6" r="2" fill="#888"/>215 <circle cx="5" cy="12" r="2" fill="#888"/>216 <circle cx="5" cy="18" r="2" fill="#888"/>217 <path d="M10 6h9M10 12h9M10 18h9" stroke="#888" stroke-width="2" stroke-linecap="round"/>218 </svg>219 </div>220 </div>221 <div class="lesson-text">222 <div class="subtle">Foundations</div>223 <div class="lesson-title">Negative numbers</div>224 </div>225 </div>226 227 <div class="divider"></div>228 229 <!-- My courses -->230 <div class="courses-row">231 <div class="section-title" style="padding:0; font-size:42px;">My courses</div>232 <div class="ghost-btn">Get started</div>233 </div>234 235 <!-- Bottom navigation -->236 <div class="bottom-nav">237 <div class="nav-item active">238 <svg width="64" height="64" viewBox="0 0 24 24">239 <polygon points="12,2 20,7 20,17 12,22 4,17 4,7" fill="none" stroke="#1a73e8" stroke-width="2"/>240 </svg>241 <div>Home</div>242 </div>243 <div class="nav-item">244 <svg width="64" height="64" viewBox="0 0 24 24">245 <circle cx="11" cy="11" r="7" fill="none" stroke="#8a8a8a" stroke-width="2"/>246 <path d="M20 20l-4-4" stroke="#8a8a8a" stroke-width="2" stroke-linecap="round"/>247 </svg>248 <div>Explore</div>249 </div>250 <div class="nav-item">251 <svg width="64" height="64" viewBox="0 0 24 24">252 <path d="M6 3h12v18l-6-4-6 4z" fill="none" stroke="#8a8a8a" stroke-width="2"/>253 </svg>254 <div>Bookmarks</div>255 </div>256 </div>257 258 <div class="safe-bottom">259 <div class="home-indicator"></div>260 </div>261</div>262</body>263</html>