GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Car Search UI</title>5<style>6  body { margin:0; padding:0; background:transparent; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#ffffff;11    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;12    color:#0a223d;13  }14 15  .status-bar {16    height:110px;17    padding:24px 32px;18    display:flex; align-items:center; justify-content:space-between;19    font-weight:700; font-size:42px; color:#172a3a;20  }21  .status-icons { display:flex; align-items:center; gap:26px; }22  .status-icons .circle {23    width:38px; height:38px; border-radius:50%;24    border:3px solid #596b7a; opacity:0.6;25  }26  .status-icons .wifi {27    width:42px; height:42px;28    opacity:0.8;29  }30  .status-icons .battery { font-size:38px; color:#1f2f40; }31 32  .search-wrapper { padding:0 32px; }33  .search-box {34    display:flex; align-items:center;35    height:120px; border:2px solid #e5ecf4;36    border-radius:26px; background:#f8fbff;37    padding:0 26px; gap:22px;38  }39  .search-box .placeholder {40    font-size:40px; color:#97a6b8; font-weight:500;41  }42  .search-box svg { width:54px; height:54px; }43 44  .title { font-size:48px; font-weight:800; margin:34px 32px 18px; }45 46  .chip-row, .grid { display:flex; flex-wrap:wrap; gap:24px; padding:8px 32px 24px; }47  .chip {48    background:#f2f6ff; box-shadow:0 0 0 1px #e5ecf4 inset;49    color:#1c3144; padding:22px 28px; border-radius:22px;50    display:flex; align-items:center; gap:18px; font-size:40px;51  }52  .chip svg { width:40px; height:40px; }53 54  .section-title { font-size:48px; font-weight:800; margin:32px 32px; }55 56  .brands { display:flex; gap:34px; padding:0 32px 24px; }57  .brand {58    width:216px; height:216px; border-radius:108px;59    background:#ffffff; border:1px solid #e6eef6;60    box-shadow:0 16px 34px rgba(20,40,80,0.08);61    display:flex; justify-content:center; align-items:center;62  }63  .brand .img {64    width:88%; height:88%;65    background:#E0E0E0; border:1px solid #BDBDBD;66    border-radius:50%;67    display:flex; justify-content:center; align-items:center;68    color:#757575; font-size:34px; text-align:center; padding:10px;69  }70 71  .cards { display:flex; gap:32px; padding:0 32px; flex-wrap:wrap; }72  .card {73    width:492px; height:420px; border-radius:36px;74    position:relative; overflow:hidden; background:#e9eef6;75  }76  .card .img {77    position:absolute; inset:0;78    background:#E0E0E0; border:1px solid #BDBDBD;79    display:flex; justify-content:center; align-items:center;80    color:#757575; font-size:34px;81  }82  .card .overlay { position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.65)); }83  .card .label {84    position:absolute; left:28px; bottom:118px;85    color:#ffffff; font-size:52px; font-weight:900;86  }87  .card .sub {88    position:absolute; left:28px; bottom:62px;89    color:#d5e3ff; font-size:36px; font-weight:600;90  }91  .card .badge {92    position:absolute; left:26px; top:26px;93    width:74px; height:74px; border-radius:22px;94    background:#ffffff22; display:flex; align-items:center; justify-content:center;95  }96  .card .badge svg { width:44px; height:44px; fill:#ffffff; opacity:0.9; }97 98  /* Small spacer at the end to simulate scroll area */99  .foot-space { height:220px; }100</style>101</head>102<body>103<div id="render-target">104 105  <!-- Status bar -->106  <div class="status-bar">107    <div>11:09</div>108    <div class="status-icons">109      <div class="circle"></div>110      <!-- Simple wifi icon -->111      <svg class="wifi" viewBox="0 0 24 24">112        <path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M9 16c2-2 4-2 6 0" stroke="#3b4a59" stroke-width="2" fill="none" stroke-linecap="round"/>113        <circle cx="12" cy="19" r="1.6" fill="#3b4a59"/>114      </svg>115      <div class="battery">87%</div>116    </div>117  </div>118 119  <!-- Search box -->120  <div class="search-wrapper">121    <div class="search-box">122      <svg viewBox="0 0 24 24">123        <path d="M15 18l-6-6 6-6" stroke="#2a3a4a" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>124      </svg>125      <div class="placeholder">Search for your favourite cars</div>126    </div>127  </div>128 129  <!-- Recent searches -->130  <div class="title">Recent searches</div>131  <div class="chip-row">132    <div class="chip">133      <svg viewBox="0 0 24 24">134        <circle cx="12" cy="12" r="9" stroke="#31577b" stroke-width="2" fill="none"/>135        <path d="M12 7v5l3 2" stroke="#31577b" stroke-width="2" fill="none" stroke-linecap="round"/>136      </svg>137      <span>polo cars under 3 lakhs</span>138    </div>139    <div class="chip">140      <svg viewBox="0 0 24 24">141        <circle cx="12" cy="12" r="9" stroke="#31577b" stroke-width="2" fill="none"/>142        <path d="M12 7v5l3 2" stroke="#31577b" stroke-width="2" fill="none" stroke-linecap="round"/>143      </svg>144      <span>bmw</span>145    </div>146    <div class="chip">147      <svg viewBox="0 0 24 24">148        <circle cx="12" cy="12" r="9" stroke="#31577b" stroke-width="2" fill="none"/>149        <path d="M12 7v5l3 2" stroke="#31577b" stroke-width="2" fill="none" stroke-linecap="round"/>150      </svg>151      <span>bmw sedan</span>152    </div>153  </div>154 155  <!-- Trending searches -->156  <div class="title">Trending searches</div>157  <div class="grid">158    <div class="chip">159      <svg viewBox="0 0 24 24">160        <path d="M3 15l6-6 4 4 8-8" stroke="#2f5f9b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>161      </svg>162      <span>Maruti Baleno</span>163    </div>164    <div class="chip">165      <svg viewBox="0 0 24 24">166        <path d="M3 15l6-6 4 4 8-8" stroke="#2f5f9b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>167      </svg>168      <span>Hyundai i10</span>169    </div>170    <div class="chip">171      <svg viewBox="0 0 24 24">172        <path d="M3 15l6-6 4 4 8-8" stroke="#2f5f9b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>173      </svg>174      <span>Honda City</span>175    </div>176    <div class="chip">177      <svg viewBox="0 0 24 24">178        <path d="M3 15l6-6 4 4 8-8" stroke="#2f5f9b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>179      </svg>180      <span>Maruti Swift</span>181    </div>182    <div class="chip">183      <svg viewBox="0 0 24 24">184        <path d="M3 15l6-6 4 4 8-8" stroke="#2f5f9b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>185      </svg>186      <span>Maruti Alto</span>187    </div>188    <div class="chip">189      <svg viewBox="0 0 24 24">190        <path d="M3 15l6-6 4 4 8-8" stroke="#2f5f9b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>191      </svg>192      <span>Honda Amaze</span>193    </div>194    <div class="chip">195      <svg viewBox="0 0 24 24">196        <path d="M3 15l6-6 4 4 8-8" stroke="#2f5f9b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>197      </svg>198      <span>Maruti Wagon R</span>199    </div>200    <div class="chip">201      <svg viewBox="0 0 24 24">202        <path d="M3 15l6-6 4 4 8-8" stroke="#2f5f9b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>203      </svg>204      <span>Hyundai i20</span>205    </div>206    <div class="chip">207      <svg viewBox="0 0 24 24">208        <path d="M3 15l6-6 4 4 8-8" stroke="#2f5f9b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>209      </svg>210      <span>Maruti Celerio</span>211    </div>212    <div class="chip">213      <svg viewBox="0 0 24 24">214        <path d="M3 15l6-6 4 4 8-8" stroke="#2f5f9b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>215      </svg>216      <span>Hyundai Creta</span>217    </div>218  </div>219 220  <!-- Popular brands -->221  <div class="section-title">Popular brands</div>222  <div class="brands">223    <div class="brand">224      <div class="img">[IMG: Maruti Suzuki Logo]</div>225    </div>226    <div class="brand">227      <div class="img">[IMG: Hyundai Logo]</div>228    </div>229    <div class="brand">230      <div class="img">[IMG: Honda Logo]</div>231    </div>232    <div class="brand">233      <div class="img">[IMG: Renault Logo]</div>234    </div>235  </div>236 237  <!-- Curated picks -->238  <div class="section-title">Curated picks</div>239  <div class="cards">240    <div class="card">241      <div class="img">[IMG: Orange Compact SUV]</div>242      <div class="overlay"></div>243      <div class="badge">244        <!-- trophy icon -->245        <svg viewBox="0 0 24 24">246          <path d="M6 4h12v3c0 3-2 5-6 5s-6-2-6-5V4z" />247          <path d="M8 20h8M10 16h4" />248        </svg>249      </div>250      <div class="label">Good as new</div>251      <div class="sub">2019 and later</div>252    </div>253    <div class="card">254      <div class="img">[IMG: Budget Hatchback Car]</div>255      <div class="overlay"></div>256      <div class="badge">257        <!-- person icon -->258        <svg viewBox="0 0 24 24">259          <circle cx="12" cy="8" r="4"></circle>260          <path d="M4 20c1-4 6-6 8-6s7 2 8 6" />261        </svg>262      </div>263      <div class="label">₹3–₹5 lakh</div>264      <div class="sub">Budget Hatchbacks</div>265    </div>266  </div>267 268  <div class="foot-space"></div>269</div>270</body>271</html>