GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Search Cars UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width:1080px; height:2400px;10 position:relative; overflow:hidden;11 background:#fff;12 }13 14 /* Status bar */15 .status-bar {16 position:absolute; top:0; left:0; right:0;17 height:100px;18 padding:0 28px;19 display:flex; align-items:center; justify-content:space-between;20 color:#1f2a37; font-weight:600; font-size:40px;21 }22 .status-right {23 display:flex; align-items:center; gap:26px;24 font-size:36px; color:#333;25 }26 .icon-circle {27 width:38px; height:38px; border:4px solid #333; border-radius:50%;28 position:relative;29 }30 .icon-circle::after { content:""; position:absolute; width:20px; height:4px; background:#333; top:50%; left:50%; transform:translate(-50%,-50%); }31 .wifi {32 width:44px; height:32px; position:relative;33 }34 .wifi::before, .wifi::after {35 content:""; position:absolute; border:4px solid #333; border-radius:50%; left:0; right:0;36 }37 .wifi::before { top:-2px; height:32px; }38 .wifi::after { top:10px; height:20px; }39 .battery {40 display:flex; align-items:center; gap:10px; font-size:36px;41 }42 .battery-shape {43 width:48px; height:28px; border:4px solid #333; border-radius:6px; position:relative;44 }45 .battery-shape::after { content:""; position:absolute; right:-10px; top:8px; width:8px; height:12px; background:#333; border-radius:2px; }46 .battery-level { width:30px; height:18px; background:#333; position:absolute; top:5px; left:6px; border-radius:3px; }47 48 /* Search bar */49 .search-wrap {50 position:absolute; top:120px; left:30px; right:30px; height:140px;51 border:4px solid #ff9f69; border-radius:28px;52 display:flex; align-items:center; padding:0 26px; box-sizing:border-box;53 box-shadow: 0 0 0 2px rgba(255,159,105,0.25) inset;54 }55 .back-icon {56 width:56px; height:56px; margin-right:20px;57 }58 .back-icon svg { width:100%; height:100%; }59 .search-placeholder {60 font-size:44px; color:#95a3b7;61 }62 63 /* Section titles */64 .section-title {65 position:absolute; left:30px; font-size:44px; font-weight:700; color:#0f2742;66 }67 #recent-title { top:320px; }68 #trending-title { top:540px; }69 #popular-title { bottom:880px; }70 71 /* Chips */72 .chips {73 position:absolute; left:30px; right:30px;74 display:flex; flex-wrap:wrap; gap:26px;75 }76 #recent-chips { top:390px; }77 #trending-chips { top:610px; }78 .chip {79 background:#f5f8ff; color:#1f2a37;80 height:110px; padding:0 28px; border-radius:30px;81 display:flex; align-items:center; gap:24px;82 font-size:40px; font-weight:600;83 }84 .chip .clock svg, .chip .trend svg { width:44px; height:44px; }85 .chip .clock svg path { fill:#7a8da5; }86 .chip .trend svg path { fill:#3b71ff; }87 88 /* Keyboard mock */89 .keyboard {90 position:absolute; left:0; right:0; bottom:0;91 height:880px; background:#fde7df;92 border-top-left-radius:30px; border-top-right-radius:30px;93 padding:40px 34px; box-sizing:border-box;94 }95 .kb-top-row {96 display:flex; align-items:center; gap:28px; margin-bottom:36px;97 }98 .kb-action {99 width:88px; height:88px; background:#ffd9cf; border-radius:26px;100 display:flex; align-items:center; justify-content:center; font-size:44px;101 }102 .kb-mic {103 width:90px; height:90px; background:#ffd0c5; border-radius:30px;104 display:flex; align-items:center; justify-content:center;105 box-shadow:0 2px 0 rgba(0,0,0,0.05);106 }107 .kb-rows { margin-top:20px; }108 .kb-row {109 display:flex; justify-content:space-between; margin-bottom:26px;110 padding:0 10px;111 }112 .key {113 width:88px; height:120px; background:#fff; border-radius:28px;114 display:flex; align-items:center; justify-content:center; font-size:44px; color:#2b2b2b;115 box-shadow:0 2px 0 rgba(0,0,0,0.06);116 }117 .key-wide { width:160px; }118 .space-row { display:flex; align-items:center; justify-content:center; gap:28px; margin-top:14px; }119 .space { flex:1; height:120px; background:#fff; border-radius:28px; display:flex; align-items:center; justify-content:center; font-size:40px; color:#777; }120 .round-btn {121 width:120px; height:120px; background:#f7c2b5; border-radius:60px;122 display:flex; align-items:center; justify-content:center; font-size:60px; color:#4a2c25;123 box-shadow:0 2px 0 rgba(0,0,0,0.06);124 }125</style>126</head>127<body>128<div id="render-target">129 130 <!-- Status Bar -->131 <div class="status-bar">132 <div>11:08</div>133 <div class="status-right">134 <div class="icon-circle"></div>135 <div class="wifi"></div>136 <div class="battery">137 <div class="battery-shape"><div class="battery-level"></div></div>138 <div>86%</div>139 </div>140 </div>141 </div>142 143 <!-- Search Bar -->144 <div class="search-wrap">145 <div class="back-icon">146 <svg viewBox="0 0 24 24">147 <path d="M15.5 4.5L6 12l9.5 7.5" fill="none" stroke="#1f2a37" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>148 </svg>149 </div>150 <div class="search-placeholder">Search for your favourite cars</div>151 </div>152 153 <!-- Recent Searches -->154 <div id="recent-title" class="section-title">Recent searches</div>155 <div id="recent-chips" class="chips">156 <div class="chip">157 <div class="clock">158 <svg viewBox="0 0 24 24">159 <path d="M12 2a10 10 0 1 0 0.001 20A10 10 0 0 0 12 2zm1 5h-2v6l5 3 1-1.7-4-2.3V7z"/>160 </svg>161 </div>162 <div>polo cars under 3 lakhs</div>163 </div>164 <div class="chip">165 <div class="clock">166 <svg viewBox="0 0 24 24">167 <path d="M12 2a10 10 0 1 0 0.001 20A10 10 0 0 0 12 2zm1 5h-2v6l5 3 1-1.7-4-2.3V7z"/>168 </svg>169 </div>170 <div>bmw</div>171 </div>172 <div class="chip">173 <div class="clock">174 <svg viewBox="0 0 24 24">175 <path d="M12 2a10 10 0 1 0 0.001 20A10 10 0 0 0 12 2zm1 5h-2v6l5 3 1-1.7-4-2.3V7z"/>176 </svg>177 </div>178 <div>bmw s</div>179 </div>180 </div>181 182 <!-- Trending Searches -->183 <div id="trending-title" class="section-title">Trending searches</div>184 <div id="trending-chips" class="chips">185 <div class="chip">186 <div class="trend">187 <svg viewBox="0 0 24 24">188 <path d="M3 17l7-7 4 4 7-8v5h-2V6l-5 6-4-4-6 6z"/>189 </svg>190 </div>191 <div>Maruti Baleno</div>192 </div>193 <div class="chip">194 <div class="trend">195 <svg viewBox="0 0 24 24">196 <path d="M3 17l7-7 4 4 7-8v5h-2V6l-5 6-4-4-6 6z"/>197 </svg>198 </div>199 <div>Hyundai i10</div>200 </div>201 202 <div class="chip">203 <div class="trend">204 <svg viewBox="0 0 24 24">205 <path d="M3 17l7-7 4 4 7-8v5h-2V6l-5 6-4-4-6 6z"/>206 </svg>207 </div>208 <div>Honda City</div>209 </div>210 <div class="chip">211 <div class="trend">212 <svg viewBox="0 0 24 24">213 <path d="M3 17l7-7 4 4 7-8v5h-2V6l-5 6-4-4-6 6z"/>214 </svg>215 </div>216 <div>Maruti Swift</div>217 </div>218 219 <div class="chip">220 <div class="trend">221 <svg viewBox="0 0 24 24">222 <path d="M3 17l7-7 4 4 7-8v5h-2V6l-5 6-4-4-6 6z"/>223 </svg>224 </div>225 <div>Maruti Alto</div>226 </div>227 <div class="chip">228 <div class="trend">229 <svg viewBox="0 0 24 24">230 <path d="M3 17l7-7 4 4 7-8v5h-2V6l-5 6-4-4-6 6z"/>231 </svg>232 </div>233 <div>Honda Amaze</div>234 </div>235 236 <div class="chip">237 <div class="trend">238 <svg viewBox="0 0 24 24">239 <path d="M3 17l7-7 4 4 7-8v5h-2V6l-5 6-4-4-6 6z"/>240 </svg>241 </div>242 <div>Maruti Wagon R</div>243 </div>244 <div class="chip">245 <div class="trend">246 <svg viewBox="0 0 24 24">247 <path d="M3 17l7-7 4 4 7-8v5h-2V6l-5 6-4-4-6 6z"/>248 </svg>249 </div>250 <div>Hyundai i20</div>251 </div>252 253 <div class="chip">254 <div class="trend">255 <svg viewBox="0 0 24 24">256 <path d="M3 17l7-7 4 4 7-8v5h-2V6l-5 6-4-4-6 6z"/>257 </svg>258 </div>259 <div>Maruti Celerio</div>260 </div>261 <div class="chip">262 <div class="trend">263 <svg viewBox="0 0 24 24">264 <path d="M3 17l7-7 4 4 7-8v5h-2V6l-5 6-4-4-6 6z"/>265 </svg>266 </div>267 <div>Hyundai Creta</div>268 </div>269 </div>270 271 <!-- Popular brands -->272 <div id="popular-title" class="section-title">Popular brands</div>273 274 <!-- Keyboard mock -->275 <div class="keyboard">276 <div class="kb-top-row">277 <div class="kb-action">⌂</div>278 <div class="kb-action">😀</div>279 <div class="kb-action">GIF</div>280 <div class="kb-action">G</div>281 <div class="kb-action">⚙️</div>282 <div class="kb-action">🎨</div>283 <div class="round-btn">🎤</div>284 </div>285 <div class="kb-rows">286 <div class="kb-row">287 <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>288 <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>289 </div>290 <div class="kb-row">291 <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>292 <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>293 </div>294 <div class="kb-row">295 <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>296 <div class="key">N</div><div class="key">M</div><div class="key-wide">⌫</div>297 </div>298 <div class="space-row">299 <div class="key-wide">?123</div>300 <div class="key-wide">,</div>301 <div class="space">Space</div>302 <div class="key-wide">.</div>303 <div class="round-btn">🔎</div>304 </div>305 </div>306 </div>307 308</div>309</body>310</html>