GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Audi A4 Details 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;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #111216;14 color: #EDEDED;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 100%;23 height: 110px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 padding: 0 40px;28 box-sizing: border-box;29 color: #CFCFCF;30 font-weight: 600;31 font-size: 40px;32 }33 .status-icons {34 display: flex;35 align-items: center;36 gap: 24px;37 }38 .icon-dot {39 width: 14px;40 height: 14px;41 background: #CFCFCF;42 border-radius: 50%;43 display: inline-block;44 }45 .icon-wifi, .icon-battery {46 width: 50px;47 height: 28px;48 }49 .icon-wifi path, .icon-battery path { fill: none; stroke: #CFCFCF; stroke-width: 4; }50 51 /* Header */52 .header {53 position: absolute;54 top: 110px;55 left: 0;56 right: 0;57 height: 120px;58 display: flex;59 align-items: center;60 padding: 0 36px;61 box-sizing: border-box;62 }63 .back-btn {64 width: 72px;65 height: 72px;66 display: flex;67 align-items: center;68 justify-content: center;69 margin-right: 18px;70 }71 .back-btn svg { width: 44px; height: 44px; }72 .title {73 font-size: 58px;74 font-weight: 700;75 flex: 1;76 }77 .variant {78 display: flex;79 align-items: center;80 gap: 14px;81 color: #7FA6FF;82 font-weight: 700;83 font-size: 44px;84 }85 .variant svg { width: 28px; height: 28px; fill: #7FA6FF; }86 87 /* Spec row */88 .specs {89 position: absolute;90 top: 250px;91 left: 0;92 width: 100%;93 padding: 0 32px;94 box-sizing: border-box;95 display: grid;96 grid-template-columns: repeat(4, 1fr);97 gap: 22px;98 }99 .spec {100 background: #181A20;101 border-radius: 18px;102 padding: 26px;103 box-sizing: border-box;104 text-align: center;105 border: 1px solid #22252D;106 }107 .spec svg { width: 70px; height: 70px; fill: none; stroke: #9BB4FF; stroke-width: 3.5; margin-bottom: 14px; }108 .spec .value { font-size: 42px; font-weight: 800; margin-bottom: 6px; }109 .spec .label { font-size: 32px; color: #B9BDC6; }110 111 /* Feature card */112 .card {113 position: absolute;114 left: 20px;115 right: 20px;116 top: 500px;117 background: #17181E;118 border: 1px solid #262932;119 border-radius: 18px;120 padding: 24px 20px;121 box-sizing: border-box;122 }123 .list-row {124 display: flex;125 justify-content: space-between;126 align-items: center;127 padding: 28px 16px;128 font-size: 40px;129 border-top: 1px solid #262932;130 }131 .list-row:first-of-type { border-top: none; }132 .label { color: #DADDE4; }133 .value { color: #DADDE4; font-weight: 700; }134 .section-title {135 color: #7FA6FF;136 font-weight: 800;137 font-size: 46px;138 padding: 30px 16px 16px;139 }140 141 /* Bottom gesture bar */142 .gesture-bar {143 position: absolute;144 bottom: 40px;145 left: 50%;146 transform: translateX(-50%);147 width: 360px;148 height: 14px;149 border-radius: 10px;150 background: #D9D9D9;151 opacity: 0.7;152 }153</style>154</head>155<body>156<div id="render-target">157 158 <!-- Status Bar -->159 <div class="status-bar">160 <div>8:07</div>161 <div class="status-icons">162 <span style="font-size:34px; color:#CFCFCF;">eBay</span>163 <span style="font-size:34px; color:#CFCFCF;">YouTube</span>164 <span class="icon-dot"></span>165 <svg class="icon-wifi" viewBox="0 0 24 24">166 <path d="M2 9c5-4 15-4 20 0M5 12c4-3 10-3 14 0M8 15c3-2 7-2 10 0M11 18c2-1 4-1 6 0M12 21l2-2" />167 </svg>168 <svg class="icon-battery" viewBox="0 0 26 14">169 <path d="M1 2h20v10H1zM23 4v6" />170 </svg>171 </div>172 </div>173 174 <!-- Header -->175 <div class="header">176 <div class="back-btn">177 <svg viewBox="0 0 24 24" stroke="#FFFFFF" fill="none" stroke-width="2.5">178 <path d="M15 5l-7 7 7 7"/>179 </svg>180 </div>181 <div class="title">Audi A4</div>182 <div class="variant">183 <div>40 TFSI Pr..</div>184 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>185 </div>186 </div>187 188 <!-- Specs Row -->189 <div class="specs">190 <div class="spec">191 <svg viewBox="0 0 24 24">192 <circle cx="12" cy="10" r="5"></circle>193 <path d="M4 20h16M6 20v-3m12 3v-3"></path>194 </svg>195 <div class="value">₹ 43.06 Lakhs</div>196 <div class="label">Price</div>197 </div>198 <div class="spec">199 <svg viewBox="0 0 24 24">200 <rect x="3" y="6" width="18" height="8" rx="2"></rect>201 <path d="M6 20h12M9 14v6M15 14v6"></path>202 </svg>203 <div class="value">1984 cc</div>204 <div class="label">Engine</div>205 </div>206 <div class="spec">207 <svg viewBox="0 0 24 24">208 <rect x="4" y="3" width="10" height="12" rx="2"></rect>209 <path d="M14 6h6l-2 3v7"></path>210 </svg>211 <div class="value">Petrol</div>212 <div class="label">Fuel Type</div>213 </div>214 <div class="spec">215 <svg viewBox="0 0 24 24">216 <path d="M12 2c0 4-5 7-5 11a5 5 0 0010 0c0-4-5-7-5-11z"></path>217 </svg>218 <div class="value">17.4 kmpl</div>219 <div class="label">Mileage</div>220 </div>221 </div>222 223 <!-- Feature Card -->224 <div class="card">225 <div class="list-row">226 <div class="label">Cooled Glove Box</div>227 <div class="value">Yes</div>228 </div>229 <div class="list-row">230 <div class="label">Cup Holders</div>231 <div class="value">Front & Rear</div>232 </div>233 <div class="list-row">234 <div class="label">Seat Back Pockets</div>235 <div class="value">Yes</div>236 </div>237 <div class="list-row">238 <div class="label">Door Pockets</div>239 <div class="value">Front & Rear</div>240 </div>241 242 <div class="section-title">Infotainment</div>243 244 <div class="list-row">245 <div class="label">Music System</div>246 <div class="value">Yes</div>247 </div>248 <div class="list-row">249 <div class="label">FM Radio</div>250 <div class="value">Yes</div>251 </div>252 <div class="list-row">253 <div class="label">Navigation System</div>254 <div class="value">Yes</div>255 </div>256 <div class="list-row">257 <div class="label">Apple CarPlay</div>258 <div class="value">Yes</div>259 </div>260 <div class="list-row">261 <div class="label">Android Auto</div>262 <div class="value">Yes</div>263 </div>264 <div class="list-row">265 <div class="label">USB Compatibility</div>266 <div class="value">Yes</div>267 </div>268 <div class="list-row">269 <div class="label">Aux-in Compatibility</div>270 <div class="value">Yes</div>271 </div>272 <div class="list-row">273 <div class="label">Bluetooth</div>274 <div class="value">Phone & Audio Streaming</div>275 </div>276 <div class="list-row">277 <div class="label">Infotainment Screen</div>278 <div class="value">LCD Display</div>279 </div>280 <div class="list-row">281 <div class="label">Speakers</div>282 <div class="value">6+</div>283 </div>284 285 <div class="section-title">Warranty</div>286 287 <div class="list-row">288 <div class="label">Basic Warranty</div>289 <div class="value">2 Years Unlimited Km</div>290 </div>291 </div>292 293 <!-- Bottom gesture bar -->294 <div class="gesture-bar"></div>295</div>296</body>297</html>