GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile Search UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 border-radius: 0;14 box-shadow: none;15 }16 17 /* Top area with subtle teal gradient */18 .top-gradient {19 position: absolute;20 left: 0; top: 0;21 width: 1080px;22 height: 780px;23 background: linear-gradient(180deg, #9fd8d6 0%, #bfe6e5 30%, #e9f7f7 55%, #ffffff 100%);24 }25 26 /* Status bar */27 .status-bar {28 height: 80px;29 padding: 12px 24px;30 display: flex;31 align-items: center;32 font-size: 36px;33 color: #1a1a1a;34 }35 .status-left { display: flex; align-items: center; gap: 20px; }36 .status-right {37 margin-left: auto;38 display: flex;39 align-items: center;40 gap: 18px;41 }42 .dot {43 width: 16px; height: 16px; background: #1a1a1a; border-radius: 50%;44 opacity: 0.7;45 }46 .wifi, .battery {47 width: 40px; height: 28px;48 }49 50 /* Search header row */51 .search-row {52 display: flex;53 align-items: center;54 padding: 22px 30px;55 gap: 22px;56 }57 .back-btn {58 width: 80px; height: 80px; border-radius: 40px;59 display: flex; align-items: center; justify-content: center;60 }61 .search-field {62 flex: 1;63 height: 110px;64 background: #ffffff;65 border-radius: 26px;66 box-shadow: 0 2px 0 rgba(0,0,0,0.08);67 display: flex; align-items: center;68 padding: 0 26px;69 gap: 20px;70 border: 1px solid #e3e3e3;71 }72 .search-input-text {73 font-size: 32px;74 color: #1e1e1e;75 flex: 1;76 white-space: nowrap;77 overflow: hidden;78 text-overflow: ellipsis;79 }80 .icon-btn {81 width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;82 }83 84 /* Suggestions list */85 .suggestions {86 margin-top: 10px;87 padding: 0 30px;88 }89 .suggestion-item {90 height: 120px;91 background: #ffffff;92 border-radius: 18px;93 border: 1px solid #e6e6e6;94 display: flex; align-items: center;95 padding: 0 22px;96 margin-bottom: 22px;97 box-shadow: 0 1px 0 rgba(0,0,0,0.06);98 }99 .suggestion-text {100 font-size: 34px;101 color: #1f1f1f;102 flex: 1;103 white-space: nowrap;104 overflow: hidden;105 text-overflow: ellipsis;106 }107 .suggestion-left {108 width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; margin-right: 22px;109 }110 .suggestion-right {111 width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; margin-left: 20px;112 }113 114 /* Main content area (empty) */115 .content-area {116 position: absolute;117 left: 0; top: 780px;118 width: 1080px; height: 750px;119 background: #ffffff;120 }121 122 /* Keyboard */123 .keyboard {124 position: absolute;125 left: 0; bottom: 0;126 width: 1080px;127 height: 870px;128 background: #1f2126;129 box-shadow: inset 0 6px 12px rgba(0,0,0,0.35);130 color: #f3f3f3;131 }132 .kb-topbar {133 height: 96px;134 border-bottom: 1px solid #2c2f36;135 display: flex;136 align-items: center;137 padding: 0 26px;138 gap: 20px;139 }140 .kb-suggestion {141 flex: 1;142 text-align: center;143 font-size: 40px;144 color: #e7e7e7;145 }146 .kb-icon {147 width: 66px; height: 66px; display: flex; align-items: center; justify-content: center; background: #2a2d33; border-radius: 16px;148 }149 150 .kb-rows {151 padding: 26px 24px;152 }153 .kb-row {154 display: flex;155 justify-content: space-between;156 margin-bottom: 24px;157 }158 .key {159 width: 88px; height: 110px;160 background: #2b2e34;161 border-radius: 22px;162 display: flex; align-items: center; justify-content: center;163 font-size: 42px;164 color: #eaeaea;165 box-shadow: 0 2px 0 rgba(0,0,0,0.4);166 }167 .key.wide { width: 170px; }168 .space { flex: 1; height: 110px; margin: 0 16px; background: #2b2e34; border-radius: 22px; }169 .home-indicator {170 position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);171 width: 520px; height: 12px; background: #e8e8e8; border-radius: 6px; opacity: 0.8;172 }173 174 /* Simple SVG styling */175 svg { display: block; }176</style>177</head>178<body>179<div id="render-target">180 181 <div class="top-gradient">182 <!-- Status bar -->183 <div class="status-bar">184 <div class="status-left">185 <div>1:10</div>186 <div class="dot" style="width:22px;height:22px;border-radius:11px;"></div>187 <div class="dot" style="width:22px;height:22px;border-radius:11px;"></div>188 <div class="dot" style="width:22px;height:22px;border-radius:11px;"></div>189 </div>190 <div class="status-right">191 <!-- WiFi -->192 <svg class="wifi" viewBox="0 0 24 24">193 <path d="M2 8c5-5 15-5 20 0" stroke="#1a1a1a" stroke-width="2" fill="none" />194 <path d="M5 12c3-3 11-3 14 0" stroke="#1a1a1a" stroke-width="2" fill="none" />195 <circle cx="12" cy="16" r="2" fill="#1a1a1a"/>196 </svg>197 <!-- Battery -->198 <svg class="battery" viewBox="0 0 28 16">199 <rect x="1" y="2" width="22" height="12" rx="2" ry="2" stroke="#1a1a1a" fill="none" stroke-width="2"/>200 <rect x="3" y="4" width="16" height="8" rx="1" fill="#1a1a1a"/>201 <rect x="24" y="5" width="3" height="6" rx="1" fill="#1a1a1a"/>202 </svg>203 </div>204 </div>205 206 <!-- Search field -->207 <div class="search-row">208 <div class="back-btn">209 <svg width="44" height="44" viewBox="0 0 24 24">210 <path d="M15 6l-6 6 6 6" stroke="#1a1a1a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>211 </svg>212 </div>213 <div class="search-field">214 <div class="icon-btn">215 <svg width="40" height="40" viewBox="0 0 24 24">216 <circle cx="11" cy="11" r="7" stroke="#555" stroke-width="2" fill="none"/>217 <path d="M20 20l-4.2-4.2" stroke="#555" stroke-width="2" stroke-linecap="round"/>218 </svg>219 </div>220 <div class="search-input-text">e 15 Pro Max (256GB) in Blue Titanium</div>221 <div class="icon-btn">222 <svg width="32" height="32" viewBox="0 0 24 24">223 <path d="M6 6l12 12M18 6L6 18" stroke="#777" stroke-width="2" stroke-linecap="round"/>224 </svg>225 </div>226 </div>227 </div>228 229 <!-- Suggestions -->230 <div class="suggestions">231 <div class="suggestion-item">232 <div class="suggestion-left">233 <svg width="40" height="40" viewBox="0 0 24 24">234 <circle cx="11" cy="11" r="7" stroke="#666" stroke-width="2" fill="none"/>235 <path d="M20 20l-4.2-4.2" stroke="#666" stroke-width="2" stroke-linecap="round"/>236 </svg>237 </div>238 <div class="suggestion-text">iphone 15 pro max 256gb blue titanium</div>239 <div class="suggestion-right">240 <svg width="38" height="38" viewBox="0 0 24 24">241 <path d="M8 5l8 7-8 7" stroke="#7a7a7a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>242 </svg>243 </div>244 </div>245 246 <div class="suggestion-item">247 <div class="suggestion-left">248 <svg width="40" height="40" viewBox="0 0 24 24">249 <circle cx="11" cy="11" r="7" stroke="#666" stroke-width="2" fill="none"/>250 <path d="M20 20l-4.2-4.2" stroke="#666" stroke-width="2" stroke-linecap="round"/>251 </svg>252 </div>253 <div class="suggestion-text">apple iphone 15 pro max 8gb 256gb - blue...</div>254 <div class="suggestion-right">255 <svg width="38" height="38" viewBox="0 0 24 24">256 <path d="M8 5l8 7-8 7" stroke="#7a7a7a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>257 </svg>258 </div>259 </div>260 261 <div class="suggestion-item">262 <div class="suggestion-left">263 <svg width="40" height="40" viewBox="0 0 24 24">264 <circle cx="11" cy="11" r="7" stroke="#666" stroke-width="2" fill="none"/>265 <path d="M20 20l-4.2-4.2" stroke="#666" stroke-width="2" stroke-linecap="round"/>266 </svg>267 </div>268 <div class="suggestion-text">apple iphone 15 pro max 256gb blue tit...</div>269 <div class="suggestion-right">270 <svg width="38" height="38" viewBox="0 0 24 24">271 <path d="M8 5l8 7-8 7" stroke="#7a7a7a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>272 </svg>273 </div>274 </div>275 </div>276 </div>277 278 <!-- Main content placeholder -->279 <div class="content-area"></div>280 281 <!-- Keyboard section -->282 <div class="keyboard">283 <div class="kb-topbar">284 <div class="kb-icon">285 <!-- simple grid icon -->286 <svg width="34" height="34" viewBox="0 0 24 24">287 <rect x="3" y="3" width="7" height="7" fill="#9aa0a6"/>288 <rect x="14" y="3" width="7" height="7" fill="#9aa0a6"/>289 <rect x="3" y="14" width="7" height="7" fill="#9aa0a6"/>290 <rect x="14" y="14" width="7" height="7" fill="#9aa0a6"/>291 </svg>292 </div>293 <div class="kb-suggestion">Titanium</div>294 <div class="kb-icon">295 <svg width="30" height="30" viewBox="0 0 24 24">296 <path d="M12 4a3 3 0 0 1 3 3v6a3 3 0 1 1-6 0V7a3 3 0 0 1 3-3z" fill="#9aa0a6"/>297 <path d="M6 14c0 3 2.5 5 6 5s6-2 6-5" stroke="#9aa0a6" stroke-width="2" fill="none"/>298 </svg>299 </div>300 </div>301 302 <div class="kb-rows">303 <div class="kb-row">304 <div class="key">q</div>305 <div class="key">w</div>306 <div class="key">e</div>307 <div class="key">r</div>308 <div class="key">t</div>309 <div class="key">y</div>310 <div class="key">u</div>311 <div class="key">i</div>312 <div class="key">o</div>313 <div class="key">p</div>314 </div>315 316 <div class="kb-row">317 <div class="key">a</div>318 <div class="key">s</div>319 <div class="key">d</div>320 <div class="key">f</div>321 <div class="key">g</div>322 <div class="key">h</div>323 <div class="key">j</div>324 <div class="key">k</div>325 <div class="key">l</div>326 </div>327 328 <div class="kb-row">329 <div class="key wide">⇧</div>330 <div class="key">z</div>331 <div class="key">x</div>332 <div class="key">c</div>333 <div class="key">v</div>334 <div class="key">b</div>335 <div class="key">n</div>336 <div class="key">m</div>337 <div class="key wide">338 <svg width="36" height="36" viewBox="0 0 24 24">339 <path d="M20 12H8m0 0l4-4m-4 4l4 4" stroke="#eaeaea" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>340 </svg>341 </div>342 </div>343 344 <div class="kb-row">345 <div class="key wide">?123</div>346 <div class="key">,</div>347 <div class="key">😊</div>348 <div class="space"></div>349 <div class="key">.</div>350 <div class="key wide">351 <svg width="40" height="40" viewBox="0 0 24 24">352 <path d="M5 12h12m0 0l-5-5m5 5l-5 5" stroke="#eaeaea" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>353 </svg>354 </div>355 </div>356 </div>357 358 <div class="home-indicator"></div>359 </div>360 361</div>362</body>363</html>