GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>YouTube Mobile Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin:0; padding:0; background:transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #0f0f0f;14 color: #fff;15 }16 17 /* Status bar */18 .status-bar {19 height: 84px;20 padding: 0 28px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #e6e6e6;25 font-size: 34px;26 }27 .status-icons { display:flex; gap:28px; align-items:center; opacity:0.9; }28 .dot { width:10px; height:10px; background:#cfcfcf; border-radius:50%; display:inline-block; }29 30 /* Header */31 .yt-header {32 height: 116px;33 padding: 0 26px;34 display:flex;35 align-items:center;36 justify-content: space-between;37 }38 .yt-left { display:flex; align-items:center; gap:22px; }39 .yt-logo {40 display:flex; align-items:center; gap:16px;41 font-weight:700; font-size:44px;42 }43 .logo-box {44 width:72px; height:50px; background:#ff0000; border-radius:10px; position:relative;45 display:flex; align-items:center; justify-content:center;46 }47 .logo-box svg { width:28px; height:28px; }48 .yt-actions { display:flex; align-items:center; gap:34px; }49 .icon-btn { width:54px; height:54px; display:flex; align-items:center; justify-content:center; }50 .badge {51 position:absolute;52 top:-6px; right:-6px;53 background:#e53935; color:#fff; font-size:24px; padding:2px 10px; border-radius:18px; border:2px solid #0f0f0f;54 }55 .avatar {56 width:64px; height:64px; border-radius:50%;57 background:#3c3c3c; display:flex; align-items:center; justify-content:center; font-weight:700;58 }59 60 /* Chips */61 .chips {62 padding: 14px 18px 16px 18px;63 display:flex; gap:16px; overflow:hidden;64 }65 .chip {66 padding: 18px 26px;67 background:#2a2a2a;68 color:#e8e8e8;69 border-radius:24px;70 font-size:30px;71 white-space:nowrap;72 }73 .chip.active {74 background:#fff;75 color:#0f0f0f;76 font-weight:700;77 }78 79 /* Feed */80 .feed { position:absolute; top:84px; bottom:170px; left:0; right:0; overflow:hidden; }81 .scroll {82 position:absolute; inset:0;83 overflow:hidden;84 }85 86 /* Card common */87 .card { margin: 8px 0 0 0; }88 .thumb {89 height: 650px;90 background:#E0E0E0;91 border:1px solid #BDBDBD;92 color:#757575;93 display:flex; align-items:center; justify-content:center;94 font-size:36px;95 position:relative;96 margin:0 0 0 0;97 }98 .duration {99 position:absolute; right:20px; bottom:20px;100 background:rgba(0,0,0,.85);101 padding:8px 14px; border-radius:10px; font-size:28px;102 }103 .ad-meta, .video-meta {104 padding: 26px 28px 0 28px;105 }106 .ad-headline { font-size:40px; font-weight:700; }107 .ad-sub { color:#cfcfcf; font-size:30px; margin-top:8px; }108 .row { display:flex; align-items:center; gap:18px; margin-top:16px; font-size:30px; color:#cfcfcf; }109 .dot-sep { width:6px; height:6px; background:#7a7a7a; border-radius:50%; display:inline-block; }110 .install-wrap { padding: 20px 28px 26px 28px; }111 .install-btn {112 width: 100%;113 height: 120px;114 border-radius:60px;115 background:#e7ebef;116 color:#0f0f0f;117 display:flex; align-items:center; justify-content:center;118 font-size:42px; font-weight:700; position:relative;119 }120 .install-btn svg { margin-left:22px; }121 .three-dots {122 position:absolute; right:24px; top:24px; width:46px; height:46px; display:flex; align-items:center; justify-content:center;123 }124 125 /* Second card specifics */126 .vevo {127 position:absolute; left:26px; bottom:24px; color:#d9d9d9; font-weight:700; letter-spacing:1px; opacity:0.9;128 }129 .green-bar {130 position:absolute; left:0; right:0; bottom:0; height:70px; background:#224a1f;131 display:flex; align-items:center; justify-content:center; color:#b5e2a4; font-size:34px;132 }133 .video-title { font-size:40px; font-weight:700; margin-bottom:8px; }134 .video-sub { color:#cfcfcf; font-size:30px; }135 .menu-right { position:absolute; right:28px; top:40px; }136 137 /* Bottom nav */138 .bottom-nav {139 position:absolute; left:0; right:0; bottom:0; height:170px; background:#111;140 border-top:1px solid #222;141 display:flex; align-items:center; justify-content:space-around;142 font-size:28px; color:#cfcfcf;143 }144 .nav-item { display:flex; flex-direction:column; align-items:center; gap:12px; }145 .plus {146 width:120px; height:120px; background:#1f1f1f; border-radius:60px;147 border:2px solid #2c2c2c; display:flex; align-items:center; justify-content:center;148 }149 .sub-dot {150 position:absolute;151 top:-6px; right:-6px;152 width:16px; height:16px; background:#e53935; border-radius:50%; border:2px solid #111;153 }154</style>155</head>156<body>157<div id="render-target">158 159 <!-- Status bar -->160 <div class="status-bar">161 <div>9:38</div>162 <div class="status-icons">163 <span>⚙️</span>164 <span>⤴️</span>165 <span class="dot"></span>166 <span>📶</span>167 <span>🔋</span>168 </div>169 </div>170 171 <!-- Header -->172 <div class="yt-header">173 <div class="yt-left">174 <div class="yt-logo">175 <div class="logo-box">176 <svg viewBox="0 0 24 24" fill="#fff"><path d="M9 7l8 5-8 5z"/></svg>177 </div>178 <span>YouTube</span>179 </div>180 </div>181 <div class="yt-actions">182 <!-- Cast -->183 <div class="icon-btn">184 <svg viewBox="0 0 24 24" width="36" height="36" fill="#fff"><path d="M3 5h18v10h-4v2h6V3H1v4h2V5zM1 17v4h4a6 6 0 0 0-4-4zm0-4v2a8 8 0 0 1 8 8h2c0-5.5-4.5-10-10-10z"/></svg>185 </div>186 <!-- Notifications -->187 <div class="icon-btn" style="position:relative;">188 <svg viewBox="0 0 24 24" width="36" height="36" fill="#fff"><path d="M12 24a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zm6-6V11a6 6 0 1 0-12 0v7L4 18v2h16v-2l-2-0z"/></svg>189 <span class="badge">9+</span>190 </div>191 <!-- Search -->192 <div class="icon-btn">193 <svg viewBox="0 0 24 24" width="36" height="36" fill="#fff"><path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1 0 14 15.5l.27.28v.79L20 22l2-2-6.5-6.5zM6.5 11A4.5 4.5 0 1 1 11 6.5 4.5 4.5 0 0 1 6.5 11z"/></svg>194 </div>195 <!-- Avatar -->196 <div class="avatar">C</div>197 </div>198 </div>199 200 <!-- Chips -->201 <div class="chips">202 <div class="chip active">All</div>203 <div class="chip">Music</div>204 <div class="chip">Animated films</div>205 <div class="chip">Snacks</div>206 <div class="chip">Gaming</div>207 </div>208 209 <!-- FEED AREA -->210 <div class="feed">211 <div class="scroll">212 213 <!-- Ad video card -->214 <div class="card">215 <div class="thumb">216 [IMG: Facebook Watch ad scene on phone table]217 <div class="duration">0:26</div>218 <div class="three-dots">219 <svg viewBox="0 0 24 24" width="32" height="32" fill="#cfcfcf"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>220 </div>221 </div>222 <div class="ad-meta">223 <div style="display:flex; align-items:flex-start; gap:18px;">224 <div style="width:76px; height:76px; background:#1877f2; border-radius:16px; display:flex; align-items:center; justify-content:center;">225 <svg viewBox="0 0 24 24" width="36" height="36" fill="#fff"><path d="M13 3h4v4h-3c-.6 0-1 .4-1 1v2h4l-1 4h-3v7h-4v-7H7v-4h2V8a5 5 0 0 1 5-5z"/></svg>226 </div>227 <div style="flex:1;">228 <div class="ad-headline">Discover Shows on Watch | Facebook</div>229 <div class="ad-sub">Discover and view new shows on Facebook Watch.</div>230 <div class="row">231 <span>Ad</span>232 <span class="dot-sep"></span>233 <span>4.0★</span>234 <span class="dot-sep"></span>235 <span>FREE</span>236 </div>237 </div>238 </div>239 </div>240 <div class="install-wrap">241 <div class="install-btn">242 Install243 <svg viewBox="0 0 24 24" width="40" height="40" fill="#0f0f0f"><path d="M12 3v10l4-4 1.4 1.4L12 17.8 6.6 10.4 8 9l4 4V3h0zM4 19h16v2H4z"/></svg>244 </div>245 </div>246 </div>247 248 <!-- Second video card -->249 <div class="card" style="margin-top:18px;">250 <div class="thumb" style="height:750px;">251 [IMG: Pop music video with colorful flowers background]252 <div class="vevo">VEVO</div>253 <div class="green-bar">((•))</div>254 </div>255 <div class="video-meta" style="position:relative; padding-right:88px;">256 <div class="video-title">Mix - Katy Perry - Roar</div>257 <div class="video-sub">Katy Perry, Taylor Swift, Bruno Mars, and more</div>258 <div class="menu-right">259 <svg viewBox="0 0 24 24" width="36" height="36" fill="#cfcfcf"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>260 </div>261 </div>262 </div>263 264 </div>265 </div>266 267 <!-- Bottom navigation -->268 <div class="bottom-nav">269 <div class="nav-item">270 <svg viewBox="0 0 24 24" width="46" height="46" fill="#fff"><path d="M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3l9-8z"/></svg>271 <div>Home</div>272 </div>273 <div class="nav-item">274 <svg viewBox="0 0 24 24" width="46" height="46" fill="#fff"><path d="M4 3l16 5-4 3 4 3-16 7 4-8-4-10z"/></svg>275 <div>Shorts</div>276 </div>277 <div class="nav-item">278 <div class="plus">279 <svg viewBox="0 0 24 24" width="56" height="56" fill="#fff"><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></svg>280 </div>281 </div>282 <div class="nav-item" style="position:relative;">283 <svg viewBox="0 0 24 24" width="46" height="46" fill="#fff"><path d="M20 6H4v2h16V6zM4 11h16v2H4v-2zm0 5h10v2H4v-2z"/></svg>284 <div style="position:relative;">285 Subscriptions286 <span class="sub-dot"></span>287 </div>288 </div>289 <div class="nav-item">290 <svg viewBox="0 0 24 24" width="46" height="46" fill="#fff"><path d="M4 5h14v14H4V5zm2 2v10h10V7H6zm12 0h2v12h-2V7z"/></svg>291 <div>Library</div>292 </div>293 </div>294 295</div>296</body>297</html>