GD-ML/AndroidCode
13.4k
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 UI Mock</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: #0E0E0E;15 color: #FFFFFF;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 90px;25 padding: 0 28px;26 box-sizing: border-box;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #fff;31 font-size: 34px;32 letter-spacing: 0.5px;33 }34 .status-left { display: flex; align-items: center; gap: 20px; }35 .notif-dots { display: flex; gap: 10px; }36 .notif-dots span {37 width: 22px; height: 22px; border-radius: 50%; background: #fff; opacity: 0.85;38 display: inline-block;39 }40 .status-right { display: flex; align-items: center; gap: 22px; }41 42 /* Simple icons */43 .icon { width: 44px; height: 44px; fill: #fff; opacity: 0.95; }44 45 /* Search header */46 .search-header {47 position: absolute;48 top: 90px;49 left: 0;50 width: 1080px;51 height: 120px;52 display: flex;53 align-items: center;54 padding: 0 18px 0 6px;55 box-sizing: border-box;56 gap: 12px;57 }58 .back-btn {59 width: 86px;60 height: 86px;61 border-radius: 43px;62 display: flex;63 align-items: center;64 justify-content: center;65 }66 .search-field {67 flex: 1;68 height: 86px;69 border-radius: 43px;70 background: #1C1C1E;71 display: flex;72 align-items: center;73 padding: 0 26px;74 box-sizing: border-box;75 gap: 18px;76 }77 .search-field .text {78 flex: 1;79 color: #EDEDED;80 font-size: 34px;81 white-space: nowrap;82 overflow: hidden;83 text-overflow: ellipsis;84 }85 .clear-btn {86 width: 64px; height: 64px; border-radius: 50%;87 background: #2A2A2D; display: flex; align-items: center; justify-content: center;88 }89 90 /* Suggestion row */91 .suggestion {92 position: absolute;93 top: 220px;94 left: 0;95 width: 1080px;96 height: 90px;97 display: flex;98 align-items: center;99 padding: 0 26px;100 box-sizing: border-box;101 gap: 18px;102 }103 .suggestion .s-text {104 flex: 1;105 color: #CFCFCF;106 font-size: 32px;107 }108 .suggestion .chev {109 width: 54px; height: 54px; display: flex; align-items: center; justify-content: center;110 }111 112 /* Floating mic button */113 .mic-float {114 position: absolute;115 right: 46px;116 top: 1230px;117 width: 120px; height: 120px; border-radius: 60px;118 background: #1F1F22;119 box-shadow: 0 8px 24px rgba(0,0,0,0.5);120 display: flex; align-items: center; justify-content: center;121 }122 .mic-float svg { width: 60px; height: 60px; fill: #fff; }123 124 /* Mini player */125 .mini-player {126 position: absolute;127 left: 0;128 top: 1460px;129 width: 1080px;130 height: 180px;131 border-top: 4px solid #E53935;132 background: #0E0E0E;133 display: flex;134 align-items: center;135 padding: 0 18px;136 box-sizing: border-box;137 gap: 18px;138 }139 .thumb {140 width: 260px; height: 150px;141 background: #E0E0E0; border: 1px solid #BDBDBD; color: #5F5F5F;142 display: flex; align-items: center; justify-content: center; font-size: 24px;143 }144 .mp-meta { flex: 1; display: flex; flex-direction: column; gap: 8px; }145 .mp-title { font-size: 30px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }146 .mp-sub { font-size: 26px; color: #B9B9B9; }147 .mp-actions { display: flex; align-items: center; gap: 16px; }148 .play-btn {149 width: 96px; height: 96px; border-radius: 48px; border: 2px solid #fff;150 display: flex; align-items: center; justify-content: center;151 }152 .close-btn { width: 54px; height: 54px; border-radius: 27px; background: #2A2A2D; display: flex; align-items: center; justify-content: center; }153 154 /* Keyboard */155 .keyboard {156 position: absolute;157 left: 0;158 bottom: 0;159 width: 1080px;160 height: 760px;161 background: #1A1A1D;162 border-top-left-radius: 24px;163 border-top-right-radius: 24px;164 box-shadow: 0 -6px 20px rgba(0,0,0,0.6);165 padding: 18px 18px 24px;166 box-sizing: border-box;167 display: flex;168 flex-direction: column;169 gap: 18px;170 }171 .kb-suggestions { display: flex; gap: 18px; }172 .chip {173 background: #2A2A2D; color: #EAEAEA; padding: 12px 22px; border-radius: 18px; font-size: 28px;174 }175 .row { display: flex; justify-content: center; gap: 16px; }176 .key {177 background: #2A2A2D; color: #fff; min-width: 84px; height: 110px;178 border-radius: 18px; display: flex; align-items: center; justify-content: center;179 font-size: 38px; box-sizing: border-box; padding: 0 10px;180 }181 .key.wide { min-width: 130px; }182 .space { flex: 1; min-width: 360px; }183 .enter { background: #C8D0FF; color: #0D0D0D; }184 .bottom-row { display: flex; align-items: center; gap: 16px; }185 .hint-bar {186 position: absolute; left: 50%; transform: translateX(-50%);187 bottom: 12px; width: 420px; height: 10px; border-radius: 5px; background: #DADADA; opacity: 0.9;188 }189</style>190</head>191<body>192<div id="render-target">193 194 <!-- Status Bar -->195 <div class="status-bar">196 <div class="status-left">197 <div style="font-weight:600;">10:01</div>198 <div class="notif-dots">199 <span></span><span></span><span></span><span></span>200 </div>201 <span style="width: 10px; height: 10px; background:#fff; border-radius:50%; display:inline-block; opacity:0.8;"></span>202 </div>203 <div class="status-right">204 <!-- WiFi -->205 <svg class="icon" viewBox="0 0 24 24">206 <path d="M12 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm-6-6 1.4 1.4A7 7 0 0 1 12 13a7 7 0 0 1 4.6 2.4L18 14c-3.3-3.2-8.7-3.2-12 0ZM3 11l1.4 1.4C8.6 8.2 15.4 8.2 19.6 12.4L21 11C15.9 6 8.1 6 3 11Z"/>207 </svg>208 <!-- Battery -->209 <svg class="icon" viewBox="0 0 24 24">210 <rect x="2" y="7" width="18" height="10" rx="2" ry="2" fill="#fff"></rect>211 <rect x="3.5" y="8.5" width="12" height="7" fill="#0E0E0E"></rect>212 <rect x="21" y="10" width="2" height="4" fill="#fff"></rect>213 </svg>214 </div>215 </div>216 217 <!-- Search Header -->218 <div class="search-header">219 <div class="back-btn">220 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">221 <path d="M15.5 4 7 12l8.5 8 1.5-1.5L10 12l7-6.5z"/>222 </svg>223 </div>224 <div class="search-field">225 <div class="text">London vacation travel guide | Expedia</div>226 <div class="clear-btn">227 <svg width="28" height="28" viewBox="0 0 24 24" fill="#fff">228 <path d="M18.3 5.7 12 12l6.3 6.3-1.3 1.4L10.6 13.4 4.3 19.7 3 18.3 9.3 12 3 5.7 4.3 4.3l6.3 6.3L17 4.3l1.3 1.4z"/>229 </svg>230 </div>231 </div>232 </div>233 234 <!-- Suggestion Row -->235 <div class="suggestion">236 <svg width="48" height="48" viewBox="0 0 24 24" fill="#CFCFCF">237 <path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5Zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14Z"/>238 </svg>239 <div class="s-text">london vacation travel guide expedia</div>240 <div class="chev">241 <svg width="42" height="42" viewBox="0 0 24 24" fill="#CFCFCF">242 <path d="M5 12h10l-4-4 1.4-1.4L19.8 12l-7.4 5.4L11 16l4-4H5z"/>243 </svg>244 </div>245 </div>246 247 <!-- Floating Mic Button -->248 <div class="mic-float" aria-label="Voice search">249 <svg viewBox="0 0 24 24">250 <path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3Zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.9V21h2v-3.1A7 7 0 0 0 19 11h-2Z"/>251 </svg>252 </div>253 254 <!-- Mini Player -->255 <div class="mini-player">256 <div class="thumb">[IMG: Video Thumbnail]</div>257 <div class="mp-meta">258 <div class="mp-title">Your First Visit in Singapore | ...</div>259 <div class="mp-sub">Hungry Passport</div>260 </div>261 <div class="mp-actions">262 <div class="play-btn">263 <svg width="48" height="48" viewBox="0 0 24 24" fill="#fff">264 <path d="M8 5v14l11-7z"/>265 </svg>266 </div>267 <div class="close-btn">268 <svg width="24" height="24" viewBox="0 0 24 24" fill="#fff">269 <path d="M18.3 5.7 12 12l6.3 6.3-1.3 1.4L10.6 13.4 4.3 19.7 3 18.3 9.3 12 3 5.7 4.3 4.3l6.3 6.3L17 4.3l1.3 1.4z"/>270 </svg>271 </div>272 </div>273 </div>274 275 <!-- Keyboard -->276 <div class="keyboard">277 <div class="kb-suggestions">278 <div class="chip">to</div>279 <div class="chip">app</div>280 <div class="chip">in</div>281 </div>282 283 <div class="row">284 <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>285 <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>286 </div>287 <div class="row">288 <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>289 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>290 <div class="key wide">291 <svg width="32" height="32" viewBox="0 0 24 24" fill="#fff">292 <path d="M19 6.4 17.6 5l-5.9 5.9L5.9 5 4.5 6.4 10.4 12l-5.9 5.6 1.4 1.4 5.8-5.8 5.9 5.8 1.4-1.4L13.4 12 19 6.4z"/>293 </svg>294 </div>295 </div>296 <div class="row">297 <div class="key wide">298 <svg width="32" height="32" viewBox="0 0 24 24" fill="#fff">299 <path d="M7 6h10v2H7V6Zm0 5h10v2H7v-2Zm0 5h6v2H7v-2Z"/>300 </svg>301 </div>302 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>303 <div class="key">b</div><div class="key">n</div><div class="key">m</div>304 <div class="key wide">305 <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff">306 <path d="M6 6h9v2H8v8h7v2H6V6Zm12 9-4-4 4-4v8Z"/>307 </svg>308 </div>309 </div>310 <div class="bottom-row">311 <div class="key wide">?123</div>312 <div class="key wide">313 <svg width="30" height="30" viewBox="0 0 24 24" fill="#fff">314 <circle cx="12" cy="12" r="5"/>315 </svg>316 </div>317 <div class="key">,</div>318 <div class="key space"></div>319 <div class="key">.</div>320 <div class="key enter">321 <svg width="32" height="32" viewBox="0 0 24 24" fill="#0D0D0D">322 <path d="M20 7h-2v6H7.8l3.6-3.6L10 8l-6 6 6 6 1.4-1.4-3.6-3.6H20V7z"/>323 </svg>324 </div>325 </div>326 <div class="hint-bar"></div>327 </div>328 329</div>330</body>331</html>