GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - YouTube Search</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Roboto, Arial, sans-serif; }7 #render-target {8 position: relative;9 overflow: hidden;10 width: 1080px;11 height: 2400px;12 background: #0b0b0b;13 color: #ffffff;14 }15 16 /* Status bar */17 .status-bar {18 height: 120px;19 padding: 0 32px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #e0e0e0;24 font-size: 44px;25 letter-spacing: 0.5px;26 }27 .sb-right {28 display:flex;29 gap:28px;30 align-items:center;31 }32 .sb-dot { width:16px; height:16px; background:#e0e0e0; border-radius:50%; display:inline-block; }33 .sb-icon {34 width:40px; height:40px;35 display:inline-flex; align-items:center; justify-content:center;36 }37 .sb-battery {38 width:56px; height:26px; border:3px solid #e0e0e0; border-radius:6px; position:relative;39 }40 .sb-battery::after { content:""; position:absolute; right:-10px; top:6px; width:6px; height:14px; background:#e0e0e0; border-radius:2px; }41 .sb-battery .level { position:absolute; top:4px; left:4px; right:10px; bottom:4px; background:#e0e0e0; border-radius:4px; }42 43 /* Search area */44 .search-area {45 height: 160px;46 display:flex;47 align-items:center;48 padding: 0 24px;49 gap: 18px;50 }51 .back-btn {52 width: 80px; height: 80px; border:none; background:transparent; padding:0; cursor:pointer;53 }54 .back-btn svg { width:60px; height:60px; fill:none; stroke:#e0e0e0; stroke-width:4; }55 .search-input {56 flex:1;57 height: 110px;58 border-radius: 56px;59 background: #1f1f1f;60 display:flex;61 align-items:center;62 padding: 0 32px;63 position:relative;64 }65 .search-placeholder {66 color:#bdbdbd;67 font-size: 46px;68 }69 .mic-inline {70 position:absolute; right:22px; top:50%; transform:translateY(-50%);71 width:72px; height:72px; border-radius:50%;72 display:flex; align-items:center; justify-content:center;73 }74 .mic-inline svg { width:52px; height:52px; fill:#bdbdbd; }75 76 /* History list */77 .history-list {78 padding-top: 12px;79 height: 1180px;80 overflow: hidden;81 }82 .item {83 display:flex;84 align-items:center;85 padding: 28px 24px;86 gap: 28px;87 border-bottom: 1px solid #1a1a1a;88 }89 .clock {90 width: 52px; height: 52px;91 }92 .clock svg { width:52px; height:52px; fill:none; stroke:#bdbdbd; stroke-width:4; }93 .item-text {94 flex:1;95 font-size: 48px;96 color:#ffffff;97 }98 .thumb {99 width: 180px; height: 100px;100 background:#E0E0E0;101 border:1px solid #BDBDBD;102 color:#757575;103 display:flex;104 align-items:center;105 justify-content:center;106 font-size: 28px;107 border-radius: 6px;108 }109 110 /* Floating mic button */111 .floating-mic {112 position:absolute;113 right: 44px;114 bottom: 980px;115 width: 160px; height: 160px;116 background:#121212;117 border-radius:50%;118 box-shadow: 0 6px 20px rgba(0,0,0,0.6);119 display:flex; align-items:center; justify-content:center;120 border: 2px solid #1f1f1f;121 }122 .floating-mic svg { width:80px; height:80px; fill:#ffffff; opacity:0.95; }123 124 /* Keyboard */125 .keyboard {126 position:absolute;127 left:0; bottom:0;128 width:100%;129 height: 860px;130 background:#111111;131 border-top: 1px solid #1f1f1f;132 padding: 40px 36px 32px;133 box-sizing:border-box;134 }135 .kbd-top {136 display:flex; align-items:center; gap:28px; margin-bottom: 30px;137 }138 .kbd-top .small-btn {139 width: 80px; height:80px; background:#1f1f1f; border-radius:18px; display:flex; align-items:center; justify-content:center;140 color:#cfcfcf; font-size:36px;141 }142 .keys-row {143 display:grid;144 grid-auto-rows: 110px;145 gap: 12px;146 margin-bottom: 18px;147 }148 .row1 { grid-template-columns: repeat(10, 1fr); }149 .row2 { grid-template-columns: repeat(9, 1fr); padding: 0 40px; }150 .row3 { grid-template-columns: repeat(8, 1fr); }151 .key {152 background:#1f1f1f;153 border-radius: 20px;154 color:#ffffff;155 font-size: 44px;156 display:flex; align-items:center; justify-content:center;157 box-shadow: inset 0 -2px 0 rgba(255,255,255,0.04);158 }159 .bottom-row {160 display:flex; gap:12px; align-items:center; margin-top: 10px;161 }162 .key-wide { flex:1; height:110px; background:#1f1f1f; border-radius:20px; display:flex; align-items:center; justify-content:center; color:#ffffff; font-size:42px; }163 .search-key {164 width: 140px; height:110px; background:#b9e7ff; color:#0b0b0b; font-weight:600; border-radius:30px; display:flex; align-items:center; justify-content:center;165 }166 .search-key svg { width:50px; height:50px; }167 168</style>169</head>170<body>171<div id="render-target">172 173 <!-- Status bar -->174 <div class="status-bar">175 <div>6:21</div>176 <div class="sb-right">177 <div class="sb-icon">178 <!-- Signal bars -->179 <svg viewBox="0 0 24 24">180 <rect x="2" y="16" width="3" height="6" fill="#e0e0e0"></rect>181 <rect x="7" y="13" width="3" height="9" fill="#e0e0e0"></rect>182 <rect x="12" y="9" width="3" height="13" fill="#e0e0e0"></rect>183 <rect x="17" y="6" width="3" height="16" fill="#e0e0e0"></rect>184 </svg>185 </div>186 <div class="sb-dot"></div>187 <div class="sb-dot"></div>188 <div class="sb-battery"><div class="level"></div></div>189 </div>190 </div>191 192 <!-- Search bar -->193 <div class="search-area">194 <button class="back-btn" aria-label="Back">195 <svg viewBox="0 0 24 24">196 <path d="M15 5 L6 12 L15 19" stroke-linecap="round" stroke-linejoin="round"></path>197 </svg>198 </button>199 <div class="search-input">200 <div class="search-placeholder">Search YouTube</div>201 <div class="mic-inline">202 <svg viewBox="0 0 24 24">203 <path d="M12 3c2 0 3 1.5 3 3.5v5c0 2-1 3.5-3 3.5s-3-1.5-3-3.5v-5C9 4.5 10 3 12 3z" />204 <path d="M5 11c0 4 3 7 7 7s7-3 7-7" fill="none" stroke="#bdbdbd" stroke-width="2" />205 <rect x="11" y="19" width="2" height="3" fill="#bdbdbd"></rect>206 </svg>207 </div>208 </div>209 <div style="width:80px; height:80px; display:flex; align-items:center; justify-content:center;">210 <!-- Voice icon in header menu area (rounded settings icon) -->211 <svg viewBox="0 0 24 24" width="48" height="48">212 <circle cx="12" cy="12" r="10" fill="#1f1f1f"></circle>213 </svg>214 </div>215 </div>216 217 <!-- History results -->218 <div class="history-list">219 220 <div class="item">221 <div class="clock">222 <svg viewBox="0 0 24 24">223 <circle cx="12" cy="12" r="9"></circle>224 <path d="M12 6v6l4 2" stroke-linecap="round"></path>225 </svg>226 </div>227 <div class="item-text">luciano pavarotti</div>228 <div class="thumb">[IMG: Pavarotti Video]</div>229 </div>230 231 <div class="item">232 <div class="clock">233 <svg viewBox="0 0 24 24">234 <circle cx="12" cy="12" r="9"></circle>235 <path d="M12 6v6l4 2" stroke-linecap="round"></path>236 </svg>237 </div>238 <div class="item-text">luciano pavarotti playlist</div>239 <div class="thumb">[IMG: Playlist]</div>240 </div>241 242 <div class="item">243 <div class="clock">244 <svg viewBox="0 0 24 24">245 <circle cx="12" cy="12" r="9"></circle>246 <path d="M12 6v6l4 2" stroke-linecap="round"></path>247 </svg>248 </div>249 <div class="item-text">play luciano pavarotti playlist</div>250 <div class="thumb">[IMG: Playlist]</div>251 </div>252 253 <div class="item">254 <div class="clock">255 <svg viewBox="0 0 24 24">256 <circle cx="12" cy="12" r="9"></circle>257 <path d="M12 6v6l4 2" stroke-linecap="round"></path>258 </svg>259 </div>260 <div class="item-text">play luciano pavarotti</div>261 <div class="thumb">[IMG: Classical Performance]</div>262 </div>263 264 <div class="item">265 <div class="clock">266 <svg viewBox="0 0 24 24">267 <circle cx="12" cy="12" r="9"></circle>268 <path d="M12 6v6l4 2" stroke-linecap="round"></path>269 </svg>270 </div>271 <div class="item-text">wedding dresses ideas for arabic wedding</div>272 <div class="thumb">[IMG: Wedding Dresses]</div>273 </div>274 275 <div class="item">276 <div class="clock">277 <svg viewBox="0 0 24 24">278 <circle cx="12" cy="12" r="9"></circle>279 <path d="M12 6v6l4 2" stroke-linecap="round"></path>280 </svg>281 </div>282 <div class="item-text">fabgem</div>283 <div class="thumb">[IMG: Channel/Video]</div>284 </div>285 286 <div class="item">287 <div class="clock">288 <svg viewBox="0 0 24 24">289 <circle cx="12" cy="12" r="9"></circle>290 <path d="M12 6v6l4 2" stroke-linecap="round"></path>291 </svg>292 </div>293 <div class="item-text">chal tere ishq mein</div>294 <div class="thumb">[IMG: Music Video]</div>295 </div>296 297 <div class="item">298 <div class="clock">299 <svg viewBox="0 0 24 24">300 <circle cx="12" cy="12" r="9"></circle>301 <path d="M12 6v6l4 2" stroke-linecap="round"></path>302 </svg>303 </div>304 <div class="item-text">dance arabic song</div>305 <div class="thumb">[IMG: Arabic Fusion]</div>306 </div>307 308 <div class="item">309 <div class="clock">310 <svg viewBox="0 0 24 24">311 <circle cx="12" cy="12" r="9"></circle>312 <path d="M12 6v6l4 2" stroke-linecap="round"></path>313 </svg>314 </div>315 <div class="item-text">wedding dance on arabic songs</div>316 <div class="thumb">[IMG: Wedding Dance]</div>317 </div>318 319 </div>320 321 <!-- Floating voice button -->322 <div class="floating-mic">323 <svg viewBox="0 0 24 24">324 <path d="M12 3c2 0 3 1.5 3 3.5v5c0 2-1 3.5-3 3.5s-3-1.5-3-3.5v-5C9 4.5 10 3 12 3z" />325 <path d="M5 11c0 4 3 7 7 7s7-3 7-7" fill="none" stroke="#ffffff" stroke-width="2" />326 <rect x="11" y="19" width="2" height="3" fill="#ffffff"></rect>327 </svg>328 </div>329 330 <!-- Keyboard -->331 <div class="keyboard">332 <div class="kbd-top">333 <div class="small-btn">⬛</div>334 <div class="small-btn">🙂</div>335 <div class="small-btn">GIF</div>336 <div class="small-btn">⚙️</div>337 <div class="small-btn">G</div>338 <div class="small-btn">🎨</div>339 <div class="small-btn">🔔</div>340 </div>341 342 <div class="keys-row row1">343 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>344 <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>345 </div>346 347 <div class="keys-row row2">348 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>349 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>350 </div>351 352 <div class="keys-row row3">353 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>354 <div class="key">b</div><div class="key">n</div><div class="key">m</div>355 <div class="key">⌫</div>356 </div>357 358 <div class="bottom-row">359 <div class="key-wide">?123</div>360 <div class="key-wide">,</div>361 <div class="key-wide">🙂</div>362 <div class="key-wide" style="flex:3;">space</div>363 <div class="key-wide">.</div>364 <div class="search-key">365 <svg viewBox="0 0 24 24">366 <circle cx="10" cy="10" r="7" fill="#0b0b0b"></circle>367 <rect x="15" y="15" width="7" height="3" transform="rotate(45 15 15)" fill="#0b0b0b"></rect>368 </svg>369 </div>370 </div>371 </div>372 373</div>374</body>375</html>