GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Distance and displacement introduction - UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; }7 #render-target {8 width: 1080px; height: 2400px;9 position: relative; overflow: hidden;10 background: #ffffff; font-family: Arial, Helvetica, sans-serif; color: #1a1a1a;11 }12 /* Status bar */13 .status-bar {14 position: absolute; top: 0; left: 0; right: 0;15 height: 90px; color: #fff; background: transparent;16 padding: 0 30px;17 display: flex; align-items: center; justify-content: space-between;18 z-index: 5;19 }20 .status-right { display: flex; align-items: center; gap: 22px; }21 /* Video area */22 .video-area {23 position: absolute; top: 90px; left: 0; width: 100%; height: 780px;24 background: #000; color: #fff;25 }26 .back-btn {27 position: absolute; top: 110px; left: 24px; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;28 }29 .video-top-icons {30 position: absolute; top: 110px; right: 24px; display: flex; gap: 34px; align-items: center;31 }32 .center-controls {33 position: absolute; top: 300px; left: 50%; transform: translateX(-50%);34 display: flex; align-items: center; gap: 140px;35 }36 .circle-btn {37 width: 170px; height: 170px; border-radius: 50%; border: 6px solid #fff;38 display: flex; align-items: center; justify-content: center;39 }40 .mini-circle {41 width: 120px; height: 120px; border-radius: 50%; border: 5px solid #fff;42 display: flex; align-items: center; justify-content: center; position: relative;43 font-weight: bold; font-size: 32px;44 }45 .mini-circle .label10 { position: absolute; bottom: 14px; color: #fff; }46 /* Progress */47 .progress-row {48 position: absolute; bottom: 130px; left: 40px; right: 40px;49 display: grid; grid-template-columns: 150px 1fr 170px 120px 120px; align-items: center; gap: 20px;50 color: #fff;51 }52 .time-text { font-size: 34px; }53 .seek {54 height: 16px; background: #666; border-radius: 10px; position: relative;55 }56 .seek .knob {57 position: absolute; left: 20px; top: -8px; width: 32px; height: 32px; border-radius: 50%; background: #fff;58 box-shadow: 0 0 0 4px rgba(255,255,255,0.25);59 }60 .speed { display: flex; align-items: center; gap: 14px; justify-content: flex-end; font-size: 38px; }61 /* Content area */62 .content {63 position: absolute; top: 870px; left: 0; right: 0; bottom: 140px;64 overflow: hidden auto; background: #fff; color: #1a1a1a;65 }66 .title {67 padding: 40px 40px 10px 40px; font-size: 58px; font-weight: 700; line-height: 1.15;68 }69 .subtitle {70 padding: 0 40px 24px 40px; font-size: 34px; color: #444; line-height: 1.4;71 }72 .action-row {73 display: flex; gap: 120px; padding: 26px 40px; border-top: 1px solid #eee; border-bottom: 1px solid #eee;74 }75 .action-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #333; }76 .action-item span { font-size: 30px; }77 /* Up next */78 .section-header {79 padding: 36px 40px 20px 40px; font-size: 44px; font-weight: 700;80 }81 .lesson-card {82 margin: 0 40px; padding: 24px; border-bottom: 1px solid #e6e6e6;83 }84 .label { font-size: 32px; color: #666; margin-bottom: 10px; }85 .lesson-title { font-size: 40px; line-height: 1.25; }86 /* List items */87 .list {88 margin-top: 10px;89 }90 .list-item {91 margin: 0 40px; padding: 24px; border-radius: 12px; display: flex; align-items: center; justify-content: space-between;92 border-bottom: 1px solid #eee;93 }94 .list-item.active { background: #eaf1ff; }95 .left-info { display: flex; align-items: center; gap: 26px; }96 .small-play {97 width: 80px; height: 80px; border-radius: 12px; border: 2px solid #7f9bd6; display: flex; align-items: center; justify-content: center;98 background: #eef3ff;99 }100 .item-text { font-size: 40px; color: #1847cc; }101 .item-text .sub { display: block; font-size: 40px; color: #1847cc; }102 .duration { font-size: 38px; color: #333; }103 .list-item .normal-text { color: #0e0e0e; }104 /* Bottom nav */105 .bottom-nav {106 position: absolute; bottom: 0; left: 0; right: 0; height: 140px; border-top: 1px solid #ddd; background: #fff;107 display: flex; align-items: center; justify-content: space-around;108 }109 .nav-item { display: flex; align-items: center; flex-direction: column; gap: 6px; color: #666; font-size: 28px; }110 .nav-item.active { color: #1847cc; font-weight: 700; }111 /* Simple button hover (visual only) */112 .list-item:hover { background: #f6f9ff; }113</style>114</head>115<body>116<div id="render-target">117 118 <!-- Status bar -->119 <div class="status-bar">120 <div style="font-size:36px;">9:13</div>121 <div class="status-right">122 <!-- Wi-Fi icon -->123 <svg width="44" height="44" viewBox="0 0 44 44">124 <path d="M6 16c12-10 20-10 32 0" stroke="#fff" stroke-width="3" fill="none"/>125 <path d="M11 22c8-7 14-7 22 0" stroke="#fff" stroke-width="3" fill="none"/>126 <path d="M16 28c5-4 9-4 14 0" stroke="#fff" stroke-width="3" fill="none"/>127 <circle cx="23" cy="33" r="3" fill="#fff"></circle>128 </svg>129 <!-- Battery icon -->130 <svg width="60" height="34" viewBox="0 0 60 34">131 <rect x="2" y="6" width="50" height="22" rx="4" stroke="#fff" stroke-width="3" fill="none"></rect>132 <rect x="6" y="10" width="36" height="14" fill="#fff"></rect>133 <rect x="54" y="12" width="4" height="10" fill="#fff"></rect>134 </svg>135 </div>136 </div>137 138 <!-- Back button -->139 <div class="back-btn">140 <svg width="64" height="64" viewBox="0 0 64 64">141 <path d="M42 12 L22 32 L42 52" stroke="#fff" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>142 </svg>143 </div>144 145 <!-- Video Area -->146 <div class="video-area">147 <div class="video-top-icons">148 <!-- Bookmark outline -->149 <svg width="54" height="54" viewBox="0 0 54 54">150 <path d="M15 8h24v38l-12-8-12 8V8z" stroke="#fff" stroke-width="4" fill="none"></path>151 </svg>152 <!-- Share icon -->153 <svg width="54" height="54" viewBox="0 0 54 54">154 <circle cx="13" cy="27" r="5" fill="#fff"></circle>155 <circle cx="41" cy="13" r="5" fill="#fff"></circle>156 <circle cx="41" cy="41" r="5" fill="#fff"></circle>157 <path d="M18 27 L36 15 M18 27 L36 39" stroke="#fff" stroke-width="4" fill="none"></path>158 </svg>159 </div>160 161 <!-- Central controls -->162 <div class="center-controls">163 <div class="mini-circle">164 <!-- left rewind -->165 <svg width="50" height="50" viewBox="0 0 50 50">166 <path d="M32 14 L18 25 L32 36" stroke="#fff" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>167 </svg>168 <div class="label10">10</div>169 </div>170 <div class="circle-btn">171 <!-- Pause bars -->172 <svg width="86" height="86" viewBox="0 0 86 86">173 <rect x="20" y="18" width="14" height="50" fill="#fff"></rect>174 <rect x="52" y="18" width="14" height="50" fill="#fff"></rect>175 </svg>176 </div>177 <div class="mini-circle">178 <!-- right forward -->179 <svg width="50" height="50" viewBox="0 0 50 50">180 <path d="M18 14 L32 25 L18 36" stroke="#fff" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>181 </svg>182 <div class="label10">10</div>183 </div>184 </div>185 186 <!-- Progress row -->187 <div class="progress-row">188 <div class="time-text">00:01</div>189 <div class="seek">190 <div class="knob"></div>191 </div>192 <div class="time-text" style="text-align:right;">-04:12</div>193 <div class="speed">194 <span>1×</span>195 </div>196 <div class="speed">197 <!-- expand icon -->198 <svg width="48" height="48" viewBox="0 0 48 48">199 <path d="M6 18 L6 6 L18 6 M42 30 L42 42 L30 42" stroke="#fff" stroke-width="4" fill="none"></path>200 <path d="M18 30 L6 42 M30 18 L42 6" stroke="#fff" stroke-width="4" fill="none"></path>201 </svg>202 </div>203 </div>204 </div>205 206 <!-- Main content -->207 <div class="content">208 <div class="title">Distance and displacement introduction</div>209 <div class="subtitle">An introduction to the difference between distance traveled and displacement.</div>210 211 <div class="action-row">212 <div class="action-item">213 <svg width="64" height="64" viewBox="0 0 64 64">214 <path d="M20 10h24v42l-12-8-12 8V10z" stroke="#333" stroke-width="4" fill="none"></path>215 </svg>216 <span>Bookmark</span>217 </div>218 <div class="action-item">219 <svg width="64" height="64" viewBox="0 0 64 64">220 <circle cx="16" cy="32" r="6" fill="#333"></circle>221 <circle cx="48" cy="16" r="6" fill="#333"></circle>222 <circle cx="48" cy="48" r="6" fill="#333"></circle>223 <path d="M22 32 L42 18 M22 32 L42 46" stroke="#333" stroke-width="4" fill="none"></path>224 </svg>225 <span>Share</span>226 </div>227 <div class="action-item">228 <svg width="64" height="64" viewBox="0 0 64 64">229 <rect x="10" y="12" width="44" height="40" rx="6" stroke="#333" stroke-width="4" fill="none"></rect>230 <rect x="18" y="22" width="28" height="6" fill="#333"></rect>231 <rect x="18" y="34" width="18" height="6" fill="#333"></rect>232 </svg>233 <span>Transcript</span>234 </div>235 </div>236 237 <div class="section-header">Up next</div>238 239 <div class="lesson-card">240 <div class="label">Part of lesson</div>241 <div class="lesson-title">Distance, displacement, and coordinate systems</div>242 </div>243 244 <div class="list">245 <div class="list-item active">246 <div class="left-info">247 <div class="small-play">248 <svg width="40" height="40" viewBox="0 0 40 40">249 <path d="M14 10 L30 20 L14 30 Z" fill="#1847cc"></path>250 </svg>251 </div>252 <div class="item-text">253 <span>Distance and displacement</span>254 <span class="sub">introduction</span>255 </div>256 </div>257 <div class="duration">04:14</div>258 </div>259 260 <div class="list-item">261 <div class="left-info">262 <div class="small-play" style="border-color:#bbb; background:#f8f8f8;">263 <svg width="40" height="40" viewBox="0 0 40 40">264 <path d="M14 10 L30 20 L14 30 Z" fill="#777"></path>265 </svg>266 </div>267 <div class="normal-text" style="font-size:40px;">Distance and displacement in one dimension</div>268 </div>269 <div class="duration">05:32</div>270 </div>271 272 <div class="list-item">273 <div class="left-info">274 <div class="small-play" style="border-color:#bbb; background:#f8f8f8;">275 <svg width="40" height="40" viewBox="0 0 40 40">276 <path d="M14 10 L30 20 L14 30 Z" fill="#777"></path>277 </svg>278 </div>279 <div class="normal-text" style="font-size:40px;">Position-time graphs</div>280 </div>281 <div class="duration">05:01</div>282 </div>283 </div>284 </div>285 286 <!-- Bottom Navigation -->287 <div class="bottom-nav">288 <div class="nav-item active">289 <svg width="60" height="60" viewBox="0 0 60 60">290 <path d="M10 28 L30 12 L50 28 V50 H35 V36 H25 V50 H10 Z" fill="#1847cc"></path>291 </svg>292 <div>Home</div>293 </div>294 <div class="nav-item">295 <svg width="60" height="60" viewBox="0 0 60 60">296 <circle cx="26" cy="26" r="16" stroke="#666" stroke-width="4" fill="none"></circle>297 <path d="M40 40 L52 52" stroke="#666" stroke-width="4" stroke-linecap="round"></path>298 </svg>299 <div>Explore</div>300 </div>301 <div class="nav-item">302 <svg width="60" height="60" viewBox="0 0 60 60">303 <path d="M18 10h24v40l-12-8-12 8V10z" stroke="#666" stroke-width="4" fill="none"></path>304 </svg>305 <div>Bookmarks</div>306 </div>307 </div>308 309</div>310</body>311</html>