GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="utf-8">5<title>Khan Academy Lesson - Multiplication on the number line</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">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; color:#222;13    font-family: "Segoe UI", Roboto, Arial, sans-serif;14  }15 16  /* Status bar */17  .status-bar {18    position:absolute; top:0; left:0; right:0;19    height:90px; background:#000;20    color:#fff; display:flex; align-items:center;21    justify-content:space-between; padding:0 28px;22    font-size:28px; letter-spacing:0.5px;23  }24  .status-right { display:flex; align-items:center; gap:24px; }25  .sb-icon { width:34px; height:34px; opacity:0.9; }26 27  /* Video placeholder */28  .video {29    position:absolute; top:90px; left:0; width:100%; height:620px;30    background:#E0E0E0; border-top:1px solid #BDBDBD; border-bottom:1px solid #BDBDBD;31    display:flex; align-items:center; justify-content:center; color:#757575;32    font-size:34px;33  }34 35  /* Content */36  .content { position:absolute; top:710px; left:0; right:0; bottom:220px; overflow:hidden; }37  .title-wrap { padding:40px 48px 18px; }38  .title-wrap h1 {39    font-size:56px; line-height:1.15; margin:0 0 8px 0; font-weight:700;40  }41  .title-wrap p {42    margin:0; color:#6e6e6e; font-size:34px;43  }44 45  .actions {46    display:flex; justify-content:space-around; align-items:center;47    padding:32px 0; border-top:1px solid #eee; border-bottom:1px solid #eee;48    color:#6e6e6e;49  }50  .action {51    display:flex; flex-direction:column; align-items:center; gap:14px;52    font-size:28px;53  }54  .action svg { width:60px; height:60px; }55 56  .section-header {57    padding:34px 48px 16px; font-size:42px; font-weight:700;58  }59 60  /* Up next list */61  .list { border-top:1px solid #eee; }62  .item {63    display:flex; align-items:center; gap:28px;64    padding:30px 48px; border-bottom:1px solid #eee; background:#fff;65  }66  .item .i-left { width:84px; display:flex; align-items:center; justify-content:center; }67  .bookmark-badge {68    width:40px; height:54px;69  }70  .item .meta { flex:1; }71  .meta .kicker {72    font-size:28px; color:#8c8c8c; margin-bottom:6px;73  }74  .meta .title {75    font-size:36px; color:#222;76  }77  .time {78    font-size:30px; color:#6e6e6e;79  }80 81  .item.active {82    background:#eef4ff; position:relative;83  }84  .item.active .title { color:#2f6bff; }85  .item.active::before {86    content:""; position:absolute; left:0; top:0; width:12px; height:100%;87    background:#2f6bff;88  }89 90  /* Bottom navigation */91  .bottom-nav {92    position:absolute; left:0; right:0; bottom:0; height:190px;93    background:#fff; border-top:1px solid #ddd;94    display:flex; justify-content:space-around; align-items:center;95    padding-bottom:14px;96  }97  .nav-item {98    display:flex; flex-direction:column; align-items:center; gap:10px;99    color:#9aa0a6; font-size:28px;100  }101  .nav-item svg { width:64px; height:64px; }102  .nav-item.active { color:#2563eb; }103  .nav-item.active svg path, .nav-item.active svg polygon, .nav-item.active svg circle {104    stroke:#2563eb; fill:none;105  }106 107  /* Gesture bar */108  .gesture {109    position:absolute; left:50%; transform:translateX(-50%);110    bottom:14px; width:240px; height:12px; background:#d8d8d8; border-radius:8px;111    z-index:5;112  }113</style>114</head>115<body>116<div id="render-target">117 118  <!-- Status bar -->119  <div class="status-bar">120    <div class="status-left">11:21</div>121    <div class="status-right">122      <!-- Simple icons -->123      <svg class="sb-icon" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">124        <circle cx="11" cy="11" r="7"></circle>125        <path d="M21 21l-3.5-3.5"></path>126      </svg>127      <svg class="sb-icon" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">128        <path d="M4 12h16"></path>129        <path d="M12 4v16"></path>130      </svg>131      <svg class="sb-icon" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">132        <rect x="3" y="6" width="18" height="12" rx="2"></rect>133        <rect x="7" y="9" width="10" height="6" rx="1"></rect>134      </svg>135    </div>136  </div>137 138  <!-- Video area -->139  <div class="video">140    <div style="text-align:center;">[IMG: Video player - Multiplication on a number line]</div>141  </div>142 143  <!-- Main content -->144  <div class="content">145    <div class="title-wrap">146      <h1>Multiplication on the number line</h1>147      <p>Sal uses a number line to represent and solve simple</p>148    </div>149 150    <div class="actions">151      <div class="action">152        <svg viewBox="0 0 24 24" fill="none" stroke="#9aa0a6" stroke-width="2">153          <path d="M6 3h12a1 1 0 0 1 1 1v17l-7-4-7 4V4a1 1 0 0 1 1-1z"></path>154        </svg>155        <div>Bookmark</div>156      </div>157      <div class="action">158        <svg viewBox="0 0 24 24" fill="none" stroke="#9aa0a6" stroke-width="2">159          <path d="M4 12v7a1 1 0 0 0 1 1h14"></path>160          <path d="M12 5l5 5-5 5"></path>161          <path d="M12 5H7a1 1 0 0 0-1 1v5"></path>162        </svg>163        <div>Share</div>164      </div>165      <div class="action">166        <svg viewBox="0 0 24 24" fill="none" stroke="#9aa0a6" stroke-width="2">167          <rect x="4" y="3" width="16" height="18" rx="2"></rect>168          <path d="M8 8h8M8 12h8M8 16h6"></path>169        </svg>170        <div>Transcript</div>171      </div>172    </div>173 174    <div class="section-header">Up next</div>175 176    <div class="list">177      <div class="item">178        <div class="i-left">179          <svg class="bookmark-badge" viewBox="0 0 24 24" fill="none" stroke="#b0b0b0" stroke-width="2">180            <path d="M6 3h12a1 1 0 0 1 1 1v17l-7-4-7 4V4a1 1 0 0 1 1-1z"></path>181          </svg>182        </div>183        <div class="meta">184          <div class="kicker">Part of lesson</div>185          <div class="title">Multiplication on the number line</div>186        </div>187      </div>188 189      <div class="item active">190        <div class="i-left">191          <svg viewBox="0 0 24 24" width="54" height="54" fill="none" stroke="#2f6bff" stroke-width="2">192            <circle cx="12" cy="12" r="9"></circle>193            <polygon points="10,8 17,12 10,16" fill="#2f6bff" stroke="none"></polygon>194          </svg>195        </div>196        <div class="meta">197          <div class="title">Multiplication on the number line</div>198        </div>199        <div class="time">04:20</div>200      </div>201 202      <div class="item">203        <div class="i-left">204          <svg viewBox="0 0 24 24" width="54" height="54" fill="none" stroke="#9aa0a6" stroke-width="2">205            <path d="M10 13a4 4 0 0 0 6 0l4-4"></path>206            <path d="M14 11a4 4 0 0 0-6 0L4 15"></path>207          </svg>208        </div>209        <div class="meta">210          <div class="title">Represent multiplication on the number line</div>211        </div>212      </div>213    </div>214  </div>215 216  <!-- Bottom navigation -->217  <div class="bottom-nav">218    <div class="nav-item active">219      <svg viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2">220        <polygon points="7,3 17,3 21,12 17,21 7,21 3,12"></polygon>221      </svg>222      <div>Home</div>223    </div>224    <div class="nav-item">225      <svg viewBox="0 0 24 24" fill="none" stroke="#9aa0a6" stroke-width="2">226        <circle cx="11" cy="11" r="7"></circle>227        <path d="M21 21l-3.5-3.5"></path>228      </svg>229      <div>Explore</div>230    </div>231    <div class="nav-item">232      <svg viewBox="0 0 24 24" fill="none" stroke="#9aa0a6" stroke-width="2">233        <path d="M6 3h12a1 1 0 0 1 1 1v17l-7-4-7 4V4a1 1 0 0 1 1-1z"></path>234      </svg>235      <div>Bookmarks</div>236    </div>237  </div>238 239  <div class="gesture"></div>240</div>241</body>242</html>