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 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #121212;15 border-radius: 40px;16 box-shadow: 0 20px 80px rgba(0,0,0,0.5);17 font-family: Arial, Helvetica, sans-serif;18 color: #fff;19 }20 /* Status bar */21 .status-bar {22 height: 96px;23 padding: 0 36px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #fff;28 font-weight: 600;29 font-size: 40px;30 letter-spacing: 0.5px;31 opacity: 0.95;32 }33 .status-icons {34 display: flex;35 gap: 26px;36 align-items: center;37 }38 .status-dot { width: 12px; height: 12px; background: #bbb; border-radius: 50%; }39 /* Video area */40 .video-wrap {41 position: relative;42 width: 100%;43 height: 640px;44 background: #E0E0E0;45 border: 6px solid #d4a500;46 display: flex;47 align-items: center;48 justify-content: center;49 color: #757575;50 box-sizing: border-box;51 }52 .video-wrap .img-label {53 color: #757575;54 font-size: 34px;55 }56 .control {57 position: absolute;58 width: 64px; height: 64px;59 display: flex; align-items: center; justify-content: center;60 background: rgba(0,0,0,0.5);61 border-radius: 50%;62 }63 .control svg { width: 36px; height: 36px; fill: #fff; }64 .ctrl-left { left: 24px; top: 24px; }65 .ctrl-center {66 width: 120px; height: 120px; border-radius: 60px;67 top: 50%; left: 50%; transform: translate(-50%, -50%);68 background: rgba(0,0,0,0.55);69 }70 .ctrl-right { right: 24px; top: 24px; }71 .ctrl-right-row {72 position: absolute; right: 24px; top: 24px;73 display: flex; gap: 18px; align-items: center;74 }75 .ctrl-right-row .control { position: static; }76 .ctrl-bottom-right {77 position: absolute; right: 24px; bottom: 24px;78 }79 .time-row {80 position: absolute; left: 24px; bottom: 24px;81 display: flex; align-items: center; gap: 16px; font-size: 28px;82 }83 .progress {84 position: absolute; left: 0; right: 0; bottom: 0;85 height: 6px; background: #333;86 }87 .progress .bar {88 width: 24%; height: 100%; background: #ff3b3b; position: relative;89 }90 .progress .dot {91 position: absolute; right: -12px; top: 50%;92 width: 18px; height: 18px; background: #ff3b3b; border-radius: 50%;93 transform: translateY(-50%);94 }95 /* Ad row */96 .ad-row {97 display: flex; align-items: center; justify-content: space-between;98 padding: 24px 24px;99 border-bottom: 1px solid #1f1f1f;100 background: #121212;101 }102 .ad-left { display: flex; align-items: center; gap: 18px; }103 .ad-thumb {104 width: 96px; height: 96px; background: #E0E0E0; border: 1px solid #BDBDBD;105 display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 16px;106 font-size: 24px; padding: 6px;107 }108 .ad-text .headline { font-size: 34px; font-weight: 600; }109 .ad-text .sub { font-size: 26px; color: #aaa; margin-top: 6px; }110 .ad-actions { display: flex; align-items: center; gap: 16px; }111 .btn-shop {112 background: #3ea6ff; color: #06121f; font-weight: 700;113 padding: 20px 36px; border-radius: 40px; font-size: 30px; border: none;114 }115 .circle-btn {116 width: 64px; height: 64px; border-radius: 32px; background: #232323;117 display: flex; align-items: center; justify-content: center;118 }119 .circle-btn svg { width: 26px; height: 26px; fill: #fff; }120 /* Title and meta */121 .content {122 padding: 24px;123 }124 .title {125 font-size: 44px; font-weight: 700; line-height: 1.25; margin-top: 6px;126 }127 .meta {128 margin-top: 14px; color: #bbb; font-size: 28px;129 }130 /* Channel row */131 .channel-row {132 margin-top: 28px;133 display: flex; align-items: center; justify-content: space-between;134 }135 .channel-left { display: flex; align-items: center; gap: 18px; }136 .avatar {137 width: 72px; height: 72px; border-radius: 36px; overflow: hidden;138 background: #E0E0E0; border: 1px solid #BDBDBD;139 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 20px;140 }141 .channel-text { display: flex; align-items: baseline; gap: 12px; }142 .channel-name { font-size: 34px; font-weight: 700; }143 .sub-count { font-size: 26px; color: #aaa; }144 .channel-right { display: flex; align-items: center; gap: 16px; }145 .mute-pill {146 padding: 14px 22px; background: #232323; border-radius: 26px; display: flex;147 align-items: center; gap: 12px; font-size: 26px; color: #ddd;148 }149 .mute-pill svg { width: 24px; height: 24px; fill: #ddd; }150 /* Actions */151 .actions {152 margin-top: 26px; display: flex; align-items: center; gap: 22px;153 }154 .action-pill {155 background: #232323; color: #fff; border-radius: 56px; padding: 20px 26px;156 display: flex; align-items: center; gap: 16px; font-size: 30px;157 }158 .action-pill .emoji { font-size: 36px; }159 .share-pill { padding: 20px 24px; }160 /* Comments */161 .comments-card {162 margin-top: 28px;163 background: #1a1a1a; border-radius: 28px; padding: 24px;164 position: relative;165 }166 .comments-header {167 font-size: 36px; font-weight: 700; margin-bottom: 18px;168 }169 .comment-row { display: flex; align-items: center; gap: 18px; }170 .comment-avatar {171 width: 56px; height: 56px; border-radius: 28px; background: #ff8f00;172 color: #000; display: flex; align-items: center; justify-content: center; font-weight: 700;173 }174 .comment-text { font-size: 30px; color: #ddd; }175 /* Floating mini player */176 .floating-mini {177 position: absolute;178 right: 36px;179 top: 1120px;180 width: 420px; height: 270px;181 background: #0f0f0f;182 border-radius: 26px;183 box-shadow: 0 10px 40px rgba(0,0,0,0.6);184 padding: 12px;185 }186 .floating-mini .thumb {187 width: 100%; height: 100%;188 background: #E0E0E0; border: 1px solid #BDBDBD;189 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; border-radius: 18px;190 }191 /* Big ad banner */192 .ad-banner {193 margin-top: 36px;194 background: #111; border-radius: 28px; overflow: hidden;195 position: relative;196 }197 .ad-banner .banner-img {198 width: 100%; height: 760px;199 background: #E0E0E0; border-top: 1px solid #BDBDBD; border-bottom: 1px solid #BDBDBD;200 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 40px;201 }202 .ad-banner .overlay {203 position: absolute; right: 36px; top: 120px; width: 540px;204 color: #fff; text-align: right;205 }206 .ad-banner .brand { font-size: 80px; font-weight: 800; letter-spacing: 1px; }207 .ad-banner .tagline { font-size: 44px; margin-top: 18px; }208 .ad-banner .cta {209 display: inline-block; margin-top: 24px; background: #e8613c; color: #fff;210 padding: 20px 24px; border-radius: 8px; font-size: 30px; font-weight: 700;211 }212 .ad-banner .bottom-bar {213 position: absolute; bottom: 0; left: 0; right: 0;214 background: #162338; padding: 22px 24px; display: flex; justify-content: flex-end; gap: 14px; align-items: center;215 }216 .ad-banner .bottom-bar .shop-btn {217 background: transparent; border: 2px solid #3ea6ff; color: #3ea6ff;218 padding: 16px 22px; border-radius: 10px; font-size: 30px; font-weight: 700;219 display: flex; align-items: center; gap: 12px;220 }221 .ad-banner .bottom-bar .shop-btn svg { width: 28px; height: 28px; stroke: #3ea6ff; fill: none; }222 /* Gesture bar */223 .gesture-bar {224 position: absolute; left: 50%; transform: translateX(-50%);225 bottom: 20px; width: 340px; height: 12px; background: #fff; border-radius: 8px; opacity: 0.8;226 }227</style>228</head>229<body>230<div id="render-target">231 <!-- Status bar -->232 <div class="status-bar">233 <div>8:25</div>234 <div class="status-icons">235 <svg viewBox="0 0 24 24" width="30" height="30" fill="#fff"><rect x="2" y="6" width="20" height="12" rx="2"></rect><rect x="4" y="8" width="16" height="8" fill="#121212"></rect></svg>236 <svg viewBox="0 0 24 24" width="30" height="30" fill="#fff"><circle cx="12" cy="12" r="9"></circle><rect x="11" y="6" width="2" height="6" fill="#121212"></rect></svg>237 <div class="status-dot"></div>238 <svg viewBox="0 0 24 24" width="30" height="30" fill="#fff"><path d="M7 7h10v10H7z"></path><path d="M3 3h6v2H5v4H3zM15 19h6v-2h-4v-4h-2z"></path></svg>239 <svg viewBox="0 0 24 24" width="30" height="30" fill="#fff"><path d="M17 7l-5 5-5-5" stroke="#fff" stroke-width="2" fill="none"></path></svg>240 <svg viewBox="0 0 24 24" width="30" height="30" fill="#fff"><path d="M6 3h12v18H6z"></path><rect x="8" y="6" width="8" height="12" fill="#121212"></rect></svg>241 </div>242 </div>243 244 <!-- Video -->245 <div class="video-wrap">246 <div class="img-label">[IMG: Video frame]</div>247 248 <div class="control ctrl-left">249 <svg viewBox="0 0 24 24"><path d="M15 6 L9 12 L15 18" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>250 </div>251 252 <div class="control ctrl-center">253 <svg viewBox="0 0 24 24"><path d="M8 5 L20 12 L8 19 Z"></path></svg>254 </div>255 256 <div class="ctrl-right-row">257 <div class="control">258 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="14" height="12" rx="2"></rect><path d="M3 18c2-2 5-2 7 0" stroke="#fff" stroke-width="2" fill="none"></path></svg>259 </div>260 <div class="control" style="border-radius: 10px;">261 <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"></rect></svg>262 </div>263 <div class="control">264 <svg viewBox="0 0 24 24"><path d="M6 6 L18 18 M6 18 L18 6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path></svg>265 </div>266 </div>267 268 <div class="control ctrl-bottom-right">269 <svg viewBox="0 0 24 24"><path d="M3 9 V3 H9 M21 9 V3 H15 M3 15 V21 H9 M21 15 V21 H15" stroke="#fff" stroke-width="2" fill="none"></path></svg>270 </div>271 272 <div class="time-row">273 <div style="font-weight:600;">0:11 / 4:59</div>274 </div>275 276 <div class="progress">277 <div class="bar"><div class="dot"></div></div>278 </div>279 </div>280 281 <!-- Ad Row -->282 <div class="ad-row">283 <div class="ad-left">284 <div class="ad-thumb">[IMG: aza logo]</div>285 <div class="ad-text">286 <div class="headline">Aza Fashions: Designer Wear</div>287 <div class="sub">Ad • Installed</div>288 </div>289 </div>290 <div class="ad-actions">291 <button class="btn-shop">Shop</button>292 <div class="circle-btn">293 <svg viewBox="0 0 24 24"><path d="M7 10 L12 15 L17 10" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>294 </div>295 </div>296 </div>297 298 <!-- Title and meta -->299 <div class="content">300 <div class="title">Luciano Pavarotti, James Brown - It's A Man's Man's World (Stereo)</div>301 <div class="meta">92M views • 4y ago • ...more</div>302 303 <div class="channel-row">304 <div class="channel-left">305 <div class="avatar">[IMG]</div>306 <div class="channel-text">307 <div class="channel-name">Luciano Pavarotti</div>308 <div class="sub-count">632K</div>309 </div>310 </div>311 <div class="channel-right">312 <div class="mute-pill">313 <svg viewBox="0 0 24 24"><path d="M4 9h4l5-4v14l-5-4H4z" fill="#ddd"></path><path d="M16 9 L20 13 M20 9 L16 13" stroke="#ddd" stroke-width="2" fill="none"></path></svg>314 Mute315 </div>316 <div class="circle-btn">317 <svg viewBox="0 0 24 24"><path d="M7 10 L12 15 L17 10" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>318 </div>319 </div>320 </div>321 322 <!-- Actions -->323 <div class="actions">324 <div class="action-pill"><span class="emoji">👍</span><span>987K</span></div>325 <div class="action-pill"><span class="emoji">👎</span></div>326 <div class="action-pill share-pill"><span class="emoji">↗</span></div>327 </div>328 329 <!-- Comments card -->330 <div class="comments-card">331 <div class="comments-header">Comments 30K</div>332 <div class="comment-row">333 <div class="comment-avatar">J</div>334 <div class="comment-text">When you see a Ford...</div>335 </div>336 </div>337 338 <!-- Floating mini player -->339 <div class="floating-mini">340 <div class="thumb">[IMG: Art Thumbnail]</div>341 </div>342 343 <!-- Big Ad banner -->344 <div class="ad-banner">345 <div class="banner-img">[IMG: Fashion Ad Banner]</div>346 <div class="overlay">347 <div class="brand">aza</div>348 <div class="tagline">Timeless Jewels<br>Necklaces, Earrings & more</div>349 <div class="cta">DOWNLOAD THE APP</div>350 </div>351 <div class="bottom-bar">352 <div class="shop-btn">353 Shop354 <svg viewBox="0 0 24 24">355 <rect x="5" y="5" width="14" height="14" rx="2"></rect>356 <path d="M9 15 L15 9 M12 9 H15 V12" stroke="#3ea6ff" stroke-width="2" fill="none"></path>357 </svg>358 </div>359 </div>360 </div>361 </div>362 363 <div class="gesture-bar"></div>364</div>365</body>366</html>