GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>YouTube Dark UI Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #121212;15 color: #fff;16 font-family: Arial, Helvetica, sans-serif;17 }18 19 /* Status bar */20 .status-bar {21 height: 80px;22 padding: 18px 28px;23 color: #eaeaea;24 font-size: 30px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 }29 .status-right {30 display: flex;31 align-items: center;32 gap: 22px;33 }34 .tiny-dot { width: 8px; height: 8px; background: #9e9e9e; border-radius: 50%; display: inline-block; }35 36 /* Top app bar */37 .topbar {38 height: 110px;39 padding: 20px 28px;40 display: flex;41 align-items: center;42 justify-content: space-between;43 }44 .logo-wrap {45 display: flex;46 align-items: center;47 gap: 20px;48 }49 .yt-logo {50 width: 66px;51 height: 46px;52 background: #ff0000;53 border-radius: 10px;54 position: relative;55 }56 .yt-logo:before {57 content: "";58 position: absolute;59 left: 22px; top: 11px;60 border-left: 18px solid #fff;61 border-top: 12px solid transparent;62 border-bottom: 12px solid transparent;63 }64 .yt-title { font-size: 40px; font-weight: 700; letter-spacing: 0.5px; }65 66 .top-icons { display: flex; align-items: center; gap: 28px; }67 .icon-btn {68 width: 46px; height: 46px;69 display: inline-flex; align-items: center; justify-content: center;70 border-radius: 10px;71 }72 .badge {73 position: absolute;74 right: -8px; top: -6px;75 background: #ff3b30;76 color: #fff; font-size: 22px; line-height: 22px;77 padding: 2px 8px; border-radius: 16px;78 }79 .avatar {80 width: 56px; height: 56px; border-radius: 50%;81 background: #d76aa8; display: flex; align-items: center; justify-content: center;82 font-weight: 700;83 }84 85 /* Chip / category bar */86 .chip-bar {87 padding: 12px 18px 18px 18px;88 display: flex;89 gap: 18px;90 }91 .chip {92 padding: 16px 26px;93 background: #2b2b2b;94 color: #e0e0e0;95 font-size: 28px;96 border-radius: 30px;97 }98 .chip.active {99 background: #ffffff;100 color: #000;101 font-weight: 700;102 }103 104 /* Content area */105 .video-thumb {106 width: 100%;107 height: 640px;108 background: #2a2a2a;109 position: relative;110 }111 .video-thumb .img-label,112 .video-thumb2 .img-label {113 position: absolute;114 left: 50%; top: 50%;115 transform: translate(-50%, -50%);116 color: #bdbdbd;117 font-size: 28px;118 }119 .external-icon {120 position: absolute; right: 26px; bottom: 26px;121 width: 70px; height: 70px;122 border: 2px solid #cfcfcf; border-radius: 10px;123 display: flex; align-items: center; justify-content: center;124 color: #cfcfcf; font-size: 28px;125 }126 127 /* Ad card */128 .ad-card {129 padding: 24px 28px;130 }131 .ad-top {132 display: flex; gap: 22px; align-items: flex-start;133 }134 .ad-avatar {135 width: 74px; height: 74px; border-radius: 50%;136 background: #E0E0E0; border: 1px solid #BDBDBD;137 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;138 }139 .ad-text h3 {140 margin: 0;141 font-size: 34px; line-height: 42px; font-weight: 700;142 }143 .ad-text p {144 margin: 8px 0 10px;145 color: #9e9e9e; font-size: 28px;146 }147 .ad-meta {148 color: #a3a3a3; font-size: 26px;149 }150 .ad-actions {151 margin-top: 26px;152 display: flex; gap: 28px;153 }154 .btn-outline {155 flex: 1;156 height: 98px;157 border-radius: 50px;158 border: 2px solid #3a3a3a;159 background: transparent;160 color: #4ea3ff;161 font-size: 34px; font-weight: 700;162 display: flex; align-items: center; justify-content: center;163 }164 .btn-primary {165 width: 520px;166 height: 98px;167 border-radius: 50px;168 background: #73B2FF;169 color: #000;170 font-size: 34px; font-weight: 700;171 display: flex; align-items: center; justify-content: center;172 }173 174 /* Second video section */175 .video-thumb2 {176 width: 100%;177 height: 760px;178 background: #2a2a2a;179 position: relative;180 }181 .duration {182 position: absolute; right: 22px; bottom: 22px;183 background: rgba(0,0,0,0.75);184 padding: 8px 12px; border-radius: 8px;185 font-size: 26px;186 }187 .video-meta {188 padding: 16px 28px 0 28px;189 display: flex; gap: 18px;190 align-items: flex-start;191 }192 .channel-avatar {193 width: 70px; height: 70px; border-radius: 50%;194 background: #E0E0E0; border: 1px solid #BDBDBD;195 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;196 }197 .meta-text h4 {198 margin: 0;199 font-size: 32px; line-height: 40px; font-weight: 700;200 }201 .meta-text .sub {202 margin-top: 6px;203 color: #9e9e9e; font-size: 26px;204 }205 206 /* Bottom navigation */207 .bottom-nav {208 position: absolute; bottom: 0; left: 0; width: 100%;209 height: 180px; background: #181818; border-top: 1px solid #2b2b2b;210 display: flex; align-items: center; justify-content: space-around;211 padding: 12px 0;212 }213 .nav-item {214 display: flex; flex-direction: column; align-items: center; gap: 8px;215 color: #e0e0e0; font-size: 24px;216 }217 .nav-item.active { color: #ffffff; }218 219 /* Gesture bar */220 .gesture {221 position: absolute; bottom: 192px; left: 50%;222 transform: translateX(-50%);223 width: 320px; height: 10px; background: #ffffff; border-radius: 8px;224 opacity: 0.9;225 }226</style>227</head>228<body>229<div id="render-target">230 231 <!-- Status bar -->232 <div class="status-bar">233 <div>5:22</div>234 <div class="status-right">235 <!-- simple placeholders for status icons -->236 <svg width="24" height="24" style="opacity:.85">237 <circle cx="12" cy="12" r="10" fill="#fff"></circle>238 </svg>239 <svg width="24" height="24" style="opacity:.85">240 <circle cx="12" cy="12" r="10" fill="#fff"></circle>241 </svg>242 <svg width="24" height="24" style="opacity:.85">243 <circle cx="12" cy="12" r="10" fill="#fff"></circle>244 </svg>245 <div class="tiny-dot"></div>246 <svg width="28" height="24">247 <rect x="2" y="4" width="18" height="14" rx="2" fill="#fff"></rect>248 <rect x="22" y="8" width="4" height="6" fill="#fff"></rect>249 </svg>250 </div>251 </div>252 253 <!-- Top bar with YouTube logo and right-side icons -->254 <div class="topbar">255 <div class="logo-wrap">256 <div class="yt-logo"></div>257 <div class="yt-title">YouTube</div>258 </div>259 <div class="top-icons">260 <!-- Cast icon -->261 <div class="icon-btn" title="Cast">262 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">263 <rect x="3" y="5" width="18" height="12" rx="2" stroke="#eaeaea" stroke-width="2"></rect>264 <path d="M3 17c2 0 4 2 4 4" stroke="#eaeaea" stroke-width="2" fill="none"></path>265 <path d="M3 14c3 0 7 4 7 7" stroke="#eaeaea" stroke-width="2" fill="none"></path>266 </svg>267 </div>268 <!-- Bell icon with badge -->269 <div class="icon-btn" style="position:relative" title="Notifications">270 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">271 <path d="M12 3c-2 0-4 2-4 4v3c0 3-2 4-2 4h12s-2-1-2-4V7c0-2-2-4-4-4z" stroke="#eaeaea" stroke-width="2"></path>272 <circle cx="12" cy="20" r="2" fill="#eaeaea"></circle>273 </svg>274 <div class="badge">9+</div>275 </div>276 <!-- Search -->277 <div class="icon-btn" title="Search">278 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">279 <circle cx="10" cy="10" r="6" stroke="#eaeaea" stroke-width="2"></circle>280 <path d="M15 15l6 6" stroke="#eaeaea" stroke-width="2"></path>281 </svg>282 </div>283 <!-- Avatar -->284 <div class="avatar">C</div>285 </div>286 </div>287 288 <!-- Chip bar -->289 <div class="chip-bar">290 <div class="chip">291 <svg width="28" height="28" viewBox="0 0 24 24" style="margin-right:8px; vertical-align:middle">292 <circle cx="12" cy="12" r="10" stroke="#bdbdbd" stroke-width="2" fill="none"></circle>293 <path d="M12 6l3 6-3 6-3-6 3-6z" fill="#bdbdbd"></path>294 </svg>295 Explore296 </div>297 <div class="chip active">All</div>298 <div class="chip">Music</div>299 <div class="chip">Trailers</div>300 <div class="chip">Live</div>301 <div class="chip">Arijit Singh</div>302 </div>303 304 <!-- First large video placeholder -->305 <div class="video-thumb">306 <div class="img-label">[IMG: Video/Ad Banner]</div>307 <div class="external-icon">↗</div>308 </div>309 310 <!-- Ad card content -->311 <div class="ad-card">312 <div class="ad-top">313 <div class="ad-avatar">[IMG]</div>314 <div class="ad-text">315 <h3>Look Like A Star Everyday By Choosing From The Widest Range Of Products, Only On Myntra.</h3>316 <p>Extraordinary Styles Everyday On Myntra</p>317 <div class="ad-meta">Ad · Myntra</div>318 </div>319 <div style="margin-left:auto; padding-top:6px;">320 <svg width="32" height="32" viewBox="0 0 24 24" fill="none">321 <circle cx="12" cy="5" r="2" fill="#cfcfcf"></circle>322 <circle cx="12" cy="12" r="2" fill="#cfcfcf"></circle>323 <circle cx="12" cy="19" r="2" fill="#cfcfcf"></circle>324 </svg>325 </div>326 </div>327 <div class="ad-actions">328 <div class="btn-outline">Watch</div>329 <div class="btn-primary">Shop now</div>330 </div>331 </div>332 333 <!-- Second large video placeholder -->334 <div class="video-thumb2">335 <div class="img-label">[IMG: Video Thumbnail]</div>336 <div class="duration">6:28</div>337 </div>338 339 <!-- Video meta -->340 <div class="video-meta">341 <div class="channel-avatar">[IMG]</div>342 <div class="meta-text">343 <h4>Arijit Singh - Rooh Jaga Doon | Shloke Lal | Official Video | @Official_ArijitSingh | Oriyon M...</h4>344 <div class="sub">Arijit Singh · 1.3M views · 9 days ago</div>345 </div>346 <div style="margin-left:auto; padding-top:6px;">347 <svg width="32" height="32" viewBox="0 0 24 24" fill="none">348 <circle cx="12" cy="5" r="2" fill="#cfcfcf"></circle>349 <circle cx="12" cy="12" r="2" fill="#cfcfcf"></circle>350 <circle cx="12" cy="19" r="2" fill="#cfcfcf"></circle>351 </svg>352 </div>353 </div>354 355 <!-- Gesture bar -->356 <div class="gesture"></div>357 358 <!-- Bottom navigation -->359 <div class="bottom-nav">360 <div class="nav-item active">361 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">362 <path d="M3 11l9-8 9 8v9a2 2 0 0 1-2 2h-14a2 2 0 0 1-2-2z" stroke="#fff" stroke-width="2" fill="none"></path>363 <rect x="9" y="14" width="6" height="6" fill="#fff"></rect>364 </svg>365 <div>Home</div>366 </div>367 <div class="nav-item">368 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">369 <path d="M6 4l9 3-6 13-3-16z" stroke="#e0e0e0" stroke-width="2" fill="none"></path>370 </svg>371 <div>Shorts</div>372 </div>373 <div class="nav-item">374 <svg width="70" height="70" viewBox="0 0 24 24" fill="none">375 <circle cx="12" cy="12" r="10" stroke="#e0e0e0" stroke-width="2"></circle>376 <path d="M12 7v10M7 12h10" stroke="#e0e0e0" stroke-width="2"></path>377 </svg>378 <div>+</div>379 </div>380 <div class="nav-item">381 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">382 <rect x="3" y="6" width="18" height="12" rx="2" stroke="#e0e0e0" stroke-width="2"></rect>383 <path d="M10 9l5 3-5 3V9z" fill="#e0e0e0"></path>384 </svg>385 <div>Subscriptions</div>386 </div>387 <div class="nav-item">388 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">389 <rect x="5" y="5" width="14" height="14" stroke="#e0e0e0" stroke-width="2"></rect>390 <path d="M5 9h14M5 13h14" stroke="#e0e0e0" stroke-width="2"></path>391 </svg>392 <div>Library</div>393 </div>394 </div>395 396</div>397</body>398</html>