GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Car App UI</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 }14 .status-bar {15 height: 90px;16 padding: 0 32px;17 display: flex;18 align-items: center;19 justify-content: space-between;20 color: #222;21 font-weight: 600;22 font-size: 36px;23 }24 .status-icons { display: flex; align-items: center; gap: 24px; color: #555; }25 .section {26 padding: 0 32px;27 }28 .header-row {29 display: flex;30 align-items: center;31 justify-content: space-between;32 margin-top: 12px;33 }34 .location-block {35 display: flex;36 align-items: center;37 gap: 24px;38 }39 .loc-text { display: flex; flex-direction: column; }40 .loc-label { font-size: 28px; color: #6b6b6b; }41 .loc-city {42 font-size: 40px;43 font-weight: 700;44 color: #101010;45 display: flex;46 align-items: center;47 gap: 12px;48 }49 .toggle-group {50 display: flex;51 gap: 18px;52 }53 .pill {54 height: 90px;55 padding: 0 44px;56 border-radius: 48px;57 font-size: 34px;58 font-weight: 800;59 display: inline-flex;60 align-items: center;61 justify-content: center;62 border: 2px solid #1E5FD6;63 }64 .pill.buy { background: #ffffff; color: #1E5FD6; }65 .pill.sell { background: #1E5FD6; color: #ffffff; }66 .search-bar {67 margin: 28px 32px 0 32px;68 height: 110px;69 border-radius: 24px;70 border: 1px solid #d8d8d8;71 background: #f5f6f7;72 display: flex;73 align-items: center;74 padding: 0 28px;75 justify-content: space-between;76 }77 .search-left {78 display: flex;79 align-items: center;80 gap: 24px;81 color: #838383;82 font-size: 36px;83 }84 .img-card {85 margin: 28px 32px 0 32px;86 height: 620px;87 border-radius: 36px;88 border: 1px solid #BDBDBD;89 background: #E0E0E0;90 display: flex;91 align-items: center;92 justify-content: center;93 color: #555;94 font-size: 40px;95 text-align: center;96 padding: 20px;97 }98 .cta-wide {99 margin: 32px 32px 0 32px;100 height: 120px;101 border-radius: 28px;102 background: #DF7A2F;103 color: #ffffff;104 font-size: 44px;105 font-weight: 800;106 display: flex;107 align-items: center;108 justify-content: center;109 }110 .loan-card {111 margin: 32px 32px 0 32px;112 border-radius: 36px;113 overflow: hidden;114 border: 1px solid #BDBDBD;115 background: linear-gradient(180deg, #245fb4 0%, #1b4f9b 100%);116 color: #ffffff;117 }118 .loan-inner { padding: 36px; }119 .loan-title {120 font-size: 64px;121 font-weight: 800;122 margin-bottom: 14px;123 }124 .loan-sub {125 font-size: 36px;126 color: #e6eefc;127 margin-bottom: 20px;128 }129 .loan-terms {130 display: flex;131 gap: 80px;132 margin-top: 30px;133 margin-bottom: 36px;134 }135 .term {136 display: flex; flex-direction: column; gap: 6px;137 }138 .term .value { font-size: 72px; font-weight: 800; }139 .term .label { font-size: 36px; color: #d6e3ff; }140 .loan-cta {141 margin: 18px 0 32px 0;142 height: 118px;143 border-radius: 26px;144 background: #ffffff;145 color: #153f7e;146 font-size: 44px;147 font-weight: 800;148 display: flex;149 align-items: center;150 justify-content: center;151 }152 .bottom-nav {153 position: absolute;154 left: 0;155 bottom: 70px;156 width: 100%;157 height: 180px;158 border-top: 1px solid #e1e1e1;159 background: #ffffff;160 display: flex;161 justify-content: space-around;162 align-items: center;163 }164 .nav-item {165 display: flex;166 flex-direction: column;167 align-items: center;168 gap: 12px;169 color: #6b6b6b;170 font-size: 28px;171 font-weight: 700;172 }173 .nav-item.active {174 color: #1E5FD6;175 }176 .nav-badge {177 width: 64px; height: 44px; border-radius: 14px; background: #eaf1ff; display: flex; align-items: center; justify-content: center;178 }179 .gesture-bar {180 position: absolute;181 bottom: 16px;182 left: 50%;183 transform: translateX(-50%);184 width: 360px;185 height: 12px;186 border-radius: 8px;187 background: #000000;188 opacity: 0.15;189 }190 /* Helper icon styles */191 svg { display: block; }192</style>193</head>194<body>195<div id="render-target">196 197 <!-- Status Bar -->198 <div class="status-bar">199 <div>11:08</div>200 <div class="status-icons">201 <!-- Do Not Disturb icon -->202 <svg width="36" height="36" viewBox="0 0 24 24">203 <circle cx="12" cy="12" r="10" fill="none" stroke="#666" stroke-width="2"></circle>204 <line x1="6" y1="12" x2="18" y2="12" stroke="#666" stroke-width="2"></line>205 </svg>206 <!-- Wifi icon -->207 <svg width="40" height="36" viewBox="0 0 24 24">208 <path d="M2 8c5.5-4.5 14.5-4.5 20 0" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round"></path>209 <path d="M5 11c4-3 10-3 14 0" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round"></path>210 <path d="M8 14c2.5-2 5.5-2 8 0" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round"></path>211 <circle cx="12" cy="18" r="1.8" fill="#666"></circle>212 </svg>213 <!-- Battery icon with 86% -->214 <div style="display:flex; align-items:center; gap:8px;">215 <svg width="52" height="28" viewBox="0 0 52 28">216 <rect x="2" y="4" width="42" height="20" rx="4" fill="none" stroke="#666" stroke-width="2"></rect>217 <rect x="4" y="6" width="36" height="16" rx="2" fill="#66bb6a"></rect>218 <rect x="46" y="9" width="6" height="10" rx="2" fill="#666"></rect>219 </svg>220 <span style="font-size:32px; color:#333;">86%</span>221 </div>222 </div>223 </div>224 225 <!-- Header with location and buy/sell -->226 <div class="section">227 <div class="header-row">228 <div class="location-block">229 <!-- Pin icon -->230 <svg width="46" height="46" viewBox="0 0 24 24">231 <path d="M12 2c-3.5 0-6 2.7-6 6.2 0 4.8 6 13.8 6 13.8s6-9 6-13.8C18 4.7 15.5 2 12 2z" fill="none" stroke="#1E5FD6" stroke-width="2"></path>232 <circle cx="12" cy="8.5" r="2.5" fill="#1E5FD6"></circle>233 </svg>234 <div class="loc-text">235 <div class="loc-label">Your City</div>236 <div class="loc-city">New Delhi237 <!-- Chevron down -->238 <svg width="30" height="30" viewBox="0 0 24 24">239 <path d="M6 9l6 6 6-6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>240 </svg>241 </div>242 </div>243 </div>244 245 <div class="toggle-group">246 <div class="pill buy">BUY</div>247 <div class="pill sell">SELL</div>248 </div>249 </div>250 </div>251 252 <!-- Search Bar -->253 <div class="search-bar">254 <div class="search-left">255 <!-- Search icon -->256 <svg width="42" height="42" viewBox="0 0 24 24">257 <circle cx="11" cy="11" r="7" fill="none" stroke="#888" stroke-width="2"></circle>258 <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#888" stroke-width="2" stroke-linecap="round"></line>259 </svg>260 <div>Search cars by m</div>261 </div>262 <!-- Filter icon -->263 <svg width="56" height="56" viewBox="0 0 24 24">264 <path d="M4 6h16M4 12h10M4 18h6" stroke="#1E5FD6" stroke-width="2" stroke-linecap="round"></path>265 <circle cx="14" cy="12" r="2" fill="#1E5FD6"></circle>266 <circle cx="10" cy="18" r="2" fill="#1E5FD6"></circle>267 <circle cx="8" cy="6" r="2" fill="#1E5FD6"></circle>268 </svg>269 </div>270 271 <!-- Promo Banner -->272 <div class="img-card">273 [IMG: Festive car offer banner with ICICI Bank and two cars]274 </div>275 276 <!-- View All Cars CTA -->277 <div class="cta-wide">VIEW ALL CARS</div>278 279 <!-- Loan Banner -->280 <div class="loan-card">281 <div class="loan-inner">282 <div class="loan-title">Need a car loan?</div>283 <div class="loan-sub">Answer a few questions to check EMI offers</div>284 <div style="font-size:28px; color:#b9ccf8; margin-bottom:10px;">*T&C applied</div>285 286 <div class="loan-terms">287 <div class="term">288 <div class="value">₹0</div>289 <div class="label">Down payment</div>290 </div>291 <div class="term">292 <div class="value">12%</div>293 <div class="label">Interest rate</div>294 </div>295 <div class="term">296 <div class="value">72</div>297 <div class="label">Months EMI</div>298 </div>299 </div>300 301 <div class="loan-cta">CHECK EMI OFFERS</div>302 </div>303 </div>304 305 <!-- Bottom Navigation -->306 <div class="bottom-nav">307 <div class="nav-item active">308 <div class="nav-badge">309 <!-- Home icon -->310 <svg width="40" height="40" viewBox="0 0 24 24">311 <path d="M3 11l9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9z" fill="none" stroke="#1E5FD6" stroke-width="2"></path>312 <path d="M9 21v-6h6v6" stroke="#1E5FD6" stroke-width="2"></path>313 </svg>314 </div>315 <div>HOME</div>316 </div>317 318 <div class="nav-item">319 <!-- Loan icon -->320 <svg width="44" height="44" viewBox="0 0 24 24">321 <circle cx="12" cy="12" r="9" fill="none" stroke="#777" stroke-width="2"></circle>322 <text x="12" y="16" text-anchor="middle" font-size="12" fill="#777">₹</text>323 </svg>324 <div>LOAN</div>325 </div>326 327 <div class="nav-item">328 <!-- Car icon -->329 <svg width="48" height="44" viewBox="0 0 24 24">330 <path d="M3 13l2-5h14l2 5v5a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2H9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5z" fill="none" stroke="#777" stroke-width="2"></path>331 <circle cx="7" cy="18" r="2" fill="#777"></circle>332 <circle cx="17" cy="18" r="2" fill="#777"></circle>333 </svg>334 <div>MY CARS</div>335 </div>336 337 <div class="nav-item">338 <!-- Menu icon -->339 <svg width="44" height="44" viewBox="0 0 24 24">340 <path d="M4 7h16M4 12h16M4 17h16" stroke="#777" stroke-width="2" stroke-linecap="round"></path>341 </svg>342 <div>MENU</div>343 </div>344 </div>345 346 <!-- Gesture bar -->347 <div class="gesture-bar"></div>348 349</div>350</body>351</html>