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>Video Lesson UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff;13 }14 15 .video-area {16 position: relative;17 height: 900px;18 background: #000000;19 color: #fff;20 }21 /* top icons in video */22 .video-top {23 position: absolute; top: 56px; left: 36px; right: 36px;24 display: flex; justify-content: space-between; align-items: center;25 }26 .video-top-right {27 display: flex; gap: 36px; align-items: center;28 }29 .icon-btn {30 width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center;31 }32 .icon-btn svg { width: 64px; height: 64px; fill: none; stroke: #fff; stroke-width: 2.8; }33 .bookmark-icon svg { fill: none; }34 .share-icon svg { fill: none; }35 36 /* center controls */37 .controls {38 position: absolute; top: 50%; left: 50%;39 transform: translate(-50%, -35%);40 display: flex; gap: 120px; align-items: center;41 }42 .control-circle {43 width: 140px; height: 140px; border-radius: 50%;44 border: 6px solid #fff; display: flex; align-items: center; justify-content: center;45 }46 .control-secondary {47 display: flex; flex-direction: column; align-items: center; gap: 16px; color: #fff; font-weight: 600;48 }49 .control-secondary svg { width: 88px; height: 88px; }50 .control-secondary .num { font-size: 40px; letter-spacing: .5px; }51 52 /* progress */53 .progress {54 position: absolute; bottom: 32px; left: 36px; right: 36px;55 display: flex; align-items: center; gap: 24px; color: #fff;56 }57 .time { font-size: 36px; font-weight: 600; }58 .slider {59 flex: 1; height: 8px; background: rgba(255,255,255,0.25); border-radius: 8px; position: relative;60 }61 .slider .knob {62 position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%);63 width: 34px; height: 34px; background: #fff; border-radius: 50%; border: 4px solid #000;64 }65 .speed { font-size: 42px; font-weight: 800; }66 .fs-icon svg { width: 48px; height: 48px; stroke-width: 3.5; }67 68 /* content below video */69 .content {70 background: #fff;71 }72 .title-card {73 padding: 48px 48px 32px 48px; border-bottom: 1px solid #EAEAEA;74 }75 .title-card h1 {76 margin: 0 0 18px 0; font-size: 58px; color: #222; line-height: 1.1; font-weight: 800;77 }78 .title-card p {79 margin: 0; font-size: 36px; color: #6F737A;80 }81 82 .actions {83 display: flex; justify-content: space-around; padding: 36px 0; border-bottom: 1px solid #EAEAEA;84 }85 .action {86 text-align: center; color: #8C9097;87 }88 .action .a-icon {89 width: 72px; height: 72px; margin: 0 auto 14px auto;90 display: flex; align-items: center; justify-content: center;91 }92 .action .a-icon svg { width: 72px; height: 72px; stroke: #8C9097; stroke-width: 3; }93 .action span { font-size: 34px; }94 95 .upnext {96 padding: 34px 48px; font-size: 48px; font-weight: 800; color: #222;97 }98 99 .list {100 display: flex; flex-direction: column;101 }102 .list-item {103 display: flex; align-items: center; padding: 32px 48px; gap: 32px; border-bottom: 1px solid #EFEFEF;104 }105 .list-item .left {106 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;107 }108 .list-item .left svg { width: 56px; height: 56px; stroke: #72777F; }109 .list-item .texts { flex: 1; }110 .list-item .subtitle { font-size: 32px; color: #8A9097; margin-bottom: 8px; }111 .list-item .title { font-size: 40px; color: #222; }112 .list-item .time { color: #8A9097; font-size: 34px; }113 .list-item.active {114 background: #EEF3FF;115 border-left: 12px solid #2F68FF;116 }117 .list-item.active .title { color: #2F68FF; }118 .list-item.active .left svg { stroke: #2F68FF; }119 120 /* bottom nav */121 .bottom-nav {122 position: absolute; bottom: 0; left: 0; right: 0;123 height: 200px; border-top: 1px solid #EAEAEA; background: #fff;124 display: flex; align-items: center; justify-content: space-around;125 padding-bottom: 24px;126 }127 .tab {128 width: 220px; text-align: center; color: #8A9097;129 }130 .tab .t-icon { width: 72px; height: 72px; margin: 0 auto 10px; }131 .tab .t-icon svg { width: 72px; height: 72px; stroke: #8A9097; stroke-width: 3; fill: none; }132 .tab span { font-size: 32px; }133 .tab.active span { color: #2F68FF; }134 .tab.active .t-icon svg { stroke: #2F68FF; }135 136 .gesture-bar {137 position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);138 width: 280px; height: 10px; background: #DADDE1; border-radius: 8px;139 }140</style>141</head>142<body>143<div id="render-target">144 145 <!-- Video Player Area -->146 <div class="video-area">147 <div class="video-top">148 <div class="icon-btn">149 <!-- back arrow -->150 <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/><path d="M9 12h12"/></svg>151 </div>152 <div class="video-top-right">153 <div class="icon-btn bookmark-icon">154 <!-- bookmark -->155 <svg viewBox="0 0 24 24"><path d="M6 3h12v18l-6-4-6 4z"/></svg>156 </div>157 <div class="icon-btn share-icon">158 <!-- share icon -->159 <svg viewBox="0 0 24 24">160 <path d="M12 3v10"/><path d="M8 7l4-4 4 4"/>161 <rect x="5" y="13" width="14" height="8" rx="2" ry="2"></rect>162 </svg>163 </div>164 </div>165 </div>166 167 <!-- Center controls -->168 <div class="controls">169 <div class="control-secondary">170 <svg viewBox="0 0 24 24">171 <path d="M4 12a8 8 0 1 1 8 8"/>172 <path d="M8 12l-4 0"/>173 </svg>174 <div class="num">10</div>175 </div>176 177 <div class="control-circle">178 <!-- pause icon -->179 <svg viewBox="0 0 24 24">180 <circle cx="12" cy="12" r="10" stroke="#fff" stroke-width="2.8" fill="none"></circle>181 <rect x="9" y="7" width="2.8" height="10" fill="#fff" stroke="none"></rect>182 <rect x="12.5" y="7" width="2.8" height="10" fill="#fff" stroke="none"></rect>183 </svg>184 </div>185 186 <div class="control-secondary">187 <svg viewBox="0 0 24 24">188 <path d="M20 12a8 8 0 1 0-8 8"/>189 <path d="M20 12l4 0"/>190 </svg>191 <div class="num">10</div>192 </div>193 </div>194 195 <!-- Progress -->196 <div class="progress">197 <div class="time">00:00</div>198 <div class="slider">199 <div class="knob"></div>200 </div>201 <div class="time">-04:19</div>202 <div class="speed">1×</div>203 <div class="fs-icon">204 <svg viewBox="0 0 24 24">205 <path d="M3 9V3h6"/><path d="M21 9V3h-6"/>206 <path d="M3 15v6h6"/><path d="M21 15v6h-6"/>207 </svg>208 </div>209 </div>210 </div>211 212 <!-- Title and description -->213 <div class="content">214 <div class="title-card">215 <h1>Multiplication on the number line</h1>216 <p>Sal uses a number line to represent and solve simple</p>217 </div>218 219 <!-- Action row -->220 <div class="actions">221 <div class="action">222 <div class="a-icon">223 <svg viewBox="0 0 24 24"><path d="M6 3h12v18l-6-4-6 4z"/></svg>224 </div>225 <span>Bookmark</span>226 </div>227 <div class="action">228 <div class="a-icon">229 <svg viewBox="0 0 24 24">230 <path d="M12 3v10"/><path d="M8 7l4-4 4 4"/>231 <rect x="5" y="13" width="14" height="8" rx="2" ry="2"></rect>232 </svg>233 </div>234 <span>Share</span>235 </div>236 <div class="action">237 <div class="a-icon">238 <svg viewBox="0 0 24 24">239 <rect x="4" y="3" width="16" height="18" rx="2" ry="2"></rect>240 <line x1="8" y1="8" x2="16" y2="8"></line>241 <line x1="8" y1="12" x2="16" y2="12"></line>242 <line x1="8" y1="16" x2="14" y2="16"></line>243 </svg>244 </div>245 <span>Transcript</span>246 </div>247 </div>248 249 <!-- Up next -->250 <div class="upnext">Up next</div>251 <div class="list">252 <div class="list-item">253 <div class="left">254 <svg viewBox="0 0 24 24"><path d="M6 3h12v18l-6-4-6 4z"/></svg>255 </div>256 <div class="texts">257 <div class="subtitle">Part of lesson</div>258 <div class="title">Multiplication on the number line</div>259 </div>260 <div class="time"></div>261 </div>262 263 <div class="list-item active">264 <div class="left">265 <svg viewBox="0 0 24 24"><path d="M8 5l10 7-10 7z"/></svg>266 </div>267 <div class="texts">268 <div class="title">Multiplication on the number line</div>269 </div>270 <div class="time">04:20</div>271 </div>272 273 <div class="list-item">274 <div class="left">275 <svg viewBox="0 0 24 24"><path d="M4 4h16v16H4z"/></svg>276 </div>277 <div class="texts">278 <div class="title">Represent multiplication on the number line</div>279 </div>280 <div class="time"></div>281 </div>282 </div>283 </div>284 285 <!-- Bottom navigation -->286 <div class="bottom-nav">287 <div class="tab active">288 <div class="t-icon">289 <svg viewBox="0 0 24 24">290 <path d="M12 3l9 8v10H3V11z"/>291 <path d="M9 21V12h6v9" stroke-linecap="round"></path>292 </svg>293 </div>294 <span>Home</span>295 </div>296 <div class="tab">297 <div class="t-icon">298 <svg viewBox="0 0 24 24">299 <circle cx="11" cy="11" r="7"></circle>300 <path d="M21 21l-4.2-4.2"></path>301 </svg>302 </div>303 <span>Explore</span>304 </div>305 <div class="tab">306 <div class="t-icon">307 <svg viewBox="0 0 24 24"><path d="M6 3h12v18l-6-4-6 4z"/></svg>308 </div>309 <span>Bookmarks</span>310 </div>311 <div class="gesture-bar"></div>312 </div>313 314</div>315</body>316</html>