GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>YouTube Style Mobile UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #000000;14 color: #FFFFFF;15 }16 17 /* Status bar */18 .status-bar {19 height: 80px;20 padding: 18px 28px;21 box-sizing: border-box;22 font-size: 36px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #fff;27 }28 .status-icons { display: flex; gap: 24px; align-items: center; }29 .tiny-dot { width: 10px; height: 10px; background:#fff; border-radius: 50%; display:inline-block; }30 31 /* Close (X) */32 .close-btn {33 position: absolute;34 top: 32px;35 right: 32px;36 width: 60px;37 height: 60px;38 display: flex;39 align-items: center;40 justify-content: center;41 opacity: 0.9;42 }43 .close-btn svg { width: 36px; height: 36px; fill: none; stroke: #fff; stroke-width: 6; }44 45 /* Up next section */46 .up-next {47 padding: 10px 28px 0 28px;48 font-size: 42px;49 font-weight: 700;50 }51 .upnext-card {52 margin: 24px 28px 0 28px;53 padding: 18px 0;54 display: flex;55 gap: 28px;56 align-items: center;57 }58 .thumb {59 width: 330px;60 height: 220px;61 background:#E0E0E0;62 border:1px solid #BDBDBD;63 color:#757575;64 display:flex;65 justify-content:center;66 align-items:center;67 position: relative;68 font-size: 28px;69 text-align: center;70 }71 .duration {72 position: absolute;73 bottom: 10px;74 right: 10px;75 background: rgba(0,0,0,0.75);76 padding: 8px 14px;77 border-radius: 8px;78 font-size: 28px;79 }80 .upnext-info {81 flex: 1;82 min-width: 0;83 }84 .upnext-title {85 font-size: 36px;86 line-height: 1.25;87 font-weight: 700;88 margin-bottom: 10px;89 }90 .upnext-channel {91 font-size: 28px;92 color: #B0B0B0;93 }94 .action-row {95 margin: 12px 28px 0 28px;96 display: flex;97 gap: 28px;98 }99 .pill {100 flex: 1;101 height: 110px;102 border-radius: 55px;103 display: flex;104 align-items: center;105 justify-content: center;106 font-size: 36px;107 font-weight: 700;108 }109 .pill.cancel { background: #1F1F1F; color: #fff; }110 .pill.play { background: #FFFFFF; color: #000; }111 112 /* Divider spacer */113 .spacer-hr {114 height: 2px;115 background: #1a1a1a;116 margin: 26px 0;117 }118 119 /* Main video section */120 .video-title {121 padding: 0 28px;122 font-size: 48px;123 font-weight: 800;124 line-height: 1.25;125 }126 .video-meta {127 padding: 16px 28px;128 font-size: 30px;129 color: #B0B0B0;130 }131 .channel-row {132 padding: 20px 28px;133 display: flex;134 align-items: center;135 justify-content: space-between;136 }137 .channel-left {138 display: flex;139 align-items: center;140 gap: 18px;141 }142 .avatar {143 width: 72px;144 height: 72px;145 border-radius: 50%;146 background: #E0E0E0;147 border:1px solid #BDBDBD;148 color:#757575;149 display:flex;150 align-items:center;151 justify-content:center;152 font-weight: bold;153 }154 .channel-name { font-size: 34px; font-weight: 700; }155 .channel-sub { font-size: 28px; color:#B0B0B0; }156 .subscribe-btn {157 background:#FFFFFF;158 color:#000;159 padding: 22px 32px;160 border-radius: 50px;161 font-size: 32px;162 font-weight: 700;163 }164 165 /* Action buttons */166 .tools {167 padding: 10px 20px 24px 20px;168 display: flex;169 gap: 22px;170 justify-content: space-around;171 }172 .tool {173 background:#131313;174 border-radius: 28px;175 padding: 18px 26px;176 display: flex;177 align-items: center;178 gap: 16px;179 color:#fff;180 font-size: 30px;181 }182 .tool svg { width: 36px; height: 36px; fill:#fff; }183 184 /* Comments */185 .comments {186 margin: 20px 28px;187 background:#121212;188 border-radius: 24px;189 padding: 22px;190 }191 .comments-title {192 font-size: 36px;193 font-weight: 800;194 }195 .comment-item {196 margin-top: 18px;197 display: flex;198 align-items: center;199 gap: 16px;200 font-size: 32px;201 }202 .comment-avatar {203 width: 56px; height: 56px; border-radius: 50%;204 background:#E0E0E0; border:1px solid #BDBDBD; color:#333;205 display:flex; align-items:center; justify-content:center; font-weight:bold;206 }207 208 /* Ad block */209 .ad {210 margin-top: 20px;211 }212 .ad-image {213 width: 100%;214 height: 900px;215 background:#E0E0E0;216 border-top:1px solid #BDBDBD;217 border-bottom:1px solid #BDBDBD;218 color:#757575;219 display:flex; align-items:center; justify-content:center;220 font-size: 36px;221 }222 .ad-bar {223 background:#1F2430;224 padding: 24px 28px;225 display:flex;226 align-items:center;227 justify-content: space-between;228 color:#9EC0FF;229 font-size: 34px;230 }231 .ad-meta {232 padding: 12px 28px 0 28px;233 color:#fff;234 font-size: 36px;235 font-weight: 800;236 }237 .ad-desc {238 padding: 8px 28px 32px 28px;239 font-size: 30px;240 color:#B0B0B0;241 display:flex; align-items:center; justify-content: space-between;242 }243 .external-btn {244 width: 56px; height: 56px; border-radius: 10px; background:#243044;245 display:flex; align-items:center; justify-content:center;246 }247 .external-btn svg { width: 30px; height: 30px; fill:#9EC0FF; }248 .dots { width: 40px; height: 40px; display:flex; align-items:center; justify-content:center; }249 .dots span { width:6px; height:6px; background:#777; border-radius:50%; display:inline-block; margin:0 2px; }250</style>251</head>252<body>253<div id="render-target">254 255 <!-- Status bar -->256 <div class="status-bar">257 <div>9:50</div>258 <div class="status-icons">259 <span class="tiny-dot"></span>260 <span class="tiny-dot"></span>261 <span class="tiny-dot"></span>262 <span class="tiny-dot"></span>263 <!-- wifi -->264 <svg width="36" height="36" viewBox="0 0 24 24">265 <path d="M12 18.5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5-1.5-.7-1.5-1.5.7-1.5 1.5-1.5zM3 9.5c5.5-4.9 12.5-4.9 18 0l-1.6 1.7C15 7.1 9 7.1 4.6 11.2L3 9.5zM6.3 12.8c3.9-3.5 7.5-3.5 11.4 0l-1.6 1.7c-2.9-2.6-5.3-2.6-8.1 0l-1.7-1.7z" fill="#fff"/>266 </svg>267 <!-- battery -->268 <svg width="36" height="36" viewBox="0 0 24 24">269 <rect x="2" y="6" width="16" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"></rect>270 <rect x="4" y="8" width="12" height="8" fill="#fff"></rect>271 <rect x="20" y="10" width="2" height="4" fill="#fff"></rect>272 </svg>273 </div>274 </div>275 276 <!-- Close icon -->277 <div class="close-btn">278 <svg viewBox="0 0 24 24">279 <path d="M5 5 L19 19 M19 5 L5 19"></path>280 </svg>281 </div>282 283 <!-- Up next section -->284 <div class="up-next">Up next</div>285 <div class="upnext-card">286 <div class="thumb">287 [IMG: Origami Snails Thumbnail]288 <div class="duration">8:07</div>289 </div>290 <div class="upnext-info">291 <div class="upnext-title">Easy Origami Snail || Paper Moving toy Pop It</div>292 <div class="upnext-channel">Gary Easy Origami</div>293 </div>294 </div>295 <div class="action-row">296 <div class="pill cancel">Cancel</div>297 <div class="pill play">Play now</div>298 </div>299 300 <div class="spacer-hr"></div>301 302 <!-- Main video details -->303 <div class="video-title">Easy Origami ELEPHANT || Cute Origami paper animals</div>304 <div class="video-meta">384K views • 2y ago • #ELEPHANT #Origami #Easy • …more</div>305 306 <div class="channel-row">307 <div class="channel-left">308 <div class="avatar">G</div>309 <div>310 <div class="channel-name">Gary Easy Origami</div>311 <div class="channel-sub">203K</div>312 </div>313 </div>314 <div class="subscribe-btn">Subscribe</div>315 </div>316 317 <!-- Tool buttons -->318 <div class="tools">319 <div class="tool">320 <svg viewBox="0 0 24 24">321 <path d="M2 13h4v9H2zM6 13l7-9c1-.8 3-.4 3 1v6h4c1.1 0 2 .9 2 2l-3 7H10V9L6 13z"></path>322 </svg>323 <span>4.3K</span>324 </div>325 <div class="tool">326 <svg viewBox="0 0 24 24">327 <path d="M4 4h16v12H7l-3 3z"></path>328 </svg>329 <span>Comment</span>330 </div>331 <div class="tool">332 <svg viewBox="0 0 24 24">333 <path d="M12 5l7 7-7 7v-4H5v-6h7V5z"></path>334 </svg>335 <span>Share</span>336 </div>337 <div class="tool">338 <svg viewBox="0 0 24 24">339 <circle cx="8" cy="8" r="4"></circle>340 <circle cx="16" cy="16" r="4"></circle>341 <path d="M11 11l2 2" stroke="#fff" stroke-width="2"></path>342 </svg>343 <span>Remix</span>344 </div>345 <div class="tool">346 <svg viewBox="0 0 24 24">347 <path d="M12 3v10m0 0l-4-4m4 4l4-4" stroke="#fff" stroke-width="2" fill="none"></path>348 <rect x="4" y="17" width="16" height="4" fill="#fff"></rect>349 </svg>350 <span>Download</span>351 </div>352 </div>353 354 <!-- Comments -->355 <div class="comments">356 <div class="comments-title">Comments 134</div>357 <div class="comment-item">358 <div class="comment-avatar">P</div>359 <div>Toooo hard to make but it’s so nice 👏👏👏😺</div>360 </div>361 </div>362 363 <!-- Advertisement -->364 <div class="ad">365 <div class="ad-image">[IMG: Booking.com Interior Room Photo]</div>366 <div class="ad-bar">367 <div>Open app</div>368 <div class="external-btn">369 <svg viewBox="0 0 24 24">370 <path d="M10 4h10v10h-2V8.4l-9.3 9.3-1.4-1.4L16.6 7H10V4z"></path>371 </svg>372 </div>373 </div>374 <div class="ad-meta">Booking.com: Hotels & Flights</div>375 <div class="ad-desc">376 <span>तुरंत कन्फर्मेशन पाए</span>377 <div class="dots"><span></span><span></span><span></span></div>378 </div>379 </div>380 381</div>382</body>383</html>