GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Vehicle Overview - Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #F2F2F2;14    color: #333;15  }16 17  /* Status bar */18  .status-bar {19    height: 120px;20    background: #E9E9E9;21    display: flex;22    align-items: center;23    padding: 0 36px;24    font-size: 36px;25    color: #9E9E9E;26  }27  .status-icons {28    margin-left: auto;29    display: flex;30    align-items: center;31    gap: 28px;32  }33  .status-dot {34    width: 26px; height: 26px; background: #CFCFCF; border-radius: 50%;35  }36 37  /* App bar */38  .app-bar {39    height: 150px;40    background: #FFFFFF;41    display: flex;42    align-items: center;43    border-bottom: 1px solid #E0E0E0;44    padding: 0 36px;45  }46  .back-btn {47    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; margin-right: 16px;48  }49  .app-title {50    font-size: 56px; font-weight: 600; color: #555;51  }52 53  /* Hero image */54  .hero {55    position: relative;56    width: 100%;57    height: 560px;58    background: #E0E0E0;59    border-top: 1px solid #BDBDBD;60    border-bottom: 1px solid #BDBDBD;61    display: flex;62    align-items: center;63    justify-content: center;64    color: #757575;65    font-size: 34px;66  }67  .hero .heart {68    position: absolute;69    right: 36px;70    top: 40px;71    width: 70px; height: 70px;72    background: rgba(255,255,255,0.85);73    border-radius: 50%;74    display: flex; align-items: center; justify-content: center;75    box-shadow: 0 2px 6px rgba(0,0,0,0.15);76  }77  .gallery-pill {78    position: absolute;79    right: 36px;80    bottom: 24px;81    background: rgba(80,80,80,0.85);82    color: #fff;83    padding: 18px 26px;84    border-radius: 12px;85    display: flex;86    align-items: center;87    gap: 14px;88    font-size: 34px;89  }90  .gallery-pill svg { fill: none; stroke: #fff; stroke-width: 5; }91 92  /* Content */93  .content {94    background: #FFFFFF;95    padding: 40px 36px 24px 36px;96  }97  .main-title {98    font-size: 66px; font-weight: 700; color: #666; margin: 8px 0 30px 0;99  }100  .section-label {101    font-size: 40px; color: #888; margin-top: 10px;102  }103  .style-name {104    font-size: 48px; font-weight: 600; margin: 12px 0 8px 0; color: #666;105  }106  .style-desc {107    font-size: 34px; color: #7E7E7E;108    display: flex; align-items: center; justify-content: space-between;109  }110  .divider {111    margin: 30px 0 26px; border-top: 1px solid #E2E2E2;112  }113  .price-row {114    display: flex; justify-content: space-between; gap: 24px;115    margin-bottom: 34px;116  }117  .price-card {118    flex: 1;119  }120  .price-card .label {121    font-size: 34px; color: #8A8A8A; margin-bottom: 8px;122  }123  .price-card .amount {124    font-size: 60px; font-weight: 700; color: #444;125  }126  .cta-btn {127    width: 100%;128    background: #8BC34A;129    color: #fff;130    text-align: center;131    font-size: 40px;132    font-weight: 700;133    padding: 28px 0;134    border-radius: 18px;135    box-shadow: 0 4px 0 rgba(0,0,0,0.12);136    margin: 6px 0 26px 0;137  }138  .section-title {139    font-size: 56px; font-weight: 700; color: #666; margin: 30px 0 14px 0;140  }141  .bullets {142    color: #666; font-size: 36px; line-height: 56px; margin-bottom: 28px;143  }144 145  /* Bottom nav */146  .bottom-nav {147    position: absolute;148    left: 0; right: 0; bottom: 80px;149    height: 180px;150    background: #FFFFFF;151    border-top: 1px solid #E0E0E0;152    display: flex; justify-content: space-around; align-items: center;153  }154  .nav-item {155    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;156    color: #777;157    width: 200px;158  }159  .nav-item svg { width: 60px; height: 60px; }160  .nav-item .label { font-size: 32px; }161  .nav-item.active { color: #1E73D4; }162  .home-indicator {163    position: absolute; left: 50%; transform: translateX(-50%);164    bottom: 20px; width: 320px; height: 16px; background: #DADADA; border-radius: 10px;165  }166</style>167</head>168<body>169<div id="render-target">170  <!-- Status bar -->171  <div class="status-bar">172    <div>12:27</div>173    <div class="status-icons">174      <div class="status-dot"></div>175      <div class="status-dot"></div>176      <div class="status-dot"></div>177      <div class="status-dot"></div>178      <div class="status-dot"></div>179    </div>180  </div>181 182  <!-- App bar -->183  <div class="app-bar">184    <div class="back-btn">185      <svg width="48" height="48" viewBox="0 0 24 24">186        <path d="M15 6 L9 12 L15 18" stroke="#555" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>187      </svg>188    </div>189    <div class="app-title">Vehicle Overview</div>190  </div>191 192  <!-- Hero image -->193  <div class="hero">194    <div>[IMG: Blue Audi A3 sedan on city rooftop]</div>195    <div class="heart">196      <svg width="36" height="36" viewBox="0 0 24 24">197        <path d="M12 20 C12 20 5 15 5 10 C5 7.5 7 6 9 6 C10.5 6 12 7.2 12 8.5 C12 7.2 13.5 6 15 6 C17 6 19 7.5 19 10 C19 15 12 20 12 20 Z" fill="none" stroke="#666" stroke-width="2"></path>198      </svg>199    </div>200    <div class="gallery-pill">201      <svg width="36" height="36" viewBox="0 0 24 24">202        <rect x="3" y="3" width="8" height="8"></rect>203        <rect x="13" y="3" width="8" height="8"></rect>204        <rect x="3" y="13" width="8" height="8"></rect>205        <rect x="13" y="13" width="8" height="8"></rect>206      </svg>207      <span>Gallery</span>208    </div>209  </div>210 211  <!-- Main content -->212  <div class="content">213    <div class="main-title">Used 2022 A3 Sedan</div>214 215    <div class="section-label">Style</div>216    <div class="style-name">Premium 4dr Car w/40 TFSI</div>217    <div class="style-desc">218      <span>2.0L 4-cyl. Turbo 7-speed Automated Manual w/40 TFSI</span>219      <svg width="32" height="32" viewBox="0 0 24 24">220        <path d="M6 9 L12 15 L18 9" stroke="#888" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>221      </svg>222    </div>223 224    <div class="divider"></div>225 226    <div class="price-row">227      <div class="price-card">228        <div class="label">Trade-In</div>229        <div class="amount">$18,654</div>230      </div>231      <div class="price-card">232        <div class="label">Private Party</div>233        <div class="amount">$20,529</div>234      </div>235      <div class="price-card">236        <div class="label">Dealer Retail</div>237        <div class="amount">$22,819</div>238      </div>239    </div>240 241    <div class="cta-btn">SEE ALL FOR SALE</div>242 243    <div class="divider"></div>244 245    <div class="section-title">What's new for 2022</div>246    <div class="bullets">247      • Kicks off the third-generation A3<br>248      • Efficient mild hybrid powertrain<br>249      • Updated in-car tech and driver aids<br>250      • All-new interior and exterior design251    </div>252 253    <div class="section-label" style="font-weight:700; color:#666; font-size:46px;">Pros</div>254  </div>255 256  <!-- Bottom navigation -->257  <div class="bottom-nav">258    <div class="nav-item">259      <svg viewBox="0 0 24 24">260        <path d="M3 16 L5 10 L19 10 L21 16 Z" fill="none" stroke="#777" stroke-width="2"></path>261        <circle cx="7" cy="17" r="2" fill="#777"></circle>262        <circle cx="17" cy="17" r="2" fill="#777"></circle>263      </svg>264      <div class="label">Buy a Car</div>265    </div>266    <div class="nav-item active">267      <svg viewBox="0 0 24 24">268        <circle cx="11" cy="11" r="7" fill="none" stroke="#1E73D4" stroke-width="2"></circle>269        <path d="M16 16 L21 21" stroke="#1E73D4" stroke-width="2" stroke-linecap="round"></path>270      </svg>271      <div class="label">Research</div>272    </div>273    <div class="nav-item">274      <svg viewBox="0 0 24 24">275        <path d="M12 20 C12 20 5 15 5 10 C5 7.5 7 6 9 6 C10.5 6 12 7.2 12 8.5 C12 7.2 13.5 6 15 6 C17 6 19 7.5 19 10 C19 15 12 20 12 20 Z" fill="#777"></path>276      </svg>277      <div class="label">Dashboard</div>278    </div>279    <div class="nav-item">280      <svg viewBox="0 0 24 24">281        <circle cx="5" cy="12" r="2" fill="#777"></circle>282        <circle cx="12" cy="12" r="2" fill="#777"></circle>283        <circle cx="19" cy="12" r="2" fill="#777"></circle>284      </svg>285      <div class="label">More</div>286    </div>287  </div>288 289  <div class="home-indicator"></div>290</div>291</body>292</html>