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 Screen - Playback Speed Modal</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #0f0f0f;20 color: #fff;21 }22 23 /* Status bar */24 .status-bar {25 position: absolute;26 top: 0;27 left: 0;28 width: 1080px;29 height: 110px;30 background: #0f0f0f;31 display: flex;32 align-items: center;33 padding: 0 36px;34 box-sizing: border-box;35 color: #fff;36 font-weight: 600;37 font-size: 38px;38 }39 .status-left {40 display: flex;41 align-items: center;42 gap: 18px;43 }44 .status-icons {45 display: flex;46 align-items: center;47 gap: 14px;48 margin-left: 16px;49 }50 .dot {51 width: 14px;52 height: 14px;53 background: #fff;54 border-radius: 50%;55 opacity: 0.85;56 }57 .status-right {58 margin-left: auto;59 display: flex;60 align-items: center;61 gap: 28px;62 }63 .status-icon {64 width: 44px;65 height: 44px;66 }67 68 /* Video section */69 .video-area {70 position: absolute;71 top: 110px;72 left: 0;73 width: 1080px;74 height: 780px;75 background: #101010;76 }77 .video-placeholder {78 position: absolute;79 top: 0;80 left: 0;81 width: 1080px;82 height: 780px;83 background: #202020;84 border: 1px solid #1b1b1b;85 display: flex;86 align-items: center;87 justify-content: center;88 color: #bdbdbd;89 font-size: 36px;90 letter-spacing: 0.4px;91 }92 93 /* Overlay controls */94 .overlay-controls {95 position: absolute;96 inset: 0;97 pointer-events: none;98 }99 .overlay-top {100 position: absolute;101 top: 26px;102 left: 24px;103 right: 24px;104 display: flex;105 align-items: center;106 gap: 28px;107 justify-content: space-between;108 opacity: 0.95;109 }110 .overlay-left-group {111 display: flex;112 align-items: center;113 gap: 22px;114 }115 .overlay-right-group {116 display: flex;117 align-items: center;118 gap: 32px;119 }120 .ctrl-btn {121 width: 72px;122 height: 72px;123 border-radius: 50%;124 background: rgba(30,30,30,0.85);125 display: flex;126 align-items: center;127 justify-content: center;128 pointer-events: auto;129 }130 .ctrl-btn.square {131 border-radius: 16px;132 width: 86px;133 }134 .ctrl-icon {135 width: 40px;136 height: 40px;137 fill: #ffffff;138 opacity: 0.95;139 }140 .overlay-center {141 position: absolute;142 top: 50%;143 left: 50%;144 width: 180px;145 height: 180px;146 margin-left: -90px;147 margin-top: -90px;148 background: rgba(20,20,20,0.8);149 border-radius: 50%;150 display: flex;151 align-items: center;152 justify-content: center;153 }154 .overlay-side {155 position: absolute;156 top: 50%;157 width: 150px;158 height: 150px;159 margin-top: -75px;160 background: rgba(20,20,20,0.8);161 border-radius: 50%;162 display: flex;163 align-items: center;164 justify-content: center;165 }166 .overlay-side.left { left: 120px; }167 .overlay-side.right { right: 120px; }168 .overlay-side .side-wrap {169 display: flex; align-items: center; gap: 10px; color: #fff; font-size: 34px; font-weight: 600;170 }171 172 /* Captions */173 .caption {174 position: absolute;175 bottom: 160px;176 left: 120px;177 background: rgba(0,0,0,0.7);178 color: #fff;179 padding: 16px 22px;180 border-radius: 8px;181 font-size: 34px;182 }183 184 /* Timeline */185 .timeline {186 position: absolute;187 bottom: 92px;188 left: 0;189 width: 100%;190 padding: 0 32px;191 box-sizing: border-box;192 }193 .timeline-track {194 width: 100%;195 height: 8px;196 background: rgba(255,255,255,0.12);197 border-radius: 4px;198 position: relative;199 }200 .timeline-progress {201 position: absolute;202 top: 0;203 left: 0;204 height: 8px;205 width: 38%;206 background: #ff0000;207 border-radius: 4px;208 }209 .timeline-dot {210 position: absolute;211 top: -10px;212 left: calc(38% - 12px);213 width: 28px;214 height: 28px;215 background: #ff4d4d;216 border-radius: 50%;217 box-shadow: 0 0 0 3px rgba(255,0,0,0.35);218 }219 .time-meta {220 position: absolute;221 bottom: 34px;222 left: 32px;223 color: #d0d0d0;224 font-size: 32px;225 }226 .time-meta .link {227 color: #9dd1ff;228 }229 230 /* Content below video */231 .content {232 position: absolute;233 top: 890px;234 left: 0;235 width: 100%;236 padding: 24px 36px 160px;237 box-sizing: border-box;238 }239 .title {240 font-size: 56px;241 font-weight: 800;242 line-height: 1.2;243 margin-top: 22px;244 }245 .meta {246 margin-top: 16px;247 font-size: 34px;248 color: #b3b3b3;249 }250 .hashtags {251 color: #9dd1ff;252 }253 254 .channel-row {255 margin-top: 38px;256 display: flex;257 align-items: center;258 justify-content: space-between;259 }260 .channel-left {261 display: flex;262 align-items: center;263 gap: 24px;264 }265 .avatar {266 width: 96px;267 height: 96px;268 background: #E0E0E0;269 border: 1px solid #BDBDBD;270 border-radius: 50%;271 display: flex; align-items: center; justify-content: center;272 color: #757575; font-size: 22px; padding: 10px; box-sizing: border-box;273 }274 .channel-info {275 display: flex;276 flex-direction: column;277 gap: 8px;278 }279 .channel-name {280 font-size: 40px; font-weight: 700;281 }282 .channel-subs {283 font-size: 32px; color: #b3b3b3;284 }285 .subscribe-btn {286 background: #ffffff;287 color: #000;288 font-weight: 700;289 font-size: 36px;290 padding: 16px 32px;291 border-radius: 40px;292 }293 294 .actions {295 margin-top: 28px;296 display: flex;297 gap: 22px;298 flex-wrap: wrap;299 }300 .pill {301 display: inline-flex;302 align-items: center;303 gap: 16px;304 background: #1d1d1d;305 border: 1px solid #2a2a2a;306 color: #fff;307 padding: 22px 32px;308 border-radius: 40px;309 font-size: 34px;310 }311 .pill svg { width: 36px; height: 36px; fill: #fff; }312 313 .comments-header {314 margin-top: 40px;315 background: #161616;316 border: 1px solid #242424;317 color: #d9d9d9;318 padding: 22px 28px;319 border-radius: 24px;320 font-size: 36px;321 }322 323 /* Modal overlay for Playback Speed */324 .scrim {325 position: absolute;326 inset: 0;327 background: rgba(0,0,0,0.55);328 z-index: 40;329 }330 .sheet {331 position: absolute;332 left: 24px;333 right: 24px;334 bottom: 140px;335 height: 1100px;336 background: #222222;337 border-radius: 28px;338 z-index: 50;339 box-shadow: 0 16px 40px rgba(0,0,0,0.5);340 display: flex;341 flex-direction: column;342 }343 .sheet-handle {344 width: 160px;345 height: 12px;346 border-radius: 8px;347 background: #5a5a5a;348 margin: 22px auto 18px;349 }350 .sheet-content {351 padding: 14px 46px 24px;352 overflow: hidden;353 }354 .speed-item {355 display: flex;356 align-items: center;357 gap: 24px;358 padding: 28px 0;359 border-bottom: 1px solid rgba(255,255,255,0.06);360 font-size: 40px;361 color: #eaeaea;362 }363 .speed-item:last-child { border-bottom: none; }364 .check {365 width: 38px; height: 38px; border-radius: 50%; border: 2px solid #9e9e9e;366 display: inline-flex; align-items: center; justify-content: center;367 }368 .check.active {369 border-color: #1db954;370 background: #1db954;371 }372 .check svg { width: 26px; height: 26px; fill: #fff; }373 .home-indicator {374 position: absolute;375 bottom: 40px;376 left: 50%;377 width: 360px;378 height: 12px;379 margin-left: -180px;380 background: #bfbfbf;381 border-radius: 6px;382 opacity: 0.7;383 z-index: 60;384 }385</style>386</head>387<body>388<div id="render-target">389 390 <!-- Status Bar -->391 <div class="status-bar">392 <div class="status-left">393 <div>10:03</div>394 <div class="status-icons">395 <div class="dot"></div>396 <div class="dot"></div>397 <div class="dot"></div>398 <div class="dot" style="opacity:0.6;"></div>399 </div>400 </div>401 <div class="status-right">402 <!-- Wi-Fi icon -->403 <svg class="status-icon" viewBox="0 0 24 24">404 <path fill="#fff" d="M12 18.5l1.5 1.5-1.5 1.5-1.5-1.5L12 18.5zM2 8c5.5-5 14.5-5 20 0l-2 2c-4.5-4-11.5-4-16 0L2 8zm4 4c3.5-3 8.5-3 12 0l-2 2c-2.5-2-5.5-2-8 0l-2-2zm4 4c1.5-1 3.5-1 5 0l-2 2-3-2z"/>405 </svg>406 <!-- Battery icon -->407 <svg class="status-icon" viewBox="0 0 24 24">408 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="#fff"></rect>409 <rect x="20" y="10" width="2.5" height="4" fill="#fff"></rect>410 <rect x="4" y="8" width="12" height="8" fill="#0f0f0f"></rect>411 </svg>412 </div>413 </div>414 415 <!-- Video Area -->416 <div class="video-area">417 <div class="video-placeholder">[IMG: Video - Park scene]</div>418 419 <div class="overlay-controls">420 <div class="overlay-top">421 <div class="overlay-left-group">422 <div class="ctrl-btn">423 <!-- Arrow Down -->424 <svg class="ctrl-icon" viewBox="0 0 24 24">425 <path d="M7 10l5 5 5-5H7z" />426 </svg>427 </div>428 </div>429 <div class="overlay-right-group">430 <div class="ctrl-btn square">431 <!-- Cast -->432 <svg class="ctrl-icon" viewBox="0 0 24 24">433 <path d="M3 5h18v10H3V5zm0 12c3.3 0 6 2.7 6 6H7c0-2.8-2.2-5-5-5v-1zM3 15c2.8 0 5 2.2 5 5H6c0-2.2-1.8-4-4-4v-1zM3 17c1.7 0 3 1.3 3 3H4c0-1.1-.9-2-2-2v-1z"/>434 </svg>435 </div>436 <div class="ctrl-btn square">437 <!-- CC -->438 <svg class="ctrl-icon" viewBox="0 0 24 24">439 <rect x="3" y="5" width="18" height="14" rx="2" fill="#fff"/>440 <text x="7" y="15" font-size="9" font-family="Arial" fill="#0f0f0f">CC</text>441 </svg>442 </div>443 <div class="ctrl-btn square">444 <!-- Gear -->445 <svg class="ctrl-icon" viewBox="0 0 24 24">446 <path d="M12 8a4 4 0 100 8 4 4 0 000-8zm8 4l2-1-1-3-2 1a7.7 7.7 0 00-2-1l-1-2h-3l-1 2a7.7 7.7 0 00-2 1l-2-1-1 3 2 1a7.7 7.7 0 000 2l-2 1 1 3 2-1a7.7 7.7 0 002 1l1 2h3l1-2a7.7 7.7 0 002-1l2 1 1-3-2-1a7.7 7.7 0 000-2z"/>447 </svg>448 </div>449 <div class="ctrl-btn square">450 <!-- Close X -->451 <svg class="ctrl-icon" viewBox="0 0 24 24">452 <path d="M6 6l12 12M18 6L6 18" stroke="#fff" stroke-width="2" fill="none"/>453 </svg>454 </div>455 </div>456 </div>457 458 <div class="overlay-center">459 <!-- Pause icon -->460 <svg viewBox="0 0 24 24" class="ctrl-icon">461 <rect x="6" y="5" width="4" height="14" fill="#fff"></rect>462 <rect x="14" y="5" width="4" height="14" fill="#fff"></rect>463 </svg>464 </div>465 466 <div class="overlay-side left">467 <div class="side-wrap">468 <svg class="ctrl-icon" viewBox="0 0 24 24">469 <path d="M15 6l-6 6 6 6V6z"/>470 </svg>471 <div>10</div>472 </div>473 </div>474 <div class="overlay-side right">475 <div class="side-wrap">476 <div>10</div>477 <svg class="ctrl-icon" viewBox="0 0 24 24">478 <path d="M9 6l6 6-6 6V6z"/>479 </svg>480 </div>481 </div>482 483 <div class="caption">but nowadays they're open for everyone to enjoy.</div>484 485 <div class="timeline">486 <div class="timeline-track">487 <div class="timeline-progress"></div>488 <div class="timeline-dot"></div>489 </div>490 </div>491 <div class="time-meta">2:21 / 6:13 • <span class="link">Royal Parks</span></div>492 </div>493 </div>494 495 <!-- Content below video -->496 <div class="content">497 <div class="title">London Vacation Travel Guide | Expedia</div>498 <div class="meta">5M views · 10y ago <span class="hashtags">#sightseeing #London #vacation</span> …more</div>499 500 <div class="channel-row">501 <div class="channel-left">502 <div class="avatar">[IMG: Channel Avatar]</div>503 <div class="channel-info">504 <div class="channel-name">Expedia</div>505 <div class="channel-subs">1.15M</div>506 </div>507 </div>508 <div class="subscribe-btn">Subscribe</div>509 </div>510 511 <div class="actions">512 <div class="pill">513 <svg viewBox="0 0 24 24">514 <path d="M12 21l-1-1C6 16 4 14 4 11a5 5 0 015-5c1.6 0 3 0.8 3 2 0-1.2 1.4-2 3-2a5 5 0 015 5c0 3-2 5-7 9l-1 1z"/>515 </svg>516 <span>30K</span>517 </div>518 <div class="pill">519 <svg viewBox="0 0 24 24">520 <path d="M12 5l7 7-7 7v-4H5v-6h7V5z"/>521 </svg>522 <span>Share</span>523 </div>524 <div class="pill">525 <svg viewBox="0 0 24 24">526 <path d="M6 10l6-6 6 6-2 2-4-4-4 4-2-2zm0 4h12v2H6v-2z"/>527 </svg>528 <span>Remix</span>529 </div>530 <div class="pill">531 <svg viewBox="0 0 24 24">532 <path d="M12 3l5 5h-3v7H10V8H7l5-5zm-7 15h14v3H5v-3z"/>533 </svg>534 <span>Download</span>535 </div>536 </div>537 538 <div class="comments-header">Comments 1.7K</div>539 </div>540 541 <!-- Playback Speed Modal -->542 <div class="scrim"></div>543 <div class="sheet">544 <div class="sheet-handle"></div>545 <div class="sheet-content">546 <div class="speed-item">547 <div class="check"></div>548 <div>0.25x</div>549 </div>550 <div class="speed-item">551 <div class="check"></div>552 <div>0.5x</div>553 </div>554 <div class="speed-item">555 <div class="check"></div>556 <div>0.75x</div>557 </div>558 <div class="speed-item">559 <div class="check active">560 <svg viewBox="0 0 24 24"><path d="M20 6l-11 11-5-5 2-2 3 3 9-9z"/></svg>561 </div>562 <div>Normal</div>563 </div>564 <div class="speed-item">565 <div class="check"></div>566 <div>1.25x</div>567 </div>568 <div class="speed-item">569 <div class="check"></div>570 <div>1.5x</div>571 </div>572 <div class="speed-item">573 <div class="check"></div>574 <div>1.75x</div>575 </div>576 <div class="speed-item">577 <div class="check"></div>578 <div>2x</div>579 </div>580 </div>581 </div>582 583 <div class="home-indicator"></div>584</div>585</body>586</html>