GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>YouTube Search - Dark UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #121212; color: #FFFFFF;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute; top: 0; left: 0; right: 0;18 height: 90px; padding: 0 28px;19 display: flex; align-items: center; justify-content: space-between;20 color: #ffffff; font-weight: 500; letter-spacing: 0.5px;21 }22 .status-left { display: flex; align-items: center; gap: 18px; }23 .status-right { display: flex; align-items: center; gap: 20px; }24 .status-dot { width: 8px; height: 8px; background: #ffffff; border-radius: 50%; opacity: 0.9; }25 .icon-sys svg { width: 38px; height: 38px; fill: none; stroke: #fff; stroke-width: 3; }26 27 /* Header search */28 .search-header {29 position: absolute; top: 90px; left: 0; right: 0;30 height: 120px; padding: 0 24px;31 display: flex; align-items: center; gap: 18px;32 }33 .back-btn {34 width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;35 }36 .back-btn svg { width: 40px; height: 40px; fill: none; stroke: #ffffff; stroke-width: 5; }37 .search-bar {38 flex: 1; height: 84px; border-radius: 42px;39 background: #2a2a2a; display: flex; align-items: center; padding: 0 24px;40 color: #bdbdbd; font-size: 36px;41 }42 .search-placeholder { flex: 1; }43 .mic-pill {44 width: 64px; height: 64px; border-radius: 50%;45 background: #3a3a3a; display: flex; align-items: center; justify-content: center;46 }47 .mic-pill svg { width: 34px; height: 34px; fill: #ffffff; }48 49 /* Results list */50 .results {51 position: absolute; top: 210px; left: 0; right: 0; bottom: 930px; /* leaves room for mini-player + keyboard */52 overflow: hidden; padding: 0 24px;53 }54 .result-item {55 display: grid; grid-template-columns: 72px 1fr 170px 60px;56 align-items: center; gap: 18px;57 height: 124px; border-bottom: 1px solid rgba(255,255,255,0.06);58 }59 .history-ic svg { width: 48px; height: 48px; stroke: #bdbdbd; fill: none; stroke-width: 4; }60 .result-text { font-size: 40px; line-height: 1.2; color: #ffffff; }61 .thumb {62 width: 170px; height: 96px; background: #E0E0E0; border: 1px solid #BDBDBD;63 display: flex; justify-content: center; align-items: center; color: #757575; font-size: 24px; text-align: center; border-radius: 6px;64 }65 .open-ic svg { width: 42px; height: 42px; stroke: #bdbdbd; fill: none; stroke-width: 4; }66 67 /* Floating voice button */68 .floating-mic {69 position: absolute; right: 30px; top: 1180px;70 width: 128px; height: 128px; border-radius: 64px;71 background: #1f1f1f; box-shadow: 0 8px 16px rgba(0,0,0,0.6);72 display: flex; align-items: center; justify-content: center;73 }74 .floating-mic svg { width: 56px; height: 56px; fill: #ffffff; }75 76 /* Mini player */77 .mini-player {78 position: absolute; left: 0; right: 0; bottom: 900px;79 height: 180px; display: flex; align-items: center;80 padding: 12px 24px; gap: 18px; background: rgba(0,0,0,0.55);81 }82 .mini-thumb {83 width: 300px; height: 160px; background: #E0E0E0; border: 1px solid #BDBDBD;84 display: flex; justify-content: center; align-items: center; color: #757575; font-size: 26px; border-radius: 6px;85 }86 .mini-info { flex: 1; display: flex; flex-direction: column; gap: 10px; }87 .mini-title { font-size: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }88 .mini-sub { font-size: 28px; color: #bdbdbd; }89 .mini-controls { display: flex; align-items: center; gap: 26px; }90 .progress {91 position: absolute; left: 0; right: 0; bottom: 900px; height: 6px; background: #e53935;92 }93 .control-btn { width: 64px; height: 64px; border-radius: 32px; display: flex; align-items: center; justify-content: center; background: #242424; }94 .control-btn svg { width: 32px; height: 32px; stroke: #fff; fill: none; stroke-width: 4; }95 96 /* Keyboard mock */97 .keyboard {98 position: absolute; left: 0; right: 0; bottom: 0;99 height: 900px; background: #1a1a1a; border-top: 1px solid #2a2a2a;100 display: flex; flex-direction: column;101 }102 .kbd-toolbar {103 height: 120px; display: flex; align-items: center; gap: 30px; padding: 0 28px; color: #e0e0e0;104 }105 .toolbar-pill {106 height: 72px; padding: 0 24px; border-radius: 36px; background: #2a2a2a; display: flex; align-items: center; gap: 14px;107 color: #d0d0d0; font-size: 28px;108 }109 .keys { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 0 18px; }110 .row { display: flex; justify-content: center; gap: 16px; }111 .key {112 width: 88px; height: 120px; border-radius: 18px; background: #2a2a2a;113 display: flex; align-items: center; justify-content: center; color: #f0f0f0; font-size: 42px; font-weight: 500;114 }115 .key-wide { width: 180px; font-size: 34px; }116 .space { flex: 1; height: 120px; border-radius: 18px; background: #2a2a2a; color: #ddd; font-size: 34px; }117 .key-action { background: #3949ab; color: #fff; }118 .key-icon svg { width: 40px; height: 40px; stroke: #fff; fill: none; stroke-width: 4; }119 .comma { width: 88px; }120 121 /* Gesture bar */122 .gesture {123 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);124 width: 360px; height: 10px; background: #e0e0e0; border-radius: 6px; opacity: 0.6;125 }126</style>127</head>128<body>129<div id="render-target">130 131 <!-- Status Bar -->132 <div class="status-bar">133 <div class="status-left">134 <div style="font-size: 40px;">10:00</div>135 <div class="status-dot"></div>136 <div class="status-dot"></div>137 <div class="status-dot"></div>138 <div class="status-dot" style="opacity:0.6;"></div>139 </div>140 <div class="status-right">141 <div class="icon-sys">142 <!-- Wi-Fi -->143 <svg viewBox="0 0 48 48">144 <path d="M4 16 C16 8,32 8,44 16" />145 <path d="M10 24 C18 18,30 18,38 24" />146 <path d="M18 32 C22 28,26 28,30 32" />147 <circle cx="24" cy="38" r="3" fill="#fff"></circle>148 </svg>149 </div>150 <div class="icon-sys">151 <!-- Battery -->152 <svg viewBox="0 0 48 48">153 <rect x="6" y="12" width="32" height="24" rx="4" />154 <rect x="40" y="18" width="4" height="12" rx="2" />155 <rect x="10" y="16" width="24" height="16" rx="3" fill="#fff"></rect>156 </svg>157 </div>158 </div>159 </div>160 161 <!-- Search Header -->162 <div class="search-header">163 <div class="back-btn">164 <svg viewBox="0 0 48 48"><path d="M30 8 L12 24 L30 40" /></svg>165 </div>166 <div class="search-bar">167 <div class="search-placeholder">Search YouTube</div>168 <div class="mic-pill">169 <svg viewBox="0 0 24 24">170 <path d="M12 3a3 3 0 0 1 3 3v6a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3z"></path>171 <path d="M5 10c0 4 3 7 7 7s7-3 7-7"></path>172 <path d="M12 17v4"></path>173 </svg>174 </div>175 </div>176 </div>177 178 <!-- Results List -->179 <div class="results">180 <div class="result-item">181 <div class="history-ic">182 <svg viewBox="0 0 48 48">183 <circle cx="24" cy="24" r="18"></circle>184 <path d="M24 12 L24 24 L32 28"></path>185 </svg>186 </div>187 <div class="result-text">top 10 things to do in singapore travel guide 4k</div>188 <div class="thumb">[IMG: TOP 10 SINGAPORE]</div>189 <div class="open-ic">190 <svg viewBox="0 0 48 48"><path d="M18 30 L30 18"></path><path d="M24 18 L30 18 L30 24"></path><rect x="12" y="12" width="24" height="24" rx="4" stroke-opacity="0.5"></rect></svg>191 </div>192 </div>193 194 <div class="result-item">195 <div class="history-ic">196 <svg viewBox="0 0 48 48">197 <circle cx="24" cy="24" r="18"></circle>198 <path d="M24 12 L24 24 L32 28"></path>199 </svg>200 </div>201 <div class="result-text">how to fold a paper airplane that flies far</div>202 <div class="thumb">[IMG: Paper Airplane]</div>203 <div class="open-ic">204 <svg viewBox="0 0 48 48"><path d="M18 30 L30 18"></path><path d="M24 18 L30 18 L30 24"></path><rect x="12" y="12" width="24" height="24" rx="4" stroke-opacity="0.5"></rect></svg>205 </div>206 </div>207 208 <div class="result-item">209 <div class="history-ic">210 <svg viewBox="0 0 48 48">211 <circle cx="24" cy="24" r="18"></circle>212 <path d="M24 12 L24 24 L32 28"></path>213 </svg>214 </div>215 <div class="result-text">how to make a paper airplane</div>216 <div class="thumb">[IMG: Paper Airplane]</div>217 <div class="open-ic">218 <svg viewBox="0 0 48 48"><path d="M18 30 L30 18"></path><path d="M24 18 L30 18 L30 24"></path><rect x="12" y="12" width="24" height="24" rx="4" stroke-opacity="0.5"></rect></svg>219 </div>220 </div>221 222 <div class="result-item">223 <div class="history-ic">224 <svg viewBox="0 0 48 48">225 <circle cx="24" cy="24" r="18"></circle>226 <path d="M24 12 L24 24 L32 28"></path>227 </svg>228 </div>229 <div class="result-text">roar by katy perry</div>230 <div class="thumb">[IMG: Music Video Thumbnail]</div>231 <div class="open-ic">232 <svg viewBox="0 0 48 48"><path d="M18 30 L30 18"></path><path d="M24 18 L30 18 L30 24"></path><rect x="12" y="12" width="24" height="24" rx="4" stroke-opacity="0.5"></rect></svg>233 </div>234 </div>235 236 <div class="result-item">237 <div class="history-ic">238 <svg viewBox="0 0 48 48">239 <circle cx="24" cy="24" r="18"></circle>240 <path d="M24 12 L24 24 L32 28"></path>241 </svg>242 </div>243 <div class="result-text">ladakh road trip</div>244 <div class="thumb">[IMG: Road Trip Guide]</div>245 <div class="open-ic">246 <svg viewBox="0 0 48 48"><path d="M18 30 L30 18"></path><path d="M24 18 L30 18 L30 24"></path><rect x="12" y="12" width="24" height="24" rx="4" stroke-opacity="0.5"></rect></svg>247 </div>248 </div>249 250 <div class="result-item">251 <div class="history-ic">252 <svg viewBox="0 0 48 48">253 <circle cx="24" cy="24" r="18"></circle>254 <path d="M24 12 L24 24 L32 28"></path>255 </svg>256 </div>257 <div class="result-text">indian bike driving 3d</div>258 <div class="thumb">[IMG: Game Screenshot]</div>259 <div class="open-ic">260 <svg viewBox="0 0 48 48"><path d="M18 30 L30 18"></path><path d="M24 18 L30 18 L30 24"></path><rect x="12" y="12" width="24" height="24" rx="4" stroke-opacity="0.5"></rect></svg>261 </div>262 </div>263 264 <div class="result-item">265 <div class="history-ic">266 <svg viewBox="0 0 48 48">267 <circle cx="24" cy="24" r="18"></circle>268 <path d="M24 12 L24 24 L32 28"></path>269 </svg>270 </div>271 <div class="result-text">paper flowers</div>272 <div class="thumb">[IMG: Paper Flowers]</div>273 <div class="open-ic">274 <svg viewBox="0 0 48 48"><path d="M18 30 L30 18"></path><path d="M24 18 L30 18 L30 24"></path><rect x="12" y="12" width="24" height="24" rx="4" stroke-opacity="0.5"></rect></svg>275 </div>276 </div>277 278 <div class="result-item">279 <div class="history-ic">280 <svg viewBox="0 0 48 48">281 <circle cx="24" cy="24" r="18"></circle>282 <path d="M24 12 L24 24 L32 28"></path>283 </svg>284 </div>285 <div class="result-text">rose drawing</div>286 <div class="thumb">[IMG: Rose Drawing Tutorial]</div>287 <div class="open-ic">288 <svg viewBox="0 0 48 48"><path d="M18 30 L30 18"></path><path d="M24 18 L30 18 L30 24"></path><rect x="12" y="12" width="24" height="24" rx="4" stroke-opacity="0.5"></rect></svg>289 </div>290 </div>291 </div>292 293 <!-- Floating voice button -->294 <div class="floating-mic">295 <svg viewBox="0 0 24 24">296 <path d="M12 3a3 3 0 0 1 3 3v6a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3z"></path>297 <path d="M5 10c0 4 3 7 7 7s7-3 7-7"></path>298 <path d="M12 17v4"></path>299 </svg>300 </div>301 302 <!-- Mini Player -->303 <div class="mini-player">304 <div class="mini-thumb">[IMG: Garden Rhapsody]</div>305 <div class="mini-info">306 <div class="mini-title">TOP 10 things to do in SINGAP..</div>307 <div class="mini-sub">Hungry Passport</div>308 </div>309 <div class="mini-controls">310 <div class="control-btn">311 <!-- Pause -->312 <svg viewBox="0 0 48 48">313 <path d="M16 12 L16 36"></path>314 <path d="M32 12 L32 36"></path>315 </svg>316 </div>317 <div class="control-btn">318 <!-- Close X -->319 <svg viewBox="0 0 48 48">320 <path d="M16 16 L32 32"></path>321 <path d="M32 16 L16 32"></path>322 </svg>323 </div>324 </div>325 </div>326 <div class="progress"></div>327 328 <!-- Keyboard -->329 <div class="keyboard">330 <div class="kbd-toolbar">331 <div class="toolbar-pill">332 <svg viewBox="0 0 24 24" style="width:28px;height:28px;stroke:#fff;fill:none;stroke-width:2;margin-right:6px;">333 <circle cx="12" cy="8" r="3"></circle><path d="M4 20c2-4 14-4 16 0"></path>334 </svg>335 Emoji336 </div>337 <div class="toolbar-pill">GIF</div>338 <div class="toolbar-pill">339 <svg viewBox="0 0 24 24" style="width:28px;height:28px;stroke:#fff;fill:none;stroke-width:2;margin-right:6px;">340 <circle cx="12" cy="12" r="9"></circle><path d="M12 7v6l4 2"></path>341 </svg>342 Settings343 </div>344 <div class="toolbar-pill">345 <svg viewBox="0 0 24 24" style="width:28px;height:28px;stroke:#fff;fill:none;stroke-width:2;margin-right:6px;">346 <path d="M3 7h10M3 12h14M3 17h7"></path>347 </svg>348 Translate349 </div>350 <div class="toolbar-pill">351 <svg viewBox="0 0 24 24" style="width:28px;height:28px;stroke:#fff;fill:none;stroke-width:2;margin-right:6px;">352 <circle cx="12" cy="12" r="5"></circle>353 </svg>354 Theme355 </div>356 </div>357 358 <div class="keys">359 <div class="row">360 <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>361 <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>362 </div>363 <div class="row" style="padding: 0 70px;">364 <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>365 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>366 </div>367 <div class="row" style="padding: 0 120px;">368 <div class="key-wide">shift</div>369 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>370 <div class="key">b</div><div class="key">n</div><div class="key">m</div>371 <div class="key key-icon">372 <svg viewBox="0 0 48 48"><path d="M12 12 L36 36"></path><path d="M36 12 L12 36"></path></svg>373 </div>374 </div>375 <div class="row">376 <div class="key-wide" style="background:#2f2f2f;">?123</div>377 <div class="comma">,</div>378 <div class="key key-icon">379 <svg viewBox="0 0 48 48"><circle cx="24" cy="18" r="6"></circle><path d="M12 34c4-4 20-4 24 0"></path></svg>380 </div>381 <div class="space">space</div>382 <div class="key">.</div>383 <div class="key key-action key-icon">384 <svg viewBox="0 0 48 48"><circle cx="22" cy="20" r="6" fill="#fff"></circle><path d="M30 30 L38 38"></path></svg>385 </div>386 </div>387 </div>388 <div class="gesture"></div>389 </div>390 391</div>392</body>393</html>