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: #ffffff;15 }16 17 /* Top status bar */18 .statusbar {19 background: #62A8AE;20 height: 160px;21 color: #fff;22 position: relative;23 }24 .status-row {25 display: flex;26 align-items: center;27 justify-content: space-between;28 padding: 24px 30px 0 30px;29 font-size: 36px;30 }31 .status-left {32 display: flex; align-items: center; gap: 20px;33 }34 .status-right {35 display: flex; align-items: center; gap: 20px;36 }37 .dot { width: 12px; height: 12px; background: rgba(255,255,255,0.9); border-radius: 50%; }38 .status-icons svg { vertical-align: middle; }39 .battery {40 display: inline-flex; align-items: center; gap: 10px;41 font-size: 32px;42 }43 44 /* Search bar area (white) */45 .search-area {46 background: #ffffff;47 padding: 22px 36px 28px 36px;48 }49 .search-row {50 display: flex;51 align-items: center;52 gap: 26px;53 border-bottom: 1px solid #e9e9e9;54 padding-bottom: 24px;55 }56 .back-icon svg { width: 56px; height: 56px; }57 .search-placeholder {58 font-size: 48px;59 color: #9e9e9e;60 line-height: 1.2;61 padding-top: 6px;62 }63 64 /* Sections */65 .content {66 padding: 8px 36px 0 36px;67 }68 .section {69 margin-top: 24px;70 }71 .section-header {72 display: flex;73 align-items: center;74 justify-content: space-between;75 margin: 18px 0 6px 0;76 }77 .section-left {78 display: flex; align-items: center; gap: 18px;79 }80 .section-title {81 font-size: 36px;82 font-weight: 700;83 color: #7a7a7a;84 }85 .clear-btn {86 font-size: 34px;87 color: #8a8a8a;88 }89 .list-item {90 font-size: 38px;91 color: #111;92 padding: 20px 0;93 }94 .spacer { height: 14px; }95 96 /* Keyboard mock */97 .keyboard {98 position: absolute;99 left: 0;100 bottom: 0;101 width: 1080px;102 height: 860px;103 background: #1f1f1f;104 color: #eaeaea;105 border-top-left-radius: 26px;106 border-top-right-radius: 26px;107 box-shadow: 0 -8px 20px rgba(0,0,0,0.25);108 }109 .kb-top {110 display: flex;111 align-items: center;112 gap: 40px;113 padding: 24px 36px;114 font-size: 32px;115 color: #cfcfcf;116 }117 .kb-keyrow {118 display: grid;119 grid-template-columns: repeat(10, 1fr);120 gap: 16px;121 padding: 18px 28px;122 }123 .kb-key {124 background: #2a2a2a;125 border-radius: 14px;126 height: 92px;127 display: flex; align-items: center; justify-content: center;128 font-size: 40px;129 }130 .kb-key.small { font-size: 34px; }131 .kb-row-3 { grid-template-columns: repeat(9, 1fr); padding-left: 80px; padding-right: 80px; }132 .kb-bottom {133 display: grid;134 grid-template-columns: 140px 120px 1fr 120px 160px 140px;135 gap: 16px;136 padding: 20px 28px;137 }138 .kb-key.wide { grid-column: auto; }139 .spacebar { height: 110px; background: #2a2a2a; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 36px; color: #bdbdbd; }140 .action-circle {141 width: 120px; height: 120px; border-radius: 60px; background: #97E1C0; color: #073a2e;142 display: flex; align-items: center; justify-content: center;143 }144 .circle-left {145 width: 120px; height: 120px; border-radius: 60px; background: #97E1C0; color: #073a2e;146 display: flex; align-items: center; justify-content: center; font-size: 36px;147 }148 .pill {149 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);150 width: 220px; height: 12px; background: #e6e6e6; border-radius: 8px;151 }152</style>153</head>154<body>155<div id="render-target">156 157 <!-- Teal status bar -->158 <div class="statusbar">159 <div class="status-row">160 <div class="status-left">161 <div>8:27</div>162 <div class="status-icons">163 <svg width="40" height="40" viewBox="0 0 40 40" fill="none">164 <circle cx="20" cy="20" r="18" stroke="white" stroke-width="3"></circle>165 <polyline points="12,22 18,28 29,14" stroke="white" stroke-width="3" fill="none"></polyline>166 </svg>167 <svg width="40" height="40" viewBox="0 0 40 40" fill="none">168 <rect x="6" y="8" width="28" height="24" stroke="white" stroke-width="3"></rect>169 <polyline points="6,8 20,22 34,8" stroke="white" stroke-width="3" fill="none"></polyline>170 </svg>171 <svg width="40" height="40" viewBox="0 0 40 40" fill="none">172 <path d="M20 6 L36 32 H4 Z" stroke="white" stroke-width="3" fill="none"></path>173 <line x1="20" y1="16" x2="20" y2="24" stroke="white" stroke-width="3"></line>174 </svg>175 <div class="dot"></div>176 </div>177 </div>178 <div class="status-right">179 <svg width="44" height="44" viewBox="0 0 44 44" fill="none">180 <path d="M6 28c4-6 10-10 16-10s12 4 16 10" stroke="white" stroke-width="3" fill="none" stroke-linecap="round"></path>181 <circle cx="22" cy="32" r="2.6" fill="white"></circle>182 </svg>183 <div class="battery">184 <svg width="54" height="32" viewBox="0 0 54 32" fill="none">185 <rect x="2" y="6" width="44" height="20" stroke="white" stroke-width="3" rx="3"></rect>186 <rect x="46" y="12" width="6" height="8" fill="white"></rect>187 <rect x="6" y="10" width="34" height="12" fill="white"></rect>188 </svg>189 <span>100%</span>190 </div>191 </div>192 </div>193 </div>194 195 <!-- Search bar -->196 <div class="search-area">197 <div class="search-row">198 <div class="back-icon">199 <svg viewBox="0 0 64 64">200 <polyline points="38,14 18,32 38,50" fill="none" stroke="#63A8AE" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"></polyline>201 </svg>202 </div>203 <div class="search-placeholder">What is on your mind today?</div>204 </div>205 </div>206 207 <!-- List content -->208 <div class="content">209 <div class="section">210 <div class="section-header">211 <div class="section-left">212 <svg width="44" height="44" viewBox="0 0 44 44" fill="none">213 <circle cx="22" cy="22" r="18" stroke="#b0bec5" stroke-width="3"></circle>214 <line x1="22" y1="12" x2="22" y2="22" stroke="#b0bec5" stroke-width="3" stroke-linecap="round"></line>215 <line x1="22" y1="22" x2="30" y2="26" stroke="#b0bec5" stroke-width="3" stroke-linecap="round"></line>216 </svg>217 <div class="section-title">Recent Searches</div>218 </div>219 <div class="clear-btn">Clear</div>220 </div>221 <div class="list-item">Visko hammer</div>222 <div class="list-item">Viski</div>223 <div class="list-item">Taparia measuring tape</div>224 <div class="list-item">hammer</div>225 <div class="list-item">screw driver kit</div>226 </div>227 228 <div class="spacer"></div>229 230 <div class="section">231 <div class="section-header">232 <div class="section-left">233 <svg width="44" height="44" viewBox="0 0 44 44" fill="none">234 <path d="M12 20c2-6 7-10 14-10" stroke="#b0bec5" stroke-width="3" fill="none" stroke-linecap="round"></path>235 <path d="M32 24c-2 6-7 10-14 10" stroke="#b0bec5" stroke-width="3" fill="none" stroke-linecap="round"></path>236 <polyline points="24,10 28,10 28,14" stroke="#b0bec5" stroke-width="3" fill="none" stroke-linecap="round"></polyline>237 <polyline points="20,34 16,34 16,30" stroke="#b0bec5" stroke-width="3" fill="none" stroke-linecap="round"></polyline>238 </svg>239 <div class="section-title">Trending Searches</div>240 </div>241 </div>242 <div class="list-item">Time Sale</div>243 <div class="list-item">Mobiles</div>244 <div class="list-item">T-Shirts</div>245 <div class="list-item">Headphones</div>246 <div class="list-item">Shoes</div>247 </div>248 </div>249 250 <!-- Keyboard mock -->251 <div class="keyboard">252 <div class="kb-top">253 <div class="kb-key small" style="height:64px;width:64px;border-radius:12px;">⌨️</div>254 <div>😀</div>255 <div>GIF</div>256 <div>257 <svg width="40" height="40" viewBox="0 0 40 40" fill="none">258 <circle cx="20" cy="20" r="16" stroke="#cfcfcf" stroke-width="3"></circle>259 <path d="M20 10 v8 h8" stroke="#cfcfcf" stroke-width="3" fill="none" stroke-linecap="round"></path>260 </svg>261 </div>262 <div>263 <svg width="40" height="40" viewBox="0 0 40 40" fill="none">264 <path d="M6 26c8-4 20-4 28 0" stroke="#cfcfcf" stroke-width="3" fill="none" stroke-linecap="round"></path>265 <circle cx="20" cy="14" r="9" stroke="#cfcfcf" stroke-width="3"></circle>266 </svg>267 </div>268 <div>🎨</div>269 <div>270 <svg width="40" height="40" viewBox="0 0 40 40" fill="none">271 <circle cx="20" cy="20" r="14" stroke="#cfcfcf" stroke-width="3"></circle>272 <path d="M14 28 l12-16" stroke="#cfcfcf" stroke-width="3"></path>273 </svg>274 </div>275 </div>276 277 <div class="kb-keyrow">278 <div class="kb-key">q</div><div class="kb-key">w</div><div class="kb-key">e</div><div class="kb-key">r</div><div class="kb-key">t</div><div class="kb-key">y</div><div class="kb-key">u</div><div class="kb-key">i</div><div class="kb-key">o</div><div class="kb-key">p</div>279 </div>280 <div class="kb-keyrow">281 <div class="kb-key">a</div><div class="kb-key">s</div><div class="kb-key">d</div><div class="kb-key">f</div><div class="kb-key">g</div><div class="kb-key">h</div><div class="kb-key">j</div><div class="kb-key">k</div><div class="kb-key">l</div><div class="kb-key">⌫</div>282 </div>283 <div class="kb-keyrow kb-row-3">284 <div class="kb-key">⇧</div><div class="kb-key">z</div><div class="kb-key">x</div><div class="kb-key">c</div><div class="kb-key">v</div><div class="kb-key">b</div><div class="kb-key">n</div><div class="kb-key">m</div><div class="kb-key">.</div>285 </div>286 <div class="kb-bottom">287 <div class="circle-left">?123</div>288 <div class="kb-key small">,</div>289 <div class="spacebar">space</div>290 <div class="kb-key small">.</div>291 <div class="kb-key small">⌫</div>292 <div class="action-circle">293 <svg width="56" height="56" viewBox="0 0 56 56" fill="none">294 <circle cx="24" cy="24" r="16" stroke="#073a2e" stroke-width="4"></circle>295 <line x1="34" y1="34" x2="46" y2="46" stroke="#073a2e" stroke-width="4" stroke-linecap="round"></line>296 </svg>297 </div>298 </div>299 <div class="pill"></div>300 </div>301 302</div>303</body>304</html>