GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>YouTube Mobile 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: 2160px;9 position: relative; overflow: hidden;10 background: #0f0f0f; color: #fff;11 }12 .row { display: flex; align-items: center; }13 .space-between { justify-content: space-between; }14 .status-bar {15 height: 80px; padding: 0 32px; font-size: 34px; color: #fff;16 }17 .status-left { letter-spacing: 1px; }18 .status-right svg { fill: #fff; }19 .status-right > * { margin-left: 22px; }20 .app-bar {21 height: 120px; padding: 0 28px; border-bottom: 1px solid #1e1e1e;22 }23 .logo { display: flex; align-items: center; }24 .yt-play {25 width: 64px; height: 44px; background: #ff0000; border-radius: 8px; margin-right: 18px; position: relative;26 }27 .yt-play:before {28 content: ""; position: absolute; left: 19px; top: 10px;29 border-left: 20px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent;30 }31 .logo span { font-size: 44px; font-weight: 700; }32 .app-actions svg { width: 44px; height: 44px; }33 .app-actions .notif {34 position: relative; margin-right: 26px;35 }36 .notif .dot {37 position: absolute; right: -6px; top: -6px;38 background: #e53935; color: #fff; font-size: 22px; line-height: 28px;39 padding: 2px 8px; border-radius: 14px; border: 2px solid #0f0f0f;40 }41 .avatar {42 width: 64px; height: 64px; border-radius: 32px; background: #2e7d32; display: flex; align-items: center; justify-content: center; font-weight: 700; margin-left: 18px;43 }44 .content { padding: 18px 24px 200px; overflow: hidden; }45 .section-header { margin-top: 18px; margin-bottom: 18px; padding: 10px 6px; }46 .section-title { font-size: 46px; font-weight: 700; }47 .link { color: #4da3ff; font-size: 34px; }48 .video-row { display: flex; gap: 26px; margin-bottom: 18px; }49 .video-card { width: 336px; }50 .thumb {51 width: 336px; height: 190px; background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;52 display: flex; align-items: center; justify-content: center; position: relative; font-size: 24px; text-align: center; padding: 8px;53 }54 .vevo {55 position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,0.85); padding: 4px 10px; font-size: 22px; border-radius: 6px; border: 1px solid #333;56 }57 .duration {58 position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,0.85); padding: 4px 8px; font-size: 22px; border-radius: 6px; border: 1px solid #333;59 }60 .video-meta { display: flex; align-items: flex-start; justify-content: space-between; margin-top: 10px; }61 .video-text .title { font-size: 34px; line-height: 38px; max-height: 78px; overflow: hidden; }62 .video-text .sub { font-size: 26px; color: #bdbdbd; margin-top: 6px; }63 .dots { width: 36px; height: 36px; opacity: 0.9; margin-top: 8px; }64 /* Playlists */65 .playlist-row { display: flex; gap: 26px; margin-bottom: 8px; }66 .playlist-card { width: 510px; }67 .thumb.wide { width: 510px; height: 290px; }68 .badge {69 position: absolute; left: 14px; bottom: 14px;70 background: rgba(0,0,0,0.8); border: 1px solid #333; padding: 4px 10px; border-radius: 6px; font-size: 24px;71 }72 .playlist-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }73 .playlist-meta .title { font-size: 36px; }74 .playlist-meta .sub { font-size: 26px; color: #bdbdbd; }75 /* Simple rows */76 .simple-row { display: flex; align-items: center; justify-content: space-between; padding: 18px 6px; border-top: 1px solid #1e1e1e; }77 .simple-row .label { font-size: 40px; }78 .simple-row .sublabel { font-size: 28px; color: #bdbdbd; margin-top: 6px; }79 .simple-left { display: flex; align-items: center; gap: 20px; }80 .icon-circle { width: 72px; height: 72px; border-radius: 36px; background: #1f1f1f; display: flex; align-items: center; justify-content: center; }81 /* Mini player */82 .mini-player {83 position: absolute; left: 0; right: 0; bottom: 160px;84 height: 140px; background: #121212; border-top: 1px solid #1e1e1e;85 display: flex; align-items: center; padding: 0 18px;86 }87 .mini-thumb { width: 140px; height: 140px; background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575; display: flex; align-items: center; justify-content: center; }88 .mini-text { flex: 1; padding: 0 24px; }89 .mini-title { font-size: 38px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }90 .mini-sub { font-size: 26px; color: #bdbdbd; }91 .mini-actions { display: flex; align-items: center; gap: 22px; padding-right: 8px; }92 .progress {93 position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: #2b2b2b;94 }95 .progress .bar { width: 62%; height: 100%; background: #ff2d2d; }96 /* Bottom nav */97 .bottom-nav {98 position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: #0f0f0f; border-top: 1px solid #1e1e1e;99 display: flex; justify-content: space-around; align-items: center;100 }101 .nav-item { display: flex; flex-direction: column; align-items: center; color: #e0e0e0; }102 .nav-item .label { font-size: 26px; margin-top: 8px; }103 .nav-plus {104 width: 108px; height: 108px; border-radius: 54px; background: #121212; border: 4px solid #3c3c3c; display: flex; align-items: center; justify-content: center;105 }106 .red-dot {107 position: absolute; right: 42px; top: 24px; background: #e53935; width: 18px; height: 18px; border-radius: 9px;108 }109</style>110</head>111<body>112<div id="render-target">113 114 <!-- Status Bar -->115 <div class="status-bar row space-between">116 <div class="status-left">1:44</div>117 <div class="status-right row">118 <!-- simple mobile signal -->119 <svg width="40" height="40" viewBox="0 0 24 24"><rect x="3" y="12" width="3" height="9" fill="#fff"/><rect x="9" y="9" width="3" height="12" fill="#fff"/><rect x="15" y="6" width="3" height="15" fill="#fff"/></svg>120 <!-- wifi -->121 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm0-4c-3 0-5.5 1.1-7.4 3l1.6 1.6C7 17.8 9.2 17 12 17s5 .8 5.8 1.6L19.4 17c-1.9-1.9-4.4-3-7.4-3zm0-5c-4.7 0-8.5 1.8-11 4.3l1.7 1.7C4.8 12.9 8 11.5 12 11.5s7.2 1.4 9.3 3.1l1.7-1.7C20.5 10.8 16.7 9 12 9z"/></svg>122 <!-- battery -->123 <svg width="46" height="40" viewBox="0 0 26 24"><rect x="1" y="6" width="20" height="12" stroke="#fff" fill="none" stroke-width="2"/><rect x="3" y="8" width="16" height="8" fill="#fff"/><rect x="22" y="9" width="3" height="6" fill="#fff"/></svg>124 <div style="font-size:28px; margin-left:6px;">100%</div>125 </div>126 </div>127 128 <!-- App Bar -->129 <div class="app-bar row space-between">130 <div class="logo">131 <div class="yt-play"></div>132 <span>YouTube</span>133 </div>134 <div class="row app-actions">135 <!-- Cast -->136 <svg viewBox="0 0 24 24"><path d="M2 4h18a2 2 0 0 1 2 2v10h-2V6H2V4zM1 17v3h3a6 6 0 0 0-3-3zm0-3v2a8 8 0 0 1 5 3h2a10 10 0 0 0-7-5zm0-3v2c5 1 9 5 10 10h2C12 18 7 13 1 11z" fill="#fff"/></svg>137 <!-- Create -->138 <svg viewBox="0 0 24 24" style="margin-left:22px;"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z" fill="#fff"/></svg>139 <!-- Notifications -->140 <div class="notif">141 <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V9a6 6 0 1 0-12 0v7L4 18v2h16v-2l-2-2z" fill="#fff"/></svg>142 <div class="dot">9+</div>143 </div>144 <!-- Search -->145 <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1 0 16 15.5l.27.28v.79L21 21.5 22.5 20l-4.5-4.5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z" fill="#fff"/></svg>146 <!-- Avatar -->147 <div class="avatar">C</div>148 </div>149 </div>150 151 <div class="content">152 <!-- History -->153 <div class="section-header row space-between">154 <div class="section-title">History</div>155 <div class="link">View all</div>156 </div>157 158 <div class="video-row">159 <!-- Card 1 -->160 <div class="video-card">161 <div class="thumb">[IMG: Music video thumbnail]162 <div class="vevo">vevo</div>163 <div class="duration">4:30</div>164 </div>165 <div class="video-meta">166 <div class="video-text">167 <div class="title">Katy Perry - Roar</div>168 <div class="sub">Katy Perry</div>169 </div>170 <svg class="dots" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#bdbdbd"/><circle cx="12" cy="12" r="2" fill="#bdbdbd"/><circle cx="12" cy="19" r="2" fill="#bdbdbd"/></svg>171 </div>172 </div>173 <!-- Card 2 -->174 <div class="video-card">175 <div class="thumb">[IMG: Dancing cat clip]176 <div class="duration">0:15</div>177 </div>178 <div class="video-meta">179 <div class="video-text">180 <div class="title">Nhảy theo điệu nhảy của các chú mèo...</div>181 <div class="sub">Thai Le</div>182 </div>183 <svg class="dots" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#bdbdbd"/><circle cx="12" cy="12" r="2" fill="#bdbdbd"/><circle cx="12" cy="19" r="2" fill="#bdbdbd"/></svg>184 </div>185 </div>186 <!-- Card 3 -->187 <div class="video-card">188 <div class="thumb">[IMG: Music performance]189 <div class="vevo">vevo</div>190 </div>191 <div class="video-meta">192 <div class="video-text">193 <div class="title">Katy Perry - Top Hits</div>194 <div class="sub">Katy Perry</div>195 </div>196 <svg class="dots" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#bdbdbd"/><circle cx="12" cy="12" r="2" fill="#bdbdbd"/><circle cx="12" cy="19" r="2" fill="#bdbdbd"/></svg>197 </div>198 </div>199 </div>200 201 <!-- Playlists -->202 <div class="section-header row space-between" style="margin-top: 28px;">203 <div class="section-title">Playlists</div>204 <div class="link">View all</div>205 </div>206 207 <div class="playlist-row">208 <div class="playlist-card">209 <div class="thumb wide">[IMG: Playlist cover]210 <div class="badge">3</div>211 <div class="vevo">vevo</div>212 </div>213 <div class="playlist-meta">214 <div>215 <div class="title">favourite</div>216 </div>217 <svg class="dots" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#bdbdbd"/><circle cx="12" cy="12" r="2" fill="#bdbdbd"/><circle cx="12" cy="19" r="2" fill="#bdbdbd"/></svg>218 </div>219 </div>220 221 <div class="playlist-card">222 <div class="thumb wide">[IMG: Playlist cover]223 <div class="vevo">vevo</div>224 </div>225 <div class="playlist-meta">226 <div>227 <div class="title">Watch later</div>228 <div class="sub">Private</div>229 </div>230 <svg class="dots" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#bdbdbd"/><circle cx="12" cy="12" r="2" fill="#bdbdbd"/><circle cx="12" cy="19" r="2" fill="#bdbdbd"/></svg>231 </div>232 </div>233 </div>234 235 <!-- Liked videos (partial hint) -->236 <div class="playlist-row" style="gap:26px;">237 <div class="playlist-card">238 <div class="thumb wide">[IMG: Clay figures]</div>239 <div class="playlist-meta">240 <div>241 <div class="title">Liked videos</div>242 <div class="sub">Private</div>243 </div>244 <svg class="dots" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#bdbdbd"/><circle cx="12" cy="12" r="2" fill="#bdbdbd"/><circle cx="12" cy="19" r="2" fill="#bdbdbd"/></svg>245 </div>246 </div>247 </div>248 249 <!-- Your videos -->250 <div class="simple-row">251 <div class="simple-left">252 <div class="icon-circle">253 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M10 4l2 2h8v12H4V6h6z" fill="#bdbdbd"/></svg>254 </div>255 <div>256 <div class="label">Your videos</div>257 </div>258 </div>259 </div>260 261 <!-- Downloads -->262 <div class="simple-row">263 <div class="simple-left">264 <div class="icon-circle">265 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 2v12l4-4 1.4 1.4L12 18l-5.4-5.6L8 10l4 4V2z" fill="#bdbdbd"/><rect x="4" y="19" width="16" height="2" fill="#bdbdbd"/></svg>266 </div>267 <div>268 <div class="label">Downloads</div>269 <div class="sublabel">20 recommendations</div>270 </div>271 </div>272 </div>273 274 </div>275 276 <!-- Mini Player -->277 <div class="mini-player">278 <div class="mini-thumb">[IMG: Music video]</div>279 <div class="mini-text">280 <div class="mini-title">Katy Perry - Roar</div>281 <div class="mini-sub">KatyPerryVEVO</div>282 </div>283 <div class="mini-actions">284 <!-- Play -->285 <svg width="60" height="60" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" fill="#fff"/></svg>286 <!-- Close -->287 <svg width="60" height="60" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="#fff" stroke-width="2"/></svg>288 </div>289 <div class="progress"><div class="bar"></div></div>290 </div>291 292 <!-- Bottom Navigation -->293 <div class="bottom-nav">294 <div class="nav-item">295 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M4 10l8-6 8 6v8a2 2 0 0 1-2 2h-4v-6H10v6H6a2 2 0 0 1-2-2v-8z" fill="#e0e0e0"/></svg>296 <div class="label">Home</div>297 </div>298 <div class="nav-item">299 <svg width="44" height="44" viewBox="0 0 24 24"><rect x="7" y="4" width="10" height="16" rx="2" fill="#e0e0e0"/><path d="M10 9l5 3-5 3V9z" fill="#0f0f0f"/></svg>300 <div class="label">Shorts</div>301 </div>302 <div class="nav-plus">303 <svg width="56" height="56" viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z" fill="#e0e0e0"/></svg>304 </div>305 <div class="nav-item" style="position: relative;">306 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M4 6h16v12H4z" fill="#e0e0e0"/><path d="M10 8l5 4-5 4V8z" fill="#0f0f0f"/></svg>307 <div class="label">Subscriptions</div>308 <span class="red-dot"></span>309 </div>310 <div class="nav-item">311 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h10v2H4v-2z" fill="#e0e0e0"/></svg>312 <div class="label">Library</div>313 </div>314 </div>315 316</div>317</body>318</html>