GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Vehicle Overview Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #333; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Status bar */18 .status-bar {19 height: 120px;20 background: #EFEFEF;21 color: #9E9E9E;22 font-size: 40px;23 display: flex;24 align-items: center;25 padding: 0 36px;26 box-sizing: border-box;27 }28 .status-icons {29 margin-left: auto;30 display: flex;31 align-items: center;32 gap: 28px;33 }34 .status-icon { width: 40px; height: 40px; }35 36 /* App header */37 .app-header {38 height: 140px;39 background: #ffffff;40 display: flex;41 align-items: center;42 padding: 0 36px;43 box-sizing: border-box;44 border-bottom: 1px solid #E0E0E0;45 }46 .back-btn {47 width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; margin-right: 24px;48 }49 .header-title {50 font-size: 56px;51 font-weight: 600;52 color: #4A4A4A;53 }54 55 /* Hero image */56 .hero {57 position: relative;58 width: 100%;59 height: 620px;60 overflow: hidden;61 background: #DDD;62 border-bottom: 1px solid #E0E0E0;63 }64 .hero .img {65 position: absolute;66 left: 36px;67 right: 36px;68 top: 0;69 bottom: 0;70 margin: auto;71 height: 620px;72 background: #E0E0E0;73 border: 1px solid #BDBDBD;74 display: flex;75 align-items: center;76 justify-content: center;77 color: #757575;78 font-size: 36px;79 }80 .heart {81 position: absolute;82 right: 40px;83 top: 32px;84 width: 72px; height: 72px;85 display: flex; align-items: center; justify-content: center;86 background: rgba(255,255,255,0.0);87 }88 .gallery-pill {89 position: absolute;90 right: 40px;91 bottom: 26px;92 background: rgba(0,0,0,0.45);93 color: #fff;94 padding: 18px 28px;95 border-radius: 18px;96 display: inline-flex;97 align-items: center;98 gap: 16px;99 font-size: 36px;100 }101 .grid-icon { width: 42px; height: 42px; }102 103 /* Content */104 .content {105 padding: 28px 36px 0 36px;106 box-sizing: border-box;107 }108 .title {109 font-size: 64px;110 font-weight: 700;111 margin: 28px 0 20px 0;112 color: #4A4A4A;113 }114 .label {115 font-size: 36px;116 color: #9E9E9E;117 margin-top: 12px;118 }119 .style-main {120 font-size: 42px;121 color: #606060;122 margin-top: 12px;123 font-weight: 600;124 }125 .style-sub {126 font-size: 32px;127 color: #777;128 margin-top: 8px;129 display: flex;130 align-items: center;131 justify-content: space-between;132 }133 .divider {134 height: 1px; background: #E0E0E0; margin: 28px 0;135 }136 137 /* Pricing grid */138 .price-row {139 display: flex;140 align-items: flex-start;141 justify-content: space-between;142 gap: 24px;143 padding-right: 20px;144 }145 .price-card {146 flex: 1;147 }148 .price-card .sub {149 font-size: 32px; color: #9E9E9E;150 }151 .price-card .val {152 font-size: 52px; font-weight: 700; margin-top: 10px; color: #3A3A3A;153 }154 155 .cta {156 margin: 32px 0;157 width: calc(100% - 72px);158 height: 110px;159 background: #8BC34A;160 color: white;161 border-radius: 16px;162 display: flex; align-items: center; justify-content: center;163 font-size: 36px; font-weight: 700;164 box-shadow: 0 6px 0 rgba(0,0,0,0.06);165 }166 167 .section-title {168 font-size: 48px;169 font-weight: 700;170 color: #4A4A4A;171 margin: 36px 0 16px 0;172 }173 .bullets {174 margin: 0;175 padding-left: 36px;176 color: #555;177 font-size: 34px;178 line-height: 1.6;179 }180 181 /* Bottom nav */182 .bottom-nav {183 position: absolute;184 left: 0; right: 0; bottom: 78px;185 height: 200px;186 background: #fff;187 border-top: 1px solid #E0E0E0;188 display: flex;189 align-items: center;190 justify-content: space-around;191 }192 .nav-item {193 width: 240px;194 display: flex;195 flex-direction: column;196 align-items: center;197 color: #8A8A8A;198 gap: 16px;199 font-size: 32px;200 }201 .nav-item svg { width: 72px; height: 72px; }202 .nav-item.active { color: #1976D2; }203 .gesture-bar {204 position: absolute;205 bottom: 20px;206 left: 50%;207 transform: translateX(-50%);208 width: 220px;209 height: 16px;210 background: #DADADA;211 border-radius: 12px;212 }213</style>214</head>215<body>216<div id="render-target">217 218 <!-- Status bar -->219 <div class="status-bar">220 <div style="font-weight:600;">12:26</div>221 <div class="status-icons">222 <!-- simple sun icon -->223 <svg class="status-icon" viewBox="0 0 24 24">224 <circle cx="12" cy="12" r="5" fill="#B0B0B0"></circle>225 </svg>226 <!-- small circle icon -->227 <svg class="status-icon" viewBox="0 0 24 24">228 <circle cx="12" cy="12" r="8" fill="#B0B0B0" opacity="0.5"></circle>229 </svg>230 <!-- LR badge -->231 <div style="font-size:28px; color:#B0B0B0; border:1px solid #CFCFCF; padding:4px 8px; border-radius:6px;">LR</div>232 <!-- dot -->233 <svg class="status-icon" viewBox="0 0 24 24">234 <circle cx="12" cy="12" r="3" fill="#B0B0B0"></circle>235 </svg>236 <!-- search dot as placeholder -->237 <svg class="status-icon" viewBox="0 0 24 24">238 <path d="M10 2a8 8 0 1 0 5.3 14.2l5.4 5.4 2-2-5.4-5.4A8 8 0 0 0 10 2z" fill="#B0B0B0"></path>239 </svg>240 <!-- wifi -->241 <svg class="status-icon" viewBox="0 0 24 24">242 <path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M9 16c2-2 6-2 8 0M12 20a2 2 0 1 0 0-0.1" stroke="#B0B0B0" stroke-width="2" fill="none" stroke-linecap="round"></path>243 </svg>244 <!-- battery -->245 <svg class="status-icon" viewBox="0 0 32 24">246 <rect x="2" y="6" width="24" height="12" rx="2" ry="2" stroke="#B0B0B0" fill="none" stroke-width="2"></rect>247 <rect x="4" y="8" width="18" height="8" fill="#B0B0B0"></rect>248 <rect x="26" y="9" width="4" height="6" fill="#B0B0B0"></rect>249 </svg>250 </div>251 </div>252 253 <!-- App header -->254 <div class="app-header">255 <div class="back-btn">256 <svg viewBox="0 0 24 24">257 <path d="M15 18L9 12l6-6" stroke="#4A4A4A" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>258 </svg>259 </div>260 <div class="header-title">Vehicle Overview</div>261 </div>262 263 <!-- Hero image -->264 <div class="hero">265 <div class="img">[IMG: Blue Audi A3 Sedan in cityscape]</div>266 267 <div class="heart">268 <svg viewBox="0 0 24 24">269 <path d="M12 21s-7-4.8-9-8.7C1.2 9.7 3.3 7 6.5 7c2 0 3.2 1.1 3.5 1.7C10.3 8.1 11.5 7 13.5 7 16.7 7 18.8 9.7 21 12.3 19 16.2 12 21 12 21z" fill="none" stroke="#FFFFFF" stroke-width="2"></path>270 </svg>271 </div>272 273 <div class="gallery-pill">274 <svg class="grid-icon" viewBox="0 0 24 24">275 <rect x="3" y="3" width="7" height="7" fill="#fff" opacity="0.9"></rect>276 <rect x="14" y="3" width="7" height="7" fill="#fff" opacity="0.9"></rect>277 <rect x="3" y="14" width="7" height="7" fill="#fff" opacity="0.9"></rect>278 <rect x="14" y="14" width="7" height="7" fill="#fff" opacity="0.9"></rect>279 </svg>280 <span>Gallery</span>281 </div>282 </div>283 284 <!-- Content area -->285 <div class="content">286 <div class="title">Used 2022 A3 Sedan</div>287 288 <div class="label">Style</div>289 <div class="style-main">Premium 4dr Car w/40 TFSI</div>290 <div class="style-sub">291 <span>2.0L 4-cyl. Turbo 7-speed Automated Manual w/40 TFSI</span>292 <svg viewBox="0 0 24 24" width="44" height="44">293 <path d="M6 9l6 6 6-6" stroke="#777" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>294 </svg>295 </div>296 297 <div class="divider"></div>298 299 <div class="price-row">300 <div class="price-card">301 <div class="sub">Trade-In</div>302 <div class="val">$18,654</div>303 </div>304 <div class="price-card">305 <div class="sub">Private Party</div>306 <div class="val">$20,529</div>307 </div>308 <div class="price-card">309 <div class="sub">Dealer Retail</div>310 <div class="val">$22,819</div>311 </div>312 </div>313 314 <div class="cta">SEE ALL FOR SALE</div>315 316 <div class="section-title">What's new for 2022</div>317 <ul class="bullets">318 <li>Kicks off the third-generation A3</li>319 <li>Efficient mild hybrid powertrain</li>320 <li>Updated in-car tech and driver aids</li>321 <li>All-new interior and exterior design</li>322 </ul>323 </div>324 325 <!-- Bottom navigation -->326 <div class="bottom-nav">327 <div class="nav-item">328 <svg viewBox="0 0 24 24">329 <path d="M4 12h16l-2-4H6l-2 4z" fill="#8A8A8A"></path>330 <circle cx="7" cy="17" r="2" fill="#8A8A8A"></circle>331 <circle cx="17" cy="17" r="2" fill="#8A8A8A"></circle>332 </svg>333 <div>Buy a Car</div>334 </div>335 <div class="nav-item active">336 <svg viewBox="0 0 24 24">337 <circle cx="10" cy="10" r="6" stroke="#1976D2" stroke-width="2" fill="none"></circle>338 <path d="M15 15l6 6" stroke="#1976D2" stroke-width="2" stroke-linecap="round"></path>339 </svg>340 <div>Research</div>341 </div>342 <div class="nav-item">343 <svg viewBox="0 0 24 24">344 <path d="M12 21s-7-4.8-9-8.7C1.2 9.7 3.3 7 6.5 7c2 0 3.2 1.1 3.5 1.7C10.3 8.1 11.5 7 13.5 7 16.7 7 18.8 9.7 21 12.3 19 16.2 12 21 12 21z" fill="#8A8A8A"></path>345 </svg>346 <div>Dashboard</div>347 </div>348 <div class="nav-item">349 <svg viewBox="0 0 24 24">350 <circle cx="6" cy="12" r="2" fill="#8A8A8A"></circle>351 <circle cx="12" cy="12" r="2" fill="#8A8A8A"></circle>352 <circle cx="18" cy="12" r="2" fill="#8A8A8A"></circle>353 </svg>354 <div>More</div>355 </div>356 </div>357 358 <div class="gesture-bar"></div>359</div>360</body>361</html>