GD-ML/AndroidCode

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>Search Suggestions - Dark</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0F0F10;15    color: #fff;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    padding: 0 36px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #fff;30    font-weight: 600;31    font-size: 40px;32  }33  .status-icons {34    display: flex;35    align-items: center;36    gap: 26px;37  }38  .dot { width: 12px; height: 12px; background:#bdbdbd; border-radius:50%; display:inline-block; }39 40  /* Search header */41  .search-header {42    position: absolute;43    top: 140px;44    left: 24px;45    right: 24px;46    height: 110px;47    display: flex;48    align-items: center;49    gap: 22px;50  }51  .back-btn {52    width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;53  }54  .search-input {55    flex: 1;56    height: 110px;57    background: #1B1B1C;58    border-radius: 22px;59    display: flex;60    align-items: center;61    padding: 0 28px;62    color: #EDEDED;63    font-size: 44px;64    letter-spacing: 0.5px;65  }66  .search-input .spacer { flex: 1; }67  .icon-btn {68    width: 68px; height: 68px; border-radius: 34px;69    display: flex; align-items: center; justify-content: center;70  }71 72  /* Suggestions list */73  .suggestions {74    position: absolute;75    top: 280px;76    left: 0;77    right: 0;78  }79  .suggestion-item {80    display: flex;81    align-items: center;82    padding: 22px 32px;83    height: 120px;84    border-bottom: 1px solid #1E1E21;85    gap: 28px;86  }87  .suggestion-item .text {88    font-size: 44px;89    flex: 1;90    color: #FAFAFA;91  }92  .search-icon-wrap {93    width: 58px; height: 58px; border-radius: 50%;94    display: flex; align-items: center; justify-content: center;95  }96  .launch-icon-wrap {97    width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;98  }99 100  /* Floating mic */101  .floating-mic {102    position: absolute;103    right: 40px;104    top: 1080px;105    width: 120px; height: 120px;106    border-radius: 60px;107    background: #101011;108    border: 1px solid #2A2A2C;109    display: flex; align-items: center; justify-content: center;110  }111 112  /* Keyboard */113  .keyboard {114    position: absolute;115    bottom: 0;116    left: 0;117    width: 1080px;118    height: 920px;119    background: #19191B;120    border-top: 1px solid #242427;121    box-shadow: 0 -20px 40px rgba(0,0,0,0.35);122  }123  .kb-suggestions {124    height: 120px;125    padding: 0 26px;126    display: flex;127    align-items: center;128    gap: 28px;129    color: #DCDCDC;130    font-size: 40px;131  }132  .kb-pill {133    width: 64px; height: 64px; background: #2A2A2C; border-radius: 12px;134    display: flex; align-items: center; justify-content: center;135  }136  .kb-divider { color: #7E7E82; font-size: 42px; }137  .kb-rows {138    padding: 16px 18px 100px;139    display: grid;140    grid-template-rows: repeat(3, 1fr);141    row-gap: 22px;142  }143  .kb-row {144    display: flex;145    justify-content: center;146    gap: 14px;147  }148  .key {149    background: #2A2A2C;150    color: #EAEAEA;151    border-radius: 18px;152    height: 120px;153    min-width: 88px;154    display: flex;155    align-items: center;156    justify-content: center;157    font-size: 44px;158    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.03);159  }160  .key.wide { min-width: 200px; }161  .key.space { min-width: 520px; color: #BDBDBD; font-size: 36px; }162  .key.pill {163    background: #D6AFC0; color: #1A1A1A; border-radius: 30px; min-width: 160px;164  }165  .key.circle {166    width: 130px; height: 130px; border-radius: 65px;167    background: #E7B8C8; color: #1A1A1A;168  }169  .kb-bottom {170    position: absolute;171    bottom: 18px; left: 0; right: 0;172    padding: 0 22px;173    display: flex;174    align-items: center;175    gap: 14px;176    justify-content: space-between;177  }178  .kb-left-group, .kb-right-group { display: flex; align-items: center; gap: 14px; }179  .home-indicator {180    position: absolute;181    bottom: 10px; left: 50%;182    transform: translateX(-50%);183    width: 360px; height: 10px; border-radius: 6px; background: #EAEAEA; opacity: 0.7;184  }185 186  /* SVG common */187  svg { width: 42px; height: 42px; }188  .icon-lg svg { width: 56px; height: 56px; }189  .muted { color: #CFCFCF; }190</style>191</head>192<body>193<div id="render-target">194 195  <!-- Status Bar -->196  <div class="status-bar">197    <div>5:26</div>198    <div class="status-icons">199      <div class="dot"></div>200      <div class="dot"></div>201      <div class="dot"></div>202      <!-- Wi-Fi -->203      <svg viewBox="0 0 24 24" fill="#ffffff">204        <path d="M12 18.5l2.5 2.5-2.5 2.5-2.5-2.5L12 18.5zm-7-7.5c4.4-3.5 10.6-3.5 15 0l-2 2c-3.6-2.6-7.4-2.6-11 0l-2-2zm3.5 3.5c2.7-2 6.3-2 9 0l-1.8 1.8c-1.9-1.3-3.5-1.3-5.4 0L8.5 14.5z"/>205      </svg>206      <!-- Battery -->207      <svg viewBox="0 0 24 24" fill="#ffffff">208        <path d="M17 6h2v2h1c1.1 0 2 .9 2 2v4c0 1.1-.9 2-2 2h-1v2h-2V6zm-12 2h10v8H5V8z"/>209      </svg>210    </div>211  </div>212 213  <!-- Search Header -->214  <div class="search-header">215    <div class="back-btn icon-lg">216      <svg viewBox="0 0 24 24" fill="#ffffff">217        <path d="M15.5 4l-8 8 8 8 1.5-1.5-6.5-6.5 6.5-6.5L15.5 4z"/>218      </svg>219    </div>220    <div class="search-input">221      pop songs222      <div class="spacer"></div>223      <div class="icon-btn">224        <!-- Clear X -->225        <svg viewBox="0 0 24 24" fill="#CFCFCF">226          <path d="M18.3 5.7L12 12l6.3 6.3-1.3 1.3L10.7 13.3 4.4 19.6 3.1 18.3 9.4 12 3.1 5.7 4.4 4.4l6.3 6.3 6.3-6.3 1.3 1.3z"/>227        </svg>228      </div>229    </div>230  </div>231 232  <!-- Suggestions -->233  <div class="suggestions">234    <div class="suggestion-item">235      <div class="search-icon-wrap">236        <svg viewBox="0 0 24 24" fill="#CFCFCF">237          <path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.9.9l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 110-9 4.5 4.5 0 010 9z"/>238        </svg>239      </div>240      <div class="text">pop songs</div>241      <div class="launch-icon-wrap">242        <svg viewBox="0 0 24 24" fill="#CFCFCF">243          <path d="M7 17l8-8H9V7h8v8h-2V9l-8 8z"/>244        </svg>245      </div>246    </div>247 248    <div class="suggestion-item">249      <div class="search-icon-wrap">250        <svg viewBox="0 0 24 24" fill="#CFCFCF"><path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.9.9l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 110-9 4.5 4.5 0 010 9z"/></svg>251      </div>252      <div class="text">pop songs 2023</div>253      <div class="launch-icon-wrap"><svg viewBox="0 0 24 24" fill="#CFCFCF"><path d="M7 17l8-8H9V7h8v8h-2V9l-8 8z"/></svg></div>254    </div>255 256    <div class="suggestion-item">257      <div class="search-icon-wrap">258        <svg viewBox="0 0 24 24" fill="#CFCFCF"><path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.9.9l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 110-9 4.5 4.5 0 010 9z"/></svg>259      </div>260      <div class="text">pop songs hindi</div>261      <div class="launch-icon-wrap"><svg viewBox="0 0 24 24" fill="#CFCFCF"><path d="M7 17l8-8H9V7h8v8h-2V9l-8 8z"/></svg></div>262    </div>263 264    <div class="suggestion-item">265      <div class="search-icon-wrap">266        <svg viewBox="0 0 24 24" fill="#CFCFCF"><path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.9.9l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 110-9 4.5 4.5 0 010 9z"/></svg>267      </div>268      <div class="text">pop songs 2022</div>269      <div class="launch-icon-wrap"><svg viewBox="0 0 24 24" fill="#CFCFCF"><path d="M7 17l8-8H9V7h8v8h-2V9l-8 8z"/></svg></div>270    </div>271 272    <div class="suggestion-item">273      <div class="search-icon-wrap">274        <svg viewBox="0 0 24 24" fill="#CFCFCF"><path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.9.9l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 110-9 4.5 4.5 0 010 9z"/></svg>275      </div>276      <div class="text">pop songs english</div>277      <div class="launch-icon-wrap"><svg viewBox="0 0 24 24" fill="#CFCFCF"><path d="M7 17l8-8H9V7h8v8h-2V9l-8 8z"/></svg></div>278    </div>279 280    <div class="suggestion-item">281      <div class="search-icon-wrap">282        <svg viewBox="0 0 24 24" fill="#CFCFCF"><path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.9.9l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 110-9 4.5 4.5 0 010 9z"/></svg>283      </div>284      <div class="text">pop songs playlist</div>285      <div class="launch-icon-wrap"><svg viewBox="0 0 24 24" fill="#CFCFCF"><path d="M7 17l8-8H9V7h8v8h-2V9l-8 8z"/></svg></div>286    </div>287 288    <div class="suggestion-item">289      <div class="search-icon-wrap">290        <svg viewBox="0 0 24 24" fill="#CFCFCF"><path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.9.9l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 110-9 4.5 4.5 0 010 9z"/></svg>291      </div>292      <div class="text">pop songs lyrics</div>293      <div class="launch-icon-wrap"><svg viewBox="0 0 24 24" fill="#CFCFCF"><path d="M7 17l8-8H9V7h8v8h-2V9l-8 8z"/></svg></div>294    </div>295 296    <div class="suggestion-item">297      <div class="search-icon-wrap">298        <svg viewBox="0 0 24 24" fill="#CFCFCF"><path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.9.9l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 110-9 4.5 4.5 0 010 9z"/></svg>299      </div>300      <div class="text">pop songs 2023 playlist</div>301      <div class="launch-icon-wrap"><svg viewBox="0 0 24 24" fill="#CFCFCF"><path d="M7 17l8-8H9V7h8v8h-2V9l-8 8z"/></svg></div>302    </div>303 304    <div class="suggestion-item">305      <div class="search-icon-wrap">306        <svg viewBox="0 0 24 24" fill="#CFCFCF"><path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.9.9l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 110-9 4.5 4.5 0 010 9z"/></svg>307      </div>308      <div class="text">pop songs telugu</div>309      <div class="launch-icon-wrap"><svg viewBox="0 0 24 24" fill="#CFCFCF"><path d="M7 17l8-8H9V7h8v8h-2V9l-8 8z"/></svg></div>310    </div>311  </div>312 313  <!-- Floating microphone button -->314  <div class="floating-mic">315    <svg viewBox="0 0 24 24" fill="#ffffff">316      <path d="M12 14a3 3 0 003-3V6a3 3 0 10-6 0v5a3 3 0 003 3zm5-3a5 5 0 01-10 0H5a7 7 0 0014 0h-2zM11 19h2v3h-2z"/>317    </svg>318  </div>319 320  <!-- Keyboard -->321  <div class="keyboard">322    <div class="kb-suggestions">323      <div class="kb-pill">324        <!-- small grid icon -->325        <svg viewBox="0 0 24 24" fill="#CFCFCF"><path d="M4 4h6v6H4V4zm10 0h6v6h-6V4zM4 14h6v6H4v-6zm10 0h6v6h-6v-6z"/></svg>326      </div>327      <div>songs</div>328      <div class="kb-divider">|</div>329      <div>songsar</div>330      <div style="margin-left:auto;">331        <!-- Mic on suggestion bar -->332        <svg viewBox="0 0 24 24" fill="#CFCFCF">333          <path d="M12 14a3 3 0 003-3V6a3 3 0 10-6 0v5a3 3 0 003 3zm5-3a5 5 0 01-10 0H5a7 7 0 0014 0h-2z"/>334        </svg>335      </div>336    </div>337 338    <div class="kb-rows">339      <div class="kb-row">340        <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>341        <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>342      </div>343      <div class="kb-row">344        <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>345        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>346      </div>347      <div class="kb-row">348        <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>349        <div class="key">n</div><div class="key">m</div>350        <div class="key wide">351          <!-- backspace -->352          <svg viewBox="0 0 24 24" fill="#EAEAEA">353            <path d="M22 6H8l-6 6 6 6h14V6zm-3 9l-4-3 4-3v6z"/>354          </svg>355        </div>356      </div>357    </div>358 359    <div class="kb-bottom">360      <div class="kb-left-group">361        <div class="key pill">?123</div>362        <div class="key">,</div>363        <div class="key">364          <svg viewBox="0 0 24 24" fill="#EAEAEA"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm0 12a2 2 0 110-4 2 2 0 010 4z"/></svg>365        </div>366        <div class="key space">space</div>367        <div class="key">.</div>368      </div>369      <div class="kb-right-group">370        <div class="key circle">371          <!-- search icon -->372          <svg viewBox="0 0 24 24" fill="#1A1A1A">373            <path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.9.9l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 110-9 4.5 4.5 0 010 9z"/>374          </svg>375        </div>376      </div>377    </div>378 379    <div class="home-indicator"></div>380  </div>381 382</div>383</body>384</html>