GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Vehicle Overview UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 font-family: Arial, Helvetica, sans-serif;15 color: #5f6368;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 140px;25 background: #eeeeee;26 opacity: 0.9;27 }28 .status-content {29 position: absolute;30 top: 32px;31 left: 40px;32 right: 40px;33 height: 76px;34 display: flex;35 align-items: center;36 justify-content: space-between;37 color: #9e9e9e;38 font-weight: 600;39 font-size: 38px;40 }41 .status-icons { display: flex; gap: 28px; align-items: center; }42 .status-dot {43 width: 18px; height: 18px; background:#bdbdbd; border-radius:50%;44 }45 .status-shape {46 width: 34px; height: 22px; border: 3px solid #bdbdbd; border-radius:4px;47 }48 49 /* Header bar */50 .header {51 position: absolute;52 top: 140px;53 left: 0;54 width: 1080px;55 height: 150px;56 background: #f2f2f2;57 border-bottom: 1px solid #e5e5e5;58 display: flex;59 align-items: center;60 padding: 0 40px;61 box-sizing: border-box;62 }63 .back-btn {64 width: 64px; height: 64px; margin-right: 24px;65 }66 .header-title {67 font-size: 54px;68 color: #4a4a4a;69 font-weight: 700;70 }71 72 /* Content */73 .content {74 position: absolute;75 top: 290px;76 left: 40px;77 right: 40px;78 bottom: 280px;79 overflow: hidden;80 }81 .section-title.main {82 font-size: 60px;83 font-weight: 800;84 color: #404040;85 margin: 28px 0 20px 0;86 }87 .section-title {88 font-size: 48px;89 font-weight: 700;90 color: #404040;91 margin: 40px 0 10px 0;92 }93 .bullets { margin: 0; padding: 0; list-style: none; }94 .bullets li {95 font-size: 38px;96 line-height: 64px;97 color: #6a6a6a;98 }99 .bullets li::before {100 content: "• ";101 color: #6a6a6a;102 }103 104 .divider {105 height: 2px;106 background: #eeeeee;107 margin: 36px 0 6px;108 }109 110 /* List rows */111 .list {112 margin-top: 18px;113 border-top: 1px solid #e9e9e9;114 }115 .row {116 display: flex;117 align-items: center;118 justify-content: space-between;119 height: 165px;120 border-bottom: 1px solid #e9e9e9;121 padding: 0 12px 0 0;122 }123 .row .text {124 padding-left: 0;125 }126 .row-title {127 font-size: 44px;128 color: #4a4a4a;129 font-weight: 600;130 }131 .row-sub {132 font-size: 34px;133 color: #8c8c8c;134 margin-top: 8px;135 }136 .right-info {137 display: flex;138 align-items: center;139 gap: 18px;140 color: #7a7a7a;141 font-size: 38px;142 margin-right: 24px;143 }144 .chevron {145 width: 48px; height: 48px;146 }147 148 /* Stars */149 .stars {150 display: flex; align-items: center; gap: 8px;151 }152 .star { width: 42px; height: 42px; }153 .star-outline path { fill: none; stroke: #7ac043; stroke-width: 2.5; }154 155 /* Bottom nav */156 .bottom-nav {157 position: absolute;158 left: 0;159 bottom: 60px;160 width: 1080px;161 height: 210px;162 background: #f6f6f6;163 border-top: 1px solid #e1e1e1;164 display: flex;165 justify-content: space-around;166 align-items: center;167 }168 .nav-item {169 display: flex;170 flex-direction: column;171 align-items: center;172 gap: 16px;173 color: #8f8f8f;174 font-size: 34px;175 }176 .nav-item svg { width: 64px; height: 64px; }177 .nav-item.active { color: #1976d2; }178 .nav-item.active svg path, .nav-item.active svg circle { fill: #1976d2; stroke: #1976d2; }179 180 /* Gesture bar */181 .gesture {182 position: absolute;183 bottom: 16px;184 left: 50%;185 transform: translateX(-50%);186 width: 380px;187 height: 16px;188 background: #d9d9d9;189 border-radius: 10px;190 }191</style>192</head>193<body>194<div id="render-target">195 196 <!-- Status bar -->197 <div class="status-bar"></div>198 <div class="status-content">199 <div>12:26</div>200 <div class="status-icons">201 <div class="status-dot"></div>202 <div class="status-dot"></div>203 <div class="status-dot"></div>204 <div class="status-dot"></div>205 <div class="status-shape"></div>206 </div>207 </div>208 209 <!-- Header -->210 <div class="header">211 <svg class="back-btn" viewBox="0 0 24 24">212 <path d="M15 6 L9 12 L15 18" stroke="#616161" stroke-width="3.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>213 </svg>214 <div class="header-title">Vehicle Overview</div>215 </div>216 217 <!-- Content -->218 <div class="content">219 <div class="section-title main">What's new for 2022</div>220 <ul class="bullets">221 <li>Kicks off the third-generation A3</li>222 <li>Efficient mild hybrid powertrain</li>223 <li>Updated in-car tech and driver aids</li>224 <li>All-new interior and exterior design</li>225 </ul>226 227 <div class="section-title">Pros</div>228 <ul class="bullets">229 <li>Peppy yet efficient engine and sporty handling</li>230 <li>Excellent in-car tech and audio system</li>231 <li>Comfortable seats with refined ride comfort</li>232 <li>Loads of standard and available features</li>233 </ul>234 235 <div class="section-title">Cons</div>236 <ul class="bullets">237 <li>Limited rear passenger space</li>238 <li>Trunk smaller than the competition</li>239 </ul>240 241 <div class="divider"></div>242 243 <div class="list">244 245 <!-- Row: Edmunds Review -->246 <div class="row">247 <div class="text">248 <div class="row-title">Edmunds Review</div>249 <div class="row-sub">for 2022 Audi A3</div>250 </div>251 <div class="right-info">252 <div>8.2/10</div>253 <svg class="chevron" viewBox="0 0 24 24">254 <path d="M9 6 L15 12 L9 18" stroke="#9e9e9e" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>255 </svg>256 </div>257 </div>258 259 <!-- Row: Consumer Reviews -->260 <div class="row">261 <div class="text">262 <div class="row-title">Consumer Reviews</div>263 <div class="row-sub">9 reviews</div>264 </div>265 <div class="right-info">266 <div class="stars">267 <svg class="star" viewBox="0 0 24 24">268 <path d="M12 2 L15 9 L22 9.5 L17 14 L18.5 21 L12 17.5 L5.5 21 L7 14 L2 9.5 L9 9 Z" fill="#7ac043"/>269 </svg>270 <svg class="star" viewBox="0 0 24 24">271 <path d="M12 2 L15 9 L22 9.5 L17 14 L18.5 21 L12 17.5 L5.5 21 L7 14 L2 9.5 L9 9 Z" fill="#7ac043"/>272 </svg>273 <svg class="star" viewBox="0 0 24 24">274 <path d="M12 2 L15 9 L22 9.5 L17 14 L18.5 21 L12 17.5 L5.5 21 L7 14 L2 9.5 L9 9 Z" fill="#7ac043"/>275 </svg>276 <svg class="star" viewBox="0 0 24 24">277 <path d="M12 2 L15 9 L22 9.5 L17 14 L18.5 21 L12 17.5 L5.5 21 L7 14 L2 9.5 L9 9 Z" fill="#7ac043"/>278 </svg>279 <svg class="star star-outline" viewBox="0 0 24 24">280 <path d="M12 2 L15 9 L22 9.5 L17 14 L18.5 21 L12 17.5 L5.5 21 L7 14 L2 9.5 L9 9 Z"/>281 </svg>282 </div>283 <div>3.6</div>284 <svg class="chevron" viewBox="0 0 24 24">285 <path d="M9 6 L15 12 L9 18" stroke="#9e9e9e" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>286 </svg>287 </div>288 </div>289 290 <!-- Row: Features & Specs -->291 <div class="row">292 <div class="text">293 <div class="row-title">Features & Specs</div>294 </div>295 <div class="right-info">296 <svg class="chevron" viewBox="0 0 24 24">297 <path d="M9 6 L15 12 L9 18" stroke="#9e9e9e" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>298 </svg>299 </div>300 </div>301 302 <!-- Row: Price & Appraise -->303 <div class="row">304 <div class="text">305 <div class="row-title">Price & Appraise</div>306 </div>307 <div class="right-info">308 <svg class="chevron" viewBox="0 0 24 24">309 <path d="M9 6 L15 12 L9 18" stroke="#9e9e9e" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>310 </svg>311 </div>312 </div>313 314 <!-- Row: Can It Fit -->315 <div class="row">316 <div class="text">317 <div class="row-title">Can It Fit</div>318 </div>319 <div class="right-info">320 <svg class="chevron" viewBox="0 0 24 24">321 <path d="M9 6 L15 12 L9 18" stroke="#9e9e9e" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>322 </svg>323 </div>324 </div>325 326 </div>327 </div>328 329 <!-- Bottom navigation -->330 <div class="bottom-nav">331 <div class="nav-item">332 <svg viewBox="0 0 24 24">333 <path d="M3 12 L5 9 L12 4 L19 9 L21 12 V20 H3 Z" fill="#9e9e9e"/>334 <rect x="8" y="14" width="8" height="6" fill="#9e9e9e"/>335 </svg>336 <div>Buy a Car</div>337 </div>338 <div class="nav-item active">339 <svg viewBox="0 0 24 24">340 <circle cx="11" cy="11" r="7" fill="#1976d2"/>341 <path d="M16.5 16.5 L22 22" stroke="#1976d2" stroke-width="3" stroke-linecap="round"/>342 </svg>343 <div>Research</div>344 </div>345 <div class="nav-item">346 <svg viewBox="0 0 24 24">347 <path d="M12 21 C8 18 5 15.5 5 12 A5 5 0 0 1 12 9 A5 5 0 0 1 19 12 C19 15.5 16 18 12 21 Z" fill="#9e9e9e"/>348 </svg>349 <div>Dashboard</div>350 </div>351 <div class="nav-item">352 <svg viewBox="0 0 24 24">353 <circle cx="4" cy="12" r="2.4" fill="#9e9e9e"/>354 <circle cx="12" cy="12" r="2.4" fill="#9e9e9e"/>355 <circle cx="20" cy="12" r="2.4" fill="#9e9e9e"/>356 </svg>357 <div>More</div>358 </div>359 </div>360 361 <!-- Gesture bar -->362 <div class="gesture"></div>363 364</div>365</body>366</html>