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>Unit: Intro to multiplication</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif;16 color: #1c1f24;17 }18 19 /* Header */20 .header {21 position: relative;22 background: #0d2345;23 color: #fff;24 height: 560px;25 padding: 0 48px;26 box-sizing: border-box;27 }28 .status-bar {29 height: 120px;30 display: flex;31 align-items: center;32 justify-content: space-between;33 font-weight: 600;34 font-size: 36px;35 opacity: 0.95;36 }37 .status-right {38 display: flex;39 align-items: center;40 gap: 26px;41 }42 .nav-row {43 display: flex;44 align-items: center;45 justify-content: space-between;46 margin-top: 20px;47 }48 .icon-btn {49 width: 72px;50 height: 72px;51 display: flex;52 align-items: center;53 justify-content: center;54 }55 .header .sub {56 margin-top: 38px;57 font-size: 40px;58 color: #a9b8d2;59 letter-spacing: 0.2px;60 }61 .header .title {62 margin-top: 14px;63 font-size: 72px;64 font-weight: 800;65 line-height: 1.2;66 color: #ffffff;67 }68 69 /* Mastery card */70 .mastery-card {71 background: #ffffff;72 margin: 0 0 10px 0;73 padding: 34px 48px;74 box-sizing: border-box;75 border-top-left-radius: 16px;76 border-top-right-radius: 16px;77 }78 .mastery-top {79 font-size: 52px;80 font-weight: 700;81 color: #525a65;82 }83 .mastery-top .pct {84 color: #7b8799;85 font-weight: 700;86 }87 .mastery-sub {88 font-size: 34px;89 color: #727a88;90 margin-top: 8px;91 }92 93 /* Sections */94 .section {95 border-top: 1px solid #ebedf0;96 padding: 34px 48px 16px 48px;97 position: relative;98 }99 .section-title {100 font-size: 44px;101 font-weight: 700;102 color: #333a46;103 margin-bottom: 24px;104 }105 .section .bookmark-right {106 position: absolute;107 right: 36px;108 top: 32px;109 width: 60px;110 height: 60px;111 }112 113 .item {114 display: flex;115 align-items: center;116 gap: 28px;117 padding: 26px 0;118 border-bottom: 1px solid #f0f1f4;119 }120 .item:last-child { border-bottom: none; }121 .item-title {122 font-size: 42px;123 color: #101419;124 font-weight: 600;125 }126 .item-sub {127 font-size: 32px;128 color: #80889a;129 margin-top: 10px;130 }131 .points-purple { color: #6b4bd6; }132 133 .play-icon {134 width: 72px;135 height: 72px;136 }137 .badge-icon {138 width: 72px;139 height: 72px;140 }141 142 .up-next {143 display: flex;144 align-items: center;145 gap: 18px;146 margin: 10px 0 0 8px;147 color: #2e61ff;148 font-weight: 700;149 font-size: 32px;150 }151 .up-next .bar {152 width: 8px;153 height: 40px;154 background: #2e61ff;155 border-radius: 4px;156 margin-right: 12px;157 }158 159 /* Bottom tab bar */160 .tabbar {161 position: absolute;162 bottom: 54px;163 left: 0;164 right: 0;165 height: 150px;166 border-top: 1px solid #e8eaee;167 background: #ffffff;168 display: flex;169 align-items: center;170 justify-content: space-around;171 }172 .tab {173 display: flex;174 flex-direction: column;175 align-items: center;176 gap: 12px;177 color: #8a93a4;178 font-size: 30px;179 }180 .tab.active { color: #2e61ff; }181 .tab svg { width: 60px; height: 60px; }182 183 /* home indicator */184 .home-indicator {185 position: absolute;186 bottom: 16px;187 left: 50%;188 transform: translateX(-50%);189 width: 340px;190 height: 14px;191 background: #000000;192 opacity: 0.2;193 border-radius: 7px;194 }195</style>196</head>197<body>198<div id="render-target">199 200 <!-- Header -->201 <div class="header">202 <div class="status-bar">203 <div>11:21</div>204 <div class="status-right">205 <!-- simple status icons -->206 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff" opacity="0.9"><circle cx="12" cy="12" r="10"/></svg>207 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff" opacity="0.9"><path d="M3 12h18" stroke="#fff" stroke-width="2"/></svg>208 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><rect x="6" y="4" width="12" height="16" rx="2"/></svg>209 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff" opacity="0.9"><polygon points="20,6 22,6 22,18 20,18"/><path d="M2 12h18" stroke="#fff" stroke-width="2"/></svg>210 </div>211 </div>212 213 <div class="nav-row">214 <div class="icon-btn">215 <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">216 <path d="M15 6 L9 12 L15 18"/>217 </svg>218 </div>219 <div class="icon-btn">220 <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.2">221 <path d="M6 4h12v16l-6-4-6 4V4z"/>222 </svg>223 </div>224 </div>225 226 <div class="sub">Arithmetic</div>227 <div class="title">Unit: Intro to multiplication</div>228 </div>229 230 <!-- Mastery card -->231 <div class="mastery-card">232 <div class="mastery-top">233 50/700 <span class="pct">(7%)</span>234 </div>235 <div class="mastery-sub">Mastery Points</div>236 </div>237 238 <!-- Section 1 -->239 <div class="section">240 <div class="section-title">Multiplication as equal groups</div>241 <div class="bookmark-right">242 <svg viewBox="0 0 24 24" fill="none" stroke="#9aa3b5" stroke-width="2.2">243 <path d="M6 4h12v16l-6-4-6 4V4z"/>244 </svg>245 </div>246 247 <div class="item">248 <svg class="play-icon" viewBox="0 0 24 24" fill="none">249 <circle cx="12" cy="12" r="10" stroke="#2e61ff" stroke-width="2.2"/>250 <polygon points="10,8 16,12 10,16" fill="#2e61ff"/>251 </svg>252 <div>253 <div class="item-title">Introduction to multiplication</div>254 </div>255 </div>256 257 <div class="item">258 <svg class="badge-icon" viewBox="0 0 24 24" fill="none">259 <rect x="5" y="5" width="10" height="5" rx="1" fill="#b3b8c3"/>260 <rect x="9" y="12" width="10" height="5" rx="1" fill="#6b4bd6"/>261 </svg>262 <div>263 <div class="item-title" style="font-weight:700;">Understand equal groups as multiplication</div>264 <div class="item-sub"><span class="points-purple">50/100</span> points</div>265 </div>266 </div>267 268 <div class="item">269 <svg class="play-icon" viewBox="0 0 24 24" fill="none">270 <circle cx="12" cy="12" r="10" stroke="#2e61ff" stroke-width="2.2"/>271 <polygon points="10,8 16,12 10,16" fill="#2e61ff"/>272 </svg>273 <div>274 <div class="item-title">Multiplication as repeated addition</div>275 </div>276 </div>277 </div>278 279 <!-- Section 2 -->280 <div class="section">281 <div class="section-title">Multiplication on the number line</div>282 <div class="bookmark-right">283 <svg viewBox="0 0 24 24" fill="none" stroke="#9aa3b5" stroke-width="2.2">284 <path d="M6 4h12v16l-6-4-6 4V4z"/>285 </svg>286 </div>287 288 <div class="item">289 <svg class="play-icon" viewBox="0 0 24 24" fill="none">290 <circle cx="12" cy="12" r="10" stroke="#2e61ff" stroke-width="2.2"/>291 <polygon points="10,8 16,12 10,16" fill="#2e61ff"/>292 </svg>293 <div>294 <div class="item-title">Multiplication on the number line</div>295 </div>296 </div>297 298 <div class="up-next"><div class="bar"></div>Up next for you</div>299 300 <div class="item" style="border-bottom: none;">301 <svg class="badge-icon" viewBox="0 0 24 24" fill="none">302 <rect x="5" y="5" width="10" height="5" rx="1" fill="#b3b8c3"/>303 <rect x="9" y="12" width="10" height="5" rx="1" fill="#b3b8c3"/>304 </svg>305 <div>306 <div class="item-title">Represent multiplication on the number line</div>307 <div class="item-sub"><span class="points-purple" style="color:#7b7fd6;">0/100</span> points</div>308 </div>309 </div>310 </div>311 312 <!-- Section 3 -->313 <div class="section">314 <div class="section-title">Multiply using groups of objects</div>315 <div class="bookmark-right">316 <svg viewBox="0 0 24 24" fill="none" stroke="#9aa3b5" stroke-width="2.2">317 <path d="M6 4h12v16l-6-4-6 4V4z"/>318 </svg>319 </div>320 321 <div class="item">322 <svg class="play-icon" viewBox="0 0 24 24" fill="none">323 <circle cx="12" cy="12" r="10" stroke="#2e61ff" stroke-width="2.2"/>324 <polygon points="10,8 16,12 10,16" fill="#2e61ff"/>325 </svg>326 <div>327 <div class="item-title">Multiplication as equal groups</div>328 </div>329 </div>330 </div>331 332 <!-- Bottom tab bar -->333 <div class="tabbar">334 <div class="tab active">335 <svg viewBox="0 0 24 24" fill="none" stroke="#2e61ff" stroke-width="2">336 <polygon points="12,3 19,7 19,17 12,21 5,17 5,7" fill="none"/>337 </svg>338 <div>Home</div>339 </div>340 <div class="tab">341 <svg viewBox="0 0 24 24" fill="none" stroke="#8a93a4" stroke-width="2">342 <circle cx="11" cy="11" r="7"/>343 <line x1="17" y1="17" x2="22" y2="22"/>344 </svg>345 <div>Explore</div>346 </div>347 <div class="tab">348 <svg viewBox="0 0 24 24" fill="none" stroke="#8a93a4" stroke-width="2">349 <path d="M6 4h12v16l-6-4-6 4V4z"/>350 </svg>351 <div>Bookmarks</div>352 </div>353 </div>354 355 <!-- iOS home indicator -->356 <div class="home-indicator"></div>357</div>358</body>359</html>