GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Video Player UI Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #0f1d2d; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff;12 }13 /* Top video area */14 .video-section {15 position: relative;16 width: 100%;17 height: 720px;18 background: #E0E0E0;19 }20 .video-placeholder {21 position: absolute; inset: 0;22 display: flex; align-items: center; justify-content: center;23 color: #757575; border-bottom: 1px solid #dcdcdc;24 }25 .overlay-control {26 position: absolute; color: #fff;27 }28 .btn-circle {29 width: 72px; height: 72px; border-radius: 36px;30 background: rgba(0,0,0,0.35); color: #fff;31 display: flex; align-items: center; justify-content: center;32 font-weight: 600; font-size: 28px;33 backdrop-filter: blur(2px);34 }35 .pause-pill {36 position: absolute; left: 50%; top: 50%;37 transform: translate(-50%, -50%);38 background: rgba(0,0,0,0.5); border-radius: 14px;39 width: 130px; height: 86px; display: flex; align-items: center; justify-content: center;40 }41 .time-row {42 position: absolute; bottom: 84px; left: 28px; color: #fff; font-size: 28px; font-weight: 500;43 text-shadow: 0 1px 2px rgba(0,0,0,0.35);44 }45 .progress {46 position: absolute; left: 28px; right: 28px; bottom: 36px; height: 6px; background: rgba(255,255,255,0.35); border-radius: 3px;47 }48 .progress .bar {49 width: 30%; height: 100%; background: #ffffff; border-radius: 3px;50 }51 .progress .knob {52 position: absolute; left: calc(30% - 12px); top: 50%; transform: translateY(-50%);53 width: 24px; height: 24px; border-radius: 12px; background: #ffffff; box-shadow: 0 0 0 4px rgba(255,255,255,0.3);54 }55 .kebab {56 width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;57 background: rgba(0,0,0,0.25); border-radius: 24px;58 }59 .close {60 width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;61 background: rgba(0,0,0,0.25); border-radius: 28px;62 }63 .fullscreen {64 position: absolute; right: 28px; bottom: 96px; width: 56px; height: 56px;65 display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.25); border-radius: 28px;66 }67 68 /* Content below video */69 .content {70 padding: 36px 36px 24px 36px;71 }72 .title {73 font-size: 48px; font-weight: 800; line-height: 1.1; letter-spacing: 0.2px; margin: 24px 0 28px 0;74 color: #22313f;75 }76 .actions-row {77 display: flex; align-items: center; gap: 28px; margin-bottom: 18px;78 }79 .action-btn {80 width: 150px; height: 104px; border: 2px solid #E8EDF3; border-radius: 24px;81 display: flex; align-items: center; justify-content: center;82 color: #516375; background: #fff;83 }84 .action-counts {85 display: flex; gap: 120px; padding-left: 8px; font-size: 28px; color: #7791a7; margin-bottom: 28px;86 }87 .desc {88 font-size: 36px; color: #2c3e50; line-height: 1.2; margin-bottom: 32px;89 }90 .desc .more { color: #2e8de6; font-weight: 600; }91 .channel-row {92 display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; border-top: 1px solid #e9eef4; border-bottom: 1px solid #e9eef4; margin-bottom: 24px;93 }94 .channel-left { display: flex; align-items: center; gap: 24px; }95 .avatar {96 width: 92px; height: 92px; border-radius: 46px; background: #E0E0E0; border: 1px solid #BDBDBD;97 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 20px;98 }99 .channel-meta .name { font-size: 36px; font-weight: 700; color: #2a3b49; display: flex; align-items: center; gap: 10px; }100 .badge {101 background: #2e8de6; color: #fff; font-size: 24px; font-weight: 700; padding: 6px 12px; border-radius: 10px;102 }103 .channel-meta .subs { font-size: 28px; color: #7d94a8; }104 .follow-btn {105 display: inline-flex; align-items: center; gap: 12px; background: #f3f7fb; border: 2px solid #d9e5f2;106 color: #274b6d; padding: 18px 24px; border-radius: 16px; font-weight: 700; font-size: 28px;107 }108 .share-wrap { margin: 10px 0 34px 0; }109 .share-btn {110 width: 100%; background: #3fa7f9; color: #fff; height: 116px; border-radius: 26px;111 display: flex; align-items: center; justify-content: center; gap: 18px; font-size: 36px; font-weight: 700;112 box-shadow: 0 6px 12px rgba(63,167,249,0.25);113 }114 115 .section-head {116 display: flex; align-items: center; justify-content: space-between; margin: 8px 0 18px 0;117 }118 .section-title { font-size: 28px; font-weight: 800; color: #6b7f91; letter-spacing: 0.6px; }119 .autoplay {120 display: flex; align-items: center; gap: 16px; font-size: 28px; color: #6b7f91;121 }122 .toggle {123 width: 110px; height: 56px; background: #cbd6e3; border-radius: 28px; position: relative;124 }125 .toggle.on { background: #3fa7f9; }126 .toggle .knob {127 position: absolute; top: 6px; left: 6px; width: 44px; height: 44px; border-radius: 22px; background: #fff; transition: left 0.2s ease;128 }129 .toggle.on .knob { left: 60px; }130 131 .video-item {132 display: grid; grid-template-columns: 360px 1fr 56px; gap: 24px; align-items: center;133 padding: 18px 0; border-bottom: 1px solid #eef3f7;134 }135 .thumb {136 position: relative; width: 360px; height: 200px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 14px;137 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;138 overflow: hidden;139 }140 .duration {141 position: absolute; right: 12px; bottom: 12px; background: rgba(0,0,0,0.75); color: #fff; font-size: 26px;142 padding: 6px 12px; border-radius: 8px; letter-spacing: 0.5px;143 }144 .item-info .item-title { font-size: 36px; font-weight: 800; color: #233445; margin-bottom: 10px; }145 .item-info .item-sub { font-size: 28px; color: #607f99; margin-bottom: 6px; }146 .item-info .meta { font-size: 26px; color: #8a9fb2; }147 .floating-controls {148 position: absolute; left: 50%; bottom: 160px; transform: translateX(-50%);149 background: #ffffff; border: 1px solid #d7e1eb; box-shadow: 0 8px 24px rgba(0,0,0,0.12);150 width: 320px; height: 120px; border-radius: 60px; display: flex; align-items: center; justify-content: space-evenly;151 }152 .sys-bar {153 position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background: #ffffff; border-top: 1px solid #e8edf3;154 display: flex; align-items: center; justify-content: center;155 }156 .home-pill {157 width: 220px; height: 12px; background: #cfd9e4; border-radius: 6px;158 }159 /* SVG icon sizing helpers */160 .icon { width: 48px; height: 48px; }161 .icon-lg { width: 64px; height: 64px; }162</style>163</head>164<body>165<div id="render-target">166 <!-- Video Section -->167 <div class="video-section">168 <div class="video-placeholder">[IMG: Video frame - classical sculptures scene]</div>169 170 <!-- Close -->171 <div class="overlay-control" style="left: 24px; top: 24px;">172 <div class="close">173 <svg class="icon" viewBox="0 0 24 24">174 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#fff" stroke-width="2.6" stroke-linecap="round" fill="none"/>175 </svg>176 </div>177 </div>178 179 <!-- Kebab -->180 <div class="overlay-control" style="right: 24px; top: 24px;">181 <div class="kebab">182 <svg class="icon" viewBox="0 0 24 24">183 <circle cx="12" cy="5" r="2.2" fill="#fff"/>184 <circle cx="12" cy="12" r="2.2" fill="#fff"/>185 <circle cx="12" cy="19" r="2.2" fill="#fff"/>186 </svg>187 </div>188 </div>189 190 <!-- Rewind 10 -->191 <div class="overlay-control" style="left: 120px; top: 340px;">192 <div class="btn-circle">↺<span style="margin-left:6px;font-size:24px;">10</span></div>193 </div>194 195 <!-- Forward 10 -->196 <div class="overlay-control" style="right: 120px; top: 340px;">197 <div class="btn-circle">↻<span style="margin-left:6px;font-size:24px;">10</span></div>198 </div>199 200 <!-- Pause pill -->201 <div class="pause-pill">202 <svg class="icon-lg" viewBox="0 0 24 24">203 <rect x="5" y="4" width="5" height="16" rx="1.2" fill="#fff"/>204 <rect x="14" y="4" width="5" height="16" rx="1.2" fill="#fff"/>205 </svg>206 </div>207 208 <!-- Fullscreen -->209 <div class="fullscreen">210 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round">211 <path d="M4 10 V4 H10"/>212 <path d="M14 4 H20 V10"/>213 <path d="M10 20 H4 V14"/>214 <path d="M20 14 V20 H14"/>215 </svg>216 </div>217 218 <!-- Time -->219 <div class="time-row">00:33 / 03:30</div>220 221 <!-- Progress -->222 <div class="progress">223 <div class="bar"></div>224 <div class="knob"></div>225 </div>226 </div>227 228 <!-- Content -->229 <div class="content">230 <div class="title">YO YO MUNDI - CHIEDILO ALLE NUVOLLE</div>231 232 <div class="actions-row">233 <div class="action-btn">234 <svg class="icon-lg" viewBox="0 0 24 24">235 <polygon points="6,4 20,12 6,20" fill="none" stroke="#7a90a6" stroke-width="2.4" stroke-linejoin="round"/>236 </svg>237 </div>238 <div class="action-btn">239 <svg class="icon-lg" viewBox="0 0 24 24">240 <path d="M12 20s-7-4.5-7-9a4.5 4.5 0 0 1 8-2.9A4.5 4.5 0 0 1 19 11c0 4.5-7 9-7 9z"241 fill="none" stroke="#7a90a6" stroke-width="2"/>242 </svg>243 </div>244 <div class="action-btn">245 <svg class="icon-lg" viewBox="0 0 24 24">246 <path d="M4 6h16v10H7l-3 3V6z" fill="none" stroke="#7a90a6" stroke-width="2" stroke-linejoin="round"/>247 </svg>248 </div>249 <div style="margin-left:auto;">250 <div class="kebab">251 <svg class="icon" viewBox="0 0 24 24">252 <circle cx="12" cy="5" r="2.2" fill="#415568"/>253 <circle cx="12" cy="12" r="2.2" fill="#415568"/>254 <circle cx="12" cy="19" r="2.2" fill="#415568"/>255 </svg>256 </div>257 </div>258 </div>259 260 <div class="action-counts">261 <div>15</div>262 <div>1</div>263 <div>0</div>264 </div>265 266 <div class="desc">267 YO YO MUNDI<br/>268 CHIEDILO ALLE NUVOLE… <span class="more">more</span>269 </div>270 271 <div class="channel-row">272 <div class="channel-left">273 <div class="avatar">[IMG: User Avatar]</div>274 <div class="channel-meta">275 <div class="name">aivano <span class="badge">PLUS</span></div>276 <div class="subs">48 videos</div>277 </div>278 </div>279 <div class="follow-btn">280 <svg class="icon" viewBox="0 0 24 24">281 <path d="M5 13l4 4L19 7" fill="none" stroke="#274b6d" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>282 </svg>283 Following284 </div>285 </div>286 287 <div class="share-wrap">288 <div class="share-btn">289 <svg class="icon-lg" viewBox="0 0 24 24">290 <path d="M12 5v10M12 5l-4 4M12 5l4 4" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round"/>291 <path d="M5 19h14v-5" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round"/>292 </svg>293 Share294 </div>295 </div>296 297 <div class="section-head">298 <div class="section-title">MORE VIDEOS</div>299 <div class="autoplay">Autoplay300 <div class="toggle on"><div class="knob"></div></div>301 </div>302 </div>303 304 <!-- Video list item -->305 <div class="video-item">306 <div class="thumb">307 [IMG: Video thumbnail - YO YO MUNDI]308 <div class="duration">05:09</div>309 </div>310 <div class="item-info">311 <div class="item-title">YO YO MUNDI - DIETRO LE NUVOLE</div>312 <div class="item-sub">aivano</div>313 <div class="meta">12 views • 4 years ago</div>314 </div>315 <div class="kebab" style="background:#f3f7fb;">316 <svg class="icon" viewBox="0 0 24 24">317 <circle cx="12" cy="5" r="2.2" fill="#415568"/>318 <circle cx="12" cy="12" r="2.2" fill="#415568"/>319 <circle cx="12" cy="19" r="2.2" fill="#415568"/>320 </svg>321 </div>322 </div>323 324 <!-- Another list item preview -->325 <div class="video-item" style="border-bottom:none;">326 <div class="thumb">327 [IMG: Video thumbnail - CIRCUS DAYS]328 <div class="duration">04:40</div>329 </div>330 <div class="item-info">331 <div class="item-title">GRAND DRIFT - CIRCUS DAYS</div>332 <div class="item-sub">aivano</div>333 <div class="meta">40 views • 5 years ago</div>334 </div>335 <div class="kebab" style="background:#f3f7fb;">336 <svg class="icon" viewBox="0 0 24 24">337 <circle cx="12" cy="5" r="2.2" fill="#415568"/>338 <circle cx="12" cy="12" r="2.2" fill="#415568"/>339 <circle cx="12" cy="19" r="2.2" fill="#415568"/>340 </svg>341 </div>342 </div>343 </div>344 345 <!-- Floating controls near bottom center -->346 <div class="floating-controls">347 <svg class="icon-lg" viewBox="0 0 24 24">348 <polygon points="6,4 20,12 6,20" fill="#2e8de6"/>349 </svg>350 <svg class="icon-lg" viewBox="0 0 24 24">351 <path d="M4 6h16v10H7l-3 3V6z" fill="#2e8de6"/>352 </svg>353 </div>354 355 <!-- System navigation bar -->356 <div class="sys-bar">357 <div class="home-pill"></div>358 </div>359</div>360</body>361</html>