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 Watch UI - Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #121212;15 color: #FFFFFF;16 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif;17 }18 19 /* Video area */20 .video {21 position: relative;22 width: 100%;23 height: 720px;24 background: #000;25 }26 .poster {27 position: absolute;28 inset: 0;29 display: flex;30 align-items: center;31 justify-content: center;32 }33 .poster .img {34 width: 100%;35 height: 100%;36 background: #E0E0E0;37 border: 1px solid #BDBDBD;38 color: #757575;39 display: flex;40 align-items: center;41 justify-content: center;42 font-size: 36px;43 letter-spacing: 0.5px;44 }45 46 /* Top status icons over video */47 .status-icons {48 position: absolute;49 top: 20px;50 left: 24px;51 right: 24px;52 height: 64px;53 display: flex;54 align-items: center;55 justify-content: space-between;56 pointer-events: none;57 }58 .status-left, .status-right {59 display: flex;60 align-items: center;61 gap: 20px;62 }63 .status-time { font-size: 28px; opacity: 0.9; }64 .icon {65 width: 36px; height: 36px; fill: #FFFFFF; opacity: 0.95;66 }67 68 /* Center controls */69 .center-controls {70 position: absolute;71 inset: 0;72 display: flex;73 align-items: center;74 justify-content: center;75 gap: 160px;76 pointer-events: none;77 }78 .round-ctl {79 width: 132px; height: 132px; border-radius: 50%;80 background: rgba(255,255,255,0.12);81 display: flex; align-items: center; justify-content: center;82 }83 .play {84 width: 160px; height: 160px; border-radius: 50%;85 background: rgba(0,0,0,0.35);86 border: 2px solid rgba(255,255,255,0.25);87 display: flex; align-items: center; justify-content: center;88 }89 .play svg { width: 88px; height: 88px; fill: #FFFFFF; }90 91 /* Utility row (cc, settings etc.) */92 .utility-row {93 position: absolute;94 right: 24px; top: 120px;95 display: flex; gap: 28px; align-items: center; pointer-events: none;96 }97 .utility-row .util {98 width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;99 background: rgba(255,255,255,0.08);100 border-radius: 8px;101 }102 .utility-row .util svg { width: 30px; height: 30px; fill: #FFFFFF; }103 104 /* Time and progress */105 .timecode {106 position: absolute; left: 28px; bottom: 90px; font-size: 28px; opacity: 0.9;107 }108 .progress {109 position: absolute; left: 0; right: 0; bottom: 50px; height: 6px;110 background: rgba(255,255,255,0.2);111 }112 .progress .bar { width: 270px; height: 100%; background: #FF3B30; }113 .progress .knob {114 position: absolute; left: 270px; top: 50%; transform: translate(-10px,-50%);115 width: 20px; height: 20px; background: #FF3B30; border-radius: 50%;116 box-shadow: 0 0 0 6px rgba(255,59,48,0.2);117 }118 119 /* Content below video */120 .content { padding: 24px 28px 0 28px; }121 .title {122 font-size: 46px; line-height: 1.22; font-weight: 800; margin-top: 18px;123 }124 .meta {125 color: #B0B0B0; font-size: 26px; margin-top: 12px;126 }127 128 .channel-row {129 margin-top: 26px; display: flex; align-items: center; justify-content: space-between;130 }131 .channel-info { display: flex; align-items: center; gap: 20px; }132 .avatar {133 width: 84px; height: 84px; border-radius: 50%;134 background: #E0E0E0; border: 1px solid #BDBDBD;135 color: #757575; display: flex; align-items: center; justify-content: center; font-size: 20px;136 }137 .ch-text { display: flex; flex-direction: column; }138 .ch-name { font-size: 30px; font-weight: 700; }139 .ch-sub { font-size: 24px; color: #B0B0B0; margin-top: 4px; }140 .bell {141 display: flex; align-items: center; gap: 10px;142 background: #1F1F1F; border-radius: 999px; padding: 14px 20px; color: #FFFFFF;143 }144 .bell svg { width: 32px; height: 32px; fill: #FFFFFF; }145 146 .actions {147 margin-top: 28px; display: flex; gap: 22px; flex-wrap: wrap;148 }149 .pill {150 display: flex; align-items: center; gap: 14px;151 background: #1E1E1E; border-radius: 999px; padding: 16px 26px; border: 1px solid #262626;152 font-size: 26px;153 }154 .pill svg { width: 34px; height: 34px; fill: #FFFFFF; }155 156 /* Comments card */157 .comment-card {158 margin-top: 28px; background: #1B1B1B; border-radius: 26px; padding: 24px;159 border: 1px solid #262626;160 }161 .comment-header { display: flex; justify-content: space-between; align-items: center; }162 .comment-header .label { font-size: 28px; }163 .comment-body { display: flex; gap: 18px; margin-top: 18px; color: #DDDDDD; }164 .comment-body .initial {165 width: 56px; height: 56px; border-radius: 50%; background: #2A2A2A; display: flex; align-items: center; justify-content: center;166 color: #A0A0A0; font-weight: 700;167 }168 .comment-text { font-size: 26px; line-height: 1.4; }169 170 /* Ad banner */171 .ad-banner { margin-top: 26px; }172 .ad-banner .img {173 width: 100%; height: 520px; background: #E0E0E0; border: 1px solid #BDBDBD;174 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px;175 }176 177 /* Shop section */178 .shop-header {179 margin-top: 10px; background: #1C1F26; padding: 18px 28px; display: flex; align-items: center; justify-content: space-between;180 border-top: 1px solid #232323; border-bottom: 1px solid #232323;181 }182 .shop-header .title-shop { color: #4DA3FF; font-size: 30px; font-weight: 700; }183 .external svg { width: 36px; height: 36px; fill: #4DA3FF; }184 185 .ad-card {186 padding: 18px 28px; display: flex; align-items: center; justify-content: space-between;187 }188 .ad-left { display: flex; align-items: center; gap: 20px; }189 .logo {190 width: 72px; height: 72px; border-radius: 50%; background: #E0E0E0; border: 1px solid #BDBDBD;191 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 20px;192 }193 .ad-text .ad-title { font-size: 30px; font-weight: 700; }194 .ad-text .ad-sub { font-size: 24px; color: #CFCFCF; margin-top: 4px; }195 .ad-text .ad-meta { font-size: 22px; color: #9E9E9E; margin-top: 6px; }196 .more svg { width: 36px; height: 36px; fill: #FFFFFF; opacity: 0.9; }197 198 /* Bottom gesture bar */199 .gesture {200 position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);201 width: 280px; height: 10px; border-radius: 8px; background: #EAEAEA; opacity: 0.8;202 }203</style>204</head>205<body>206<div id="render-target">207 208 <!-- Video player area -->209 <div class="video">210 <div class="poster">211 <div class="img">[IMG: Workbench woodworking video frame]</div>212 </div>213 214 <div class="status-icons">215 <div class="status-left">216 <div class="status-time">7:27</div>217 </div>218 <div class="status-right">219 <!-- Simple status glyphs -->220 <svg class="icon" viewBox="0 0 24 24"><path d="M3 6h18v2H3zM3 11h12v2H3zM3 16h18v2H3z"/></svg>221 <svg class="icon" viewBox="0 0 24 24"><path d="M6 18l8.5-6L6 6v12zM18 6h2v12h-2z"/></svg>222 <svg class="icon" viewBox="0 0 24 24"><path d="M10 4h4v4h-4zM4 10h4v4H4zm12 0h4v4h-4zM10 16h4v4h-4z"/></svg>223 <svg class="icon" viewBox="0 0 24 24"><path d="M10 20v-6H6l6-10v6h4l-6 10z"/></svg>224 <svg class="icon" viewBox="0 0 24 24"><path d="M12 4a8 8 0 100 16 8 8 0 000-16zm1 5v4h4v2h-6V9h2z"/></svg>225 </div>226 </div>227 228 <!-- Utility row (right side) -->229 <div class="utility-row">230 <div class="util"><svg viewBox="0 0 24 24"><path d="M8 5h8v2H8zm-2 4h12v2H6zm-2 4h16v2H4zm4 4h8v2H8z"/></svg></div>231 <div class="util"><svg viewBox="0 0 24 24"><path d="M12 3l8 4v10l-8 4-8-4V7l8-4zm0 2.2L6 7.7v8.6l6 2.5 6-2.5V7.7l-6-2.5z"/></svg></div>232 <div class="util"><svg viewBox="0 0 24 24"><path d="M12 8a4 4 0 110 8 4 4 0 010-8zm8 4a8 8 0 11-16 0 8 8 0 0116 0z"/></svg></div>233 <div class="util"><svg viewBox="0 0 24 24"><path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3 1.4 1.4z"/></svg></div>234 </div>235 236 <!-- Center controls -->237 <div class="center-controls">238 <div class="round-ctl">239 <svg viewBox="0 0 24 24" width="52" height="52" fill="#fff">240 <path d="M12 5a7 7 0 107 7h-2a5 5 0 11-5-5V5zM11 11h4v2h-6V9h2v2z"/>241 </svg>242 </div>243 <div class="play">244 <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>245 </div>246 <div class="round-ctl">247 <svg viewBox="0 0 24 24" width="52" height="52" fill="#fff">248 <path d="M12 5a7 7 0 107 7h-2a5 5 0 11-5-5V5zM13 11V9h2v6h-2v-2h-2v-2h2z"/>249 </svg>250 </div>251 </div>252 253 <div class="timecode">2:06 / 16:24</div>254 <div class="progress">255 <div class="bar"></div>256 <div class="knob"></div>257 </div>258 </div>259 260 <!-- Content -->261 <div class="content">262 <div class="title">How to make A Workbench | DIY WOODWORKING</div>263 <div class="meta">18 lakh views • 3 yr ago • …more</div>264 265 <div class="channel-row">266 <div class="channel-info">267 <div class="avatar">[Avatar]</div>268 <div class="ch-text">269 <div class="ch-name">DIY Creators</div>270 <div class="ch-sub">31.9 lakh subscribers</div>271 </div>272 </div>273 <div class="bell">274 <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 002-2h-4a2 2 0 002 2zM18 16v-5a6 6 0 10-12 0v5l-2 2v1h16v-1l-2-2z"/></svg>275 <svg viewBox="0 0 24 24" width="22" height="22" fill="#fff"><path d="M12 5.5l1.5 3.5 3.5.5-2.5 2.5.6 3.5-3.1-1.7-3.1 1.7.6-3.5L7 9.5l3.5-.5L12 5.5z"/></svg>276 </div>277 </div>278 279 <div class="actions">280 <div class="pill">281 <svg viewBox="0 0 24 24"><path d="M12 21l-1.45-1.32C5.4 15.36 2 12.28 2 8.5A4.5 4.5 0 016.5 4c1.74 0 3.41.81 4.5 2.09A6.1 6.1 0 0115.5 4 4.5 4.5 0 0120 8.5c0 3.78-3.4 6.86-8.55 11.18L12 21z"/></svg>282 <span>60K</span>283 </div>284 <div class="pill">285 <svg viewBox="0 0 24 24"><path d="M18 8l-8-5v4H5v2h5v4l8-5zM5 13h14v2H5zm0 4h10v2H5z"/></svg>286 <span>Share</span>287 </div>288 <div class="pill">289 <svg viewBox="0 0 24 24"><path d="M9 7v4H5l7 7 7-7h-4V7H9z"/></svg>290 <span>Remix</span>291 </div>292 <div class="pill">293 <svg viewBox="0 0 24 24"><path d="M12 3v10.55A4 4 0 1014 17V7h4V3h-6z"/></svg>294 <span>Download</span>295 </div>296 </div>297 298 <div class="comment-card">299 <div class="comment-header">300 <div class="label">Comments 1.9K</div>301 <svg viewBox="0 0 24 24" width="32" height="32" fill="#FFFFFF"><path d="M7 10l5 5 5-5z"/></svg>302 </div>303 <div class="comment-body">304 <div class="initial">J</div>305 <div class="comment-text">Visual for "where I'm at" is very helpful. Haven't seen that very often in videos.</div>306 </div>307 </div>308 309 <div class="ad-banner">310 <div class="img">[IMG: Lifestyle clothing advertisement banner]</div>311 </div>312 </div>313 314 <div class="shop-header">315 <div class="title-shop">Shop</div>316 <div class="external"><svg viewBox="0 0 24 24"><path d="M14 3h7v7h-2V6.4l-8.3 8.3-1.4-1.4L17.6 5H14V3zM5 5h7v2H7v10h10v-5h2v7H5V5z"/></svg></div>317 </div>318 319 <div class="ad-card">320 <div class="ad-left">321 <div class="logo">[Logo]</div>322 <div class="ad-text">323 <div class="ad-title">Lifestyle - Online Shopping Fo</div>324 <div class="ad-sub">Now Get Upto 60% + 12% Extra.</div>325 <div class="ad-meta">Ad • Installed</div>326 </div>327 </div>328 <div class="more"><svg viewBox="0 0 24 24"><path d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4z"/></svg></div>329 </div>330 331 <div class="gesture"></div>332</div>333</body>334</html>