GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>YouTube Ad and Video UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #121212; color: #fff;11 }12 .status-bar {13 height: 110px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between;14 color: #ddd; font-size: 42px; background: rgba(0,0,0,0.35);15 }16 .status-icons { display: flex; align-items: center; gap: 26px; }17 .player {18 position: relative; width: 100%; height: 720px; background: #222;19 }20 .img-placeholder {21 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;22 display: flex; align-items: center; justify-content: center; text-align: center;23 }24 .player .img-placeholder { width: 100%; height: 100%; font-size: 40px; }25 .player-topbar {26 position: absolute; top: 18px; left: 34px; right: 34px;27 display: flex; align-items: center; justify-content: space-between; font-size: 36px;28 color: #fff;29 }30 .player-left { display: flex; align-items: center; gap: 20px; }31 .player-right { display: flex; align-items: center; gap: 28px; }32 .icon-btn { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; }33 .icon-btn svg { fill: none; stroke: #fff; stroke-width: 2.5; }34 .play-btn {35 position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);36 width: 130px; height: 130px; border-radius: 50%; background: rgba(0,0,0,0.55);37 display: flex; align-items: center; justify-content: center;38 }39 .play-btn svg { fill: #fff; }40 .skip-ads {41 position: absolute; right: 32px; bottom: 140px;42 background: rgba(0,0,0,0.7); color: #fff; padding: 16px 22px; border-radius: 10px; font-size: 32px;43 }44 .waveform {45 position: absolute; left: 0; right: 0; bottom: 90px; height: 120px;46 background: rgba(255,255,255,0.08); color: #bbb; font-size: 34px;47 display: flex; align-items: center; justify-content: center;48 }49 .sponsored-meta {50 position: absolute; left: 34px; bottom: 24px; color: #ddd; font-size: 32px;51 display: flex; align-items: center; gap: 14px;52 }53 .yellow-progress {54 position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: #FFD54F;55 }56 57 .ad-app {58 display: flex; align-items: center; justify-content: space-between;59 padding: 26px 34px; border-top: 1px solid #1f1f1f; border-bottom: 1px solid #1f1f1f;60 background: #141414;61 }62 .ad-left { display: flex; align-items: center; gap: 24px; }63 .app-icon { width: 110px; height: 110px; border-radius: 22px; }64 .ad-texts { display: flex; flex-direction: column; gap: 8px; }65 .ad-title { font-size: 42px; color: #fff; }66 .ad-sub { font-size: 32px; color: #bdbdbd; }67 .install-wrap { display: flex; align-items: center; gap: 16px; }68 .install-btn {69 background: #3b82f6; color: #fff; border-radius: 999px; padding: 18px 36px; font-size: 36px; font-weight: bold;70 }71 .drop-btn { width: 54px; height: 54px; border-radius: 27px; background: #1f1f1f; display: flex; align-items: center; justify-content: center; }72 .drop-btn svg { stroke: #bdbdbd; }73 74 .content { padding: 22px 34px; }75 .title { font-size: 56px; font-weight: bold; margin-top: 10px; }76 .meta { font-size: 32px; color: #bdbdbd; margin-top: 10px; }77 .channel-row {78 margin-top: 24px; display: flex; align-items: center; justify-content: space-between;79 }80 .channel-left { display: flex; align-items: center; gap: 20px; }81 .avatar { width: 90px; height: 90px; border-radius: 45px; }82 .channel-texts { display: flex; flex-direction: column; }83 .channel-name { font-size: 40px; }84 .channel-subs { font-size: 30px; color: #bdbdbd; }85 .channel-actions { display: flex; align-items: center; gap: 20px; }86 .join-btn { background: #fff; color: #000; border-radius: 999px; padding: 18px 34px; font-size: 36px; font-weight: bold; }87 .bell-btn, .more-btn {88 width: 68px; height: 68px; border-radius: 34px; background: #1f1f1f; display: flex; align-items: center; justify-content: center;89 }90 .bell-btn svg, .more-btn svg { stroke: #fff; }91 92 .actions-row {93 margin-top: 26px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap;94 }95 .pill {96 display: flex; align-items: center; gap: 16px; padding: 18px 26px; border-radius: 999px;97 background: #1f1f1f; color: #fff; font-size: 32px;98 }99 .pill svg { stroke: #fff; }100 .pill .count { color: #ddd; }101 102 .comments-header { margin-top: 32px; font-size: 38px; font-weight: bold; }103 .comments-card {104 margin-top: 18px; background: #1a1a1a; border-radius: 26px; padding: 22px; color: #fff;105 }106 .comment-row { display: flex; align-items: center; gap: 18px; }107 .comment-avatar { width: 72px; height: 72px; border-radius: 36px; }108 .comment-text { font-size: 34px; }109 .comment-expand { margin-left: auto; width: 54px; height: 54px; border-radius: 27px; background: #111; display: flex; align-items: center; justify-content: center; }110 .comment-expand svg { stroke: #bdbdbd; }111 112 .banner-ad {113 margin-top: 24px; width: 100%; height: 700px;114 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575; display: flex; align-items: center; justify-content: center;115 font-size: 46px; text-align: center;116 }117 118 .bottom-bar {119 position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: #000;120 display: flex; align-items: center; justify-content: center;121 }122 .gesture-pill {123 width: 260px; height: 16px; border-radius: 8px; background: #fff; opacity: 0.85;124 }125</style>126</head>127<body>128<div id="render-target">129 <!-- Status bar -->130 <div class="status-bar">131 <div>11:11</div>132 <div class="status-icons">133 <!-- Message/mail icon -->134 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M3 5h18v14H3z"/><path d="M3 5l9 7 9-7" stroke="#ddd" fill="none" stroke-width="2"/></svg>135 <!-- Cloud icon -->136 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M6 14a4 4 0 0 1 3-7 5 5 0 0 1 9 3h1a3 3 0 0 1 0 6H7a3 3 0 0 1-1-2z" stroke="#ddd" fill="none" stroke-width="2"/></svg>137 <!-- WiFi + battery -->138 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M2 9c5-4 15-4 20 0" stroke="#ddd" fill="none" stroke-width="2"/><path d="M5 12c4-3 10-3 14 0" stroke="#ddd" fill="none" stroke-width="2"/><rect x="16" y="14" width="6" height="7" stroke="#ddd" fill="none" stroke-width="2"/></svg>139 </div>140 </div>141 142 <!-- Video player -->143 <div class="player">144 <div class="img-placeholder">[IMG: Video Ad - Program segment]</div>145 146 <div class="player-topbar">147 <div class="player-left">148 <div style="font-size:36px; font-weight:bold;">Visit advertiser</div>149 <!-- Chevron down -->150 <div class="icon-btn">151 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>152 </div>153 <!-- Cast -->154 <div class="icon-btn">155 <svg viewBox="0 0 24 24">156 <rect x="3" y="5" width="18" height="12" rx="2" ry="2" />157 <path d="M3 17c3 0 5 2 5 2" />158 <path d="M3 14c5 0 8 5 8 5" />159 </svg>160 </div>161 <!-- CC -->162 <div style="border:1px solid #fff; border-radius:8px; padding:4px 10px; font-size:28px;">CC</div>163 </div>164 <div class="player-right">165 <!-- Gear -->166 <div class="icon-btn">167 <svg viewBox="0 0 24 24">168 <circle cx="12" cy="12" r="3"/>169 <path d="M12 2v4M12 18v4M2 12h4M18 12h4M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2"/>170 </svg>171 </div>172 <!-- Dots -->173 <div class="icon-btn">174 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>175 </div>176 <!-- Close -->177 <div class="icon-btn">178 <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"/></svg>179 </div>180 </div>181 </div>182 183 <div class="play-btn">184 <svg width="70" height="70" viewBox="0 0 24 24"><polygon points="8,5 20,12 8,19"/></svg>185 </div>186 187 <div class="skip-ads">Skip ads</div>188 189 <div class="waveform">[Ad audio waveform]</div>190 191 <div class="sponsored-meta">192 <div>Sponsored • 1 of 2 • 0:17</div>193 <svg width="30" height="30" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#ddd" fill="none" stroke-width="2"/><text x="8" y="16" font-size="12" fill="#ddd">i</text></svg>194 </div>195 196 <div class="yellow-progress"></div>197 </div>198 199 <!-- App install ad row -->200 <div class="ad-app">201 <div class="ad-left">202 <div class="app-icon img-placeholder">[IMG: Shopping App Icon]</div>203 <div class="ad-texts">204 <div class="ad-title">CityMall: Online Shopping App</div>205 <div class="ad-sub">Sponsored • 4.4★ • FREE</div>206 </div>207 </div>208 <div class="install-wrap">209 <div class="install-btn">Install</div>210 <div class="drop-btn">211 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>212 </div>213 </div>214 </div>215 216 <!-- Video details -->217 <div class="content">218 <div class="title">This American Life: The Call</div>219 <div class="meta">2K views • 11d ago • This American Life • …more</div>220 221 <div class="channel-row">222 <div class="channel-left">223 <div class="avatar img-placeholder">[IMG: Channel Logo]</div>224 <div class="channel-texts">225 <div class="channel-name">This American Life</div>226 <div class="channel-subs">7.19K</div>227 </div>228 </div>229 <div class="channel-actions">230 <div class="join-btn">Join</div>231 <div class="bell-btn">232 <svg viewBox="0 0 24 24"><path d="M12 21a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z"/><path d="M18 16H6l1-5a5 5 0 0 1 10 0l1 5z"/><path d="M4 16h16"/></svg>233 </div>234 <div class="more-btn">235 <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>236 </div>237 </div>238 </div>239 240 <!-- Actions buttons -->241 <div class="actions-row">242 <div class="pill">243 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M2 13h5v8H2z"/><path d="M7 13l6-8h7v16H9z"/></svg>244 <span>Like</span>245 <span class="count">44</span>246 </div>247 <div class="pill">248 <svg width="32" height="32" viewBox="0 0 24 24" style="transform: rotate(180deg);"><path d="M2 13h5v8H2z"/><path d="M7 13l6-8h7v16H9z"/></svg>249 <span>Dislike</span>250 </div>251 <div class="pill">252 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M4 12v-2l8-5v14l-8-5z"/><path d="M16 7h4v10h-4"/></svg>253 <span>Share</span>254 </div>255 <div class="pill">256 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"/><circle cx="12" cy="12" r="9"/></svg>257 <span>Remix</span>258 </div>259 <div class="pill">260 <svg width="32" height="32" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M4 20l16-16"/></svg>261 <span>Stop ads</span>262 </div>263 <div class="pill">264 <svg width="32" height="32" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>265 <span>More</span>266 </div>267 </div>268 269 <!-- Comments -->270 <div class="comments-header">Comments 7</div>271 <div class="comments-card">272 <div class="comment-row">273 <div class="comment-avatar img-placeholder">[IMG: User Avatar]</div>274 <div class="comment-text">Harm Reduction is Love.</div>275 <div class="comment-expand">276 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>277 </div>278 </div>279 </div>280 281 <!-- Big banner ad -->282 <div class="banner-ad">[IMG: CITYMALL banner – Shoe rack offer ₹199]</div>283 </div>284 285 <!-- Bottom gesture bar -->286 <div class="bottom-bar">287 <div class="gesture-pill"></div>288 </div>289</div>290</body>291</html>