GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>YouTube Library Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin:0; padding:0; background:transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#121212; color:#fff;12 }13 .status-bar {14 height:80px; padding:0 32px; display:flex; align-items:center; justify-content:space-between;15 color:#fff; font-size:34px;16 }17 .status-icons { display:flex; gap:28px; align-items:center; }18 .icon { width:44px; height:44px; fill:#fff; opacity:0.9; }19 .header {20 height:120px; padding:0 32px; display:flex; align-items:center; justify-content:space-between;21 }22 .yt-brand { display:flex; align-items:center; gap:22px; font-size:48px; font-weight:700; }23 .yt-logo {24 width:66px; height:46px; border-radius:8px; background:#ff0000; position:relative;25 }26 .yt-logo:before {27 content:""; position:absolute; left:22px; top:8px; width:26px; height:28px; border-left:22px solid #fff;28 border-top:14px solid transparent; border-bottom:14px solid transparent;29 }30 .header-actions { display:flex; align-items:center; gap:34px; }31 .avatar {32 width:64px; height:64px; border-radius:50%; background:#2a2a2a; display:flex; align-items:center; justify-content:center;33 font-weight:700; color:#cfcfcf;34 }35 36 .section { padding:24px 32px 0; }37 .section-title {38 display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;39 }40 .title-left { display:flex; align-items:center; gap:18px; font-size:44px; font-weight:600; }41 .title-icon .icon { width:48px; height:48px; opacity:0.8; }42 .view-all { color:#3ea6ff; font-size:40px; }43 .h-scroller { display:flex; gap:24px; }44 .video-card { width:328px; }45 .thumb {46 width:328px; height:184px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:18px;47 display:flex; align-items:center; justify-content:center; color:#757575; font-size:30px; position:relative;48 overflow:hidden;49 }50 .duration {51 position:absolute; right:12px; bottom:12px; background:rgba(0,0,0,0.85); color:#fff; padding:6px 12px;52 border-radius:12px; font-size:30px; font-weight:600;53 }54 .video-meta { margin-top:12px; }55 .video-title { font-size:36px; line-height:1.2; margin-bottom:6px; }56 .video-channel { font-size:32px; color:#b0b0b0; }57 .meta-row { display:flex; justify-content:space-between; align-items:flex-start; }58 .menu-dots { width:20px; height:60px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; margin-left:12px; }59 .menu-dots span { width:6px; height:6px; background:#bfbfbf; border-radius:50%; display:block; }60 61 .separator { height:2px; background:#242424; margin:28px 0; }62 63 /* Playlists */64 .playlist-row { display:flex; gap:24px; }65 .playlist-card { width:328px; }66 .pl-thumb {67 width:328px; height:184px; background:#1f1f1f; border:1px solid #2e2e2e; border-radius:18px; position:relative;68 display:flex; align-items:center; justify-content:center; color:#bdbdbd; font-size:32px;69 }70 .pl-count {71 position:absolute; left:12px; bottom:12px; background:#0d0d0d; border:1px solid #333; padding:6px 12px;72 border-radius:12px; font-size:28px; color:#cfcfcf;73 }74 .playlist-name { margin-top:12px; font-size:36px; }75 .playlist-sub { font-size:30px; color:#9e9e9e; }76 .playlist-meta { display:flex; justify-content:space-between; align-items:flex-start; }77 78 /* Menu list */79 .menu-list { margin-top:12px; }80 .menu-item {81 height:120px; display:flex; align-items:center; gap:28px; padding:0 32px; font-size:40px;82 }83 .menu-icon .icon { width:48px; height:48px; opacity:0.9; }84 .menu-sep { height:2px; background:#1e1e1e; }85 86 /* Ad strip */87 .ad-strip {88 margin-top:18px; padding:20px 32px; display:flex; align-items:center; justify-content:space-between;89 }90 .ad-left { display:flex; align-items:center; gap:22px; }91 .ad-thumb {92 width:260px; height:146px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:12px;93 display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px;94 }95 .ad-text { font-size:36px; }96 .ad-sub { font-size:30px; color:#b0b0b0; margin-top:6px; }97 .ad-actions { display:flex; align-items:center; gap:28px; }98 .action-btn {99 width:60px; height:60px; border-radius:50%; background:#1f1f1f; border:1px solid #2e2e2e;100 display:flex; align-items:center; justify-content:center;101 }102 103 /* Bottom nav */104 .bottom-nav {105 position:absolute; left:0; right:0; bottom:100px; height:160px; background:#0e0e0e;106 display:flex; align-items:center; justify-content:space-around; border-top:1px solid #242424;107 }108 .nav-item { display:flex; flex-direction:column; align-items:center; gap:12px; color:#cfcfcf; font-size:28px; }109 .nav-item .icon { width:58px; height:58px; fill:#cfcfcf; }110 .nav-item.active { color:#fff; }111 .nav-item.active .icon { fill:#fff; }112 .plus-btn {113 width:96px; height:96px; border-radius:50%; background:#2a2a2a; display:flex; align-items:center; justify-content:center;114 border:1px solid #3a3a3a;115 }116 .notif-dot {117 position:absolute; top:22px; right:180px; width:16px; height:16px; background:#ff0000; border-radius:50%;118 }119 120 /* Home indicator */121 .home-indicator {122 position:absolute; bottom:24px; left:50%; transform:translateX(-50%);123 width:360px; height:12px; background:#e6e6e6; border-radius:8px; opacity:0.7;124 }125</style>126</head>127<body>128<div id="render-target">129 130 <!-- Status bar -->131 <div class="status-bar">132 <div>11:11</div>133 <div class="status-icons">134 <!-- small message icon -->135 <svg class="icon" viewBox="0 0 24 24"><path d="M3 4h18v12H8l-5 4V4z"/></svg>136 <!-- wifi -->137 <svg class="icon" viewBox="0 0 24 24"><path d="M12 20l3-3-3-3-3 3 3 3zm-9-9 9-5 9 5M3 9l9-5 9 5"/></svg>138 <!-- battery -->139 <svg class="icon" viewBox="0 0 24 24"><path d="M20 7h2v10h-2v2H4V5h16v2z"/></svg>140 </div>141 </div>142 143 <!-- Header with brand and actions -->144 <div class="header">145 <div class="yt-brand">146 <div class="yt-logo"></div>147 <div>YouTube</div>148 </div>149 <div class="header-actions">150 <!-- Cast -->151 <svg class="icon" viewBox="0 0 24 24"><path d="M3 5h18v12H13v2h8V3H3v4zm0 6v2c2.8 0 5 2.2 5 5h2c0-3.9-3.1-7-7-7zm0 4v2c1.7 0 3 1.3 3 3h2c0-2.8-2.2-5-5-5zm0 4h2c0-.6-.4-1-1-1H3v1z"/></svg>152 <!-- Bell -->153 <svg class="icon" viewBox="0 0 24 24"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6V11c0-3.3-2.1-6-6-6S6 7.7 6 11v5L4 18v2h16v-2l-2-2z"/></svg>154 <!-- Search -->155 <svg class="icon" viewBox="0 0 24 24"><path d="M15.5 14h.8l4.7 4.7-1.5 1.5L14.8 15.5v-.8l-.3-.3A6.5 6.5 0 1 1 15.5 14zm-6 0a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9z"/></svg>156 <div class="avatar">C</div>157 </div>158 </div>159 160 <!-- History Section -->161 <div class="section">162 <div class="section-title">163 <div class="title-left">164 <div class="title-icon"><svg class="icon" viewBox="0 0 24 24"><path d="M12 8v5h5v-2h-3V8h-2zm0-5a9 9 0 1 0 9 9h-2a7 7 0 1 1-7-7V3z"/></svg></div>165 <div>History</div>166 </div>167 <div class="view-all">View all</div>168 </div>169 170 <div class="h-scroller">171 <!-- Card 1 -->172 <div class="video-card">173 <div class="thumb">174 [IMG: Rome vlog thumbnail]175 <div class="duration">16:50</div>176 </div>177 <div class="video-meta">178 <div class="meta-row">179 <div class="video-title">What to do in Rome for 3 days | Italy Travel</div>180 <div class="menu-dots"><span></span><span></span><span></span></div>181 </div>182 <div class="video-channel">Hannah JY Moon</div>183 </div>184 </div>185 186 <!-- Card 2 -->187 <div class="video-card">188 <div class="thumb">189 [IMG: Podcast episode thumbnail]190 <div class="duration">58:37</div>191 </div>192 <div class="video-meta">193 <div class="meta-row">194 <div class="video-title">This American Life: The Call</div>195 <div class="menu-dots"><span></span><span></span><span></span></div>196 </div>197 <div class="video-channel">This American Life</div>198 </div>199 </div>200 201 <!-- Card 3 -->202 <div class="video-card">203 <div class="thumb">204 [IMG: Italy travel vlog thumbnail]205 <div class="duration">22:17</div>206 </div>207 <div class="video-meta">208 <div class="meta-row">209 <div class="video-title">Rome travel vlog: arriving in Italy</div>210 <div class="menu-dots"><span></span><span></span><span></span></div>211 </div>212 <div class="video-channel">alia zaita</div>213 </div>214 </div>215 </div>216 </div>217 218 <div class="separator"></div>219 220 <!-- Playlists Section -->221 <div class="section">222 <div class="section-title">223 <div class="title-left">224 <div class="title-icon"><svg class="icon" viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm0 6h12v2H3v-2zm0 6h10v2H3v-2z"/></svg></div>225 <div>Playlists</div>226 </div>227 <div class="view-all">View all</div>228 </div>229 230 <div class="playlist-row">231 <div class="playlist-card">232 <div class="pl-thumb">233 [IMG: Watch later playlist]234 <div class="pl-count">0</div>235 </div>236 <div class="playlist-meta">237 <div>238 <div class="playlist-name">Watch later</div>239 <div class="playlist-sub">Private</div>240 </div>241 <div class="menu-dots"><span></span><span></span><span></span></div>242 </div>243 </div>244 245 <div class="playlist-card">246 <div class="pl-thumb">247 [IMG: Music playlist]248 <div class="pl-count">0</div>249 </div>250 <div class="playlist-meta">251 <div>252 <div class="playlist-name">My Music Collection</div>253 </div>254 <div class="menu-dots"><span></span><span></span><span></span></div>255 </div>256 </div>257 258 <div class="playlist-card">259 <div class="pl-thumb">260 [IMG: Liked videos playlist]261 <div class="pl-count">27</div>262 </div>263 <div class="playlist-meta">264 <div>265 <div class="playlist-name">Liked videos</div>266 <div class="playlist-sub">Private</div>267 </div>268 <div class="menu-dots"><span></span><span></span><span></span></div>269 </div>270 </div>271 </div>272 </div>273 274 <div class="separator"></div>275 276 <!-- Menu List -->277 <div class="menu-list">278 <div class="menu-item">279 <div class="menu-icon"><svg class="icon" viewBox="0 0 24 24"><path d="M4 5h16v14H4V5zm6 2v10l8-5-8-5z"/></svg></div>280 <div>Your videos</div>281 </div>282 <div class="menu-sep"></div>283 <div class="menu-item">284 <div class="menu-icon"><svg class="icon" viewBox="0 0 24 24"><path d="M12 3v10l4-4h-3V3h-2zm-8 12h16v6H4v-6z"/></svg></div>285 <div>Downloads</div>286 </div>287 <div class="menu-sep"></div>288 <div class="menu-item">289 <div class="menu-icon"><svg class="icon" viewBox="0 0 24 24"><path d="M3 5h18v14H3V5zm3 2v10h12V7H6zm2 2h4v3H8V9zm6 0h2v2h-2V9z"/></svg></div>290 <div>Your movies</div>291 </div>292 </div>293 294 <div class="separator"></div>295 296 <!-- Ad strip -->297 <div class="ad-strip">298 <div class="ad-left">299 <div class="ad-thumb">[IMG: Ad thumbnail]</div>300 <div>301 <div class="ad-text">Your video will play after this ad</div>302 <div class="ad-sub">Sponsored</div>303 </div>304 </div>305 <div class="ad-actions">306 <div class="action-btn">307 <svg class="icon" viewBox="0 0 24 24"><path d="M8 5v14l11-7L8 5z"/></svg>308 </div>309 <div class="action-btn">310 <svg class="icon" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6 6 18"/></svg>311 </div>312 </div>313 </div>314 315 <!-- Bottom Navigation -->316 <div class="bottom-nav">317 <div class="nav-item active">318 <svg class="icon" viewBox="0 0 24 24"><path d="M12 3 3 11h3v9h6v-6h4v6h5v-9h3L12 3z"/></svg>319 <div>Home</div>320 </div>321 <div class="nav-item">322 <svg class="icon" viewBox="0 0 24 24"><path d="M7 4l10 2-2 7 2 7-10-2 2-7-2-7z"/></svg>323 <div>Shorts</div>324 </div>325 <div class="nav-item">326 <div class="plus-btn">327 <svg class="icon" viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z"/></svg>328 </div>329 <div>Create</div>330 </div>331 <div class="nav-item">332 <svg class="icon" viewBox="0 0 24 24"><path d="M4 5h16v12H4V5zm6 2v8l6-4-6-4z"/></svg>333 <div>Subscriptions</div>334 </div>335 <div class="nav-item">336 <svg class="icon" viewBox="0 0 24 24"><path d="M3 5h18v14H3V5zm3 2v10h12V7H6zm2 2h8v6H8V9z"/></svg>337 <div>Library</div>338 </div>339 <div class="notif-dot"></div>340 </div>341 342 <!-- Home indicator -->343 <div class="home-indicator"></div>344</div>345</body>346</html>