GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>YouTube Search UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #000000; color: #FFFFFF;12 }13 14 /* Status bar */15 .statusbar {16 height: 100px;17 display: flex; align-items: center; justify-content: space-between;18 padding: 0 36px; box-sizing: border-box;19 font-weight: 600;20 }21 .status-left { display: flex; align-items: center; gap: 16px; }22 .status-time { font-size: 40px; letter-spacing: 1px; }23 .status-center { display: flex; align-items: center; gap: 14px; color: #FFFFFF; opacity: 0.8; }24 .status-icon { width: 26px; height: 26px; border-radius: 50%; background: #FFFFFF20; }25 .status-right { display: flex; align-items: center; gap: 22px; }26 .wifi svg, .battery svg { display: block; }27 28 /* Header search area */29 .search-header {30 height: 130px; display: flex; align-items: center;31 padding: 0 24px; box-sizing: border-box;32 }33 .back-btn { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; }34 .back-btn svg { width: 38px; height: 38px; fill: #FFFFFF; opacity: 0.9; }35 .search-field {36 flex: 1; height: 88px; margin: 0 18px; border-radius: 44px;37 background: #1F1F1F; display: flex; align-items: center; padding: 0 30px; box-sizing: border-box;38 border: 1px solid #2A2A2A;39 }40 .search-placeholder {41 font-size: 42px; color: #AFAFAF;42 }43 .mic-wrap {44 width: 88px; height: 88px; border-radius: 44px; background: #2A2A2A;45 display: flex; align-items: center; justify-content: center;46 }47 .mic-wrap svg { width: 40px; height: 40px; fill: #FFFFFF; }48 49 /* List */50 .history-list { position: absolute; top: 230px; bottom: 900px; left: 0; right: 0; overflow: hidden; }51 .row {52 display: flex; align-items: center;53 padding: 18px 28px; box-sizing: border-box;54 border-bottom: 1px solid #1A1A1A;55 }56 .clock {57 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; margin-right: 16px;58 }59 .clock svg { width: 44px; height: 44px; fill: none; stroke: #BDBDBD; stroke-width: 3; opacity: 0.9; }60 .title { flex: 1; font-size: 40px; line-height: 1.22; color: #FFFFFF; }61 .thumb {62 width: 180px; height: 110px; margin-left: 18px;63 background: #E0E0E0; border: 1px solid #BDBDBD;64 display: flex; align-items: center; justify-content: center;65 color: #555555; font-size: 26px; text-align: center; padding: 8px; box-sizing: border-box;66 border-radius: 6px;67 }68 .arrow-out {69 width: 60px; height: 60px; margin-left: 18px; display: flex; align-items: center; justify-content: center;70 }71 .arrow-out svg { width: 36px; height: 36px; fill: none; stroke: #AFAFAF; stroke-width: 3; }72 73 /* Floating mic bubble */74 .floating-mic {75 position: absolute; right: 40px; bottom: 960px;76 width: 140px; height: 140px; border-radius: 70px;77 background: #0D0D0D; border: 1px solid #2A2A2A;78 box-shadow: 0 10px 40px rgba(0,0,0,0.6);79 display: flex; align-items: center; justify-content: center;80 }81 .floating-mic svg { width: 60px; height: 60px; fill: #FFFFFF; }82 83 /* Keyboard */84 .keyboard {85 position: absolute; bottom: 0; left: 0; right: 0;86 height: 900px; background: #121212; border-top: 1px solid #202020;87 }88 .kbd-top {89 height: 120px; display: flex; align-items: center; gap: 28px;90 padding: 0 30px; box-sizing: border-box; color: #CFCFCF;91 }92 .kbd-top .chip {93 display: flex; align-items: center; justify-content: center;94 width: 72px; height: 72px; border-radius: 18px; background: #1E1E1E; border: 1px solid #2B2B2B;95 }96 .kbd-top .label {97 font-size: 36px; color: #CFCFCF;98 }99 100 .keys { padding: 12px 22px; box-sizing: border-box; }101 .key-row { display: flex; gap: 14px; justify-content: center; margin-top: 22px; }102 .key {103 height: 120px; min-width: 92px; flex: 0 0 92px;104 border-radius: 18px; background: #1E1E1E; border: 1px solid #2B2B2B;105 display: flex; align-items: center; justify-content: center;106 color: #EAEAEA; font-size: 44px;107 }108 .key.wide { flex: 1; min-width: 180px; }109 .key.space { flex: 1.8; min-width: 320px; }110 .key.icon svg { width: 44px; height: 44px; fill: #EAEAEA; }111 .search-btn {112 width: 140px; height: 140px; border-radius: 70px;113 background: #BFD3FF; display: flex; align-items: center; justify-content: center;114 }115 .search-btn svg { width: 52px; height: 52px; fill: #2E3E73; }116</style>117</head>118<body>119<div id="render-target">120 121 <!-- Status bar -->122 <div class="statusbar">123 <div class="status-left">124 <div class="status-time">9:52</div>125 <div class="status-center">126 <div class="status-icon"></div>127 <div class="status-icon"></div>128 <div class="status-icon"></div>129 <div class="status-icon"></div>130 <div class="status-icon" style="width:8px;height:8px;border-radius:4px;"></div>131 </div>132 </div>133 <div class="status-right">134 <div class="wifi">135 <svg viewBox="0 0 24 24">136 <path d="M2 8c5-4 15-4 20 0" stroke="#FFFFFF" stroke-width="2" fill="none"/>137 <path d="M5 11c4-3 10-3 14 0" stroke="#FFFFFF" stroke-width="2" fill="none"/>138 <path d="M8 14c3-2 5-2 8 0" stroke="#FFFFFF" stroke-width="2" fill="none"/>139 <circle cx="12" cy="18" r="2" fill="#FFFFFF"/>140 </svg>141 </div>142 <div class="battery">143 <svg viewBox="0 0 32 24">144 <rect x="2" y="5" width="24" height="14" rx="3" ry="3" fill="none" stroke="#FFFFFF" stroke-width="2"/>145 <rect x="4" y="7" width="16" height="10" rx="2" ry="2" fill="#FFFFFF"/>146 <rect x="26" y="9" width="4" height="6" rx="1" ry="1" fill="#FFFFFF"/>147 </svg>148 </div>149 </div>150 </div>151 152 <!-- Search Header -->153 <div class="search-header">154 <div class="back-btn">155 <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" /></svg>156 </div>157 <div class="search-field">158 <div class="search-placeholder">Search YouTube</div>159 </div>160 <div class="mic-wrap">161 <svg viewBox="0 0 24 24">162 <path d="M12 3a3 3 0 0 1 3 3v6a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3z"/>163 <path d="M5 10a7 7 0 0 0 14 0" fill="none" stroke="#FFFFFF" stroke-width="2"/>164 <path d="M12 17v4" fill="none" stroke="#FFFFFF" stroke-width="2"/>165 </svg>166 </div>167 </div>168 169 <!-- History List -->170 <div class="history-list">171 172 <div class="row">173 <div class="clock">174 <svg viewBox="0 0 24 24">175 <circle cx="12" cy="12" r="9"></circle>176 <path d="M12 6v6l4 2" />177 </svg>178 </div>179 <div class="title">easy original elephant || cute origami paper animals</div>180 <div class="thumb">[IMG: Origami elephants]</div>181 <div class="arrow-out">182 <svg viewBox="0 0 24 24">183 <path d="M7 17l10-10" />184 <path d="M9 7h8v8" />185 </svg>186 </div>187 </div>188 189 <div class="row">190 <div class="clock">191 <svg viewBox="0 0 24 24">192 <circle cx="12" cy="12" r="9"></circle>193 <path d="M12 6v6l4 2" />194 </svg>195 </div>196 <div class="title">how to make a paper airplane</div>197 <div class="thumb">[IMG: Paper airplane]</div>198 <div class="arrow-out">199 <svg viewBox="0 0 24 24">200 <path d="M7 17l10-10" />201 <path d="M9 7h8v8" />202 </svg>203 </div>204 </div>205 206 <div class="row">207 <div class="clock">208 <svg viewBox="0 0 24 24">209 <circle cx="12" cy="12" r="9"></circle>210 <path d="M12 6v6l4 2" />211 </svg>212 </div>213 <div class="title">how to fold a paper airplane that flies far</div>214 <div class="thumb">[IMG: Paper airplane]</div>215 <div class="arrow-out">216 <svg viewBox="0 0 24 24">217 <path d="M7 17l10-10" />218 <path d="M9 7h8v8" />219 </svg>220 </div>221 </div>222 223 <div class="row">224 <div class="clock">225 <svg viewBox="0 0 24 24">226 <circle cx="12" cy="12" r="9"></circle>227 <path d="M12 6v6l4 2" />228 </svg>229 </div>230 <div class="title">elephant paper craft</div>231 <div class="thumb">[IMG: Origami elephants]</div>232 <div class="arrow-out">233 <svg viewBox="0 0 24 24">234 <path d="M7 17l10-10" />235 <path d="M9 7h8v8" />236 </svg>237 </div>238 </div>239 240 <div class="row">241 <div class="clock">242 <svg viewBox="0 0 24 24">243 <circle cx="12" cy="12" r="9"></circle>244 <path d="M12 6v6l4 2" />245 </svg>246 </div>247 <div class="title">roar by katy perry</div>248 <div class="thumb">[IMG: Music video thumbnail]</div>249 <div class="arrow-out">250 <svg viewBox="0 0 24 24">251 <path d="M7 17l10-10" />252 <path d="M9 7h8v8" />253 </svg>254 </div>255 </div>256 257 <div class="row">258 <div class="clock">259 <svg viewBox="0 0 24 24">260 <circle cx="12" cy="12" r="9"></circle>261 <path d="M12 6v6l4 2" />262 </svg>263 </div>264 <div class="title">how to make clay toys</div>265 <div class="thumb">[IMG: Clay toys tutorial]</div>266 <div class="arrow-out">267 <svg viewBox="0 0 24 24">268 <path d="M7 17l10-10" />269 <path d="M9 7h8v8" />270 </svg>271 </div>272 </div>273 274 <div class="row">275 <div class="clock">276 <svg viewBox="0 0 24 24">277 <circle cx="12" cy="12" r="9"></circle>278 <path d="M12 6v6l4 2" />279 </svg>280 </div>281 <div class="title">paper flowers</div>282 <div class="thumb">[IMG: Paper flower bouquet]</div>283 <div class="arrow-out">284 <svg viewBox="0 0 24 24">285 <path d="M7 17l10-10" />286 <path d="M9 7h8v8" />287 </svg>288 </div>289 </div>290 291 <div class="row">292 <div class="clock">293 <svg viewBox="0 0 24 24">294 <circle cx="12" cy="12" r="9"></circle>295 <path d="M12 6v6l4 2" />296 </svg>297 </div>298 <div class="title">easy paper flower|| paper tulip flower ||paper craft make sure</div>299 <div class="thumb">[IMG: Paper tulip tutorial]</div>300 <div class="arrow-out">301 <svg viewBox="0 0 24 24">302 <path d="M7 17l10-10" />303 <path d="M9 7h8v8" />304 </svg>305 </div>306 </div>307 308 <div class="row">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" />313 </svg>314 </div>315 <div class="title">indian bike driving 3d</div>316 <div class="thumb">[IMG: Bike driving 3D]</div>317 <div class="arrow-out">318 <svg viewBox="0 0 24 24">319 <path d="M7 17l10-10" />320 <path d="M9 7h8v8" />321 </svg>322 </div>323 </div>324 325 <div class="row">326 <div class="clock">327 <svg viewBox="0 0 24 24">328 <circle cx="12" cy="12" r="9"></circle>329 <path d="M12 6v6l4 2" />330 </svg>331 </div>332 <div class="title">creativity with dough || children activity network</div>333 <div class="thumb">[IMG: Kids dough crafts]</div>334 <div class="arrow-out">335 <svg viewBox="0 0 24 24">336 <path d="M7 17l10-10" />337 <path d="M9 7h8v8" />338 </svg>339 </div>340 </div>341 342 </div>343 344 <!-- Floating mic bubble -->345 <div class="floating-mic">346 <svg viewBox="0 0 24 24">347 <path d="M12 3a3 3 0 0 1 3 3v6a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3z"/>348 <path d="M5 10a7 7 0 0 0 14 0" fill="none" stroke="#FFFFFF" stroke-width="2"/>349 <path d="M12 17v4" fill="none" stroke="#FFFFFF" stroke-width="2"/>350 </svg>351 </div>352 353 <!-- Keyboard -->354 <div class="keyboard">355 <div class="kbd-top">356 <div class="chip">357 <svg viewBox="0 0 24 24"><path d="M4 4h16v16H4z" fill="#CFCFCF"/></svg>358 </div>359 <div class="chip">360 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="#CFCFCF"/></svg>361 </div>362 <div class="chip"><div class="label">GIF</div></div>363 <div class="chip">364 <svg viewBox="0 0 24 24"><path d="M12 2l8 8-8 8-8-8z" fill="#CFCFCF"/></svg>365 </div>366 <div class="chip">367 <svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16" stroke="#CFCFCF" stroke-width="2"/></svg>368 </div>369 <div class="chip">370 <svg viewBox="0 0 24 24">371 <path d="M5 19l14-8-14-6v6l10 2-10 2z" fill="#CFCFCF"/>372 </svg>373 </div>374 <div class="chip">375 <svg viewBox="0 0 24 24">376 <path d="M12 3a3 3 0 0 1 3 3v6a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3z"/>377 <path d="M5 10a7 7 0 0 0 14 0" fill="none" stroke="#CFCFCF" stroke-width="2"/>378 </svg>379 </div>380 </div>381 382 <div class="keys">383 <div class="key-row">384 <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>385 <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>386 </div>387 <div class="key-row" style="padding: 0 30px;">388 <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>389 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>390 </div>391 <div class="key-row" style="padding: 0 90px;">392 <div class="key icon">393 <svg viewBox="0 0 24 24"><path d="M3 12l9 9V3z"/></svg>394 </div>395 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div>396 <div class="key">n</div><div class="key">m</div>397 <div class="key icon">398 <svg viewBox="0 0 24 24"><path d="M4 6h16M8 10h12M12 14h8" stroke="#EAEAEA" stroke-width="2" fill="none"/></svg>399 </div>400 </div>401 <div class="key-row">402 <div class="key wide">?123</div>403 <div class="key">,</div>404 <div class="key">🙂</div>405 <div class="key space"></div>406 <div class="key">.</div>407 <div class="key icon">408 <svg viewBox="0 0 24 24"><path d="M5 4l14 8-14 8z"/></svg>409 </div>410 <div class="search-btn">411 <svg viewBox="0 0 24 24">412 <path d="M10 3a7 7 0 1 0 0 14a7 7 0 0 0 0-14z" />413 <path d="M21 21l-5-5" stroke="#2E3E73" stroke-width="2" fill="none"/>414 </svg>415 </div>416 </div>417 </div>418 </div>419 420</div>421</body>422</html>