GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>YouTube Library Mock</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#121212; color:#fff;11 }12 13 /* Status bar */14 .status-bar {15 height:90px; padding:0 40px;16 display:flex; align-items:center; justify-content:space-between;17 font-size:34px; color:#e0e0e0;18 }19 .status-icons { display:flex; align-items:center; gap:26px; }20 .yt-header {21 height:110px; padding:0 34px;22 display:flex; align-items:center; justify-content:space-between;23 }24 .logo {25 display:flex; align-items:center; gap:18px; font-weight:bold; font-size:42px;26 }27 .logo-badge {28 width:54px; height:36px; background:#e53935; border-radius:6px;29 }30 .header-actions { display:flex; align-items:center; gap:36px; }31 .avatar {32 width:64px; height:64px; border-radius:50%; background:#2c2c2c;33 display:flex; align-items:center; justify-content:center; font-weight:bold; color:#9e9e9e;34 }35 36 .section {37 padding:18px 34px 10px 34px;38 }39 .section-title {40 display:flex; align-items:center; justify-content:space-between; margin-top:6px;41 }42 .section-title h2 { margin:0; font-size:44px; font-weight:700; }43 .link { color:#64b5f6; font-size:34px; }44 45 .video-row {46 display:flex; gap:28px; padding:18px 34px 0 34px;47 }48 .video-card {49 width:320px;50 }51 .thumb {52 width:100%; height:190px; background:#E0E0E0; border:1px solid #BDBDBD;53 display:flex; align-items:center; justify-content:center; color:#757575; position:relative;54 border-radius:16px;55 }56 .duration {57 position:absolute; right:12px; top:12px;58 padding:8px 14px; background:rgba(0,0,0,0.7); border-radius:10px; font-size:30px;59 }60 .vid-title {61 margin-top:14px; font-size:34px; line-height:1.2; color:#fff;62 max-height:80px;63 }64 .vid-channel { color:#9e9e9e; font-size:28px; margin-top:8px; }65 66 .playlist-row {67 display:flex; gap:28px; padding:18px 34px;68 }69 .playlist-card {70 width:340px; height:240px; background:#1f1f1f; border-radius:18px; position:relative;71 display:flex; align-items:center; justify-content:center; color:#9e9e9e; border:1px solid #2a2a2a;72 }73 .playlist-label { position:absolute; left:16px; top:16px; font-size:30px; color:#bdbdbd; }74 .playlist-count {75 position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);76 font-size:52px; color:#e0e0e0;77 }78 .playlist-name { margin-top:20px; font-size:34px; color:#fff; }79 .playlist-privacy { font-size:28px; color:#9e9e9e; }80 .playlist-item { width:340px; }81 82 .list-group { padding:18px 34px; }83 .list-item {84 height:120px; display:flex; align-items:center; gap:28px; border-bottom:1px solid #1d1d1d;85 }86 .list-icon {87 width:64px; height:64px; background:#1f1f1f; border-radius:12px; display:flex; align-items:center; justify-content:center;88 border:1px solid #2a2a2a;89 }90 .list-text { font-size:36px; }91 92 .ad-bar {93 position:absolute; bottom:300px; left:0; right:0;94 padding:18px 34px;95 }96 .ad-box {97 height:170px; background:#0f0f0f; border-top:1px solid #1f1f1f; border-bottom:1px solid #1f1f1f;98 display:flex; align-items:center; gap:26px; padding:16px 22px; border-radius:12px;99 }100 .ad-thumb { width:180px; height:130px; background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;101 display:flex; align-items:center; justify-content:center; border-radius:12px; }102 .ad-info { flex:1; }103 .ad-title { font-size:34px; color:#fff; }104 .ad-sub { font-size:28px; color:#bdbdbd; margin-top:6px; }105 .ad-actions { display:flex; align-items:center; gap:24px; }106 .close-x {107 width:56px; height:56px; border:1px solid #aaaaaa; border-radius:50%; color:#aaaaaa;108 display:flex; align-items:center; justify-content:center; font-size:32px;109 }110 111 .bottom-nav {112 position:absolute; bottom:80px; left:0; right:0;113 height:170px; background:#121212; border-top:1px solid #1f1f1f;114 display:flex; align-items:center; justify-content:space-around;115 }116 .nav-item { display:flex; flex-direction:column; align-items:center; gap:10px; color:#bdbdbd; font-size:28px; }117 .nav-plus {118 width:110px; height:110px; border-radius:55px; background:#1f1f1f; border:2px solid #2f2f2f; display:flex; align-items:center; justify-content:center;119 }120 .red-dot {121 width:16px; height:16px; background:#e53935; border-radius:50%; position:absolute; top:-6px; right:-6px;122 }123 .home-indicator {124 position:absolute; bottom:22px; left:50%; transform:translateX(-50%);125 width:340px; height:14px; background:#e6e6e6; border-radius:8px;126 }127 /* Utility */128 .mt-8 { margin-top:8px; }129 .mt-16 { margin-top:16px; }130</style>131</head>132<body>133<div id="render-target">134 135 <!-- Status Bar -->136 <div class="status-bar">137 <div>9:13</div>138 <div class="status-icons">139 <!-- Cloud icon -->140 <svg width="40" height="40" viewBox="0 0 24 24" fill="#bdbdbd"><path d="M6 18h11a4 4 0 0 0 0-8h-.3A5.5 5.5 0 0 0 6.1 9.6 4 4 0 0 0 6 18z"/></svg>141 <!-- WiFi -->142 <svg width="40" height="40" viewBox="0 0 24 24" fill="#bdbdbd"><path d="M12 18.5l2.5-2.5a3.5 3.5 0 0 0-5 0L12 18.5zM4.5 11.5a10 10 0 0 1 15 0l-1.8 1.8a7.5 7.5 0 0 0-11.4 0L4.5 11.5z"/></svg>143 <!-- Battery -->144 <svg width="44" height="40" viewBox="0 0 24 24" fill="#bdbdbd"><path d="M16 7h2a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2v2h-1v-2H7a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h8zM7 9v6h11V9H7z"/></svg>145 </div>146 </div>147 148 <!-- YouTube Header -->149 <div class="yt-header">150 <div class="logo">151 <div class="logo-badge"></div>152 <div>YouTube</div>153 </div>154 <div class="header-actions">155 <!-- Cast -->156 <svg width="42" height="42" viewBox="0 0 24 24" fill="#bdbdbd">157 <path d="M4 6h16a2 2 0 0 1 2 2v8h-2V8H4v2H2V8a2 2 0 0 1 2-2zm0 8a4 4 0 0 1 4 4H6a2 2 0 0 0-2-2v-2zm0 4a2 2 0 0 1 2 2H4a2 2 0 0 1-2-2h2z"/>158 </svg>159 <!-- Bell -->160 <svg width="42" height="42" viewBox="0 0 24 24" fill="#bdbdbd">161 <path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zm6-6V11a6 6 0 0 0-12 0v5l-2 2h16l-2-2z"/>162 </svg>163 <!-- Search -->164 <svg width="42" height="42" viewBox="0 0 24 24" fill="#bdbdbd">165 <path d="M10 4a6 6 0 1 1 0 12 6 6 0 0 1 0-12zm8.7 13.3-3.6-3.6-1.4 1.4 3.6 3.6 1.4-1.4z"/>166 </svg>167 <div class="avatar">C</div>168 </div>169 </div>170 171 <!-- History Section -->172 <div class="section">173 <div class="section-title">174 <h2>History</h2>175 <div class="link">View all</div>176 </div>177 </div>178 179 <div class="video-row">180 <div class="video-card">181 <div class="thumb">182 <div class="duration">16:50</div>183 [IMG: Rome vlog collage]184 </div>185 <div class="vid-title">What to do in Rome for 3 days | Italy Tr...</div>186 <div class="vid-channel">Hannah JY Moon</div>187 </div>188 <div class="video-card">189 <div class="thumb">190 <div class="duration">58:37</div>191 [IMG: Podcast studio cover]192 </div>193 <div class="vid-title">This American Life: The Call</div>194 <div class="vid-channel">This American Life</div>195 </div>196 <div class="video-card">197 <div class="thumb">198 <div class="duration">18:24</div>199 [IMG: Rome travel - streets]200 </div>201 <div class="vid-title">rome travel arriving in ita...</div>202 <div class="vid-channel">alia zaita</div>203 </div>204 </div>205 206 <!-- Playlists Section -->207 <div class="section">208 <div class="section-title">209 <h2>Playlists</h2>210 <div class="link">View all</div>211 </div>212 </div>213 214 <div class="playlist-row">215 <div class="playlist-item">216 <div class="playlist-card">217 <div class="playlist-label">218 <!-- Clock icon -->219 <svg width="42" height="42" viewBox="0 0 24 24" fill="#bdbdbd"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5h-2v6l5 3 1-1.7-4-2.3V7z"/></svg>220 </div>221 <div class="playlist-count">0</div>222 </div>223 <div class="playlist-name">Watch later</div>224 <div class="playlist-privacy">Private</div>225 </div>226 227 <div class="playlist-item">228 <div class="playlist-card">229 <div class="playlist-label">230 <!-- Like icon -->231 <svg width="42" height="42" viewBox="0 0 24 24" fill="#bdbdbd"><path d="M9 22V9l4-6h2v9h4l-2 10H9zM5 9h3v13H5V9z"/></svg>232 </div>233 <div class="playlist-count">27</div>234 </div>235 <div class="playlist-name">Liked videos</div>236 <div class="playlist-privacy">Private</div>237 </div>238 239 <div class="playlist-item">240 <div class="playlist-card">241 <!-- Plus icon -->242 <svg width="68" height="68" viewBox="0 0 24 24" fill="#bdbdbd">243 <path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z"/>244 </svg>245 </div>246 <div class="playlist-name">New playlist</div>247 </div>248 </div>249 250 <!-- Library list items -->251 <div class="list-group">252 <div class="list-item">253 <div class="list-icon">254 <svg width="32" height="32" viewBox="0 0 24 24" fill="#bdbdbd"><path d="M10 16l6-4-6-4v8zM4 6h2v12H4V6zm14 0h2v12h-2V6z"/></svg>255 </div>256 <div class="list-text">Your videos</div>257 </div>258 <div class="list-item">259 <div class="list-icon">260 <svg width="32" height="32" viewBox="0 0 24 24" fill="#bdbdbd"><path d="M6 4h12v14l-6-3-6 3V4z"/></svg>261 </div>262 <div class="list-text">Downloads</div>263 </div>264 <div class="list-item">265 <div class="list-icon">266 <svg width="32" height="32" viewBox="0 0 24 24" fill="#bdbdbd"><path d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h16v2H4v-2z"/></svg>267 </div>268 <div class="list-text">Your movies</div>269 </div>270 </div>271 272 <!-- Sponsored Ad -->273 <div class="ad-bar">274 <div class="ad-box">275 <div class="ad-thumb">[IMG: Podcast banner]</div>276 <div class="ad-info">277 <div class="ad-sub">Sponsored</div>278 <div class="ad-title">Your video will play after this ad</div>279 </div>280 <div class="ad-actions">281 <!-- Play icon -->282 <svg width="64" height="64" viewBox="0 0 24 24" fill="#bdbdbd"><path d="M8 5v14l11-7-11-7z"/></svg>283 <div class="close-x">×</div>284 </div>285 </div>286 </div>287 288 <!-- Bottom Navigation -->289 <div class="bottom-nav">290 <div class="nav-item">291 <svg width="44" height="44" viewBox="0 0 24 24" fill="#bdbdbd"><path d="M12 3l9 8h-3v9H6v-9H3l9-8z"/></svg>292 <div>Home</div>293 </div>294 <div class="nav-item">295 <svg width="44" height="44" viewBox="0 0 24 24" fill="#bdbdbd"><path d="M5 3l14 9-14 9V3z"/></svg>296 <div>Shorts</div>297 </div>298 <div class="nav-item">299 <div class="nav-plus">300 <svg width="44" height="44" viewBox="0 0 24 24" fill="#bdbdbd"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z"/></svg>301 </div>302 </div>303 <div class="nav-item" style="position:relative;">304 <svg width="44" height="44" viewBox="0 0 24 24" fill="#bdbdbd"><path d="M3 5h18v2H3V5zm0 6h18v2H3v-2zm0 6h18v2H3v-2z"/></svg>305 <div>Subscriptions</div>306 <span class="red-dot"></span>307 </div>308 <div class="nav-item">309 <svg width="44" height="44" viewBox="0 0 24 24" fill="#bdbdbd"><path d="M4 6h16v12H4V6zm3 3h10v6H7V9z"/></svg>310 <div>Library</div>311 </div>312 </div>313 314 <div class="home-indicator"></div>315</div>316</body>317</html>