GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>YouTube Mobile UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; }7 #render-target {8 width: 1080px;9 height: 2160px;10 position: relative;11 overflow: hidden;12 background: #111316;13 color: #ffffff;14 font-family: Arial, Helvetica, sans-serif;15 }16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 88px;23 padding: 0 28px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #ffffff;28 font-size: 34px;29 }30 .status-icons {31 display: flex;32 gap: 24px;33 align-items: center;34 font-size: 28px;35 opacity: 0.9;36 }37 /* Video area */38 .video-wrapper {39 position: absolute;40 top: 88px;41 left: 0;42 width: 1080px;43 height: 680px;44 background: #000;45 }46 .video-image {47 position: absolute;48 inset: 0;49 background: #E0E0E0;50 border: 1px solid #BDBDBD;51 display: flex;52 align-items: center;53 justify-content: center;54 color: #3d3d3d;55 font-weight: bold;56 letter-spacing: 0.5px;57 }58 .overlay-top {59 position: absolute;60 top: 18px;61 left: 22px;62 right: 22px;63 display: flex;64 align-items: center;65 justify-content: space-between;66 }67 .icon-btn {68 width: 56px;69 height: 56px;70 display: inline-flex;71 align-items: center;72 justify-content: center;73 border-radius: 28px;74 background: rgba(0,0,0,0.35);75 }76 .icon-row-right {77 display: flex;78 gap: 20px;79 align-items: center;80 }81 .side-controls {82 position: absolute;83 top: 240px;84 left: 40px;85 right: 40px;86 display: flex;87 align-items: center;88 justify-content: space-between;89 }90 .progress-area {91 position: absolute;92 bottom: 20px;93 left: 30px;94 right: 30px;95 height: 40px;96 display: flex;97 align-items: center;98 gap: 20px;99 }100 .progress-bar {101 flex: 1;102 height: 6px;103 background: #3a3a3a;104 border-radius: 3px;105 position: relative;106 }107 .progress-fill {108 position: absolute;109 left: 0;110 top: 0;111 height: 6px;112 width: 430px; /* ~40% */113 background: #ff0000;114 border-radius: 3px;115 }116 .progress-dot {117 position: absolute;118 left: 430px;119 top: -6px;120 width: 22px;121 height: 22px;122 background: #ff0000;123 border-radius: 50%;124 box-shadow: 0 0 0 4px rgba(255,0,0,0.25);125 }126 .time-text {127 font-size: 28px;128 color: #e5e5e5;129 width: 180px;130 }131 .fullscreen-btn {132 width: 40px;133 height: 40px;134 display: inline-flex;135 align-items: center;136 justify-content: center;137 background: rgba(255,255,255,0.1);138 border-radius: 6px;139 }140 /* Ad strip */141 .ad-strip {142 position: absolute;143 top: 768px;144 left: 0;145 width: 1080px;146 padding: 24px 30px;147 display: flex;148 align-items: center;149 gap: 22px;150 border-top: 1px solid #1f1f1f;151 border-bottom: 1px solid #1f1f1f;152 background: #121212;153 }154 .ad-logo {155 width: 84px;156 height: 84px;157 background: #E0E0E0;158 border: 1px solid #BDBDBD;159 display: flex;160 align-items: center;161 justify-content: center;162 color: #666;163 font-size: 22px;164 }165 .ad-content {166 flex: 1;167 color: #ffffff;168 }169 .ad-title { font-size: 32px; font-weight: 700; }170 .ad-sub { font-size: 26px; color: #bdbdbd; margin-top: 6px; }171 .install-btn {172 padding: 18px 36px;173 background: #2da0ff;174 color: #fff;175 border-radius: 40px;176 font-size: 28px;177 font-weight: 700;178 border: none;179 }180 .dropdown {181 width: 54px; height: 54px;182 display: flex; align-items: center; justify-content: center;183 background: #1e1e1e; border-radius: 27px;184 }185 /* Title and channel section */186 .title-block {187 position: absolute;188 top: 900px;189 left: 0;190 width: 1080px;191 padding: 24px 30px;192 }193 .video-title {194 font-size: 52px;195 font-weight: 800;196 margin: 10px 0 8px;197 }198 .meta { font-size: 28px; color: #b9b9b9; }199 .channel-row {200 margin-top: 24px;201 display: flex;202 align-items: center;203 justify-content: space-between;204 }205 .channel-info {206 display: flex;207 align-items: center;208 gap: 18px;209 }210 .avatar {211 width: 74px; height: 74px; border-radius: 50%;212 background: #E0E0E0; border: 1px solid #BDBDBD;213 display: flex; align-items: center; justify-content: center;214 color: #666; font-size: 18px;215 }216 .channel-text { font-size: 32px; }217 .subscriber-count { color: #bdbdbd; font-size: 28px; margin-left: 10px; }218 .subscribe-btn {219 background: #ffffff;220 color: #000;221 padding: 18px 34px;222 border-radius: 38px;223 font-size: 30px;224 font-weight: 700;225 }226 .actions {227 margin-top: 26px;228 display: flex;229 gap: 22px;230 }231 .action-pill {232 background: #232323;233 color: #fff;234 border-radius: 28px;235 padding: 18px 24px;236 display: flex;237 align-items: center;238 gap: 14px;239 font-size: 28px;240 }241 /* Comments */242 .comments {243 position: absolute;244 top: 1160px;245 left: 0;246 width: 1080px;247 padding: 26px 30px;248 }249 .comments-title { font-size: 42px; font-weight: 800; margin-bottom: 18px; }250 .comment-card {251 background: #171717;252 border-radius: 20px;253 padding: 20px;254 display: flex;255 align-items: center;256 justify-content: space-between;257 }258 .comment-left { display: flex; align-items: center; gap: 18px; }259 .comment-avatar {260 width: 64px; height: 64px; border-radius: 50%;261 background: #E0E0E0; border: 1px solid #BDBDBD;262 display: flex; align-items: center; justify-content: center;263 color: #666; font-size: 16px;264 }265 .comment-text { font-size: 32px; color: #e2e2e2; }266 .chev {267 width: 40px; height: 40px;268 display: flex; align-items: center; justify-content: center;269 background: #222; border-radius: 10px;270 }271 /* Bottom promo banner */272 .promo-banner {273 position: absolute;274 bottom: 0;275 left: 0;276 width: 1080px;277 height: 520px;278 background: #162a45;279 padding: 24px 30px;280 color: #fff;281 }282 .promo-card {283 width: 100%;284 height: 100%;285 background: rgba(255,255,255,0.06);286 border-radius: 20px;287 padding: 26px;288 position: relative;289 }290 .promo-title {291 font-size: 46px;292 font-weight: 800;293 letter-spacing: 1px;294 }295 .promo-sub { margin-top: 10px; font-size: 36px; color: #cbe2ff; }296 .promo-image {297 position: absolute;298 right: 26px;299 bottom: 26px;300 width: 460px;301 height: 360px;302 background: #E0E0E0;303 border: 1px solid #BDBDBD;304 display: flex;305 align-items: center;306 justify-content: center;307 color: #666;308 font-size: 24px;309 }310 /* Simple inline icon helpers */311 svg { fill: none; stroke: #fff; stroke-width: 3; }312</style>313</head>314<body>315<div id="render-target">316 <!-- Status Bar -->317 <div class="status-bar">318 <div>1:45</div>319 <div class="status-icons">320 <!-- Signal -->321 <svg width="34" height="34" viewBox="0 0 24 24">322 <path d="M3 20h2M7 16h2M11 12h2M15 8h2M19 4h2"/>323 </svg>324 <!-- WiFi -->325 <svg width="34" height="34" viewBox="0 0 24 24">326 <path d="M2 8c5-5 15-5 20 0M5 11c3-3 11-3 14 0M8 14c2-2 6-2 8 0M12 18l2 2-2 2-2-2 2-2z"/>327 </svg>328 <!-- Battery + percent -->329 <div style="display:flex;align-items:center;gap:8px;">330 <svg width="46" height="26" viewBox="0 0 46 26">331 <rect x="2" y="5" width="36" height="16" rx="3" stroke="#fff"></rect>332 <rect x="4" y="7" width="28" height="12" rx="2" fill="#4caf50" stroke="none"></rect>333 <rect x="40" y="9" width="4" height="8" rx="1" stroke="#fff"></rect>334 </svg>335 <span style="font-size:28px;">100%</span>336 </div>337 </div>338 </div>339 340 <!-- Video Area -->341 <div class="video-wrapper">342 <div class="video-image">[IMG: Music video frame with colorful flowers]</div>343 344 <div class="overlay-top">345 <!-- back chevron -->346 <div class="icon-btn">347 <svg width="30" height="30" viewBox="0 0 24 24">348 <path d="M15 18l-6-6 6-6"/>349 </svg>350 </div>351 <div class="icon-row-right">352 <!-- CC -->353 <div class="icon-btn" title="CC" style="width:58px;height:58px;">354 <span style="font-size:20px;font-weight:700;">CC</span>355 </div>356 <!-- settings gear (simplified) -->357 <div class="icon-btn">358 <svg width="30" height="30" viewBox="0 0 24 24">359 <circle cx="12" cy="12" r="4"></circle>360 <path d="M4 12h2M18 12h2M12 4v2M12 18v2M6.5 6.5l1.4 1.4M16.1 16.1l1.4 1.4M6.5 17.5l1.4-1.4M16.1 7.9l1.4-1.4"/>361 </svg>362 </div>363 <!-- close X -->364 <div class="icon-btn">365 <svg width="30" height="30" viewBox="0 0 24 24">366 <path d="M6 6l12 12M18 6l-12 12"/>367 </svg>368 </div>369 </div>370 </div>371 372 <!-- side controls -->373 <div class="side-controls">374 <div style="display:flex;align-items:center;gap:18px;">375 <!-- Volume icon -->376 <div class="icon-btn">377 <svg width="30" height="30" viewBox="0 0 24 24">378 <path d="M5 9v6h4l5 4V5l-5 4H5zM15 9c1.7 1 1.7 5 0 6"></path>379 </svg>380 </div>381 <!-- rewind 10 -->382 <div class="icon-btn" title="Rewind 10">383 <svg width="34" height="34" viewBox="0 0 24 24">384 <path d="M12 5l-5 5 5 5"/>385 <text x="14" y="14" font-size="10" fill="#fff">10</text>386 </svg>387 </div>388 </div>389 <div style="display:flex;align-items:center;gap:18px;">390 <!-- forward 10 -->391 <div class="icon-btn" title="Forward 10">392 <svg width="34" height="34" viewBox="0 0 24 24">393 <path d="M12 5l5 5-5 5"/>394 <text x="4" y="14" font-size="10" fill="#fff">10</text>395 </svg>396 </div>397 <!-- play -->398 <div class="icon-btn" title="Play">399 <svg width="30" height="30" viewBox="0 0 24 24">400 <polygon points="8,5 20,12 8,19" fill="#fff" stroke="none"></polygon>401 </svg>402 </div>403 </div>404 </div>405 406 <!-- progress -->407 <div class="progress-area">408 <div class="time-text">2:28 / 4:29</div>409 <div class="progress-bar">410 <div class="progress-fill"></div>411 <div class="progress-dot"></div>412 </div>413 <div class="fullscreen-btn">414 <svg width="24" height="24" viewBox="0 0 24 24">415 <path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5"/>416 </svg>417 </div>418 </div>419 </div>420 421 <!-- Ad Strip -->422 <div class="ad-strip">423 <div class="ad-logo">[IMG: Ad]</div>424 <div class="ad-content">425 <div class="ad-title">Goibibo: Hotel, Flight Booking</div>426 <div class="ad-sub">Ad · ★ 4.4 · FREE</div>427 </div>428 <button class="install-btn">Install</button>429 <div class="dropdown">430 <svg width="20" height="20" viewBox="0 0 24 24">431 <path d="M6 9l6 6 6-6"/>432 </svg>433 </div>434 </div>435 436 <!-- Title & Channel -->437 <div class="title-block">438 <div class="video-title">Katy Perry - Roar</div>439 <div class="meta">3.8B views · 9y ago · ...more</div>440 441 <div class="channel-row">442 <div class="channel-info">443 <div class="avatar">[IMG]</div>444 <div class="channel-text">Katy Perry <span class="subscriber-count">44.2M</span></div>445 </div>446 <div class="subscribe-btn">Subscribe</div>447 </div>448 449 <div class="actions">450 <div class="action-pill">451 <svg width="26" height="26" viewBox="0 0 24 24">452 <path d="M12 21l-1-1c-5-4-8-6-8-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 4-3 6-8 10l-1 1z"/>453 </svg>454 <span>16M</span>455 </div>456 <div class="action-pill">457 <svg width="26" height="26" viewBox="0 0 24 24">458 <path d="M4 12h12M12 5l7 7-7 7"/>459 </svg>460 <span>Share</span>461 </div>462 <div class="action-pill">463 <svg width="26" height="26" viewBox="0 0 24 24">464 <path d="M12 5v14M5 12h14"/>465 </svg>466 <span>Remix</span>467 </div>468 <div class="action-pill">469 <svg width="26" height="26" viewBox="0 0 24 24">470 <path d="M4 6h16v12H4zM9 10h6v6H9z"/>471 </svg>472 <span>Download</span>473 </div>474 </div>475 </div>476 477 <!-- Comments -->478 <div class="comments">479 <div class="comments-title">Comments 767K</div>480 <div class="comment-card">481 <div class="comment-left">482 <div class="comment-avatar">[IMG]</div>483 <div class="comment-text">2023 someone?</div>484 </div>485 <div class="chev">486 <svg width="18" height="18" viewBox="0 0 24 24">487 <path d="M8 10l4 4 4-4"/>488 </svg>489 </div>490 </div>491 </div>492 493 <!-- Bottom Promo Banner -->494 <div class="promo-banner">495 <div class="promo-card">496 <div class="promo-title">KURTAS, TOPS, DRESSES & MORE</div>497 <div class="promo-sub">Up To 80% Off • JioMart</div>498 <div class="promo-image">[IMG: Fashion ad banner with two models]</div>499 </div>500 </div>501</div>502</body>503</html>