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 :root {9 --bg: #FFFFFF;10 --text: #1F2A37;11 --sub: #667085;12 --muted: #94A3B8;13 --border: #E5E7EB;14 --divider: #EDF2F7;15 --blue: #4EA6FF;16 --blue-dark: #2B78E4;17 --dot: #9CA3AF;18 }19 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--text); }20 #render-target {21 position: relative;22 overflow: hidden;23 width: 1080px;24 height: 2400px;25 background: var(--bg);26 }27 28 /* Status bar */29 .status-bar {30 position: absolute;31 top: 0;32 left: 0;33 right: 0;34 height: 110px;35 background: #000;36 color: #fff;37 display: flex;38 align-items: center;39 padding: 0 36px;40 font-weight: 600;41 }42 .status-time { font-size: 40px; letter-spacing: 0.5px; }43 .status-icons { margin-left: auto; display: flex; align-items: center; gap: 28px; }44 .status-icons svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 3.5; }45 46 /* Video area */47 .video-area {48 position: absolute;49 top: 110px;50 left: 0;51 width: 100%;52 height: 910px;53 background: #111;54 }55 .video-placeholder {56 position: absolute;57 inset: 0;58 display: flex;59 justify-content: center;60 align-items: center;61 color: #757575;62 background: #E0E0E0;63 border: 1px solid #BDBDBD;64 font-size: 38px;65 letter-spacing: 0.2px;66 }67 .video-overlay {68 position: absolute;69 inset: 0;70 color: #fff;71 }72 .overlay-top {73 position: absolute;74 top: 25px;75 left: 25px;76 right: 25px;77 display: flex;78 align-items: center;79 justify-content: space-between;80 padding: 18px;81 }82 .overlay-top .close-btn, .overlay-top .more-btn {83 width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;84 }85 .overlay-center {86 position: absolute;87 top: 50%;88 left: 0; right: 0;89 transform: translateY(-50%);90 display: flex;91 align-items: center;92 justify-content: center;93 gap: 200px;94 }95 .circle-icon {96 width: 130px; height: 130px; border-radius: 65px; border: 4px solid rgba(255,255,255,0.85);97 display:flex; align-items:center; justify-content:center;98 }99 .play-big {100 width: 170px; height: 170px; border-radius: 85px; background: rgba(255,255,255,0.15);101 display:flex; align-items:center; justify-content:center;102 }103 .play-big svg { width: 90px; height: 90px; fill: #fff; }104 .time-row {105 position: absolute;106 bottom: 120px;107 left: 40px;108 right: 40px;109 color: #fff;110 font-size: 40px;111 display: flex;112 align-items: center;113 gap: 30px;114 }115 .progress {116 flex: 1;117 height: 12px;118 background: rgba(255,255,255,0.25);119 border-radius: 6px;120 position: relative;121 }122 .progress .bar {123 position: absolute; left: 0; top: 0; bottom: 0; width: 45%;124 background: #4EA6FF; border-radius: 6px;125 }126 .progress .knob {127 position: absolute; left: 45%; top: 50%; transform: translate(-50%, -50%);128 width: 28px; height: 28px; background:#fff; border-radius: 14px;129 box-shadow: 0 0 0 3px rgba(255,255,255,0.5);130 }131 132 /* Content below video */133 .content {134 position: absolute;135 top: 1020px;136 left: 0;137 right: 0;138 padding: 0 36px 24px 36px;139 }140 .title {141 font-size: 56px; font-weight: 800; letter-spacing: 0.5px; line-height: 1.2; margin: 30px 0 24px 0;142 }143 .actions-row {144 display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;145 }146 .metric-group {147 display: flex; gap: 34px;148 }149 .metric {150 display: flex; flex-direction: column; align-items: center; gap: 14px;151 }152 .metric .btn {153 width: 140px; height: 120px; border: 2px solid var(--border); border-radius: 26px;154 display:flex; align-items:center; justify-content:center; color: var(--text);155 background: #fff;156 }157 .metric svg { width: 50px; height: 50px; stroke: #3B4556; stroke-width: 3.5; fill: none; }158 .metric .count { font-size: 32px; color: #374151; }159 .overflow-dots { width: 80px; height: 80px; display:flex; align-items:center; justify-content:center; }160 .overflow-dots svg { width: 12px; height: 52px; fill: #6B7280; }161 162 .uploaded { font-size: 36px; color: #4B5563; margin: 6px 0 24px 0; }163 .divider { height: 2px; background: var(--divider); margin: 14px 0 28px 0; }164 165 /* Channel row */166 .channel-row { display:flex; align-items:center; justify-content: space-between; }167 .channel-left { display:flex; align-items:center; gap: 26px; }168 .avatar {169 width: 120px; height: 120px; border-radius: 60px; background:#E0E0E0; border:1px solid #BDBDBD;170 display:flex; align-items:center; justify-content:center; color:#757575; font-weight:700; font-size: 40px;171 }172 .channel-info { display:flex; flex-direction:column; }173 .channel-name { font-size: 42px; font-weight: 700; }174 .channel-meta { font-size: 32px; color: var(--sub); margin-top: 6px; }175 .follow-btn {176 display:flex; align-items:center; gap: 14px; border:2px solid var(--border); border-radius: 16px;177 padding: 20px 28px; font-weight:700; color:#111;178 }179 .follow-btn svg { width: 30px; height: 30px; stroke: #111; stroke-width: 3; fill: none; }180 181 /* Share button */182 .share-wrap { margin: 28px 0 20px 0; }183 .share-btn {184 width: 100%; height: 140px; border-radius: 28px; background: var(--blue);185 display:flex; align-items:center; justify-content:center; gap: 18px; color: #fff; font-size: 44px; font-weight: 700;186 box-shadow: 0 6px 20px rgba(78,166,255,0.35);187 }188 .share-btn svg { width: 48px; height: 48px; stroke: #fff; stroke-width: 4; fill: none; }189 190 /* More videos header */191 .section-head {192 display:flex; align-items:center; justify-content: space-between; margin-top: 16px; margin-bottom: 16px;193 }194 .section-title { font-size: 36px; letter-spacing: 0.3px; color:#4B5563; font-weight: 700; }195 .autoplay {196 display:flex; align-items:center; gap: 18px; color:#4B5563; font-size: 34px;197 }198 .toggle {199 width: 120px; height: 64px; border-radius: 32px; background: #CDE9FF; position: relative;200 }201 .toggle::after {202 content:""; position:absolute; top: 8px; left: 58px; width: 48px; height: 48px; border-radius: 24px; background: var(--blue);203 box-shadow: 0 2px 6px rgba(0,0,0,0.2);204 }205 206 /* Video list items */207 .video-list { background:#fff; border-top:1px solid var(--divider); }208 .video-item { display:flex; align-items:flex-start; padding: 22px 8px; border-bottom:1px solid var(--divider); }209 .thumb {210 width: 370px; height: 210px; border-radius: 20px; overflow:hidden; position:relative;211 background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size: 34px;212 }213 .duration {214 position:absolute; right: 12px; bottom: 12px; background: rgba(0,0,0,0.75); color:#fff; font-size:28px;215 padding: 8px 12px; border-radius: 10px;216 }217 .vid-info { flex:1; padding: 0 24px; }218 .vid-title { font-size: 40px; font-weight: 700; color:#111; margin-top: 6px; }219 .vid-author { font-size: 32px; color: #4B5563; margin-top: 8px; }220 .vid-meta { font-size: 30px; color: #6B7280; margin-top: 8px; }221 .item-more { width: 80px; height: 80px; display:flex; align-items:center; justify-content:center; }222 .item-more svg { width: 12px; height: 52px; fill: #6B7280; }223 224 /* Gesture bar */225 .gesture {226 position: absolute;227 bottom: 22px; left: 50%;228 transform: translateX(-50%);229 width: 240px; height: 16px; background: #111; opacity: 0.12; border-radius: 8px;230 }231</style>232</head>233<body>234<div id="render-target">235 236 <!-- Status Bar -->237 <div class="status-bar">238 <div class="status-time">11:22</div>239 <div class="status-icons">240 <!-- simple icons: compass, location, wifi, battery -->241 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M12 6l-2 6 6-2"></path></svg>242 <svg viewBox="0 0 24 24"><path d="M12 2v20"></path><path d="M5 9l7-7 7 7"></path></svg>243 <svg viewBox="0 0 24 24"><path d="M3 9c3-5 15-5 18 0"></path><path d="M6 12c2-3 10-3 12 0"></path><path d="M9 15c1-1 5-1 6 0"></path></svg>244 <svg viewBox="0 0 24 24"><rect x="7" y="4" width="10" height="16" rx="2"></rect><path d="M10 3h4"></path></svg>245 </div>246 </div>247 248 <!-- Video Area -->249 <div class="video-area">250 <div class="video-placeholder">[IMG: Concert Stage Video]</div>251 <div class="video-overlay">252 <div class="overlay-top">253 <div class="close-btn">254 <svg viewBox="0 0 24 24">255 <path d="M4 4l16 16M20 4L4 20" stroke="#fff" stroke-width="3" fill="none"></path>256 </svg>257 </div>258 <div class="more-btn">259 <svg viewBox="0 0 4 18"><circle cx="2" cy="3" r="2" fill="#fff"></circle><circle cx="2" cy="9" r="2" fill="#fff"></circle><circle cx="2" cy="15" r="2" fill="#fff"></circle></svg>260 </div>261 </div>262 263 <div class="overlay-center">264 <div class="circle-icon">265 <svg viewBox="0 0 24 24">266 <path d="M6 12a6 6 0 1 0 12 0" stroke="#fff" stroke-width="2.5" fill="none"></path>267 <path d="M14 8l4-1-1 4" stroke="#fff" stroke-width="2.5" fill="none"></path>268 <text x="12" y="16" font-size="8" text-anchor="middle" fill="#fff">10</text>269 </svg>270 </div>271 <div class="play-big">272 <svg viewBox="0 0 24 24"><path d="M8 5l12 7-12 7z"></path></svg>273 </div>274 <div class="circle-icon">275 <svg viewBox="0 0 24 24">276 <path d="M18 12a6 6 0 1 1-12 0" stroke="#fff" stroke-width="2.5" fill="none"></path>277 <path d="M10 16l-4 1 1-4" stroke="#fff" stroke-width="2.5" fill="none"></path>278 <text x="12" y="16" font-size="8" text-anchor="middle" fill="#fff">10</text>279 </svg>280 </div>281 </div>282 283 <div class="time-row">284 <div>02:03 / 03:23</div>285 <div class="progress">286 <div class="bar"></div>287 <div class="knob"></div>288 </div>289 </div>290 </div>291 </div>292 293 <!-- Content -->294 <div class="content">295 <div class="title">RECADAS - HENRIQUE E JULIANO</div>296 297 <div class="actions-row">298 <div class="metric-group">299 <div class="metric">300 <div class="btn">301 <svg viewBox="0 0 24 24"><path d="M7 5v14l12-7-12-7z"></path></svg>302 </div>303 <div class="count">20K</div>304 </div>305 <div class="metric">306 <div class="btn">307 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.5-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 9-7 9z"></path></svg>308 </div>309 <div class="count">172</div>310 </div>311 <div class="metric">312 <div class="btn">313 <svg viewBox="0 0 24 24"><path d="M4 5h16v11H7l-3 3z"></path></svg>314 </div>315 <div class="count">0</div>316 </div>317 </div>318 <div class="overflow-dots">319 <svg viewBox="0 0 4 18"><circle cx="2" cy="3" r="2"></circle><circle cx="2" cy="9" r="2"></circle><circle cx="2" cy="15" r="2"></circle></svg>320 </div>321 </div>322 323 <div class="uploaded">Uploaded on April 29, 2014</div>324 <div class="divider"></div>325 326 <div class="channel-row">327 <div class="channel-left">328 <div class="avatar">UF</div>329 <div class="channel-info">330 <div class="channel-name">Unic Film Produções</div>331 <div class="channel-meta">1 video</div>332 </div>333 </div>334 <div class="follow-btn">335 <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"></path></svg>336 <span>Follow</span>337 </div>338 </div>339 340 <div class="share-wrap">341 <div class="share-btn">342 <svg viewBox="0 0 24 24"><path d="M12 16V4M7 8l5-4 5 4"></path><path d="M5 20h14v-6H5z"></path></svg>343 <span>Share</span>344 </div>345 </div>346 347 <div class="section-head">348 <div class="section-title">MORE VIDEOS</div>349 <div class="autoplay">350 <span>Autoplay</span>351 <div class="toggle"></div>352 </div>353 </div>354 355 <div class="video-list">356 <!-- Item 1 -->357 <div class="video-item">358 <div class="thumb">359 [IMG: Video Thumbnail]360 <div class="duration">03:43</div>361 </div>362 <div class="vid-info">363 <div class="vid-title">Bambina 'Anyway U Want It'</div>364 <div class="vid-author">Erin Murray</div>365 <div class="vid-meta">92 views • 1 month ago</div>366 </div>367 <div class="item-more">368 <svg viewBox="0 0 4 18"><circle cx="2" cy="3" r="2"></circle><circle cx="2" cy="9" r="2"></circle><circle cx="2" cy="15" r="2"></circle></svg>369 </div>370 </div>371 372 <!-- Item 2 -->373 <div class="video-item">374 <div class="thumb">375 [IMG: Video Thumbnail]376 <div class="duration">15:06</div>377 </div>378 <div class="vid-info">379 <div class="vid-title">Berry Pickers</div>380 <div class="vid-author">Agnes Skonare Karlsson</div>381 <div class="vid-meta">6.2K views • 3 days ago</div>382 </div>383 <div class="item-more">384 <svg viewBox="0 0 4 18"><circle cx="2" cy="3" r="2"></circle><circle cx="2" cy="9" r="2"></circle><circle cx="2" cy="15" r="2"></circle></svg>385 </div>386 </div>387 </div>388 </div>389 390 <!-- Gesture bar -->391 <div class="gesture"></div>392</div>393</body>394</html>