GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Search UI - Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #000000;14 border-radius: 28px;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 96px;24 padding: 24px 32px;25 color: #ffffff;26 display: flex;27 align-items: center;28 justify-content: space-between;29 box-sizing: border-box;30 font-weight: 500;31 letter-spacing: 0.5px;32 }33 .status-left { display: flex; align-items: center; gap: 12px; font-size: 40px; }34 .status-right { display: flex; align-items: center; gap: 24px; }35 .status-icon svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 2.5; }36 37 /* Top search row */38 .search-row {39 position: absolute;40 top: 120px;41 left: 32px;42 width: 1016px;43 display: flex;44 align-items: center;45 gap: 18px;46 }47 .search-pill {48 flex: 1;49 height: 88px;50 background: #2D2D2D;51 border-radius: 18px;52 display: flex;53 align-items: center;54 padding: 0 20px;55 box-sizing: border-box;56 }57 .search-pill .icon {58 width: 42px;59 height: 42px;60 margin-right: 14px;61 }62 .search-text {63 color: #ffffff;64 font-size: 34px;65 flex: 1;66 white-space: nowrap;67 overflow: hidden;68 }69 .caret {70 width: 3px;71 height: 36px;72 background: #FF7C2E;73 margin-left: 4px;74 border-radius: 2px;75 }76 .clear-btn {77 width: 56px;78 height: 56px;79 border-radius: 50%;80 background: #4A4A4A;81 display: flex;82 align-items: center;83 justify-content: center;84 margin-left: 12px;85 }86 .clear-btn svg { width: 28px; height: 28px; stroke: #fff; stroke-width: 3; }87 88 .cast {89 width: 64px;90 height: 44px;91 border-radius: 8px;92 display: flex;93 align-items: center;94 justify-content: center;95 }96 .cast svg { width: 44px; height: 44px; fill: none; stroke: #cccccc; stroke-width: 3; }97 98 /* Center message */99 .empty-state {100 position: absolute;101 top: 1320px;102 left: 0;103 width: 100%;104 text-align: center;105 }106 .empty-title {107 color: #FFFFFF;108 font-size: 40px;109 font-weight: 600;110 margin-bottom: 18px;111 }112 .empty-sub {113 color: #9E9E9E;114 font-size: 30px;115 font-weight: 400;116 }117 118 /* Suggestion pill above keyboard */119 .suggestion {120 position: absolute;121 top: 1550px;122 left: 50%;123 transform: translateX(-50%);124 padding: 10px 26px;125 border-radius: 22px;126 background: #2E2E2E;127 color: #E0E0E0;128 font-size: 32px;129 }130 131 /* Keyboard */132 .keyboard {133 position: absolute;134 bottom: 0;135 left: 0;136 width: 1080px;137 height: 900px;138 background: #121212;139 border-top-left-radius: 26px;140 border-top-right-radius: 26px;141 box-sizing: border-box;142 padding: 24px 24px 34px 24px;143 }144 .kb-row {145 display: flex;146 justify-content: center;147 gap: 16px;148 margin-bottom: 22px;149 }150 .key {151 width: 92px;152 height: 92px;153 background: #2B2B2B;154 border: 1px solid #3A3A3A;155 border-radius: 16px;156 color: #FFFFFF;157 font-size: 34px;158 display: flex;159 align-items: center;160 justify-content: center;161 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);162 }163 .key.wide { width: 128px; }164 .key.shift { width: 130px; }165 .key.backspace { width: 130px; }166 .space {167 width: 420px;168 height: 92px;169 background: #222;170 border: 1px solid #3A3A3A;171 border-radius: 16px;172 }173 .bottom-row {174 display: flex;175 justify-content: space-between;176 align-items: center;177 padding: 0 20px;178 margin-top: 12px;179 }180 .big-circle {181 width: 106px;182 height: 106px;183 border-radius: 53px;184 background: #2B2B2B;185 border: 1px solid #3A3A3A;186 color: #D0D0D0;187 font-size: 34px;188 display: flex;189 align-items: center;190 justify-content: center;191 }192 .search-action {193 width: 106px;194 height: 106px;195 border-radius: 53px;196 background: #BFD3FF;197 display: flex;198 align-items: center;199 justify-content: center;200 }201 .search-action svg { width: 42px; height: 42px; stroke: #1E2B44; stroke-width: 4; fill: none; }202 203 .kb-top-right {204 position: absolute;205 right: 30px;206 top: 26px;207 width: 72px;208 height: 72px;209 border-radius: 36px;210 background: #2B2B2B;211 border: 1px solid #3A3A3A;212 display: flex;213 align-items: center;214 justify-content: center;215 }216 .kb-top-right svg { width: 34px; height: 34px; fill: none; stroke: #DADADA; stroke-width: 3; }217 218 .emoji-grid {219 width: 92px;220 height: 92px;221 background: #2B2B2B;222 border: 1px solid #3A3A3A;223 border-radius: 16px;224 display: flex;225 align-items: center;226 justify-content: center;227 }228 .emoji-grid svg { width: 42px; height: 42px; fill: none; stroke: #DADADA; stroke-width: 3; }229 230 .backspace-icon svg, .shift-icon svg {231 width: 34px; height: 34px; stroke: #fff; stroke-width: 3; fill: none;232 }233</style>234</head>235<body>236<div id="render-target">237 238 <!-- Status bar -->239 <div class="status-bar">240 <div class="status-left">241 <span>10:34</span>242 <span class="status-icon">243 <!-- small search icon -->244 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6" stroke="#fff" /><path d="M14 14 L20 20" stroke="#fff"/></svg>245 </span>246 </div>247 <div class="status-right">248 <span class="status-icon">249 <!-- Do Not Disturb -->250 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M7 12 H17"/></svg>251 </span>252 <span class="status-icon">253 <!-- Wi-Fi -->254 <svg viewBox="0 0 24 24">255 <path d="M3 8 C8 4, 16 4, 21 8" />256 <path d="M6 12 C10 9, 14 9, 18 12" />257 <path d="M9 16 C12 14, 12 14, 15 16" />258 <circle cx="12" cy="19" r="1.5" fill="#fff" stroke="none"/>259 </svg>260 </span>261 <span class="status-icon">262 <!-- Battery -->263 <svg viewBox="0 0 28 24">264 <rect x="2" y="6" width="20" height="12" rx="2" />265 <rect x="23" y="9" width="3" height="6" rx="1" />266 <rect x="4" y="8" width="12" height="8" fill="#fff" stroke="none"/>267 </svg>268 </span>269 </div>270 </div>271 272 <!-- Search bar row -->273 <div class="search-row">274 <div class="search-pill">275 <div class="icon">276 <!-- Back arrow -->277 <svg viewBox="0 0 24 24">278 <path d="M15 5 L7 12 L15 19" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>279 </svg>280 </div>281 <div class="search-text">Real Love Martin Garrix</div>282 <div class="caret"></div>283 <div class="clear-btn">284 <svg viewBox="0 0 24 24">285 <path d="M6 6 L18 18 M18 6 L6 18" />286 </svg>287 </div>288 </div>289 <div class="cast">290 <!-- Cast icon -->291 <svg viewBox="0 0 24 24">292 <rect x="3" y="5" width="18" height="12" rx="2"/>293 <path d="M3 18 C6 18, 9 21, 12 21" />294 <path d="M3 15 C5 15, 7 17, 9 17" />295 <path d="M3 12 C4 12, 6 13, 7 14" />296 </svg>297 </div>298 </div>299 300 <!-- Empty state message -->301 <div class="empty-state">302 <div class="empty-title">No suggestions for current search</div>303 <div class="empty-sub">Check the spelling or try a different search</div>304 </div>305 306 <!-- Suggestion pill -->307 <div class="suggestion">Garrix</div>308 309 <!-- Keyboard -->310 <div class="keyboard">311 <div class="kb-top-right">312 <!-- Microphone -->313 <svg viewBox="0 0 24 24">314 <rect x="9" y="4" width="6" height="10" rx="3"/>315 <path d="M6 10 C6 14, 18 14, 18 10" />316 <path d="M12 14 V20 M9 20 H15" />317 </svg>318 </div>319 320 <!-- Row 1 -->321 <div class="kb-row">322 <div class="key">q</div>323 <div class="key">w</div>324 <div class="key">e</div>325 <div class="key">r</div>326 <div class="key">t</div>327 <div class="key">y</div>328 <div class="key">u</div>329 <div class="key">i</div>330 <div class="key">o</div>331 <div class="key">p</div>332 </div>333 334 <!-- Row 2 -->335 <div class="kb-row">336 <div class="key">a</div>337 <div class="key">s</div>338 <div class="key">d</div>339 <div class="key">f</div>340 <div class="key">g</div>341 <div class="key">h</div>342 <div class="key">j</div>343 <div class="key">k</div>344 <div class="key">l</div>345 </div>346 347 <!-- Row 3 -->348 <div class="kb-row">349 <div class="key shift">350 <span class="shift-icon">351 <svg viewBox="0 0 24 24"><path d="M12 5 L5 13 H9 V19 H15 V13 H19 Z"/></svg>352 </span>353 </div>354 <div class="key">z</div>355 <div class="key">x</div>356 <div class="key">c</div>357 <div class="key">v</div>358 <div class="key">b</div>359 <div class="key">n</div>360 <div class="key">m</div>361 <div class="key backspace">362 <span class="backspace-icon">363 <svg viewBox="0 0 24 24"><path d="M5 6 L11 6 H19 V18 H11 L5 18 L9 12 Z"/></svg>364 </span>365 </div>366 </div>367 368 <!-- Bottom row -->369 <div class="bottom-row">370 <div class="big-circle">?123</div>371 <div style="display:flex; align-items:center; gap:16px;">372 <div class="emoji-grid">373 <svg viewBox="0 0 24 24">374 <rect x="4" y="4" width="6" height="6" rx="1"/>375 <rect x="14" y="4" width="6" height="6" rx="1"/>376 <rect x="4" y="14" width="6" height="6" rx="1"/>377 <rect x="14" y="14" width="6" height="6" rx="1"/>378 </svg>379 </div>380 <div class="key">,</div>381 <div class="space"></div>382 <div class="key">.</div>383 </div>384 <div class="search-action">385 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="7"/><path d="M15 15 L21 21"/></svg>386 </div>387 </div>388 </div>389 390</div>391</body>392</html>