GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>CarTrade - Audi Q7 Reviews</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 box-sizing: border-box;14 }15 16 /* Header */17 .topbar {18 height: 140px;19 padding: 30px 36px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 border-bottom: 1px solid #e7e7e7;24 }25 .left-header {26 display: flex;27 align-items: center;28 gap: 28px;29 }30 .hamburger {31 width: 54px; height: 54px; border-radius: 8px;32 border: 2px solid #d6d6d6;33 display: flex; align-items: center; justify-content: center;34 }35 .hamburger svg { width: 32px; height: 32px; }36 .logo {37 font-weight: 700;38 font-size: 42px;39 letter-spacing: 0.2px;40 }41 .logo .dot {42 color: #d42b2b;43 }44 .right-header {45 display: flex; align-items: center; gap: 28px;46 }47 .icon-btn {48 width: 60px; height: 60px; border: 2px solid #d6d6d6; border-radius: 50%;49 display: flex; align-items: center; justify-content: center;50 }51 .icon-btn svg { width: 32px; height: 32px; }52 53 /* Tabs */54 .tabs {55 height: 110px;56 border-bottom: 1px solid #e7e7e7;57 display: flex;58 align-items: center;59 padding: 0 28px;60 gap: 36px;61 color: #2f2f2f;62 font-size: 32px;63 letter-spacing: 0.3px;64 }65 .tab-item { color: #373737; }66 .tab-item.active { font-weight: 700; }67 68 /* Page Title */69 .page-title {70 font-size: 56px;71 font-weight: 700;72 color: #1e2a36;73 margin: 60px 36px 24px;74 }75 76 /* Car block */77 .car-info {78 display: flex;79 padding: 20px 36px 10px;80 align-items: center;81 gap: 28px;82 }83 .car-image {84 width: 260px; height: 160px;85 background: #E0E0E0; border: 1px solid #BDBDBD;86 display: flex; align-items: center; justify-content: center;87 color: #757575; font-size: 26px;88 border-radius: 8px;89 }90 .car-details {91 flex: 1;92 }93 .brand {94 font-size: 36px; color: #2b2b2b; margin-bottom: 8px;95 }96 .model-row {97 display: flex; align-items: center; gap: 12px;98 margin-bottom: 18px;99 }100 .model-name { font-size: 46px; font-weight: 700; color: #1f2c3b; }101 .model-row svg { width: 22px; height: 22px; }102 .rating-pill {103 margin-top: 6px;104 width: 92px; height: 56px; background: #2CB7A3;105 border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: #fff; font-weight: 700; font-size: 34px;106 }107 .rating-pill svg { width: 28px; height: 28px; }108 .price {109 margin-top: 22px;110 font-size: 42px; font-weight: 700; color: #1c2b38;111 }112 .onwards {113 font-size: 32px; color: #7a7a7a; margin-left: 12px; font-weight: 500;114 }115 116 /* Section title */117 .section-title {118 font-size: 44px;119 font-weight: 700;120 color: #1f2a36;121 margin: 54px 36px 22px;122 }123 124 /* Rating Card */125 .rating-card {126 margin: 0 36px;127 border: 1px solid #e5e5e5;128 border-radius: 16px;129 padding: 30px;130 }131 .rating-row {132 display: flex; align-items: center; gap: 24px;133 }134 .big-star {135 width: 70px; height: 70px; background: #e6f7f2; border-radius: 12px;136 display: flex; align-items: center; justify-content: center;137 border: 1px solid #d9efe9;138 }139 .score-text { font-size: 48px; font-weight: 700; color: #1f2c3a; }140 .outof { font-size: 40px; color: #606770; margin-left: 6px; }141 .reviews-link { margin-left: 30px; font-size: 36px; color: #2171c1; }142 .sub-ratings {143 display: flex; justify-content: space-between; margin-top: 34px;144 }145 .circle-rate {146 width: 150px; height: 150px; border-radius: 50%;147 border: 10px solid #e8e8e8;148 display: flex; align-items: center; justify-content: center;149 font-size: 48px; font-weight: 700; color: #1a2a38;150 }151 .circle-rate.green { border-color: #43c7b3; }152 .circle-rate.blue { border-color: #8692a4; }153 .sub-label {154 text-align: center; margin-top: 18px; font-size: 34px; color: #4b4f56;155 }156 157 /* Outline button */158 .outline-btn {159 width: calc(100% - 72px);160 margin: 28px 36px;161 height: 120px;162 border: 3px solid #cf2f2f;163 border-radius: 16px;164 color: #cf2f2f;165 font-size: 44px; font-weight: 700;166 display: flex; align-items: center; justify-content: center;167 }168 169 /* Reviews list header */170 .list-header {171 font-size: 46px; font-weight: 700; color: #1f2a36;172 margin: 40px 36px 16px;173 }174 .review-item {175 margin: 0 36px;176 border-top: 1px solid #e7e7e7;177 padding-top: 20px;178 }179 .badge {180 display: inline-flex; align-items: center; gap: 10px;181 background: #2CB7A3; color: #fff; font-weight: 700;182 border-radius: 12px; height: 56px; padding: 0 18px; font-size: 34px;183 }184 .badge svg { width: 28px; height: 28px; }185 .review-title {186 display: inline-block;187 margin-left: 20px;188 font-size: 40px; font-weight: 700; color: #1f2c3a;189 }190 .meta {191 margin-top: 18px; color: #6b6f76; font-size: 32px;192 }193 .review-text {194 margin-top: 18px; font-size: 36px; line-height: 1.5; color: #2d3137;195 }196 .read-more {197 margin-top: 18px; font-size: 38px; color: #1877f2; text-align: right;198 }199</style>200</head>201<body>202<div id="render-target">203 204 <!-- Header -->205 <div class="topbar">206 <div class="left-header">207 <div class="hamburger">208 <svg viewBox="0 0 24 24">209 <rect x="3" y="6" width="18" height="2" fill="#666"/>210 <rect x="3" y="11" width="18" height="2" fill="#666"/>211 <rect x="3" y="16" width="18" height="2" fill="#666"/>212 </svg>213 </div>214 <div class="logo">Car<span class="dot">T</span>rade</div>215 </div>216 <div class="right-header">217 <div class="icon-btn">218 <svg viewBox="0 0 24 24">219 <circle cx="11" cy="11" r="7" stroke="#666" stroke-width="2" fill="none"/>220 <line x1="16.5" y1="16.5" x2="21" y2="21" stroke="#666" stroke-width="2"/>221 </svg>222 </div>223 <div class="icon-btn">224 <svg viewBox="0 0 24 24">225 <path d="M12 2C8 2 5 5 5 9c0 6 7 13 7 13s7-7 7-13c0-4-3-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="#666"/>226 </svg>227 </div>228 </div>229 </div>230 231 <!-- Tabs -->232 <div class="tabs">233 <div class="tab-item active">Q7</div>234 <div class="tab-item">VERSIONS</div>235 <div class="tab-item">IMAGES</div>236 <div class="tab-item">COLOURS</div>237 <div class="tab-item">MILEAGE</div>238 <div class="tab-item">PRICE</div>239 </div>240 241 <!-- Title -->242 <div class="page-title">User Reviews on Audi Q7</div>243 244 <!-- Car Info -->245 <div class="car-info">246 <div class="car-image">[IMG: Audi Q7 Car]</div>247 <div class="car-details">248 <div class="brand">Audi</div>249 <div class="model-row">250 <div class="model-name">Q7</div>251 <svg viewBox="0 0 24 24">252 <polyline points="8,5 16,12 8,19" fill="none" stroke="#6d7a87" stroke-width="2"/>253 </svg>254 </div>255 <div class="rating-pill">256 <svg viewBox="0 0 24 24">257 <path d="M12 2l3 7h7l-5.6 4.2L18.5 22 12 17.7 5.5 22l2.1-8.8L2 9h7z" fill="#fff"/>258 </svg>259 <span>4</span>260 </div>261 <div class="price">₹ 84.70 Lakh <span class="onwards">Onwards</span></div>262 </div>263 </div>264 265 <!-- Overall Rating Section -->266 <div class="section-title">Overall Q7 Rating</div>267 <div class="rating-card">268 <div class="rating-row">269 <div class="big-star">270 <svg viewBox="0 0 24 24">271 <path d="M12 2l3 7h7l-5.6 4.2L18.5 22 12 17.7 5.5 22l2.1-8.8L2 9h7z" fill="#2CB7A3"/>272 </svg>273 </div>274 <div class="score-text">4<span class="outof">/5</span></div>275 <div class="reviews-link">1 Reviews</div>276 </div>277 278 <div class="sub-ratings">279 <div style="text-align:center;">280 <div class="circle-rate green">4</div>281 <div class="sub-label">Exterior</div>282 </div>283 <div style="text-align:center;">284 <div class="circle-rate">5</div>285 <div class="sub-label">Interior</div>286 </div>287 <div style="text-align:center;">288 <div class="circle-rate blue">3</div>289 <div class="sub-label">Ride Qlty</div>290 </div>291 </div>292 </div>293 294 <div class="outline-btn">Write Review & Win</div>295 296 <!-- Reviews List -->297 <div class="list-header">All 1 Reviews for Audi Q7</div>298 299 <div class="review-item">300 <div>301 <span class="badge">302 <svg viewBox="0 0 24 24">303 <path d="M12 2l3 7h7l-5.6 4.2L18.5 22 12 17.7 5.5 22l2.1-8.8L2 9h7z" fill="#fff"/>304 </svg>305 4306 </span>307 <span class="review-title">amazing</span>308 </div>309 <div class="meta">1 year ago | shlok</div>310 <div class="review-text">311 its a compilation of both luxury and performance, driving it was a great experience. Aarogya Cares thank you.312 </div>313 <div class="read-more">Read More</div>314 </div>315 316</div>317</body>318</html>