GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>YouTube Mobile UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 position: relative;9 overflow: hidden;10 width: 1080px;11 height: 2400px;12 background: #121212;13 color: #FFFFFF;14 }15 16 /* Video area */17 .video {18 position: relative;19 width: 100%;20 height: 760px;21 background: #222;22 border-bottom: 1px solid #2a2a2a;23 }24 .video .img {25 position: absolute;26 inset: 0;27 background: #E0E0E0;28 color: #555;29 border: 1px solid #BDBDBD;30 display: flex;31 justify-content: center;32 align-items: center;33 font-weight: 600;34 letter-spacing: 0.3px;35 }36 37 /* Status bar */38 .status {39 position: absolute;40 top: 10px;41 left: 16px;42 right: 16px;43 height: 40px;44 display: flex;45 align-items: center;46 justify-content: space-between;47 color: #fff;48 font-size: 28px;49 }50 .status .icons {51 display: flex;52 gap: 18px;53 align-items: center;54 }55 .status svg { width: 28px; height: 28px; fill: #fff; opacity: 0.85; }56 57 /* Overlay quick controls (top-right) */58 .overlay-icons {59 position: absolute;60 top: 90px;61 right: 20px;62 display: flex;63 gap: 20px;64 }65 .overlay-icons .round {66 width: 56px;67 height: 56px;68 background: rgba(20,20,20,0.6);69 border: 1px solid rgba(255,255,255,0.15);70 border-radius: 12px;71 display: flex;72 align-items: center;73 justify-content: center;74 }75 .overlay-icons svg { width: 30px; height: 30px; fill: #fff; opacity: 0.9; }76 77 /* Mid controls */78 .mid-controls {79 position: absolute;80 top: 280px;81 left: 0;82 right: 0;83 display: flex;84 justify-content: center;85 align-items: center;86 gap: 120px;87 }88 .mid-controls .circle {89 width: 120px;90 height: 120px;91 border-radius: 60px;92 background: rgba(255,255,255,0.08);93 border: 1px solid rgba(255,255,255,0.25);94 display: flex;95 align-items: center;96 justify-content: center;97 }98 .mid-controls svg { width: 60px; height: 60px; fill: #fff; }99 100 /* Bottom overlay info */101 .video-info {102 position: absolute;103 bottom: 88px;104 left: 24px;105 right: 24px;106 display: flex;107 align-items: center;108 justify-content: space-between;109 font-size: 28px;110 color: #fff;111 opacity: 0.95;112 }113 .video-info .segment {114 display: flex;115 gap: 16px;116 align-items: center;117 }118 .video-info .segment .tag {119 background: rgba(255,255,255,0.12);120 border: 1px solid rgba(255,255,255,0.18);121 padding: 10px 16px;122 border-radius: 22px;123 font-size: 26px;124 }125 .fullscreen {126 width: 36px; height: 36px; border: 2px solid #fff; border-radius: 6px;127 }128 129 /* Progress bar */130 .progress {131 position: absolute;132 bottom: 50px;133 left: 0;134 width: 100%;135 height: 10px;136 background: #2a2a2a;137 }138 .progress .bar {139 position: absolute;140 height: 6px;141 background: #e53935;142 width: 380px; /* progress */143 top: 2px; left: 0;144 }145 .progress .dot {146 position: absolute;147 width: 26px; height: 26px;148 border-radius: 13px;149 background: #e53935;150 border: 4px solid rgba(255,255,255,0.9);151 left: 360px; top: -9px;152 }153 154 /* Content below video */155 .content {156 padding: 24px;157 }158 .title {159 font-size: 56px;160 font-weight: 800;161 line-height: 1.1;162 margin-top: 8px;163 }164 .meta {165 font-size: 28px;166 color: #bdbdbd;167 margin-top: 14px;168 }169 170 /* Channel row */171 .channel {172 margin-top: 26px;173 display: flex;174 align-items: center;175 justify-content: space-between;176 }177 .channel .left {178 display: flex;179 align-items: center;180 gap: 20px;181 }182 .avatar {183 width: 80px; height: 80px; border-radius: 40px; background: #22c55e;184 display: flex; align-items: center; justify-content: center; font-weight: 700; color: #0b1b0f;185 }186 .channel .name {187 font-size: 34px;188 font-weight: 700;189 }190 .channel .subs {191 font-size: 26px; color: #bdbdbd; margin-top: 6px;192 }193 .subscribe {194 background: #fff; color: #000; padding: 18px 28px; border-radius: 50px; font-weight: 700; font-size: 30px;195 }196 197 /* Action chips */198 .chips {199 margin-top: 26px;200 display: flex;201 gap: 20px;202 flex-wrap: wrap;203 }204 .chip {205 background: #1e1e1e;206 color: #fff;207 border: 1px solid #2f2f2f;208 border-radius: 36px;209 padding: 18px 26px;210 font-size: 30px;211 display: flex;212 align-items: center;213 gap: 16px;214 }215 .chip svg { width: 30px; height: 30px; fill: #fff; }216 217 /* Comments section */218 .comments {219 margin-top: 42px;220 }221 .comments .header {222 font-size: 42px; font-weight: 800;223 }224 .comment-card {225 margin-top: 18px;226 background: #1c1c1c;227 border: 1px solid #2a2a2a;228 border-radius: 22px;229 padding: 24px;230 display: flex;231 align-items: center;232 justify-content: space-between;233 }234 .comment-left {235 display: flex; gap: 18px; align-items: flex-start;236 }237 .comment-avatar {238 width: 54px; height: 54px; border-radius: 27px; background: #ffd54f;239 }240 .comment-text { font-size: 30px; color: #e0e0e0; max-width: 850px; line-height: 1.35; }241 .chev {242 width: 26px; height: 26px; border-right: 4px solid #ccc; border-bottom: 4px solid #ccc; transform: rotate(45deg);243 }244 245 /* Shop section */246 .shop {247 margin-top: 38px;248 }249 .shop-title {250 font-size: 46px; font-weight: 800;251 }252 .shop-sub { font-size: 28px; color: #bdbdbd; margin-top: 6px; }253 .products {254 margin-top: 20px;255 display: grid;256 grid-template-columns: repeat(4, 1fr);257 gap: 22px;258 }259 .product {260 background: #1b1b1b;261 border: 1px solid #2a2a2a;262 border-radius: 20px;263 padding: 14px;264 }265 .product .pic {266 width: 100%;267 height: 280px;268 background: #E0E0E0;269 border: 1px solid #BDBDBD;270 display: flex; align-items: center; justify-content: center;271 color: #757575; font-weight: 600;272 border-radius: 12px;273 }274 .price {275 font-size: 28px; color: #e0e0e0; margin-top: 12px;276 }277 278 /* Subtitles toast */279 .toast {280 position: absolute;281 bottom: 110px;282 left: 50%;283 transform: translateX(-50%);284 background: #f1f1f1;285 color: #111;286 padding: 22px 36px;287 border-radius: 24px;288 box-shadow: 0 8px 16px rgba(0,0,0,0.35);289 font-size: 30px;290 }291</style>292</head>293<body>294<div id="render-target">295 296 <!-- Video area -->297 <div class="video">298 <div class="img">[IMG: Singapore market video frame]</div>299 300 <!-- Status bar -->301 <div class="status">302 <div>9:55</div>303 <div class="icons">304 <!-- simple wifi -->305 <svg viewBox="0 0 24 24"><path d="M2 7c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 7zm4 4c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 4c1-1 3-1 4 0l-2 2-2-2z"></path></svg>306 <!-- battery -->307 <svg viewBox="0 0 24 24"><path d="M18 6h2v4h-2V6zM3 7h14a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2zm1 2v6h12V9H4z"></path></svg>308 </div>309 </div>310 311 <!-- top-right overlay icons -->312 <div class="overlay-icons">313 <div class="round">314 <!-- Cast icon -->315 <svg viewBox="0 0 24 24"><path d="M3 6h18v10h-8v2h10V4H1v4h2V6zm0 6v2c2 0 4 1 5 3h2c-2-3-5-5-7-5zm0-3v2c4 0 8 3 9 6h2c-2-6-7-8-11-8z"></path></svg>316 </div>317 <div class="round">318 <!-- CC icon -->319 <svg viewBox="0 0 24 24"><path d="M3 5h18v14H3V5zm3 4h4v2H8v2h2v2H6V9zm8 0h4v2h-2v2h2v2h-4V9z"></path></svg>320 </div>321 <div class="round">322 <!-- gear icon -->323 <svg viewBox="0 0 24 24"><path d="M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm9 4l-2 1a8 8 0 0 1-.6 1.5l1 2-2 2-2-1a8 8 0 0 1-1.5.6l-1 2h-3l-1-2a8 8 0 0 1-1.5-.6l-2 1-2-2 1-2A8 8 0 0 1 5 13l-2-1V9l2-1c.2-.5.4-1 .6-1.5l-1-2 2-2 2 1c.5-.2 1-.4 1.5-.6l1-2h3l1 2c.5.2 1 .4 1.5.6l2-1 2 2-1 2c.2.5.4 1 .6 1.5l2 1v3z"></path></svg>324 </div>325 <div class="round">326 <!-- close icon -->327 <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19" stroke="#fff" stroke-width="2" fill="none"></path></svg>328 </div>329 </div>330 331 <!-- mid controls -->332 <div class="mid-controls">333 <div class="circle">334 <!-- backward 10 -->335 <svg viewBox="0 0 24 24"><path d="M12 6l-6 6 6 6v-4h6v-4h-6V6z"></path></svg>336 </div>337 <div class="circle">338 <!-- pause -->339 <svg viewBox="0 0 24 24"><path d="M7 5h4v14H7V5zm6 0h4v14h-4V5z"></path></svg>340 </div>341 <div class="circle">342 <!-- forward 10 -->343 <svg viewBox="0 0 24 24"><path d="M12 6l6 6-6 6v-4H6v-4h6V6z"></path></svg>344 </div>345 </div>346 347 <!-- bottom info -->348 <div class="video-info">349 <div class="segment">350 <div>5:31 / 12:49</div>351 <div class="tag">6. Shopping</div>352 </div>353 <div class="fullscreen"></div>354 </div>355 356 <!-- progress -->357 <div class="progress">358 <div class="bar"></div>359 <div class="dot"></div>360 </div>361 </div>362 363 <!-- Content -->364 <div class="content">365 <div class="title">TOP 10 things to do in SINGAPORE | Travel Guide 4K</div>366 <div class="meta">1.8M views · 3y ago · #singapore #travelguide · ...more</div>367 368 <!-- Channel Row -->369 <div class="channel">370 <div class="left">371 <div class="avatar">HP</div>372 <div>373 <div class="name">Hungry Passport</div>374 <div class="subs">244K</div>375 </div>376 </div>377 <div class="subscribe">Subscribe</div>378 </div>379 380 <!-- Action chips -->381 <div class="chips">382 <div class="chip">383 <svg viewBox="0 0 24 24"><path d="M12 21l-8-9h5V3h6v9h5l-8 9z"></path></svg>384 15K385 </div>386 <div class="chip">387 <svg viewBox="0 0 24 24"><path d="M4 4h16v12H5l-1 4V4z"></path></svg>388 Comment389 </div>390 <div class="chip">391 <svg viewBox="0 0 24 24"><path d="M18 16v-5H9l3-3-1-1-5 5 5 5 1-1-3-3h9z"></path></svg>392 Share393 </div>394 <div class="chip">395 <svg viewBox="0 0 24 24"><path d="M12 4l8 8-8 8-2-2 6-6-6-6 2-2zM4 4h4v16H4z"></path></svg>396 Remix397 </div>398 <div class="chip">399 <svg viewBox="0 0 24 24"><path d="M5 20h14l-6-6-2 2-6 4zM5 4h14v6H5z"></path></svg>400 Download401 </div>402 </div>403 404 <!-- Comments -->405 <div class="comments">406 <div class="header">Comments 453</div>407 <div class="comment-card">408 <div class="comment-left">409 <div class="comment-avatar"></div>410 <div class="comment-text">411 Singapore is the country that I never get tired of visiting. Cleanest and most efficient country of the world...412 </div>413 </div>414 <div class="chev"></div>415 </div>416 </div>417 418 <!-- Shop -->419 <div class="shop">420 <div class="shop-title">Shop the Hungry Passport store</div>421 <div class="shop-sub">From Spring</div>422 423 <div class="products">424 <div class="product">425 <div class="pic">[IMG: Blue Hoodie - Los Angeles]</div>426 <div class="price">₹3,842.92</div>427 </div>428 <div class="product">429 <div class="pic">[IMG: Navy T-shirt - Los Angeles]</div>430 <div class="price">₹2,046.77</div>431 </div>432 <div class="product">433 <div class="pic">[IMG: Black T-shirt - Los Angeles]</div>434 <div class="price">₹2,210.58</div>435 </div>436 <div class="product">437 <div class="pic">[IMG: White Hoodie - Los Angeles]</div>438 <div class="price">₹2,500.00</div>439 </div>440 </div>441 </div>442 </div>443 444 <!-- Subtitle toast -->445 <div class="toast">Subtitles/CC turned on (English (United States))</div>446 447</div>448</body>449</html>