GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Youtube Search - Dark</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #121212;15 color: #FFFFFF;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 92px;25 color: #eaeaea;26 font-size: 34px;27 line-height: 92px;28 padding: 0 28px;29 box-sizing: border-box;30 }31 .status-right { position:absolute; right:24px; top:0; height:92px; display:flex; align-items:center; gap:24px; }32 .dot { width:10px; height:10px; background:#BDBDBD; border-radius:50%; display:inline-block; opacity:.8; }33 .wifi {34 width: 44px; height: 44px;35 }36 .battery {37 width: 52px; height: 28px;38 border:2px solid #eaeaea; border-radius:6px; position:relative;39 }40 .battery::after {41 content:""; position:absolute; right:-8px; top:6px; width:6px; height:14px; background:#eaeaea; border-radius:1px;42 }43 .battery .lvl { position:absolute; top:2px; left:2px; bottom:2px; right:18px; background:#eaeaea; border-radius:3px; }44 45 /* Top search bar */46 .top-search {47 position: absolute;48 top: 100px;49 left: 0;50 width: 1080px;51 height: 96px;52 display: flex;53 align-items: center;54 padding: 0 24px;55 box-sizing: border-box;56 gap: 20px;57 }58 .icon-btn {59 width: 72px; height: 72px; border-radius: 36px;60 display:flex; align-items:center; justify-content:center;61 color:#eaeaea;62 }63 .search-field {64 flex:1;65 height: 72px;66 background:#2a2a2a;67 border-radius: 36px;68 padding: 0 28px;69 box-sizing: border-box;70 display:flex; align-items:center;71 color:#bdbdbd; font-size:34px;72 }73 .mic-round {74 width: 72px; height: 72px; background:#2a2a2a; border-radius:50%;75 display:flex; align-items:center; justify-content:center;76 }77 78 /* Suggestions list */79 .suggestions {80 position:absolute;81 top: 212px;82 left:0;83 right:0;84 bottom: 930px; /* leave space for keyboard */85 overflow:hidden;86 }87 .list {88 height:100%;89 overflow-y:hidden; /* static image style */90 padding-top: 6px;91 }92 .row {93 display:flex; align-items:center;94 padding: 26px 24px;95 gap: 18px;96 box-sizing:border-box;97 border-bottom: 1px solid #1f1f1f;98 }99 .clock {100 width: 46px; height: 46px; opacity:.85;101 }102 .title {103 flex:1; color:#f1f1f1; font-size:38px; line-height:1.2;104 }105 .action {106 width: 46px; height: 46px; opacity:.9;107 }108 .thumb {109 width: 190px; height: 108px;110 background:#E0E0E0; border:1px solid #BDBDBD;111 color:#757575; font-size:22px; display:flex; align-items:center; justify-content:center; text-align:center;112 border-radius:8px;113 }114 115 /* Floating voice button */116 .floating-mic {117 position:absolute;118 right: 36px;119 top: 1180px;120 width: 118px; height:118px; border-radius:59px;121 background:#1d1d1d; box-shadow:0 6px 20px rgba(0,0,0,.4);122 display:flex; align-items:center; justify-content:center;123 }124 125 /* Keyboard */126 .keyboard {127 position:absolute;128 left:0; right:0; bottom:0;129 height: 900px;130 background:#1c1c1c;131 border-top:1px solid #262626;132 box-sizing:border-box;133 }134 .kb-tools {135 height: 90px; display:flex; align-items:center; gap:56px; padding:0 40px; box-sizing:border-box;136 }137 .tool {138 width:72px; height:72px; border-radius:16px; background:#2b2b2b; display:flex; align-items:center; justify-content:center;139 }140 .kb-rows { padding: 10px 18px 0; }141 .kb-row {142 display:flex; justify-content:center; gap:18px; margin: 18px 0;143 }144 .key {145 height:120px; min-width:88px; padding:0 20px;146 background:#2a2a2a; border-radius:22px; color:#eee; display:flex; align-items:center; justify-content:center; font-size:42px;147 }148 .key.small { min-width:88px; }149 .key.medium { min-width:116px; }150 .key.wide { min-width:168px; }151 .key.space { min-width:520px; }152 .key.back { min-width:150px; }153 .key.shift { min-width:150px; }154 .accent { background:#e8c0cc; color:#222; }155 156 /* Bottom gesture bar */157 .gesture {158 position:absolute; bottom:14px; left:50%; transform:translateX(-50%);159 width: 280px; height: 8px; background:#eaeaea; border-radius:4px; opacity:.8;160 }161</style>162</head>163<body>164<div id="render-target">165 166 <!-- Status bar -->167 <div class="status-bar">168 5:24169 <div class="status-right">170 <!-- mimic small icons -->171 <span style="font-size:36px; opacity:.8;">👻👻👻</span>172 <span style="font-size:36px; opacity:.8;">B</span>173 <span class="dot"></span>174 <svg class="wifi" viewBox="0 0 24 24" fill="none" stroke="#eaeaea" stroke-width="2">175 <path d="M2 8a16 16 0 0 1 20 0"/>176 <path d="M5 11a11 11 0 0 1 14 0"/>177 <path d="M8 14a6 6 0 0 1 8 0"/>178 <circle cx="12" cy="18" r="1.6" fill="#eaeaea"></circle>179 </svg>180 <div class="battery"><div class="lvl"></div></div>181 </div>182 </div>183 184 <!-- Top search area -->185 <div class="top-search">186 <div class="icon-btn">187 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#eaeaea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">188 <path d="M15 18l-6-6 6-6"></path>189 </svg>190 </div>191 <div class="search-field">Search YouTube</div>192 <div class="mic-round">193 <svg width="30" height="30" viewBox="0 0 24 24" fill="#eaeaea">194 <path d="M12 14a3 3 0 0 0 3-3V7a3 3 0 0 0-6 0v4a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 14 0h-2zM11 19h2v3h-2z"/>195 </svg>196 </div>197 </div>198 199 <!-- Suggestions -->200 <div class="suggestions">201 <div class="list">202 <div class="row">203 <svg class="clock" viewBox="0 0 24 24" fill="none" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round">204 <circle cx="12" cy="12" r="9"></circle>205 <path d="M12 7v6l4 2"></path>206 </svg>207 <div class="title">how to make a workbench diy woodworking</div>208 <svg class="action" viewBox="0 0 24 24" fill="none" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round">209 <path d="M7 17l10-10"></path>210 <path d="M7 7h10v10"></path>211 </svg>212 <div class="thumb">[IMG: woodworking]</div>213 </div>214 215 <div class="row">216 <svg class="clock" viewBox="0 0 24 24" fill="none" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round">217 <circle cx="12" cy="12" r="9"></circle>218 <path d="M12 7v6l4 2"></path>219 </svg>220 <div class="title">how to make a paper airplane</div>221 <svg class="action" viewBox="0 0 24 24" fill="none" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round">222 <path d="M7 17l10-10"></path>223 <path d="M7 7h10v10"></path>224 </svg>225 <div class="thumb">[IMG: paper airplane]</div>226 </div>227 228 <div class="row">229 <svg class="clock" viewBox="0 0 24 24" fill="none" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round">230 <circle cx="12" cy="12" r="9"></circle>231 <path d="M12 7v6l4 2"></path>232 </svg>233 <div class="title">how to makea paper airplane</div>234 <svg class="action" viewBox="0 0 24 24" fill="none" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round">235 <path d="M7 17l10-10"></path>236 <path d="M7 7h10v10"></path>237 </svg>238 <div class="thumb">[IMG: paper airplane]</div>239 </div>240 241 <div class="row">242 <svg class="clock" viewBox="0 0 24 24" fill="none" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round">243 <circle cx="12" cy="12" r="9"></circle>244 <path d="M12 7v6l4 2"></path>245 </svg>246 <div class="title">how to make a paper airplane.</div>247 <svg class="action" viewBox="0 0 24 24" fill="none" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round">248 <path d="M7 17l10-10"></path>249 <path d="M7 7h10v10"></path>250 </svg>251 <div class="thumb">[IMG: paper airplane]</div>252 </div>253 254 <div class="row">255 <svg class="clock" viewBox="0 0 24 24" fill="none" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round">256 <circle cx="12" cy="12" r="9"></circle>257 <path d="M12 7v6l4 2"></path>258 </svg>259 <div class="title">rubik cub</div>260 <svg class="action" viewBox="0 0 24 24" fill="none" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round">261 <path d="M7 17l10-10"></path>262 <path d="M7 7h10v10"></path>263 </svg>264 <div class="thumb">[IMG: rubik cube]</div>265 </div>266 267 <div class="row">268 <svg class="clock" viewBox="0 0 24 24" fill="none" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round">269 <circle cx="12" cy="12" r="9"></circle>270 <path d="M12 7v6l4 2"></path>271 </svg>272 <div class="title">playlist</div>273 <svg class="action" viewBox="0 0 24 24" fill="none" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round">274 <path d="M7 17l10-10"></path>275 <path d="M7 7h10v10"></path>276 </svg>277 <div class="thumb">[IMG: music art]</div>278 </div>279 280 <div class="row">281 <svg class="clock" viewBox="0 0 24 24" fill="none" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round">282 <circle cx="12" cy="12" r="9"></circle>283 <path d="M12 7v6l4 2"></path>284 </svg>285 <div class="title">how to solve rubik cube</div>286 <svg class="action" viewBox="0 0 24 24" fill="none" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round">287 <path d="M7 17l10-10"></path>288 <path d="M7 7h10v10"></path>289 </svg>290 <div class="thumb">[IMG: cube tutorial]</div>291 </div>292 293 <div class="row">294 <svg class="clock" viewBox="0 0 24 24" fill="none" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round">295 <circle cx="12" cy="12" r="9"></circle>296 <path d="M12 7v6l4 2"></path>297 </svg>298 <div class="title">how to make a paper airplane that flies far</div>299 <svg class="action" viewBox="0 0 24 24" fill="none" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round">300 <path d="M7 17l10-10"></path>301 <path d="M7 7h10v10"></path>302 </svg>303 <div class="thumb">[IMG: world record plane]</div>304 </div>305 306 <div class="row">307 <svg class="clock" viewBox="0 0 24 24" fill="none" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round">308 <circle cx="12" cy="12" r="9"></circle>309 <path d="M12 7v6l4 2"></path>310 </svg>311 <div class="title">how to make. paper airplane</div>312 <svg class="action" viewBox="0 0 24 24" fill="none" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round">313 <path d="M7 17l10-10"></path>314 <path d="M7 7h10v10"></path>315 </svg>316 <div class="thumb">[IMG: blue paper plane]</div>317 </div>318 </div>319 </div>320 321 <!-- Floating mic button -->322 <div class="floating-mic">323 <svg width="48" height="48" viewBox="0 0 24 24" fill="#ffffff">324 <path d="M12 14a3 3 0 0 0 3-3V7a3 3 0 0 0-6 0v4a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 14 0h-2zM11 19h2v3h-2z"/>325 </svg>326 </div>327 328 <!-- Keyboard -->329 <div class="keyboard">330 <div class="kb-tools">331 <div class="tool">332 <svg width="38" height="38" viewBox="0 0 24 24" fill="#ddd"><rect x="3" y="4" width="18" height="6" rx="1"/><rect x="3" y="14" width="18" height="6" rx="1"/></svg>333 </div>334 <div class="tool"><span style="font-size:34px">😊</span></div>335 <div class="tool"><span style="color:#ddd; font-weight:bold;">GIF</span></div>336 <div class="tool"><svg width="36" height="36" viewBox="0 0 24 24" fill="#ddd"><circle cx="12" cy="12" r="10"/><path d="M8 12h8M12 8v8" stroke="#1c1c1c" stroke-width="2"/></svg></div>337 <div class="tool"><span style="font-size:30px; color:#ddd">A</span></div>338 <div class="tool">339 <svg width="30" height="30" viewBox="0 0 24 24" fill="#ddd">340 <path d="M12 14a3 3 0 0 0 3-3V7a3 3 0 0 0-6 0v4a3 3 0 0 0 3 3zM11 19h2v3h-2z"/>341 </svg>342 </div>343 </div>344 345 <div class="kb-rows">346 <div class="kb-row">347 <div class="key small">q</div>348 <div class="key small">w</div>349 <div class="key small">e</div>350 <div class="key small">r</div>351 <div class="key small">t</div>352 <div class="key small">y</div>353 <div class="key small">u</div>354 <div class="key small">i</div>355 <div class="key small">o</div>356 <div class="key small">p</div>357 </div>358 359 <div class="kb-row" style="padding-left:60px;">360 <div class="key small">a</div>361 <div class="key small">s</div>362 <div class="key small">d</div>363 <div class="key small">f</div>364 <div class="key small">g</div>365 <div class="key small">h</div>366 <div class="key small">j</div>367 <div class="key small">k</div>368 <div class="key small">l</div>369 </div>370 371 <div class="kb-row">372 <div class="key shift">⇧</div>373 <div class="key small">z</div>374 <div class="key small">x</div>375 <div class="key small">c</div>376 <div class="key small">v</div>377 <div class="key small">b</div>378 <div class="key small">n</div>379 <div class="key small">m</div>380 <div class="key back">⌫</div>381 </div>382 383 <div class="kb-row" style="gap:22px;">384 <div class="key wide accent">?123</div>385 <div class="key medium">,</div>386 <div class="key medium">😊</div>387 <div class="key space"></div>388 <div class="key medium">.</div>389 <div class="key wide accent">390 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">391 <circle cx="11" cy="11" r="6"></circle>392 <path d="M20 20l-4-4"></path>393 </svg>394 </div>395 </div>396 </div>397 </div>398 399 <div class="gesture"></div>400</div>401</body>402</html>