GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Video UI Mock</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Helvetica, Arial, sans-serif; }7 #render-target {8 width:1440px; height:3120px; position:relative; overflow:hidden;9 background:#ffffff;10 color:#111;11 }12 13 /* Top status bar */14 .status-bar {15 position:absolute; top:0; left:0; width:100%; height:150px;16 background:#000; color:#fff;17 display:flex; align-items:center; padding:0 48px;18 font-weight:600;19 }20 .status-left { display:flex; align-items:center; gap:28px; }21 .status-right { margin-left:auto; display:flex; align-items:center; gap:28px; }22 .status-dot { width:12px; height:12px; background:#fff; border-radius:50%; opacity:0.8; }23 .icon-wifi, .icon-battery { width:48px; height:36px; }24 .icon-wifi path, .icon-battery rect, .icon-battery path { fill:#fff; }25 26 /* Video area */27 .video-wrap {28 position:absolute; top:150px; left:0; width:100%; height:880px; background:#111;29 }30 .video-placeholder {31 position:absolute; top:60px; left:60px; right:60px; bottom:60px;32 background:#E0E0E0; border:1px solid #BDBDBD;33 display:flex; justify-content:center; align-items:center; color:#757575; font-size:42px;34 }35 .overlay { position:absolute; pointer-events:none; }36 .btn-overlay { position:absolute; width:120px; height:120px; background:rgba(0,0,0,0.5); border-radius:24px; display:flex; justify-content:center; align-items:center; }37 .btn-overlay svg { width:70px; height:70px; }38 .overlay-top { position:absolute; top:20px; left:20px; right:20px; height:100px; }39 .close-btn { position:absolute; left:20px; top:20px; width:90px; height:90px; background:rgba(255,255,255,0.08); border-radius:20px; display:flex; align-items:center; justify-content:center; }40 .dots-btn { position:absolute; right:24px; top:20px; width:90px; height:90px; background:rgba(255,255,255,0.08); border-radius:20px; display:flex; align-items:center; justify-content:center; }41 .corner-btn { position:absolute; right:36px; bottom:40px; width:88px; height:88px; background:rgba(255,255,255,0.08); border-radius:20px; display:flex; align-items:center; justify-content:center; }42 .rewind { left:180px; top:360px; }43 .play { left:660px; top:360px; }44 .forward { right:180px; top:360px; }45 .overlay-label { position:absolute; top:12px; color:#fff; font-size:40px; font-weight:700; }46 47 /* Progress line */48 .progress-area {49 position:absolute; top:1030px; left:0; width:100%; height:110px; background:#111; color:#fff;50 display:flex; align-items:center; padding:0 60px; gap:40px;51 }52 .progress-time { font-size:40px; font-weight:600; opacity:0.9; }53 .progress-bar {54 flex:1; height:12px; background:#333; border-radius:6px; position:relative;55 }56 .progress-fill { width:220px; height:12px; background:#888; border-radius:6px; }57 .progress-dot { position:absolute; left:210px; top:-8px; width:28px; height:28px; background:#fff; border-radius:50%; }58 59 /* Title and actions */60 .content {61 position:absolute; top:1140px; left:0; width:100%; padding:60px;62 }63 .title {64 font-size:84px; font-weight:800; line-height:1.1; letter-spacing:0.5px;65 margin-bottom:30px;66 }67 .actions {68 display:flex; gap:40px; margin:30px 0 10px 0;69 }70 .action {71 width:170px; height:170px; border:1px solid #e0e0e0; border-radius:36px;72 display:flex; align-items:center; justify-content:center; background:#fafafa;73 }74 .action svg { width:70px; height:70px; }75 .counts { display:flex; gap:140px; font-size:42px; color:#3c3c3c; font-weight:700; margin-top:20px; }76 .description {77 margin-top:40px; font-size:44px; color:#3c3c3c; line-height:1.4;78 }79 80 /* Creator row */81 .creator {82 margin-top:60px; display:flex; align-items:center; gap:30px;83 }84 .avatar {85 width:120px; height:120px; border-radius:60px; background:#E0E0E0; border:1px solid #BDBDBD;86 display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px;87 }88 .creator-name { font-size:56px; font-weight:700; }89 .follow-btn {90 margin-left:auto; display:flex; align-items:center; gap:20px;91 background:#F2F4F7; border:1px solid #D0D5DD; border-radius:28px; padding:26px 36px; font-size:46px; font-weight:700;92 }93 .follow-btn svg { width:44px; height:44px; }94 95 /* Share button */96 .share {97 margin-top:40px; background:#2E95FF; color:#fff; border-radius:36px;98 height:160px; display:flex; align-items:center; justify-content:center; font-size:56px; font-weight:800;99 }100 .share svg { width:60px; height:60px; margin-right:20px; }101 102 /* More section */103 .more-header {104 margin-top:70px; display:flex; align-items:center; justify-content:space-between; font-size:52px; font-weight:800;105 }106 .toggle {107 display:flex; align-items:center; gap:26px; font-size:48px;108 }109 .switch {110 width:120px; height:64px; background:#E0E0E0; border-radius:40px; position:relative; border:1px solid #C0C0C0;111 }112 .switch::after {113 content:""; position:absolute; top:6px; left:54px; width:52px; height:52px; background:#4DBAF7; border-radius:50%;114 }115 116 /* Video list */117 .list-item { margin-top:40px; display:flex; gap:34px; align-items:flex-start; }118 .thumb {119 width:420px; height:260px; background:#E0E0E0; border:1px solid #BDBDBD;120 display:flex; align-items:center; justify-content:center; color:#757575; font-size:32px; position:relative;121 }122 .duration {123 position:absolute; right:16px; bottom:12px; background:rgba(0,0,0,0.7); color:#fff;124 font-size:34px; padding:8px 14px; border-radius:12px;125 }126 .video-info { flex:1; }127 .video-title { font-size:54px; font-weight:800; line-height:1.2; }128 .meta { margin-top:12px; color:#666; font-size:40px; }129 .ellipsis {130 width:60px; height:60px; display:flex; align-items:center; justify-content:center;131 }132 .divider { height:1px; background:#e8e8e8; margin-top:40px; }133 134 /* Small floating toolbar at bottom (from screenshot) – stylized bubble */135 .floating-toolbar {136 position:absolute; bottom:240px; left:50%; transform:translateX(-50%);137 background:#f6f6f9; border:1px solid #d9d9e3; height:160px; width:620px;138 border-radius:80px; display:flex; align-items:center; justify-content:space-around;139 box-shadow:0 14px 30px rgba(0,0,0,0.08);140 }141 .circle-btn {142 width:150px; height:150px; background:#fff; border:1px solid #dcdce5; border-radius:80px;143 display:flex; align-items:center; justify-content:center;144 }145 .circle-btn svg { width:74px; height:74px; }146</style>147</head>148<body>149<div id="render-target">150 151 <!-- Status bar -->152 <div class="status-bar">153 <div class="status-left">154 <div style="font-size:44px;">11:28</div>155 <div style="font-size:44px;">Q</div>156 <div style="font-size:44px;">B</div>157 <div style="font-size:44px;">S</div>158 <div class="status-dot"></div>159 </div>160 <div class="status-right">161 <svg class="icon-wifi" viewBox="0 0 24 24">162 <path d="M12 18.5c.9 0 1.5.6 1.5 1.5s-.6 1.5-1.5 1.5-1.5-.6-1.5-1.5.6-1.5 1.5-1.5zM2 8c2.8-2.3 6.1-3.5 10-3.5S19.2 5.7 22 8l-2 2c-2.2-1.9-5.1-3-8-3s-5.8 1.1-8 3L2 8zm4 4c1.9-1.5 4.3-2.3 6-2.3s4.1.8 6 2.3l-2 2c-1.4-1-3.1-1.6-4-1.6s-2.6.6-4 1.6l-2-2z"/>163 </svg>164 <svg class="icon-battery" viewBox="0 0 26 24">165 <rect x="1" y="5" width="20" height="14" rx="2"></rect>166 <path d="M22 9h4v6h-4z"></path>167 </svg>168 </div>169 </div>170 171 <!-- Video area -->172 <div class="video-wrap">173 <div class="video-placeholder">[IMG: Video Frame - Monochrome Drums]</div>174 175 <!-- overlay controls -->176 <div class="close-btn">177 <svg viewBox="0 0 24 24">178 <path fill="#fff" d="M6 6l12 12M18 6L6 18" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>179 </svg>180 </div>181 <div class="dots-btn">182 <svg viewBox="0 0 24 24">183 <circle cx="12" cy="5" r="2" fill="#fff"></circle>184 <circle cx="12" cy="12" r="2" fill="#fff"></circle>185 <circle cx="12" cy="19" r="2" fill="#fff"></circle>186 </svg>187 </div>188 189 <div class="btn-overlay rewind">190 <svg viewBox="0 0 24 24">191 <path fill="#fff" d="M12 6v4l-5-4 5-4v4zm1 8a5 5 0 1 0 0 10 5 5 0 0 0 0-10z"></path>192 </svg>193 <div class="overlay-label" style="left:140px;">10</div>194 </div>195 <div class="btn-overlay play">196 <svg viewBox="0 0 24 24">197 <circle cx="12" cy="12" r="11" fill="rgba(255,255,255,0.25)"></circle>198 <path d="M10 8l8 4-8 4z" fill="#fff"></path>199 </svg>200 </div>201 <div class="btn-overlay forward">202 <svg viewBox="0 0 24 24">203 <path fill="#fff" d="M12 6v4l5-4-5-4v4zm-1 8a5 5 0 1 1 0 10 5 5 0 0 1 0-10z"></path>204 </svg>205 <div class="overlay-label" style="right:140px;">10</div>206 </div>207 <div class="corner-btn">208 <svg viewBox="0 0 24 24">209 <path stroke="#fff" stroke-width="2" fill="none" d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" stroke-linecap="round"></path>210 </svg>211 </div>212 </div>213 214 <!-- Progress -->215 <div class="progress-area">216 <div class="progress-time">00:00 / 02:17</div>217 <div class="progress-bar">218 <div class="progress-fill"></div>219 <div class="progress-dot"></div>220 </div>221 </div>222 223 <!-- Content -->224 <div class="content">225 <div class="title">The Beatles - Help! (Alternate Music Video)</div>226 227 <div class="actions">228 <div class="action">229 <svg viewBox="0 0 24 24">230 <path d="M8 5v14l11-7z" fill="#444"></path>231 </svg>232 </div>233 <div class="action">234 <svg viewBox="0 0 24 24">235 <path d="M12 21s-6.6-4.5-9.3-7.2A6 6 0 0 1 12 5a6 6 0 0 1 9.3 8.8C18.6 16.5 12 21 12 21z" fill="none" stroke="#444" stroke-width="2"></path>236 </svg>237 </div>238 <div class="action">239 <svg viewBox="0 0 24 24">240 <path d="M4 4h16v10H7l-3 3V4z" fill="none" stroke="#444" stroke-width="2" stroke-linejoin="round"></path>241 </svg>242 </div>243 </div>244 <div class="counts">245 <div>15K</div>246 <div>91</div>247 <div>6</div>248 </div>249 250 <div class="description">251 The rare alternate music video for "Help!". The version that appears on the Beatles' 1 DVD u… more252 </div>253 254 <div class="creator">255 <div class="avatar">[Avatar]</div>256 <div class="creator-name">Starman Brinley</div>257 <div class="follow-btn">258 <svg viewBox="0 0 24 24">259 <path d="M12 5v14M5 12h14" stroke="#111" stroke-width="2" stroke-linecap="round"></path>260 </svg>261 Follow262 </div>263 </div>264 265 <div class="share">266 <svg viewBox="0 0 24 24">267 <path d="M12 3l5 5h-3v7h-4V8H7l5-5z" fill="#fff"></path>268 </svg>269 Share270 </div>271 272 <div class="more-header">273 <div>MORE FROM STARMAN BRINLEY</div>274 <div class="toggle">275 <div>Autoplay</div>276 <div class="switch"></div>277 </div>278 </div>279 280 <!-- List items -->281 <div class="list-item">282 <div class="thumb">[IMG: Dancing Silhouette]283 <div class="duration">02:44</div>284 </div>285 <div class="video-info">286 <div class="video-title">David Bowie - John, I'm Only Dancing (Alternate Mix Edit)</div>287 <div class="meta">Starman Brinley • 221 views • 5 years ago</div>288 </div>289 <div class="ellipsis">290 <svg viewBox="0 0 24 24">291 <circle cx="12" cy="5" r="2" fill="#888"></circle>292 <circle cx="12" cy="12" r="2" fill="#888"></circle>293 <circle cx="12" cy="19" r="2" fill="#888"></circle>294 </svg>295 </div>296 </div>297 <div class="divider"></div>298 299 <div class="list-item">300 <div class="thumb">[IMG: Beatles Oldies Cover]</div>301 <div class="video-info">302 <div class="video-title">Beatles - I'll Be Fine (from A Collection of Beatles Oldies)</div>303 <div class="meta">Starman Brinley</div>304 </div>305 <div class="ellipsis">306 <svg viewBox="0 0 24 24">307 <circle cx="12" cy="5" r="2" fill="#888"></circle>308 <circle cx="12" cy="12" r="2" fill="#888"></circle>309 <circle cx="12" cy="19" r="2" fill="#888"></circle>310 </svg>311 </div>312 </div>313 314 </div>315 316 <!-- Floating toolbar bubble -->317 <div class="floating-toolbar">318 <div class="circle-btn">319 <svg viewBox="0 0 24 24">320 <path d="M8 5v14l11-7z" fill="#444"></path>321 </svg>322 </div>323 <div class="circle-btn">324 <svg viewBox="0 0 24 24">325 <path d="M12 5v14M5 12h14" stroke="#111" stroke-width="2" stroke-linecap="round"></path>326 </svg>327 </div>328 </div>329 330</div>331</body>332</html>