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 Page Mock</title>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; border-radius: 24px;13 box-shadow: 0 6px 24px rgba(0,0,0,0.08);14 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;15 color: #1f2a35;16 }17 .status-bar {18 position: absolute; top: 0; left: 0; right: 0;19 height: 96px; padding: 0 32px;20 display: flex; align-items: center; justify-content: space-between;21 color: #0b0b0b; font-weight: 600; font-size: 40px;22 z-index: 5;23 }24 .status-icons { display: flex; align-items: center; gap: 26px; }25 .status-dot { width: 18px; height: 18px; background: #0b0b0b; border-radius: 50%; }26 .battery {27 width: 60px; height: 32px; border: 4px solid #0b0b0b; border-radius: 6px; position: relative;28 }29 .battery::after { content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 16px; background: #0b0b0b; border-radius: 2px; }30 .battery .level { width: 36px; height: 20px; background: #0b0b0b; margin: 6px; border-radius: 3px; }31 /* Video player area */32 .player {33 position: absolute; top: 96px; left: 0; width: 1080px; height: 880px; background: #10151b;34 }35 .player .poster {36 position: absolute; inset: 0;37 background: #E0E0E0; border: 1px solid #BDBDBD;38 display: flex; align-items: center; justify-content: center;39 color: #757575; font-size: 38px;40 }41 .player .close {42 position: absolute; top: 36px; left: 32px; width: 64px; height: 64px; border-radius: 50%;43 display: flex; align-items: center; justify-content: center; color: #ffffff; opacity: 0.9;44 }45 .player .close svg { width: 44px; height: 44px; }46 .player .menu {47 position: absolute; top: 36px; right: 32px; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;48 }49 .dots { width: 14px; height: 44px; display: flex; flex-direction: column; justify-content: space-between; }50 .dots span { width: 14px; height: 14px; background: #ffffff; border-radius: 50%; opacity: 0.9; }51 .player .center-loader {52 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -40%);53 width: 160px; height: 160px; border-radius: 50%;54 border: 16px solid rgba(255,255,255,0.35);55 border-left-color: #4FA3DB;56 border-right-color: rgba(255,255,255,0.35);57 }58 .skip {59 position: absolute; top: 50%; transform: translateY(-30%);60 width: 160px; height: 160px; border-radius: 80px; display: flex; align-items: center; justify-content: center;61 color: #ffffff; font-weight: 700; font-size: 40px; gap: 10px;62 }63 .skip.left { left: 120px; }64 .skip.right { right: 120px; }65 .skip svg { width: 48px; height: 48px; }66 .player .time {67 position: absolute; bottom: 120px; left: 32px; color: #ffffff; font-size: 36px; letter-spacing: 0.5px;68 }69 .player .progress {70 position: absolute; bottom: 80px; left: 0; right: 0; height: 8px; background: rgba(255,255,255,0.25);71 }72 .player .progress .bar {73 position: absolute; left: 0; top: 0; height: 8px; width: 40px; background: #ffffff;74 }75 .player .progress .dot {76 position: absolute; left: 40px; top: -10px; width: 28px; height: 28px; background: #ffffff; border-radius: 50%;77 }78 .player .fullscreen {79 position: absolute; bottom: 24px; right: 24px; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;80 }81 .player .fullscreen svg { width: 42px; height: 42px; fill: none; stroke: #ffffff; stroke-width: 6; opacity: 0.9; }82 /* Content section */83 .content {84 position: absolute; top: 976px; left: 0; right: 0; padding: 0 40px;85 }86 .title {87 font-size: 64px; font-weight: 800; line-height: 1.1; letter-spacing: 1px; color: #2c3949;88 }89 .actions-row {90 margin-top: 36px; display: flex; align-items: center; justify-content: space-between;91 }92 .actions {93 display: flex; gap: 40px; align-items: flex-start;94 }95 .action {96 display: flex; flex-direction: column; align-items: center; gap: 16px;97 }98 .action .btn {99 width: 140px; height: 120px; border: 2px solid #E3E8EE; border-radius: 28px;100 display: flex; align-items: center; justify-content: center;101 }102 .action .btn svg { width: 52px; height: 52px; stroke: #2c3949; stroke-width: 4; fill: none; }103 .count { font-size: 34px; color: #6b7a8d; font-weight: 700; }104 .more-menu { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }105 .more-menu .dots span { background: #7c8a95; }106 .meta { margin-top: 28px; font-size: 38px; color: #3d4a57; }107 .divider { height: 2px; background: #e6eaef; margin: 36px 0; }108 .channel-row {109 display: flex; align-items: center; justify-content: space-between;110 }111 .channel-info { display: flex; align-items: center; gap: 24px; }112 .avatar {113 width: 96px; height: 96px; border-radius: 48px; background: #E0E0E0; border: 1px solid #BDBDBD;114 display: flex; align-items: center; justify-content: center; color: #757575; font-weight: 700;115 }116 .channel-text .name { font-size: 42px; font-weight: 700; }117 .channel-text .sub { font-size: 32px; color: #7a8795; margin-top: 8px; }118 .follow {119 padding: 18px 28px; border: 2px solid #E3E8EE; border-radius: 18px; font-size: 34px; color: #2c3949;120 display: flex; align-items: center; gap: 14px; background: #f7fafc;121 }122 .follow svg { width: 36px; height: 36px; stroke: #2c3949; stroke-width: 4; fill: none; }123 .share-cta {124 margin-top: 36px; background: #4FA3DB; color: #ffffff; border-radius: 28px; height: 120px;125 display: flex; align-items: center; justify-content: center; gap: 20px; font-size: 44px; font-weight: 700;126 }127 .share-cta svg { width: 48px; height: 48px; stroke: #ffffff; stroke-width: 4; fill: none; }128 .autoplay-row {129 display: flex; align-items: center; justify-content: space-between; margin-top: 32px;130 font-size: 38px; color: #3d4a57;131 }132 .switch {133 width: 120px; height: 64px; background: #c6d8f1; border-radius: 32px; position: relative;134 }135 .switch::before {136 content: ""; position: absolute; right: 6px; top: 6px; width: 52px; height: 52px; background: #2f87d2; border-radius: 26px;137 box-shadow: 0 2px 6px rgba(0,0,0,0.15);138 }139 .section-title { margin-top: 42px; font-size: 40px; font-weight: 800; letter-spacing: 0.5px; color: #3b4957; }140 /* Video list */141 .video-list { margin-top: 24px; }142 .item {143 display: flex; align-items: center; padding: 24px 0; border-bottom: 2px solid #edf1f6;144 }145 .thumb {146 width: 360px; height: 210px; border-radius: 24px; overflow: hidden; position: relative;147 background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 32px;148 }149 .runtime {150 position: absolute; right: 12px; bottom: 12px; background: rgba(0,0,0,0.75); color: #ffffff; padding: 8px 14px;151 border-radius: 12px; font-size: 30px; font-weight: 700;152 }153 .info { flex: 1; padding: 0 24px; }154 .info .vtitle { font-size: 40px; font-weight: 800; color: #2c3949; }155 .info .author { font-size: 34px; color: #6b7a8d; margin-top: 6px; }156 .info .meta-line { font-size: 32px; color: #6b7a8d; margin-top: 8px; }157 .item .item-menu { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }158 /* Bottom home indicator */159 .home-indicator {160 position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);161 width: 360px; height: 14px; background: #0b0b0b; opacity: 0.2; border-radius: 8px;162 }163</style>164</head>165<body>166<div id="render-target">167 168 <!-- Status bar -->169 <div class="status-bar">170 <div>11:23</div>171 <div class="status-icons">172 <!-- simple placeholders for status icons -->173 <svg width="36" height="36" viewBox="0 0 24 24">174 <circle cx="12" cy="12" r="10" fill="#0b0b0b"></circle>175 </svg>176 <svg width="36" height="36" viewBox="0 0 24 24">177 <path d="M2 18l10-12 10 12" stroke="#0b0b0b" stroke-width="2" fill="none"></path>178 </svg>179 <svg width="36" height="36" viewBox="0 0 24 24">180 <path d="M3 18h18M6 14h12M9 10h6M12 6h0" stroke="#0b0b0b" stroke-width="2" fill="none"></path>181 </svg>182 <svg width="36" height="36" viewBox="0 0 24 24">183 <path d="M4 18h16M6 14h12M8 10h8M10 6h4" stroke="#0b0b0b" stroke-width="2" fill="none"></path>184 </svg>185 <div class="battery"><div class="level"></div></div>186 </div>187 </div>188 189 <!-- Video player -->190 <div class="player">191 <div class="poster">[IMG: Concert Stage Video]</div>192 193 <div class="close">194 <svg viewBox="0 0 24 24">195 <path d="M4 4L20 20M20 4L4 20" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>196 </svg>197 </div>198 199 <div class="menu">200 <div class="dots"><span></span><span></span><span></span></div>201 </div>202 203 <div class="center-loader"></div>204 205 <div class="skip left">206 <svg viewBox="0 0 24 24">207 <path d="M12 3a9 9 0 1 0 9 9" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>208 <path d="M15 6l-3 3 3 3" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>209 </svg>210 <span>10</span>211 </div>212 213 <div class="skip right">214 <svg viewBox="0 0 24 24">215 <path d="M12 3a9 9 0 1 0 9 9" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>216 <path d="M9 6l3 3-3 3" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>217 </svg>218 <span>10</span>219 </div>220 221 <div class="time">00:00 / 03:23</div>222 223 <div class="progress">224 <div class="bar"></div>225 <div class="dot"></div>226 </div>227 228 <div class="fullscreen">229 <svg viewBox="0 0 24 24">230 <path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5"></path>231 </svg>232 </div>233 </div>234 235 <!-- Content area -->236 <div class="content">237 <div class="title">RECAIDAS - HENRIQUE E JULIANO</div>238 239 <div class="actions-row">240 <div class="actions">241 <div class="action">242 <div class="btn">243 <svg viewBox="0 0 24 24">244 <path d="M8 5l10 7-10 7V5z" stroke="#2c3949" stroke-width="2" fill="none" stroke-linejoin="round"></path>245 </svg>246 </div>247 <div class="count">20K</div>248 </div>249 <div class="action">250 <div class="btn">251 <svg viewBox="0 0 24 24">252 <path d="M12 21s-6-4.35-8-7.5C2 10 3.5 6.5 7 6.5c2.1 0 3.3 1 5 2.9 1.7-1.9 2.9-2.9 5-2.9 3.5 0 5 3.5 3 7-2 3.15-8 7.5-8 7.5z" stroke="#2c3949" stroke-width="2" fill="none" stroke-linecap="round"></path>253 </svg>254 </div>255 <div class="count">172</div>256 </div>257 <div class="action">258 <div class="btn">259 <svg viewBox="0 0 24 24">260 <path d="M4 5h16v10H7l-3 4V5z" stroke="#2c3949" stroke-width="2" fill="none" stroke-linejoin="round"></path>261 </svg>262 </div>263 <div class="count">0</div>264 </div>265 </div>266 <div class="more-menu">267 <div class="dots"><span></span><span></span><span></span></div>268 </div>269 </div>270 271 <div class="meta">Uploaded on April 29, 2014</div>272 273 <div class="divider"></div>274 275 <div class="channel-row">276 <div class="channel-info">277 <div class="avatar">UF</div>278 <div class="channel-text">279 <div class="name">Unic Film Produções</div>280 <div class="sub">1 video</div>281 </div>282 </div>283 <div class="follow">284 <svg viewBox="0 0 24 24">285 <path d="M5 12l5 5L19 8" stroke="#2c3949" stroke-width="2" fill="none" stroke-linecap="round"></path>286 </svg>287 <span>Following</span>288 </div>289 </div>290 291 <div class="divider"></div>292 293 <div class="share-cta">294 <svg viewBox="0 0 24 24">295 <path d="M12 16V4M6 10l6-6 6 6M5 20h14" fill="none"></path>296 </svg>297 <span>Share</span>298 </div>299 300 <div class="autoplay-row">301 <div>Autoplay</div>302 <div class="switch"></div>303 </div>304 305 <div class="section-title">MORE VIDEOS</div>306 307 <div class="video-list">308 <div class="item">309 <div class="thumb">310 [IMG: Video Thumbnail]311 <div class="runtime">03:43</div>312 </div>313 <div class="info">314 <div class="vtitle">Bambina 'Anyway U Want It'</div>315 <div class="author">Erin Murray</div>316 <div class="meta-line">92 views · 1 month ago</div>317 </div>318 <div class="item-menu"><div class="dots"><span></span><span></span><span></span></div></div>319 </div>320 321 <div class="item">322 <div class="thumb">323 [IMG: Video Thumbnail]324 <div class="runtime">15:06</div>325 </div>326 <div class="info">327 <div class="vtitle">Berry Pickers</div>328 <div class="author">Agnes Skonare Karlsson</div>329 <div class="meta-line">6.2K views · 3 days ago</div>330 </div>331 <div class="item-menu"><div class="dots"><span></span><span></span><span></span></div></div>332 </div>333 </div>334 </div>335 336 <div class="home-indicator"></div>337</div>338</body>339</html>