GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Biking UI 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: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #0d0d0f;14 color: #fff;15 }16 17 /* Status bar */18 .status-bar {19 height: 70px;20 padding: 0 24px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #eaeaea;25 font-size: 30px;26 }27 .status-icons {28 display: flex;29 gap: 26px;30 align-items: center;31 }32 .icon {33 width: 34px;34 height: 34px;35 fill: #eaeaea;36 }37 38 /* Search header */39 .yt-header {40 display: flex;41 align-items: center;42 padding: 12px 20px 18px;43 gap: 16px;44 }45 .back-btn svg { width: 42px; height: 42px; fill: #d9d9d9; }46 .search-pill {47 flex: 1;48 height: 90px;49 background: #1a1a1f;50 border-radius: 45px;51 display: flex;52 align-items: center;53 padding: 0 28px;54 gap: 16px;55 border: 1px solid #2a2a2f;56 }57 .search-pill .search-text {58 flex: 1;59 font-size: 40px;60 color: #e8e8e8;61 }62 .pill-icon {63 width: 36px; height: 36px;64 display: inline-flex; align-items: center; justify-content: center;65 color: #bcbcbc;66 border-radius: 50%;67 }68 .yt-header-right {69 display: flex;70 gap: 26px;71 align-items: center;72 }73 .yt-header-right .icon { width: 40px; height: 40px; fill: #dcdcdc; }74 75 /* Hero banner */76 .hero-banner {77 width: 100%;78 height: 320px;79 background: #0f1320;80 border-top: 1px solid #1e1e25;81 border-bottom: 1px solid #1e1e25;82 display: flex;83 align-items: center;84 justify-content: center;85 }86 .hero-banner .img {87 width: 100%;88 height: 100%;89 background: #E0E0E0;90 border: 1px solid #BDBDBD;91 color: #424242;92 display: flex; align-items: center; justify-content: center;93 font-size: 34px;94 letter-spacing: 0.3px;95 }96 .hero-fab {97 position: absolute;98 right: 24px;99 top: 460px;100 width: 60px; height: 60px;101 background: #1f1f24;102 border-radius: 12px;103 border: 1px solid #333;104 display: flex; align-items: center; justify-content: center;105 }106 .hero-fab svg { width: 36px; height: 36px; fill: #cfcfcf; }107 108 /* since searched text */109 .context-text {110 padding: 18px 24px 8px;111 color: #b9b9b9;112 font-size: 34px;113 }114 115 /* Ad card */116 .ad-card {117 margin: 8px 24px 20px;118 background: #121216;119 border: 1px solid #242428;120 border-radius: 24px;121 padding: 26px;122 }123 .ad-row {124 display: grid;125 grid-template-columns: 80px 1fr 34px;126 gap: 18px;127 align-items: start;128 }129 .avatar {130 width: 80px; height: 80px; border-radius: 40px;131 background: #E0E0E0; border: 1px solid #BDBDBD;132 display: flex; align-items: center; justify-content: center;133 color: #555; font-size: 22px;134 }135 .ad-title {136 font-size: 42px; line-height: 52px; color: #fff; font-weight: 700;137 }138 .ad-sub {139 font-size: 34px; color: #c9c9c9; margin-top: 8px;140 }141 .ad-meta {142 margin-top: 14px; font-size: 30px; color: #9ea0a3;143 }144 .ad-actions {145 margin-top: 22px;146 display: flex; gap: 20px;147 }148 .btn {149 height: 88px; padding: 0 44px; border-radius: 44px;150 display: inline-flex; align-items: center; justify-content: center;151 font-size: 40px; font-weight: 600; border: 1px solid #2b2b2f;152 }153 .btn-secondary { background: #19191d; color: #eaeaea; }154 .btn-primary { background: #3a7bff; color: #fff; border-color: #3a7bff; }155 156 /* Shorts header */157 .shorts-header {158 padding: 18px 24px 14px;159 display: flex; align-items: center; gap: 16px;160 }161 .shorts-icon {162 width: 38px; height: 38px; fill: #ff3c3c;163 }164 .shorts-title { font-size: 48px; font-weight: 800; }165 166 /* Shorts grid */167 .shorts-grid {168 padding: 0 18px;169 display: grid;170 grid-template-columns: 1fr 1fr;171 gap: 22px;172 }173 .short-card {174 background: #121216;175 border-radius: 28px;176 overflow: hidden;177 border: 1px solid #242428;178 position: relative;179 height: 700px;180 }181 .short-img {182 position: absolute;183 left: 0; top: 0; right: 0; bottom: 0;184 background: #E0E0E0; border: 1px solid #BDBDBD; color: #555;185 display: flex; align-items: center; justify-content: center;186 font-size: 30px;187 text-align: center;188 padding: 10px;189 }190 .short-overlay {191 position: absolute;192 left: 0; right: 0; bottom: 0;193 background: linear-gradient(transparent, rgba(0,0,0,0.7));194 padding: 24px;195 color: #fff;196 }197 .short-caption {198 font-size: 40px; font-weight: 800; line-height: 48px;199 text-shadow: 0 1px 2px rgba(0,0,0,0.5);200 }201 .short-views {202 margin-top: 10px; font-size: 34px; color: #dcdcdc;203 }204 205 /* Mini player bar */206 .mini-player {207 position: absolute;208 left: 0; right: 0;209 bottom: 190px; /* keep above bottom nav */210 height: 140px;211 background: #0f0f13;212 border-top: 1px solid #22222a;213 display: flex; align-items: center; gap: 18px;214 padding: 10px 18px;215 }216 .mini-thumb {217 width: 210px; height: 118px;218 background: #E0E0E0; border: 1px solid #BDBDBD; color: #555;219 display: flex; align-items: center; justify-content: center;220 font-size: 26px;221 }222 .mini-info { flex: 1; }223 .mini-title { font-size: 38px; font-weight: 700; color: #fff; }224 .mini-sub { font-size: 30px; color: #bcbcbc; margin-top: 6px; }225 .mini-actions { display: flex; gap: 28px; align-items: center; padding-right: 10px; }226 .mini-actions .icon { width: 40px; height: 40px; fill: #dcdcdc; }227 228 /* Bottom nav */229 .bottom-nav {230 position: absolute;231 left: 0; right: 0; bottom: 0;232 height: 190px;233 background: #0d0d10;234 border-top: 1px solid #232328;235 display: flex; align-items: center; justify-content: space-around;236 padding: 12px 0 20px;237 }238 .nav-item {239 width: 18%;240 text-align: center;241 color: #cfcfcf;242 font-size: 28px;243 }244 .nav-item .nav-icon {245 width: 50px; height: 50px; fill: #cfcfcf;246 display: block; margin: 0 auto 10px;247 }248 249 /* Floating create button */250 .create-fab {251 position: absolute;252 bottom: 118px;253 left: 50%;254 transform: translateX(-50%);255 width: 120px; height: 120px;256 border-radius: 60px;257 background: #1b1c22;258 border: 3px solid #2b2f3a;259 display: flex; align-items: center; justify-content: center;260 box-shadow: 0 6px 16px rgba(0,0,0,0.5);261 }262 .create-plus {263 width: 68px; height: 68px; border-radius: 34px;264 background: #fff; color: #111; font-weight: 900;265 display: flex; align-items: center; justify-content: center;266 font-size: 46px;267 }268</style>269</head>270<body>271<div id="render-target">272 273 <!-- Status bar -->274 <div class="status-bar">275 <div>7:06</div>276 <div class="status-icons">277 <!-- Notification dot -->278 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/></svg>279 <!-- WiFi -->280 <svg class="icon" viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 5c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 5l2 2 2-2-2-2-2 2z"/></svg>281 <!-- Battery -->282 <svg class="icon" viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2" ry="2"/><rect x="20" y="10" width="2" height="4"/></svg>283 </div>284 </div>285 286 <!-- Search header -->287 <div class="yt-header">288 <div class="back-btn">289 <svg viewBox="0 0 24 24"><path d="M15 18 9 12l6-6" stroke="#d9d9d9" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>290 </div>291 <div class="search-pill">292 <div class="search-text">Biking</div>293 <div class="pill-icon">×</div>294 </div>295 <div class="yt-header-right">296 <!-- mic -->297 <svg class="icon" viewBox="0 0 24 24"><path d="M12 14a4 4 0 0 0 4-4V6a4 4 0 0 0-8 0v4a4 4 0 0 0 4 4zm-6-3h2a4 4 0 0 0 8 0h2c0 4-3 7-7 7s-7-3-7-7zm6 7v3h-2v-3h2z"/></svg>298 <!-- cast -->299 <svg class="icon" viewBox="0 0 24 24"><path d="M3 5h18a2 2 0 0 1 2 2v10h-4V9H5v10H1V7a2 2 0 0 1 2-2z"/><path d="M1 17c3 0 6 3 6 6H5c0-2.2-1.8-4-4-4v-2zm0-4c5 0 10 5 10 10H9c0-4.4-3.6-8-8-8v-2z"/></svg>300 <!-- more -->301 <svg class="icon" 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>302 </div>303 </div>304 305 <!-- Hero banner -->306 <div class="hero-banner">307 <div class="img">[IMG: Electric Bike Wheels Banner]</div>308 </div>309 <div class="hero-fab">310 <!-- open in new -->311 <svg viewBox="0 0 24 24"><path d="M5 5h9v2H7v10h10v-7h2v9H5V5z"/><path d="M21 3h-8v2h4.6L11 11.6l1.4 1.4L19 6.4V11h2V3z"/></svg>312 </div>313 314 <div class="context-text">Since you searched for <span style="font-weight:700;color:#fff;">biking</span></div>315 316 <!-- Ad card -->317 <div class="ad-card">318 <div class="ad-row">319 <div class="avatar">[Logo]</div>320 <div>321 <div class="ad-title">Avail the exclusive ₹7000 launch discount now</div>322 <div class="ad-sub">Unleash the maximum fun with Zeeta Max</div>323 <div class="ad-meta">Sponsored · Stryder Bikes</div>324 </div>325 <svg class="icon" 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>326 </div>327 <div class="ad-actions">328 <div class="btn btn-secondary">Watch</div>329 <div class="btn btn-primary">Shop now</div>330 </div>331 </div>332 333 <!-- Shorts header -->334 <div class="shorts-header">335 <svg class="shorts-icon" viewBox="0 0 24 24"><path d="M9 3l10 5-4 2 4 2-10 5V3z"/></svg>336 <div class="shorts-title">Shorts</div>337 </div>338 339 <!-- Shorts grid -->340 <div class="shorts-grid">341 <!-- Card 1 -->342 <div class="short-card">343 <div class="short-img">[IMG: Mountain Biker Clip]</div>344 <div class="short-overlay">345 <div class="short-caption">Mtb #shorts #mtb #bike #fyp</div>346 <div class="short-views">10M views</div>347 </div>348 </div>349 350 <!-- Card 2 -->351 <div class="short-card">352 <div class="short-img">[IMG: Grey Santa Cruz Mountain Bike]</div>353 <div class="short-overlay">354 <div class="short-caption">You should buy this $12K Mountain Bike.</div>355 <div class="short-views">241K views</div>356 </div>357 </div>358 </div>359 360 <!-- Mini player bar -->361 <div class="mini-player">362 <div class="mini-thumb">[IMG: Podcast Thumbnail]</div>363 <div class="mini-info">364 <div class="mini-title">This American Life: The Call</div>365 <div class="mini-sub">This American Life</div>366 </div>367 <div class="mini-actions">368 <!-- next/play -->369 <svg class="icon" viewBox="0 0 24 24"><path d="M8 5v14l11-7-11-7z"/></svg>370 <!-- close -->371 <svg class="icon" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6 6 18" stroke="#dcdcdc" stroke-width="2" fill="none" stroke-linecap="round"/></svg>372 </div>373 </div>374 375 <!-- Bottom nav -->376 <div class="bottom-nav">377 <div class="nav-item">378 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2h-4v-7H9v7H5a2 2 0 0 1-2-2v-9z"/></svg>379 Home380 </div>381 <div class="nav-item">382 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M9 3l10 5-4 2 4 2-10 5V3z"/></svg>383 Shorts384 </div>385 <div class="nav-item">386 <svg class="nav-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" opacity="0.2"/><path d="M12 6v12M6 12h12" stroke="#cfcfcf" stroke-width="2"/></svg>387 Create388 </div>389 <div class="nav-item">390 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M3 4h18v4H3V4zm0 6h18v4H3v-4zm0 6h18v4H3v-4z"/></svg>391 Subscriptions392 </div>393 <div class="nav-item">394 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M4 5h16v14H4V5zm4 2v4l4-2 4 2V7H8z"/></svg>395 Library396 </div>397 </div>398 399 <!-- floating create button -->400 <div class="create-fab">401 <div class="create-plus">+</div>402 </div>403 404</div>405</body>406</html>