GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>YouTube Search Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #121212;14 color: #EDEDED;15 }16 17 /* Top status bar */18 .status-bar {19 height: 90px;20 padding: 0 36px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #e0e0e0;25 font-size: 34px;26 letter-spacing: 0.5px;27 }28 .status-icons {29 display: flex;30 align-items: center;31 gap: 22px;32 }33 .icon-small {34 width: 30px; height: 30px; opacity: 0.9;35 }36 37 /* Search app bar */38 .search-bar {39 height: 130px;40 display: flex;41 align-items: center;42 padding: 0 22px 0 14px;43 gap: 18px;44 }45 .pill {46 flex: 1;47 height: 100px;48 border-radius: 50px;49 background: #212121;50 display: flex;51 align-items: center;52 padding: 0 24px;53 color: #f1f1f1;54 font-size: 40px;55 }56 .pill .text {57 flex: 1;58 white-space: nowrap;59 overflow: hidden;60 text-overflow: ellipsis;61 }62 .circle-ghost {63 width: 62px; height: 62px;64 border-radius: 50%;65 background: #2a2a2a;66 display: flex; align-items: center; justify-content: center;67 }68 .action-icon {69 width: 68px; height: 68px;70 border-radius: 50%;71 background: transparent;72 display: flex; align-items: center; justify-content: center;73 }74 75 /* Link helper text */76 .helper-links {77 padding: 18px 32px 10px 32px;78 font-size: 36px;79 line-height: 1.35;80 }81 .helper-links .link {82 color: #3ea6ff;83 }84 85 /* Image placeholder */86 .img {87 background: #E0E0E0;88 border: 1px solid #BDBDBD;89 color: #606060;90 display: flex;91 align-items: center;92 justify-content: center;93 text-align: center;94 }95 96 /* Ad card below image */97 .ad-meta {98 padding: 22px 28px 8px 28px;99 }100 .ad-row {101 display: flex;102 gap: 20px;103 align-items: flex-start;104 }105 .avatar {106 width: 92px; height: 92px; border-radius: 50%;107 background: #E0E0E0; border: 1px solid #BDBDBD;108 display: flex; align-items: center; justify-content: center;109 color: #7a7a7a; font-size: 20px;110 }111 .ad-text .title {112 font-size: 40px;113 line-height: 1.25;114 margin-bottom: 12px;115 }116 .ad-text .subtitle {117 font-size: 30px; color: #bdbdbd;118 }119 .cta-row {120 padding: 18px 28px 0 28px;121 display: flex; gap: 28px;122 }123 .btn {124 height: 110px;125 border-radius: 60px;126 padding: 0 48px;127 font-size: 40px;128 display: inline-flex;129 align-items: center;130 justify-content: center;131 border: 1px solid #2c2c2c;132 background: #1c1c1c;133 color: #eaeaea;134 }135 .btn.primary {136 background: #3ea6ff;137 color: #0b0b0b;138 border-color: #3ea6ff;139 }140 141 /* Video card */142 .video-card {143 padding: 36px 28px;144 }145 .thumb {146 width: 100%;147 height: 600px;148 border-radius: 18px;149 position: relative;150 }151 .badge {152 position: absolute;153 bottom: 22px;154 right: 22px;155 background: rgba(0,0,0,0.8);156 color: #fff;157 padding: 8px 16px;158 border-radius: 8px;159 font-size: 30px;160 }161 .vevo {162 position: absolute;163 bottom: 22px;164 left: 22px;165 color: #fff;166 font-weight: bold;167 font-size: 50px;168 letter-spacing: 1px;169 text-transform: lowercase;170 opacity: 0.95;171 }172 173 /* Bottom nav */174 .bottom-nav {175 position: absolute;176 bottom: 0;177 left: 0; right: 0;178 height: 190px;179 background: #0f0f0f;180 display: flex;181 align-items: center;182 justify-content: space-around;183 border-top: 1px solid #1e1e1e;184 }185 .nav-item {186 width: 180px;187 height: 160px;188 display: flex;189 flex-direction: column;190 align-items: center;191 justify-content: center;192 gap: 10px;193 color: #d7d7d7;194 font-size: 28px;195 }196 .nav-item .icon {197 width: 70px; height: 70px;198 }199 .nav-item.active { color: #fff; }200 .plus {201 width: 110px; height: 110px;202 border-radius: 50%;203 background: #1f1f1f;204 border: 2px solid #2a2a2a;205 display: flex; align-items: center; justify-content: center;206 }207 .red-dot {208 width: 14px; height: 14px; background: #ff3b3b; border-radius: 50%;209 position: absolute; margin-top: -8px; margin-left: 46px;210 }211 212 /* Home handle */213 .handle {214 position: absolute;215 bottom: 196px;216 left: 50%;217 transform: translateX(-50%);218 width: 240px; height: 10px; border-radius: 6px;219 background: #2a2a2a;220 opacity: 0.9;221 }222</style>223</head>224<body>225<div id="render-target">226 227 <!-- Status bar -->228 <div class="status-bar">229 <div>6:22</div>230 <div class="status-icons">231 <!-- Signal -->232 <svg class="icon-small" viewBox="0 0 24 24" fill="#e0e0e0"><rect x="2" y="14" width="3" height="8"/><rect x="7" y="10" width="3" height="12"/><rect x="12" y="6" width="3" height="16"/><rect x="17" y="2" width="3" height="20"/></svg>233 <!-- WiFi -->234 <svg class="icon-small" viewBox="0 0 24 24" fill="#e0e0e0"><path d="M12 20l2-2h-4l2 2zm0-4c3.866 0 7 1.343 9 3l3-3C19.5 11.5 4.5 11.5 0 16l3 3c2-1.657 5.134-3 9-3z"/></svg>235 <!-- Battery -->236 <svg class="icon-small" viewBox="0 0 28 24" fill="none" stroke="#e0e0e0" stroke-width="2">237 <rect x="2" y="6" width="22" height="12" rx="2"></rect>238 <rect x="4" y="8" width="14" height="8" fill="#e0e0e0"></rect>239 <rect x="24" y="9" width="2" height="6" fill="#e0e0e0"></rect>240 </svg>241 </div>242 </div>243 244 <!-- Search bar -->245 <div class="search-bar">246 <!-- Back -->247 <div class="action-icon">248 <svg width="56" height="56" viewBox="0 0 24 24" fill="#eaeaea"><path d="M15.5 3.5L7 12l8.5 8.5-1.5 1.5L4 12l10-10 1.5 1.5z"/></svg>249 </div>250 <div class="pill">251 <div class="text">It's A Man's Man's M...</div>252 <div class="circle-ghost">253 <svg width="28" height="28" viewBox="0 0 24 24" fill="#c8c8c8"><path d="M18.3 5.71L12 12.01l-6.3-6.3-1.41 1.41L10.59 13.4l-6.3 6.3 1.41 1.41 6.3-6.3 6.3 6.3 1.41-1.41-6.3-6.3 6.3-6.3z"/></svg>254 </div>255 </div>256 <!-- Mic -->257 <div class="action-icon">258 <svg width="58" height="58" viewBox="0 0 24 24" fill="#eaeaea"><path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11h-2z"/></svg>259 </div>260 <!-- Cast -->261 <div class="action-icon">262 <svg width="58" height="58" viewBox="0 0 24 24" fill="#eaeaea"><path d="M3 5h18a2 2 0 0 1 2 2v10h-2V7H3v2H1V7a2 2 0 0 1 2-2z"/><path d="M1 17v2h3a5 5 0 0 0-3-2zm0-4v2a7 7 0 0 1 7 7h2c0-5.523-4.477-10-10-10z"/></svg>263 </div>264 <!-- Menu -->265 <div class="action-icon">266 <svg width="58" height="58" viewBox="0 0 24 24" fill="#eaeaea"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>267 </div>268 </div>269 270 <!-- Helper links -->271 <div class="helper-links">272 <div>Showing results for <span class="link">It's A Man's Man's Man's World (Stereo) song by Luciano Pavarotti and James Brown</span></div>273 <div style="margin-top: 10px;">Search instead for <span class="link">It's A Man's Man's Man's World (Stereo) song by Luciano Pavarotti & James Brown</span></div>274 </div>275 276 <!-- Big banner image -->277 <div class="img" style="height: 650px; margin: 10px 18px 0 18px; border-radius: 16px;">278 [IMG: Lofi Beats room art with large headline text "Lofi Beats to Start Your Day"]279 </div>280 281 <!-- Ad metadata -->282 <div class="ad-meta">283 <div class="ad-row">284 <div class="avatar">AV</div>285 <div class="ad-text">286 <div class="title">Join me, Boarderella, as we dive into the enchanting world of Late Night Lofi</div>287 <div class="subtitle">LoFi Beats for Late Nights <span style="color:#9e9e9e">Ad</span> • Boarderella</div>288 </div>289 <div style="margin-left:auto;">290 <svg width="40" height="40" viewBox="0 0 24 24" fill="#aaaaaa"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>291 </div>292 </div>293 </div>294 295 <!-- Buttons -->296 <div class="cta-row">297 <div class="btn">Watch</div>298 <div class="btn primary">Subscribe</div>299 </div>300 301 <!-- Video card -->302 <div class="video-card">303 <div class="img thumb">304 [IMG: VEVO performance thumbnail – two singers on stage embracing]305 <div class="vevo">vevo</div>306 <div class="badge">4:59</div>307 </div>308 </div>309 310 <!-- Spacer to push content above bottom nav -->311 <div style="height: 120px;"></div>312 313 <!-- Home handle -->314 <div class="handle"></div>315 316 <!-- Bottom navigation -->317 <div class="bottom-nav">318 <div class="nav-item active">319 <svg class="icon" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 3l9 7v11h-6v-6H9v6H3V10l9-7z"/></svg>320 <div>Home</div>321 </div>322 <div class="nav-item">323 <svg class="icon" viewBox="0 0 24 24" fill="#d7d7d7"><path d="M4 4h16v16H4z" opacity="0.25"/><path d="M10 8l6 4-6 4V8z"/></svg>324 <div>Shorts</div>325 </div>326 <div class="nav-item" style="position: relative;">327 <div class="plus">328 <svg width="60" height="60" viewBox="0 0 24 24" fill="#e0e0e0"><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2h6z"/></svg>329 </div>330 </div>331 <div class="nav-item">332 <div style="position: relative;">333 <svg class="icon" viewBox="0 0 24 24" fill="#d7d7d7"><path d="M3 5h18v14H3z" opacity="0.25"/><path d="M10 8l6 4-6 4z"/></svg>334 <div class="red-dot"></div>335 </div>336 <div>Subscriptions</div>337 </div>338 <div class="nav-item">339 <svg class="icon" viewBox="0 0 24 24" fill="#d7d7d7"><path d="M4 5h16v2H4zM4 9h16v2H4zM4 13h10v2H4zM4 17h10v2H4z"/></svg>340 <div>Library</div>341 </div>342 </div>343 344</div>345</body>346</html>