GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Mock - Video Page</title>5<style>6 body {7 margin: 0;8 padding: 0;9 background: transparent;10 font-family: Arial, Helvetica, sans-serif;11 color: #111;12 }13 #render-target {14 width: 1440px;15 height: 3120px;16 position: relative;17 overflow: hidden;18 background: #ffffff;19 }20 21 /* Status bar */22 .status-bar {23 position: absolute;24 left: 0;25 top: 0;26 width: 1440px;27 height: 120px;28 background: #000;29 color: #fff;30 display: flex;31 align-items: center;32 padding: 0 40px;33 box-sizing: border-box;34 }35 .status-left {36 font-size: 48px;37 font-weight: bold;38 }39 .status-right {40 margin-left: auto;41 display: flex;42 align-items: center;43 gap: 28px;44 }45 .status-icon {46 width: 36px;47 height: 36px;48 border-radius: 50%;49 border: 2px solid #fff;50 opacity: 0.9;51 }52 53 /* Video area */54 .video-area {55 position: absolute;56 top: 120px;57 left: 0;58 width: 1440px;59 height: 900px;60 background: #111;61 }62 .video-frame {63 position: absolute;64 left: 60px;65 top: 60px;66 width: 1320px;67 height: 720px;68 background: #E0E0E0;69 border: 1px solid #BDBDBD;70 display: flex;71 justify-content: center;72 align-items: center;73 color: #757575;74 font-size: 44px;75 }76 .overlay-icon {77 position: absolute;78 width: 160px;79 height: 160px;80 border-radius: 80px;81 background: rgba(0,0,0,0.6);82 display: flex;83 justify-content: center;84 align-items: center;85 }86 .overlay-icon svg {87 width: 80px;88 height: 80px;89 fill: #fff;90 }91 .rewind {92 left: 220px;93 top: 360px;94 }95 .pause {96 left: 640px;97 top: 360px;98 }99 .forward {100 right: 220px;101 top: 360px;102 }103 .ten-badge {104 position: absolute;105 top: -26px;106 font-size: 36px;107 color: #fff;108 opacity: 0.9;109 }110 .progress-area {111 position: absolute;112 left: 0;113 bottom: 0;114 width: 1440px;115 height: 120px;116 display: flex;117 align-items: center;118 padding: 0 60px;119 box-sizing: border-box;120 color: #fff;121 gap: 30px;122 }123 .time-label {124 font-size: 42px;125 min-width: 300px;126 }127 .progress-track {128 flex: 1;129 height: 10px;130 background: rgba(255,255,255,0.25);131 border-radius: 5px;132 position: relative;133 }134 .progress-buffer {135 position: absolute;136 left: 0;137 top: 0;138 height: 10px;139 width: 60%;140 background: rgba(255,255,255,0.50);141 border-radius: 5px;142 }143 .progress-fill {144 position: absolute;145 left: 0;146 top: 0;147 height: 10px;148 width: 3%;149 background: #00AEEF;150 border-radius: 5px;151 }152 .progress-dot {153 position: absolute;154 left: 36px;155 top: -10px;156 width: 28px;157 height: 28px;158 border-radius: 50%;159 background: #fff;160 }161 .video-more {162 position: absolute;163 right: 40px;164 top: 30px;165 width: 60px;166 height: 60px;167 display: flex;168 justify-content: center;169 align-items: center;170 }171 .video-more svg { fill: #fff; width: 40px; height: 40px; }172 .fullscreen {173 position: absolute;174 right: 40px;175 bottom: 140px;176 width: 60px;177 height: 60px;178 border: 2px solid #fff;179 box-sizing: border-box;180 }181 182 /* Page content */183 .content {184 position: absolute;185 left: 0;186 top: 1020px;187 width: 1440px;188 padding: 0 60px 60px;189 box-sizing: border-box;190 background: #fff;191 }192 .title {193 font-size: 88px;194 font-weight: 800;195 line-height: 1.1;196 margin: 40px 0 30px 0;197 letter-spacing: 1px;198 }199 200 .action-row {201 display: flex;202 gap: 40px;203 margin-top: 20px;204 }205 .action-btn {206 width: 180px;207 height: 160px;208 border-radius: 40px;209 border: 2px solid #e6e6e6;210 background: #fff;211 display: flex;212 justify-content: center;213 align-items: center;214 box-shadow: 0 6px 20px rgba(0,0,0,0.08);215 }216 .action-btn svg { width: 80px; height: 80px; fill: #1f1f1f; }217 .counts {218 display: flex;219 gap: 180px;220 margin: 20px 10px 10px 10px;221 color: #1f1f1f;222 font-size: 44px;223 font-weight: 700;224 }225 226 .desc {227 font-size: 48px;228 line-height: 1.4;229 color: #333;230 margin-top: 40px;231 }232 .more-link {233 color: #1e88e5;234 font-weight: 700;235 }236 237 /* Author */238 .author-row {239 margin-top: 50px;240 display: flex;241 align-items: center;242 }243 .avatar {244 width: 120px;245 height: 120px;246 border-radius: 60px;247 background: #E0E0E0;248 border: 1px solid #BDBDBD;249 display: flex;250 justify-content: center;251 align-items: center;252 color: #757575;253 font-size: 32px;254 margin-right: 30px;255 }256 .author-info {257 display: flex;258 flex-direction: column;259 gap: 8px;260 }261 .author-name { font-size: 60px; font-weight: 800; }262 .author-meta { font-size: 42px; color: #666; }263 .follow-btn {264 margin-left: auto;265 background: #f5f7fa;266 border: 2px solid #dfe4ea;267 height: 100px;268 padding: 0 40px;269 border-radius: 30px;270 display: flex;271 align-items: center;272 gap: 20px;273 font-size: 46px;274 font-weight: 700;275 }276 .check {277 width: 44px; height: 44px;278 }279 280 .share-bar {281 margin-top: 40px;282 width: 1320px;283 height: 140px;284 background: #2d9cdb;285 color: #fff;286 border-radius: 30px;287 display: flex;288 align-items: center;289 gap: 30px;290 padding: 0 40px;291 box-shadow: 0 8px 24px rgba(45,156,219,0.35);292 font-size: 58px;293 font-weight: 800;294 }295 .share-icon {296 width: 62px; height: 62px; border: 3px solid #fff; border-radius: 12px;297 display: inline-flex; justify-content: center; align-items: center;298 }299 .share-icon svg { width: 40px; height: 40px; fill: #fff; }300 301 /* More section */302 .section-header {303 display: flex;304 align-items: center;305 margin-top: 90px;306 margin-bottom: 30px;307 }308 .section-title {309 font-size: 56px;310 font-weight: 800;311 color: #222;312 }313 .autoplay {314 margin-left: auto;315 display: flex;316 align-items: center;317 gap: 20px;318 font-size: 46px;319 color: #666;320 }321 .toggle {322 width: 120px;323 height: 60px;324 background: #cfe9ff;325 border-radius: 40px;326 position: relative;327 }328 .toggle::after {329 content: "";330 position: absolute;331 right: 10px;332 top: 10px;333 width: 40px;334 height: 40px;335 background: #4aa3ff;336 border-radius: 50%;337 }338 339 .list-item {340 display: flex;341 gap: 30px;342 padding: 24px 0;343 align-items: flex-start;344 }345 .thumb {346 width: 420px;347 height: 300px;348 background: #E0E0E0;349 border: 1px solid #BDBDBD;350 display: flex; justify-content: center; align-items: center;351 color: #757575; font-size: 40px;352 position: relative;353 }354 .duration {355 position: absolute;356 right: 20px; bottom: 20px;357 background: rgba(0,0,0,0.75);358 color: #fff;359 font-size: 36px;360 padding: 6px 12px;361 border-radius: 8px;362 }363 .list-content {364 flex: 1;365 }366 .item-title {367 font-size: 54px;368 font-weight: 800;369 color: #111;370 line-height: 1.2;371 }372 .item-meta {373 font-size: 42px;374 color: #777;375 margin-top: 20px;376 }377 .item-stats {378 font-size: 40px;379 color: #777;380 margin-top: 10px;381 }382 .dots {383 width: 80px;384 height: 80px;385 display: flex;386 justify-content: center;387 align-items: center;388 }389 .dots svg { width: 28px; height: 60px; fill: #888; }390 391 /* Floating bottom pill */392 .floating {393 position: absolute;394 left: 420px;395 bottom: 480px;396 width: 600px;397 height: 160px;398 background: #f7f8fb;399 border-radius: 80px;400 box-shadow: 0 10px 30px rgba(0,0,0,0.12);401 display: flex;402 align-items: center;403 justify-content: center;404 gap: 80px;405 }406 .float-btn {407 width: 150px; height: 120px;408 background: #fff;409 border-radius: 60px;410 border: 2px solid #e6e6e6;411 display: flex; align-items: center; justify-content: center;412 }413 .float-btn svg { width: 70px; height: 70px; fill: #1f1f1f; }414 415 /* bottom handle */416 .home-handle {417 position: absolute;418 bottom: 380px;419 left: 50%;420 transform: translateX(-50%);421 width: 240px;422 height: 18px;423 background: #ddd;424 border-radius: 10px;425 }426</style>427</head>428<body>429<div id="render-target">430 431 <!-- Status Bar -->432 <div class="status-bar">433 <div class="status-left">11:30</div>434 <div class="status-right">435 <div class="status-icon"></div>436 <div class="status-icon"></div>437 <div class="status-icon"></div>438 <div class="status-icon"></div>439 </div>440 </div>441 442 <!-- Video Area -->443 <div class="video-area">444 <div class="video-frame">[IMG: Black-and-white drummer - video frame]</div>445 446 <!-- Overlay controls -->447 <div class="overlay-icon rewind">448 <span class="ten-badge">10</span>449 <svg viewBox="0 0 24 24">450 <path d="M12 5v4l-5-5 5-5v4h6a7 7 0 1 1-6 12l2-2a5 5 0 1 0 4-8h-6z"/>451 </svg>452 </div>453 <div class="overlay-icon pause">454 <svg viewBox="0 0 24 24">455 <path d="M7 4h4v16H7zM13 4h4v16h-4z"/>456 </svg>457 </div>458 <div class="overlay-icon forward">459 <span class="ten-badge">10</span>460 <svg viewBox="0 0 24 24">461 <path d="M12 5v4l5-5-5-5v4H6a7 7 0 1 0 6 12l-2-2a5 5 0 1 1-4-8h6z"/>462 </svg>463 </div>464 465 <!-- More and fullscreen -->466 <div class="video-more">467 <svg viewBox="0 0 24 24">468 <circle cx="12" cy="5" r="2"></circle>469 <circle cx="12" cy="12" r="2"></circle>470 <circle cx="12" cy="19" r="2"></circle>471 </svg>472 </div>473 <div class="fullscreen"></div>474 475 <!-- Progress bar -->476 <div class="progress-area">477 <div class="time-label">00:00 / 02:17</div>478 <div class="progress-track">479 <div class="progress-buffer"></div>480 <div class="progress-fill"></div>481 <div class="progress-dot"></div>482 </div>483 </div>484 </div>485 486 <!-- Content -->487 <div class="content">488 <div class="title">The Beatles - Help! (Alternate Music Video)</div>489 490 <div class="action-row">491 <div class="action-btn">492 <svg viewBox="0 0 24 24">493 <path d="M8 5v14l11-7-11-7z"/>494 </svg>495 </div>496 <div class="action-btn">497 <svg viewBox="0 0 24 24">498 <path d="M12 21.35l-1.45-1.32C5 15 2 12 2 8.5A4.5 4.5 0 0 1 6.5 4c1.74 0 3.41.81 4.5 2.09A6 6 0 0 1 17.5 4 4.5 4.5 0 0 1 22 8.5c0 3.5-3 6.5-8.55 11.54L12 21.35z"/>499 </svg>500 </div>501 <div class="action-btn">502 <svg viewBox="0 0 24 24">503 <path d="M4 4h16v12H5.17L4 17.17V4zm4 6h8v2H8v-2z"/>504 </svg>505 </div>506 </div>507 <div class="counts">508 <div>15K</div>509 <div>91</div>510 <div>6</div>511 </div>512 513 <div class="desc">514 The rare alternate music video for "Help!". The version that appears on the Beatles' 1 DVD u…515 <span class="more-link">more</span>516 </div>517 518 <div class="author-row">519 <div class="avatar">[Avatar]</div>520 <div class="author-info">521 <div class="author-name">Starman Brinley</div>522 <div class="author-meta">7 videos</div>523 </div>524 <div class="follow-btn">525 <svg class="check" viewBox="0 0 24 24">526 <path fill="#3bb273" d="M9 16.2l-3.5-3.5L4 14.2 9 19l12-12-1.5-1.5z"/>527 </svg>528 Following529 </div>530 </div>531 532 <div class="share-bar">533 <div class="share-icon">534 <svg viewBox="0 0 24 24">535 <path d="M18 8a3 3 0 1 0-2.83-2H9v4h6.17A3 3 0 0 0 18 8zM6 10a3 3 0 1 0 0 6c1.3 0 2.4-.83 2.82-2H15v-4H8.82A3 3 0 0 0 6 10z"/>536 </svg>537 </div>538 Share539 </div>540 541 <div class="section-header">542 <div class="section-title">MORE FROM STARMAN BRINLEY</div>543 <div class="autoplay">544 Autoplay545 <div class="toggle"></div>546 </div>547 </div>548 549 <!-- List item 1 -->550 <div class="list-item">551 <div class="thumb">[IMG: David Bowie dancing]552 <div class="duration">02:44</div>553 </div>554 <div class="list-content">555 <div class="item-title">David Bowie - John, I'm Only Dancing (Alternate Mix Edit)</div>556 <div class="item-meta">Starman Brinley</div>557 <div class="item-stats">221 views • 5 years ago</div>558 </div>559 <div class="dots">560 <svg viewBox="0 0 24 24">561 <circle cx="12" cy="5" r="2"></circle>562 <circle cx="12" cy="12" r="2"></circle>563 <circle cx="12" cy="19" r="2"></circle>564 </svg>565 </div>566 </div>567 568 <!-- List item 2 (partial preview) -->569 <div class="list-item">570 <div class="thumb" style="height:280px;">[IMG: Beatles Compilation Cover]</div>571 <div class="list-content">572 <div class="item-title">Beatles - I'll Be Back / I'm Fine (from A Hard Day's Night & Oldies)</div>573 <div class="item-meta">Starman Brinley</div>574 <div class="item-stats">102 views • 6 years ago</div>575 </div>576 <div class="dots">577 <svg viewBox="0 0 24 24">578 <circle cx="12" cy="5" r="2"></circle>579 <circle cx="12" cy="12" r="2"></circle>580 <circle cx="12" cy="19" r="2"></circle>581 </svg>582 </div>583 </div>584 585 </div>586 587 <!-- Floating Controls -->588 <div class="floating">589 <div class="float-btn">590 <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7-11-7z"/></svg>591 </div>592 <div class="float-btn">593 <svg viewBox="0 0 24 24"><path d="M12 22c5 0 9-4 9-9s-4-9-9-9-9 4-9 9 4 9 9 9zm-1-13h2v6h-2V9zm0-4h2v2h-2V5z"/></svg>594 </div>595 </div>596 597 <!-- Home handle -->598 <div class="home-handle"></div>599 600</div>601</body>602</html>