GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>YouTube Search UI - Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #121212;13    color: #fff;14  }15 16  /* Status bar */17  .status-bar {18    height: 70px;19    padding: 0 24px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    font-size: 34px;24    color: #e0e0e0;25  }26  .status-right {27    display: flex;28    gap: 22px;29    align-items: center;30  }31  .status-icon {32    width: 34px; height: 34px;33    border-radius: 8px;34    background: #1e1e1e;35  }36 37  /* Search header */38  .search-header {39    height: 120px;40    padding: 0 24px;41    display: flex;42    align-items: center;43    gap: 22px;44  }45  .back-btn {46    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;47    border-radius: 32px;48  }49  .search-field {50    flex: 1;51    height: 84px;52    background: #1f1f1f;53    border-radius: 42px;54    display: flex;55    align-items: center;56    padding: 0 34px;57    font-size: 38px;58    color: #bdbdbd;59  }60  .search-placeholder { flex: 1; }61  .voice-btn {62    width: 84px; height: 84px;63    background: #1f1f1f;64    border-radius: 42px;65    display: flex; align-items: center; justify-content: center;66  }67 68  /* History list */69  .history {70    position: absolute;71    top: 190px; /* status + header */72    left: 0;73    right: 0;74    bottom: 880px; /* reserve space for keyboard + suggestion bar */75    overflow: hidden;76    padding: 10px 24px 0 24px;77  }78  .row {79    height: 120px;80    display: flex;81    align-items: center;82    gap: 24px;83    border-bottom: 1px solid rgba(255,255,255,0.04);84  }85  .clock {86    width: 56px; height: 56px; border-radius: 28px;87    border: 2px solid #888;88    display: flex; align-items: center; justify-content: center;89  }90  .query {91    flex: 1;92    font-size: 42px;93    color: #f5f5f5;94    white-space: nowrap;95    overflow: hidden;96    text-overflow: ellipsis;97  }98  .thumb {99    width: 210px; height: 118px;100    background: #E0E0E0;101    border: 1px solid #BDBDBD;102    display: flex; align-items: center; justify-content: center;103    color: #757575;104    font-size: 24px;105    border-radius: 6px;106  }107  .open-icon {108    width: 40px; height: 40px;109    display: flex; align-items: center; justify-content: center;110    margin-left: 16px;111  }112 113  /* Suggestion strip (mini player/search suggestion) */114  .suggestion {115    position: absolute;116    left: 0; right: 0;117    bottom: 980px; /* sits above keyboard */118    height: 160px;119    background: rgba(255,255,255,0.05);120    display: flex;121    align-items: center;122    padding: 0 24px;123    gap: 24px;124  }125  .suggestion .mini-thumb {126    width: 220px; height: 140px;127    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;128    display: flex; align-items: center; justify-content: center; border-radius: 6px;129  }130  .suggestion .titles {131    flex: 1;132  }133  .suggestion .title {134    font-size: 38px; color: #fff;135  }136  .suggestion .subtitle {137    font-size: 30px; color: #bdbdbd; margin-top: 8px;138  }139  .suggestion .actions {140    display: flex; align-items: center; gap: 28px;141  }142  .circle-btn {143    width: 70px; height: 70px; border-radius: 35px; background: #1e1e1e;144    display: flex; align-items: center; justify-content: center;145  }146 147  /* Floating mic button */148  .floating-mic {149    position: absolute;150    right: 30px;151    top: 1280px;152    width: 140px; height: 140px;153    border-radius: 70px;154    background: #1f1f1f;155    box-shadow: 0 10px 24px rgba(0,0,0,0.6);156    display: flex; align-items: center; justify-content: center;157  }158 159  /* Keyboard area */160  .keyboard {161    position: absolute;162    left: 0; right: 0; bottom: 0;163    height: 860px;164    background: #1a1a1a;165    border-top: 1px solid #2a2a2a;166    padding: 24px;167    box-sizing: border-box;168  }169  .kbd-top {170    height: 110px;171    display: flex; align-items: center; gap: 40px;172    color: #d0d0d0; font-size: 40px;173  }174  .kbd-grid {175    margin-top: 18px;176    display: grid;177    grid-template-columns: repeat(10, 1fr);178    gap: 18px;179  }180  .key {181    height: 110px; border-radius: 16px;182    background: #2a2a2a; color: #fff; display: flex; align-items: center; justify-content: center;183    font-size: 44px;184  }185  .key.wide { grid-column: span 3; }186  .key.space { grid-column: span 6; }187  .key.search {188    position: absolute;189    right: 24px; bottom: 24px;190    width: 140px; height: 140px; border-radius: 70px;191    background: #cfd8dc; color: #000; font-size: 46px; display: flex; align-items: center; justify-content: center;192  }193 194  /* Home indicator */195  .home-indicator {196    position: absolute; left: 390px; bottom: 14px;197    width: 300px; height: 10px; border-radius: 5px; background: #e6e6e6;198    opacity: 0.7;199  }200  /* Muted icon tint */201  svg { fill: #bdbdbd; }202</style>203</head>204<body>205<div id="render-target">206 207  <!-- Status Bar -->208  <div class="status-bar">209    <div class="status-left">7:04</div>210    <div class="status-right">211      <div class="status-icon"></div>212      <div class="status-icon"></div>213      <div class="status-icon"></div>214    </div>215  </div>216 217  <!-- Search Header -->218  <div class="search-header">219    <div class="back-btn">220      <svg width="40" height="40" viewBox="0 0 24 24">221        <path d="M15 18l-6-6 6-6"></path>222      </svg>223    </div>224    <div class="search-field">225      <div class="search-placeholder">Search YouTube</div>226      <svg width="36" height="36" viewBox="0 0 24 24" style="margin-right: 14px;">227        <path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm11 3l-6-6"></path>228      </svg>229    </div>230    <div class="voice-btn">231      <svg width="36" height="36" viewBox="0 0 24 24">232        <path d="M12 14a4 4 0 0 0 4-4V7a4 4 0 0 0-8 0v3a4 4 0 0 0 4 4zm-7-4h2a5 5 0 0 0 10 0h2M12 14v5M9 20h6"></path>233      </svg>234    </div>235  </div>236 237  <!-- History List -->238  <div class="history">239    <div class="row">240      <div class="clock">241        <svg width="34" height="34" viewBox="0 0 24 24">242          <circle cx="12" cy="12" r="10" stroke="#888" stroke-width="2" fill="none"></circle>243          <path d="M12 7v6l4 2" stroke="#888" stroke-width="2" fill="none"></path>244        </svg>245      </div>246      <div class="query">this american life the call</div>247      <div class="thumb">[IMG: Podcast Thumbnail]</div>248      <div class="open-icon">249        <svg width="32" height="32" viewBox="0 0 24 24"><path d="M14 3h7v7M21 3l-9 9M5 5h6v2H7v10h10v-4h2v6H5z"></path></svg>250      </div>251    </div>252 253    <div class="row">254      <div class="clock">255        <svg width="34" height="34" viewBox="0 0 24 24">256          <circle cx="12" cy="12" r="10" stroke="#888" stroke-width="2" fill="none"></circle>257          <path d="M12 7v6l4 2" stroke="#888" stroke-width="2" fill="none"></path>258        </svg>259      </div>260      <div class="query">rome vlog</div>261      <div class="thumb">[IMG: Rome Vlog]</div>262      <div class="open-icon">263        <svg width="32" height="32" viewBox="0 0 24 24"><path d="M14 3h7v7M21 3l-9 9M5 5h6v2H7v10h10v-4h2v6H5z"></path></svg>264      </div>265    </div>266 267    <div class="row">268      <div class="clock">269        <svg width="34" height="34" viewBox="0 0 24 24">270          <circle cx="12" cy="12" r="10" stroke="#888" stroke-width="2" fill="none"></circle>271          <path d="M12 7v6l4 2" stroke="#888" stroke-width="2" fill="none"></path>272        </svg>273      </div>274      <div class="query">the american life the call</div>275      <div class="thumb">[IMG: Episode Artwork]</div>276      <div class="open-icon">277        <svg width="32" height="32" viewBox="0 0 24 24"><path d="M14 3h7v7M21 3l-9 9M5 5h6v2H7v10h10v-4h2v6H5z"></path></svg>278      </div>279    </div>280 281    <div class="row">282      <div class="clock">283        <svg width="34" height="34" viewBox="0 0 24 24">284          <circle cx="12" cy="12" r="10" stroke="#888" stroke-width="2" fill="none"></circle>285          <path d="M12 7v6l4 2" stroke="#888" stroke-width="2" fill="none"></path>286        </svg>287      </div>288      <div class="query">the daily podcast</div>289      <div class="thumb">[IMG: English Podcast]</div>290      <div class="open-icon">291        <svg width="32" height="32" viewBox="0 0 24 24"><path d="M14 3h7v7M21 3l-9 9M5 5h6v2H7v10h10v-4h2v6H5z"></path></svg>292      </div>293    </div>294 295    <div class="row">296      <div class="clock">297        <svg width="34" height="34" viewBox="0 0 24 24">298          <circle cx="12" cy="12" r="10" stroke="#888" stroke-width="2" fill="none"></circle>299          <path d="M12 7v6l4 2" stroke="#888" stroke-width="2" fill="none"></path>300        </svg>301      </div>302      <div class="query">indian street food</div>303      <div class="thumb">[IMG: Street Food]</div>304      <div class="open-icon">305        <svg width="32" height="32" viewBox="0 0 24 24"><path d="M14 3h7v7M21 3l-9 9M5 5h6v2H7v10h10v-4h2v6H5z"></path></svg>306      </div>307    </div>308 309    <div class="row">310      <div class="clock">311        <svg width="34" height="34" viewBox="0 0 24 24">312          <circle cx="12" cy="12" r="10" stroke="#888" stroke-width="2" fill="none"></circle>313          <path d="M12 7v6l4 2" stroke="#888" stroke-width="2" fill="none"></path>314        </svg>315      </div>316      <div class="query">graffiti on the train stereophonics</div>317      <div class="thumb">[IMG: Music Video]</div>318      <div class="open-icon">319        <svg width="32" height="32" viewBox="0 0 24 24"><path d="M14 3h7v7M21 3l-9 9M5 5h6v2H7v10h10v-4h2v6H5z"></path></svg>320      </div>321    </div>322 323    <div class="row">324      <div class="clock">325        <svg width="34" height="34" viewBox="0 0 24 24">326          <circle cx="12" cy="12" r="10" stroke="#888" stroke-width="2" fill="none"></circle>327          <path d="M12 7v6l4 2" stroke="#888" stroke-width="2" fill="none"></path>328        </svg>329      </div>330      <div class="query">rome vlogs</div>331      <div class="thumb">[IMG: Rome Vlog]</div>332      <div class="open-icon">333        <svg width="32" height="32" viewBox="0 0 24 24"><path d="M14 3h7v7M21 3l-9 9M5 5h6v2H7v10h10v-4h2v6H5z"></path></svg>334      </div>335    </div>336 337    <div class="row">338      <div class="clock">339        <svg width="34" height="34" viewBox="0 0 24 24">340          <circle cx="12" cy="12" r="10" stroke="#888" stroke-width="2" fill="none"></circle>341          <path d="M12 7v6l4 2" stroke="#888" stroke-width="2" fill="none"></path>342        </svg>343      </div>344      <div class="query">the american life podcast</div>345      <div class="thumb">[IMG: Podcast Clip]</div>346      <div class="open-icon">347        <svg width="32" height="32" viewBox="0 0 24 24"><path d="M14 3h7v7M21 3l-9 9M5 5h6v2H7v10h10v-4h2v6H5z"></path></svg>348      </div>349    </div>350 351    <div class="row">352      <div class="clock">353        <svg width="34" height="34" viewBox="0 0 24 24">354          <circle cx="12" cy="12" r="10" stroke="#888" stroke-width="2" fill="none"></circle>355          <path d="M12 7v6l4 2" stroke="#888" stroke-width="2" fill="none"></path>356        </svg>357      </div>358      <div class="query">songs by stereophonics</div>359      <div class="thumb">[IMG: Music Video]</div>360      <div class="open-icon">361        <svg width="32" height="32" viewBox="0 0 24 24"><path d="M14 3h7v7M21 3l-9 9M5 5h6v2H7v10h10v-4h2v6H5z"></path></svg>362      </div>363    </div>364  </div>365 366  <!-- Suggestion bar -->367  <div class="suggestion">368    <div class="mini-thumb">[IMG: This American Life]</div>369    <div class="titles">370      <div class="title">This American Life: The Call</div>371      <div class="subtitle">This American Life</div>372    </div>373    <div class="actions">374      <div class="circle-btn">375        <svg width="34" height="34" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>376      </div>377      <div class="circle-btn">378        <svg width="34" height="34" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"></path></svg>379      </div>380    </div>381  </div>382 383  <!-- Floating mic -->384  <div class="floating-mic">385    <svg width="70" height="70" viewBox="0 0 24 24">386      <path d="M12 14a4 4 0 0 0 4-4V7a4 4 0 0 0-8 0v3a4 4 0 0 0 4 4zm-7-4h2a5 5 0 0 0 10 0h2M12 14v5M9 20h6"></path>387    </svg>388  </div>389 390  <!-- Keyboard -->391  <div class="keyboard">392    <div class="kbd-top">393      <span>◻</span>394      <span>😊</span>395      <span>GIF</span>396      <span>⚙</span>397      <span>Gx</span>398      <span>🎨</span>399      <span>🔘</span>400    </div>401    <div class="kbd-grid">402      <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><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>403      <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key">⌫</div>404      <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><div class="key">n</div><div class="key">m</div><div class="key">,</div><div class="key">.</div><div class="key">↵</div>405      <div class="key wide">?123</div>406      <div class="key space">space</div>407      <div class="key wide">🙂</div>408    </div>409    <div class="key search">410      <svg width="46" height="46" viewBox="0 0 24 24"><path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm11 3l-6-6"></path></svg>411    </div>412  </div>413 414  <div class="home-indicator"></div>415</div>416</body>417</html>