GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1440, initial-scale=1.0">6<title>Mahindra Scorpio N - Colours | Brochure | Mileage</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1440px;11 height: 3120px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 color: #2f2f2f;16 }17 18 /* Status bar */19 .status-bar {20 height: 150px;21 background: #7b7b7b;22 color: #fff;23 display: flex;24 align-items: center;25 padding: 0 40px;26 font-size: 42px;27 box-sizing: border-box;28 }29 .status-left { flex: 1; }30 .status-center { flex: 2; text-align: center; opacity: 0.9; font-size: 36px; }31 .status-right {32 flex: 1;33 display: flex; justify-content: flex-end; align-items: center; gap: 26px;34 }35 .icon-battery, .icon-wifi, .icon-signal {36 width: 46px; height: 30px; display: inline-block; background: rgba(255,255,255,0.85);37 border-radius: 4px;38 }39 40 /* Tabs */41 .tabs {42 height: 160px;43 background: #ffffff;44 display: flex;45 align-items: flex-end;46 padding: 0 40px;47 box-shadow: 0 2px 6px rgba(0,0,0,0.06);48 }49 .tab {50 flex: 1;51 text-align: center;52 padding: 0 10px 36px;53 font-size: 46px;54 letter-spacing: 0.3px;55 color: #777;56 }57 .tab.active {58 color: #0aa79d;59 border-bottom: 8px solid #0aa79d;60 font-weight: 600;61 }62 63 /* Car image placeholder */64 .car-hero {65 height: 420px;66 background: #E0E0E0;67 border: 1px solid #BDBDBD;68 margin: 0 0 10px 0;69 display: flex; align-items: flex-end; justify-content: center;70 color: #757575;71 font-size: 44px;72 }73 74 /* Colour swatches */75 .swatches-wrap {76 padding: 40px 60px 10px;77 }78 .swatches {79 display: flex; align-items: center; gap: 34px;80 }81 .swatch, .swatch-empty, .swatch-arrow {82 width: 120px; height: 120px; border-radius: 16px;83 display: flex; align-items: center; justify-content: center;84 }85 .swatch-empty {86 background: #f1f1f1; border: 2px solid #e6e6e6;87 }88 .swatch {89 border: 2px solid #d9d9d9;90 }91 .swatch.gray { background: #d9d9de; }92 .swatch.red { background: #bf1d19; }93 .swatch.green { background: #7b8d76; }94 .swatch.brown { background: #6d1d0e; }95 .swatch.dark { background: #3f3f3f; }96 .swatch-arrow {97 background: #f4f4f4; border: 2px solid #e7e7e7;98 }99 .swatch-arrow svg { width: 46px; height: 46px; stroke: #8b8b8b; }100 101 .color-name {102 text-align: center;103 font-size: 56px;104 margin: 26px 0 18px;105 color: #4a4a4a;106 }107 108 /* Ad row */109 .ad-row {110 display: flex; align-items: center; justify-content: space-between;111 padding: 24px 60px;112 }113 .app-info {114 display: flex; align-items: center; gap: 26px;115 }116 .app-icon {117 width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;118 border-radius: 26px; color: #757575; display:flex; align-items:center; justify-content:center;119 font-size: 36px;120 }121 .app-text b { font-size: 48px; color: #2f2f2f; display:block; }122 .app-text span { font-size: 38px; color: #1a9f67; display:block; margin-top: 6px; }123 .btn-open {124 background: #0a7f5a;125 color: #fff;126 padding: 28px 80px;127 font-size: 44px;128 border-radius: 80px;129 border: none;130 cursor: default;131 }132 133 /* Brochure card */134 .card {135 margin: 18px 60px 30px;136 border: 2px solid #e3e3e3;137 border-radius: 18px;138 padding: 36px;139 background: #fbfbfb;140 }141 .card-header {142 display: flex; gap: 28px; align-items: center; margin-bottom: 14px;143 }144 .doc-icon {145 width: 120px; height: 120px; border-radius: 16px; border: 2px dashed #0aa79d;146 display:flex; align-items:center; justify-content:center; color:#0aa79d;147 font-size: 56px;148 }149 .card-title {150 font-size: 54px; font-weight: 700; color:#2f2f2f;151 }152 .card-desc {153 font-size: 40px; color: #666; line-height: 1.35; margin: 10px 0 22px 0;154 }155 .download-link {156 display: inline-flex; align-items: center; gap: 16px;157 color: #0b6bd6; font-size: 46px; font-weight: 600; text-decoration: none;158 }159 .download-link svg { width: 42px; height: 42px; stroke: #0b6bd6; }160 161 /* Section heading */162 .section-title {163 font-size: 64px; font-weight: 700; margin: 54px 60px 26px; color:#333;164 }165 166 /* Table */167 .mileage-table {168 width: calc(100% - 120px);169 margin: 0 60px 280px;170 border-collapse: collapse;171 font-size: 44px;172 color: #404040;173 }174 .mileage-table th, .mileage-table td {175 border: 2px solid #ececec;176 padding: 28px 26px;177 vertical-align: middle;178 }179 .mileage-table th {180 background: #fafafa;181 color: #7a7a7a;182 font-weight: 700;183 text-align: left;184 }185 .small-meta { color: #9a9a9a; font-size: 34px; display:block; }186 187 .col-right { text-align: right; }188 189 /* Sticky bottom action bar */190 .sticky-actions {191 position: absolute; left: 0; right: 0; bottom: 78px;192 height: 170px;193 display: flex;194 box-shadow: 0 -4px 10px rgba(0,0,0,0.08);195 }196 .action-left, .action-right {197 flex: 1; display:flex; align-items:center; justify-content:center; font-size: 54px; font-weight: 700;198 }199 .action-left {200 background: #ffffff; color: #0aa79d; border-top: 2px solid #e9e9e9;201 }202 .action-right {203 background: #e54424; color: #fff;204 }205 206 /* Gesture bar */207 .gesture-bar {208 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);209 width: 360px; height: 16px; background: #111; opacity: 0.25; border-radius: 10px;210 }211 212 /* Simple utility */213 .check-svg { width: 54px; height: 54px; opacity: 0.5; }214 .info-dot {215 display:inline-flex; align-items:center; justify-content:center;216 width: 38px; height: 38px; border-radius: 50%; background:#f2f2f2; border:1px solid #e1e1e1; color:#999; font-size:28px; line-height:1; margin-left: 8px;217 }218</style>219</head>220<body>221<div id="render-target">222 223 <!-- Status bar -->224 <div class="status-bar">225 <div class="status-left">3:32</div>226 <div class="status-center">• • •</div>227 <div class="status-right">228 <div class="icon-signal"></div>229 <div class="icon-wifi"></div>230 <div class="icon-battery"></div>231 </div>232 </div>233 234 <!-- Tabs -->235 <div class="tabs">236 <div class="tab active">COLOURS</div>237 <div class="tab">BROCHURE</div>238 <div class="tab">MILEAGE</div>239 <div class="tab">USER REVIEW</div>240 </div>241 242 <!-- Car image placeholder -->243 <div class="car-hero">[IMG: Car - top cropped view]</div>244 245 <!-- Swatches -->246 <div class="swatches-wrap">247 <div class="swatches">248 <div class="swatch-empty">249 <svg class="check-svg" viewBox="0 0 24 24" fill="none" stroke="#9e9e9e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">250 <path d="M4 13l4 4L20 7"/>251 </svg>252 </div>253 <div class="swatch gray" title="Grey"></div>254 <div class="swatch red" title="Red"></div>255 <div class="swatch green" title="Green"></div>256 <div class="swatch brown" title="Brown"></div>257 <div class="swatch dark" title="Dark Grey"></div>258 <div class="swatch-arrow" title="Next">259 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">260 <path d="M9 18l6-6-6-6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>261 </svg>262 </div>263 </div>264 </div>265 266 <div class="color-name">Everest White</div>267 268 <!-- Ad row -->269 <div class="ad-row">270 <div class="app-info">271 <div class="app-icon">[IMG]</div>272 <div class="app-text">273 <b>Spinny</b>274 <span>Installed</span>275 </div>276 </div>277 <button class="btn-open">Open</button>278 </div>279 280 <!-- Brochure card -->281 <div class="card">282 <div class="card-header">283 <div class="doc-icon">📄</div>284 <div>285 <div class="card-title">Mahindra Scorpio N Brochure</div>286 <div class="card-desc">287 Download Mahindra Scorpio N brochure in just one click to view specs and feature of all the variants of Scorpio N288 </div>289 <a href="#" class="download-link">290 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">291 <path d="M12 3v12"></path>292 <path d="M8 11l4 4 4-4"></path>293 <path d="M4 21h16"></path>294 </svg>295 Download Brochure296 </a>297 </div>298 </div>299 </div>300 301 <!-- Mileage section -->302 <div class="section-title">Mahindra Scorpio N Mileage</div>303 304 <table class="mileage-table">305 <thead>306 <tr>307 <th style="width:30%;">Fuel Type</th>308 <th style="width:25%;">Transmission</th>309 <th style="width:20%;">ARAI Mileage</th>310 <th style="width:25%;">User Reported Mileage <span class="info-dot">i</span></th>311 </tr>312 </thead>313 <tbody>314 <tr>315 <td>316 Petrol <span class="small-meta">(1997 cc)</span>317 </td>318 <td>Manual</td>319 <td class="col-right">-</td>320 <td class="col-right">15 kmpl</td>321 </tr>322 <tr>323 <td>324 Diesel <span class="small-meta">(2184 cc)</span>325 </td>326 <td>Manual</td>327 <td class="col-right">-</td>328 <td class="col-right">14.75 kmpl</td>329 </tr>330 <tr>331 <td>332 Diesel <span class="small-meta">(2184 cc)</span>333 </td>334 <td>Automatic (TC)</td>335 <td class="col-right">-</td>336 <td class="col-right">14.75 kmpl</td>337 </tr>338 </tbody>339 </table>340 341 <!-- Sticky footer actions -->342 <div class="sticky-actions">343 <div class="action-left">Contact Dealer</div>344 <div class="action-right">Get January Offers</div>345 </div>346 347 <!-- Gesture bar -->348 <div class="gesture-bar"></div>349 350</div>351</body>352</html>