GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Render - YouTube Library</title>5<style>6 body { margin: 0; padding: 0; background: transparent; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #121212;13 color: #FFFFFF;14 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;15 }16 17 /* Top status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 70px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 padding: 0 30px;28 font-size: 28px;29 color: #fff;30 }31 .status-right {32 display: flex;33 align-items: center;34 gap: 22px;35 }36 .icon { width: 36px; height: 36px; }37 .icon.small { width: 32px; height: 32px; }38 39 /* App header */40 .app-header {41 position: absolute;42 top: 70px;43 left: 0;44 width: 1080px;45 height: 120px;46 display: flex;47 align-items: center;48 justify-content: space-between;49 padding: 0 30px;50 }51 .yt-left {52 display: flex;53 align-items: center;54 gap: 18px;55 }56 .yt-logo {57 display: flex;58 align-items: center;59 gap: 18px;60 font-weight: 700;61 font-size: 36px;62 }63 .logo-shape {64 width: 110px;65 height: 60px;66 background: #FF0000;67 border-radius: 12px;68 position: relative;69 }70 .logo-shape:before {71 content: "";72 position: absolute;73 left: 38px;74 top: 16px;75 width: 0;76 height: 0;77 border-left: 22px solid #fff;78 border-top: 14px solid transparent;79 border-bottom: 14px solid transparent;80 }81 .yt-right {82 display: flex;83 align-items: center;84 gap: 30px;85 }86 .avatar {87 width: 66px;88 height: 66px;89 border-radius: 50%;90 background: #2A2A2A;91 display: flex;92 align-items: center;93 justify-content: center;94 font-weight: 700;95 font-size: 28px;96 color: #CFCFCF;97 }98 99 /* Sections */100 .content {101 position: absolute;102 top: 190px;103 left: 0;104 width: 100%;105 padding: 0 30px;106 }107 .section {108 margin-bottom: 30px;109 }110 .section-header {111 display: flex;112 align-items: center;113 justify-content: space-between;114 margin: 12px 0 20px;115 }116 .section-title {117 display: flex;118 align-items: center;119 gap: 18px;120 font-size: 40px;121 font-weight: 700;122 }123 .link {124 color: #5DA9FF;125 font-size: 34px;126 font-weight: 600;127 }128 129 /* Video cards row */130 .video-row {131 display: flex;132 gap: 26px;133 }134 .video-card {135 width: 330px;136 }137 .thumb {138 width: 100%;139 height: 190px;140 background: #E0E0E0;141 border: 1px solid #BDBDBD;142 display: flex;143 align-items: flex-end;144 justify-content: center;145 color: #424242;146 font-size: 26px;147 position: relative;148 }149 .duration {150 position: absolute;151 right: 10px;152 bottom: 10px;153 background: rgba(0,0,0,0.75);154 color: #fff;155 font-size: 26px;156 padding: 4px 10px;157 border-radius: 8px;158 }159 .video-title {160 margin-top: 14px;161 font-size: 32px;162 line-height: 40px;163 font-weight: 700;164 }165 .video-channel {166 margin-top: 8px;167 font-size: 28px;168 color: #B0B0B0;169 }170 171 /* Playlists */172 .playlists {173 margin-top: 28px;174 }175 .playlist-row {176 display: flex;177 align-items: center;178 gap: 40px;179 margin-top: 8px;180 }181 .liked-card {182 width: 490px;183 height: 260px;184 background: #1F1F1F;185 border-radius: 16px;186 display: flex;187 overflow: hidden;188 position: relative;189 }190 .liked-thumb {191 width: 240px;192 height: 100%;193 background: #E0E0E0;194 border-right: 1px solid #BDBDBD;195 display: flex;196 align-items: center;197 justify-content: center;198 color: #424242;199 font-size: 26px;200 }201 .liked-meta {202 flex: 1;203 display: flex;204 align-items: center;205 justify-content: center;206 color: #FFFFFF;207 font-size: 30px;208 gap: 12px;209 }210 .like-count {211 background: rgba(255,255,255,0.08);212 border: 1px solid rgba(255,255,255,0.15);213 padding: 10px 16px;214 border-radius: 12px;215 font-weight: 700;216 }217 .new-playlist {218 width: 200px;219 height: 200px;220 background: #1F1F1F;221 border-radius: 100px;222 display: flex;223 align-items: center;224 justify-content: center;225 position: relative;226 }227 .new-playlist .plus {228 width: 90px;229 height: 90px;230 border-radius: 50%;231 background: #2A2A2A;232 display: flex;233 align-items: center;234 justify-content: center;235 }236 .playlist-labels {237 display: flex;238 align-items: center;239 justify-content: space-between;240 width: 760px;241 padding-right: 290px;242 margin-top: 18px;243 }244 .label-title {245 font-size: 38px;246 font-weight: 700;247 }248 .label-sub {249 font-size: 30px;250 color: #B0B0B0;251 }252 .new-label {253 font-size: 38px;254 font-weight: 700;255 }256 257 /* List items */258 .list {259 margin-top: 30px;260 }261 .list-item {262 display: flex;263 align-items: center;264 padding: 24px 0;265 border-top: 1px solid #1E1E1E;266 font-size: 34px;267 justify-content: flex-start;268 gap: 26px;269 }270 .list-item:first-child { border-top: none; }271 .list-icon {272 width: 52px; height: 52px;273 display: inline-block;274 }275 276 /* Ad banner */277 .ad-banner {278 margin-top: 30px;279 height: 180px;280 background: #0F0F0F;281 border-top: 1px solid #1E1E1E;282 border-bottom: 1px solid #1E1E1E;283 display: flex;284 align-items: center;285 justify-content: space-between;286 padding: 0 24px;287 }288 .ad-left {289 display: flex;290 align-items: center;291 gap: 20px;292 }293 .ad-thumb {294 width: 220px; height: 140px;295 background: #E0E0E0; border: 1px solid #BDBDBD;296 display: flex; align-items: center; justify-content: center; color: #424242; font-size: 26px;297 }298 .ad-text {299 display: flex; flex-direction: column;300 gap: 10px;301 }302 .ad-title {303 font-size: 34px;304 color: #FFFFFF;305 }306 .ad-tag {307 font-size: 30px;308 color: #CFCFCF;309 font-weight: 700;310 }311 .ad-right {312 display: flex; align-items: center; gap: 22px;313 }314 .ad-button {315 width: 62px; height: 62px; background: #1F1F1F; border-radius: 50%;316 display: flex; align-items: center; justify-content: center;317 }318 319 /* Bottom nav */320 .bottom-nav {321 position: absolute;322 bottom: 120px;323 left: 0;324 width: 100%;325 height: 140px;326 background: #121212;327 border-top: 1px solid #1E1E1E;328 display: flex;329 align-items: center;330 justify-content: space-around;331 }332 .nav-item {333 display: flex; flex-direction: column; align-items: center; gap: 12px;334 color: #CFCFCF; font-size: 28px;335 }336 .nav-item.active { color: #FFFFFF; }337 .nav-plus {338 width: 110px; height: 110px; background: #1F1F1F; border-radius: 55px; display: flex; align-items: center; justify-content: center; border: 2px solid #2A2A2A;339 }340 .red-dot {341 position: absolute;342 top: -4px; right: -10px;343 width: 18px; height: 18px; background: #FF3B3B; border-radius: 50%;344 }345 346 /* Home indicator */347 .home-indicator {348 position: absolute;349 bottom: 40px;350 left: 50%;351 transform: translateX(-50%);352 width: 360px;353 height: 12px;354 background: #FFFFFF;355 border-radius: 6px;356 opacity: 0.85;357 }358</style>359</head>360<body>361<div id="render-target">362 363 <!-- Status Bar -->364 <div class="status-bar">365 <div class="status-left">9:14</div>366 <div class="status-right">367 <!-- Cloud icon (simple) -->368 <svg class="icon small" viewBox="0 0 24 24">369 <path fill="#fff" d="M6 17h11a4 4 0 0 0 0-8h-.4A6 6 0 0 0 6 7a5 5 0 0 0 0 10z"/>370 </svg>371 <!-- Wi-Fi -->372 <svg class="icon small" viewBox="0 0 24 24">373 <path fill="#fff" d="M12 20l-2-2 2-2 2 2-2 2zm-6-6a10 10 0 0 1 12 0l-2 2a7 7 0 0 0-8 0l-2-2zm-3-4a16 16 0 0 1 20 0l-2 2a13 13 0 0 0-16 0l-2-2z"/>374 </svg>375 <!-- Battery -->376 <svg class="icon small" viewBox="0 0 24 24">377 <rect x="2" y="6" width="18" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"/>378 <rect x="4" y="8" width="12" height="8" fill="#fff"/>379 <rect x="20" y="10" width="2" height="6" fill="#fff"/>380 </svg>381 </div>382 </div>383 384 <!-- App Header -->385 <div class="app-header">386 <div class="yt-left yt-logo">387 <div class="logo-shape"></div>388 <div>YouTube</div>389 </div>390 <div class="yt-right">391 <!-- Cast -->392 <svg class="icon" viewBox="0 0 24 24">393 <rect x="3" y="5" width="18" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"/>394 <path d="M3 18a4 4 0 0 1 4 4h-2a2 2 0 0 0-2-2v-2z" fill="#fff"/>395 <path d="M3 14a8 8 0 0 1 8 8h-2a6 6 0 0 0-6-6v-2z" fill="#fff" opacity="0.7"/>396 </svg>397 <!-- Bell -->398 <svg class="icon" viewBox="0 0 24 24">399 <path fill="#fff" d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm8-6V11a8 8 0 1 0-16 0v5l-2 2h20l-2-2z"/>400 </svg>401 <!-- Search -->402 <svg class="icon" viewBox="0 0 24 24">403 <circle cx="11" cy="11" r="7" stroke="#fff" stroke-width="2" fill="none"/>404 <path d="M20 20l-4-4" stroke="#fff" stroke-width="2" stroke-linecap="round"/>405 </svg>406 <!-- Avatar -->407 <div class="avatar">C</div>408 </div>409 </div>410 411 <div class="content">412 413 <!-- History -->414 <div class="section">415 <div class="section-header">416 <div class="section-title">417 <!-- Clock icon -->418 <svg class="icon" viewBox="0 0 24 24">419 <circle cx="12" cy="12" r="9" fill="none" stroke="#fff" stroke-width="2"/>420 <path d="M12 7v6l4 2" stroke="#fff" stroke-width="2" stroke-linecap="round"/>421 </svg>422 <span>History</span>423 </div>424 <div class="link">View all</div>425 </div>426 427 <div class="video-row">428 <div class="video-card">429 <div class="thumb">[IMG: Rome Vlog Street & Food]430 <div class="duration">16:50</div>431 </div>432 <div class="video-title">What to do in Rome for 3 days | Italy Tr...</div>433 <div class="video-channel">Hannah JY Moon</div>434 </div>435 436 <div class="video-card">437 <div class="thumb">[IMG: This American Life Episode]438 <div class="duration">58:37</div>439 </div>440 <div class="video-title">This American Life: The Call</div>441 <div class="video-channel">This American Life</div>442 </div>443 444 <div class="video-card">445 <div class="thumb">[IMG: Rome Travel vlog]</div>446 <div class="video-title">rome travel vlog arriving in ita...</div>447 <div class="video-channel">alia zaita</div>448 </div>449 </div>450 </div>451 452 <!-- Playlists -->453 <div class="section playlists">454 <div class="section-header">455 <div class="section-title">456 <!-- Playlist icon -->457 <svg class="icon" viewBox="0 0 24 24">458 <path fill="#fff" d="M3 6h14v2H3V6zm0 5h14v2H3v-2zm0 5h10v2H3v-2z"/>459 <rect x="18" y="9" width="3" height="8" fill="#fff"/>460 </svg>461 <span>Playlists</span>462 </div>463 <div class="link">View all</div>464 </div>465 466 <div class="playlist-row">467 <div>468 <div class="liked-card">469 <div class="liked-thumb">[IMG: Playlist Cover]</div>470 <div class="liked-meta">471 <!-- Like icon -->472 <svg class="icon" viewBox="0 0 24 24">473 <path fill="#fff" d="M12 21l-8-8a5 5 0 0 1 8-6 5 5 0 0 1 8 6l-8 8z"/>474 </svg>475 <div class="like-count">27</div>476 </div>477 </div>478 <div class="playlist-labels" style="width:490px; padding-right:0;">479 <div>480 <div class="label-title">Liked videos</div>481 <div class="label-sub">Private</div>482 </div>483 </div>484 </div>485 486 <div style="display:flex; flex-direction:column; align-items:center;">487 <div class="new-playlist">488 <div class="plus">489 <svg class="icon" viewBox="0 0 24 24">490 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2" stroke-linecap="round"/>491 </svg>492 </div>493 </div>494 <div class="new-label" style="margin-top:20px;">New playlist</div>495 </div>496 </div>497 </div>498 499 <!-- List items -->500 <div class="list">501 <div class="list-item">502 <svg class="list-icon" viewBox="0 0 24 24">503 <path fill="#fff" d="M5 3h14v14H5z"/><path fill="#fff" d="M9 17l6 4V17z"/>504 </svg>505 <div class="label-title" style="font-size:36px; font-weight:600;">Your videos</div>506 </div>507 <div class="list-item">508 <svg class="list-icon" viewBox="0 0 24 24">509 <path fill="#fff" d="M12 3l8 6v10H4V9l8-6z"/><path fill="#121212" d="M12 6l6 4v7H6v-7z"/>510 </svg>511 <div class="label-title" style="font-size:36px; font-weight:600;">Downloads</div>512 </div>513 <div class="list-item">514 <svg class="list-icon" viewBox="0 0 24 24">515 <rect x="3" y="5" width="18" height="14" fill="#fff"/><path fill="#121212" d="M8 9h8v6H8z"/>516 </svg>517 <div class="label-title" style="font-size:36px; font-weight:600;">Your movies</div>518 </div>519 </div>520 521 <!-- Ad banner -->522 <div class="ad-banner">523 <div class="ad-left">524 <div class="ad-thumb">[IMG: Audio Episode Ad]</div>525 <div class="ad-text">526 <div class="ad-title">Your video will play after this ad</div>527 <div class="ad-tag">Sponsored</div>528 </div>529 </div>530 <div class="ad-right">531 <div class="ad-button">532 <svg class="icon" viewBox="0 0 24 24">533 <path fill="#fff" d="M8 6l10 6-10 6V6z"/>534 </svg>535 </div>536 <div class="ad-button">537 <svg class="icon" viewBox="0 0 24 24">538 <path d="M6 6l12 12M18 6L6 18" stroke="#fff" stroke-width="2" stroke-linecap="round"/>539 </svg>540 </div>541 </div>542 </div>543 544 </div>545 546 <!-- Bottom Navigation -->547 <div class="bottom-nav">548 <div class="nav-item">549 <svg class="icon" viewBox="0 0 24 24">550 <path fill="#CFCFCF" d="M12 4l10 8v8h-6v-6H8v6H2v-8l10-8z"/>551 </svg>552 <div>Home</div>553 </div>554 <div class="nav-item">555 <svg class="icon" viewBox="0 0 24 24">556 <path fill="#CFCFCF" d="M8 3l8 5-8 5V3zm0 8l8 5-8 5v-10z"/>557 </svg>558 <div>Shorts</div>559 </div>560 <div class="nav-item">561 <div class="nav-plus">562 <svg class="icon" viewBox="0 0 24 24">563 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2" stroke-linecap="round"/>564 </svg>565 </div>566 </div>567 <div class="nav-item">568 <div style="position:relative;">569 <svg class="icon" viewBox="0 0 24 24">570 <path fill="#CFCFCF" d="M3 5h18v3H3V5zm0 5h18v3H3v-3zm0 5h12v3H3v-3z"/>571 </svg>572 <div class="red-dot"></div>573 </div>574 <div>Subscriptions</div>575 </div>576 <div class="nav-item active">577 <svg class="icon" viewBox="0 0 24 24">578 <path fill="#fff" d="M4 4h16v4H4V4zm0 6h10v4H4v-4zm0 6h16v4H4v-4z"/>579 </svg>580 <div>Library</div>581 </div>582 </div>583 584 <!-- Home indicator -->585 <div class="home-indicator"></div>586 587</div>588</body>589</html>