GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - Biking Search</title>5<style>6 body { margin: 0; padding: 0; background: transparent; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #121212;13 color: #ffffff;14 font-family: Roboto, Arial, Helvetica, sans-serif;15 }16 17 /* Top status bar */18 .status-bar {19 height: 90px;20 padding: 0 28px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #e0e0e0;25 font-size: 34px;26 }27 .status-icons { display: flex; gap: 24px; align-items: center; }28 29 /* Search header */30 .top-bar {31 height: 140px;32 display: flex;33 align-items: center;34 padding: 0 24px;35 gap: 24px;36 }37 .icon-btn {38 width: 72px;39 height: 72px;40 border-radius: 36px;41 display: flex;42 align-items: center;43 justify-content: center;44 background: transparent;45 }46 .icon-btn svg { fill: #e0e0e0; width: 44px; height: 44px; }47 48 .search-pill {49 flex: 1;50 height: 90px;51 background: #1f1f1f;52 border-radius: 45px;53 display: flex;54 align-items: center;55 padding: 0 28px;56 box-shadow: inset 0 0 0 1px #2a2a2a;57 color: #ffffff;58 font-size: 42px;59 }60 .search-pill .spacer { flex: 1; }61 .search-pill .text { letter-spacing: 0.3px; }62 .search-pill .pill-icon {63 width: 64px; height: 64px; border-radius: 32px;64 display: flex; align-items: center; justify-content: center;65 }66 .search-pill .pill-icon svg { width: 36px; height: 36px; fill: #cfcfcf; }67 68 /* Hero banner image (Ad) */69 .hero {70 width: 1080px;71 height: 820px;72 background: #E0E0E0;73 border: 1px solid #BDBDBD;74 display: flex;75 align-items: center;76 justify-content: center;77 color: #757575;78 font-size: 40px;79 text-align: center;80 }81 82 /* Ad details */83 .ad-meta {84 padding: 22px 28px 0 28px;85 }86 .ad-meta .context {87 color: #bdbdbd;88 font-size: 34px;89 margin-bottom: 18px;90 }91 .ad-card .title {92 font-size: 46px;93 line-height: 1.2;94 margin-bottom: 16px;95 font-weight: 600;96 }97 .ad-card .subtitle {98 color: #c9c9c9;99 font-size: 36px;100 margin-bottom: 10px;101 }102 .ad-card .sponsored {103 color: #9aa0a6;104 font-size: 34px;105 margin-bottom: 24px;106 }107 .ad-actions {108 display: flex;109 gap: 28px;110 margin-top: 12px;111 }112 .btn-outline {113 height: 100px;114 flex: 0 0 330px;115 border-radius: 50px;116 border: 1px solid #3a3a3a;117 background: #1a1a1a;118 color: #e9e9e9;119 display: flex;120 align-items: center;121 justify-content: center;122 font-size: 40px;123 }124 .btn-primary {125 height: 100px;126 flex: 0 0 520px;127 border-radius: 50px;128 background: #3ea6ff;129 color: #0b0b0b;130 display: flex;131 align-items: center;132 justify-content: center;133 font-size: 40px;134 font-weight: 600;135 }136 137 /* Shorts section */138 .shorts {139 margin-top: 40px;140 padding: 0 28px;141 }142 .shorts-header {143 display: flex; align-items: center; gap: 16px;144 margin-bottom: 22px;145 }146 .shorts-header .bolt {147 width: 48px; height: 48px;148 background: #ff2d2d; border-radius: 10px;149 }150 .shorts-header .title { font-size: 44px; font-weight: 600; }151 .shorts-row {152 display: flex; gap: 24px;153 }154 .short-thumb {155 width: 332px; height: 332px;156 background: #E0E0E0;157 border: 1px solid #BDBDBD;158 display: flex; align-items: center; justify-content: center;159 color: #757575; font-size: 32px;160 border-radius: 20px;161 }162 163 /* Mini player bar */164 .mini-player {165 position: absolute;166 bottom: 176px;167 left: 0;168 width: 1080px;169 height: 140px;170 background: #222;171 border-top: 1px solid #2d2d2d;172 display: flex; align-items: center;173 padding: 0 28px;174 gap: 24px;175 }176 .mini-thumb {177 width: 220px; height: 120px; border-radius: 12px;178 background: #E0E0E0; border: 1px solid #BDBDBD;179 display: flex; align-items: center; justify-content: center;180 color: #757575; font-size: 26px;181 }182 .mini-content { flex: 1; }183 .mini-title { font-size: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }184 .mini-sub { font-size: 30px; color: #bdbdbd; }185 .mini-actions { display: flex; gap: 24px; }186 .circle-btn {187 width: 72px; height: 72px; border-radius: 36px;188 display: flex; align-items: center; justify-content: center;189 background: #2a2a2a;190 }191 .circle-btn svg { fill: #fff; width: 36px; height: 36px; }192 193 /* Bottom navigation */194 .bottom-nav {195 position: absolute;196 bottom: 0; left: 0;197 width: 1080px; height: 176px;198 background: #0f0f0f;199 border-top: 1px solid #2b2b2b;200 display: flex; align-items: center; justify-content: space-around;201 padding-top: 8px;202 }203 .nav-item {204 width: 160px;205 display: flex; flex-direction: column; align-items: center; gap: 10px;206 color: #dcdcdc; font-size: 28px;207 }208 .nav-item svg { width: 50px; height: 50px; fill: #dcdcdc; }209 .nav-dot {210 position: absolute;211 top: 18px; right: 36px;212 width: 16px; height: 16px; background: #ff0000; border-radius: 50%;213 }214</style>215</head>216<body>217<div id="render-target">218 219 <!-- Status bar -->220 <div class="status-bar">221 <div>7:05</div>222 <div class="status-icons">223 <!-- Simple wifi icon -->224 <svg viewBox="0 0 24 24" width="38" height="38"><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-2c-1-1-3-1-4 0z"/></svg>225 <!-- Battery icon -->226 <svg viewBox="0 0 24 24" width="38" height="38"><path d="M18 6h2v12h-2V6zM2 7c0-1.1.9-2 2-2h12c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V7zm2 0h12v10H4V7z"/></svg>227 </div>228 </div>229 230 <!-- Search header bar -->231 <div class="top-bar">232 <div class="icon-btn">233 <!-- Back arrow -->234 <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4 4 12l8 8 1.41-1.41L7.83 13H20v-2z"/></svg>235 </div>236 <div class="search-pill">237 <div class="text">Biking</div>238 <div class="spacer"></div>239 <div class="pill-icon">240 <!-- Clear X -->241 <svg viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round"/></svg>242 </div>243 </div>244 <div class="icon-btn">245 <!-- Microphone -->246 <svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm5 0a5 5 0 0 1-10 0H5a7 7 0 0 0 14 0h-2z"/></svg>247 </div>248 <div class="icon-btn">249 <!-- Cast icon -->250 <svg viewBox="0 0 24 24"><path d="M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3v-2h18V7H3V5zm0 6v2c3 0 6 3 6 6h2c0-5-3-8-8-8zm0 4v2c2 0 4 2 4 4h2c0-3-3-6-6-6zm0 4v2h2c0-1-1-2-2-2z"/></svg>251 </div>252 <div class="icon-btn">253 <!-- More vertical -->254 <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>255 </div>256 </div>257 258 <!-- Hero Banner -->259 <div class="hero">[IMG: Stryder Zeeta Max bike banner]</div>260 261 <!-- Ad Meta and actions -->262 <div class="ad-meta">263 <div class="context">Since you searched for biking</div>264 <div class="ad-card">265 <div class="title">Avail the exclusive ₹7000 launch discount now</div>266 <div class="subtitle">Unleash the maximum fun with Zeeta Max</div>267 <div class="sponsored">Sponsored · Stryder Bikes</div>268 <div class="ad-actions">269 <div class="btn-outline">Watch</div>270 <div class="btn-primary">Shop now</div>271 </div>272 </div>273 </div>274 275 <!-- Shorts section -->276 <div class="shorts">277 <div class="shorts-header">278 <div class="bolt"></div>279 <div class="title">Shorts</div>280 </div>281 <div class="shorts-row">282 <div class="short-thumb">[IMG: Shorts thumbnail 1]</div>283 <div class="short-thumb">[IMG: Bike handle close-up]</div>284 <div class="short-thumb">[IMG: Shorts thumbnail 3]</div>285 </div>286 </div>287 288 <!-- Mini player -->289 <div class="mini-player">290 <div class="mini-thumb">[IMG: Podcast cover]</div>291 <div class="mini-content">292 <div class="mini-title">This American Life: The Call</div>293 <div class="mini-sub">This American Life</div>294 </div>295 <div class="mini-actions">296 <div class="circle-btn">297 <!-- Play -->298 <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7-11-7z"/></svg>299 </div>300 <div class="circle-btn">301 <!-- Close -->302 <svg viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>303 </div>304 </div>305 </div>306 307 <!-- Bottom navigation -->308 <div class="bottom-nav">309 <div class="nav-item">310 <svg viewBox="0 0 24 24"><path d="M12 3l9 8h-3v8h-4v-5H10v5H6v-8H3l9-8z"/></svg>311 <div>Home</div>312 </div>313 <div class="nav-item">314 <svg viewBox="0 0 24 24"><path d="M8 4l8 4-4 3 4 3-8 4V4z" fill="#ff2d2d"/></svg>315 <div>Shorts</div>316 </div>317 <div class="nav-item">318 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#3ea6ff"/><path d="M12 7v10M7 12h10" stroke="#0f0f0f" stroke-width="2"/></svg>319 <div>+</div>320 </div>321 <div class="nav-item" style="position:relative;">322 <svg viewBox="0 0 24 24"><path d="M3 5h18v12H3z"/><path d="M10 8l6 4-6 4V8z" fill="#121212"/></svg>323 <div>Subscriptions</div>324 <div class="nav-dot"></div>325 </div>326 <div class="nav-item">327 <svg viewBox="0 0 24 24"><path d="M4 5h6v14H4zM14 5h6v14h-6z"/></svg>328 <div>Library</div>329 </div>330 </div>331 332</div>333</body>334</html>